@axenstudio/axen-form 0.1.10 → 0.1.11

package/dist/fields/SwitchField/SwitchField.module.css.js

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._switchLabel_1itxk_1 {\n  cursor: pointer;\n}\n\n._switchTrack_1itxk_5 {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  background-color: var(--axen-color-border);\n  border-radius: var(--axen-border-radius-pill);\n  transition: background-color var(--axen-transition-fast);\n  flex-shrink: 0;\n}\n\n._switchInput_1itxk_17 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n._switchInput_1itxk_17:checked + ._switchThumb_1itxk_27 {\n  transform: translateX(20px);\n}\n\n._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {\n  transform: translateX(20px);\n}\n\n._switchTrack_1itxk_5:has(._switchInput_1itxk_17:checked) {\n  background-color: var(--axen-color-primary);\n}\n\n._switchInput_1itxk_17:focus-visible ~ ._switchThumb_1itxk_27 {\n  box-shadow: var(--axen-shadow-focus);\n}\n\n._switchInput_1itxk_17:disabled {\n  cursor: not-allowed;\n}\n\n._switchTrack_1itxk_5:has(._switchInput_1itxk_17:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n._switchThumb_1itxk_27 {\n  position: absolute;\n  left: 2px;\n  width: 20px;\n  height: 20px;\n  background-color: var(--axen-color-bg);\n  border-radius: 50%;\n  box-shadow: var(--axen-shadow-sm);\n  transition: transform var(--axen-transition-fast);\n  pointer-events: none;\n}\n\n/* Mobile: larger touch target */\n@media (max-width: 599px) {\n  ._switchTrack_1itxk_5 {\n    width: 52px;\n    height: 28px;\n  }\n\n  ._switchThumb_1itxk_27 {\n    width: 24px;\n    height: 24px;\n  }\n\n  ._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {\n    transform: translateX(24px);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const switchLabel = "_switchLabel_1itxk_1";
 const switchTrack = "_switchTrack_1itxk_5";
 const switchInput = "_switchInput_1itxk_17";

package/dist/fields/TimeField/TimeField.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 TimePicker = require("./TimePicker.cjs");
 function TimeField({
   name,
   value,
@@ -19,16 +21,46 @@ function TimeField({
   required,
   locale,
   ampm,
-  icon
+  icon,
+  form,
+  showSeconds
 }) {
+  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, "time");
+  const resolvedShowSeconds = showSeconds === true;
   const timeValue = typeof value === "string" ? value : "";
-  const displayText = timeValue ? dateUtils.formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
+  const displayText = timeValue ? dateUtils.formatTimeLocale(timeValue, resolvedLocale, ampm, resolvedShowSeconds) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const openPicker = react.useCallback(() => {
+    if (!disabled && !readOnly) setIsOpen(true);
+  }, [disabled, readOnly]);
+  const handleApply = react.useCallback(
+    (isoTime) => {
+      form.setFieldValue(name, isoTime);
+      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",
     {
@@ -36,8 +68,9 @@ function TimeField({
       type: "time",
       name,
       value: timeValue,
+      step: resolvedShowSeconds ? 1 : 60,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
@@ -45,7 +78,7 @@ function TimeField({
       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",
       {
@@ -56,9 +89,31 @@ function TimeField({
       }
     ),
     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 time picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
       inputEl
     ] }) : inputEl,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      TimePicker.TimePicker,
+      {
+        value: timeValue,
+        showSeconds: resolvedShowSeconds,
+        ampm: ampm === true,
+        pickerId: `${name}-timepicker`,
+        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/TimeField/TimeField.d.ts

@@ -1,6 +1,7 @@
 import { FieldComponentProps } from '../../types';
-export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, icon, }: Readonly<FieldComponentProps & {
+export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, icon, form, showSeconds, }: Readonly<FieldComponentProps & {
     locale?: string;
     ampm?: boolean;
+    showSeconds?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TimeField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.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,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CA+DrE"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.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,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAuH5F"}

package/dist/fields/TimeField/TimeField.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
 import { formatTimeLocale, 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 { TimePicker } from "./TimePicker.js";
 function TimeField({
   name,
   value,
@@ -17,16 +19,46 @@ function TimeField({
   required,
   locale,
   ampm,
-  icon
+  icon,
+  form,
+  showSeconds
 }) {
+  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, "time");
+  const resolvedShowSeconds = showSeconds === true;
   const timeValue = typeof value === "string" ? value : "";
-  const displayText = timeValue ? formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
+  const displayText = timeValue ? formatTimeLocale(timeValue, resolvedLocale, ampm, resolvedShowSeconds) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const openPicker = useCallback(() => {
+    if (!disabled && !readOnly) setIsOpen(true);
+  }, [disabled, readOnly]);
+  const handleApply = useCallback(
+    (isoTime) => {
+      form.setFieldValue(name, isoTime);
+      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",
     {
@@ -34,8 +66,9 @@ function TimeField({
       type: "time",
       name,
       value: timeValue,
+      step: resolvedShowSeconds ? 1 : 60,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
@@ -43,7 +76,7 @@ function TimeField({
       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",
       {
@@ -54,9 +87,31 @@ function TimeField({
       }
     ),
     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 time picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
       inputEl
     ] }) : inputEl,
+    isOpen && /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        value: timeValue,
+        showSeconds: resolvedShowSeconds,
+        ampm: ampm === true,
+        pickerId: `${name}-timepicker`,
+        onApply: handleApply,
+        onClose: handleClose
+      }
+    ),
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",

package/dist/fields/TimeField/TimePicker.cjs

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const TimePicker_module = require("./TimePicker.module.css.cjs");
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function parseTime(iso) {
+  if (!iso) {
+    const now = /* @__PURE__ */ new Date();
+    return { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() };
+  }
+  const parts = iso.split(":").map(Number);
+  return {
+    h: Number.isFinite(parts[0]) ? parts[0] : 0,
+    m: Number.isFinite(parts[1]) ? parts[1] : 0,
+    s: Number.isFinite(parts[2]) ? parts[2] : 0
+  };
+}
+function to12h(h24) {
+  const period = h24 >= 12 ? "PM" : "AM";
+  const h12 = h24 % 12 || 12;
+  return { h12, period };
+}
+function to24h(h12, period) {
+  if (period === "AM") return h12 === 12 ? 0 : h12;
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function range(count) {
+  return Array.from({ length: count }, (_, i) => i);
+}
+function Column({ label, items, selected, onSelect, ariaLabel }) {
+  const columnRef = react.useRef(null);
+  const selectedRef = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+  }, [selected]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.columnLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.column, ref: columnRef, role: "radiogroup", "aria-label": ariaLabel, children: items.map((n) => {
+      const isSelected = n === selected;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref: isSelected ? selectedRef : void 0,
+          type: "button",
+          role: "radio",
+          "aria-checked": isSelected,
+          className: `${TimePicker_module.default.cell} ${isSelected ? TimePicker_module.default.cellSelected : ""}`,
+          onClick: () => onSelect(n),
+          children: pad2(n)
+        },
+        n
+      );
+    }) })
+  ] });
+}
+function TimePicker({
+  value,
+  showSeconds,
+  ampm,
+  pickerId,
+  onApply,
+  onClose
+}) {
+  const initial = parseTime(value);
+  const [hour24, setHour24] = react.useState(initial.h);
+  const [minute, setMinute] = react.useState(initial.m);
+  const [second, setSecond] = react.useState(initial.s);
+  const [period, setPeriod] = react.useState(() => to12h(initial.h).period);
+  const pickerRef = react.useRef(null);
+  const displayHour = ampm ? to12h(hour24).h12 : hour24;
+  const hourItems = ampm ? range(12).map((i) => i + 1) : range(24);
+  const handleHourSelect = react.useCallback(
+    (h) => {
+      if (ampm) {
+        setHour24(to24h(h, period));
+      } else {
+        setHour24(h);
+      }
+    },
+    [ampm, period]
+  );
+  const handlePeriodToggle = react.useCallback(
+    (p) => {
+      setPeriod(p);
+      const h12 = to12h(hour24).h12;
+      setHour24(to24h(h12, p));
+    },
+    [hour24]
+  );
+  const handleNow = react.useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    setHour24(now.getHours());
+    setMinute(now.getMinutes());
+    setSecond(now.getSeconds());
+    setPeriod(now.getHours() >= 12 ? "PM" : "AM");
+  }, []);
+  const handleApply = react.useCallback(() => {
+    const parts = [pad2(hour24), pad2(minute)];
+    if (showSeconds) parts.push(pad2(second));
+    onApply(parts.join(":"));
+  }, [hour24, minute, second, showSeconds, 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: TimePicker_module.default.overlay, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TimePicker_module.default.picker, ref: pickerRef, id: pickerId, "aria-label": "Time picker", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TimePicker_module.default.columns, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Column,
+          {
+            label: "HH",
+            items: hourItems,
+            selected: displayHour,
+            onSelect: handleHourSelect,
+            ariaLabel: "Hours"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.separator, "aria-hidden": "true", children: ":" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Column,
+          {
+            label: "MM",
+            items: range(60),
+            selected: minute,
+            onSelect: setMinute,
+            ariaLabel: "Minutes"
+          }
+        ),
+        showSeconds && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.separator, "aria-hidden": "true", children: ":" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Column,
+            {
+              label: "SS",
+              items: range(60),
+              selected: second,
+              onSelect: setSecond,
+              ariaLabel: "Seconds"
+            }
+          )
+        ] }),
+        ampm && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.columnLabel, children: "AP" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: TimePicker_module.default.column, role: "radiogroup", "aria-label": "AM/PM", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": p === period,
+              className: `${TimePicker_module.default.cell} ${p === period ? TimePicker_module.default.cellSelected : ""}`,
+              onClick: () => handlePeriodToggle(p),
+              children: p
+            },
+            p
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TimePicker_module.default.footer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: TimePicker_module.default.footerBtn, onClick: handleNow, children: "Now" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: `${TimePicker_module.default.footerBtn} ${TimePicker_module.default.footerBtnPrimary}`,
+            onClick: handleApply,
+            children: "Apply"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+exports.TimePicker = TimePicker;

package/dist/fields/TimeField/TimePicker.d.ts

@@ -0,0 +1,11 @@
+interface TimePickerProps {
+    value: string;
+    showSeconds: boolean;
+    ampm: boolean;
+    pickerId: string;
+    onApply: (isoTime: string) => void;
+    onClose: () => void;
+}
+export declare function TimePicker({ value, showSeconds, ampm, pickerId, onApply, onClose, }: Readonly<TimePickerProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TimePicker.d.ts.map

package/dist/fields/TimeField/TimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimePicker.tsx"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAmFD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAiI3B"}

package/dist/fields/TimeField/TimePicker.js

@@ -0,0 +1,182 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import s from "./TimePicker.module.css.js";
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function parseTime(iso) {
+  if (!iso) {
+    const now = /* @__PURE__ */ new Date();
+    return { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() };
+  }
+  const parts = iso.split(":").map(Number);
+  return {
+    h: Number.isFinite(parts[0]) ? parts[0] : 0,
+    m: Number.isFinite(parts[1]) ? parts[1] : 0,
+    s: Number.isFinite(parts[2]) ? parts[2] : 0
+  };
+}
+function to12h(h24) {
+  const period = h24 >= 12 ? "PM" : "AM";
+  const h12 = h24 % 12 || 12;
+  return { h12, period };
+}
+function to24h(h12, period) {
+  if (period === "AM") return h12 === 12 ? 0 : h12;
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function range(count) {
+  return Array.from({ length: count }, (_, i) => i);
+}
+function Column({ label, items, selected, onSelect, ariaLabel }) {
+  const columnRef = useRef(null);
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+  }, [selected]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: s.columnLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { className: s.column, ref: columnRef, role: "radiogroup", "aria-label": ariaLabel, children: items.map((n) => {
+      const isSelected = n === selected;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: isSelected ? selectedRef : void 0,
+          type: "button",
+          role: "radio",
+          "aria-checked": isSelected,
+          className: `${s.cell} ${isSelected ? s.cellSelected : ""}`,
+          onClick: () => onSelect(n),
+          children: pad2(n)
+        },
+        n
+      );
+    }) })
+  ] });
+}
+function TimePicker({
+  value,
+  showSeconds,
+  ampm,
+  pickerId,
+  onApply,
+  onClose
+}) {
+  const initial = parseTime(value);
+  const [hour24, setHour24] = useState(initial.h);
+  const [minute, setMinute] = useState(initial.m);
+  const [second, setSecond] = useState(initial.s);
+  const [period, setPeriod] = useState(() => to12h(initial.h).period);
+  const pickerRef = useRef(null);
+  const displayHour = ampm ? to12h(hour24).h12 : hour24;
+  const hourItems = ampm ? range(12).map((i) => i + 1) : range(24);
+  const handleHourSelect = useCallback(
+    (h) => {
+      if (ampm) {
+        setHour24(to24h(h, period));
+      } else {
+        setHour24(h);
+      }
+    },
+    [ampm, period]
+  );
+  const handlePeriodToggle = useCallback(
+    (p) => {
+      setPeriod(p);
+      const h12 = to12h(hour24).h12;
+      setHour24(to24h(h12, p));
+    },
+    [hour24]
+  );
+  const handleNow = useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    setHour24(now.getHours());
+    setMinute(now.getMinutes());
+    setSecond(now.getSeconds());
+    setPeriod(now.getHours() >= 12 ? "PM" : "AM");
+  }, []);
+  const handleApply = useCallback(() => {
+    const parts = [pad2(hour24), pad2(minute)];
+    if (showSeconds) parts.push(pad2(second));
+    onApply(parts.join(":"));
+  }, [hour24, minute, second, showSeconds, 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, ref: pickerRef, id: pickerId, "aria-label": "Time picker", children: [
+      /* @__PURE__ */ jsxs("div", { className: s.columns, children: [
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            label: "HH",
+            items: hourItems,
+            selected: displayHour,
+            onSelect: handleHourSelect,
+            ariaLabel: "Hours"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: s.separator, "aria-hidden": "true", children: ":" }),
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            label: "MM",
+            items: range(60),
+            selected: minute,
+            onSelect: setMinute,
+            ariaLabel: "Minutes"
+          }
+        ),
+        showSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: s.separator, "aria-hidden": "true", children: ":" }),
+          /* @__PURE__ */ jsx(
+            Column,
+            {
+              label: "SS",
+              items: range(60),
+              selected: second,
+              onSelect: setSecond,
+              ariaLabel: "Seconds"
+            }
+          )
+        ] }),
+        ampm && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: s.columnLabel, children: "AP" }),
+          /* @__PURE__ */ jsx("div", { className: s.column, role: "radiogroup", "aria-label": "AM/PM", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": p === period,
+              className: `${s.cell} ${p === period ? s.cellSelected : ""}`,
+              onClick: () => handlePeriodToggle(p),
+              children: p
+            },
+            p
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: s.footerBtn, onClick: handleNow, children: "Now" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${s.footerBtn} ${s.footerBtnPrimary}`,
+            onClick: handleApply,
+            children: "Apply"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TimePicker
+};