npm - temporal-react-datepicker - Versions diffs - 1.0.0 - Mend

temporal-react-datepicker 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 temporal-react-datepicker contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,440 @@
+# temporal-react-datepicker
+A high-performance, accessible React date picker built on the [JavaScript Temporal API](https://tc39.es/proposal-temporal/docs/). Uses `Temporal.PlainDate` for all date logic — immutable, correct calendar arithmetic, no legacy `Date` object.
+## Requirements
+- React 19+
+- `@js-temporal/polyfill` 0.5.1+
+## Installation
+```bash
+npm install temporal-react-datepicker @js-temporal/polyfill
+# or
+pnpm add temporal-react-datepicker @js-temporal/polyfill
+```
+## Basic usage
+```tsx
+import { useState } from 'react'
+import { Temporal } from '@js-temporal/polyfill'
+import { TemporalDatePicker } from 'temporal-react-datepicker'
+function App() {
+  const [date, setDate] = useState<Temporal.PlainDate | undefined>(undefined)
+  return <TemporalDatePicker value={date} onChange={setDate} />
+}
+```
+## Date range selection
+```tsx
+import type { DateRange } from 'temporal-react-datepicker'
+const [range, setRange] = useState<DateRange | undefined>(undefined)
+<TemporalDatePicker
+  mode="range"
+  clearable
+  value={range}
+  onChange={setRange}
+/>
+```
+`DateRange` is `{ start: Temporal.PlainDate; end: Temporal.PlainDate | null }`. After the first click `end` is `null`; after the second click both dates are set.
+## Props
+The component uses a discriminated union — the available props depend on `mode` and `clearable`.
+### Shared props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `mode` | `'single' \| 'range'` | `'single'` | Selection mode. |
+| `clearable` | `boolean` | `false` | Show a `×` button to reset the selection when a value is set. |
+| `isDateDisabled` | `(date: Temporal.PlainDate) => boolean` | `undefined` | Return `true` to disable (and block) a specific date. |
+| `showWeekNumbers` | `boolean` | `false` | Show ISO week numbers as an extra column on the left. |
+| `className` | `string` | `''` | Additional CSS class on the root element. |
+| `locale` | `string` | `navigator.language` | BCP 47 locale tag for month/weekday labels. |
+| `labels` | `Partial<Labels>` | English strings | Override any UI string (aria-labels, panel titles, range context). |
+| `renderDayContent` | `(date, state: DayState) => ReactNode` | `undefined` | Custom renderer for each day cell. Falls back to the day number. |
+### `mode="single"` props
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `Temporal.PlainDate \| undefined` | Currently selected date. |
+| `onChange` | `(date: Temporal.PlainDate) => void` | Called on selection. |
+When `clearable={true}`, `onChange` is widened to `(date: Temporal.PlainDate \| undefined) => void`.
+### `mode="range"` props
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `DateRange \| undefined` | Currently selected range. |
+| `onChange` | `(range: DateRange) => void` | Called on each click. Fires with `end: null` after the first click. |
+When `clearable={true}`, `onChange` is `(range: DateRange \| undefined) => void`.
+## DayState
+The `renderDayContent` callback receives a `DayState` object as its second argument:
+```ts
+interface DayState {
+  selected: boolean      // true in single mode when this date === value
+  inRange: boolean       // true for days between range.start and range.end
+  isRangeStart: boolean  // true when this date === range.start
+  isRangeEnd: boolean    // true when this date === range.end
+}
+```
+```tsx
+// Bold weight for selected day
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  renderDayContent={(d, { selected }) => (
+    <span style={{ fontWeight: selected ? 800 : 400 }}>{d.day}</span>
+  )}
+/>
+```
+```tsx
+// Dot indicator on Fridays (payday)
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  renderDayContent={(d, { selected }) => (
+    <span style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+      {d.day}
+      {d.dayOfWeek === 5 && (
+        <span style={{
+          width: 3, height: 3, borderRadius: '50%',
+          background: selected ? 'currentColor' : '#38bdf8'
+        }} />
+      )}
+    </span>
+  )}
+/>
+```
+```tsx
+// Custom badge for range mode (shows "S" / "E" on start and end)
+<TemporalDatePicker
+  mode="range"
+  value={range}
+  onChange={setRange}
+  renderDayContent={(d, { isRangeStart, isRangeEnd, inRange }) => (
+    <span style={{ position: 'relative' }}>
+      {d.day}
+      {isRangeStart && (
+        <span style={{ position: 'absolute', top: -4, right: -4, fontSize: 8, fontWeight: 700 }}>S</span>
+      )}
+      {isRangeEnd && (
+        <span style={{ position: 'absolute', top: -4, right: -4, fontSize: 8, fontWeight: 700 }}>E</span>
+      )}
+    </span>
+  )}
+/>
+```
+```tsx
+// Highlight days from an external data source (e.g. events)
+const EVENTS = new Set(['2026-03-10', '2026-03-18', '2026-03-25'])
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  renderDayContent={(d, { selected }) => (
+    <span style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+      {d.day}
+      {EVENTS.has(d.toString()) && (
+        <span style={{
+          width: 4, height: 4, borderRadius: '50%',
+          background: selected ? 'white' : '#f472b6'
+        }} />
+      )}
+    </span>
+  )}
+/>
+```
+## Disabled dates
+Return `true` from `isDateDisabled` to block a date. Disabled days are not clickable, not keyboard-focusable, and in range mode they block the range from crossing them.
+```tsx
+// Weekends only
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  isDateDisabled={d => d.dayOfWeek >= 6}
+/>
+```
+```tsx
+// Past dates (relative to today)
+const today = Temporal.Now.plainDateISO()
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  isDateDisabled={d => Temporal.PlainDate.compare(d, today) < 0}
+/>
+```
+```tsx
+// Future dates — only allow selecting up to today
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  isDateDisabled={d => Temporal.PlainDate.compare(d, today) > 0}
+/>
+```
+```tsx
+// Specific blocked dates (e.g. bank holidays)
+const HOLIDAYS = new Set(['2026-01-01', '2026-12-25', '2026-12-26'])
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  isDateDisabled={d => HOLIDAYS.has(d.toString())}
+/>
+```
+```tsx
+// Combined: no weekends AND no past dates
+<TemporalDatePicker
+  value={date}
+  onChange={setDate}
+  isDateDisabled={d =>
+    d.dayOfWeek >= 6 ||
+    Temporal.PlainDate.compare(d, Temporal.Now.plainDateISO()) < 0
+  }
+/>
+```
+```tsx
+// Range mode with disabled dates — crossing a disabled date is blocked
+<TemporalDatePicker
+  mode="range"
+  value={range}
+  onChange={setRange}
+  isDateDisabled={d => d.dayOfWeek >= 6}
+/>
+```
+## Navigation
+Click the **month name** or **year** in the header to jump directly to a month or year selector panel. Use `Escape` to return to the calendar without making a selection.
+## Locale
+The `locale` prop accepts any [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). It controls month names, weekday labels, and day `aria-label` strings. Defaults to `navigator.language`.
+```tsx
+// Spanish (Spain)
+<TemporalDatePicker value={date} onChange={setDate} locale="es-ES" />
+// English (US)
+<TemporalDatePicker value={date} onChange={setDate} locale="en-US" />
+// French
+<TemporalDatePicker value={date} onChange={setDate} locale="fr-FR" />
+// Japanese
+<TemporalDatePicker value={date} onChange={setDate} locale="ja-JP" />
+// Arabic (right-to-left script — layout RTL must be handled by the consumer)
+<TemporalDatePicker value={date} onChange={setDate} locale="ar-SA" />
+// Portuguese (Brazil)
+<TemporalDatePicker value={date} onChange={setDate} locale="pt-BR" />
+```
+To follow the browser locale automatically (default behaviour):
+```tsx
+<TemporalDatePicker value={date} onChange={setDate} />
+// equivalent to:
+<TemporalDatePicker value={date} onChange={setDate} locale={navigator.language} />
+```
+To let the user switch locale at runtime, just pass a state variable:
+```tsx
+const [locale, setLocale] = useState('en-US')
+<select onChange={e => setLocale(e.target.value)}>
+  <option value="en-US">English</option>
+  <option value="es-ES">Español</option>
+  <option value="fr-FR">Français</option>
+  <option value="de-DE">Deutsch</option>
+</select>
+<TemporalDatePicker value={date} onChange={setDate} locale={locale} />
+```
+## Labels (i18n for UI strings)
+The `locale` prop controls date formatting (month names, weekday headers, day `aria-label`s) via the browser's `Intl` API. UI strings such as button labels, panel titles, and range context suffixes are controlled separately via the `labels` prop.
+The default language is **English**. Pass `Partial<Labels>` to override any string:
+```tsx
+import type { Labels } from 'temporal-react-datepicker'
+const spanishLabels: Partial<Labels> = {
+  prevMonth: 'Mes anterior',
+  nextMonth: 'Mes siguiente',
+  clearSelection: 'Limpiar selección',
+  selectMonth: name => `Seleccionar mes, actualmente ${name}`,
+  selectYear: year => `Seleccionar año, actualmente ${year}`,
+  weekNumberHeader: 'Semana',
+  weekNumber: n => `Semana ${n}`,
+  rangeStart: ', inicio de rango',
+  rangeEnd: ', fin de rango',
+  inRange: ', dentro del rango',
+  monthPanelAnnouncement: 'Selector de mes',
+  yearPanelAnnouncement: 'Selector de año',
+  prevYear: 'Año anterior',
+  nextYear: 'Año siguiente',
+  monthPanelTitle: 'Seleccionar mes',
+  prevYearWindow: 'Ventana anterior',
+  nextYearWindow: 'Ventana siguiente',
+  yearPanelTitle: 'Seleccionar año',
+}
+<TemporalDatePicker value={date} onChange={setDate} locale="es-ES" labels={spanishLabels} />
+```
+You only need to supply the strings you want to override — the rest fall back to English defaults. For example, to only translate the range context suffixes for French:
+```tsx
+<TemporalDatePicker
+  mode="range"
+  value={range}
+  onChange={setRange}
+  locale="fr-FR"
+  labels={{
+    rangeStart: ', début de la plage',
+    rangeEnd: ', fin de la plage',
+    inRange: ', dans la plage',
+  }}
+/>
+```
+### `Labels` interface
+```ts
+interface Labels {
+  // Calendar header buttons
+  prevMonth: string
+  nextMonth: string
+  clearSelection: string
+  selectMonth: (monthName: string) => string   // e.g. "Select month, currently March"
+  selectYear: (year: number) => string         // e.g. "Select year, currently 2026"
+  // Week number column
+  weekNumberHeader: string                     // column header aria-label
+  weekNumber: (weekNum: number) => string      // row aria-label, e.g. "Week 12"
+  // Range context (appended to day aria-label)
+  rangeStart: string                           // e.g. ", range start"
+  rangeEnd: string                             // e.g. ", range end"
+  inRange: string                              // e.g. ", in range"
+  // aria-live announcements on panel switch
+  monthPanelAnnouncement: string
+  yearPanelAnnouncement: string
+  // Month panel (jump nav)
+  prevYear: string
+  nextYear: string
+  monthPanelTitle: string
+  // Year panel (jump nav)
+  prevYearWindow: string
+  nextYearWindow: string
+  yearPanelTitle: string
+}
+```
+## Theming
+Override CSS custom properties on `.temporal-datepicker` or any ancestor:
+```css
+/* Emerald theme */
+.my-app .temporal-datepicker {
+  --tdp-accent:     #10b981;
+  --tdp-accent-fg:  #ffffff;
+  --tdp-today-text: #10b981;
+  --tdp-today-ring: #10b981;
+}
+```
+### CSS tokens
+| Token | Default (dark) | Description |
+|---|---|---|
+| `--tdp-accent` | `#38bdf8` | Accent color (selected day, focus ring, range edges). |
+| `--tdp-accent-fg` | `#0f172a` | Foreground on accent. |
+| `--tdp-bg` | `#1e293b` | Calendar background. |
+| `--tdp-border` | `#334155` | Border color. |
+| `--tdp-text` | `#e2e8f0` | Primary text. |
+| `--tdp-text-muted` | `#64748b` | Muted text (weekday headers, week numbers). |
+| `--tdp-day-hover-bg` | `rgba(255,255,255,0.06)` | Day hover background. |
+| `--tdp-today-text` | `#38bdf8` | Today text color. |
+| `--tdp-today-ring` | `#38bdf8` | Today indicator dot. |
+| `--tdp-range-bg` | `rgba(56,189,248,0.15)` | Background for days inside a range. |
+| `--tdp-range-edge-bg` | `var(--tdp-accent)` | Background for range start/end. |
+| `--tdp-range-edge-text` | `var(--tdp-accent-fg)` | Foreground for range start/end. |
+| `--tdp-disabled-text` | `#334155` | Disabled day text. |
+| `--tdp-weeknum-text` | `var(--tdp-text-muted)` | Week number column text. |
+| `--tdp-radius` | `12px` | Container border radius. |
+| `--tdp-day-radius` | `8px` | Day button border radius. |
+| `--tdp-day-size` | `36px` | Day button size. |
+| `--tdp-shadow` | (dark shadow) | Container box shadow. |
+The default theme is dark. Light mode is applied automatically via `@media (prefers-color-scheme: light)`.
+## Keyboard navigation
+| Key | Action |
+|---|---|
+| `←` / `→` | Previous / next day |
+| `↑` / `↓` | Same day, previous / next week |
+| `Page Up` / `Page Down` | Previous / next month |
+| `Home` | First day of the current week |
+| `End` | Last day of the current week |
+| `Enter` / `Space` | Select the focused date |
+| `Tab` | Exit the calendar grid |
+In month/year panels: `← → ↑ ↓` navigate between items, `Enter`/`Space` confirms, `Escape` returns to calendar.
+## Accessibility
+- `role="grid"` on the calendar with `role="columnheader"` / `role="gridcell"` per cell.
+- Full `aria-label` on every day button (e.g. "lunes, 17 de marzo de 2026").
+- Range days include context: "inicio de rango", "fin de rango", "dentro del rango".
+- Today marked with `aria-current="date"`.
+- Selected dates use `aria-selected="true"`.
+- Disabled days use the native `disabled` attribute.
+- Panel switches announced via `aria-live="polite"`.
+- All interactive elements expose `:focus-visible` styles.
+## Development
+```bash
+pnpm install       # install dependencies
+pnpm dev           # start demo app at http://localhost:5173
+pnpm build         # build library to /dist
+pnpm type-check    # TypeScript compiler check
+pnpm lint          # ESLint
+```
+## License
+MIT

package/dist/index.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .temporal-datepicker{--tdp-accent:#38bdf8;--tdp-accent-fg:#0f172a;--tdp-bg:#1e293b;--tdp-border:#334155;--tdp-text:#e2e8f0;--tdp-text-muted:#64748b;--tdp-day-hover-bg:#ffffff0f;--tdp-today-text:#38bdf8;--tdp-today-ring:#38bdf8;--tdp-selected-bg:var(--tdp-accent);--tdp-selected-text:var(--tdp-accent-fg);--tdp-range-bg:#38bdf826;--tdp-range-edge-bg:var(--tdp-accent);--tdp-range-edge-text:var(--tdp-accent-fg);--tdp-disabled-text:#334155;--tdp-disabled-bg:transparent;--tdp-weeknum-text:var(--tdp-text-muted);--tdp-panel-item-hover-bg:var(--tdp-day-hover-bg);--tdp-panel-item-selected-bg:var(--tdp-accent);--tdp-panel-item-selected-text:var(--tdp-accent-fg);--tdp-radius:12px;--tdp-day-radius:8px;--tdp-width:100%;--tdp-day-size:36px;--tdp-shadow:0 8px 32px #0006, 0 2px 8px #0000004d}@media (prefers-color-scheme:light){.temporal-datepicker{--tdp-bg:#fff;--tdp-border:#e2e8f0;--tdp-text:#0f172a;--tdp-text-muted:#94a3b8;--tdp-day-hover-bg:#f1f5f9;--tdp-accent:#0ea5e9;--tdp-accent-fg:#fff;--tdp-today-text:#0ea5e9;--tdp-today-ring:#0ea5e9;--tdp-shadow:0 4px 24px #00000014, 0 1px 4px #0000000f;--tdp-range-bg:#0ea5e91f;--tdp-disabled-text:#cbd5e1}}.temporal-datepicker{width:var(--tdp-width);background:var(--tdp-bg);border:1px solid var(--tdp-border);border-radius:var(--tdp-radius);color:var(--tdp-text);box-sizing:border-box;box-shadow:var(--tdp-shadow);padding:16px;font-family:inherit;font-size:14px;line-height:1;transition:border-color .15s}.tdp-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.tdp-month-label{color:var(--tdp-text);text-align:center;letter-spacing:.015em;text-transform:capitalize;flex:1;font-size:13px;font-weight:600}.tdp-nav{border:1px solid var(--tdp-border);border-radius:calc(var(--tdp-day-radius) - 2px);width:28px;height:28px;color:var(--tdp-text-muted);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.tdp-nav:hover{background:var(--tdp-day-hover-bg);color:var(--tdp-text);border-color:var(--tdp-text-muted)}.tdp-nav:focus-visible{outline:2px solid var(--tdp-accent);outline-offset:2px;border-color:#0000}.tdp-grid{border-collapse:collapse;table-layout:fixed;width:100%}.tdp-weekday{text-align:center;height:28px;color:var(--tdp-text-muted);text-transform:uppercase;letter-spacing:.07em;padding:0 0 4px;font-size:10px;font-weight:600}.tdp-cell{text-align:center;padding:2px}.tdp-day{width:var(--tdp-day-size);height:var(--tdp-day-size);border-radius:var(--tdp-day-radius);color:var(--tdp-text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:13px;transition:background .1s,color .1s,transform .1s;display:inline-flex;position:relative}.tdp-day:hover:not(:disabled){background:var(--tdp-day-hover-bg);transform:scale(1.08)}.tdp-day:focus-visible{outline:2px solid var(--tdp-accent);outline-offset:1px}.tdp-day--today{color:var(--tdp-today-text);font-weight:700}.tdp-day--today:after{content:"";background:var(--tdp-today-ring);border-radius:50%;width:3px;height:3px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.tdp-day--selected{background:var(--tdp-selected-bg);color:var(--tdp-selected-text);font-weight:600}.tdp-day--selected:hover{background:var(--tdp-selected-bg);opacity:.88;transform:scale(1.08)}.tdp-day--selected.tdp-day--today:after{background:var(--tdp-selected-text);opacity:.5}.tdp-day--range-start,.tdp-day--range-end{background:var(--tdp-range-edge-bg);color:var(--tdp-range-edge-text);font-weight:600}.tdp-day--range-start:hover:not(:disabled),.tdp-day--range-end:hover:not(:disabled){background:var(--tdp-range-edge-bg);opacity:.88;transform:scale(1.08)}.tdp-day--in-range{background:var(--tdp-range-bg);color:var(--tdp-text);border-radius:0}.tdp-day--in-range:hover:not(:disabled){background:var(--tdp-range-bg);transform:none}.tdp-day:disabled,.tdp-day--disabled{color:var(--tdp-disabled-text);background:var(--tdp-disabled-bg);cursor:not-allowed;opacity:.4;transform:none}.tdp-weeknum-header,.tdp-weeknum{color:var(--tdp-weeknum-text);text-align:right;-webkit-user-select:none;user-select:none;pointer-events:none;width:22px;padding-right:6px;font-size:10px;font-weight:500}.tdp-month-btn,.tdp-year-btn{color:var(--tdp-text);cursor:pointer;text-transform:capitalize;letter-spacing:.015em;background:0 0;border:none;border-radius:4px;padding:2px 4px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;transition:background .12s,color .12s}.tdp-month-btn:hover,.tdp-year-btn:hover{background:var(--tdp-day-hover-bg);color:var(--tdp-text)}.tdp-month-btn:focus-visible,.tdp-year-btn:focus-visible{outline:2px solid var(--tdp-accent);outline-offset:2px}.tdp-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tdp-panel-grid{flex-direction:column;gap:2px;margin-top:8px;display:flex}.tdp-panel-row{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.tdp-panel-item{border-radius:var(--tdp-day-radius);width:100%;color:var(--tdp-text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:9px 4px;font-family:inherit;font-size:13px;transition:background .1s,color .1s;display:inline-flex}.tdp-panel-item:hover{background:var(--tdp-panel-item-hover-bg)}.tdp-panel-item:focus-visible{outline:2px solid var(--tdp-accent);outline-offset:2px}.tdp-panel-item--selected{background:var(--tdp-panel-item-selected-bg);color:var(--tdp-panel-item-selected-text);font-weight:600}.tdp-panel-item--selected:hover{background:var(--tdp-panel-item-selected-bg);opacity:.88}
2	+ /$vite$:1/

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,533 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Temporal as r } from "@js-temporal/polyfill";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/lib/panels/MonthPanel.tsx
+function s(e) {
+	return Array.from({ length: 12 }, (t, n) => new Date(2024, n, 1).toLocaleString(e, { month: "short" }));
+}
+var c = ({ viewDate: r, locale: i, labels: c, onSelect: l, onClose: u }) => {
+	let [d, f] = n(r.year), [p, m] = n(r.month - 1), h = t(Array(12).fill(null)), g = s(i);
+	e(() => {
+		h.current[p]?.focus();
+	}, []);
+	function _(e) {
+		m(e), h.current[e]?.focus();
+	}
+	function v(e, t) {
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), _((t - 1 + 12) % 12);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), _((t + 1) % 12);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), _((t - 3 + 12) % 12);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), _((t + 3) % 12);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), l(d, t + 1);
+				break;
+			case "Escape":
+				e.preventDefault(), u();
+				break;
+		}
+	}
+	return /* @__PURE__ */ o("div", {
+		className: "tdp-panel",
+		children: [/* @__PURE__ */ o("div", {
+			className: "tdp-header",
+			children: [
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "tdp-nav",
+					onClick: () => f((e) => e - 1),
+					"aria-label": c.prevYear,
+					children: "‹"
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "tdp-month-label",
+					children: d
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "tdp-nav",
+					onClick: () => f((e) => e + 1),
+					"aria-label": c.nextYear,
+					children: "›"
+				})
+			]
+		}), /* @__PURE__ */ a("div", {
+			role: "grid",
+			className: "tdp-panel-grid",
+			"aria-label": c.monthPanelTitle,
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ a("div", {
+				role: "row",
+				className: "tdp-panel-row",
+				children: [
+					0,
+					1,
+					2
+				].map((t) => {
+					let n = e * 3 + t, i = n + 1, o = d === r.year && i === r.month;
+					return /* @__PURE__ */ a("button", {
+						ref: (e) => {
+							h.current[n] = e;
+						},
+						role: "gridcell",
+						type: "button",
+						className: `tdp-panel-item${o ? " tdp-panel-item--selected" : ""}`,
+						tabIndex: p === n ? 0 : -1,
+						"aria-selected": o,
+						onClick: () => l(d, i),
+						onKeyDown: (e) => v(e, n),
+						onFocus: () => m(n),
+						children: g[n]
+					}, n);
+				})
+			}, e))
+		})]
+	});
+}, l = ({ viewDate: r, labels: i, onSelect: s, onClose: c }) => {
+	let [l, u] = n(r.year - 5), [d, f] = n(Math.max(0, Math.min(11, r.year - (r.year - 5)))), p = t(Array(12).fill(null));
+	e(() => {
+		p.current[d]?.focus();
+	}, []);
+	function m(e) {
+		f(e), p.current[e]?.focus();
+	}
+	function h(e, t) {
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), m((t - 1 + 12) % 12);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), m((t + 1) % 12);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), m((t - 3 + 12) % 12);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), m((t + 3) % 12);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), s(l + t);
+				break;
+			case "Escape":
+				e.preventDefault(), c();
+				break;
+		}
+	}
+	return /* @__PURE__ */ o("div", {
+		className: "tdp-panel",
+		children: [/* @__PURE__ */ o("div", {
+			className: "tdp-header",
+			children: [
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "tdp-nav",
+					onClick: () => u((e) => e - 12),
+					"aria-label": i.prevYearWindow,
+					children: "‹"
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "tdp-month-label",
+					children: [
+						l,
+						" – ",
+						l + 11
+					]
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					className: "tdp-nav",
+					onClick: () => u((e) => e + 12),
+					"aria-label": i.nextYearWindow,
+					children: "›"
+				})
+			]
+		}), /* @__PURE__ */ a("div", {
+			role: "grid",
+			className: "tdp-panel-grid",
+			"aria-label": i.yearPanelTitle,
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ a("div", {
+				role: "row",
+				className: "tdp-panel-row",
+				children: [
+					0,
+					1,
+					2
+				].map((t) => {
+					let n = e * 3 + t, i = l + n, o = i === r.year;
+					return /* @__PURE__ */ a("button", {
+						ref: (e) => {
+							p.current[n] = e;
+						},
+						role: "gridcell",
+						type: "button",
+						className: `tdp-panel-item${o ? " tdp-panel-item--selected" : ""}`,
+						tabIndex: d === n ? 0 : -1,
+						"aria-selected": o,
+						onClick: () => s(i),
+						onKeyDown: (e) => h(e, n),
+						onFocus: () => f(n),
+						children: i
+					}, n);
+				})
+			}, e))
+		})]
+	});
+}, u = {
+	CALENDAR: "calendar",
+	MONTH: "month",
+	YEAR: "year"
+};
+function d() {
+	let [e, t] = n(u.CALENDAR);
+	return {
+		view: e,
+		setView: t
+	};
+}
+//#endregion
+//#region src/lib/hooks/useDateRange.ts
+function f(e, t, n) {
+	let [i, a] = r.PlainDate.compare(e, t) < 0 ? [e, t] : [t, e], o = i.add({ days: 1 });
+	for (; r.PlainDate.compare(o, a) < 0;) {
+		if (n(o)) return !0;
+		o = o.add({ days: 1 });
+	}
+	return !1;
+}
+function p(e, t, n) {
+	let i = r.PlainDate.compare(t, e) > 0, a = e;
+	for (let o = 1;; o++) {
+		let s = e.add({ days: i ? o : -o });
+		if (n(s)) return a;
+		if (r.PlainDate.compare(s, t) === 0) return t;
+		a = s;
+	}
+}
+function m(e) {
+	let [t, i] = n(null);
+	function a(t, n, i) {
+		if (e?.(t)) return;
+		if (!n || n.end !== null) {
+			i({
+				start: t,
+				end: null
+			});
+			return;
+		}
+		let [a, o] = r.PlainDate.compare(t, n.start) >= 0 ? [n.start, t] : [t, n.start];
+		e && f(a, o, e) || i({
+			start: a,
+			end: o
+		});
+	}
+	function o(n) {
+		return t ? e ? p(n, t, e) : t : null;
+	}
+	function s(e, t) {
+		if (!t) return {
+			isRangeStart: !1,
+			isRangeEnd: !1,
+			inRange: !1,
+			isPreview: !1
+		};
+		if (t.end !== null) return {
+			isRangeStart: r.PlainDate.compare(e, t.start) === 0,
+			isRangeEnd: r.PlainDate.compare(e, t.end) === 0,
+			inRange: r.PlainDate.compare(e, t.start) > 0 && r.PlainDate.compare(e, t.end) < 0,
+			isPreview: !1
+		};
+		let n = o(t.start);
+		if (!n) return {
+			isRangeStart: r.PlainDate.compare(e, t.start) === 0,
+			isRangeEnd: !1,
+			inRange: !1,
+			isPreview: !0
+		};
+		let [i, a] = r.PlainDate.compare(n, t.start) >= 0 ? [t.start, n] : [n, t.start];
+		return {
+			isRangeStart: r.PlainDate.compare(e, i) === 0,
+			isRangeEnd: r.PlainDate.compare(e, a) === 0,
+			inRange: r.PlainDate.compare(e, i) >= 0 && r.PlainDate.compare(e, a) <= 0,
+			isPreview: !0
+		};
+	}
+	return {
+		setHoverDate: i,
+		handleRangeClick: a,
+		getDayRangeState: s
+	};
+}
+//#endregion
+//#region src/lib/temporal-date-picker.tsx
+var h = {
+	prevMonth: "Previous month",
+	nextMonth: "Next month",
+	clearSelection: "Clear selection",
+	selectMonth: (e) => `Select month, currently ${e}`,
+	selectYear: (e) => `Select year, currently ${e}`,
+	weekNumberHeader: "Week",
+	weekNumber: (e) => `Week ${e}`,
+	rangeStart: ", range start",
+	rangeEnd: ", range end",
+	inRange: ", in range",
+	monthPanelAnnouncement: "Month selector",
+	yearPanelAnnouncement: "Year selector",
+	prevYear: "Previous year",
+	nextYear: "Next year",
+	monthPanelTitle: "Select month",
+	prevYearWindow: "Previous window",
+	nextYearWindow: "Next window",
+	yearPanelTitle: "Select year"
+};
+function g(e) {
+	let t = [];
+	for (let n = 1; n <= 7; n++) {
+		let r = new Date(2024, 0, n);
+		t.push({
+			short: r.toLocaleString(e, { weekday: "narrow" }),
+			long: r.toLocaleString(e, { weekday: "long" })
+		});
+	}
+	return t;
+}
+function _(e) {
+	let t = e.with({ day: 1 }), n = e.daysInMonth, r = t.dayOfWeek - 1, i = [...Array.from({ length: r }, () => null), ...Array.from({ length: n }, (e, n) => t.add({ days: n }))], a = [];
+	for (let e = 0; e < i.length; e += 7) {
+		let t = i.slice(e, e + 7);
+		for (; t.length < 7;) t.push(null);
+		a.push(t);
+	}
+	return a;
+}
+var v = (e) => {
+	let { className: s = "", locale: u, labels: f, renderDayContent: p, showWeekNumbers: v, isDateDisabled: y } = e, b = {
+		...h,
+		...f
+	}, x = u ?? (typeof navigator < "u" ? navigator.language : "en"), [S, C] = n(() => e.mode === "range" ? e.value?.start ?? r.Now.plainDateISO() : e.value ?? r.Now.plainDateISO()), [w, T] = n(null), E = t(null), { view: D, setView: O } = d(), { setHoverDate: k, handleRangeClick: A, getDayRangeState: j } = m(y), M = r.Now.plainDateISO(), N = (e) => r.PlainDate.compare(M, e) === 0, P = e.value !== void 0;
+	function F() {
+		e.clearable && e.onChange(void 0);
+	}
+	function I(t) {
+		e.mode === "range" ? A(t, e.value, e.onChange) : (e.onChange(t), T(t));
+	}
+	let L = (e) => {
+		T(e), (e.year !== S.year || e.month !== S.month) && C(e);
+	}, R = (t) => {
+		let n = e.mode === "range" ? void 0 : e.value, r = w ?? n ?? M;
+		switch (t.key) {
+			case "ArrowLeft":
+				t.preventDefault(), L(r.subtract({ days: 1 }));
+				break;
+			case "ArrowRight":
+				t.preventDefault(), L(r.add({ days: 1 }));
+				break;
+			case "ArrowUp":
+				t.preventDefault(), L(r.subtract({ weeks: 1 }));
+				break;
+			case "ArrowDown":
+				t.preventDefault(), L(r.add({ weeks: 1 }));
+				break;
+			case "Home":
+				t.preventDefault(), L(r.subtract({ days: r.dayOfWeek - 1 }));
+				break;
+			case "End":
+				t.preventDefault(), L(r.add({ days: 7 - r.dayOfWeek }));
+				break;
+			case "PageUp":
+				t.preventDefault(), L(r.subtract({ months: 1 }));
+				break;
+			case "PageDown":
+				t.preventDefault(), L(r.add({ months: 1 }));
+				break;
+			case "Enter":
+			case " ":
+				t.preventDefault(), w && I(w);
+				break;
+			default: break;
+		}
+	}, z = () => {
+		C((e) => e.subtract({ months: 1 })), T(null);
+	}, B = () => {
+		C((e) => e.add({ months: 1 })), T(null);
+	}, V = S.toLocaleString(x, {
+		month: "long",
+		year: "numeric"
+	}), H = S.toLocaleString(x, { month: "long" }), U = g(x), W = _(S), G = e.mode === "range" ? e.value?.start : void 0, K = w ?? (e.mode === "range" ? G : e.value) ?? M, q = D === "month" ? b.monthPanelAnnouncement : D === "year" ? b.yearPanelAnnouncement : V;
+	function J(t) {
+		if (e.mode === "range") {
+			let n = j(t, e.value);
+			return {
+				selected: !1,
+				inRange: n.inRange,
+				isRangeStart: n.isRangeStart,
+				isRangeEnd: n.isRangeEnd
+			};
+		}
+		return {
+			selected: e.value !== void 0 && r.PlainDate.compare(e.value, t) === 0,
+			inRange: !1,
+			isRangeStart: !1,
+			isRangeEnd: !1
+		};
+	}
+	function Y(e, t) {
+		let n = ["tdp-day"];
+		return t.selected && n.push("tdp-day--selected"), N(e) && n.push("tdp-day--today"), t.isRangeStart && n.push("tdp-day--range-start"), t.isRangeEnd && n.push("tdp-day--range-end"), t.inRange && !t.isRangeStart && !t.isRangeEnd && n.push("tdp-day--in-range"), n.join(" ");
+	}
+	return /* @__PURE__ */ o("div", {
+		className: `temporal-datepicker ${s}`.trim(),
+		children: [
+			/* @__PURE__ */ a("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "tdp-sr-only",
+				children: q
+			}),
+			D === "calendar" && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
+				className: "tdp-header",
+				children: [
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						className: "tdp-nav",
+						onClick: z,
+						"aria-label": b.prevMonth,
+						children: "‹"
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "tdp-month-label",
+						children: [/* @__PURE__ */ a("button", {
+							type: "button",
+							className: "tdp-month-btn",
+							onClick: () => O("month"),
+							"aria-label": b.selectMonth(H),
+							children: H
+						}), /* @__PURE__ */ a("button", {
+							type: "button",
+							className: "tdp-year-btn",
+							onClick: () => O("year"),
+							"aria-label": b.selectYear(S.year),
+							children: S.year
+						})]
+					}),
+					e.clearable && P && /* @__PURE__ */ a("button", {
+						type: "button",
+						className: "tdp-nav tdp-clear",
+						onClick: F,
+						"aria-label": b.clearSelection,
+						children: "×"
+					}),
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						className: "tdp-nav",
+						onClick: B,
+						"aria-label": b.nextMonth,
+						children: "›"
+					})
+				]
+			}), /* @__PURE__ */ o("table", {
+				ref: E,
+				role: "grid",
+				"aria-label": V,
+				className: "tdp-grid",
+				onKeyDown: R,
+				children: [/* @__PURE__ */ a("thead", { children: /* @__PURE__ */ o("tr", {
+					role: "row",
+					children: [v && /* @__PURE__ */ a("th", {
+						role: "columnheader",
+						scope: "col",
+						className: "tdp-weekday tdp-weeknum-header",
+						"aria-label": b.weekNumberHeader
+					}), U.map(({ short: e, long: t }) => /* @__PURE__ */ a("th", {
+						role: "columnheader",
+						scope: "col",
+						className: "tdp-weekday",
+						abbr: t,
+						children: e
+					}, t))]
+				}) }), /* @__PURE__ */ a("tbody", { children: W.map((t, n) => {
+					let i = t.find((e) => e !== null)?.weekOfYear;
+					return /* @__PURE__ */ o("tr", {
+						role: "row",
+						children: [v && /* @__PURE__ */ a("th", {
+							scope: "row",
+							className: "tdp-weeknum",
+							"aria-label": i == null ? b.weekNumberHeader : b.weekNumber(i),
+							children: i ?? ""
+						}), t.map((t, n) => {
+							if (!t) return /* @__PURE__ */ a("td", {
+								role: "gridcell",
+								className: "tdp-cell"
+							}, `empty-${n}`);
+							let i = y?.(t) ?? !1, o = J(t), s = N(t), c = r.PlainDate.compare(K, t) === 0, l = Y(t, o), u = t.toLocaleString(x, {
+								weekday: "long",
+								year: "numeric",
+								month: "long",
+								day: "numeric"
+							});
+							return o.isRangeStart && !o.isRangeEnd && (u += b.rangeStart), o.isRangeEnd && !o.isRangeStart && (u += b.rangeEnd), o.inRange && !o.isRangeStart && !o.isRangeEnd && (u += b.inRange), /* @__PURE__ */ a("td", {
+								role: "gridcell",
+								"aria-selected": o.selected || o.isRangeStart || o.isRangeEnd,
+								className: "tdp-cell",
+								children: /* @__PURE__ */ a("button", {
+									type: "button",
+									className: l,
+									onClick: () => I(t),
+									onFocus: () => T(t),
+									onMouseEnter: () => e.mode === "range" && k(t),
+									onMouseLeave: () => e.mode === "range" && k(null),
+									tabIndex: c ? 0 : -1,
+									disabled: i,
+									"aria-label": u,
+									"aria-current": s ? "date" : void 0,
+									"aria-pressed": e.mode === "range" ? void 0 : o.selected,
+									children: p ? p(t, o) : t.day
+								})
+							}, t.toString());
+						})]
+					}, n);
+				}) })]
+			})] }),
+			D === "month" && /* @__PURE__ */ a(c, {
+				viewDate: S,
+				locale: x,
+				labels: b,
+				onSelect: (e, t) => {
+					C(S.with({
+						year: e,
+						month: t
+					})), O("calendar");
+				},
+				onClose: () => O("calendar")
+			}),
+			D === "year" && /* @__PURE__ */ a(l, {
+				viewDate: S,
+				labels: b,
+				onSelect: (e) => {
+					C(S.with({ year: e })), O("calendar");
+				},
+				onClose: () => O("calendar")
+			})
+		]
+	});
+};
+//#endregion
+export { v as TemporalDatePicker };

package/dist/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,72 @@
+{
+  "name": "temporal-react-datepicker",
+  "version": "1.0.0",
+  "description": "High-performance React date picker built on the Temporal API. Immutable dates, range selection, accessible.",
+  "keywords": [
+    "react",
+    "datepicker",
+    "date-picker",
+    "temporal",
+    "temporal-api",
+    "date-range",
+    "accessible",
+    "a11y"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/PabloViniegra/temporal-react-datepicker#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PabloViniegra/temporal-react-datepicker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PabloViniegra/temporal-react-datepicker/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@js-temporal/polyfill": ">=0.5.1",
+    "react": ">=19.0.0 <20.0.0",
+    "react-dom": ">=19.0.0 <20.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^9.39.4",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@rolldown/plugin-babel": "^0.2.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit"
+  }
+}