{"_id":"@billme-venture/headless-datepicker","_rev":"6-0e53dadc49ede10a619d364c87f0c5b0","name":"@billme-venture/headless-datepicker","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@billme-venture/headless-datepicker","version":"1.0.0","keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","_id":"@billme-venture/headless-datepicker@1.0.0","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"homepage":"https://github.com/billme-venture/datepicker#readme","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"dist":{"shasum":"6e28a5ef2a706f135cf4ba8b7d9e69d183ae5bbe","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.0.0.tgz","fileCount":21,"integrity":"sha512-46csTfC5Z2GUZ20Qrl2iGuwgyiwBDVLWvHo3uzrkap6ILdSGpOEWUjHAUQqDg4djf5K15KEHzlv0su8VkIRAFg==","signatures":[{"sig":"MEYCIQDpEBiXzFfsTbTSWRy3Tiv89crC38mgWKNKfdfTrrF2tAIhAI6Z2zvuUxt6bOvjJErMWwteU+t31AocFL8CAhIbDoTp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":493594},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"ecb16b76da2988df4fb984bd524b8b6390e8e259","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","typecheck":"tsc --noEmit","test:watch":"jest --watch","examples:install":"cd examples && npm install"},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"repository":{"url":"git+https://github.com/billme-venture/datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful headless datepicker for React from billme team","directories":{},"_nodeVersion":"20.18.0","dependencies":{"date-fns":"^3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.57.0","rollup":"^4.12.0","ts-jest":"^29.1.2","react-dom":"^18.2.0","typescript":"^5.4.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.34.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.1.1","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^7.1.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/headless-datepicker_1.0.0_1752487322771_0.7957885917274237","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@billme-venture/headless-datepicker","version":"1.0.1","keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","_id":"@billme-venture/headless-datepicker@1.0.1","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"homepage":"https://github.com/billme-venture/datepicker#readme","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"dist":{"shasum":"1363ec6417a944d7b44cf9608222b69bf78e778a","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.0.1.tgz","fileCount":21,"integrity":"sha512-Zz3msqqCfK0GtwUkXtwrS7n6G9gw5YZxmRnI1rHUsVMBP51hJrUyScTPzLA9dsmL9Sc7WsMahBm+f7jJPeYJig==","signatures":[{"sig":"MEUCIQDX2BgHtLdNKAXzQzF9sGGYYrkwTCY+wBWwvOZS5IrNtQIgOKBphw6D7fW7C9ReRLLy082/RCUScoxMfTf3eSNkCho=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":493747},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"e955bfb6564db29848bfcf6ff5f5f3846224fa68","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","typecheck":"tsc --noEmit","test:watch":"jest --watch","examples:install":"cd examples && npm install"},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"repository":{"url":"git+https://github.com/billme-venture/datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful headless datepicker for React from billme team","directories":{},"_nodeVersion":"20.18.0","dependencies":{"date-fns":"^3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.57.0","rollup":"^4.12.0","ts-jest":"^29.1.2","react-dom":"^18.2.0","typescript":"^5.4.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.34.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.1.1","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^7.1.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/headless-datepicker_1.0.1_1752489250302_0.11337773990933608","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@billme-venture/headless-datepicker","version":"1.0.2","keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","_id":"@billme-venture/headless-datepicker@1.0.2","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"homepage":"https://github.com/billme-venture/datepicker#readme","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"dist":{"shasum":"cb188b3b3020b751af754328a8a7110d409e23a0","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.0.2.tgz","fileCount":21,"integrity":"sha512-ffFyZWSR/9tc6U2Ncg64vHP44BZ4V+DYVLLBEU+FmQ1HDQdsY2wILQTBcCCjbF3OnsYO41GJI4GspsninqwoGQ==","signatures":[{"sig":"MEQCIEJ6ddc9Wt91f+UW+I3YjRMrTF1rBF3PFQNsMLw+r1cnAiAnP56hkrbYpE4B9pBC0DXCgWaOVns1eWtsb2LOiL8j9A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":257513},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"e955bfb6564db29848bfcf6ff5f5f3846224fa68","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","typecheck":"tsc --noEmit","test:watch":"jest --watch","examples:install":"cd examples && npm install"},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"repository":{"url":"git+https://github.com/billme-venture/datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful headless datepicker for React from billme team","directories":{},"_nodeVersion":"20.18.0","dependencies":{"date-fns":"^3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.57.0","rollup":"^4.12.0","ts-jest":"^29.1.2","react-dom":"^18.2.0","typescript":"^5.4.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.34.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.1.1","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^7.1.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/headless-datepicker_1.0.2_1752737181770_0.4014061289113786","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@billme-venture/headless-datepicker","version":"1.1.0","keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","_id":"@billme-venture/headless-datepicker@1.1.0","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"homepage":"https://github.com/billme-venture/datepicker#readme","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"dist":{"shasum":"41c4036b68296eaf80e4cccbd91577bb3bab3f1c","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.1.0.tgz","fileCount":21,"integrity":"sha512-9+UwxTr0x8I9Hs7hWfgB190KCQKxURxwPoufK8+ZwRGrC2LqQw7S9K2lTDrkne/jd7NSWlrPHCnbSJNsmXhbjA==","signatures":[{"sig":"MEUCIDpN6Om9G3bDPYCvjjblvMRzivDTRRImaPHLjoab6B+lAiEAjdLHajnhmNQUcm5kFZZRXyg/LXtGbfMD/Rf4Br7rWXA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":269184},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"1645940f4f7a27025c2836b4de5f1bee82555376","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","typecheck":"tsc --noEmit","test:watch":"jest --watch","examples:install":"cd examples && npm install"},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"repository":{"url":"git+https://github.com/billme-venture/datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful headless datepicker for React from billme team","directories":{},"_nodeVersion":"20.18.0","dependencies":{"date-fns":"^3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.57.0","rollup":"^4.12.0","ts-jest":"^29.1.2","react-dom":"^18.2.0","typescript":"^5.4.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.34.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.1.1","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^7.1.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/headless-datepicker_1.1.0_1752739667702_0.6615230944292481","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@billme-venture/headless-datepicker","version":"1.1.1","keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","_id":"@billme-venture/headless-datepicker@1.1.1","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"homepage":"https://github.com/billme-venture/datepicker#readme","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"dist":{"shasum":"bef992174133458244b5518220c32920ab64b4d9","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.1.1.tgz","fileCount":21,"integrity":"sha512-LhzWrW/drAI1XZoyS7S9PUaNcPf4ooqiGKHefqxS6xFQTGk2rtPiit8HqUR0VV3yi/Le1trrJVxbF2WPW9kGew==","signatures":[{"sig":"MEUCIQDE6E/N56BNnj7cRlhhLV9YPPjM+t+UV1RRkUsDcwZJmwIgA0MA45Q2KNhqbTdMq6PpkOgFG3fyLQ2cji59syTWZfM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":270616},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"99f3ed26a02186f0af1977fe303b8502971788a5","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","typecheck":"tsc --noEmit","test:watch":"jest --watch","examples:install":"cd examples && npm install"},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"repository":{"url":"git+https://github.com/billme-venture/datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A beautiful headless datepicker for React from billme team","directories":{},"_nodeVersion":"20.18.0","dependencies":{"date-fns":"^3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.57.0","rollup":"^4.12.0","ts-jest":"^29.1.2","react-dom":"^18.2.0","typescript":"^5.4.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.34.0","@testing-library/react":"^14.2.1","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.1.1","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^14.5.2","@typescript-eslint/eslint-plugin":"^7.1.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/headless-datepicker_1.1.1_1752740119826_0.11119985751074846","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@billme-venture/headless-datepicker","version":"1.1.2","description":"A beautiful headless datepicker for React from billme team","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","test:watch":"jest --watch","lint":"eslint src --ext .ts,.tsx","typecheck":"tsc --noEmit","prepare":"npm run build","examples":"cd examples && npm install && npm run dev","examples:install":"cd examples && npm install"},"repository":{"type":"git","url":"git+https://github.com/billme-venture/datepicker.git"},"keywords":["datepicker","react","headless","typescript","calendar"],"author":{"name":"Anucha Petchagun"},"license":"MIT","bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"homepage":"https://github.com/billme-venture/datepicker#readme","publishConfig":{"access":"public"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.1","@testing-library/user-event":"^14.5.2","@types/jest":"^29.5.12","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","@typescript-eslint/eslint-plugin":"^7.1.1","@typescript-eslint/parser":"^7.1.1","eslint":"^8.57.0","eslint-plugin-react":"^7.34.0","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.12.0","rollup-plugin-dts":"^6.1.0","ts-jest":"^29.1.2","typescript":"^5.4.2"},"dependencies":{"date-fns":"^3.3.1"},"_id":"@billme-venture/headless-datepicker@1.1.2","gitHead":"171a1848f7596e7b14945cbe2acfb7fdd3d65cf1","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-F0wk/Knu+6UZMBy00K8VMG5vNQGkQAIYfxFFVVY4ugzj75oz6mAg/IrXgkSOHqQURLAG694UOsPbuGPQtXy8hw==","shasum":"d8bd2c69c771aa71e306ae7f5039c85b7ea12411","tarball":"https://registry.npmjs.org/@billme-venture/headless-datepicker/-/headless-datepicker-1.1.2.tgz","fileCount":21,"unpackedSize":272654,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGp0IdB9cc16bDyuhu6H0U9wKPvs9U9P2xB+wObOkgGQAiB6t5HEM8+m3VoBaU7civdHpsvrnfkKjdZdFPpr2ja1Nw=="}]},"_npmUser":{"name":"bigbillme","email":"big@billme.co.th"},"directories":{},"maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/headless-datepicker_1.1.2_1752740540470_0.9835366245003194"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-14T10:02:02.666Z","modified":"2025-07-17T08:22:20.862Z","1.0.0":"2025-07-14T10:02:02.967Z","1.0.1":"2025-07-14T10:34:10.505Z","1.0.2":"2025-07-17T07:26:22.004Z","1.1.0":"2025-07-17T08:07:47.925Z","1.1.1":"2025-07-17T08:15:20.017Z","1.1.2":"2025-07-17T08:22:20.663Z"},"bugs":{"url":"https://github.com/billme-venture/datepicker/issues"},"author":{"name":"Anucha Petchagun"},"license":"MIT","homepage":"https://github.com/billme-venture/datepicker#readme","keywords":["datepicker","react","headless","typescript","calendar"],"repository":{"type":"git","url":"git+https://github.com/billme-venture/datepicker.git"},"description":"A beautiful headless datepicker for React from billme team","maintainers":[{"name":"bigbillme","email":"big@billme.co.th"}],"readme":"# @billme-venture/headless-datepicker\n\nA beautiful, headless datepicker for React applications. Built with TypeScript and designed to be fully customizable and accessible.\n\n## Features\n\n- **Headless Design**: Complete control over styling and UI\n- **Multiple Selection Modes**: Single date, date range, and multiple dates\n- **Time Selection**: Optional time picker with configurable format and precision\n- **Enhanced Today Button**: Sets current date and time when time is enabled\n- **Fully Accessible**: Built with accessibility in mind\n- **TypeScript Support**: Full type safety and IntelliSense\n- **Lightweight**: Minimal dependencies (only date-fns)\n- **Flexible**: Highly customizable with powerful configuration options\n- **SSR Compatible**: Works with Next.js and other SSR frameworks\n\n## Installation\n\n```bash\nnpm install @billme-venture/headless-datepicker\n```\n\n```bash\nyarn add @billme-venture/headless-datepicker\n```\n\n```bash\npnpm add @billme-venture/headless-datepicker\n```\n\n## Quick Start\n\n### Basic Single Date Picker\n\n```tsx\nimport React from 'react';\nimport { useDatePicker } from '@billme-venture/headless-datepicker';\n\nfunction MyDatePicker() {\n const datePicker = useDatePicker({\n mode: 'single'\n });\n\n return (\n
\n );\n}\n```\n\n## API Reference\n\n### useDatePicker(config?)\n\nThe main hook that provides all datepicker functionality.\n\n#### Configuration Options\n\n```typescript\ninterface DatePickerConfig {\n mode: 'single' | 'range' | 'multiple';\n selectedDate?: Date | null;\n selectedDates?: Date[];\n selectedRange?: DateRange;\n minDate?: Date;\n maxDate?: Date;\n disabledDates?: Date[];\n disabledDaysOfWeek?: number[]; // 0-6, Sunday to Saturday\n firstDayOfWeek?: number; // 0-6, Sunday to Saturday\n locale?: string;\n time?: TimeConfig;\n}\n\ninterface TimeConfig {\n enableTime?: boolean;\n timeFormat?: '12h' | '24h';\n minuteStep?: number;\n showSeconds?: boolean;\n}\n```\n\n#### Calendar Initialization\n\nThe calendar automatically initializes to show the month containing your pre-selected dates:\n\n- **With `selectedDate`**: Calendar opens to the month of the selected date\n- **With `selectedRange`**: Calendar opens to the month of the range start date\n- **With `selectedDates`**: Calendar opens to the month of the first selected date\n- **Without initial dates**: Calendar opens to the current month\n\n```tsx\n// Calendar will open to December 2023\nconst datePicker = useDatePicker({\n mode: 'single',\n selectedDate: new Date(2023, 11, 25) // Christmas 2023\n});\n\n// Calendar will open to March 2024 (start date's month)\nconst rangePicker = useDatePicker({\n mode: 'range',\n selectedRange: {\n start: new Date(2024, 2, 15), // March 15, 2024\n end: new Date(2024, 3, 10) // April 10, 2024\n }\n});\n```\n\n#### Return Value\n\nThe hook returns an object with the following properties and methods:\n\n##### State Properties\n\n- `currentMonth: number` - Currently displayed month (0-11)\n- `currentYear: number` - Currently displayed year\n- `selectedDate: Date | null` - Selected date (single mode)\n- `selectedDates: Date[]` - Selected dates (multiple mode)\n- `selectedRange: DateRange` - Selected range (range mode)\n- `hoveredDate: Date | null` - Currently hovered date\n- `isOpen: boolean` - Whether the datepicker is open\n- `calendar: CalendarMonth` - Calendar data for rendering\n\n##### Action Methods\n\n- `selectDate(date: Date): void` - Select a date\n- `selectRange(start: Date, end?: Date): void` - Select a range\n- `addDate(date: Date): void` - Add a date (multiple mode)\n- `removeDate(date: Date): void` - Remove a date (multiple mode)\n- `clearSelection(): void` - Clear all selections\n- `setHoveredDate(date: Date | null): void` - Set hovered date\n- `goToNextMonth(): void` - Navigate to next month\n- `goToPreviousMonth(): void` - Navigate to previous month\n- `goToToday(): void` - Navigate to current month\n- `goToMonth(year: number, month: number): void` - Navigate to specific month\n- `setIsOpen(isOpen: boolean): void` - Set open state\n- `toggle(): void` - Toggle open state\n- `setTime(hours: number, minutes: number, seconds?: number): void` - Set time for selected date\n- `selectDateAndTime(date: Date, hours: number, minutes: number, seconds?: number): void` - Select date and time together\n\n##### Helper Methods\n\n- `isDateDisabled(date: Date): boolean` - Check if date is disabled\n- `isDateSelected(date: Date): boolean` - Check if date is selected\n- `isDateInRange(date: Date): boolean` - Check if date is in range\n- `formatDate(date: Date, format?: string): string` - Format a date\n- `parseDate(dateString: string, format?: string): Date | null` - Parse a date string\n\n## Advanced Usage\n\n### DateTime Selection with Time Constraints\n\n```tsx\nconst datePicker = useDatePicker({\n mode: 'single',\n minDate: new Date(), // No past dates\n time: {\n enableTime: true,\n timeFormat: '12h',\n minuteStep: 15, // 15-minute intervals\n showSeconds: false,\n },\n disabledDaysOfWeek: [0, 6], // Disable weekends\n});\n\n// Enhanced Today button behavior\n// When time is enabled, goToToday() sets current date AND time\ndatePicker.goToToday(); // Sets to right now!\n```\n\n### Custom Date Formatting\n\n```tsx\nconst datePicker = useDatePicker({\n mode: 'single'\n});\n\n// Format dates in different ways\nconst formattedDate = datePicker.formatDate(datePicker.selectedDate, 'EEEE, MMMM do, yyyy');\n// \"Friday, January 15th, 2024\"\n```\n\n### Controlled Components\n\n```tsx\nfunction ControlledDatePicker() {\n const [selectedDate, setSelectedDate] = useState(null);\n \n const datePicker = useDatePicker({\n mode: 'single',\n selectedDate\n });\n \n useEffect(() => {\n setSelectedDate(datePicker.selectedDate);\n }, [datePicker.selectedDate]);\n \n return (\n // Your component JSX\n );\n}\n```\n\n## Styling\n\nThe datepicker is completely headless, so you have full control over styling. Here are some CSS classes you might want to style:\n\n```css\n.calendar {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n background: white;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 1px;\n padding: 8px;\n}\n\n.calendar-day {\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.calendar-day:hover {\n background-color: #f0f0f0;\n}\n\n.calendar-day.selected {\n background-color: #007bff;\n color: white;\n}\n\n.calendar-day.today {\n font-weight: bold;\n color: #007bff;\n}\n\n.calendar-day.in-range {\n background-color: #e6f3ff;\n color: #007bff;\n}\n\n.calendar-day.range-endpoint {\n background-color: #007bff;\n color: white;\n}\n\n.calendar-day:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.calendar-day.other-month {\n color: #ccc;\n}\n```\n\n## Examples\n\nThis package includes complete example components:\n\n```tsx\nimport { SimpleCalendar, RangePicker, MultiSelectCalendar } from '@billme-venture/headless-datepicker';\n\n// Pre-built components with styling\nfunction App() {\n return (\n
\n );\n}\n```\n\n## TypeScript Support\n\nThe package is written in TypeScript and includes complete type definitions:\n\n```typescript\nimport { DatePickerReturn, CalendarDay, DateRange } from '@billme-venture/headless-datepicker';\n\nfunction MyComponent() {\n const datePicker: DatePickerReturn = useDatePicker();\n \n const handleDayClick = (day: CalendarDay) => {\n if (!day.isDisabled) {\n datePicker.selectDate(day.date);\n }\n };\n \n return (\n // Component JSX\n );\n}\n```\n\n## Testing\n\nThe package includes comprehensive tests. Run them with:\n\n```bash\nnpm test\n```\n\n## Troubleshooting\n\n### \"Cannot read properties of undefined (reading 'ReactCurrentDispatcher')\" Error\n\nThis error typically occurs when there are multiple versions of React in your project or when React hooks are called outside a React component. Here are the solutions:\n\n#### 1. **Check for Multiple React Versions**\n```bash\nnpm ls react\n```\nIf you see multiple versions, ensure only one version of React is installed:\n\n```bash\nnpm dedupe\n# or\nnpm install --legacy-peer-deps\n```\n\n#### 2. **Webpack Resolution (for Create React App or custom Webpack)**\nAdd this to your webpack config:\n```javascript\nmodule.exports = {\n resolve: {\n alias: {\n react: path.resolve('./node_modules/react'),\n 'react-dom': path.resolve('./node_modules/react-dom'),\n },\n },\n};\n```\n\n#### 3. **Vite Resolution**\nAdd this to your `vite.config.js`:\n```javascript\nexport default defineConfig({\n resolve: {\n alias: {\n react: path.resolve('./node_modules/react'),\n 'react-dom': path.resolve('./node_modules/react-dom'),\n },\n },\n});\n```\n\n#### 4. **Next.js Resolution**\nAdd this to your `next.config.js`:\n```javascript\nmodule.exports = {\n webpack: (config) => {\n config.resolve.alias = {\n ...config.resolve.alias,\n react: path.resolve('./node_modules/react'),\n 'react-dom': path.resolve('./node_modules/react-dom'),\n };\n return config;\n },\n};\n```\n\n#### 5. **Package Manager Issues**\nTry deleting `node_modules` and reinstalling:\n```bash\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n#### 6. **Ensure Proper Usage**\nMake sure you're calling `useDatePicker` inside a React component:\n```tsx\n// ✅ Correct - inside React component\nfunction MyComponent() {\n const datePicker = useDatePicker();\n return