{"_id":"@7sadakonr/lumanav","_rev":"2-fbb44769066a31c7ae3e16574c883ca7","name":"@7sadakonr/lumanav","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@7sadakonr/lumanav","version":"0.1.0","_id":"@7sadakonr/lumanav@0.1.0","maintainers":[{"name":"7sadakonr","email":"7sadakonr@gmail.com"}],"dist":{"shasum":"f5d3a8c260ddd42cc7446def7c97970c03ee58b5","tarball":"https://registry.npmjs.org/@7sadakonr/lumanav/-/lumanav-0.1.0.tgz","fileCount":8,"integrity":"sha512-MAuDldBQXRusXVKljAsBYHIMy7m03afjML3cb72hSEeqbEVuWm4dRYPY8g1V5UkFTe/LNDstDomKquKK+D6QBg==","signatures":[{"sig":"MEYCIQDcBMfXqzeuYNCO417JGaIeLNt9Ghw6LT2Z9kFHrG8SBAIhAPYkDmEkunScGNlmtK+LRMkc5KKRvWO34FtdIqEfSDwy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20353},"main":"dist/lumanav.cjs","type":"module","types":"dist/index.d.ts","module":"dist/lumanav.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/lumanav.js","require":"./dist/lumanav.cjs"},"./style.css":"./dist/lumanav.css"},"gitHead":"2f789846409bd7393a91357e74ec9a045613099d","scripts":{"dev":"vite","lint":"oxlint","build":"vite build && tsc -b tsconfig.lib.json","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"7sadakonr","email":"7sadakonr@gmail.com"},"_npmVersion":"11.13.0","description":"Glassmorphism React Navbar Component with real-time reflection","directories":{},"_nodeVersion":"24.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.0","react":"^19.2.8","oxlint":"^1.75.0","react-dom":"^19.2.8","typescript":"~6.0.2","@types/node":"^24.13.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.4"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"_npmOperationalInternal":{"tmp":"tmp/lumanav_0.1.0_1786953477007_0.8676320735843572","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@7sadakonr/lumanav","version":"0.1.1","description":"Glassmorphism React Navbar Component with real-time reflection","type":"module","main":"dist/lumanav.cjs","module":"dist/lumanav.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/lumanav.js","require":"./dist/lumanav.cjs"},"./style.css":"./dist/lumanav.css"},"scripts":{"dev":"vite","build":"vite build && tsc -b tsconfig.lib.json","lint":"oxlint","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"devDependencies":{"@types/node":"^24.13.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.4","oxlint":"^1.75.0","react":"^19.2.8","react-dom":"^19.2.8","typescript":"~6.0.2","vite":"^8.2.0"},"gitHead":"2f789846409bd7393a91357e74ec9a045613099d","_id":"@7sadakonr/lumanav@0.1.1","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-qYelqbaIXEOoAzmq3LmwMZd/OMKqRNYhRiNl/FpSPTA09NFITajHdzfirS7nLncfvHDS2COpSgOyqQEpaNqzIQ==","shasum":"06d60473df3023c8d20fe9da5f9928802dcf1299","tarball":"https://registry.npmjs.org/@7sadakonr/lumanav/-/lumanav-0.1.1.tgz","fileCount":8,"unpackedSize":20434,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGkwByc7rgoxyqnSGjJCMhvIFO0oRVQ02Zykf1mWoSgGAiAcxwTrQE8SjwIxPmGJLhHRgsJ7+aJZo6rhMB0S+J4IBg=="}]},"_npmUser":{"name":"7sadakonr","email":"7sadakonr@gmail.com"},"directories":{},"maintainers":[{"name":"7sadakonr","email":"7sadakonr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lumanav_0.1.1_1786954413973_0.7040336443315995"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T07:57:56.898Z","modified":"2026-08-17T08:13:35.344Z","0.1.0":"2026-08-17T07:57:57.152Z","0.1.1":"2026-08-17T08:13:34.126Z"},"description":"Glassmorphism React Navbar Component with real-time reflection","maintainers":[{"name":"7sadakonr","email":"7sadakonr@gmail.com"}],"readme":"# @7sadakonr/lumanav\n\nLumanav is a React Component Library that provides a glassmorphism navbar with a dynamic, real-time reflection effect based on the content behind it. It reads the background color and content structure beneath it to render a visually accurate, spatial reflection.\n\n## Installation\n\n```bash\nnpm install @7sadakonr/lumanav\n```\n\n## Quick Start\n\nImport the `Lumanav` component and its CSS file into your React application.\n\n```tsx\nimport { Lumanav } from '@7sadakonr/lumanav'\nimport '@7sadakonr/lumanav/style.css'\n\nfunction App() {\n  return (\n    <div>\n      <Lumanav\n        items={[\n          { id: 'home', label: 'Home', href: '#home' },\n          { id: 'projects', label: 'Projects', href: '#projects' },\n          { id: 'contact', label: 'Contact', href: '#contact' },\n        ]}\n      />\n      <main>\n        {/* Your content here */}\n      </main>\n    </div>\n  )\n}\n```\n\n## Reflection Source\n\nThe `Lumanav` component captures reflections dynamically using a `MutationObserver` and `IntersectionObserver`. To define which elements should be reflected in the navbar, add the `data-reflection-source` attribute to a container element. Alternatively, semantic elements like `<section>` or `<article>` will also be targeted automatically.\n\nExample:\n\n```tsx\n<main>\n  {/* The navbar will read the text/colors in this section to create the reflection */}\n  <section data-reflection-source>\n    <h1>Hero</h1>\n  </section>\n</main>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `items` | `LumanavItem[]` | Required | Array of navigation items to display. |\n| `defaultActiveItem` | `string` | `items[0].id` | The id of the initially active item. |\n| `className` | `string` | `\"\"` | Additional CSS classes for the `<nav>` wrapper. |\n\n### `LumanavItem`\n\n| Property | Type | Description |\n|---|---|---|\n| `id` | `string` | Unique identifier for the item. |\n| `label` | `string` | Display text for the item. |\n| `href` | `string` (optional) | If provided, an `<a>` tag will be rendered instead of `<button>`. |\n\n## Development\n\nThis repository contains both the library code and a demo playground.\n\n- Library code: `src/components/Lumanav/` and `src/index.ts`\n- Demo application: `src/pages/` and `src/App.tsx`\n\nRun the development server for the demo playground:\n\n```bash\nnpm install\nnpm run dev\n```\n\n## Build\n\nTo build the library package for publishing:\n\n```bash\nnpm run build\n```\n\nThe output will be generated in the `dist/` directory, containing ES Module (`.js`), CommonJS (`.cjs`), TypeScript declarations (`.d.ts`), and the bundled CSS (`style.css`).\n\n## Publishing\n\nEnsure you are logged in to npm, then publish:\n\n```bash\nnpm publish\n```\n","readmeFilename":"README.md"}