{"_id":"@darksnow-ui/header","name":"@darksnow-ui/header","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/header","version":"1.0.0","description":"Header component for DarkSnow UI","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/header.css","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./css":"./dist/header.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@darksnow-ui/core":"0.1.0"},"devDependencies":{"@types/react":"^19.1.6","@types/react-dom":"^19.1.6","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.0.0","typescript":"~5.8.3","@darksnow-ui/core":"0.1.0"},"dependencies":{"clsx":"^2.1.1"},"scripts":{"build":"tsup","clean":"rm -rf dist","dev":"tsup --watch"},"_id":"@darksnow-ui/header@1.0.0","_integrity":"sha512-uHFu4nB79gRuatTLs/J1QHrtxTR0PNvER687HgdrUGY3ZF2fkzmf5pJQkfIuGfIVkH3B2rHZQ0Sq2xNAQ+xJjg==","_resolved":"/tmp/785d3f18efb57d9d7ad65a3f6ae24090/darksnow-ui-header-1.0.0.tgz","_from":"file:darksnow-ui-header-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-uHFu4nB79gRuatTLs/J1QHrtxTR0PNvER687HgdrUGY3ZF2fkzmf5pJQkfIuGfIVkH3B2rHZQ0Sq2xNAQ+xJjg==","shasum":"1f8b72f0600fdb09ee0dc279ae2885ec59fa8afd","tarball":"https://registry.npmjs.org/@darksnow-ui/header/-/header-1.0.0.tgz","fileCount":4,"unpackedSize":7032,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDoJHYT4eMa69ABL/1TqoU8lDtbywMfLgHtwPzjjN6GQQIhAITCTrTP+5kn9khmbs81GNog8sP9eGurycCpAF+84U0N"}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/header_1.0.0_1749338972761_0.028200693016395162"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:32.657Z","1.0.0":"2025-06-07T23:29:32.976Z","modified":"2025-06-07T23:29:33.314Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"Header component for DarkSnow UI","readme":"# @darksnow-ui/header\n\nA flexible header component for DarkSnow UI with customizable layout, height variants, and styling options.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/header\n```\n\n## Usage\n\n```tsx\nimport { Header } from \"@darksnow-ui/header\"\nimport \"@darksnow-ui/header/css\"\n\nfunction App() {\n  return (\n    <Header\n      logo={<img src=\"/logo.svg\" alt=\"Logo\" />}\n      title=\"My Application\"\n      actions={\n        <>\n          <button>Sign In</button>\n          <button>Sign Up</button>\n        </>\n      }\n      height=\"md\"\n      variant=\"default\"\n    />\n  )\n}\n```\n\n## Props\n\n| Prop        | Type                                       | Default     | Description                                  |\n| ----------- | ------------------------------------------ | ----------- | -------------------------------------------- |\n| `logo`      | `ReactNode`                                | -           | Logo element to display on the left side     |\n| `title`     | `string`                                   | -           | Title text to display next to the logo       |\n| `actions`   | `ReactNode`                                | -           | Action elements to display on the right side |\n| `className` | `string`                                   | -           | Additional CSS classes                       |\n| `height`    | `'sm' \\| 'md' \\| 'lg'`                     | `'md'`      | Height variant (48px, 64px, 80px)            |\n| `variant`   | `'default' \\| 'transparent' \\| 'bordered'` | `'default'` | Visual variant                               |\n\n## Variants\n\n### Height Variants\n\n- `sm`: 48px height\n- `md`: 64px height (default)\n- `lg`: 80px height\n\n### Style Variants\n\n- `default`: White background with shadow\n- `transparent`: Transparent background\n- `bordered`: White background with bottom border\n\n## Dark Mode\n\nThe component automatically adapts to dark mode using CSS media queries.\n","readmeFilename":"README.md","_rev":"1-0b756fa187664e46d216db7754779808"}