{"_id":"@adityabhatia/chakra-date-range-picker","_rev":"1-c3ce837a4909c46deec42a7691fd65db","name":"@adityabhatia/chakra-date-range-picker","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@adityabhatia/chakra-date-range-picker","version":"1.0.0","keywords":["react","chakra-ui","date-picker","date-range-picker","typescript"],"author":"","license":"MIT","_id":"@adityabhatia/chakra-date-range-picker@1.0.0","maintainers":[{"name":"adityabhatia","email":"adityabhatia1704@gmail.com"}],"dist":{"shasum":"767103180ba8d689d498f5bebe79c1a1d0af801e","tarball":"https://registry.npmjs.org/@adityabhatia/chakra-date-range-picker/-/chakra-date-range-picker-1.0.0.tgz","fileCount":16,"integrity":"sha512-RWNGSy01g2b092BF2VzPlxc+mfiW9U+pM2cOhyhV7/A2+EM9U8TaS8OUidpLcTrPiSjtWy0zFjSNJtfkZD7hEA==","signatures":[{"sig":"MEUCIGgcOKQbKwzVjMIf5VZ1BRVRTHqRN5P6cO0IHdymzTW7AiEAjvrIswomFF0cHE1luN91e3k1PQxw3m9co8c2dvmWAJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15788},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"lint":"eslint src/**/*.{ts,tsx}","test":"jest","build":"tsc"},"_npmUser":{"name":"adityabhatia","email":"adityabhatia1704@gmail.com"},"_npmVersion":"10.9.0","description":"A date range picker component built with Chakra UI","directories":{},"_nodeVersion":"22.10.0","dependencies":{"@chakra-ui/icons":"^2.2.4","@chakra-ui/react":"^2.5.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","eslint":"^8.0.0","react-dom":"^18.3.1","typescript":"^5.7.2","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@typescript-eslint/parser":"^5.0.0","@typescript-eslint/eslint-plugin":"^5.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@chakra-ui/react":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chakra-date-range-picker_1.0.0_1732617016485_0.44591644131290176","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@adityabhatia/chakra-date-range-picker","version":"1.0.1","description":"A date range picker component built with Chakra UI","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","test":"jest","lint":"eslint src/**/*.{ts,tsx}"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@chakra-ui/react":">=2.0.0"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.7.2","eslint":"^8.0.0","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0"},"dependencies":{"@chakra-ui/icons":"^2.2.4","@chakra-ui/react":"^2.5.1"},"keywords":["react","chakra-ui","date-picker","date-range-picker","typescript"],"author":"","license":"MIT","_id":"@adityabhatia/chakra-date-range-picker@1.0.1","_nodeVersion":"22.10.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-39gE91YHu/oez07Cqy29XK3q5FKRy/VrDcbVgK+Q4n04XWBeNQDXXLjYdlzzK6xpy1fI1SZ8VNIxDsJ6l1WOeg==","shasum":"1894dd93360e21e1fd41548b1b30b1201f2fbc71","tarball":"https://registry.npmjs.org/@adityabhatia/chakra-date-range-picker/-/chakra-date-range-picker-1.0.1.tgz","fileCount":17,"unpackedSize":19154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEg6jZ+IFMUdoDoeGZG3kgo7f9V7nbrAY5hwMsRTfPYwIgPlWRRb7SrsncWufLxjcGYNGznaAmzNjXHJt6lOZsDJo="}]},"_npmUser":{"name":"adityabhatia","email":"adityabhatia1704@gmail.com"},"directories":{},"maintainers":[{"name":"adityabhatia","email":"adityabhatia1704@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chakra-date-range-picker_1.0.1_1733005310788_0.48719972018691626"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-26T10:30:16.377Z","modified":"2024-11-30T22:21:51.182Z","1.0.0":"2024-11-26T10:30:16.635Z","1.0.1":"2024-11-30T22:21:50.993Z"},"license":"MIT","keywords":["react","chakra-ui","date-picker","date-range-picker","typescript"],"description":"A date range picker component built with Chakra UI","maintainers":[{"name":"adityabhatia","email":"adityabhatia1704@gmail.com"}],"readme":"# Chakra Date Range Picker\n\nA beautiful and customizable date range picker component built for Chakra UI. This component allows users to select date ranges with an intuitive interface, perfect for booking systems, report generation, or any application requiring date range selection.\n\n\n\n\n## Features\n\n- 📅 Built on top of Chakra UI\n- 🎨 Fully customizable theme support\n- 📱 Responsive design\n- 🌍 Locale support\n- 📆 Date range selection with visual feedback\n- ⌨️ Keyboard navigation support\n- 🎯 Min/Max date constraints\n\n## Installation\n\n```bash\nnpm install chakra-date-range-picker\n\n# or\n\nyarn add chakra-date-range-picker\n```\n\n## Prerequisites\n\nThis component requires Chakra UI as a peer dependency. If you haven't already installed it, you can do so by running:\n\n```bash\nnpm install @chakra-ui/react @emotion/react @emotion/styled framer-motion\n```\n\n## Usage\n\n```jsx\nimport { ChakraDateRangePicker } from 'chakra-date-range-picker';\n\nfunction App() {\n const [startDate, setStartDate] = useState(null);\n const [endDate, setEndDate] = useState(null);\n\n const handleDateChange = (start, end) => {\n setStartDate(start);\n setEndDate(end);\n };\n\n return (\n \n );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `startDate` | `Date` | `null` | The selected start date |\n| `endDate` | `Date` | `null` | The selected end date |\n| `onChange` | `function` | Required | Callback function that is called when dates are selected. Receives two parameters: (startDate, endDate) |\n| `locale` | `string` | `'default'` | The locale to use for formatting dates |\n| `dateFormat` | `string` | - | Custom date format for the input display |\n| `minDate` | `Date` | - | The minimum selectable date |\n| `maxDate` | `Date` | - | The maximum selectable date |\n\n## Styling\n\nThe component uses Chakra UI's theme system, which means you can customize it using Chakra UI's theme customization features. The component uses the following Chakra UI components internally:\n\n- Box\n- Button\n- Grid\n- HStack\n- Input\n- InputGroup\n- Popover\n- Text\n- VStack\n\nYou can customize the appearance by using Chakra UI's theme customization:\n\n```jsx\nimport { extendTheme } from '@chakra-ui/react';\n\nconst theme = extendTheme({\n components: {\n ChakraDateRangePicker: {\n // Add your custom styles here\n },\n },\n});\n```\n\n## Examples\n\n### Basic Usage\n```jsx\n {\n setStartDate(start);\n setEndDate(end);\n }}\n/>\n```\n\n### With Min/Max Dates\n```jsx\n\n```\n\n### With Custom Locale\n```jsx\n\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT © [Your Name]\n\n---\n\n## Support\n\nIf you have any questions or need help, please open an issue on GitHub.\n","readmeFilename":"README.md"}