{"_id":"@alicetears/nextjs-universal-datepicker","_rev":"2-c7e6733949a1da2c73512c4c10ffc48d","name":"@alicetears/nextjs-universal-datepicker","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alicetears/nextjs-universal-datepicker","version":"1.0.0","keywords":["datepicker","date-picker","calendar","react","nextjs","next.js","typescript","accessible","themeable","thai","buddhist-era","BE","AD"],"author":"","license":"MIT","_id":"@alicetears/nextjs-universal-datepicker@1.0.0","maintainers":[{"name":"alicetears","email":"thanadolsingkhornart@gmail.com"}],"dist":{"shasum":"3bcbcb09bce5604f53947477f3d882ac5f85773d","tarball":"https://registry.npmjs.org/@alicetears/nextjs-universal-datepicker/-/nextjs-universal-datepicker-1.0.0.tgz","fileCount":9,"integrity":"sha512-1R2UbgHmnS9TxgB3/dkQ9mB+pfTwbJgb573qlBNUWKk2kHJP/ozUAJYvvu8vD6CuXUPwx6C7E9/dAdY2eAABzA==","signatures":[{"sig":"MEQCID08060HfiW9+15Cq8HJFF9PeTedyFebhr9dw2QXvTdDAiA+GXwCxXlH8dkjr0UBUkDpCzFt+Z+XE7ug0gkuSyewxw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155784},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"a0524cae4d950dc2d86cd82ac14242f32acf5cf5","scripts":{"dev":"next dev","lint":"next lint","test":"jest","build":"tsup","start":"next start","build:next":"next build","test:watch":"jest --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"alicetears","email":"thanadolsingkhornart@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.3","description":"A modern, accessible, and themeable date picker component for Next.js with support for AD/BE era display, Thai locale, and full keyboard navigation.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","next":"^14.2.0","tsup":"^8.5.1","react":"^18.3.1","eslint":"^8.57.0","react-dom":"^18.3.1","typescript":"^5.4.5","@types/node":"^20.14.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","eslint-config-next":"^14.2.0","@testing-library/react":"^14.2.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.0","@esbuild-plugins/tsconfig-paths":"^0.1.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-universal-datepicker_1.0.0_1769239000763_0.4245770140027929","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alicetears/nextjs-universal-datepicker","version":"1.1.0","description":"A modern, accessible, and themeable date picker component for Next.js with support for AD/BE era display, 62+ locales, and full keyboard navigation.","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"},"./styles":"./dist/styles.css","./package.json":"./package.json"},"keywords":["datepicker","date-picker","calendar","react","nextjs","next.js","typescript","accessible","themeable","i18n","internationalization","localization","multilingual","thai","buddhist-era","BE","AD"],"author":"","license":"MIT","repository":{"type":"git","url":""},"scripts":{"dev":"next dev","build":"tsup","build:next":"next build","start":"next start","lint":"next lint","test":"jest","test:watch":"jest --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@esbuild-plugins/tsconfig-paths":"^0.1.2","@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^14.2.0","@types/node":"^20.14.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","eslint":"^8.57.0","eslint-config-next":"^14.2.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","next":"^14.2.0","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.5.1","typescript":"^5.4.5"},"_id":"@alicetears/nextjs-universal-datepicker@1.1.0","gitHead":"2bebd63cfbb02640fb9ada508d0eedc01aa206d2","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-3c0vB35Fq2xlFFG5b3XCbyEoqCYmVi0/ZCvBxPbNvH7tRWe8uIfHT271c7gbd3r9au+feAb2LaCa5HxFaxXREg==","shasum":"621476a56521c00902014444b534e854c48da36e","tarball":"https://registry.npmjs.org/@alicetears/nextjs-universal-datepicker/-/nextjs-universal-datepicker-1.1.0.tgz","fileCount":9,"unpackedSize":298366,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBfuGXP0r3KT7wXVnBtAs0XsD0yFHIQa9hSpISLKMrnJAiACqsKV4K5OGEeGjUxYODO6lhel3eA2EcR//vADU6Z9eA=="}]},"_npmUser":{"name":"alicetears","email":"thanadolsingkhornart@gmail.com"},"directories":{},"maintainers":[{"name":"alicetears","email":"thanadolsingkhornart@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-universal-datepicker_1.1.0_1769240801337_0.8106116043573728"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-24T07:16:40.606Z","modified":"2026-01-24T07:46:41.606Z","1.0.0":"2026-01-24T07:16:40.896Z","1.1.0":"2026-01-24T07:46:41.481Z"},"license":"MIT","keywords":["datepicker","date-picker","calendar","react","nextjs","next.js","typescript","accessible","themeable","i18n","internationalization","localization","multilingual","thai","buddhist-era","BE","AD"],"repository":{"type":"git","url":""},"description":"A modern, accessible, and themeable date picker component for Next.js with support for AD/BE era display, 62+ locales, and full keyboard navigation.","maintainers":[{"name":"alicetears","email":"thanadolsingkhornart@gmail.com"}],"readme":"# Next.js Universal DatePicker\r\n\r\nA modern, accessible, and themeable date picker component for Next.js with support for AD/BE era display, 62+ locales, and full keyboard navigation.\r\n\r\n## ✨ Features\r\n\r\n- ✅ **Light / Dark / System theme support** - Automatically adapts to user's system preferences\r\n- ✅ **AD / BE era display** - Support for Anno Domini and Buddhist Era calendars\r\n- ✅ **62+ locales** - Comprehensive internationalization support\r\n- ✅ **Full keyboard navigation** - Arrow keys, Enter, Space, Home, End\r\n- ✅ **WCAG AA accessible** - ARIA labels, proper focus management, high contrast\r\n- ✅ **Mobile-friendly** - Touch targets ≥44px, responsive design\r\n- ✅ **Correct day-of-week calculation** - Guaranteed accuracy across all operations\r\n- ✅ **Next.js App Router compatible** - Works seamlessly with server components\r\n\r\n## 📦 Installation\r\n\r\n### Install from npm (when published)\r\n\r\n```bash\r\nnpm install @alicetears/nextjs-universal-datepicker\r\n# or\r\nyarn add @alicetears/nextjs-universal-datepicker\r\n# or\r\npnpm add @alicetears/nextjs-universal-datepicker\r\n```\r\n\r\n### Install from local development\r\n\r\nIf you're developing the library locally and want to test it in another project:\r\n\r\n```bash\r\n# In the library directory\r\nnpm run build\r\nnpm link\r\n\r\n# In your project directory\r\nnpm link @alicetears/nextjs-universal-datepicker\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n### 1. Import the Component and Styles\r\n\r\n```tsx\r\n\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { UniversalDatePicker } from \"@alicetears/nextjs-universal-datepicker\";\r\nimport \"@alicetears/nextjs-universal-datepicker/styles\";\r\n\r\nexport default function MyPage() {\r\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());\r\n\r\n  return (\r\n    <UniversalDatePicker\r\n      value={selectedDate}\r\n      onChange={setSelectedDate}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n**Important:** Don't forget to import the CSS styles! The component requires the stylesheet to render correctly.\r\n\r\n```tsx\r\nimport \"@alicetears/nextjs-universal-datepicker/styles\";\r\n```\r\n\r\n### 2. That's it! Your date picker is ready to use. 🎉\r\n\r\n## 📖 Usage Examples\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\n\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { UniversalDatePicker } from \"@alicetears/nextjs-universal-datepicker\";\r\nimport \"@alicetears/nextjs-universal-datepicker/styles\";\r\n\r\nexport default function MyPage() {\r\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());\r\n\r\n  return (\r\n    <UniversalDatePicker\r\n      value={selectedDate}\r\n      onChange={setSelectedDate}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### With Custom Theme and Era\r\n\r\n```tsx\r\n<UniversalDatePicker\r\n  value={selectedDate}\r\n  onChange={setSelectedDate}\r\n  theme=\"dark\"\r\n  era=\"BE\"\r\n  locale=\"th\"\r\n/>\r\n```\r\n\r\n### With Date Constraints\r\n\r\n```tsx\r\n<UniversalDatePicker\r\n  value={selectedDate}\r\n  onChange={setSelectedDate}\r\n  minDate={new Date(2024, 0, 1)}\r\n  maxDate={new Date(2024, 11, 31)}\r\n  disabled={false}\r\n/>\r\n```\r\n\r\n## 🎨 Theming\r\n\r\nThe DatePicker supports three theme modes:\r\n\r\n- **`system`** (default) - Automatically detects and follows the user's system theme preference\r\n- **`light`** - Light theme with neutral gray background and blue accent\r\n- **`dark`** - Dark theme with dark neutral background and same accent color\r\n\r\n### Theme Props\r\n\r\n```tsx\r\n<UniversalDatePicker\r\n  theme=\"system\" | \"light\" | \"dark\"\r\n  // ... other props\r\n/>\r\n```\r\n\r\n### Custom Theme Tokens\r\n\r\nThe theme system uses CSS variables that can be customized. The component uses the following design tokens:\r\n\r\n- **Radius**: `sm` (6px), `md` (10px), `lg` (14px)\r\n- **Spacing**: `xs` (4px), `sm` (8px), `md` (12px), `lg` (16px), `xl` (20px)\r\n- **Font**: System UI font stack\r\n\r\nYou can override CSS variables in your global styles:\r\n\r\n```css\r\n:root {\r\n  --color-accent: #2563eb;\r\n  --color-background: #ffffff;\r\n  --color-surface: #f8f9fa;\r\n  --radius-md: 10px;\r\n  /* ... other variables */\r\n}\r\n```\r\n\r\n### Tailwind Compatibility\r\n\r\nThe DatePicker uses CSS variables for theming, making it compatible with Tailwind CSS. You can use Tailwind's theme configuration to customize the colors:\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  theme: {\r\n    extend: {\r\n      colors: {\r\n        accent: 'var(--color-accent)',\r\n        // ... other colors\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## 📋 Props\r\n\r\n### UniversalDatePickerProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `value` | `Date \\| undefined` | `undefined` | The selected date |\r\n| `onChange` | `(date: Date) => void` | - | Callback when date is selected |\r\n| `theme` | `\"system\" \\| \"light\" \\| \"dark\"` | `\"system\"` | Theme mode |\r\n| `era` | `\"AD\" \\| \"BE\"` | `\"AD\"` | Calendar era (affects display only) |\r\n| `locale` | `\"en\" \\| \"th\" \\| \"es\" \\| \"ja\" \\| \"fr\" \\| \"de\" \\| \"zh\" \\| \"ko\" \\| \"pt\" \\| \"it\" \\| \"ru\" \\| ...` | `\"en\"` | Locale for day/month names (62+ locales supported) |\r\n| `dateFormat` | `\"DD/MM/YYYY\" \\| \"MM/DD/YYYY\"` | `\"DD/MM/YYYY\"` | Date format for input |\r\n| `className` | `string` | `\"\"` | Additional CSS classes |\r\n| `disabled` | `boolean` | `false` | Disable the date picker |\r\n| `minDate` | `Date` | - | Minimum selectable date |\r\n| `maxDate` | `Date` | - | Maximum selectable date |\r\n\r\n## ♿ Accessibility\r\n\r\nThe DatePicker is fully accessible and follows WCAG AA guidelines:\r\n\r\n- **ARIA labels** for all interactive elements\r\n- **Keyboard navigation**:\r\n  - `ArrowLeft/Right` - Navigate days\r\n  - `ArrowUp/Down` - Navigate weeks\r\n  - `Enter/Space` - Select date\r\n  - `Home` - Go to first day of month\r\n  - `End` - Go to last day of month\r\n  - `Tab` - Navigate between controls\r\n- **Focus indicators** - Clear visual focus states\r\n- **Color contrast** - WCAG AA compliant contrast ratios\r\n\r\n## 📅 Era Display\r\n\r\nThe `era` prop affects **display only**. Internally, all date calculations use the Gregorian calendar. When `era=\"BE\"`, the year is displayed as AD year + 543, but the underlying Date object remains unchanged.\r\n\r\n```tsx\r\n// Display shows BE year, but Date object is still Gregorian\r\n<UniversalDatePicker era=\"BE\" value={new Date(2024, 0, 15)} />\r\n// Displays: 15 มกราคม 2567 พ.ศ. (but Date is still 2024)\r\n```\r\n\r\n## 🌐 Locale Support\r\n\r\nThe DatePicker supports **62+ locales** with full translations for day names, abbreviated day names, and month names.\r\n\r\n### Supported Locales\r\n\r\n**European Languages:**\r\n- `en` - English\r\n- `es` - Spanish (Español)\r\n- `fr` - French (Français)\r\n- `de` - German (Deutsch)\r\n- `it` - Italian (Italiano)\r\n- `pt` - Portuguese (Português)\r\n- `ru` - Russian (Русский)\r\n- `nl` - Dutch (Nederlands)\r\n- `pl` - Polish (Polski)\r\n- `cs` - Czech (Čeština)\r\n- `hu` - Hungarian (Magyar)\r\n- `ro` - Romanian (Română)\r\n- `uk` - Ukrainian (Українська)\r\n- `bg` - Bulgarian (Български)\r\n- `hr` - Croatian (Hrvatski)\r\n- `sr` - Serbian (Српски)\r\n- `sk` - Slovak (Slovenčina)\r\n- `sl` - Slovenian (Slovenščina)\r\n- `et` - Estonian (Eesti)\r\n- `lv` - Latvian (Latviešu)\r\n- `lt` - Lithuanian (Lietuvių)\r\n- `fi` - Finnish (Suomi)\r\n- `sv` - Swedish (Svenska)\r\n- `no` - Norwegian (Norsk)\r\n- `da` - Danish (Dansk)\r\n- `el` - Greek (Ελληνικά)\r\n- `ca` - Catalan (Català)\r\n- `mk` - Macedonian (Македонски)\r\n- `sq` - Albanian (Shqip)\r\n- `bs` - Bosnian (Bosanski)\r\n\r\n**Asian Languages:**\r\n- `th` - Thai (ไทย)\r\n- `ja` - Japanese (日本語)\r\n- `zh` - Chinese (中文)\r\n- `ko` - Korean (한국어)\r\n- `hi` - Hindi (हिन्दी)\r\n- `vi` - Vietnamese (Tiếng Việt)\r\n- `id` - Indonesian (Bahasa Indonesia)\r\n- `ms` - Malay (Bahasa Melayu)\r\n- `tl` - Tagalog/Filipino\r\n- `bn` - Bengali (বাংলা)\r\n- `ta` - Tamil (தமிழ்)\r\n- `te` - Telugu (తెలుగు)\r\n- `mr` - Marathi (मराठी)\r\n- `gu` - Gujarati (ગુજરાતી)\r\n- `pa` - Punjabi (ਪੰਜਾਬੀ)\r\n- `ur` - Urdu (اردو)\r\n- `fa` - Persian/Farsi (فارسی)\r\n- `ne` - Nepali (नेपाली)\r\n- `si` - Sinhala (සිංහල)\r\n- `my` - Myanmar/Burmese (မြန်မာ)\r\n- `km` - Khmer (ខ្មែរ)\r\n- `lo` - Lao (ລາວ)\r\n\r\n**Middle Eastern & Other Languages:**\r\n- `ar` - Arabic (العربية)\r\n- `he` - Hebrew (עברית)\r\n- `tr` - Turkish (Türkçe)\r\n- `ka` - Georgian (ქართული)\r\n- `hy` - Armenian (Հայերեն)\r\n- `az` - Azerbaijani (Azərbaycan)\r\n- `kk` - Kazakh (Қазақ)\r\n- `uz` - Uzbek (Oʻzbek)\r\n- `mn` - Mongolian (Монгол)\r\n- `af` - Afrikaans\r\n\r\n### Example Usage\r\n\r\n```tsx\r\n// English\r\n<UniversalDatePicker locale=\"en\" />\r\n\r\n// Spanish\r\n<UniversalDatePicker locale=\"es\" />\r\n\r\n// Japanese\r\n<UniversalDatePicker locale=\"ja\" />\r\n\r\n// Arabic\r\n<UniversalDatePicker locale=\"ar\" />\r\n\r\n// And 58+ more locales...\r\n```\r\n\r\n## 🛠️ Development\r\n\r\n### For Library Developers\r\n\r\n```bash\r\n# Install dependencies\r\nnpm install\r\n\r\n# Run Next.js development server (for testing/demo)\r\nnpm run dev\r\n\r\n# Build the library for distribution\r\nnpm run build\r\n\r\n# Run tests\r\nnpm test\r\n\r\n# Run tests in watch mode\r\nnpm run test:watch\r\n\r\n# Build Next.js app (for demo/testing)\r\nnpm run build:next\r\n\r\n# Start Next.js production server\r\nnpm start\r\n```\r\n\r\n### Publishing to npm\r\n\r\n1. Update the version in `package.json`\r\n2. Build the library: `npm run build`\r\n3. Publish: `npm publish --access public` (make sure you're logged in with `npm login`)\r\n\r\nThe `prepublishOnly` script will automatically build the library before publishing.\r\n\r\n## 📁 Project Structure\r\n\r\n```\r\nsrc/\r\n├── theme/\r\n│   ├── tokens.ts        # Design tokens (radius, spacing, font)\r\n│   ├── light.ts         # Light theme colors\r\n│   ├── dark.ts          # Dark theme colors\r\n│   └── index.ts         # Theme exports\r\n├── react/\r\n│   ├── UniversalDatePicker.tsx  # Main component\r\n│   ├── CalendarGrid.tsx         # Calendar grid layout\r\n│   ├── DateCell.tsx             # Individual date cell\r\n│   ├── MonthNavigation.tsx     # Month navigation controls\r\n│   └── ThemeProvider.tsx        # Theme context provider\r\n├── utils/\r\n│   ├── date.ts          # Date utility functions\r\n│   ├── era.ts           # Era conversion utilities\r\n│   └── locale.ts        # Locale utilities\r\n└── types/\r\n    └── index.ts         # TypeScript type definitions\r\n```\r\n\r\n## ✅ Validation Checklist\r\n\r\n- ✅ Day-of-week correctness preserved across all operations\r\n- ✅ Era logic untouched by theme changes\r\n- ✅ Light / Dark modes work correctly\r\n- ✅ Mobile-friendly (touch targets ≥44px)\r\n- ✅ Full keyboard accessibility\r\n- ✅ Next.js App Router safe (no client-side only code in server components)\r\n- ✅ WCAG AA contrast compliance\r\n- ✅ No hardcoded colors or magic numbers\r\n- ✅ Theme switching doesn't affect date calculations\r\n\r\n## 📄 License\r\n\r\nMIT\r\n","readmeFilename":"Readme.md"}