@axenstudio/axen-form 0.1.10 → 0.1.12

package/dist/fields/DateField/DateField.cjs

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const dateUtils = require("../../core/dateUtils.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
 const iconUtils = require("../iconUtils.cjs");
+const DatePicker = require("./DatePicker.cjs");
 function DateField({
   name,
   value,
@@ -20,8 +22,11 @@ function DateField({
   min,
   max,
   locale,
-  icon
+  icon,
+  form
 }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const wrapperRef = react.useRef(null);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
   const resolvedIcon = iconUtils.resolveFieldIcon(icon, "date");
@@ -30,6 +35,31 @@ function DateField({
   const handleChange = (e) => {
     onChange(e);
   };
+  const openPicker = react.useCallback(() => {
+    if (!disabled && !readOnly) setIsOpen(true);
+  }, [disabled, readOnly]);
+  const handleApply = react.useCallback(
+    (isoDate) => {
+      form.setFieldValue(name, isoDate);
+      setIsOpen(false);
+    },
+    [form, name]
+  );
+  const handleClose = react.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleBlur = react.useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
   const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -38,7 +68,7 @@ function DateField({
       name,
       value: dateValue,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
@@ -48,7 +78,7 @@ function DateField({
       className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
@@ -59,9 +89,31 @@ function DateField({
       }
     ),
     resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: fieldBase_module.default.fieldIconClickable,
+          onClick: openPicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open date picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
       inputEl
     ] }) : inputEl,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker.DatePicker,
+      {
+        value: dateValue,
+        min,
+        max,
+        pickerId: `${name}-datepicker`,
+        onApply: handleApply,
+        onClose: handleClose
+      }
+    ),
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",

package/dist/fields/DateField/DateField.d.ts

@@ -1,5 +1,5 @@
 import { FieldComponentProps } from '../../types';
-export declare function DateField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, icon, }: Readonly<FieldComponentProps & {
+export declare function DateField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, icon, form, }: Readonly<FieldComponentProps & {
     min?: string;
     max?: string;
     locale?: string;

package/dist/fields/DateField/DateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAoEjF"}
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAwHjF"}

package/dist/fields/DateField/DateField.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
 import { formatDateLocale, getDefaultLocale } from "../../core/dateUtils.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
 import { resolveFieldIcon } from "../iconUtils.js";
+import { DatePicker } from "./DatePicker.js";
 function DateField({
   name,
   value,
@@ -18,8 +20,11 @@ function DateField({
   min,
   max,
   locale,
-  icon
+  icon,
+  form
 }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef(null);
   const aria = ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? getDefaultLocale();
   const resolvedIcon = resolveFieldIcon(icon, "date");
@@ -28,6 +33,31 @@ function DateField({
   const handleChange = (e) => {
     onChange(e);
   };
+  const openPicker = useCallback(() => {
+    if (!disabled && !readOnly) setIsOpen(true);
+  }, [disabled, readOnly]);
+  const handleApply = useCallback(
+    (isoDate) => {
+      form.setFieldValue(name, isoDate);
+      setIsOpen(false);
+    },
+    [form, name]
+  );
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleBlur = useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
   const inputEl = /* @__PURE__ */ jsx(
     "input",
     {
@@ -36,7 +66,7 @@ function DateField({
       name,
       value: dateValue,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
@@ -46,7 +76,7 @@ function DateField({
       className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
@@ -57,9 +87,31 @@ function DateField({
       }
     ),
     resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
-      /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.fieldIconClickable,
+          onClick: openPicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open date picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
       inputEl
     ] }) : inputEl,
+    isOpen && /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value: dateValue,
+        min,
+        max,
+        pickerId: `${name}-datepicker`,
+        onApply: handleApply,
+        onClose: handleClose
+      }
+    ),
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",

package/dist/fields/DateField/DatePicker.cjs

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const DatePicker_module = require("./DatePicker.module.css.cjs");
+const WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function toISO(year, month, day) {
+  return `${year}-${pad2(month + 1)}-${pad2(day)}`;
+}
+function parseISO(iso) {
+  if (!iso) return null;
+  const parts = iso.split("-").map(Number);
+  if (parts.length < 3 || parts.some((p) => !Number.isFinite(p))) return null;
+  return { year: parts[0], month: parts[1] - 1, day: parts[2] };
+}
+function daysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function startDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.year === b.year && a.month === b.month && a.day === b.day;
+}
+function buildCalendarGrid(year, month) {
+  const cells = [];
+  const firstDow = startDayOfWeek(year, month);
+  const totalDays = daysInMonth(year, month);
+  if (firstDow > 0) {
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevDays = daysInMonth(prevYear, prevMonth);
+    for (let i = firstDow - 1; i >= 0; i--) {
+      cells.push({ year: prevYear, month: prevMonth, day: prevDays - i, outside: true });
+    }
+  }
+  for (let d = 1; d <= totalDays; d++) {
+    cells.push({ year, month, day: d, outside: false });
+  }
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDay = 1;
+  while (cells.length < 42) {
+    cells.push({ year: nextYear, month: nextMonth, day: nextDay++, outside: true });
+  }
+  return cells;
+}
+function DatePicker({
+  value,
+  min,
+  max,
+  pickerId,
+  onApply,
+  onClose
+}) {
+  const parsed = parseISO(value);
+  const today = react.useMemo(() => {
+    const d = /* @__PURE__ */ new Date();
+    return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+  }, []);
+  const [viewYear, setViewYear] = react.useState((parsed == null ? void 0 : parsed.year) ?? today.year);
+  const [viewMonth, setViewMonth] = react.useState((parsed == null ? void 0 : parsed.month) ?? today.month);
+  const minDate = react.useMemo(() => parseISO(min ?? ""), [min]);
+  const maxDate = react.useMemo(() => parseISO(max ?? ""), [max]);
+  const grid = react.useMemo(() => buildCalendarGrid(viewYear, viewMonth), [viewYear, viewMonth]);
+  const isDisabled = react.useCallback(
+    (cell) => {
+      const d = new Date(cell.year, cell.month, cell.day);
+      if (minDate) {
+        const minD = new Date(minDate.year, minDate.month, minDate.day);
+        if (d < minD) return true;
+      }
+      if (maxDate) {
+        const maxD = new Date(maxDate.year, maxDate.month, maxDate.day);
+        if (d > maxD) return true;
+      }
+      return false;
+    },
+    [minDate, maxDate]
+  );
+  const prevMonth = react.useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 0) {
+        setViewYear((y) => y - 1);
+        return 11;
+      }
+      return m - 1;
+    });
+  }, []);
+  const nextMonth = react.useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 11) {
+        setViewYear((y) => y + 1);
+        return 0;
+      }
+      return m + 1;
+    });
+  }, []);
+  const handleDayClick = react.useCallback(
+    (cell) => {
+      if (isDisabled(cell)) return;
+      onApply(toISO(cell.year, cell.month, cell.day));
+    },
+    [isDisabled, onApply]
+  );
+  const handleToday = react.useCallback(() => {
+    onApply(toISO(today.year, today.month, today.day));
+  }, [today, onApply]);
+  const handleClear = react.useCallback(() => {
+    onApply("");
+  }, [onApply]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: DatePicker_module.default.overlay, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePicker_module.default.picker, id: pickerId, "aria-label": "Date picker", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePicker_module.default.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: DatePicker_module.default.navBtn,
+            onClick: prevMonth,
+            "aria-label": "Previous month",
+            children: "‹"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: DatePicker_module.default.headerTitle, children: [
+          MONTH_NAMES[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: DatePicker_module.default.navBtn, onClick: nextMonth, "aria-label": "Next month", children: "›" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: DatePicker_module.default.weekdays, children: WEEKDAY_LABELS.map((wd) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: DatePicker_module.default.weekday, children: wd }, wd)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: DatePicker_module.default.grid, role: "radiogroup", "aria-label": "Calendar days", children: grid.map((cell) => {
+        const iso = toISO(cell.year, cell.month, cell.day);
+        const isSelected = parsed != null && isSameDay(cell, parsed);
+        const isToday = isSameDay(cell, today);
+        const dow = new Date(cell.year, cell.month, cell.day).getDay();
+        const isWeekend = dow === 0 || dow === 6;
+        const disabled = isDisabled(cell);
+        const cls = [
+          DatePicker_module.default.day,
+          cell.outside ? DatePicker_module.default.dayOutside : "",
+          isToday ? DatePicker_module.default.dayToday : "",
+          isSelected ? DatePicker_module.default.daySelected : "",
+          isWeekend && !isSelected ? DatePicker_module.default.dayWeekend : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            "aria-label": iso,
+            className: cls,
+            disabled,
+            onClick: () => handleDayClick(cell),
+            children: cell.day
+          },
+          iso + (cell.outside ? "-out" : "")
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DatePicker_module.default.footer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: DatePicker_module.default.footerBtn, onClick: handleClear, children: "Clear" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: DatePicker_module.default.footerBtn, onClick: handleToday, children: "Today" })
+      ] })
+    ] })
+  ] });
+}
+exports.DatePicker = DatePicker;

