{"_id":"@allem-ui/date-picker","_rev":"3-77ec218967cc882e0bd5809f11384623","name":"@allem-ui/date-picker","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@allem-ui/date-picker","version":"0.0.1","keywords":["allem-ui","date-picker","calendar","datepicker","react","accessible","react-aria"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/date-picker@0.0.1","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"18b77d8b0503fd54d6c8929416a39aa1a7a0ffc2","tarball":"https://registry.npmjs.org/@allem-ui/date-picker/-/date-picker-0.0.1.tgz","fileCount":7,"integrity":"sha512-9rL1tXuPdlSJtW5MEBHwFQpAB35fsg7rmpN0oI4WyhpXMDRubl/GsiIxjZ2wXwSYFKkU2g6KZYMDmFebuAo3cA==","signatures":[{"sig":"MEUCIBo8PWg47ZcH5BVZ33vQPGah6QE6kMlYuZFWO+MeN5RWAiEAh+4r/Wb/Q/FdSUcuoA0st53FM6dQxaQ9NXHaOXKHvps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81745},"main":"./dist/index.js","_from":"file:allem-ui-date-picker-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/9793d915406ed60af8cdf91c4178c3d4/allem-ui-date-picker-0.0.1.tgz","_integrity":"sha512-9rL1tXuPdlSJtW5MEBHwFQpAB35fsg7rmpN0oI4WyhpXMDRubl/GsiIxjZ2wXwSYFKkU2g6KZYMDmFebuAo3cA==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/date-picker"},"_npmVersion":"11.12.1","description":"Date picker and calendar components for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","dependencies":{"react-aria-components":"^1.7.0","@internationalized/date":"^3.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.8.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/date-picker_0.0.1_1779396105530_0.6219914062225813","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@allem-ui/date-picker","version":"0.0.2","keywords":["allem-ui","date-picker","calendar","datepicker","react","accessible","react-aria"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/date-picker@0.0.2","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"c27e733a89accbe75f285921b6f4ca5e31ceee19","tarball":"https://registry.npmjs.org/@allem-ui/date-picker/-/date-picker-0.0.2.tgz","fileCount":8,"integrity":"sha512-btC3t8+kDoq8Xdl8zgjvAHJd3xJ8yFeFokwuL/FTiLRFJwho5UKIRDsMsPNCm7VvZS8gVdS5ZGWLYXGV9Z8m/w==","signatures":[{"sig":"MEUCICGoFFYYCiFFIrQk3CTghY7x3xynDfnMeTXpQwmTLgV2AiEAtV7gjcUrGQCUPGoSv2lB/K4i9UPsgmkOYRciOF61G0E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85043},"main":"./dist/index.js","_from":"file:allem-ui-date-picker-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/141c3a884ca00ab0350781a0bf4996b5/allem-ui-date-picker-0.0.2.tgz","_integrity":"sha512-btC3t8+kDoq8Xdl8zgjvAHJd3xJ8yFeFokwuL/FTiLRFJwho5UKIRDsMsPNCm7VvZS8gVdS5ZGWLYXGV9Z8m/w==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/date-picker"},"_npmVersion":"11.12.1","description":"Date picker and calendar components for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","dependencies":{"react-aria-components":"^1.17.0","@internationalized/date":"^3.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/date-picker_0.0.2_1779493714010_0.8520301520973657","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@allem-ui/date-picker","version":"0.0.3","description":"Date picker and calendar components for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"dependencies":{"react-aria-components":"^1.17.0","@internationalized/date":"^3.7.0"},"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/date-picker"},"keywords":["allem-ui","date-picker","calendar","datepicker","react","accessible","react-aria"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/date-picker@0.0.3","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-uBOhmVS9HtkAemtScVKWfNQhDQoN9+OxAdfgg0iJtmZLc6xzJ+1Sve5Da1+/wmZh3j7mdc2zLM2qtp8UtZd/DA==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/a802fd8c49dc8e0f0c4e4852660a3e4b/allem-ui-date-picker-0.0.3.tgz","_from":"file:allem-ui-date-picker-0.0.3.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-uBOhmVS9HtkAemtScVKWfNQhDQoN9+OxAdfgg0iJtmZLc6xzJ+1Sve5Da1+/wmZh3j7mdc2zLM2qtp8UtZd/DA==","shasum":"8f751675101b8ce889450885ae9cb5f2749c8d0e","tarball":"https://registry.npmjs.org/@allem-ui/date-picker/-/date-picker-0.0.3.tgz","fileCount":8,"unpackedSize":85495,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD+VOJcJHe3KAYvX+UhmzV5dZQg79eMX9bBtMjzgkgDnAIgUpr319zzqdUTD48fwzD54UM7KRcOLgDpPLJtXF71ZJc="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/date-picker_0.0.3_1779581028290_0.7155009986290988"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T20:41:45.309Z","modified":"2026-05-24T00:03:48.567Z","0.0.1":"2026-05-21T20:41:45.682Z","0.0.2":"2026-05-22T23:48:34.168Z","0.0.3":"2026-05-24T00:03:48.447Z"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"license":"MIT","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","date-picker","calendar","datepicker","react","accessible","react-aria"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/date-picker"},"description":"Date picker and calendar components for Allem UI","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"readme":"<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/kingofmit/allem-ui/main/.github/AllemUI.png\" alt=\"Allem UI Date Picker\" />\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@allem-ui/date-picker\"><img src=\"https://img.shields.io/npm/v/@allem-ui/date-picker.svg\" alt=\"npm version\" /></a>\n  <a href=\"https://github.com/kingofmit/allem-ui/blob/main/LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\" /></a>\n  <img src=\"https://img.shields.io/badge/react-19-61dafb\" alt=\"React 19\" />\n  <img src=\"https://img.shields.io/badge/tailwind-v4-38bdf8\" alt=\"Tailwind v4\" />\n  <img src=\"https://img.shields.io/badge/react_aria-accessible-green\" alt=\"React Aria\" />\n  <img src=\"https://img.shields.io/badge/typescript-strict-blue\" alt=\"TypeScript\" />\n</p>\n\n# @allem-ui/date-picker\n\nAccessible date and time picker components for Allem UI -- built on React Aria with full keyboard navigation and internationalization support.\n\n## Installation\n\n```bash\nnpm install @allem-ui/date-picker @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/date-picker\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport { DatePicker, Calendar, DateRangePicker, TimeField } from \"@allem-ui/date-picker\";\nimport { today, getLocalTimeZone } from \"@allem-ui/date-picker\";\n\nexport function BookingForm() {\n  return (\n    <div>\n      <DatePicker label=\"Start date\" />\n      <DateRangePicker label=\"Trip dates\" />\n      <TimeField label=\"Check-in time\" />\n      <Calendar defaultValue={today(getLocalTimeZone())} />\n    </div>\n  );\n}\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `Calendar` | Standalone calendar grid for date selection |\n| `DatePicker` | Date input field with calendar popover |\n| `DateRangePicker` | Select a start and end date range |\n| `TimeField` | Time input field with hour/minute/period segments |\n\n## Re-exported Utilities\n\nDate utilities from `@internationalized/date` are re-exported for convenience:\n\n`CalendarDate` `CalendarDateTime` `Time` `ZonedDateTime` `parseDate` `parseDateTime` `parseTime` `parseZonedDateTime` `today` `now` `getLocalTimeZone`\n\n## Features\n\n- **Accessible** -- Built on [React Aria](https://react-spectrum.adobe.com/react-aria/) for full WCAG compliance\n- **Keyboard navigation** -- Complete keyboard support for all date/time components\n- **Internationalized** -- Locale-aware date formatting and calendar systems\n- **Date ranges** -- Select start/end date ranges with visual highlighting\n- **Time input** -- Segmented time field with AM/PM support\n- **Dark mode** -- First-class dark mode with `dark:` Tailwind prefix\n- **TypeScript strict** -- Full type safety with exported prop types\n- **Tree-shakeable** -- ESM + CJS builds, import only what you use\n\n## Part of Allem UI\n\nThis is a standalone package in the [Allem UI](https://github.com/kingofmit/allem-ui) monorepo. For core components, see [`@allem-ui/react`](https://www.npmjs.com/package/@allem-ui/react).\n\n## Support\n\nIf you find Allem UI useful, consider supporting its development:\n\n<a href=\"https://buymeacoffee.com/kingofmit\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\" /></a>\n\n## License\n\n[MIT](https://github.com/kingofmit/allem-ui/blob/main/LICENSE) - [Ahmed Allem](https://kingallem.com)\n","readmeFilename":"README.md"}