{"_id":"@andrewbro/luxify","name":"@andrewbro/luxify","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@andrewbro/luxify","version":"0.1.0","description":"Overlay-based night light for websites with vanilla JS and React APIs.","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"},"./package.json":"./package.json"},"sideEffects":false,"engines":{"node":">=18"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","typecheck":"tsc --noEmit","clean":"rm -rf dist"},"keywords":["night-light","flux","overlay","blue-light","react","accessibility","eye-care"],"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","jsdom":"^25.0.1","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.3.0","typescript":"^5.6.3","vitest":"^2.1.4"},"_id":"@andrewbro/luxify@0.1.0","gitHead":"2b21b2b53ab57c4c1a47cddab74e3b3f8f09d4d2","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-v81+VD7q8YiUo9LncVxABO312ouyCdrOkQxvLecok69d2wZnevfaEnagGKHqiSxFi3idtNPqUXilaCvgJB5sGw==","shasum":"16476437bf197868ffd5ce434fe02e8aeb37b61d","tarball":"https://registry.npmjs.org/@andrewbro/luxify/-/luxify-0.1.0.tgz","fileCount":19,"unpackedSize":127469,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIER9AjfA7FigfHNgsjtkdLEVM09VJOJ1XKVySLoceO/uAiAgNRO7Ieae2BdZZQIzcjhuAtaeeyzxAbcteSlRhzTezA=="}]},"_npmUser":{"name":"andrewbro","email":"ndesign.by@gmail.com"},"directories":{},"maintainers":[{"name":"andrewbro","email":"ndesign.by@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/luxify_0.1.0_1775204874289_0.7881429373672808"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-03T08:27:54.167Z","0.1.0":"2026-04-03T08:27:54.460Z","modified":"2026-04-03T08:27:54.633Z"},"maintainers":[{"name":"andrewbro","email":"ndesign.by@gmail.com"}],"description":"Overlay-based night light for websites with vanilla JS and React APIs.","keywords":["night-light","flux","overlay","blue-light","react","accessibility","eye-care"],"license":"MIT","readme":"```\n ██╗     ██╗   ██╗██╗  ██╗██╗███████╗██╗   ██╗\n ██║     ██║   ██║╚██╗██╔╝██║██╔════╝╚██╗ ██╔╝\n ██║     ██║   ██║ ╚███╔╝ ██║█████╗   ╚████╔╝ \n ██║     ██║   ██║ ██╔██╗ ██║██╔══╝    ╚██╔╝  \n ███████╗╚██████╔╝██╔╝ ██╗██║██║        ██║   \n ╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝        ╚═╝   \n```\n\n## Your Website's Night Light\n\n**Stop hurting your eyes while browsing at night.** \n\n`luxify` transforms any website into a comfortable evening reading experience. Instead of fighting blue light with system settings, bring it right into your web app—instantly. No configuration nightmares. No broken layouts. Just warm, gentle browsing.\n\n### The Problem\n\nIt's 10 PM. You're checking email, reading docs, or browsing your dashboard. Your eyes start burning. You reach for f.lux or Night Shift, but they're global, clunky, and don't work on everything. **What if your app could just... care about your eyes?**\n\n### The Solution\n\n`luxify` adds a warm overlay directly on top of your website. It's:\n\n✨ **Effortless** — One line of code. No setup. No configuration.  \n🎯 **Safe** — Doesn't break clicks, scrolling, modals, or forms.  \n⚡ **Lightweight** — 1.2KB gzipped. TypeScript. Zero dependencies.  \n🔄 **Smart** — Optional auto-scheduling (enable at sunset, disable at sunrise).  \n♾️ **Works Everywhere** — Vanilla JS, React, Next.js, any framework.  \n\nReady to care about your users' eyes?\n\n## Perfect For\n\n**Reading-heavy websites** where users spend hours:\n\n- 📚 **Documentation sites** (Think Docs, API references)\n- 📝 **Blogs & content platforms** (Medium, Substack, news sites)\n- 📊 **Dashboards & analytics** (Long evening work sessions)\n- 💬 **Community forums & chat** (Discord, Slack web version)\n- 🎓 **Learning platforms** (Courses, tutorials, coding challenges)\n\n## Works Great With Light/Dark Themes\n\nAlready have a dark mode? `luxify` is the perfect companion. Layer it on top:\n\n```tsx\nimport { useState } from 'react';\nimport { FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';\n\nexport function App() {\n  const [isDark, setIsDark] = useState(false);\n\n  return (\n    <div data-theme={isDark ? 'dark' : 'light'}>\n      <FluxProvider>\n        {/* Night mode layer on top of your existing theme */}\n        <FluxOverlay \n          intensity={0.22} \n          color={isDark ? '#1a1a2e' : '#ffb76b'}\n        />\n        <YourApp />\n      </FluxProvider>\n    </div>\n  );\n}\n```\n\nOr auto-enable night mode in dark themes, disable in light:\n\n```tsx\nconst [isDark, setIsDark] = useState(false);\n\n<FluxOverlay \n  intensity={isDark ? 0.15 : 0}  // Subtle in dark mode, off in light\n  autoEnable={isDark}\n/>\n```\n\n## Installation\n\n```bash\nnpm install @andrewbro/luxify\n```\n\nIf you want the React API, install React 18+ in your app as usual.\n\n## Quick start\n\n### Vanilla JS\n\n```ts\nimport { createFlux } from '@andrewbro/luxify';\n\nconst flux = createFlux({\n  intensity: 0.25,\n  color: '#ffb45c',\n  autoEnable: true,\n  persist: true\n});\n\nflux.enable();\nflux.disable();\nflux.toggle();\nflux.setIntensity(0.4);\nflux.setColor('#ff9f43');\nflux.destroy();\n```\n\n### React\n\nReact exports live under `@andrewbro/luxify/react` to keep the core entry lightweight for non-React sites.\n\n```tsx\nimport { FluxOverlay, FluxProvider } from '@andrewbro/luxify/react';\n\nfunction App() {\n  return (\n    <FluxProvider options={{ persist: true }}>\n      <FluxOverlay intensity={0.25} color=\"#ffb45c\" />\n      <Page />\n    </FluxProvider>\n  );\n}\n```\n\n```tsx\nimport { useFlux } from '@andrewbro/luxify/react';\n\nfunction Page() {\n  const { toggle, setIntensity } = useFlux();\n\n  return (\n    <div>\n      <button onClick={toggle}>Toggle night mode</button>\n      <button onClick={() => setIntensity(0.35)}>Make it warmer</button>\n    </div>\n  );\n}\n```\n\n## Next.js\n\nUse the React API in a client component.\n\n```tsx\n'use client';\n\nimport { FluxOverlay, FluxProvider } from '@andrewbro/luxify/react';\n\nexport function NightLightShell({ children }: { children: React.ReactNode }) {\n  return (\n    <FluxProvider options={{ persist: true }}>\n      <FluxOverlay\n        intensity={0.22}\n        color=\"#ffb76b\"\n        schedule={{ from: '19:00', to: '07:00', timeZone: 'Europe/Warsaw' }}\n      />\n      {children}\n    </FluxProvider>\n  );\n}\n```\n\n## API\n\n### `createFlux(options?)`\n\nCreates a controller for a single overlay instance.\n\n```ts\ntype FluxOptions = {\n  intensity?: number;\n  color?: string;\n  zIndex?: number;\n  transitionDuration?: number;\n  autoEnable?: boolean;\n  respectReducedMotion?: boolean;\n  id?: string;\n  storageKey?: string;\n  persist?: boolean;\n  schedule?: {\n    from: string;\n    to: string;\n    timeZone?: string;\n  };\n  shouldEnable?: (context: {\n    date: Date;\n    hour: number;\n    minute: number;\n    timeZone?: string;\n  }) => boolean;\n};\n```\n\nDefaults:\n\n- `intensity: 0.22`\n- `color: '#ffb76b'`\n- `zIndex: 2147483646`\n- `transitionDuration: 240`\n- `autoEnable: false`\n- `respectReducedMotion: true`\n- `id: 'luxify-overlay'`\n- `storageKey: 'luxify'`\n- `persist: false`\n\n### Controller methods\n\n- `enable()`\n- `disable()`\n- `toggle()`\n- `destroy()`\n- `setIntensity(value)`\n- `setColor(color)`\n- `isEnabled()`\n- `getState()`\n- `update(options)`\n\n## Scheduling\n\nEnable the overlay during the evening and disable it in the morning:\n\n```ts\ncreateFlux({\n  schedule: {\n    from: '19:00',\n    to: '07:00'\n  }\n});\n```\n\nUse a callback for fully custom logic:\n\n```ts\ncreateFlux({\n  shouldEnable: ({ hour }) => hour >= 19 || hour < 7\n});\n```\n\nIf you need a specific local clock instead of the browser default, pass `schedule.timeZone`.\n\n## Customization\n\n- Use `intensity` between `0` and `1`\n- Use any valid CSS color for `color`\n- Use `zIndex` if your app needs a custom stacking level\n- Use `respectReducedMotion` to disable transitions for users who prefer reduced motion\n- Use `persist: true` to store `enabled`, `intensity`, and `color` in `localStorage`\n\n## Implementation notes\n\n- The overlay uses `position: fixed`, `inset: 0`, `pointer-events: none`, and a very high `z-index`\n- The library reuses the same DOM node per `id`, so repeated mounts do not create duplicate overlays\n- DOM access happens only in the browser, making the package safe to import in SSR environments\n- This is a page-level visual layer only, not a true monitor or operating-system night light\n\n## Development\n\n```bash\nnpm install\nnpm run build\nnpm run test\n```\n","readmeFilename":"README.md","_rev":"1-bcfcf5b56d694741092c941c88b4f309"}