{"_id":"@yamatomo/chakra-react-datepicker","_rev":"1-5d99ebd2162b10e793ba28ad9acdc8ff","name":"@yamatomo/chakra-react-datepicker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@yamatomo/chakra-react-datepicker","version":"1.0.0","description":"Integration of chakra-ui and react-datepicker","author":{"name":"Yama-Tomo","email":"yam4.tomo@gmail.com"},"homepage":"https://github.com/Yama-Tomo/chakra-react-datepicker#readme","repository":{"type":"git","url":"git+https://github.com/Yama-Tomo/chakra-react-datepicker.git"},"bugs":{"url":"https://github.com/Yama-Tomo/chakra-react-datepicker/issues"},"license":"MIT","keywords":["chakra","chakra-ui","react-datepicker","datepicker","timepicker","calendar","typescript","react"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/cjs/index.d.ts","scripts":{"test:vrt":"percy storybook http://localhost:6006","build":"rm -rf dist && FORCE_COLOR=true run-p -l -c build:*","build:esm":"tsc -p ./tsconfig.build.json -t esnext -m esnext --outDir dist/esm","build:cjs":"tsc -p ./tsconfig.build.json -d --outDir dist/cjs","lint":"FORCE_COLOR=true run-p -l -c lint:*","lint:eslint":"eslint './**/*.{js,ts,tsx}' --format codeframe --color --max-warnings=0","lint:type":"tsc --pretty","lint:format":"prettier -c './**/*.{js,ts,tsx}'","format":"prettier -w './**/*.{js,ts,tsx}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","release":"standard-version"},"devDependencies":{"@babel/core":"^7.17.5","@chakra-ui/icons":"^1.1.7","@chakra-ui/react":"^1.8.6","@emotion/react":"^11.8.2","@percy/cli":"^1.0.0-beta.76","@percy/storybook":"^4.1.0","@storybook/addon-actions":"^6.4.19","@storybook/addon-essentials":"^6.4.19","@storybook/addon-interactions":"^6.4.19","@storybook/addon-links":"^6.4.19","@storybook/react":"^6.4.19","@storybook/testing-library":"^0.0.9","@trivago/prettier-plugin-sort-imports":"^3.2.0","@types/react-datepicker":"^4.3.4","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0","babel-loader":"^8.2.3","eslint":"^8.11.0","eslint-config-prettier":"^8.5.0","eslint-formatter-codeframe":"^7.32.1","eslint-plugin-react":"^7.29.3","eslint-plugin-react-hooks":"^4.3.0","framer-motion":"^6.2.8","mockdate":"^3.0.5","npm-run-all":"^4.1.5","prettier":"^2.5.1","qs":"^6.10.3","react":"^17.0.2","react-datepicker":"^4.7.0","react-docgen-typescript":"^2.2.2","react-dom":"^17.0.2","react-icons":"^4.3.1","standard-version":"^9.3.2","typescript":"^4.6.2"},"optionalDependencies":{"@types/react-datepicker":"^4.3.4","typescript":">=4"},"peerDependencies":{"@chakra-ui/react":"^1.8.6","react":"^17.0.2","react-datepicker":"^4.7.0"},"gitHead":"56c71010ff9b666121930383152a150442f3cd47","dependencies":{"@types/react-datepicker":"^4.3.4","typescript":">=4"},"_id":"@yamatomo/chakra-react-datepicker@1.0.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-9IIU45TjjYmgRIQemkUIirJYNoU3FL4iYSJiDn4oPlWKmyqnDjuqgTy/1ev5CZu18UPLwBlRoFc/gcepoK6ERQ==","shasum":"9d7385e93e4a1eb10de667866066bc9c2d38a2e1","tarball":"https://registry.npmjs.org/@yamatomo/chakra-react-datepicker/-/chakra-react-datepicker-1.0.0.tgz","fileCount":8,"unpackedSize":46325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1CmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp66A/+Nhbu6kW+PoqtuXTQUUcyWMqWnQtHFqsqVoRqDjd3tmJU4/GT\r\nbuytm/UcmXgf0SRcvceGDvDMQty6Wm2iGhTYuDG+cdtwsICXGNyIjRhckGvG\r\nnfgyvEKRdyHz88JPLC1qrJ5CTlc3GgMEbRD3ekqqoVkcQbjwz/ZPmyqAFZSP\r\nikQLAW1aMDuLw2jqQgDkrAk92BS+clkBHFmtMWjr89mOpEAw/cXGdoFhvtzN\r\n8/LYKEbMiHE1HrPXZMgFPc32FLTstYM/oWxLY5o5CoMK+Ubad8PDkZZ7F9pc\r\n/g/Dw4vUKZXTHS1b4WADHg0RfYw+FEjLW2a3DPOG12IY1d5+KM9r42seIXdq\r\n9iKXY/Whjb6w1R90dQ3gi28CpTzjo2Yotza74HXxv0igOS5gYl4B4YFnfKRB\r\nfzX9BaeF78MbxUyTgjEu0bmRfKyJhE9pHZwBEnDBcQg6XpqMZmCe0vb8G1nI\r\nRuO7BYQatiFUfzXN7mvAkstDHR/PreHj3ArY+PNM8ieGYXWYhvfJHnDdWH2f\r\nMa3wOb6kSdUZEIYPT305uSYwZfRcnbskRcjF7uy+DRcCG8SFWuddigLaYxu2\r\ngLWeUwRh1EF1wuWdQ5smmhL2C8yJWZFtPWqewuObRQlaqLKy6IZmOl3/T60N\r\nfZMsO/8sdFewxseANxDAXG1aeZPpV7pY/hA=\r\n=7Roc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGy0Ge4sdA0N2DF3/pXQO55HaNZhGUld5dCRSvN9hKosAiEArYhLsP/QKTe7uo1mQRs/LD91YNpC6Km726un48HAzZk="}]},"_npmUser":{"name":"yamatomo","email":"mazda13bturbo@gmail.com"},"directories":{},"maintainers":[{"name":"yamatomo","email":"mazda13bturbo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chakra-react-datepicker_1.0.0_1647268006159_0.37194927156387614"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-14T14:26:46.054Z","1.0.0":"2022-03-14T14:26:46.325Z","modified":"2022-04-11T10:54:47.634Z"},"maintainers":[{"name":"yamatomo","email":"mazda13bturbo@gmail.com"}],"description":"Integration of chakra-ui and react-datepicker","homepage":"https://github.com/Yama-Tomo/chakra-react-datepicker#readme","keywords":["chakra","chakra-ui","react-datepicker","datepicker","timepicker","calendar","typescript","react"],"repository":{"type":"git","url":"git+https://github.com/Yama-Tomo/chakra-react-datepicker.git"},"author":{"name":"Yama-Tomo","email":"yam4.tomo@gmail.com"},"bugs":{"url":"https://github.com/Yama-Tomo/chakra-react-datepicker/issues"},"license":"MIT","readme":"# chakra react datepicker\n\nIntegration of chakra-ui and react-datepicker\n\n[storybook](https://yama-tomo.github.io/chakra-react-datepicker/)\n\n\n\n## getting started\n\n```bash\nyarn add @yamatomo/chakra-react-datepicker react-datepicker\n```\n\nIf you use typescript, also install the following packages.\n\n```bash\nyarn add -D @types/react-datepicker\n```\n\nYou also need chakra-ui. See the [docs](https://chakra-ui.com/guides/first-steps) for the installation\n\n## usage\n\n```tsx\nimport { DatePicker } from '@yamatomo/chakra-react-datepicker';\n\nimport 'react-datepicker/dist/react-datepicker.css';\n// or using CSS Modules\n// import 'react-datepicker/dist/react-datepicker-cssmodules.css';\n\nconst Component = (props) => (\n \n);\n```\n\nUsage is the same as `react-datepicker`. See the [docs](https://reactdatepicker.com/) for details.\n\n## theme\n\nYou can customize the datepicker style with `extendDatePickerTheme` props.\n\n```tsx\n {\n if (colorMode === 'light') {\n // customize header and outside day color\n return { ...theme, header: 'pink.400', outsideDay: '#828282' };\n }\n\n // dark mode color\n return ...\n }}\n/> \n```\n\n### default theme\n\n| key | light mode value | dark mode value |\n|-----------------|------------------|-----------------|\n| gray100 | gray.100 | gray.700 |\n| gray200 | gray.200 | gray.600 |\n| gray300 | gray.300 | gray.500 |\n| gray400 | gray.400 | gray.400 |\n| gray500 | gray.500 | gray.400 |\n| color300 | blue.300 | blue.200 |\n| color500 | blue.500 | blue.300 |\n| color600 | blue.600 | blue.500 |\n| header | white | gray.700 |\n| text | gray.800 | whiteAlpha.900 |\n| negativeText | whiteAlpha.900 | whiteAlpha.900 |\n| monthBackground | white | gray.700 |\n| outsideDay | #9f9696 | #9f9696 |\n\n## props\n\n| name | type | description |\n|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|\n| ...react-datepicker props | `ReactDatePickerProps` | `react-datepicker` props
(Does not support `todayButton`, will be ignored) |\n| rootProps | `undefined \\| BoxProps` | for root element props |\n| inputProps | `undefined \\| Omit` | input props |\n| datePickerSize | `undefined \\| ResponsiveValue<'xs' \\| 'sm' \\| 'md' \\| 'xl'>` | datepicker size.
supported [responsive styles](https://chakra-ui.com/docs/styled-system/features/responsive-styles) |\n| datePickerColorSchema | `undefined \\| \"whiteAlpha\" \\| \"blackAlpha\" \\| \"gray\" \\| \"red\" \\| \"orange\" \\| \"yellow\" \\| \"green\" \\| \"teal\" \\| \"blue\" \\| \"cyan\" \\| \"purple\" \\| \"pink\" \\| \"linkedin\" \\| \"facebook\" \\| \"messenger\" \\| \"whatsapp\" \\| \"twitter\" \\| \"telegram\"` | |\n| extendDatePickerTheme | `undefined \\| (colorMode: 'light' \\| 'dark', theme: DatePickerTheme) => DatePickerTheme` | |\n\n\n","readmeFilename":"README.md"}