{"_id":"@anahtiris/flipclock","_rev":"3-fda25d1a6e6c023c25b31f1d086275e5","name":"@anahtiris/flipclock","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@anahtiris/flipclock","version":"1.0.0","keywords":["react","flip-clock","date-picker","time-picker","countdown","animation","component","typescript"],"license":"MIT","_id":"@anahtiris/flipclock@1.0.0","maintainers":[{"name":"anahtiris","email":"anahtiris@gmail.com"}],"dist":{"shasum":"280e1bef5cd4c8953cc79515d4c18173302cb4a4","tarball":"https://registry.npmjs.org/@anahtiris/flipclock/-/flipclock-1.0.0.tgz","fileCount":30,"integrity":"sha512-W2FUK4rdHZuyyj4+DQI7SN5VVka/fx9R6Bm31XzmuI5d8yFpf+TOajvZCMXI5rdzVwdo/rqRTHSMaw+7Zla9Hw==","signatures":[{"sig":"MEQCIFI3FRNOTUiIxkpQeEWPRtzSEE2yRtAUiujAXj61B/X8AiANaS4pJHiOiKQ6obRJ10Dk+UDtp51UkHh4ujyJqIGNtA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62418},"main":"./dist/flipclock.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/flipclock.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/flipclock.js","require":"./dist/flipclock.cjs"},"./dist/flipclock.css":"./dist/flipclock.css"},"gitHead":"f91b57a7aff93d7280a37952700696d94c576129","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc -b && vite build && tsc -p tsconfig.lib.json","preview":"vite preview","storybook":"storybook dev -p 6006","test:watch":"vitest","prepublishOnly":"npm test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"anahtiris","email":"anahtiris@gmail.com"},"_npmVersion":"11.6.2","description":"React date/time picker rendered as a flip clock with smooth 3D CSS animations","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.12","jsdom":"^29.1.1","react":"^19.2.6","eslint":"^10.3.0","vitest":"^4.1.7","globals":"^17.6.0","react-dom":"^19.2.6","storybook":"^10.4.1","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.7","playwright":"^1.60.0","typescript":"~6.0.2","@types/node":"^24.12.3","@types/react":"^19.2.14","vite-plugin-dts":"^5.0.1","@types/react-dom":"^19.2.3","typescript-eslint":"^8.59.2","@vitest/coverage-v8":"^4.1.7","@storybook/addon-mcp":"^0.6.0","@vitejs/plugin-react":"^6.0.1","@storybook/addon-a11y":"^10.4.1","@storybook/addon-docs":"^10.4.1","@storybook/react-vite":"^10.4.1","@testing-library/react":"^16.3.2","@storybook/addon-vitest":"^10.4.1","eslint-plugin-storybook":"^10.4.1","@chromatic-com/storybook":"^5.2.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.7","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/flipclock_1.0.0_1779566326016_0.961498595200756","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@anahtiris/flipclock","version":"1.1.0","keywords":["react","flip-clock","date-picker","time-picker","countdown","animation","component","typescript"],"license":"MIT","_id":"@anahtiris/flipclock@1.1.0","maintainers":[{"name":"anahtiris","email":"anahtiris@gmail.com"}],"homepage":"https://github.com/anahtiris/flipclock#readme","bugs":{"url":"https://github.com/anahtiris/flipclock/issues"},"dist":{"shasum":"2ad87382210f9d8313e6af0c3468e1b3930a81f2","tarball":"https://registry.npmjs.org/@anahtiris/flipclock/-/flipclock-1.1.0.tgz","fileCount":32,"integrity":"sha512-YwEpHv3bz7+TMao94Qu3GuwT9p1eID33EMLJXqtsLqhA2OsvEmMiwQHZZXt7CNa4N7TQ/dNNxuwyFw1XrvtL6g==","signatures":[{"sig":"MEQCIGNjXDO40cSMZCeGiBafDLNAt62FiH/E1B7pM0FGeywYAiATekQnFhgLqxKZPdzetlhMCCHffQa6ESRlENcQ/DuvkA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@anahtiris%2fflipclock@1.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":69777},"main":"./dist/flipclock.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/flipclock.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/flipclock.js","require":"./dist/flipclock.cjs"},"./dist/flipclock.css":"./dist/flipclock.css"},"gitHead":"5aedad641e07638c7eb9a0729424e763e1bde2d7","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsc -b && vite build && tsc -p tsconfig.lib.json","preview":"vite preview","storybook":"storybook dev -p 6006","test:watch":"vitest","prepublishOnly":"npm test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"anahtiris","email":"anahtiris@gmail.com"},"repository":{"url":"git+https://github.com/anahtiris/flipclock.git","type":"git"},"_npmVersion":"10.8.2","description":"React date/time picker rendered as a flip clock with smooth 3D CSS animations","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.12","jsdom":"^29.1.1","react":"^19.2.6","eslint":"^10.3.0","vitest":"^4.1.7","globals":"^17.6.0","react-dom":"^19.2.6","storybook":"^10.4.1","@eslint/js":"^10.0.1","@vitest/ui":"^4.1.7","playwright":"^1.60.0","typescript":"~6.0.2","@types/node":"^24.12.3","@types/react":"^19.2.14","vite-plugin-dts":"^5.0.1","@types/react-dom":"^19.2.3","typescript-eslint":"^8.59.2","@vitest/coverage-v8":"^4.1.7","@storybook/addon-mcp":"^0.6.0","@vitejs/plugin-react":"^6.0.1","@storybook/addon-a11y":"^10.4.1","@storybook/addon-docs":"^10.4.1","@storybook/react-vite":"^10.4.1","@testing-library/react":"^16.3.2","@storybook/addon-vitest":"^10.4.1","eslint-plugin-storybook":"^10.4.1","@chromatic-com/storybook":"^5.2.1","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^7.1.1","@vitest/browser-playwright":"^4.1.7","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/flipclock_1.1.0_1779835723558_0.9505753794970313","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@anahtiris/flipclock","version":"1.1.1","description":"React date/time picker rendered as a flip clock with smooth 3D CSS animations","keywords":["react","flip-clock","date-picker","time-picker","countdown","animation","component","typescript"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/anahtiris/flipclock.git"},"homepage":"https://github.com/anahtiris/flipclock#readme","bugs":{"url":"https://github.com/anahtiris/flipclock/issues"},"type":"module","main":"./dist/flipclock.cjs","module":"./dist/flipclock.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/flipclock.js","require":"./dist/flipclock.cjs","types":"./dist/index.d.ts"},"./dist/flipclock.css":"./dist/flipclock.css"},"scripts":{"dev":"vite","build":"tsc -b && vite build && tsc -p tsconfig.lib.json","lint":"eslint .","preview":"vite preview","test":"vitest run","test:watch":"vitest","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm test && npm run build"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"devDependencies":{"@chromatic-com/storybook":"^5.2.1","@eslint/js":"^10.0.1","@storybook/addon-a11y":"^10.4.1","@storybook/addon-docs":"^10.4.1","@storybook/addon-mcp":"^0.6.0","@storybook/addon-vitest":"^10.4.1","@storybook/react-vite":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/node":"^24.12.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","@vitest/browser-playwright":"^4.1.7","@vitest/coverage-v8":"^4.1.7","@vitest/ui":"^4.1.7","eslint":"^10.3.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","eslint-plugin-storybook":"^10.4.1","globals":"^17.6.0","jsdom":"^29.1.1","playwright":"^1.60.0","react":"^19.2.6","react-dom":"^19.2.6","storybook":"^10.4.1","typescript":"~6.0.2","typescript-eslint":"^8.59.2","vite":"^8.0.12","vite-plugin-dts":"^5.0.1","vitest":"^4.1.7"},"_id":"@anahtiris/flipclock@1.1.1","gitHead":"22d3e7691c4672d7daf7263cdd5216fd5318cc53","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qY/dRvil0TJIKKieHSy/WyUQX1PnT16BUYRPyBE4v/k5X9R7wJjHBWFCfKO7V8+9anwya+ppqcfhXIm1xTz9xQ==","shasum":"44988aac36effa0fda9c66e3ee7a27a4cff59d64","tarball":"https://registry.npmjs.org/@anahtiris/flipclock/-/flipclock-1.1.1.tgz","fileCount":32,"unpackedSize":70040,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@anahtiris%2fflipclock@1.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCRiRpTC+cJ5f6BZBu2rr8KoPQAgYwJ9xpaLqpk68wEuAIgMT4YoJraIJQo4tsNi0m27aYCxAo7hV1siuraoftC26U="}]},"_npmUser":{"name":"anahtiris","email":"anahtiris@gmail.com"},"directories":{},"maintainers":[{"name":"anahtiris","email":"anahtiris@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flipclock_1.1.1_1781271450610_0.14149652868409013"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-23T19:58:45.917Z","modified":"2026-06-12T13:37:31.035Z","1.0.0":"2026-05-23T19:58:46.184Z","1.1.0":"2026-05-26T22:48:43.760Z","1.1.1":"2026-06-12T13:37:30.752Z"},"bugs":{"url":"https://github.com/anahtiris/flipclock/issues"},"license":"MIT","homepage":"https://github.com/anahtiris/flipclock#readme","keywords":["react","flip-clock","date-picker","time-picker","countdown","animation","component","typescript"],"repository":{"type":"git","url":"git+https://github.com/anahtiris/flipclock.git"},"description":"React date/time picker rendered as a flip clock with smooth 3D CSS animations","maintainers":[{"name":"anahtiris","email":"anahtiris@gmail.com"}],"readme":"# FlipClock\n\nA React date/time picker rendered as a flip clock with smooth 3D CSS animations.\nAesthetic-first — built around the visual charm of the flip clock, not optimized for general-purpose usability.\n\n## Features\n\n- **Modes:** `date`, `time`, `datetime`, `countdown`\n- **Themes:** `dark`, `light`\n- **Sizes:** `xs`, `sm`, `md`, `lg`\n- **Scroll modes:** `digit` (each card independent) or `unit` (whole field steps at once)\n- **12 and 24-hour** time with AM/PM card\n- **Controlled and uncontrolled** usage\n- Zero runtime dependencies — React only\n- Full TypeScript support\n\n## Install\n\n```bash\nnpm install @anahtiris/flipclock\n```\n\n## Usage\n\nImport the component and its stylesheet:\n\n```tsx\nimport { FlipClock } from '@anahtiris/flipclock'\nimport '@anahtiris/flipclock/dist/flipclock.css'\n```\n\n### Date picker\n\n```tsx\n<FlipClock\n  mode=\"date\"\n  defaultValue={{ year: 2026, month: 5, day: 23 }}\n  onChange={(v) => console.log(v)}\n/>\n```\n\n### Time picker\n\n```tsx\n<FlipClock\n  mode=\"time\"\n  defaultValue={{ hour: 9, minute: 30, period: 'AM' }}\n  hour12\n  onChange={(v) => console.log(v)}\n/>\n```\n\n### Date + time\n\n```tsx\n<FlipClock\n  mode=\"datetime\"\n  defaultValue={{ year: 2026, month: 5, day: 23, hour: 14, minute: 0 }}\n  hour12={false}\n  onChange={(v) => console.log(v)}\n/>\n```\n\n### Countdown\n\nPass a live `CountdownValue` — the cards animate as the value changes:\n\n```tsx\nfunction Countdown({ targetDate }: { targetDate: Date }) {\n  const [value, setValue] = useState(toCountdown(targetDate))\n\n  useEffect(() => {\n    const id = setInterval(() => setValue(toCountdown(targetDate)), 1000)\n    return () => clearInterval(id)\n  }, [targetDate])\n\n  return <FlipClock mode=\"countdown\" value={value} />\n}\n\nfunction toCountdown(target: Date) {\n  const s = Math.max(0, Math.floor((target.getTime() - Date.now()) / 1000))\n  return {\n    days:    Math.floor(s / 86400),\n    hours:   Math.floor((s % 86400) / 3600),\n    minutes: Math.floor((s % 3600) / 60),\n    seconds: s % 60,\n  }\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `mode` | `'date' \\| 'time' \\| 'datetime' \\| 'countdown'` | — | **Required.** Discriminates `value` / `defaultValue` / `onChange`. |\n| `value` | per-`mode` (see [Types](#types)) | — | Controlled value. Type is narrowed by `mode`. |\n| `defaultValue` | per-`mode` | — | Initial value for uncontrolled usage. Type is narrowed by `mode`. |\n| `onChange` | per-`mode` | — | Called on every user scroll. Type is narrowed by `mode`. |\n| `theme` | `'dark' \\| 'light'` | `'dark'` | Visual theme. |\n| `size` | `'xs' \\| 'sm' \\| 'md' \\| 'lg'` | `'md'` | Card size. |\n| `scrollMode` | `'digit' \\| 'unit'` | `'digit'` | Scroll behaviour. |\n| `showSeconds` | `boolean` | `false` | Show seconds (time / datetime). |\n| `showLabels` | `boolean` | `true` | Show field labels above cards. |\n| `hour12` | `boolean` | `true` | 12-hour mode with AM/PM card (time / datetime). |\n| `readOnly` | `boolean` | `false` | Block interaction without dimming. |\n| `disabled` | `boolean` | `false` | Block interaction and dim. |\n\n## Scroll modes\n\n**`digit`** (default) — each card scrolls independently. Scrolling the tens card of DAY steps by 10; the units card steps by 1. Values are automatically clamped (e.g. day 29 becomes 28 when switching to February in a non-leap year).\n\n**`unit`** — any card on a field scrolls the whole field by 1.\n\n## Types\n\n```ts\ntype DateValue      = { year: number; month: number; day: number }\ntype TimeValue      = { hour: number; minute: number; second?: number; period?: 'AM' | 'PM' }\ntype DateTimeValue  = DateValue & TimeValue\ntype CountdownValue = { days: number; hours: number; minutes: number; seconds: number }\ntype FlipClockValue = DateValue | TimeValue | DateTimeValue | CountdownValue\n\ntype FlipClockMode  = 'date' | 'time' | 'datetime' | 'countdown'\ntype FlipClockTheme = 'dark' | 'light'\ntype FlipClockSize  = 'xs' | 'sm' | 'md' | 'lg'\ntype ScrollMode     = 'digit' | 'unit'\n\n// FlipClockProps is a discriminated union on `mode`:\ntype FlipClockProps =\n  | { mode: 'date';      value?: DateValue;      defaultValue?: DateValue;      onChange?: (v: DateValue) => void;      /* ...shared */ }\n  | { mode: 'time';      value?: TimeValue;      defaultValue?: TimeValue;      onChange?: (v: TimeValue) => void;      /* ...shared */ }\n  | { mode: 'datetime';  value?: DateTimeValue;  defaultValue?: DateTimeValue;  onChange?: (v: DateTimeValue) => void;  /* ...shared */ }\n  | { mode: 'countdown'; value?: CountdownValue; defaultValue?: CountdownValue; onChange?: (v: CountdownValue) => void; /* ...shared */ }\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}