{"_id":"@axcelershub/react-calendar","name":"@axcelershub/react-calendar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@axcelershub/react-calendar","version":"1.0.0","description":"Reusable React calendar and date-input components built on react-day-picker: header selector variants, check-in days, US-format date input with popover.","type":"module","license":"MIT","author":{"name":"AxcelersHub","email":"kanakferdous@gmail.com"},"keywords":["react","calendar","datepicker","date-input","react-day-picker","check-in","typescript"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/src/index.d.ts","exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/index.css"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"oxlint","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"date-fns":"^4.4.0","react-day-picker":"^10.0.1"},"devDependencies":{"@types/node":"^24.13.2","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.3","oxlint":"^1.71.0","react":"^19.2.7","react-dom":"^19.2.7","typescript":"~6.0.2","vite":"^8.1.1","vite-plugin-dts":"^4.5.0","vite-plugin-lib-inject-css":"^2.2.1"},"_id":"@axcelershub/react-calendar@1.0.0","_nodeVersion":"22.18.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-eKKKXO25lRWhwJtxN6lrsDENt//s8aWjOeWbeB+g3R0MLnDAKYRtaViRKBnIE5EAWEMc7HPimpTTr3ubkS2EhA==","shasum":"80e4720e7adc292d0d748b1dfa31f9e48f980a48","tarball":"https://registry.npmjs.org/@axcelershub/react-calendar/-/react-calendar-1.0.0.tgz","fileCount":15,"unpackedSize":38604,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCIfRPBXNUN7PQh9RQD7eHJ7ri8cRqlJO6YbtJR2K/uUgIgYJpN0t/3PAq73+lzFPjcSRVeheEyKcphuZznaJEQJVA="}]},"_npmUser":{"name":"axcelershub","email":"contact@axcelershub.com"},"directories":{},"maintainers":[{"name":"axcelershub","email":"contact@axcelershub.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-calendar_1.0.0_1783606083927_0.22976938531259528"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-09T14:08:03.730Z","1.0.0":"2026-07-09T14:08:04.089Z","modified":"2026-07-09T14:08:04.274Z"},"maintainers":[{"name":"axcelershub","email":"contact@axcelershub.com"}],"description":"Reusable React calendar and date-input components built on react-day-picker: header selector variants, check-in days, US-format date input with popover.","keywords":["react","calendar","datepicker","date-input","react-day-picker","check-in","typescript"],"author":{"name":"AxcelersHub","email":"kanakferdous@gmail.com"},"license":"MIT","readme":"# Calendar Component\n\n**Version 1.0.0** — see [CHANGELOG.md](./CHANGELOG.md) for release history.\n\nA reusable, design-system-styled `Calendar` component for React + TypeScript, built on [react-day-picker](https://daypicker.dev/) v10 and [date-fns](https://date-fns.org).\n\n## Demo\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe demo page (`src/App.tsx`) shows every variant side by side.\n\n## Install as an npm package (recommended)\n\nOnce published, anyone adds it with one command — no folder copying:\n\n```bash\nnpm install @axcelershub/react-calendar\n```\n\n```tsx\nimport { Calendar, DateInput } from \"@axcelershub/react-calendar\";\n```\n\nStyles load automatically. React 18+ required; `react-day-picker` and\n`date-fns` install automatically as dependencies. Verified working in\nNext.js 15 (App Router) and Vite.\n\nWithout the npm registry, the packed tarball works the same way:\n\n```bash\nnpm install ./axcelershub-react-calendar-1.0.0.tgz\n```\n\n### Publishing (maintainer)\n\n```bash\nnpm login                      # one time\nnpm publish --access public    # builds automatically via prepublishOnly\n```\n\nFor each release: bump `version` in package.json → update CHANGELOG.md →\n`npm publish` → `git tag vX.Y.Z && git push --tags`.\n\n## Adding the component from GitHub\n\nAnyone who wants this component in their React + TypeScript project:\n\n```bash\n# 1. Get the code (clone, or download a release zip from the Releases page)\ngit clone <repo-url>\n\n# 2. Install the two runtime dependencies in YOUR project\nnpm install react-day-picker date-fns\n\n# 3. Copy the component folder into your project\ncp -r <cloned-repo>/src/components/Calendar  <your-project>/src/components/\n```\n\nThen import and use — nothing else to configure:\n\n```tsx\nimport { Calendar, DateInput } from \"./components/Calendar\";\n```\n\nWorks in Vite, Next.js (App/Pages Router), CRA, and Remix. Pin a specific\nversion by checking out its tag: `git checkout v1.0.0`.\n\n## Using the component in your project\n\n1. Install the two dependencies:\n\n```bash\nnpm install react-day-picker date-fns\n```\n\n2. Copy the `src/components/Calendar/` folder into your project.\n\n3. Import and use:\n\n```tsx\nimport { useState } from \"react\";\nimport { Calendar } from \"./components/Calendar\";\n\nfunction MyPage() {\n  const [date, setDate] = useState<Date>();\n  return <Calendar mode=\"single\" selected={date} onSelect={setDate} />;\n}\n```\n\nCSS is bundled — `Calendar.tsx` imports `react-day-picker/style.css` and `Calendar.css` itself. No extra setup needed.\n\n## Variants\n\n### Header (`selector` prop — omit for the Basic header)\n\n| Usage | Header |\n|---|---|\n| `<Calendar />` | `‹ January 2026 ›` (Basic) |\n| `<Calendar selector=\"month\" />` | `‹ [Jan ▾] 2026 ›` |\n| `<Calendar selector=\"year\" />` | `‹ Jan [2026 ▾] ›` |\n| `<Calendar selector=\"month-year\" />` | `‹ [Jan ▾] [2026 ▾] ›` |\n| `<Calendar selector=\"date-month-year\" />` | `‹ [Jan 12, 2026 ▾] ›` — picking a date selects it |\n\n### Day button (`variant` prop)\n\n| Usage | Day cell |\n|---|---|\n| `<Calendar />` | Plain day number |\n| `<Calendar variant=\"checkin\" checkedDates={dates} onCheckinToggle={fn} />` | Day number + check-in checkbox below |\n\n> **Check-in rule:** days before today are automatically disabled in the checkin\n> variant — users cannot check in on past dates. Any `disabled` matchers you pass\n> are merged on top of this rule.\n\n```tsx\n// Check-in example — single mode is the default: checking a day\n// replaces the previous check-in, so only one day is ever checked.\nconst [checked, setChecked] = useState<Date[]>([]);\n\n<Calendar\n  variant=\"checkin\"\n  onDayClick={() => {}} // makes days interactive without a selection mode\n  checkedDates={checked}\n  onCheckinChange={setChecked} // receives the next array, ready to store\n/>\n\n// Need multiple days checked (e.g. a habit tracker)? Opt in:\n<Calendar\n  variant=\"checkin\"\n  checkinMode=\"multiple\"\n  onDayClick={() => {}}\n  checkedDates={checked}\n  onCheckinChange={setChecked}\n/>\n```\n\n## DateInput (popover trigger)\n\nWhen the calendar should stay hidden until the user clicks a field, use\n`DateInput` — an input-style trigger that opens the Calendar in a popover.\nPicking a date fills the field and closes the popover.\n\n```tsx\nimport { DateInput } from \"./components/Calendar\";\n\nconst [date, setDate] = useState<Date>();\n\n<DateInput\n  value={date}\n  onChange={setDate}\n  placeholder=\"Blood draw date\"\n  selector=\"month-year\"        // any Calendar prop passes through\n/>\n```\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `value` | `Date` | — | Selected date (controlled) |\n| `onChange` | `(date?: Date, checkedDates?: Date[]) => void` | — | Fires on pick; popover closes. `checkedDates` is only provided when `variant=\"checkin\"` is enabled — otherwise `undefined`. |\n| `placeholder` | `string` | `\"Select date\"` | Text when empty |\n| `dateFormat` | `string` | `\"MM/dd/yyyy\"` (US) | date-fns display format — customize freely, e.g. `\"dd/MM/yyyy\"`, `\"MMM d, yyyy\"` |\n| `inputDisabled` | `boolean` | `false` | Disable the field |\n| `closeOnSelect` | `boolean` | `true` (`false` for checkin variant) | Close the popover after picking a date. The checkin variant stays open so multiple days can be toggled; it closes on outside click / Escape. |\n| …plus any Calendar prop | | | `selector`, `variant`, `disabled`, etc. |\n\n> **Type safety:** `checkedDates` / `onCheckinToggle` are only accepted when\n> `variant=\"checkin\"` — passing them without the checkin variant is a\n> TypeScript error, so check-in data never flows where it isn't enabled.\n\n## Props\n\n`CalendarProps` extends all [DayPicker props](https://daypicker.dev/api), plus:\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `selector` | `\"month\" \\| \"year\" \\| \"month-year\" \\| \"date-month-year\"` | — | Header selection design. Omit for Basic label header. |\n| `variant` | `\"default\" \\| \"checkin\"` | `\"default\"` | Day button design. |\n| `checkinMode` | `\"single\" \\| \"multiple\"` | `\"single\"` | Single: a new check-in replaces the previous one. Multiple: any number of days. |\n| `checkedDates` | `Date[]` | — | Checked days (checkin variant). |\n| `onCheckinChange` | `(dates: Date[]) => void` | — | Receives the next checkedDates array, computed per `checkinMode` — pass your state setter directly. |\n| `onCheckinToggle` | `(date: Date) => void` | — | Raw clicked date, if you prefer to manage the array yourself. |\n\nCommonly used DayPicker props that pass straight through:\n\n| Prop | Description |\n|---|---|\n| `mode` | `\"single\" \\| \"multiple\" \\| \"range\"` selection |\n| `selected` / `onSelect` | Controlled selection |\n| `disabled` | Disable days, e.g. `{ dayOfWeek: [0, 6] }` or `{ before: new Date() }` |\n| `startMonth` / `endMonth` | Navigation + dropdown range |\n| `reverseYears` | Year dropdown order (newest first when `true`) |\n\n> **Year dropdown default:** with `selector=\"year\"` or `selector=\"month-year\"`,\n> the year list runs from **1970 to the current year + 4** (today: 2030) and\n> shifts forward automatically every new year, keeping ~5 years of booking\n> headroom. The native dropdown scrolls and opens at the current selection.\n> Pass `startMonth` / `endMonth` to override.\n| `month` / `defaultMonth` / `onMonthChange` | Month navigation control |\n| `showOutsideDays` | Default `true` |\n\n## Styling\n\nAll colors/sizing live as CSS variables in `src/components/Calendar/Calendar.css`:\n\n```css\n--cal-bg           /* card background   */  --cal-selected-bg  /* selected day */\n--cal-text         /* day text          */  --cal-today-bg     /* current day  */\n--cal-text-muted   /* outside/disabled  */  --cal-radius       /* corner radius */\n--cal-hover-bg     /* hover state       */  --cal-day-size     /* day button size */\n```\n\nOverride them on `.cal-root` (or a wrapper) to re-theme without touching component code.\n\n## File structure\n\n```\nsrc/components/Calendar/\n├── Calendar.tsx                  # main wrapper around <DayPicker>\n├── Calendar.css                  # design tokens + all state styling\n├── types.ts                      # CalendarProps, CalendarSelector, CalendarVariant\n├── index.ts                      # public exports\n├── DateInput.tsx                 # input-style popover trigger\n└── parts/\n    ├── DropdownMenu.tsx          # custom scrollable dropdown (shared)\n    ├── CalDropdown.tsx           # adapter for DayPicker dropdowns\n    ├── CheckinDayButton.tsx      # \"checkin\" variant day button (raw props)\n    └── DateDropdownCaption.tsx   # \"date-month-year\" header dropdown\n\nWorks in Next.js App Router out of the box — `\"use client\"` is already in\nplace, and all state flows through plain props (no React context).\n```\n\n## States implemented (per design)\n\n- **Nav arrows:** default / hover / disabled\n- **Day buttons:** default / hover / disabled / selected / today / outside (all combinations, e.g. disabled today)\n- **Dropdown pills:** default / hover / disabled / keyboard focus\n- **Check-in box:** unchecked / checked (incl. checked-on-selected contrast)\n- Keyboard navigation and ARIA labels come from react-day-picker (WCAG 2.1 AA)\n","readmeFilename":"README.md","_rev":"1-8d446266fd0de84384c5c5edb7b1c68f"}