{"_id":"@alsocoder/apna-date-picker","_rev":"4-7a101bb8c199b0a66ad264290b64b856","name":"@alsocoder/apna-date-picker","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@alsocoder/apna-date-picker","version":"0.1.0","keywords":["react","react-component","date-picker","datepicker","date-range","datetime-picker","calendar","form","form-control","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-date-picker","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-date-picker@0.1.0","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-date-picker#readme","bugs":{"url":"https://github.com/alsocoders/apna-date-picker/issues"},"dist":{"shasum":"6bcb0c9006321af7d590ef9792b4b989e9400da2","tarball":"https://registry.npmjs.org/@alsocoder/apna-date-picker/-/apna-date-picker-0.1.0.tgz","fileCount":10,"integrity":"sha512-vrXhNDOaa+XlCtWsJ3MfrAhcmKXnTFjSuOSzQz9dBkoTPUJyamhcJOU09eBGrkGEmwVolbQFCgOmfRAa3uApsg==","signatures":[{"sig":"MEUCIQDDQHwEcfttpt/s9u5gnHW0DHYJoMMZcGIo8IcnliBoggIgW4uHXDewivOOI48Yb1bfdYTYCYLA7WiVlUCu0DZ1fxk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":428122},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-date-picker.git","type":"git"},"_npmVersion":"12.0.1","description":"A flexible React date picker with single, range, and datetime modes, vanilla CSS theming, and form support.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","date-fns":"^4.1.0","react-day-picker":"^10.0.1","@radix-ui/react-select":"^2.2.5","@radix-ui/react-popover":"^1.1.14"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-date-picker_0.1.0_1785513824126_0.4591481596882623","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alsocoder/apna-date-picker","version":"0.1.1","keywords":["react","react-component","date-picker","datepicker","date-range","datetime-picker","calendar","form","form-control","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-date-picker","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-date-picker@0.1.1","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-date-picker#readme","bugs":{"url":"https://github.com/alsocoders/apna-date-picker/issues"},"dist":{"shasum":"3ded398861563cbba964799888b97e805154e2cc","tarball":"https://registry.npmjs.org/@alsocoder/apna-date-picker/-/apna-date-picker-0.1.1.tgz","fileCount":10,"integrity":"sha512-NDPY9r0MEDwpbCS4fvKFsLRPH12XNLVED31AIJo1xiTfya3VFpn/jqGKB+rsmNK4asR1HTilgVWntmMQuUhVcw==","signatures":[{"sig":"MEUCIQCL1qrqpZ2Q+cJo6qL0rooGkFUw1fF2Oxf4KByTBU5cUQIgQYea2qyecLK87wdB2J2SQOFPNDBN5+W543xqEYHtiac=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":428271},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"41306706a8fde9c6f1a9b1854486d3af26a5457c","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-date-picker.git","type":"git"},"_npmVersion":"12.0.1","description":"A flexible React date picker with single, range, and datetime modes, vanilla CSS theming, and form support.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","date-fns":"^4.1.0","react-day-picker":"^10.0.1","@radix-ui/react-select":"^2.2.5","@radix-ui/react-popover":"^1.1.14"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-date-picker_0.1.1_1785587113010_0.5093714220316163","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@alsocoder/apna-date-picker","version":"0.1.2","keywords":["react","react-component","date-picker","datepicker","date-range","datetime-picker","calendar","form","form-control","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-date-picker","alsocoder"],"author":{"url":"https://alsocoder.com","name":"Also Coder"},"license":"MIT","_id":"@alsocoder/apna-date-picker@0.1.2","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"homepage":"https://github.com/alsocoders/apna-date-picker#readme","bugs":{"url":"https://github.com/alsocoders/apna-date-picker/issues"},"dist":{"shasum":"c8f864091883820e5236fe5900fcbc941ab757d4","tarball":"https://registry.npmjs.org/@alsocoder/apna-date-picker/-/apna-date-picker-0.1.2.tgz","fileCount":10,"integrity":"sha512-hDo6l6tG0M2jYRDCJps7H4qVz/2WjR2mL/s7I/ibccZFvbgxNn/snKZdeFpvcTOUhgS6PzRUl3j7vFa7ATQpxw==","signatures":[{"sig":"MEYCIQDb6bNUXTH7ltg9Q2LoH4XwpJpRbzIUgGHPvcWI/6HBaQIhAOVbFNRa1GVOPtgpROUDqzarCAeZwl91w6SxyoFkDe4S","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":430431},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"2c728035b81410447087ce2b623c74d89cf37b9b","scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"repository":{"url":"git+https://github.com/alsocoders/apna-date-picker.git","type":"git"},"_npmVersion":"12.0.1","description":"A flexible React date picker with single, range, and datetime modes, vanilla CSS theming, and form support.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.16.0","browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"dependencies":{"clsx":"^2.1.1","date-fns":"^4.1.0","react-day-picker":"^10.0.1","@radix-ui/react-select":"^2.2.5","@radix-ui/react-popover":"^1.1.14","@radix-ui/react-dismissable-layer":"^1.1.11"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.1.0","react-dom":"^19.1.0","typescript":"^5.9.2","@types/react":"^19.1.8","@types/react-dom":"^19.1.6"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/apna-date-picker_0.1.2_1785592266745_0.78678245247702","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@alsocoder/apna-date-picker","version":"0.1.3","description":"A flexible React date picker with single, range, and datetime modes, vanilla CSS theming, and form support.","license":"MIT","author":{"name":"Also Coder","url":"https://alsocoder.com"},"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"},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react","react-component","date-picker","datepicker","date-range","datetime-picker","calendar","form","form-control","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-date-picker","alsocoder"],"browserslist":["Chrome >= 90","Firefox >= 90","Safari >= 14","Edge >= 90","iOS >= 14","Samsung >= 15","not dead"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-date-picker.git"},"bugs":{"url":"https://github.com/alsocoders/apna-date-picker/issues"},"homepage":"https://github.com/alsocoders/apna-date-picker#readme","peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"@radix-ui/react-dismissable-layer":"^1.1.11","@radix-ui/react-popover":"^1.1.14","@radix-ui/react-select":"^2.2.5","clsx":"^2.1.1","date-fns":"^4.1.0","react-day-picker":"^10.0.1"},"devDependencies":{"@types/react":"^19.1.8","@types/react-dom":"^19.1.6","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.9.2"},"gitHead":"6c090b9df0b2eb894677ddaf013e34d2d967355e","_id":"@alsocoder/apna-date-picker@0.1.3","_nodeVersion":"24.16.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-uB8grB9uX9Rxys5lXA4BMZuzNy7GM/v2Tw0/Win21/YFNXDWPfTydPHGHhhuzTCFKdV5RzYuI9BODXM396G5UA==","shasum":"34471ee9ae2f0b2ecbf1d96c0edb00d7154ba755","tarball":"https://registry.npmjs.org/@alsocoder/apna-date-picker/-/apna-date-picker-0.1.3.tgz","fileCount":11,"unpackedSize":431787,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFufdb/QCU3uAzt+7WBRUTDaVLHvzTSVwnoPNRLroFj9AiBO/Ordw8VsCpavAHk0zh3cmtLdwawaXFYFqI0tPgy9wA=="}]},"_npmUser":{"name":"alsocoder-org","email":"alsocoder@gmail.com"},"directories":{},"maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apna-date-picker_0.1.3_1785802846466_0.4971477403635738"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-31T16:03:43.955Z","modified":"2026-08-04T00:20:46.863Z","0.1.0":"2026-07-31T16:03:44.334Z","0.1.1":"2026-08-01T12:25:13.177Z","0.1.2":"2026-08-01T13:51:06.910Z","0.1.3":"2026-08-04T00:20:46.668Z"},"bugs":{"url":"https://github.com/alsocoders/apna-date-picker/issues"},"author":{"name":"Also Coder","url":"https://alsocoder.com"},"license":"MIT","homepage":"https://github.com/alsocoders/apna-date-picker#readme","keywords":["react","react-component","date-picker","datepicker","date-range","datetime-picker","calendar","form","form-control","ui-component","css-variables","radix-ui","accessible","a11y","typescript","apna-date-picker","alsocoder"],"repository":{"type":"git","url":"git+https://github.com/alsocoders/apna-date-picker.git"},"description":"A flexible React date picker with single, range, and datetime modes, vanilla CSS theming, and form support.","maintainers":[{"name":"alsocoder-org","email":"alsocoder@gmail.com"}],"readme":"# @alsocoder/apna-date-picker\r\n\r\nA flexible React date picker with single, range, and datetime modes. Built with vanilla CSS, CSS variables, and Radix UI primitives.\r\n\r\n## Features\r\n\r\n- Single date picker (`ApnaDatePicker`)\r\n- Date range picker (`ApnaDateRangePicker`)\r\n- Date & time picker (`ApnaDateTimePicker`)\r\n- Controlled and uncontrolled modes\r\n- `minDate`, `maxDate`, `disablePast`, `disableFuture`, `disabledDates`\r\n- `ApnaDateTimePicker` — date + time with 12h/24h formats, Apply to confirm\r\n- Month/year dropdown navigation + prev/next arrows\r\n- Built-in presets (Today, Tomorrow, Next week, etc.)\r\n- Outside-month calendar days are selectable (lower opacity, still clickable)\r\n- `clearable`, `error` / `errorText`, form support (`name`, hidden inputs)\r\n- Vanilla CSS theming via CSS variables\r\n- Customizable via `className`, `classNames`, and `icons`\r\n- Keyboard accessible popover + calendar\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @alsocoder/apna-date-picker\r\n```\r\n\r\nPeer dependencies:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\n## Setup\r\n\r\nImport the stylesheet once in your app:\r\n\r\n```tsx\r\nimport \"@alsocoder/apna-date-picker/styles.css\"\r\n```\r\n\r\n## Basic usage\r\n\r\n### Single date\r\n\r\n```tsx\r\nimport { useState } from \"react\"\r\nimport { ApnaDatePicker } from \"@alsocoder/apna-date-picker\"\r\nimport \"@alsocoder/apna-date-picker/styles.css\"\r\n\r\nexport function BookingDateField() {\r\n  const [date, setDate] = useState(\"\")\r\n\r\n  return (\r\n    <ApnaDatePicker\r\n      label=\"Move date\"\r\n      value={date}\r\n      onValueChange={setDate}\r\n      disablePast\r\n      clearable\r\n      placeholder=\"Select date\"\r\n    />\r\n  )\r\n}\r\n```\r\n\r\nValues use `yyyy-MM-dd` strings by default.\r\n\r\n### Date range\r\n\r\n```tsx\r\nimport { ApnaDateRangePicker } from \"@alsocoder/apna-date-picker\"\r\n\r\n<ApnaDateRangePicker\r\n  label=\"Trip dates\"\r\n  value={range}\r\n  onValueChange={setRange}\r\n  disablePast\r\n  closeOnSelect={false}\r\n/>\r\n```\r\n\r\n### Date & time\r\n\r\n```tsx\r\nimport { ApnaDateTimePicker } from \"@alsocoder/apna-date-picker\"\r\n\r\n<ApnaDateTimePicker\r\n  label=\"Pickup slot\"\r\n  value={dateTime}\r\n  onValueChange={setDateTime}\r\n  timeFormat=\"12h\"\r\n  minuteStep={15}\r\n  displayFormat=\"dd/MM/yyyy hh:mm a\"\r\n  selectionLabel=\"Selected\"\r\n  applyLabel=\"Apply\"\r\n/>\r\n```\r\n\r\nValues use `yyyy-MM-ddTHH:mm` by default. Date and time are committed when the user clicks **Apply** (draft selection inside the popover).\r\n\r\n## Props\r\n\r\n### Core props (all pickers)\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `value` | `string` / range object | — | Controlled value |\r\n| `defaultValue` | `string` / range object | `\"\"` / empty range | Uncontrolled initial value |\r\n| `onValueChange` | function | — | Value change callback |\r\n| `label` | `string` | — | Field label |\r\n| `placeholder` | `string` | varies | Trigger placeholder |\r\n| `required` | `boolean` | `false` | Required field |\r\n| `disabled` | `boolean` | `false` | Disable interaction |\r\n| `clearable` | `boolean` | `false` | Show clear button |\r\n| `error` | `string \\| Error \\| null` | — | Error state (parent-controlled; clear when value becomes valid) |\r\n| `errorText` | `string` | — | Error message override |\r\n| `minDate` | `Date` | — | Minimum selectable date |\r\n| `maxDate` | `Date` | — | Maximum selectable date |\r\n| `disablePast` | `boolean` | `false` | Disable dates before today |\r\n| `disableFuture` | `boolean` | `false` | Disable dates after today |\r\n| `disabledDates` | `(date) => boolean` | — | Custom disabled dates |\r\n| `locale` | `date-fns Locale` | — | Locale for labels |\r\n| `valueFormat` | `string` | `yyyy-MM-dd` | Parse/format pattern |\r\n| `displayFormat` | `string` | `dd MMM yyyy` | Display pattern |\r\n| `presets` | `ApnaDatePreset[]` | built-in | Quick select presets |\r\n| `showPresets` | `boolean` | `true` | Show preset chips |\r\n| `className` | `string` | — | Root wrapper class |\r\n| `triggerClassName` | `string` | — | Trigger class shortcut |\r\n| `popoverClassName` | `string` | — | Popover class shortcut |\r\n| `classNames` | `object` | — | Slot class overrides |\r\n| `icons` | `object` | — | Custom icons |\r\n| `left` | `ReactNode` | — | Left slot content |\r\n| `name` | `string` | — | Form field name |\r\n| `id` | `string` | — | Input id |\r\n| `open` | `boolean` | — | Controlled popover open |\r\n| `onOpenChange` | `(open) => void` | — | Popover open change |\r\n| `onBlur` | `() => void` | — | Blur callback |\r\n\r\n### Range-only props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `minRangeDays` | `number` | — | Minimum range length |\r\n| `maxRangeDays` | `number` | — | Maximum range length |\r\n| `closeOnSelect` | `boolean` | `true` | Close when range complete |\r\n\r\n### DateTime-only props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `timeFormat` | `\"12h\" \\| \"24h\"` | `\"24h\"` | Time display format |\r\n| `minuteStep` | `number` | `1` | Minute step |\r\n| `defaultTime` | `string` | `\"09:00\"` | Default time when empty |\r\n| `showSeconds` | `boolean` | `true` | Include seconds |\r\n| `applyLabel` | `string` | `\"Apply\"` | Apply button label (datetime) |\r\n| `selectionLabel` | `string` | `\"Selected\"` | In-popover selection preview label |\r\n\r\n## Theming\r\n\r\nOverride CSS variables on a wrapper or `:root`:\r\n\r\n```css\r\n.my-theme {\r\n  --apna-date-picker-primary: #2563eb;\r\n  --apna-date-picker-primary-fg: #ffffff;\r\n  --apna-date-picker-radius: 0.75rem;\r\n  --apna-date-picker-cell-size: 2.25rem;\r\n}\r\n```\r\n\r\nDark theme helper:\r\n\r\n```html\r\n<div data-apna-date-picker-theme=\"dark\">\r\n  <ApnaDatePicker />\r\n</div>\r\n```\r\n\r\n## Customization levels\r\n\r\n1. **CSS variables** — theme tokens\r\n2. **`classNames` slots** — per-part overrides (`trigger`, `popover`, `calendarDaySelected`, etc.)\r\n3. **`className` / `triggerClassName` / `popoverClassName`** — quick shortcuts\r\n\r\n## Form usage\r\n\r\n```tsx\r\n<form onSubmit={handleSubmit}>\r\n  <ApnaDatePicker name=\"moveDate\" required />\r\n  <button type=\"submit\">Submit</button>\r\n</form>\r\n```\r\n\r\nRange picker renders hidden `name[from]` and `name[to]` inputs.\r\n\r\n## react-hook-form\r\n\r\n```tsx\r\nimport { Controller } from \"react-hook-form\"\r\n\r\n<Controller\r\n  name=\"moveDate\"\r\n  control={control}\r\n  render={({ field }) => (\r\n    <ApnaDatePicker\r\n      label=\"Move date\"\r\n      value={field.value}\r\n      onValueChange={field.onChange}\r\n      onBlur={field.onBlur}\r\n      error={errors.moveDate?.message}\r\n    />\r\n  )}\r\n/>\r\n```\r\n\r\n## Exports\r\n\r\n- `ApnaDatePicker`\r\n- `ApnaDateRangePicker`\r\n- `ApnaDateTimePicker`\r\n- `defaultClassNames`, `mergeClassNames`\r\n- Date utilities: `parseApnaDateValue`, `toApnaDateValue`, `formatApnaDateDisplay`, range/time helpers, presets builders\r\n\r\n## Changelog\r\n\r\n### v0.1.2\r\n\r\n- `DismissableLayerBranch` on popover and month/year select dropdowns — works inside ApnaModal\r\n- `pointer-events: auto` on popover and select content for Dialog scroll-lock compatibility\r\n- `@radix-ui/react-dismissable-layer` added as explicit dependency\r\n\r\n### v0.1.1\r\n\r\n- Popover/select z-index uses `--apna-overlay-nested-z-popover` / `--apna-overlay-nested-z-select` for ApnaModal compatibility\r\n\r\n## Development\r\n\r\n```bash\r\nnpm install\r\nnpm run build\r\ncd playground && npm install && npm run dev\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}