package/dist/fields/DateField/DatePicker.d.ts

@@ -0,0 +1,11 @@
+interface DatePickerProps {
+    value: string;
+    min?: string;
+    max?: string;
+    pickerId: string;
+    onApply: (isoDate: string) => void;
+    onClose: () => void;
+}
+export declare function DatePicker({ value, min, max, pickerId, onApply, onClose, }: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/fields/DateField/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DatePicker.tsx"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsFD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA4J3B"}

package/dist/fields/DateField/DatePicker.js

@@ -0,0 +1,194 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import s from "./DatePicker.module.css.js";
+const WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function toISO(year, month, day) {
+  return `${year}-${pad2(month + 1)}-${pad2(day)}`;
+}
+function parseISO(iso) {
+  if (!iso) return null;
+  const parts = iso.split("-").map(Number);
+  if (parts.length < 3 || parts.some((p) => !Number.isFinite(p))) return null;
+  return { year: parts[0], month: parts[1] - 1, day: parts[2] };
+}
+function daysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function startDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.year === b.year && a.month === b.month && a.day === b.day;
+}
+function buildCalendarGrid(year, month) {
+  const cells = [];
+  const firstDow = startDayOfWeek(year, month);
+  const totalDays = daysInMonth(year, month);
+  if (firstDow > 0) {
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevDays = daysInMonth(prevYear, prevMonth);
+    for (let i = firstDow - 1; i >= 0; i--) {
+      cells.push({ year: prevYear, month: prevMonth, day: prevDays - i, outside: true });
+    }
+  }
+  for (let d = 1; d <= totalDays; d++) {
+    cells.push({ year, month, day: d, outside: false });
+  }
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDay = 1;
+  while (cells.length < 42) {
+    cells.push({ year: nextYear, month: nextMonth, day: nextDay++, outside: true });
+  }
+  return cells;
+}
+function DatePicker({
+  value,
+  min,
+  max,
+  pickerId,
+  onApply,
+  onClose
+}) {
+  const parsed = parseISO(value);
+  const today = useMemo(() => {
+    const d = /* @__PURE__ */ new Date();
+    return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+  }, []);
+  const [viewYear, setViewYear] = useState((parsed == null ? void 0 : parsed.year) ?? today.year);
+  const [viewMonth, setViewMonth] = useState((parsed == null ? void 0 : parsed.month) ?? today.month);
+  const minDate = useMemo(() => parseISO(min ?? ""), [min]);
+  const maxDate = useMemo(() => parseISO(max ?? ""), [max]);
+  const grid = useMemo(() => buildCalendarGrid(viewYear, viewMonth), [viewYear, viewMonth]);
+  const isDisabled = useCallback(
+    (cell) => {
+      const d = new Date(cell.year, cell.month, cell.day);
+      if (minDate) {
+        const minD = new Date(minDate.year, minDate.month, minDate.day);
+        if (d < minD) return true;
+      }
+      if (maxDate) {
+        const maxD = new Date(maxDate.year, maxDate.month, maxDate.day);
+        if (d > maxD) return true;
+      }
+      return false;
+    },
+    [minDate, maxDate]
+  );
+  const prevMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 0) {
+        setViewYear((y) => y - 1);
+        return 11;
+      }
+      return m - 1;
+    });
+  }, []);
+  const nextMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 11) {
+        setViewYear((y) => y + 1);
+        return 0;
+      }
+      return m + 1;
+    });
+  }, []);
+  const handleDayClick = useCallback(
+    (cell) => {
+      if (isDisabled(cell)) return;
+      onApply(toISO(cell.year, cell.month, cell.day));
+    },
+    [isDisabled, onApply]
+  );
+  const handleToday = useCallback(() => {
+    onApply(toISO(today.year, today.month, today.day));
+  }, [today, onApply]);
+  const handleClear = useCallback(() => {
+    onApply("");
+  }, [onApply]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: s.overlay, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: s.picker, id: pickerId, "aria-label": "Date picker", children: [
+      /* @__PURE__ */ jsxs("div", { className: s.header, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: s.navBtn,
+            onClick: prevMonth,
+            "aria-label": "Previous month",
+            children: "‹"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: s.headerTitle, children: [
+          MONTH_NAMES[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: s.navBtn, onClick: nextMonth, "aria-label": "Next month", children: "›" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: s.weekdays, children: WEEKDAY_LABELS.map((wd) => /* @__PURE__ */ jsx("div", { className: s.weekday, children: wd }, wd)) }),
+      /* @__PURE__ */ jsx("div", { className: s.grid, role: "radiogroup", "aria-label": "Calendar days", children: grid.map((cell) => {
+        const iso = toISO(cell.year, cell.month, cell.day);
+        const isSelected = parsed != null && isSameDay(cell, parsed);
+        const isToday = isSameDay(cell, today);
+        const dow = new Date(cell.year, cell.month, cell.day).getDay();
+        const isWeekend = dow === 0 || dow === 6;
+        const disabled = isDisabled(cell);
+        const cls = [
+          s.day,
+          cell.outside ? s.dayOutside : "",
+          isToday ? s.dayToday : "",
+          isSelected ? s.daySelected : "",
+          isWeekend && !isSelected ? s.dayWeekend : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            "aria-label": iso,
+            className: cls,
+            disabled,
+            onClick: () => handleDayClick(cell),
+            children: cell.day
+          },
+          iso + (cell.outside ? "-out" : "")
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: s.footerBtn, onClick: handleClear, children: "Clear" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: s.footerBtn, onClick: handleToday, children: "Today" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DatePicker
+};