@krizaka/ui 3.0.0 → 3.2.0

package/dist/date-picker.js

@@ -1,10 +1,12 @@
 "use client";
 import {
   cn,
-  floating
-} from "./chunk-2USC2YT6.js";
+  floating,
+  twMergeConfig
+} from "./chunk-I5RVM5CW.js";
 import {
-  useControllable
+  useControllable,
+  usePrefersReducedMotion
 } from "./chunk-BRKMQ6JV.js";
 import {
   CalendarGlyph,
@@ -14,41 +16,122 @@ import {
 
 // src/date-picker/calendar.tsx
 import { formatDate, getDateTimeFormat } from "@krizaka/intl";
+import * as React2 from "react";
+
+// src/tv.ts
+import { createTV } from "tailwind-variants";
+var tv = createTV({ twMergeConfig });
+
+// src/date-picker/month-picker.tsx
 import * as React from "react";
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var calendar = tv({
-  slots: {
-    root: "w-[17.5rem] select-none text-sm text-fg",
-    header: "mb-2 flex items-center justify-between gap-2",
-    title: "text-sm font-semibold capitalize",
-    nav: "inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
-    grid: "w-full border-collapse",
-    weekday: "h-8 w-10 text-center text-[11px] font-semibold uppercase text-fg-secondary",
-    cell: "p-0 text-center",
-    day: "relative h-10 w-10 rounded-lg text-sm tabular-nums text-fg transition-colors hover:bg-surface-3 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[outside]:text-fg-secondary data-[today]:font-bold data-[today]:not-data-[selected]:text-fg-accent data-[in-range]:rounded-none data-[in-range]:bg-accent-soft data-[selected]:bg-accent data-[selected]:text-on-accent data-[selected]:hover:bg-accent disabled:cursor-not-allowed disabled:text-fg-muted disabled:line-through disabled:opacity-50 disabled:hover:bg-transparent"
+
+// src/date-picker/parts.ts
+var DATE_PART_LENGTH = { day: 2, month: 2, year: 4 };
+function datePartsOrder(locale) {
+  try {
+    const parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(new Date(2001, 10, 22));
+    const order = parts.map((p) => p.type).filter((t) => t === "day" || t === "month" || t === "year");
+    if (order.length === 3) return order;
+  } catch {
   }
-});
-var pad = (n) => String(n).padStart(2, "0");
-var parts = (iso) => iso.split("-").map(Number);
+  return ["day", "month", "year"];
+}
+function composeDate(parts) {
+  if (!parts.day && !parts.month && !parts.year) return "";
+  const pad = (v) => v.length === 1 ? `0${v}` : v;
+  return `${parts.year}-${pad(parts.month)}-${pad(parts.day)}`;
+}
+function splitDate(value) {
+  const m = /^(\d*)-(\d*)-(\d*)$/.exec(value ?? "");
+  return m ? { year: m[1], month: m[2], day: m[3] } : { day: "", month: "", year: "" };
+}
+function isRealDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}
+function latestBirthDate(age, today = /* @__PURE__ */ new Date()) {
+  return new Date(Date.UTC(today.getFullYear() - age, today.getMonth(), today.getDate())).toISOString().slice(0, 10);
+}
+function daysInMonth(year, month) {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function isoParts(iso) {
+  const [year = 0, month = 0, day = 0] = iso.split("-").map(Number);
+  return { year, month, day };
+}
+function isoOf(year, month, day) {
+  const d = Math.min(Math.max(day, 1), daysInMonth(year, month));
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+function todayIso(now = /* @__PURE__ */ new Date()) {
+  return isoOf(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+function ageOn(birth, today = todayIso()) {
+  const b = isoParts(birth);
+  const t = isoParts(today);
+  return t.year - b.year - (t.month < b.month || t.month === b.month && t.day < b.day ? 1 : 0);
+}
+function monthNames(locale, style = "long") {
+  const format = new Intl.DateTimeFormat(locale, { month: style, timeZone: "UTC" });
+  return Array.from({ length: 12 }, (_, i) => format.format(new Date(Date.UTC(2001, i, 1))));
+}
+function yearRange(from, to) {
+  const step = from <= to ? 1 : -1;
+  return Array.from({ length: Math.abs(to - from) + 1 }, (_, i) => from + i * step);
+}
+function timeToMinutes(value) {
+  const m = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? "");
+  if (!m) return null;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  return h < 24 && min < 60 ? h * 60 + min : null;
+}
+function minutesToTime(minutes) {
+  const m = (Math.round(minutes) % 1440 + 1440) % 1440;
+  return `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+}
+function timeSlots(start, end, step = 30) {
+  const a = timeToMinutes(start);
+  const b = timeToMinutes(end);
+  if (a === null || b === null || step <= 0) return [];
+  const slots = [];
+  for (let m = a; m < b; m += step) slots.push(minutesToTime(m));
+  return slots;
+}
+function uses12Hours(locale) {
+  try {
+    const options = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
+    return options.hourCycle ? options.hourCycle === "h12" || options.hourCycle === "h11" : Boolean(options.hour12);
+  } catch {
+    return false;
+  }
+}
+function dayPeriods(locale) {
+  const format = new Intl.DateTimeFormat(locale, { hour: "numeric", hour12: true, timeZone: "UTC" });
+  const period = (h) => format.formatToParts(new Date(Date.UTC(2001, 0, 1, h))).find((p) => p.type === "dayPeriod")?.value ?? (h < 12 ? "AM" : "PM");
+  return [period(9), period(15)];
+}
+function formatTime(locale, value) {
+  const minutes = timeToMinutes(value);
+  if (minutes === null) return "";
+  return new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }).format(new Date(Date.UTC(2001, 0, 1, 0, minutes)));
+}
 var toLocalDate = (iso) => {
-  const [y, m, d] = parts(iso);
-  return new Date(y, m - 1, d);
+  const { year, month, day } = isoParts(iso);
+  return new Date(year, month - 1, day);
 };
-var toIsoDate = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+var toIsoDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 var addDays = (iso, days) => {
   const date = toLocalDate(iso);
   date.setDate(date.getDate() + days);
   return toIsoDate(date);
 };
 var addMonths = (iso, months) => {
-  const [y, m, d] = parts(iso);
-  const first = new Date(y, m - 1 + months, 1);
-  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
-  return toIsoDate(new Date(first.getFullYear(), first.getMonth(), Math.min(d, last)));
+  const { year, month, day } = isoParts(iso);
+  const first = new Date(year, month - 1 + months, 1);
+  return isoOf(first.getFullYear(), first.getMonth() + 1, day);
 };
-var monthOf = (iso) => `${iso.slice(0, 7)}-01`;
-var clampIso = (iso, min, max) => min && iso < min ? min : max && iso > max ? max : iso;
 function weekStartOf(locale) {
   try {
     const info = new Intl.Locale(locale);
@@ -58,7 +141,147 @@ function weekStartOf(locale) {
     return 1;
   }
 }
-var calendarLabels = { previousMonth: "Previous month", nextMonth: "Next month" };
+
+// src/date-picker/month-picker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var monthPicker = tv({
+  slots: {
+    root: "inline-flex select-none flex-col gap-3 text-sm text-fg",
+    header: "flex items-center justify-between gap-2",
+    year: "text-sm font-semibold tabular-nums",
+    nav: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35",
+    grid: "kz-fade grid grid-cols-3 gap-1.5",
+    month: "relative h-11 min-w-[5.5rem] rounded-xl px-2 text-sm font-medium capitalize text-fg transition-[background-color,box-shadow,transform] duration-150 hover:bg-surface-3 active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring data-[current]:font-bold data-[current]:not-data-[selected]:text-fg-accent data-[selected]:bg-accent data-[selected]:bg-fill-shade data-[selected]:font-semibold data-[selected]:text-on-accent data-[selected]:shadow-glow data-[selected]:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:text-fg-muted disabled:opacity-50 disabled:hover:bg-transparent"
+  },
+  variants: {
+    variant: {
+      plain: {},
+      card: { root: "rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 shadow-raised inset-shadow-edge" }
+    }
+  },
+  defaultVariants: { variant: "plain" }
+});
+var monthPickerLabels = { previousYear: "Previous year", nextYear: "Next year" };
+function MonthPicker({ locale, value: valueProp, defaultValue = null, onValueChange, year: yearProp, onYearChange, min, max, current, autoFocus, bare, variant, labels: given, className }) {
+  const labels = { ...monthPickerLabels, ...given };
+  const s = monthPicker({ variant });
+  const [own, setOwn] = React.useState(defaultValue);
+  const value = valueProp !== void 0 ? valueProp : own;
+  const now = /* @__PURE__ */ new Date();
+  const thisMonth = current ?? `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+  const [ownYear, setOwnYear] = React.useState(() => Number((value ?? thisMonth).slice(0, 4)));
+  const year = yearProp ?? ownYear;
+  const setYear = (y) => {
+    if (yearProp === void 0) setOwnYear(y);
+    onYearChange?.(y);
+  };
+  const names = React.useMemo(() => monthNames(locale, "short").map((n) => n.replace(/\.$/, "")), [locale]);
+  const longNames = React.useMemo(() => monthNames(locale, "long"), [locale]);
+  const iso = (y, m) => `${String(y).padStart(4, "0")}-${String(m).padStart(2, "0")}`;
+  const disabled = (m) => Boolean(min && m < min || max && m > max);
+  const [focused, setFocused] = React.useState(() => value && Number(value.slice(0, 4)) === year ? Number(value.slice(5, 7)) : Number(thisMonth.slice(5, 7)));
+  const grid = React.useRef(null);
+  const moved = React.useRef(Boolean(autoFocus));
+  React.useEffect(() => {
+    if (!moved.current) return;
+    moved.current = false;
+    grid.current?.querySelector(`[data-month="${iso(year, focused)}"]`)?.focus();
+  }, [year, focused]);
+  const pick = (m) => {
+    if (valueProp === void 0) setOwn(m);
+    onValueChange?.(m);
+  };
+  const move = (to) => {
+    moved.current = true;
+    const y = year + Math.floor((to - 1) / 12);
+    const m = ((to - 1) % 12 + 12) % 12 + 1;
+    if (y !== year) setYear(y);
+    setFocused(m);
+  };
+  const onKeyDown = (event) => {
+    const moves = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -3, ArrowDown: 3, PageUp: -12, PageDown: 12 };
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      moved.current = true;
+      setFocused(event.key === "Home" ? 1 : 12);
+      return;
+    }
+    const by = moves[event.key];
+    if (by === void 0) return;
+    event.preventDefault();
+    move(focused + by);
+  };
+  const rows = [0, 1, 2, 3].map((r) => [1, 2, 3].map((c) => r * 3 + c));
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), children: [
+    bare ? null : /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.nav(), "aria-label": labels.previousYear, disabled: Boolean(min && year - 1 < Number(min.slice(0, 4))), onClick: () => setYear(year - 1), children: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left", className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx("span", { className: s.year(), "aria-live": "polite", children: year }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.nav(), "aria-label": labels.nextYear, disabled: Boolean(max && year + 1 > Number(max.slice(0, 4))), onClick: () => setYear(year + 1), children: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: grid, role: "grid", "aria-label": String(year), className: s.grid(), onKeyDown, children: rows.map((row) => /* @__PURE__ */ jsx("div", { role: "row", className: "contents", children: row.map((m) => {
+      const id = iso(year, m);
+      return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-selected": id === value || void 0, className: "flex", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-month": id,
+          tabIndex: m === focused ? 0 : -1,
+          "aria-current": id === thisMonth ? "date" : void 0,
+          "data-current": id === thisMonth ? "" : void 0,
+          "data-selected": id === value ? "" : void 0,
+          disabled: disabled(id),
+          className: s.month({ className: "w-full" }),
+          onClick: () => {
+            setFocused(m);
+            pick(id);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: names[m - 1] }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${longNames[m - 1]} ${year}` })
+          ]
+        }
+      ) }, m);
+    }) }, row[0])) }, year)
+  ] });
+}
+
+// src/date-picker/calendar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var calendar = tv({
+  slots: {
+    root: "inline-flex select-none flex-col text-sm text-fg",
+    header: "mb-3 flex items-center justify-between gap-2",
+    caption: "inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold capitalize text-fg transition-colors hover:bg-surface-3 focus-visible:outline-hidden focus-visible:focus-ring aria-expanded:bg-surface-3",
+    nav: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35",
+    months: "flex flex-col gap-6 sm:flex-row",
+    month: "kz-month flex flex-col gap-2",
+    monthTitle: "px-1 text-xs font-semibold capitalize text-fg-secondary",
+    grid: "border-separate border-spacing-y-1",
+    weekday: "h-7 w-10 pb-1 text-center text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    cell: "p-0 text-center data-[band]:bg-accent-soft data-[band=start]:rounded-l-xl data-[band=end]:rounded-r-xl data-[band=solo]:rounded-xl data-[band=preview]:bg-surface-3",
+    day: "relative h-10 w-10 rounded-xl text-sm tabular-nums text-fg transition-[background-color,box-shadow,transform] duration-150 hover:bg-surface-3 active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:z-10 focus-visible:outline-hidden focus-visible:focus-ring data-[outside]:text-fg-secondary data-[outside]:font-normal data-[weekend]:not-data-[selected]:text-fg-secondary data-[today]:font-bold data-[today]:not-data-[selected]:text-fg-accent data-[in-range]:hover:bg-accent/15 data-[selected]:bg-accent data-[selected]:bg-fill-shade data-[selected]:font-semibold data-[selected]:text-on-accent data-[selected]:shadow-glow data-[selected]:inset-shadow-edge-fill data-[selected]:hover:bg-accent disabled:cursor-not-allowed disabled:text-fg-muted disabled:line-through disabled:opacity-50 disabled:hover:bg-transparent",
+    // Today: the node under the number (the marks' diamond), on-accent when today is the chosen day.
+    node: "pointer-events-none absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rotate-45 rounded-[1px] bg-accent group-data-[selected]:bg-on-accent",
+    live: "sr-only"
+  },
+  variants: {
+    variant: {
+      plain: {},
+      card: { root: "rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 shadow-raised inset-shadow-edge" }
+    }
+  },
+  defaultVariants: { variant: "plain" }
+});
+var monthOf = (iso) => `${iso.slice(0, 7)}-01`;
+var clampIso = (iso, min, max) => min && iso < min ? min : max && iso > max ? max : iso;
+var monthsBetween = (a, b) => (Number(b.slice(0, 4)) - Number(a.slice(0, 4))) * 12 + Number(b.slice(5, 7)) - Number(a.slice(5, 7));
+var calendarLabels = {
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  chooseMonth: "Choose month and year",
+  previousYear: "Previous year",
+  nextYear: "Next year"
+};
 function Calendar({
   locale,
   value,
@@ -67,53 +290,59 @@ function Calendar({
   month: monthProp,
   defaultMonth,
   onMonthChange,
+  numberOfMonths = 1,
   min,
   max,
   isDateDisabled,
   weekStartsOn,
   today: todayProp,
   autoFocus,
+  variant,
   labels: given,
   className
 }) {
   const labels = { ...calendarLabels, ...given };
-  const s = calendar();
+  const s = calendar({ variant });
   const today = todayProp ?? toIsoDate(/* @__PURE__ */ new Date());
   const anchor = value ?? range?.start ?? clampIso(today, min, max);
-  const [innerMonth, setInnerMonth] = React.useState(monthOf(defaultMonth ?? anchor));
+  const [innerMonth, setInnerMonth] = React2.useState(monthOf(defaultMonth ?? anchor));
   const month = monthProp ? monthOf(monthProp) : innerMonth;
-  const [focused, setFocused] = React.useState(anchor.slice(0, 7) === month.slice(0, 7) ? anchor : month);
-  const [hover, setHover] = React.useState(null);
-  const grid = React.useRef(null);
-  const moved = React.useRef(Boolean(autoFocus));
-  const titleId = React.useId();
+  const shown = Array.from({ length: numberOfMonths }, (_, i) => addMonths(month, i));
+  const lastShown = shown[shown.length - 1];
+  const isShown = (iso) => iso.slice(0, 7) >= month.slice(0, 7) && iso.slice(0, 7) <= lastShown.slice(0, 7);
+  const [focused, setFocused] = React2.useState(isShown(anchor) ? anchor : month);
+  const [hover, setHover] = React2.useState(null);
+  const [view, setView] = React2.useState("days");
+  const [direction, setDirection] = React2.useState(null);
+  const root = React2.useRef(null);
+  const moved = React2.useRef(Boolean(autoFocus));
+  const titleId = React2.useId();
   const setMonth = (next) => {
     const m = monthOf(next);
+    setDirection(m > month ? "next" : m < month ? "previous" : null);
     if (!monthProp) setInnerMonth(m);
     onMonthChange?.(m);
   };
-  const active = focused.slice(0, 7) === month.slice(0, 7) ? focused : month;
-  React.useEffect(() => {
-    if (!moved.current) return;
+  const active = isShown(focused) ? focused : month;
+  React2.useEffect(() => {
+    if (!moved.current || view !== "days") return;
     moved.current = false;
-    grid.current?.querySelector(`[data-date="${active}"]`)?.focus();
-  }, [active]);
+    root.current?.querySelector(`[data-date="${active}"]`)?.focus();
+  }, [active, view]);
   const disabled = (iso) => Boolean(min && iso < min || max && iso > max || isDateDisabled?.(iso));
   const start = weekStartsOn ?? weekStartOf(locale);
-  const first = toLocalDate(month);
-  const lead = (first.getDay() - start + 7) % 7;
-  const gridStart = addDays(month, -lead);
-  const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
-  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0].slice(0, 7) === month.slice(0, 7));
   const weekdayShort = getDateTimeFormat(locale, { weekday: "short" });
   const weekdayLong = getDateTimeFormat(locale, { weekday: "long" });
-  const title = getDateTimeFormat(locale, { month: "long", year: "numeric" }).format(first);
+  const titleFormat = getDateTimeFormat(locale, { month: "long", year: "numeric" });
+  const title = titleFormat.format(toLocalDate(month));
+  const fullTitle = numberOfMonths === 2 ? `${title} \u2013 ${titleFormat.format(toLocalDate(lastShown))}` : title;
   const rangeEnd = range ? range.end ?? hover : null;
   const [lo, hi] = range && rangeEnd ? range.start <= rangeEnd ? [range.start, rangeEnd] : [rangeEnd, range.start] : [null, null];
+  const previewing = Boolean(range && !range.end);
   const focusDay = (iso) => {
     moved.current = true;
     setFocused(iso);
-    if (iso.slice(0, 7) !== month.slice(0, 7)) setMonth(iso);
+    if (!isShown(iso)) setMonth(iso < month ? iso : addMonths(iso, -(numberOfMonths - 1)));
   };
   const onKeyDown = (event) => {
     const weekday = (toLocalDate(active).getDay() - start + 7) % 7;
@@ -133,56 +362,381 @@ function Calendar({
     focusDay(move());
   };
   const prevDisabled = Boolean(min && addDays(month, -1) < min);
-  const nextDisabled = Boolean(max && addMonths(month, 1) > max);
-  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), children: [
-    /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: s.nav(), "aria-label": labels.previousMonth, disabled: prevDisabled, onClick: () => setMonth(addMonths(month, -1)), children: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left" }) }),
-      /* @__PURE__ */ jsx("h2", { id: titleId, className: s.title(), "aria-live": "polite", children: title }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: s.nav(), "aria-label": labels.nextMonth, disabled: nextDisabled, onClick: () => setMonth(addMonths(month, 1)), children: /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right" }) })
+  const nextDisabled = Boolean(max && addMonths(lastShown, 1) > max);
+  const band = (iso) => {
+    if (!lo || !hi) return void 0;
+    if (iso < lo || iso > hi) return void 0;
+    if (lo === hi) return void 0;
+    if (previewing && iso !== range?.start) return iso === lo ? "start" : iso === hi ? "end" : "preview";
+    return iso === lo ? "start" : iso === hi ? "end" : "middle";
+  };
+  const renderMonth = (first, index) => {
+    const firstDate = toLocalDate(first);
+    const lead = (firstDate.getDay() - start + 7) % 7;
+    const gridStart = addDays(first, -lead);
+    const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+    const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0].slice(0, 7) === first.slice(0, 7));
+    const monthTitle = titleFormat.format(firstDate);
+    const gridLabelId = `${titleId}-m${index}`;
+    return /* @__PURE__ */ jsxs2("div", { className: s.month(), "data-dir": direction ?? void 0, children: [
+      numberOfMonths === 2 ? /* @__PURE__ */ jsx2("div", { id: gridLabelId, className: s.monthTitle(), children: monthTitle }) : null,
+      /* @__PURE__ */ jsxs2("table", { role: "grid", "aria-label": monthTitle, className: s.grid(), onKeyDown, children: [
+        /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: days.slice(0, 7).map((iso) => /* @__PURE__ */ jsx2("th", { scope: "col", abbr: weekdayLong.format(toLocalDate(iso)), className: s.weekday(), children: weekdayShort.format(toLocalDate(iso)).replace(/\.$/, "") }, iso)) }) }),
+        /* @__PURE__ */ jsx2("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx2("tr", { children: week.map((iso) => {
+          const outside = iso.slice(0, 7) !== first.slice(0, 7);
+          if (outside && numberOfMonths === 2) return /* @__PURE__ */ jsx2("td", { role: "gridcell", className: s.cell() }, iso);
+          const selected = iso === value || Boolean(range && (iso === range.start || iso === range.end));
+          const inRange = Boolean(lo && hi && iso > lo && iso < hi);
+          const dow = toLocalDate(iso).getDay();
+          return /* @__PURE__ */ jsx2("td", { role: "gridcell", "aria-selected": selected || inRange || void 0, "data-band": band(iso), className: s.cell(), children: /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              "data-date": iso,
+              tabIndex: iso === active ? 0 : -1,
+              "aria-label": formatDate(toLocalDate(iso), { locale, style: "long" }),
+              "aria-current": iso === today ? "date" : void 0,
+              "data-today": iso === today ? "" : void 0,
+              "data-outside": outside ? "" : void 0,
+              "data-weekend": dow === 0 || dow === 6 ? "" : void 0,
+              "data-selected": selected ? "" : void 0,
+              "data-in-range": inRange ? "" : void 0,
+              disabled: disabled(iso),
+              className: s.day({ className: "group" }),
+              onClick: () => {
+                setFocused(iso);
+                onSelect?.(iso);
+              },
+              onMouseEnter: previewing ? () => setHover(iso) : void 0,
+              onFocus: previewing ? () => setHover(iso) : void 0,
+              children: [
+                Number(iso.slice(8)),
+                iso === today ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: s.node() }) : null
+              ]
+            }
+          ) }, iso);
+        }) }, week[0])) })
+      ] })
+    ] }, first);
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref: root, className: s.root({ className }), children: [
+    /* @__PURE__ */ jsxs2("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: s.nav(),
+          "aria-label": view === "days" ? labels.previousMonth : labels.previousYear,
+          disabled: view === "days" ? prevDisabled : Boolean(min && Number(month.slice(0, 4)) - 1 < Number(min.slice(0, 4))),
+          onClick: () => setMonth(addMonths(month, view === "days" ? -1 : -12)),
+          children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "left", className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: s.caption(), "aria-expanded": view === "months", "aria-label": `${labels.chooseMonth}, ${fullTitle}`, onClick: () => setView(view === "days" ? "months" : "days"), children: [
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: view === "days" ? fullTitle : month.slice(0, 4) }),
+        /* @__PURE__ */ jsx2(ChevronGlyph, { direction: view === "months" ? "up" : "down", className: "h-3.5 w-3.5 text-fg-secondary" })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: s.nav(),
+          "aria-label": view === "days" ? labels.nextMonth : labels.nextYear,
+          disabled: view === "days" ? nextDisabled : Boolean(max && Number(month.slice(0, 4)) + 1 > Number(max.slice(0, 4))),
+          onClick: () => setMonth(addMonths(month, view === "days" ? 1 : 12)),
+          children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs("table", { ref: grid, role: "grid", "aria-labelledby": titleId, className: s.grid(), onKeyDown, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: days.slice(0, 7).map((iso) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: weekdayLong.format(toLocalDate(iso)), className: s.weekday(), children: weekdayShort.format(toLocalDate(iso)).replace(/\.$/, "") }, iso)) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((iso) => {
-        const selected = iso === value || range && (iso === range.start || iso === range.end);
-        const inRange = Boolean(lo && hi && iso > lo && iso < hi);
-        return /* @__PURE__ */ jsx("td", { role: "gridcell", "aria-selected": selected || inRange || void 0, className: s.cell(), children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-date": iso,
-            tabIndex: iso === active ? 0 : -1,
-            "aria-label": formatDate(toLocalDate(iso), { locale, style: "long" }),
-            "aria-current": iso === today ? "date" : void 0,
-            "data-today": iso === today ? "" : void 0,
-            "data-outside": iso.slice(0, 7) !== month.slice(0, 7) ? "" : void 0,
-            "data-selected": selected ? "" : void 0,
-            "data-in-range": inRange ? "" : void 0,
-            disabled: disabled(iso),
-            className: s.day(),
-            onClick: () => {
-              setFocused(iso);
-              onSelect?.(iso);
-            },
-            onMouseEnter: range && !range.end ? () => setHover(iso) : void 0,
-            onFocus: range && !range.end ? () => setHover(iso) : void 0,
-            children: Number(iso.slice(8))
+    /* @__PURE__ */ jsx2("span", { id: titleId, className: s.live(), "aria-live": "polite", children: fullTitle }),
+    view === "days" ? /* @__PURE__ */ jsx2("div", { className: s.months(), children: shown.map(renderMonth) }) : /* @__PURE__ */ jsx2(
+      MonthPicker,
+      {
+        locale,
+        bare: true,
+        year: Number(month.slice(0, 4)),
+        onYearChange: (y) => setMonth(`${y}-${month.slice(5, 7)}-01`),
+        value: month.slice(0, 7),
+        min: min?.slice(0, 7),
+        max: max?.slice(0, 7),
+        autoFocus: true,
+        onValueChange: (m) => {
+          if (!m) return;
+          const target = `${m}-01`;
+          setMonth(target);
+          setView("days");
+          moved.current = true;
+          setFocused(clampIso(addMonths(active, monthsBetween(monthOf(active), target)), min, max));
+        }
+      }
+    )
+  ] });
+}
+
+// src/date-picker/date-field.tsx
+import * as React4 from "react";
+
+// src/date-picker/wheel.tsx
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var wheel = tv({
+  slots: {
+    root: "relative inline-flex select-none items-stretch gap-1 rounded-2xl border border-border-default data-[invalid]:border-danger bg-surface-1 bg-sheen px-2 shadow-raised inset-shadow-edge",
+    band: "pointer-events-none absolute inset-x-1.5 top-1/2 -translate-y-1/2 rounded-xl border border-border-subtle bg-surface-3 inset-shadow-well",
+    column: "relative z-[1] min-w-14 flex-1 rounded-xl outline-hidden focus-visible:focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+    scroller: "kz-wheel h-full snap-y snap-mandatory overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_bottom,transparent,#000_30%,#000_70%,transparent)]",
+    item: "kz-wheel-item flex snap-center items-center justify-center px-2 text-base tabular-nums text-fg-secondary transition-colors data-[selected]:font-semibold data-[selected]:text-fg data-[disabled]:text-fg-muted data-[disabled]:line-through",
+    divider: "z-[1] self-center text-base font-semibold text-fg-secondary"
+  }
+});
+var ITEM = 40;
+var VisibleContext = React3.createContext(5);
+function WheelPicker({ label, children, visible = 5, "aria-describedby": describedBy, invalid, className }) {
+  const s = wheel();
+  return /* @__PURE__ */ jsx3(VisibleContext.Provider, { value: visible, children: /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": label, "aria-describedby": describedBy, "data-invalid": invalid ? "" : void 0, className: s.root({ className }), style: { height: ITEM * visible }, children: [
+    /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: s.band(), style: { height: ITEM } }),
+    children
+  ] }) });
+}
+function WheelDivider({ children }) {
+  return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: wheel().divider(), children });
+}
+var nearestEnabled = (options, index) => {
+  for (let d = 0; d < options.length; d++) {
+    if (options[index + d] && !options[index + d].disabled) return index + d;
+    if (options[index - d] && !options[index - d].disabled) return index - d;
+  }
+  return index;
+};
+function Wheel({ label, options, value: valueProp, defaultValue, onValueChange, disabled, className }) {
+  const s = wheel();
+  const visible = React3.useContext(VisibleContext);
+  const [own, setOwn] = React3.useState(defaultValue ?? options[0]?.value ?? "");
+  const value = valueProp ?? own;
+  const index = Math.max(0, options.findIndex((o) => o.value === value));
+  const scroller = React3.useRef(null);
+  const settle = React3.useRef(null);
+  const programmatic = React3.useRef(false);
+  const reduce = usePrefersReducedMotion();
+  const mounted = React3.useRef(false);
+  const commit = React3.useCallback(
+    (i) => {
+      const target = nearestEnabled(options, Math.min(options.length - 1, Math.max(0, i)));
+      const option = options[target];
+      if (!option) return;
+      if (valueProp === void 0) setOwn(option.value);
+      if (option.value !== value) onValueChange?.(option.value);
+    },
+    [options, valueProp, value, onValueChange]
+  );
+  React3.useEffect(() => {
+    const el = scroller.current;
+    if (!el) return;
+    const top = index * ITEM;
+    if (Math.abs(el.scrollTop - top) < 1) return;
+    programmatic.current = true;
+    if (typeof el.scrollTo === "function") el.scrollTo({ top, behavior: mounted.current && !reduce ? "smooth" : "auto" });
+    else el.scrollTop = top;
+    mounted.current = true;
+    const t = setTimeout(() => programmatic.current = false, 400);
+    return () => clearTimeout(t);
+  }, [index, reduce]);
+  const onScroll = () => {
+    if (programmatic.current) return;
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = setTimeout(() => {
+      const el = scroller.current;
+      if (el) commit(Math.round(el.scrollTop / ITEM));
+    }, 90);
+  };
+  React3.useEffect(() => () => void (settle.current && clearTimeout(settle.current)), []);
+  const onKeyDown = (event) => {
+    const step = (by) => {
+      let i = index + by;
+      while (options[i]?.disabled) i += Math.sign(by);
+      return options[i] ? i : index;
+    };
+    const moves = {
+      ArrowUp: () => step(-1),
+      ArrowDown: () => step(1),
+      PageUp: () => Math.max(0, nearestEnabled(options, index - 5)),
+      PageDown: () => Math.min(options.length - 1, nearestEnabled(options, index + 5)),
+      Home: () => nearestEnabled(options, 0),
+      End: () => nearestEnabled(options, options.length - 1)
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    commit(move());
+  };
+  const pad = (visible - 1) / 2 * ITEM;
+  const current = options[index];
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: "spinbutton",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": label,
+      "aria-valuenow": index,
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.max(0, options.length - 1),
+      "aria-valuetext": current?.label,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: s.column({ className }),
+      onKeyDown,
+      children: /* @__PURE__ */ jsx3("div", { ref: scroller, "aria-hidden": true, className: s.scroller(), style: { paddingBlock: pad, scrollPaddingBlock: pad }, onScroll, children: options.map((o, i) => /* @__PURE__ */ jsx3(
+        "div",
+        {
+          "data-value": o.value,
+          "data-selected": i === index ? "" : void 0,
+          "data-disabled": o.disabled ? "" : void 0,
+          className: s.item(),
+          style: { height: ITEM },
+          onClick: () => !o.disabled && commit(i),
+          children: o.label
+        },
+        o.value
+      )) })
+    }
+  );
+}
+
+// src/date-picker/date-field.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var dateField = tv({
+  slots: {
+    root: "flex flex-col gap-1.5 border-0 p-0",
+    legend: "mb-1.5 p-0 text-xs font-semibold text-fg-secondary",
+    row: "flex gap-2",
+    part: "flex flex-col gap-1 text-xs text-fg-secondary",
+    input: "h-11 rounded-lg border border-border-default bg-surface-2 px-2 text-center text-base tabular-nums text-fg inset-shadow-well transition-[border-color,box-shadow] placeholder:text-fg-muted focus-visible:border-accent focus-visible:outline-hidden focus-visible:focus-ring-inset aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50",
+    hint: "text-xs text-fg-secondary",
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger"
+  }
+});
+var dateFieldLabels = { day: "Day", month: "Month", year: "Year" };
+function Caption({ id, hint, error }) {
+  const s = dateField();
+  if (error)
+    return /* @__PURE__ */ jsx4("p", { id: `${id}-error`, className: s.error(), children: error });
+  return hint ? /* @__PURE__ */ jsx4("p", { id: `${id}-hint`, className: s.hint(), children: hint }) : null;
+}
+function DateField({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue = "", onValueChange, onBlur, autoComplete }) {
+  const labels = { ...dateFieldLabels, ...given };
+  const s = dateField();
+  const id = React4.useId();
+  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+  const order = React4.useMemo(() => datePartsOrder(locale), [locale]);
+  const [parts, setParts] = React4.useState(() => splitDate(value));
+  if ((value ?? "") !== composeDate(parts) && composeDate(splitDate(value)) === (value ?? "")) setParts(splitDate(value));
+  const refs = { day: React4.useRef(null), month: React4.useRef(null), year: React4.useRef(null) };
+  const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ jsxs4("fieldset", { className: s.root({ className }), "aria-describedby": describedBy, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && onBlur?.(), children: [
+    /* @__PURE__ */ jsx4("legend", { className: s.legend(), children: label }),
+    /* @__PURE__ */ jsx4("div", { className: s.row(), children: order.map((part) => /* @__PURE__ */ jsxs4("label", { className: s.part(), children: [
+      labels[part],
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          ref: refs[part],
+          inputMode: "numeric",
+          autoComplete: autoComplete === "bday" ? `bday-${part}` : "off",
+          maxLength: DATE_PART_LENGTH[part],
+          value: parts[part],
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          className: s.input({ className: part === "year" ? "w-20" : "w-14" }),
+          onChange: (e) => {
+            const digits = e.target.value.replace(/\D/g, "").slice(0, DATE_PART_LENGTH[part]);
+            const next = { ...parts, [part]: digits };
+            setParts(next);
+            setValue(composeDate(next));
+            const following = order[order.indexOf(part) + 1];
+            if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();
           }
-        ) }, iso);
-      }) }, week[0])) })
-    ] })
+        }
+      )
+    ] }, part)) }),
+    name ? /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: value ?? "" }) : null,
+    /* @__PURE__ */ jsx4(Caption, { id, hint, error })
+  ] });
+}
+function DateWheel({ label, locale, hint, error, disabled, name, labels: given, className, value: valueProp, defaultValue = null, onValueChange, min, max, defaultView }) {
+  const labels = { ...dateFieldLabels, ...given };
+  const id = React4.useId();
+  const [value, setValue] = useControllable(valueProp, defaultValue, (v) => v && onValueChange?.(v));
+  const today = todayIso();
+  const hi = max ?? today;
+  const lo = min ?? isoOf(Number(today.slice(0, 4)) - 120, 1, 1);
+  const shown = value || defaultView || hi;
+  const { year, month, day } = isoParts(shown);
+  const order = React4.useMemo(() => datePartsOrder(locale), [locale]);
+  const months = React4.useMemo(() => monthNames(locale, "long"), [locale]);
+  const number = React4.useMemo(() => new Intl.NumberFormat(locale, { useGrouping: false }), [locale]);
+  const inBounds = (iso) => iso >= lo && iso <= hi;
+  const set = (y, m, d) => {
+    let next = isoOf(y, m, d);
+    if (next > hi) next = hi;
+    if (next < lo) next = lo;
+    setValue(next);
+  };
+  const lastDay = daysInMonth(year, month);
+  const columns = {
+    day: /* @__PURE__ */ jsx4(
+      Wheel,
+      {
+        label: labels.day,
+        disabled,
+        options: Array.from({ length: lastDay }, (_, i) => ({ value: String(i + 1), label: number.format(i + 1), disabled: !inBounds(isoOf(year, month, i + 1)) })),
+        value: String(Math.min(day, lastDay)),
+        onValueChange: (v) => set(year, month, Number(v)),
+        className: "min-w-14"
+      },
+      "day"
+    ),
+    month: /* @__PURE__ */ jsx4(
+      Wheel,
+      {
+        label: labels.month,
+        disabled,
+        options: months.map((n, i) => ({ value: String(i + 1), label: n, disabled: isoOf(year, i + 1, daysInMonth(year, i + 1)) < lo || isoOf(year, i + 1, 1) > hi })),
+        value: String(month),
+        onValueChange: (v) => set(year, Number(v), day),
+        className: "min-w-32 capitalize"
+      },
+      "month"
+    ),
+    year: /* @__PURE__ */ jsx4(
+      Wheel,
+      {
+        label: labels.year,
+        disabled,
+        options: yearRange(Number(hi.slice(0, 4)), Number(lo.slice(0, 4))).map((y) => ({ value: String(y), label: number.format(y) })),
+        value: String(year),
+        onValueChange: (v) => set(Number(v), month, day),
+        className: "min-w-20"
+      },
+      "year"
+    )
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: dateField().root({ className }), children: [
+    /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: dateField().legend(), children: label }),
+    /* @__PURE__ */ jsx4(WheelPicker, { label, "aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0, invalid: Boolean(error), children: order.map((part) => columns[part]) }),
+    name ? /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: value ?? "" }) : null,
+    /* @__PURE__ */ jsx4(Caption, { id, hint, error })
   ] });
 }
 
 // src/date-picker/date-picker.tsx
 import { formatDate as formatDate2, getDateTimeFormat as getDateTimeFormat2 } from "@krizaka/intl";
-import * as React2 from "react";
-import { tv as tv2 } from "tailwind-variants";
+import * as React5 from "react";
 
 // src/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function PopoverContent({ sideOffset = 8, collisionPadding = 8, container, className, ...props }) {
-  return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx5(
     PopoverPrimitive.Content,
     {
       sideOffset,
@@ -201,24 +755,26 @@ var Popover = {
 };
 
 // src/date-picker/date-picker.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var datePicker = tv2({
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var datePicker = tv({
   slots: {
     root: "flex w-full flex-col gap-1.5",
     label: "text-xs font-semibold text-fg-secondary",
     row: "relative flex w-full",
-    trigger: "flex h-11 w-full items-center gap-2.5 rounded-lg border border-border-default bg-surface-2 px-3 text-left text-sm text-fg transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[placeholder]:text-fg-muted aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50 data-[clearable]:pr-10",
-    icon: "h-4 w-4 shrink-0 text-fg-secondary",
-    clear: "absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-    content: "w-auto p-3",
-    layout: "flex flex-col gap-3 sm:flex-row",
-    presets: "flex flex-wrap gap-1.5 sm:w-36 sm:flex-col sm:flex-nowrap sm:border-r sm:border-border-default sm:pr-3",
-    preset: "rounded-md px-2.5 py-1.5 text-left text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent-soft aria-pressed:text-fg",
+    // The field is a well (inset), the calendar opens on a raised, lit surface.
+    trigger: "group flex h-11 w-full items-center gap-2.5 rounded-lg border border-border-default bg-surface-2 px-3 text-left text-sm text-fg inset-shadow-well transition-[border-color,box-shadow] hover:border-border-strong focus-visible:border-accent focus-visible:outline-hidden focus-visible:focus-ring-inset data-[state=open]:border-accent data-[placeholder]:text-fg-muted aria-invalid:border-danger disabled:cursor-not-allowed disabled:opacity-50 data-[clearable]:pr-10",
+    icon: "h-4 w-4 shrink-0 text-fg-secondary transition-colors group-data-[state=open]:text-fg-accent",
+    clear: "absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring",
+    content: "w-auto rounded-2xl bg-sheen p-4 shadow-floating inset-shadow-edge",
+    layout: "flex flex-col gap-4 sm:flex-row",
+    presets: "flex gap-1.5 overflow-x-auto pb-1 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-border-subtle sm:pb-0 sm:pr-4",
+    preset: "inline-flex shrink-0 items-center gap-2.5 whitespace-nowrap rounded-lg px-2.5 py-2 text-left text-xs font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring aria-pressed:bg-accent-soft aria-pressed:text-fg",
+    presetNode: "node shrink-0 group-aria-pressed:node-lit",
     hint: "text-xs text-fg-secondary",
     error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger"
   }
 });
-var datePickerLabels = { previousMonth: "Previous month", nextMonth: "Next month", clear: "Clear date" };
+var datePickerLabels = { ...calendarLabels, clear: "Clear date" };
 function Field({
   shared,
   text,
@@ -232,13 +788,13 @@ function Field({
   const { label, placeholder, clearable, hint, error, disabled, name, className } = shared;
   const labels = { ...datePickerLabels, ...shared.labels };
   const s = datePicker();
-  const id = React2.useId();
+  const id = React5.useId();
   const describedBy = [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), children: [
-    /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-trigger`, className: s.label(), children: label }),
-    /* @__PURE__ */ jsxs2(Popover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs2("div", { className: s.row(), children: [
-        /* @__PURE__ */ jsx3(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs5("div", { className: s.root({ className }), children: [
+    /* @__PURE__ */ jsx6("label", { htmlFor: `${id}-trigger`, className: s.label(), children: label }),
+    /* @__PURE__ */ jsxs5(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs5("div", { className: s.row(), children: [
+        /* @__PURE__ */ jsx6(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
           "button",
           {
             id: `${id}-trigger`,
@@ -251,25 +807,25 @@ function Field({
             "data-clearable": clearable && hasValue ? "" : void 0,
             className: s.trigger(),
             children: [
-              /* @__PURE__ */ jsx3(CalendarGlyph, { className: s.icon() }),
-              /* @__PURE__ */ jsx3("span", { className: "truncate", children: text ?? placeholder ?? "" })
+              /* @__PURE__ */ jsx6(CalendarGlyph, { className: s.icon() }),
+              /* @__PURE__ */ jsx6("span", { className: "truncate", children: text ?? placeholder ?? "" })
             ]
           }
         ) }),
-        clearable && hasValue && !disabled ? /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": labels.clear, className: s.clear(), onClick: onClear, children: /* @__PURE__ */ jsx3(CloseGlyph, { className: "h-4 w-4" }) }) : null
+        clearable && hasValue && !disabled ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": labels.clear, className: s.clear(), onClick: onClear, children: /* @__PURE__ */ jsx6(CloseGlyph, { className: "h-4 w-4" }) }) : null
       ] }),
-      /* @__PURE__ */ jsx3(Popover.Content, { align: "start", "aria-label": label, className: s.content(), children })
+      /* @__PURE__ */ jsx6(Popover.Content, { align: "start", "aria-label": label, className: s.content(), children })
     ] }),
-    name ? /* @__PURE__ */ jsx3("input", { type: "hidden", name, value: hidden }) : null,
-    hint ? /* @__PURE__ */ jsx3("p", { id: `${id}-hint`, className: s.hint(), children: hint }) : null,
-    error ? /* @__PURE__ */ jsx3("p", { id: `${id}-error`, className: s.error(), children: error }) : null
+    name ? /* @__PURE__ */ jsx6("input", { type: "hidden", name, value: hidden }) : null,
+    hint ? /* @__PURE__ */ jsx6("p", { id: `${id}-hint`, className: s.hint(), children: hint }) : null,
+    error ? /* @__PURE__ */ jsx6("p", { id: `${id}-error`, className: s.error(), children: error }) : null
   ] });
 }
 function DatePicker({ value: valueProp, defaultValue = null, onValueChange, defaultOpen = false, ...shared }) {
   const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
-  const [open, setOpen] = React2.useState(defaultOpen);
+  const [open, setOpen] = React5.useState(defaultOpen);
   const { locale, format = "medium" } = shared;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(
     Field,
     {
       shared,
@@ -279,7 +835,7 @@ function DatePicker({ value: valueProp, defaultValue = null, onValueChange, defa
       hidden: value ?? "",
       open,
       setOpen,
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx6(
         Calendar,
         {
           ...shared,
@@ -298,10 +854,10 @@ function formatRange(locale, start, end, style) {
   const formatter = getDateTimeFormat2(locale, { dateStyle: style });
   return formatter.formatRange ? formatter.formatRange(toLocalDate(start), toLocalDate(end)) : `${formatter.format(toLocalDate(start))} \u2013 ${formatter.format(toLocalDate(end))}`;
 }
-function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, presets, defaultOpen = false, ...shared }) {
+function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, presets, numberOfMonths = 2, defaultOpen = false, ...shared }) {
   const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
-  const [draft, setDraft] = React2.useState(null);
-  const [open, setOpenState] = React2.useState(defaultOpen);
+  const [draft, setDraft] = React5.useState(null);
+  const [open, setOpenState] = React5.useState(defaultOpen);
   const { locale, format = "medium" } = shared;
   const s = datePicker();
   const setOpen = (next) => {
@@ -317,7 +873,7 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(
     Field,
     {
       shared,
@@ -327,38 +883,278 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
       hidden: value ? `${value.start}/${value.end}` : "",
       open,
       setOpen,
-      children: /* @__PURE__ */ jsxs2("div", { className: s.layout(), children: [
-        presets?.length ? /* @__PURE__ */ jsx3("div", { className: s.presets(), children: presets.map((preset) => /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsxs5("div", { className: s.layout(), children: [
+        presets?.length ? /* @__PURE__ */ jsx6("div", { className: s.presets(), children: presets.map((preset) => /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
             "aria-pressed": value?.start === preset.start && value?.end === preset.end,
-            className: s.preset(),
+            className: s.preset({ className: "group" }),
             onClick: () => {
               setValue({ start: preset.start, end: preset.end });
               setOpen(false);
             },
-            children: preset.label
+            children: [
+              /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: s.presetNode() }),
+              preset.label
+            ]
           },
           preset.label
         )) }) : null,
-        /* @__PURE__ */ jsx3(Calendar, { ...shared, autoFocus: true, range: shown, onSelect: pick })
+        /* @__PURE__ */ jsx6(Calendar, { ...shared, autoFocus: true, range: shown, onSelect: pick, numberOfMonths })
       ] })
     }
   );
 }
+
+// src/date-picker/day-strip.tsx
+import { formatDate as formatDate3, getDateTimeFormat as getDateTimeFormat3 } from "@krizaka/intl";
+import * as React6 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var dayStrip = tv({
+  slots: {
+    root: "flex w-full min-w-0 flex-col gap-2",
+    header: "flex items-center justify-between gap-2",
+    title: "text-sm font-semibold capitalize text-fg",
+    navs: "flex gap-1.5",
+    nav: "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35",
+    track: "-mx-1 flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-1 py-1.5 [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+    day: "relative flex h-[4.5rem] w-14 shrink-0 snap-start flex-col items-center justify-center gap-0.5 rounded-2xl border border-border-default bg-surface-2 bg-sheen text-fg inset-shadow-edge transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:text-fg-muted disabled:shadow-none",
+    weekday: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary group-aria-checked:text-on-accent group-disabled:text-fg-muted",
+    number: "text-lg font-semibold tabular-nums leading-none",
+    // Today: the node of the marks above the number; a marked day: a dot under it.
+    node: "absolute top-1.5 h-1 w-1 rotate-45 rounded-[1px] bg-accent group-aria-checked:bg-on-accent",
+    mark: "h-1.5 w-1.5 rounded-full bg-fg-secondary group-aria-checked:bg-on-accent",
+    noMark: "h-1.5 w-1.5"
+  }
+});
+var dayStripLabels = { previous: "Earlier days", next: "Later days", marked: "has events" };
+function DayStrip({ label, locale, value: valueProp, defaultValue = null, onValueChange, start, days = 14, isDateDisabled, isDateMarked, today: todayProp, showHeader = true, labels: given, className }) {
+  const labels = { ...dayStripLabels, ...given };
+  const s = dayStrip();
+  const today = todayProp ?? toIsoDate(/* @__PURE__ */ new Date());
+  const first = start ?? today;
+  const list = React6.useMemo(() => Array.from({ length: days }, (_, i) => addDays(first, i)), [first, days]);
+  const [value, setValue] = useControllable(valueProp, defaultValue, (v) => v && onValueChange?.(v));
+  const enabled = list.filter((d) => !isDateDisabled?.(d));
+  const tabStop = value && enabled.includes(value) ? value : enabled[0];
+  const track = React6.useRef(null);
+  const reduce = usePrefersReducedMotion();
+  const weekday = getDateTimeFormat3(locale, { weekday: "short" });
+  const monthTitle = getDateTimeFormat3(locale, { month: "long", year: "numeric" }).format(toLocalDate(value ?? first));
+  const reveal = (iso, focus) => {
+    const el = track.current?.querySelector(`[data-date="${iso}"]`);
+    if (!el) return;
+    if (focus) el.focus({ preventScroll: true });
+    el.scrollIntoView?.({ block: "nearest", inline: "nearest", behavior: reduce ? "auto" : "smooth" });
+  };
+  React6.useEffect(() => {
+    if (value) track.current?.querySelector(`[data-date="${value}"]`)?.scrollIntoView?.({ block: "nearest", inline: "center" });
+  }, []);
+  const onKeyDown = (event) => {
+    const i = enabled.indexOf(tabStop ?? "");
+    const moves = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: enabled.length - 1 };
+    const to = moves[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    const next = enabled[Math.min(enabled.length - 1, Math.max(0, to))];
+    if (!next) return;
+    setValue(next);
+    reveal(next, true);
+  };
+  const page = (by) => {
+    const el = track.current;
+    if (!el) return;
+    el.scrollBy?.({ left: by * el.clientWidth * 0.8, behavior: reduce ? "auto" : "smooth" });
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: s.root({ className }), children: [
+    showHeader ? /* @__PURE__ */ jsxs6("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx7("span", { className: s.title(), "aria-hidden": true, children: monthTitle }),
+      /* @__PURE__ */ jsxs6("span", { className: s.navs(), children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: s.nav(), "aria-label": labels.previous, onClick: () => page(-1), children: /* @__PURE__ */ jsx7(ChevronGlyph, { direction: "left", className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: s.nav(), "aria-label": labels.next, onClick: () => page(1), children: /* @__PURE__ */ jsx7(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx7("div", { ref: track, role: "radiogroup", "aria-label": label, className: s.track(), onKeyDown, children: list.map((iso) => {
+      const marked = Boolean(isDateMarked?.(iso));
+      const name = formatDate3(toLocalDate(iso), { locale, style: "long" });
+      return /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "data-date": iso,
+          "aria-checked": iso === value,
+          "aria-current": iso === today ? "date" : void 0,
+          "aria-label": marked ? `${name}, ${labels.marked}` : name,
+          tabIndex: iso === tabStop ? 0 : -1,
+          disabled: Boolean(isDateDisabled?.(iso)),
+          className: s.day({ className: "group" }),
+          onClick: () => setValue(iso),
+          children: [
+            iso === today ? /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: s.node() }) : null,
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: s.weekday(), children: weekday.format(toLocalDate(iso)).replace(/\.$/, "") }),
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: s.number(), children: Number(iso.slice(8)) }),
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: marked ? s.mark() : s.noMark() })
+          ]
+        },
+        iso
+      );
+    }) })
+  ] });
+}
+
+// src/date-picker/time-picker.tsx
+import * as React7 from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var timePicker = tv({
+  slots: {
+    slots: "grid grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] gap-2",
+    slot: "h-11 rounded-xl border border-border-default bg-surface-2 bg-sheen px-3 text-sm font-semibold tabular-nums text-fg inset-shadow-edge transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:font-normal disabled:text-fg-muted disabled:line-through disabled:shadow-none",
+    group: "flex flex-col gap-2",
+    heading: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary"
+  }
+});
+var timePickerLabels = { hours: "Hours", minutes: "Minutes", period: "AM/PM" };
+function TimePicker(props) {
+  return props.variant === "slots" ? /* @__PURE__ */ jsx8(TimeSlots, { ...props }) : /* @__PURE__ */ jsx8(TimeWheels, { ...props });
+}
+function TimeWheels({ label, locale, value: valueProp, defaultValue = null, onValueChange, disabled, className, minuteStep = 5, hour12, labels: given }) {
+  const labels = { ...timePickerLabels, ...given };
+  const [value, setValue] = useControllable(valueProp, defaultValue, (v) => v && onValueChange?.(v));
+  const twelve = hour12 ?? uses12Hours(locale);
+  const total = timeToMinutes(value) ?? 9 * 60;
+  const h24 = Math.floor(total / 60);
+  const minute = total % 60;
+  const pm = h24 >= 12;
+  const two = (n) => String(n).padStart(2, "0");
+  const number = React7.useMemo(() => new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false }), [locale]);
+  const hours = twelve ? Array.from({ length: 12 }, (_, i) => ({ value: String(i === 0 ? 12 : i), label: String(i === 0 ? 12 : i) })).sort((a, b) => Number(a.value) % 12 - Number(b.value) % 12) : Array.from({ length: 24 }, (_, i) => ({ value: String(i), label: number.format(i) }));
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({ value: String(i * minuteStep), label: number.format(i * minuteStep) }));
+  const shownMinute = String(Math.min(60 - minuteStep, Math.round(minute / minuteStep) * minuteStep));
+  const [am, pmLabel] = dayPeriods(locale);
+  const set = (h, m) => setValue(`${two(h)}:${two(m)}`);
+  return /* @__PURE__ */ jsxs7(WheelPicker, { label: `${label}, ${value ? formatTime(locale, value) : ""}`.replace(/, $/, ""), className, children: [
+    /* @__PURE__ */ jsx8(
+      Wheel,
+      {
+        label: labels.hours,
+        options: hours,
+        disabled,
+        value: twelve ? String(h24 % 12 === 0 ? 12 : h24 % 12) : String(h24),
+        onValueChange: (v) => set(twelve ? Number(v) % 12 + (pm ? 12 : 0) : Number(v), minute)
+      }
+    ),
+    /* @__PURE__ */ jsx8(WheelDivider, { children: ":" }),
+    /* @__PURE__ */ jsx8(Wheel, { label: labels.minutes, options: minutes, disabled, value: shownMinute, onValueChange: (v) => set(h24, Number(v)) }),
+    twelve ? /* @__PURE__ */ jsx8(
+      Wheel,
+      {
+        label: labels.period,
+        options: [
+          { value: "am", label: am },
+          { value: "pm", label: pmLabel }
+        ],
+        disabled,
+        value: pm ? "pm" : "am",
+        onValueChange: (v) => set(h24 % 12 + (v === "pm" ? 12 : 0), minute)
+      }
+    ) : null
+  ] });
+}
+function TimeSlots({ label, locale, value: valueProp, defaultValue = null, onValueChange, disabled, className, slots, isTimeDisabled, groupLabels }) {
+  const s = timePicker();
+  const [value, setValue] = useControllable(valueProp, defaultValue, (v) => v && onValueChange?.(v));
+  const enabled = slots.filter((t) => !disabled && !isTimeDisabled?.(t));
+  const tabStop = value && enabled.includes(value) ? value : enabled[0];
+  const root = React7.useRef(null);
+  const onKeyDown = (event) => {
+    const i = enabled.indexOf(tabStop ?? "");
+    const moves = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: enabled.length - 1 };
+    const to = moves[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    const next = enabled[(to + enabled.length) % enabled.length];
+    if (!next) return;
+    setValue(next);
+    root.current?.querySelector(`[data-time="${next}"]`)?.focus();
+  };
+  const button = (t) => {
+    const off = disabled || Boolean(isTimeDisabled?.(t));
+    return /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "data-time": t,
+        "aria-checked": t === value,
+        tabIndex: t === tabStop ? 0 : -1,
+        disabled: off,
+        className: s.slot(),
+        onClick: () => setValue(t),
+        children: formatTime(locale, t)
+      },
+      t
+    );
+  };
+  const part = (t) => {
+    const m = timeToMinutes(t) ?? 0;
+    return m < 12 * 60 ? "morning" : m < 18 * 60 ? "afternoon" : "evening";
+  };
+  return /* @__PURE__ */ jsx8("div", { ref: root, role: "radiogroup", "aria-label": label, "aria-disabled": disabled || void 0, className, onKeyDown, children: groupLabels ? /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: ["morning", "afternoon", "evening"].map((p) => {
+    const inPart = slots.filter((t) => part(t) === p);
+    if (!inPart.length) return null;
+    return /* @__PURE__ */ jsxs7("div", { role: "group", "aria-label": groupLabels[p], className: s.group(), children: [
+      /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: s.heading(), children: groupLabels[p] }),
+      /* @__PURE__ */ jsx8("div", { className: s.slots(), children: inPart.map(button) })
+    ] }, p);
+  }) }) : /* @__PURE__ */ jsx8("div", { className: s.slots(), children: slots.map(button) }) });
+}
 export {
   Calendar,
+  DateField,
   DatePicker,
   DateRangePicker,
+  DateWheel,
+  DayStrip,
+  MonthPicker,
+  TimePicker,
+  Wheel,
+  WheelDivider,
+  WheelPicker,
   addDays,
   addMonths,
+  ageOn,
   calendar,
   calendarLabels,
+  composeDate,
+  dateField,
+  dateFieldLabels,
+  datePartsOrder,
   datePicker,
   datePickerLabels,
+  dayPeriods,
+  dayStrip,
+  dayStripLabels,
+  daysInMonth,
+  formatTime,
+  isRealDate,
+  isoOf,
+  latestBirthDate,
+  minutesToTime,
+  monthNames,
+  monthPicker,
+  monthPickerLabels,
+  timePicker,
+  timePickerLabels,
+  timeSlots,
+  timeToMinutes,
   toIsoDate,
   toLocalDate,
-  weekStartOf
+  todayIso,
+  uses12Hours,
+  weekStartOf,
+  wheel,
+  yearRange
 };
 //# sourceMappingURL=date-picker.js.map