react-modular-datepicker 0.0.4 → 0.0.6

package/README.md

@@ -3,12 +3,12 @@
 A modular, lightweight, and type-safe React datepicker library. Whether you need a fully-featured calendar component or a headless hook to build your own UI, `react-modular-datepicker` has you covered.
 
 <p align="center">
-  <img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/hero-calendar.png" alt="react-modular-datepicker preview" width="320" />
+  <img src="./packages/docs/docs/images/hero-calendar.png" alt="react-modular-datepicker preview" width="320" />
 </p>
 
-## Strengths
+## Features
 
-- 🏗️ **Headless & Modular**: Use the `useDates` hook for complete control over your UI, or the `Calendar` component for a beautiful, ready-to-use setup.
+- 🏗️ **Headless & Modular**: Use the `useDates` hook for complete control over your UI, or the `Calendar` component for a ready-to-use setup.
 - 🪶 **Lightweight**: Small footprint with a pluggable adapter system (defaults to Day.js).
 - 🛡️ **Type-safe**: Written in TypeScript for a great developer experience.
 - 🎨 **Fully Customizable**: Style everything via Tailwind CSS or custom class names.
@@ -27,515 +27,101 @@ pnpm add react-modular-datepicker dayjs
 yarn add react-modular-datepicker dayjs
 ```
 
-> **Note on Peer Dependencies**: `dayjs` is configured as an optional peer dependency. By default, `react-modular-datepicker` uses the built-in `DayjsAdapter`, so `dayjs` must be installed in your project. However, if you bring your own date management library (such as `date-fns` or Luxon), you can implement a custom `DateAdapter` and pass it to the `adapter` prop without needing `dayjs`.
+> **Note**: `dayjs` is an optional peer dependency used as the default date adapter. You can also implement a custom `DateAdapter` (e.g., using `date-fns` or Luxon).
 
 ---
 
-## API Reference
-
-### Imports
-
-```tsx
-import {
-  Calendar,
-  useDates,
-  Dates,
-  Day,
-  DayjsAdapter,
-  defaultAdapter
-} from 'react-modular-datepicker';
-```
+## Quick Start
 
 ### `Calendar` Component
 
-The primary component for a ready-to-use calendar.
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `date` | `Date` | `new Date()` | The initial date/month to display. |
-| `selected` | `Date \| Date[] \| Range` | `undefined` | The currently selected date(s). |
-| `selectionMode` | `'single' \| 'range' \| 'multiple'` | `'single'` | The selection behavior. |
-| `onChange` | `(selected: any) => void` | `undefined` | Callback triggered when the selection changes. |
-| `minDate` | `Date` | `undefined` | The earliest selectable date. |
-| `maxDate` | `Date` | `undefined` | The latest selectable date. |
-| `disabledDates` | `Date[]` | `undefined` | An array of dates that should be disabled. |
-| `monthsToDisplay` | `number` | `1` | Number of months to show simultaneously. |
-| `firstDayOfWeek` | `number` | `0` | The first day of the week (0=Sun, 1=Mon, ...). |
-| `showOutsideDays` | `boolean` | `false` | Whether to show days from the previous/next months. |
-| `classNames` | `CalendarClassNames` | `undefined` | Custom classes for styling various parts of the UI. |
-| `locale` | `string` | `undefined` | Locale for date formatting (e.g., 'fr', 'es'). |
-| `translations` | `Partial<Translations>` | `undefined` | Custom translation strings for "Back" and "Forward". |
-| `adapter` | `DateAdapter` | `defaultAdapter` | The date management adapter (e.g., DayjsAdapter). |
-
-### `useDates` Hook
-
-The logic core of the library. It handles selection, navigation, and grid generation.
-
-```typescript
-const {
-  calendars,
-  getDateProps,
-  getBackProps,
-  getForwardProps,
-  setOffset
-} = useDates(props: UseDatesProps);
-```
-
-**`UseDatesProps`** includes all props from `Calendar` (except `classNames`, `locale`, `translations`) plus:
-- `onDateSelected`: `(dateObj: DateObj, event: any) => void`
-- `onOffsetChanged`: `(newOffset: number) => void`
-- `modifiers`: `Record<string, (date: Date) => boolean>`
-
-### Main Types
-
-#### `DateObj`
-Represents a single day in the calendar grid.
-- `date`: `Date`
-- `selected`: `boolean`
-- `selectable`: `boolean`
-- `today`: `boolean`
-- `prevMonth`/`nextMonth`: `boolean` (if outside current month)
-- `isRangeStart`/`isRangeEnd`/`isRangeBetween`/`isRangeHovering`: `boolean`
-- `modifiers`: `string[]`
-
-#### `Calendar`
-Represents a month grid.
-- `month`: `number` (0-11)
-- `year`: `number`
-- `weeks`: `(DateObj | null)[][]`
-
-#### `DateAdapter`
-Pluggable interface for date operations:
-```typescript
-export interface DateAdapter<T = any> {
-  date(value?: any): T;
-  add(date: T, amount: number, unit: 'day' | 'month' | 'year'): T;
-  subtract(date: T, amount: number, unit: 'day' | 'month' | 'year'): T;
-  startOf(date: T, unit: 'day' | 'month' | 'year'): T;
-  endOf(date: T, unit: 'day' | 'month' | 'year'): T;
-  isBefore(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
-  isAfter(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
-  isSame(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
-  set(date: T, unit: 'day' | 'month' | 'year', value: number): T;
-  get(date: T, unit: 'day' | 'month' | 'year'): number;
-  format(date: T, formatStr: string, locale?: string): string;
-  getDaysInMonth(date: T): number;
-  toDate(date: T): Date;
-  diff(date: T, comparison: T, unit: 'month' | 'year'): number;
-  getMonths(locale?: string): string[];
-  getWeekdays(locale?: string): string[];
-}
-```
-
----
-
-## Recipes
-
-<details>
-<summary><b>Basic Selection</b></summary>
-A simple single-date selection calendar.
-
 ```tsx
 import { Calendar } from 'react-modular-datepicker';
 import 'react-modular-datepicker/dist/index.css';
 
-function BasicExample() {
+export function App() {
   return <Calendar onChange={(date) => console.log(date)} />;
 }
 ```
 
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/basic.png" alt="Basic Selection" width="500" />
-
-</details>
-
-<details>
-<summary><b>Range Selection</b></summary>
-Select a start and end date with a hover preview.
-
-```tsx
-<Calendar
-  selectionMode="range"
-  monthsToDisplay={2}
-  onChange={(range) => console.log(range)}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/range.png" alt="Range Selection" width="500" />
-
-</details>
-
-<details>
-<summary><b>Multiple Selection</b></summary>
-Select as many dates as you want.
-
-```tsx
-<Calendar
-  selectionMode="multiple"
-  onChange={(dates) => console.log(dates)}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/multiple.png" alt="Multiple Selection" width="500" />
-
-</details>
-
-<details>
-<summary><b>Headless Usage</b></summary>
-Complete freedom over your UI using the `useDates` hook.
-
-```tsx
-const { calendars, getDateProps } = useDates({ selectionMode: 'single' });
-
-return (
-  <div className="grid grid-cols-7">
-    {calendars[0].weeks.flat().map((dateObj, i) => (
-      dateObj ? (
-        <button key={i} {...getDateProps({ dateObj })}>
-          {dateObj.date.getDate()}
-        </button>
-      ) : <div key={i} />
-    ))}
-  </div>
-);
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/headless.png" alt="Headless Usage" width="500" />
-
-</details>
-
-<details>
-<summary><b>Custom Styling</b></summary>
-Easily customize the look and feel using the `classNames` prop.
-
-```tsx
-<Calendar
-  classNames={{
-    root: 'bg-stone-50 p-6 rounded-2xl border border-stone-200 shadow-lg text-stone-800',
-    monthYearLabel: 'font-serif text-stone-900 text-lg font-bold',
-    day: {
-      unselected: 'bg-white border border-stone-200 hover:bg-amber-100/50 text-stone-800',
-      selected: 'bg-amber-800 text-amber-50 font-bold',
-    }
-  }}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/custom-styling.png" alt="Custom Styling" width="500" />
-
-</details>
-
-<details>
-<summary><b>Localization & i18n</b></summary>
-Easily customize language, month/weekday labels, and the first day of week.
+### `useDates` Hook (Headless)
 
 ```tsx
-<Calendar
-  firstDayOfWeek={1} // Start week on Monday
-  translations={{
-    months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
-    weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
-  }}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/localization.png" alt="Localization & i18n" width="500" />
-
-</details>
-
-<details>
-<summary><b>Form Integration</b></summary>
-Integrate the calendar into a form or popup.
-
-```tsx
-const [date, setDate] = useState<Date | null>(null);
-
-<div className="relative group">
-  <input
-    type="text"
-    readOnly
-    value={date ? date.toLocaleDateString() : ''}
-    placeholder="Pick a date"
-  />
-  <div className="absolute top-full left-0 mt-2 z-50 invisible group-focus-within:visible">
-    <Calendar
-      selected={date}
-      onChange={(d) => setDate(d as Date)}
-    />
-  </div>
-</div>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/form-integration.png" alt="Form Integration" width="500" />
-
-</details>
-
-<details>
-<summary><b>Custom Header & Footer</b></summary>
-Customize header, footer, and day tooltips.
-
-```tsx
-<Calendar
-  selected={selected}
-  onChange={(val) => setSelected(val as Date)}
-  monthsToDisplay={2}
-  header={<div className="p-2 bg-blue-100 text-blue-800 font-bold text-center rounded-t-lg">My Header</div>}
-  footer={<div className="p-2 bg-gray-100 text-gray-600 text-sm text-center rounded-b-lg border-t">My Custom Footer</div>}
-  renderDayTooltip={(dateObj) => (
-    dateObj.date.getDate() === 15 ? 'Middle of the month!' : null
-  )}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/custom-header-footer.png" alt="Custom Header & Footer" width="500" />
-
-</details>
-
-<details>
-<summary><b>Min, Max & Disabled Dates</b></summary>
-Restrict date selection with min/max bounds or specific disabled dates.
-
-```tsx
-<Calendar
-  selected={selected}
-  onChange={(val) => setSelected(val as Date)}
-  minDate={minDate}
-  maxDate={maxDate}
-  disabledDates={[disabledDate1, disabledDate2]}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/min-max-disabled.png" alt="Min, Max & Disabled Dates" width="500" />
-
-</details>
-
-<details>
-<summary><b>Yearly View</b></summary>
-Display an entire year at once by customizing the grid and `monthsToDisplay`.
-
-```tsx
-<Calendar
-  selected={selected}
-  onChange={(val) => setSelected(val as Date)}
-  monthsToDisplay={12}
-  classNames={{
-    calendarsContainer: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-  }}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/yearly.png" alt="Yearly View" width="500" />
-
-</details>
-
-<details>
-<summary><b>Availability & Async Data</b></summary>
-Fetch and display availability dynamically when the month changes.
-
-```tsx
-<Calendar
-  selected={selected}
-  onChange={(val) => setSelected(val as Date)}
-  onMonthChange={(date) => fetchAvailabilities(date)}
-  modifiers={{
-    available: (date) => availabilities[date.toDateString()] === true,
-    unavailable: (date) => availabilities[date.toDateString()] === false,
-  }}
-  disabledDates={
-    Object.keys(availabilities)
-      .filter(key => !availabilities[key])
-      .map(key => new Date(key))
-  }
-  classNames={{
-    day: {
-      available: "bg-green-100 text-green-800 hover:bg-green-200",
-      unavailable: "bg-red-50 text-red-300 line-through cursor-not-allowed",
-    }
-  }}
-/>
-```
-
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/availability.png" alt="Availability Demo" width="500" />
-
-</details>
-
-<details>
-<summary><b>Full-Featured / Events Calendar (Google Calendar style)</b></summary>
-Build a full-page events calendar using the `useDates` hook.
-
-```tsx
-const { calendars, getBackProps, getForwardProps, getDateProps } = useDates({
-  showOutsideDays: true,
-  selected: selectedDate,
-  onChange: (d) => setSelectedDate(d as Date),
-});
-
-// Render custom full-grid layout with event badges...
+import { useDates } from 'react-modular-datepicker';
+
+export function CustomCalendar() {
+  const { calendars, getDateProps, getBackProps, getForwardProps } = useDates({
+    selectionMode: 'single',
+  });
+
+  const calendar = calendars[0];
+  if (!calendar) return null;
+
+  return (
+    <div>
+      <div className="flex justify-between">
+        <button {...getBackProps({ calendars })}>Prev</button>
+        <span>{calendar.year} - {calendar.month + 1}</span>
+        <button {...getForwardProps({ calendars })}>Next</button>
+      </div>
+      <div className="grid grid-cols-7">
+        {calendar.weeks.flat().map((dateObj, i) => (
+          dateObj ? (
+            <button key={i} {...getDateProps({ dateObj })}>
+              {dateObj.date.getDate()}
+            </button>
+          ) : <div key={i} />
+        ))}
+      </div>
+    </div>
+  );
+}
 ```
 
-<br />
-
-<img src="https://6pcvnpdosyar2uqr.public.blob.vercel-storage.com/docs/images/events.png" alt="Events Calendar" width="500" />
-
-</details>
-
-<details>
-<summary><b>Custom Date Adapter (e.g. date-fns)</b></summary>
-Replace the default `DayjsAdapter` with a custom adapter using `date-fns` (or any date library).
+---
 
-```tsx
-import { Calendar, DateAdapter } from 'react-modular-datepicker';
-import {
-  addDays, addMonths, addYears,
-  subDays, subMonths, subYears,
-  startOfDay, startOfMonth, startOfYear,
-  endOfDay, endOfMonth, endOfYear,
-  isBefore, isAfter, isSameDay, isSameMonth, isSameYear,
-  setDate, setMonth, setYear,
-  getDate, getMonth, getYear,
-  format, getDaysInMonth,
-  differenceInCalendarMonths, differenceInCalendarYears
-} from 'date-fns';
-
-class DateFnsAdapter implements DateAdapter<Date> {
-  date(value?: any): Date { return value ? new Date(value) : new Date(); }
-  add(date: Date, amount: number, unit: 'day' | 'month' | 'year'): Date {
-    if (unit === 'day') return addDays(date, amount);
-    if (unit === 'month') return addMonths(date, amount);
-    return addYears(date, amount);
-  }
-  subtract(date: Date, amount: number, unit: 'day' | 'month' | 'year'): Date {
-    if (unit === 'day') return subDays(date, amount);
-    if (unit === 'month') return subMonths(date, amount);
-    return subYears(date, amount);
-  }
-  startOf(date: Date, unit: 'day' | 'month' | 'year'): Date {
-    if (unit === 'day') return startOfDay(date);
-    if (unit === 'month') return startOfMonth(date);
-    return startOfYear(date);
-  }
-  endOf(date: Date, unit: 'day' | 'month' | 'year'): Date {
-    if (unit === 'day') return endOfDay(date);
-    if (unit === 'month') return endOfMonth(date);
-    return endOfYear(date);
-  }
-  isBefore(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
-    if (unit === 'day') return startOfDay(date) < startOfDay(comparison);
-    if (unit === 'month') return startOfMonth(date) < startOfMonth(comparison);
-    if (unit === 'year') return startOfYear(date) < startOfYear(comparison);
-    return date < comparison;
-  }
-  isAfter(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
-    if (unit === 'day') return startOfDay(date) > startOfDay(comparison);
-    if (unit === 'month') return startOfMonth(date) > startOfMonth(comparison);
-    if (unit === 'year') return startOfYear(date) > startOfYear(comparison);
-    return date > comparison;
-  }
-  isSame(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
-    if (unit === 'day') return isSameDay(date, comparison);
-    if (unit === 'month') return isSameMonth(date, comparison);
-    if (unit === 'year') return isSameYear(date, comparison);
-    return date.getTime() === comparison.getTime();
-  }
-  set(date: Date, unit: 'day' | 'month' | 'year', value: number): Date {
-    if (unit === 'day') return setDate(date, value);
-    if (unit === 'month') return setMonth(date, value);
-    return setYear(date, value);
-  }
-  get(date: Date, unit: 'day' | 'month' | 'year'): number {
-    if (unit === 'day') return getDate(date);
-    if (unit === 'month') return getMonth(date);
-    return getYear(date);
-  }
-  format(date: Date, formatStr: string): string {
-    const f = formatStr.replace(/YYYY/g, 'yyyy').replace(/YY/g, 'yy').replace(/D/g, 'd');
-    return format(date, f);
-  }
-  getDaysInMonth(date: Date): number { return getDaysInMonth(date); }
-  toDate(date: Date): Date { return date; }
-  diff(date: Date, comparison: Date, unit: 'month' | 'year'): number {
-    if (unit === 'month') return differenceInCalendarMonths(date, comparison);
-    return differenceInCalendarYears(date, comparison);
-  }
-  getMonths(): string[] {
-    return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  }
-  getWeekdays(): string[] {
-    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
-  }
-}
+## Documentation & Recipes
 
-const customAdapter = new DateFnsAdapter();
+For full API reference, recipes, and interactive demos, check out the documentation package in `packages/docs`.
 
-function CustomAdapterExample() {
-  return <Calendar adapter={customAdapter} onChange={(date) => console.log(date)} />;
-}
+To run the documentation site locally:
+```bash
+pnpm run dev:docs
 ```
 
-</details>
-
 ---
 
-## Contributors
-
-We welcome contributions! Here’s how you can get started:
+## Development
 
 ### Installation
 
-1. Clone the repository.
-2. Install dependencies:
-   ```bash
-   pnpm install
-   ```
+```bash
+pnpm install
+```
 
-### Development
+### Development Server
 
-Start the development server with the example app:
+Start watching for library changes and run the documentation app:
 ```bash
 pnpm run dev
 ```
-This runs `vite` in watch mode for the library and starts the Next.js example app at `http://localhost:3000`.
 
 ### Testing
 
-Run end-to-end tests using Playwright:
+Run unit and end-to-end tests:
 ```bash
-pnpm run test:e2e
+pnpm run test
 ```
 
-### Documentation & Examples
-
-- To update documentation, edit the `README.md`.
-- To add or modify examples, check the `examples/` directory.
-
 ### Building
 
-Build the package for production:
+Build the package and documentation:
 ```bash
 pnpm run build
 ```
 
 ---
 
-License: MIT
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./useDates-c17u4Qfs.cjs"),t=require("./utils.cjs");let n=require("react");n=e.i(n,1);let r=require("react/jsx-runtime");var i=({dateObj:e,getDateProps:t,classNames:i,tooltip:a})=>{let[o,s]=(0,n.useState)(!1);if(!e)return(0,r.jsx)(`div`,{className:`aspect-square bg-white`});let{date:c,selected:l,selectable:u,isRangeStart:d,isRangeEnd:f,isRangeBetween:p,isRangeHovering:m,isRangeActive:h}=e,g=i.day,_=`rounded-full`;_=d&&f?`${g.selected} rounded-full`:d?`${g.rangeStart} ${h?`rounded-l-full rounded-r-none`:`rounded-full`}`:f?`${g.rangeEnd} ${h?`rounded-r-full rounded-l-none`:`rounded-full`}`:p?g.rangeBetween||``:m?g.rangeHovering||``:l?g.selected||``:u?g.unselected||``:g.disabled||``;let v=[g.day,_,...(e.modifiers||[]).map(e=>g[e]||e)].filter(Boolean).join(` `);return(0,r.jsxs)(`button`,{...t({dateObj:e,onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1)}),className:v,children:[c.getDate(),a&&o&&(0,r.jsx)(`div`,{className:`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10`,children:(0,r.jsxs)(`div`,{className:`bg-gray-800 text-white text-xs py-1 px-2 rounded whitespace-nowrap shadow-lg`,children:[a,(0,r.jsx)(`div`,{className:`absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-gray-800`})]})})]})};function a(t=e.r,n){return{months:t.getMonths(n),weekdays:t.getWeekdays(n),back:`Previous month`,forward:`Next month`}}function o(t=e.r,n,r){return{...a(t,n),...r}}var s=()=>(0,r.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,r.jsx)(`polyline`,{points:`15 18 9 12 15 6`})}),c=()=>(0,r.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,r.jsx)(`polyline`,{points:`9 18 15 12 9 6`})}),l=({calendars:e,getBackProps:t,getForwardProps:n,setView:i,monthNames:a,t:o,classNames:l,slideDirection:u,currentView:d})=>(0,r.jsxs)(`div`,{className:l.header,children:[(0,r.jsx)(`button`,{...t({calendars:e}),onMouseDown:e=>e.preventDefault(),className:`${l.navButton} ${d&&d!==`days`?`invisible pointer-events-none`:``}`,"aria-label":o.back,children:(0,r.jsx)(s,{})}),(0,r.jsx)(`div`,{className:l.monthYearContainer,children:e.length===1?(0,r.jsxs)(`div`,{className:`${l.monthYearLabel} ${u===`left`?`animate-slide-in-left`:u===`right`?`animate-slide-in-right`:``}`,children:[(0,r.jsx)(`button`,{onMouseDown:e=>e.preventDefault(),onClick:()=>i(d===`months`?`days`:`months`),className:l.monthYearButton,children:a[e[0].month]}),(0,r.jsx)(`button`,{onMouseDown:e=>e.preventDefault(),onClick:()=>i(d===`years`?`days`:`years`),className:l.monthYearButton,children:e[0].year})]},`${e[0].month}-${e[0].year}`):(0,r.jsx)(`div`,{className:`${l.monthYearLabel} ${u===`left`?`animate-slide-in-left`:u===`right`?`animate-slide-in-right`:``}`,children:(()=>{let t=e[0],n=e[e.length-1];return e.length===12&&t.month===0&&n.month===11&&t.year===n.year?(0,r.jsx)(`span`,{children:t.year}):t.year===n.year?(0,r.jsxs)(`span`,{children:[a[t.month],` - `,a[n.month],` `,t.year]}):(0,r.jsxs)(`span`,{children:[a[t.month],` `,t.year,` - `,a[n.month],` `,n.year]})})()})}),(0,r.jsx)(`button`,{...n({calendars:e}),onMouseDown:e=>e.preventDefault(),className:`${l.navButton} ${d&&d!==`days`?`invisible pointer-events-none`:``}`,"aria-label":o.forward,children:(0,r.jsx)(c,{})})]}),u={root:`w-fit flex flex-col p-4 bg-white rounded-lg shadow-lg`,header:`flex items-center justify-between border-b-2 border-brand-gray-light/40 pb-2`,calendarsContainer:`flex flex-wrap gap-4 mt-3`,calendarContainer:`flex-1 min-w-[280px] max-w-full`,weekdayGrid:`grid grid-cols-7 gap-1 mb-1 border-b border-brand-gray-light/40`,weekday:`text-center text-xs text-gray-400 py-2`,daysGrid:`grid grid-cols-7 gap-px bg-brand-gray-light/20`,footer:`mt-4`,navButton:`p-2 text-brand-text hover:bg-gray-100 rounded-full transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none`,monthYearContainer:`flex gap-8`,monthYearLabel:`flex gap-1 items-center font-semibold text-brand-text`,monthYearButton:`hover:bg-gray-100 px-2 py-1 rounded cursor-pointer`,day:{day:`aspect-square flex items-center justify-center text-sm font-medium transition-all relative group cursor-pointer p-px`,selected:`bg-brand-gold text-white rounded-full`,unselected:`bg-white hover:bg-brand-gray-light text-brand-text`,disabled:`bg-white text-gray-300 cursor-not-allowed`,rangeStart:`bg-brand-gold text-white`,rangeEnd:`bg-brand-gold text-white`,rangeBetween:`bg-brand-gold/25 text-brand-text`,rangeHovering:`bg-brand-gold/25 text-brand-text`},monthsGrid:`grid grid-cols-3 gap-2 animate-slide-in-top`,monthButton:`py-3 rounded-lg hover:bg-brand-gray-light transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none`,monthButtonSelected:`bg-brand-gold text-white`,monthButtonUnselected:`text-brand-text`,yearsGrid:`grid grid-cols-3 gap-2 max-h-[300px] overflow-y-auto pr-2 animate-slide-in-top`,yearButton:`py-3 rounded-lg hover:bg-brand-gray-light transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none`,yearButtonSelected:`bg-brand-gold text-white`,yearButtonUnselected:`text-brand-text`},d=e=>{let t={...u};if(!e)return t;for(let n in e){let r=n;r===`day`&&e.day?t.day={...u.day,...e.day}:e[r]&&(t[r]=e[r])}return t},f=({year:e,month:t,monthNames:n,minDate:i,maxDate:a,onMonthSelect:o,classNames:s})=>{let c=t=>!!(i&&e===i.getFullYear()&&t<i.getMonth()||a&&e===a.getFullYear()&&t>a.getMonth());return(0,r.jsx)(`div`,{className:s.monthsGrid,children:n.map((e,n)=>{let i=c(n);return(0,r.jsx)(`button`,{onMouseDown:e=>e.preventDefault(),onClick:()=>!i&&o(n),className:`${s.monthButton} ${n===t?s.monthButtonSelected:s.monthButtonUnselected}`,disabled:i,children:e},e)})})},p=({year:e,minDate:t,maxDate:i,adapter:a,onYearSelect:o,classNames:s})=>{let c=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(c.current){let e=c.current.querySelector(`[data-selected="true"]`);e&&e.scrollIntoView({block:`center`})}},[]);let l=t?a.get(a.date(t),`year`):e-50,u=i?a.get(a.date(i),`year`):e+50,d=[];for(let e=l;e<=u;e++)d.push(e);return(0,r.jsx)(`div`,{ref:c,className:s.yearsGrid,children:d.map(t=>(0,r.jsx)(`button`,{"data-selected":t===e,onMouseDown:e=>e.preventDefault(),onClick:()=>o(t),className:`${s.yearButton} ${t===e?s.yearButtonSelected:s.yearButtonUnselected}`,children:t},t))})},m=t=>{let{classNames:a,locale:s,translations:c,adapter:u=e.r,firstDayOfWeek:m=0,header:h,footer:g,renderDayTooltip:_,...v}=t,y=d(a),[b,x]=(0,n.useState)(`days`),[S,C]=(0,n.useState)(null),w=o(u,s,c),T=w.weekdays,E=w.months,{calendars:D,getBackProps:O,getForwardProps:k,getDateProps:A,setOffset:j}=e.t({...v,adapter:u,firstDayOfWeek:m}),M=[...T.slice(m),...T.slice(0,m)],{month:N,year:P}=D[0],F=e=>{let n=u.set(u.set(u.date(t.date||new Date),`year`,P),`month`,N),r=u.set(n,`month`,e),i=u.startOf(u.date(t.date||new Date),`month`),a=u.diff(r,i,`month`);C(null),j(a),x(`days`)},I=e=>{let n=u.set(u.set(u.date(t.date||new Date),`year`,P),`month`,N),r=u.set(n,`year`,e),i=u.startOf(u.date(t.date||new Date),`month`),a=u.diff(r,i,`month`);C(null),j(a),x(`days`)},L=e=>{let t=O(e);return{...t,onClick:e=>{C(`left`),t.onClick?.(e)}}},R=e=>{let t=k(e);return{...t,onClick:e=>{C(`right`),t.onClick?.(e)}}};return(0,r.jsxs)(`div`,{className:`rmdp ${y.root}`,children:[typeof h==`function`?h({calendars:D,getBackProps:L,getForwardProps:R,setView:x,monthNames:E,t:w,slideDirection:S,currentView:b}):h||(0,r.jsx)(l,{calendars:D,getBackProps:L,getForwardProps:R,setView:x,monthNames:E,t:w,classNames:y,slideDirection:S,currentView:b}),(0,r.jsxs)(`div`,{className:y.calendarsContainer,children:[b===`months`&&D.map(e=>(0,r.jsx)(`div`,{className:y.calendarContainer,children:(0,r.jsx)(f,{year:e.year,month:e.month,monthNames:E,minDate:t.minDate,maxDate:t.maxDate,onMonthSelect:F,classNames:y})},`months-${e.year}`)),b===`years`&&D.map(e=>(0,r.jsx)(`div`,{className:y.calendarContainer,children:(0,r.jsx)(p,{year:e.year,minDate:t.minDate,maxDate:t.maxDate,adapter:u,onYearSelect:I,classNames:y})},`years-${e.year}`)),b===`days`&&D.map(e=>(0,r.jsxs)(`div`,{className:y.calendarContainer,children:[D.length>1&&(0,r.jsxs)(`button`,{type:`button`,"aria-label":E[e.month],className:`block w-full text-center font-semibold mb-2 text-brand-text`,children:[E[e.month],` `,D[0].year===D[D.length-1].year?``:e.year]}),(0,r.jsx)(`div`,{className:y.weekdayGrid,children:M.map(e=>(0,r.jsx)(`div`,{className:y.weekday,children:e},e))}),(0,r.jsx)(`div`,{className:`${y.daysGrid} ${S===`left`?`animate-slide-in-left`:S===`right`?`animate-slide-in-right`:``}`,children:e.weeks.map((e,t)=>e.map((e,n)=>(0,r.jsx)(i,{dateObj:e,getDateProps:A,classNames:y,tooltip:e&&_?.(e)},`${t}-${n}`)))})]},`${e.month}-${e.year}`))]}),g&&(0,r.jsx)(`div`,{className:y.footer,children:g})]})};exports.Calendar=m,exports.CalendarHeader=l,exports.ChevronLeftIcon=s,exports.ChevronRightIcon=c,exports.Day=i,exports.DayjsAdapter=e.n,exports.MonthSelection=f,exports.YearSelection=p,exports.addMonth=t.addMonth,exports.composeEventHandlers=t.composeEventHandlers,exports.defaultAdapter=e.r,exports.defaultClassNames=u,exports.getCalendars=t.getCalendars,exports.getDefaults=a,exports.getTranslations=o,exports.isBackDisabled=t.isBackDisabled,exports.isForwardDisabled=t.isForwardDisabled,exports.mergeClassNames=d,exports.subtractMonth=t.subtractMonth,exports.useDates=e.t;
+//# sourceMappingURL=index.cjs.map