@viax.io/uxm 4.36.0

package/dist/ui/time-input/time-input.cjs

@@ -0,0 +1,346 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var time_input_exports = {};
+__export(time_input_exports, {
+  TimeInput: () => TimeInput
+});
+module.exports = __toCommonJS(time_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_use_roving_tab_index = require("../../hooks/use-roving-tab-index.cjs");
+var import_field_error = require("../field-error/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+var import_popover = require("../popover/index.cjs");
+const TIME_PLACEHOLDER = "HH:MM";
+const MERIDIEMS = ["AM", "PM"];
+function maskTime(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+function splitValue(formatted, format) {
+  if (format === "24h") return { time: formatted, meridiem: "AM" };
+  const parts = formatted.trim().split(/\s+/);
+  const time = parts[0] ?? "";
+  const meridiem = parts[1] === "PM" ? "PM" : "AM";
+  return { time, meridiem };
+}
+function joinValue(time, meridiem, format) {
+  if (format === "24h") return time;
+  return time ? `${time} ${meridiem}` : "";
+}
+function parseHHMM(time) {
+  const [hh, mm] = (time ?? "").split(":");
+  return { hh: hh ?? "", mm: mm ?? "" };
+}
+const pad2 = (n) => String(n).padStart(2, "0");
+function buildHours(format) {
+  if (format === "24h") return Array.from({ length: 24 }, (_, i) => pad2(i));
+  return [pad2(12), ...Array.from({ length: 11 }, (_, i) => pad2(i + 1))];
+}
+function buildMinutes(step, current) {
+  const safeStep = Math.max(1, Math.min(60, Math.floor(step)));
+  const out = [];
+  for (let m = 0; m < 60; m += safeStep) out.push(pad2(m));
+  if (current && /^\d{1,2}$/.test(current)) {
+    const n = Number(current);
+    if (n >= 0 && n < 60 && !out.includes(pad2(n))) {
+      out.push(pad2(n));
+      out.sort();
+    }
+  }
+  return out;
+}
+function centerSelected(body) {
+  if (!body) return;
+  const selected = body.querySelector(".uxm-time-input__row--selected");
+  if (!selected) return;
+  body.scrollTop = selected.offsetTop - body.clientHeight / 2 + selected.clientHeight / 2;
+}
+function TimeInput({
+  format = "24h",
+  className,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  clock = true,
+  picker = true,
+  minuteStep = 1,
+  clearable = true,
+  clearLabel = "Clear",
+  openPickerLabel = "Open time picker",
+  pickerDialogLabel = "Pick a time",
+  hourColumnLabel = "Hour",
+  minuteColumnLabel = "Minute",
+  meridiemColumnLabel = "AM or PM",
+  style,
+  disabled,
+  error,
+  onFocus,
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  const [internal, setInternal] = (0, import_react.useState)(() => {
+    const seed = defaultValue ?? "";
+    const { time: time2, meridiem: meridiem2 } = splitValue(seed, format);
+    return joinValue(maskTime(time2), meridiem2, format);
+  });
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const { time, meridiem } = splitValue(current ?? "", format);
+  const { hh, mm } = parseHHMM(time);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  const hourBodyRef = (0, import_react.useRef)(null);
+  const minuteBodyRef = (0, import_react.useRef)(null);
+  const isFirstFormatEffect = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    if (isFirstFormatEffect.current) {
+      isFirstFormatEffect.current = false;
+      return;
+    }
+    if (!isControlled) setInternal("");
+    setIsOpen(false);
+  }, [format, isControlled]);
+  (0, import_react.useEffect)(() => {
+    if (!isOpen) return;
+    const id = requestAnimationFrame(() => {
+      centerSelected(hourBodyRef.current);
+      centerSelected(minuteBodyRef.current);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isOpen]);
+  const commit = (0, import_react.useCallback)(
+    (nextTime, nextMeridiem) => {
+      const next = joinValue(nextTime, nextMeridiem, format);
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [format, isControlled, onChange]
+  );
+  const handleInputChange = (0, import_react.useCallback)(
+    (e) => {
+      commit(maskTime(e.target.value), meridiem);
+    },
+    [meridiem, commit]
+  );
+  const handleHourPick = (0, import_react.useCallback)(
+    (h) => {
+      commit(`${h}:${mm || "00"}`, meridiem);
+    },
+    [mm, meridiem, commit]
+  );
+  const handleMinutePick = (0, import_react.useCallback)(
+    (m) => {
+      const fallbackHour = format === "12h" ? "12" : "00";
+      commit(`${hh || fallbackHour}:${m}`, meridiem);
+    },
+    [hh, meridiem, format, commit]
+  );
+  const handleMeridiemPick = (0, import_react.useCallback)(
+    (next) => {
+      commit(time, next);
+    },
+    [time, commit]
+  );
+  const hours = (0, import_react.useMemo)(() => buildHours(format), [format]);
+  const minutes = (0, import_react.useMemo)(() => buildMinutes(minuteStep, mm), [minuteStep, mm]);
+  const [hourHighlight, setHourHighlight] = (0, import_react.useState)(0);
+  const [minuteHighlight, setMinuteHighlight] = (0, import_react.useState)(0);
+  const [meridiemHighlight, setMeridiemHighlight] = (0, import_react.useState)(0);
+  const safeHourHighlight = Math.min(hourHighlight, hours.length - 1);
+  const safeMinuteHighlight = Math.min(minuteHighlight, minutes.length - 1);
+  const safeMeridiemHighlight = Math.min(meridiemHighlight, MERIDIEMS.length - 1);
+  const hourRoving = (0, import_use_roving_tab_index.useRovingTabIndex)({
+    count: hours.length,
+    activeIndex: safeHourHighlight,
+    orientation: "vertical",
+    onNavigate: setHourHighlight
+  });
+  const minuteRoving = (0, import_use_roving_tab_index.useRovingTabIndex)({
+    count: minutes.length,
+    activeIndex: safeMinuteHighlight,
+    orientation: "vertical",
+    onNavigate: setMinuteHighlight
+  });
+  const meridiemRoving = (0, import_use_roving_tab_index.useRovingTabIndex)({
+    count: MERIDIEMS.length,
+    activeIndex: safeMeridiemHighlight,
+    orientation: "vertical",
+    onNavigate: setMeridiemHighlight
+  });
+  const triggerEnabled = clock && picker && !disabled;
+  const handleClear = (0, import_react.useCallback)(() => {
+    if (!isControlled) setInternal("");
+    onChange?.("");
+  }, [isControlled, onChange]);
+  const showClear = clearable && time.length > 0 && !disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-time-input",
+          error && "uxm-time-input--error",
+          clearable && "uxm-time-input--clearable",
+          className
+        ),
+        style,
+        "data-format": format,
+        ref: containerRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              className: "uxm-time-input__input",
+              placeholder: placeholder ?? TIME_PLACEHOLDER,
+              value: time,
+              onChange: handleInputChange,
+              disabled,
+              onFocus: (e) => {
+                if (triggerEnabled) setIsOpen(true);
+                onFocus?.(e);
+              },
+              ...rest,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": (0, import_helpers.mergeDescribedBy)(rest["aria-describedby"], error ? errorId : void 0)
+            }
+          ),
+          showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_button.IconButton,
+            {
+              className: "uxm-field-clear uxm-time-input__clear",
+              "aria-label": clearLabel,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleClear,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" })
+            }
+          ),
+          clock && (triggerEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uxm-time-input__icon",
+              onClick: () => setIsOpen((o) => !o),
+              "aria-label": openPickerLabel,
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "clock" })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-time-input__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "clock" }) })),
+          format === "12h" && // Display-only meridiem badge. The popover's AM/PM column is the
+          // sole interactive way to flip it — a separate <select> would
+          // duplicate the same affordance and add a third "trailing thing"
+          // crowding the field. Read-only span keeps the field's surface
+          // calm and points the user at the popover for editing.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-time-input__meridiem", "aria-hidden": "true", children: meridiem }),
+          triggerEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_popover.Popover,
+            {
+              open: isOpen,
+              onOpenChange: setIsOpen,
+              anchor: containerRef,
+              placement: "bottom-start",
+              matchAnchorWidth: true,
+              restoreFocus: false,
+              className: "uxm-time-input__popover",
+              "aria-label": pickerDialogLabel,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-time-input__column", role: "listbox", "aria-label": hourColumnLabel, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-head", children: hh || hours[0] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-body", ref: hourBodyRef, children: hours.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      ref: hourRoving.getItemRef(i),
+                      tabIndex: i === safeHourHighlight ? 0 : -1,
+                      className: (0, import_helpers.cn)(
+                        "uxm-time-input__row",
+                        h === hh && "uxm-time-input__row--selected"
+                      ),
+                      onClick: () => handleHourPick(h),
+                      onKeyDown: (e) => hourRoving.onItemKeyDown(e, i),
+                      "aria-selected": h === hh,
+                      children: h
+                    },
+                    h
+                  )) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-time-input__column", role: "listbox", "aria-label": minuteColumnLabel, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-head", children: mm || "00" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-body", ref: minuteBodyRef, children: minutes.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      ref: minuteRoving.getItemRef(i),
+                      tabIndex: i === safeMinuteHighlight ? 0 : -1,
+                      className: (0, import_helpers.cn)(
+                        "uxm-time-input__row",
+                        m === mm && "uxm-time-input__row--selected"
+                      ),
+                      onClick: () => handleMinutePick(m),
+                      onKeyDown: (e) => minuteRoving.onItemKeyDown(e, i),
+                      "aria-selected": m === mm,
+                      children: m
+                    },
+                    m
+                  )) })
+                ] }),
+                format === "12h" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-time-input__column", role: "listbox", "aria-label": meridiemColumnLabel, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-head", children: meridiem }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-time-input__column-body", children: MERIDIEMS.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      ref: meridiemRoving.getItemRef(i),
+                      tabIndex: i === safeMeridiemHighlight ? 0 : -1,
+                      className: (0, import_helpers.cn)(
+                        "uxm-time-input__row",
+                        m === meridiem && "uxm-time-input__row--selected"
+                      ),
+                      onClick: () => handleMeridiemPick(m),
+                      onKeyDown: (e) => meridiemRoving.onItemKeyDown(e, i),
+                      "aria-selected": m === meridiem,
+                      children: m
+                    },
+                    m
+                  )) })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-time-input__error-message", children: error })
+  ] });
+}
+TimeInput.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimeInput
+});
+//# sourceMappingURL=time-input.cjs.map

package/dist/ui/time-input/time-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/time-input/time-input.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\n\nimport { useRovingTabIndex } from '../../hooks/use-roving-tab-index';\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { Popover } from '../popover';\n\nimport type { ChangeEvent, InputHTMLAttributes } from 'react';\n\nexport type TimeInputFormat = '24h' | '12h';\n\nexport interface TimeInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'style'> {\n  /**\n   * Clock convention. `24h` masks as `HH:MM` (00:00–23:59); `12h` masks as\n   * `HH:MM` plus an AM/PM selector. Drives placeholder shape, the hour\n   * column in the popover, and the trailing meridiem control.\n   */\n  format?: TimeInputFormat;\n  /** Formatted string value (controlled). E.g. `\"09:30\"` or `\"09:30 AM\"`. */\n  value?: string;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: string;\n  /** Called with the masked, formatted value after each keystroke, meridiem flip, or column pick. */\n  onChange?: (formatted: string) => void;\n  /**\n   * Render the trailing clock icon. Defaults to true. When `picker` is also\n   * true, the icon doubles as the popover toggle; when `picker` is false it\n   * stays decorative. Pass `clock={false}` for an icon-less field.\n   */\n  clock?: boolean;\n  /**\n   * Mount the column-scroll popover (hour / minute / AM-PM lists) under the\n   * field, opened by clicking the clock icon. Defaults to true. Pass false\n   * for a typing-only field — the clock icon stays decorative. Requires\n   * `clock` to be true; otherwise there's no trigger to open the popover.\n   */\n  picker?: boolean;\n  /**\n   * Minute step shown in the popover's minute column. Defaults to 1\n   * (every minute, exhaustive). Pass a coarser step (e.g. 5, 15, 30) for\n   * scheduling apps where finer resolution would clutter the column.\n   * If the field's current minute is off-step, it's still inserted into\n   * the column so a typed `09:03` doesn't vanish under `minuteStep={5}`.\n   */\n  minuteStep?: number;\n  /**\n   * Show a clear (✕) button when the field has a value. On by default (opt out\n   * with `clearable={false}`). The ✕ sits inboard of the trailing clock icon\n   * (and, in 12h, inboard of the AM/PM badge). The component owns the reset —\n   * it wipes its own uncontrolled state and fires `onChange(\"\")` — so no\n   * separate `onClear` is needed.\n   */\n  clearable?: boolean;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /** Accessible name for the picker trigger. Default `\"Open time picker\"`. */\n  openPickerLabel?: string;\n  /** Accessible name for the picker popover dialog. Default `\"Pick a time\"`. */\n  pickerDialogLabel?: string;\n  /** Accessible name for the hour column listbox. Default `\"Hour\"`. */\n  hourColumnLabel?: string;\n  /** Accessible name for the minute column listbox. Default `\"Minute\"`. */\n  minuteColumnLabel?: string;\n  /** Accessible name for the AM/PM column listbox (`12h` only). Default `\"AM or PM\"`. */\n  meridiemColumnLabel?: string;\n  /**\n   * Inline style applied to the WRAPPER (not the inner <input>). CSS custom\n   * properties set here cascade to every descendant — the input, the AM/PM\n   * select, AND the popover (a sibling of the input) — so theming knobs\n   * reach all parts.\n   */\n  style?: React.CSSProperties;\n  /**\n   * When set to a non-empty string, the field renders in its error state:\n   * the `--error` modifier sits on the wrapper (so the inner input, clock\n   * icon, and meridiem badge re-tone), `aria-invalid` lands on the inner\n   * `<input>`, and the message renders below. Omit (or pass an empty\n   * string) for the normal state.\n   */\n  error?: string;\n}\n\nconst TIME_PLACEHOLDER = 'HH:MM';\nconst MERIDIEMS = ['AM', 'PM'] as const;\ntype Meridiem = (typeof MERIDIEMS)[number];\n\n/**\n * Mask raw input as `HH:MM`. Strips non-digits, caps at 4 digits, inserts the\n * colon after the second digit. Hour / minute validity is loose — the consumer\n * sees the raw masked string and can decide whether to validate strictly,\n * matching DateInput's permissive parse philosophy.\n */\nfunction maskTime(raw: string): string {\n  const digits = raw.replace(/\\D/g, '').slice(0, 4);\n  if (digits.length <= 2) return digits;\n  return `${digits.slice(0, 2)}:${digits.slice(2)}`;\n}\n\n/** Split a stored `\"HH:MM\"` or `\"HH:MM AM\"` into `{ time, meridiem }`. */\nfunction splitValue(formatted: string, format: TimeInputFormat): { time: string; meridiem: Meridiem } {\n  if (format === '24h') return { time: formatted, meridiem: 'AM' };\n  const parts = formatted.trim().split(/\\s+/);\n  const time = parts[0] ?? '';\n  const meridiem = (parts[1] === 'PM' ? 'PM' : 'AM') as Meridiem;\n  return { time, meridiem };\n}\n\n/** Re-assemble `{ time, meridiem }` into the wire-format string. */\nfunction joinValue(time: string, meridiem: Meridiem, format: TimeInputFormat): string {\n  if (format === '24h') return time;\n  return time ? `${time} ${meridiem}` : '';\n}\n\n/** Parse `\"HH:MM\"` into `{ hh, mm }` strings (empty when absent). */\nfunction parseHHMM(time: string): { hh: string; mm: string } {\n  const [hh, mm] = (time ?? '').split(':');\n  return { hh: hh ?? '', mm: mm ?? '' };\n}\n\nconst pad2 = (n: number): string => String(n).padStart(2, '0');\n\n/**\n * Hour-column rows for the popover. 24h yields 00–23 in order; 12h yields\n * `12, 01, 02, …, 11` — `12` at the top matches the Ant Design / iOS\n * convention where 12 represents the \"zero\" hour of each half-day.\n */\nfunction buildHours(format: TimeInputFormat): string[] {\n  if (format === '24h') return Array.from({ length: 24 }, (_, i) => pad2(i));\n  return [pad2(12), ...Array.from({ length: 11 }, (_, i) => pad2(i + 1))];\n}\n\n/**\n * Minute-column rows at the given step (5 → 00,05,…,55). If `current` is\n * supplied and falls off-step (e.g. user typed \"09:03\" with step=5), it's\n * inserted at the right sorted position so the popover never hides a\n * legitimately typed value. Out-of-range or non-numeric `current` is\n * ignored, matching the parser's permissive-input philosophy.\n */\nfunction buildMinutes(step: number, current?: string): string[] {\n  const safeStep = Math.max(1, Math.min(60, Math.floor(step)));\n  const out: string[] = [];\n  for (let m = 0; m < 60; m += safeStep) out.push(pad2(m));\n  if (current && /^\\d{1,2}$/.test(current)) {\n    const n = Number(current);\n    if (n >= 0 && n < 60 && !out.includes(pad2(n))) {\n      out.push(pad2(n));\n      out.sort();\n    }\n  }\n  return out;\n}\n\n/**\n * Scroll a column body so its currently-selected row sits roughly in the\n * middle of the visible area. Called when the popover opens so the user\n * never has to scroll to find their existing value.\n */\nfunction centerSelected(body: HTMLElement | null) {\n  if (!body) return;\n  const selected = body.querySelector<HTMLElement>('.uxm-time-input__row--selected');\n  if (!selected) return;\n  body.scrollTop = selected.offsetTop - body.clientHeight / 2 + selected.clientHeight / 2;\n}\n\nexport function TimeInput({\n  format = '24h',\n  className,\n  placeholder,\n  value,\n  defaultValue,\n  onChange,\n  clock = true,\n  picker = true,\n  minuteStep = 1,\n  clearable = true,\n  clearLabel = 'Clear',\n  openPickerLabel = 'Open time picker',\n  pickerDialogLabel = 'Pick a time',\n  hourColumnLabel = 'Hour',\n  minuteColumnLabel = 'Minute',\n  meridiemColumnLabel = 'AM or PM',\n  style,\n  disabled,\n  error,\n  onFocus,\n  ...rest\n}: TimeInputProps) {\n  const errorId = useId();\n  const [internal, setInternal] = useState<string>(() => {\n    const seed = defaultValue ?? '';\n    const { time, meridiem } = splitValue(seed, format);\n    return joinValue(maskTime(time), meridiem, format);\n  });\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n  const { time, meridiem } = splitValue(current ?? '', format);\n  const { hh, mm } = parseHHMM(time);\n\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const hourBodyRef = useRef<HTMLDivElement>(null);\n  const minuteBodyRef = useRef<HTMLDivElement>(null);\n\n  // Format switch clears uncontrolled state — a stored \"13:00\" makes no\n  // sense if the user just flipped to 12h, and a \"09:30 AM\" string would\n  // dangle stale meridiem under 24h. Mirrors DateInput's mode-flip reset.\n  // The ref guard skips the FIRST run so the `useState` initializer\n  // (which preserves `defaultValue`) doesn't get clobbered on mount.\n  const isFirstFormatEffect = useRef(true);\n  useEffect(() => {\n    if (isFirstFormatEffect.current) {\n      isFirstFormatEffect.current = false;\n      return;\n    }\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional format-switch reset of the uncontrolled value + popover, ref-guarded to skip mount\n    if (!isControlled) setInternal('');\n    setIsOpen(false);\n  }, [format, isControlled]);\n\n  // Click-outside + Escape dismissal: handled by Popover. The anchor is\n  // the OUTER wrapper (`containerRef`) so clicks on the input field\n  // don't close the picker.\n\n  // When the popover opens, scroll each column so the current selection is\n  // visible without manual scrolling. Runs after paint so offsetTop is real.\n  useEffect(() => {\n    if (!isOpen) return;\n    const id = requestAnimationFrame(() => {\n      centerSelected(hourBodyRef.current);\n      centerSelected(minuteBodyRef.current);\n    });\n    return () => cancelAnimationFrame(id);\n  }, [isOpen]);\n\n  const commit = useCallback(\n    (nextTime: string, nextMeridiem: Meridiem) => {\n      const next = joinValue(nextTime, nextMeridiem, format);\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    },\n    [format, isControlled, onChange],\n  );\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      commit(maskTime(e.target.value), meridiem);\n    },\n    [meridiem, commit],\n  );\n\n  // Column picks each touch only their own segment of the value. If the\n  // other segment is empty (first interaction with a blank field), we\n  // seed a reasonable default so the picked value commits as a parseable\n  // HH:MM rather than \"09:\" or \":30\".\n  const handleHourPick = useCallback(\n    (h: string) => {\n      commit(`${h}:${mm || '00'}`, meridiem);\n    },\n    [mm, meridiem, commit],\n  );\n  const handleMinutePick = useCallback(\n    (m: string) => {\n      const fallbackHour = format === '12h' ? '12' : '00';\n      commit(`${hh || fallbackHour}:${m}`, meridiem);\n    },\n    [hh, meridiem, format, commit],\n  );\n  const handleMeridiemPick = useCallback(\n    (next: Meridiem) => {\n      commit(time, next);\n    },\n    [time, commit],\n  );\n\n  const hours = useMemo(() => buildHours(format), [format]);\n  const minutes = useMemo(() => buildMinutes(minuteStep, mm), [minuteStep, mm]);\n\n  // Roving tabindex for each popover column — ARIA listbox pattern: only\n  // one row per column is a Tab stop; ArrowUp/Down move the highlight\n  // within that column. Enter/Space and Escape are already covered for\n  // free — rows are real <button>s (native Enter/Space activation) and\n  // Escape/outside-click close the whole popover via `Popover`'s defaults.\n  const [hourHighlight, setHourHighlight] = useState(0);\n  const [minuteHighlight, setMinuteHighlight] = useState(0);\n  const [meridiemHighlight, setMeridiemHighlight] = useState(0);\n  const safeHourHighlight = Math.min(hourHighlight, hours.length - 1);\n  const safeMinuteHighlight = Math.min(minuteHighlight, minutes.length - 1);\n  const safeMeridiemHighlight = Math.min(meridiemHighlight, MERIDIEMS.length - 1);\n  const hourRoving = useRovingTabIndex({\n    count: hours.length,\n    activeIndex: safeHourHighlight,\n    orientation: 'vertical',\n    onNavigate: setHourHighlight,\n  });\n  const minuteRoving = useRovingTabIndex({\n    count: minutes.length,\n    activeIndex: safeMinuteHighlight,\n    orientation: 'vertical',\n    onNavigate: setMinuteHighlight,\n  });\n  const meridiemRoving = useRovingTabIndex({\n    count: MERIDIEMS.length,\n    activeIndex: safeMeridiemHighlight,\n    orientation: 'vertical',\n    onNavigate: setMeridiemHighlight,\n  });\n\n  // The clock icon doubles as the popover trigger only when both `clock`\n  // and `picker` are on. When picker is off (or clock is off), the icon\n  // — if rendered — stays a decorative <span>.\n  const triggerEnabled = clock && picker && !disabled;\n\n  // Clear owns its own reset: wipe the value (time + meridiem) and notify via\n  // onChange(\"\"). Mirrors DateInput / NumberInput — the component holds its own\n  // state, so no onClear prop is needed.\n  const handleClear = useCallback(() => {\n    if (!isControlled) setInternal('');\n    onChange?.('');\n  }, [isControlled, onChange]);\n  const showClear = clearable && time.length > 0 && !disabled;\n\n  return (\n    <>\n    <div\n      className={cn(\n        'uxm-time-input',\n        error && 'uxm-time-input--error',\n        clearable && 'uxm-time-input--clearable',\n        className,\n      )}\n      style={style}\n      data-format={format}\n      ref={containerRef}\n    >\n      <input\n        type=\"text\"\n        inputMode=\"numeric\"\n        className=\"uxm-time-input__input\"\n        placeholder={placeholder ?? TIME_PLACEHOLDER}\n        value={time}\n        onChange={handleInputChange}\n        disabled={disabled}\n        onFocus={(e) => {\n          if (triggerEnabled) setIsOpen(true);\n          onFocus?.(e);\n        }}\n        {...rest}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={mergeDescribedBy(rest['aria-describedby'], error ? errorId : undefined)}\n      />\n      {/* DOM order matches the visual left-to-right layout (value → clear →\n          clock icon) so the tab order reads naturally (WCAG 2.4.3). */}\n      {showClear && (\n        <IconButton\n          className=\"uxm-field-clear uxm-time-input__clear\"\n          aria-label={clearLabel}\n          // Prevent the button from stealing focus away from whatever's\n          // currently focused — clearing must not re-open the picker popover\n          // via the input's onFocus handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={handleClear}\n        >\n          <Icon glyph=\"close\" />\n        </IconButton>\n      )}\n      {clock && (triggerEnabled ? (\n        <button\n          type=\"button\"\n          className=\"uxm-time-input__icon\"\n          onClick={() => setIsOpen((o) => !o)}\n          aria-label={openPickerLabel}\n          aria-expanded={isOpen}\n        >\n          <Icon glyph=\"clock\" />\n        </button>\n      ) : (\n        <span className=\"uxm-time-input__icon\" aria-hidden=\"true\">\n          <Icon glyph=\"clock\" />\n        </span>\n      ))}\n      {format === '12h' && (\n        // Display-only meridiem badge. The popover's AM/PM column is the\n        // sole interactive way to flip it — a separate <select> would\n        // duplicate the same affordance and add a third \"trailing thing\"\n        // crowding the field. Read-only span keeps the field's surface\n        // calm and points the user at the popover for editing.\n        <span className=\"uxm-time-input__meridiem\" aria-hidden=\"true\">\n          {meridiem}\n        </span>\n      )}\n      {triggerEnabled && (\n        <Popover\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          anchor={containerRef}\n          placement=\"bottom-start\"\n          matchAnchorWidth\n          // The field opens the popover on input `onFocus`. If Popover\n          // restored focus to the input on close (its default), that focus\n          // would immediately re-fire `onFocus` and reopen the popover —\n          // so an outside click could never dismiss it. Opting out of focus\n          // restoration breaks that loop (matches DateInput, which opens on\n          // focus too and uses a non-restoring popover).\n          restoreFocus={false}\n          className=\"uxm-time-input__popover\"\n          aria-label={pickerDialogLabel}\n        >\n          <div className=\"uxm-time-input__column\" role=\"listbox\" aria-label={hourColumnLabel}>\n            <div className=\"uxm-time-input__column-head\">{hh || hours[0]}</div>\n            <div className=\"uxm-time-input__column-body\" ref={hourBodyRef}>\n              {hours.map((h, i) => (\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  key={h}\n                  ref={hourRoving.getItemRef(i)}\n                  tabIndex={i === safeHourHighlight ? 0 : -1}\n                  className={cn(\n                    'uxm-time-input__row',\n                    h === hh && 'uxm-time-input__row--selected',\n                  )}\n                  onClick={() => handleHourPick(h)}\n                  onKeyDown={(e) => hourRoving.onItemKeyDown(e, i)}\n                  aria-selected={h === hh}\n                >\n                  {h}\n                </button>\n              ))}\n            </div>\n          </div>\n          <div className=\"uxm-time-input__column\" role=\"listbox\" aria-label={minuteColumnLabel}>\n            <div className=\"uxm-time-input__column-head\">{mm || '00'}</div>\n            <div className=\"uxm-time-input__column-body\" ref={minuteBodyRef}>\n              {minutes.map((m, i) => (\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  key={m}\n                  ref={minuteRoving.getItemRef(i)}\n                  tabIndex={i === safeMinuteHighlight ? 0 : -1}\n                  className={cn(\n                    'uxm-time-input__row',\n                    m === mm && 'uxm-time-input__row--selected',\n                  )}\n                  onClick={() => handleMinutePick(m)}\n                  onKeyDown={(e) => minuteRoving.onItemKeyDown(e, i)}\n                  aria-selected={m === mm}\n                >\n                  {m}\n                </button>\n              ))}\n            </div>\n          </div>\n          {format === '12h' && (\n            <div className=\"uxm-time-input__column\" role=\"listbox\" aria-label={meridiemColumnLabel}>\n              <div className=\"uxm-time-input__column-head\">{meridiem}</div>\n              <div className=\"uxm-time-input__column-body\">\n                {MERIDIEMS.map((m, i) => (\n                  <button\n                    type=\"button\"\n                    role=\"option\"\n                    key={m}\n                    ref={meridiemRoving.getItemRef(i)}\n                    tabIndex={i === safeMeridiemHighlight ? 0 : -1}\n                    className={cn(\n                      'uxm-time-input__row',\n                      m === meridiem && 'uxm-time-input__row--selected',\n                    )}\n                    onClick={() => handleMeridiemPick(m)}\n                    onKeyDown={(e) => meridiemRoving.onItemKeyDown(e, i)}\n                    aria-selected={m === meridiem}\n                  >\n                    {m}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n        </Popover>\n      )}\n    </div>\n    {error && (\n      <FieldError id={errorId} className=\"uxm-time-input__error-message\">\n        {error}\n      </FieldError>\n    )}\n    </>\n  );\n}\nTimeInput.hasError = true;\n"],"mappings":"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","names":["time","meridiem"]}

package/dist/ui/time-input/time-input.css

@@ -0,0 +1,260 @@
+@charset "UTF-8";
+/* Time Input — same inner-styled-atom shape as DateInput. Root
+   `.uxm-time-input` is a positioning wrapper; the visible field is
+   `.uxm-time-input__input`. In `data-format="12h"` mode an AM/PM <select>
+   pins to the right of the field, and the clock icon shifts left to make
+   room. The `__input` right-padding math accounts for whichever trailing
+   elements are rendered. No popover — typing is the only entry path. */
+.uxm-time-input {
+  position: relative;
+  width: 100%;
+}
+
+.uxm-time-input__icon {
+  /* Clock icon always hugs the far right — it's the popover trigger, the
+     natural "open the picker" affordance lives at the end of the field.
+     AM/PM (when shown) sits inboard of the icon as a quiet value suffix,
+     not a competing control. */
+  position: absolute;
+  right: var(--uxm-time-input-icon-offset, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: var(--uxm-time-input-icon-color, var(--color-text-muted));
+  line-height: 1;
+  font-family: inherit;
+  transition: color 0.12s;
+}
+
+/* When rendered as a real <button> (picker enabled), pointer events are
+   live so the click can toggle the popover. The decorative <span> path
+   keeps pointer-events:none so clicks fall through to the input. */
+button.uxm-time-input__icon {
+  cursor: pointer;
+}
+
+button.uxm-time-input__icon:hover:not(:disabled) {
+  color: var(--uxm-time-input-icon-hover-color, var(--color-text));
+}
+
+button.uxm-time-input__icon:disabled {
+  cursor: not-allowed;
+}
+
+span.uxm-time-input__icon {
+  pointer-events: none;
+}
+
+.uxm-time-input__icon > svg {
+  width: var(--uxm-time-input-icon-size, 16px);
+  height: var(--uxm-time-input-icon-size, 16px);
+}
+
+.uxm-time-input__input {
+  width: 100%;
+  background-color: var(--uxm-time-input-background-color, var(--color-card));
+  color: var(--uxm-time-input-color, var(--color-text));
+  border: 1px solid var(--uxm-time-input-border-color, var(--color-border));
+  border-radius: var(--uxm-time-input-border-radius, 8px);
+  /* Reserve right padding for the trailing affordances. In 24h mode that's
+     just the clock icon; in 12h mode it's icon + meridiem selector width. */
+  padding: var(--uxm-time-input-padding-y, 10px) calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 8px) var(--uxm-time-input-padding-y, 10px) var(--uxm-time-input-padding-x, 12px);
+  font-size: calc(var(--uxm-time-input-font-size, 14px) * var(--type-scale, 1));
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+  box-sizing: border-box;
+}
+
+.uxm-time-input[data-format="12h"] .uxm-time-input__input {
+  /* 12h: reserve right padding for the clock icon + AM/PM suffix + gaps.
+     The meridiem term scales with the type scale because the suffix it reserves
+     room for is TEXT: at 150% "PM" renders ~30px, so a fixed 24px reserve would
+     leave it overlapping the typed value. The icon terms stay fixed — the icon
+     is sized by its own var, not by the type scale. */
+  padding-right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + var(--uxm-time-input-meridiem-width, 24px) * var(--type-scale, 1) + 16px);
+}
+
+.uxm-time-input__meridiem {
+  /* Read-only AM/PM suffix. Visually a quiet label that reads as part of
+     the value, not a separate control. Sits inboard of the clock icon —
+     positioned at `icon_offset + icon_size + gap` from the right edge so
+     it clears the icon. No chip background; small caps + muted color let
+     it recede into the field surface. The popover is the only way to
+     change it (avoids duplicating an interactive affordance). */
+  position: absolute;
+  right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--uxm-time-input-meridiem-color, var(--color-text-muted));
+  font-family: inherit;
+  /* The whole expression scales, not just the field size: multiplying after the
+     subtraction keeps the meridiem proportionally 2px smaller at 100% and keeps
+     that ratio as the scale grows (at 150% it is 18px against the field's 21px).
+     Scaling only the field size would shrink the gap away as text got larger. */
+  font-size: calc((var(--uxm-time-input-font-size, 14px) - 2px) * var(--type-scale, 1));
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* State coverage — `:hover` / `:focus` / `:disabled` target the inner
+   `__input`; `--error` and `--state-*` forced modifiers sit on the wrapper
+   so both the clock icon and the meridiem selector can re-tone in error
+   mode (matching DateInput's wrapper-scoped error treatment). */
+.uxm-time-input--state-hover .uxm-time-input__input,
+.uxm-time-input__input:hover:not(:disabled) {
+  background-color: var(--uxm-time-input-hover-bg, var(--color-card));
+  border-color: var(--uxm-time-input-hover-border, var(--color-accent));
+}
+
+.uxm-time-input--state-focus .uxm-time-input__input,
+.uxm-time-input__input:focus {
+  border-color: var(--uxm-time-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-time-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-time-input__input:disabled {
+  background-color: var(--uxm-time-input-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-time-input-disabled-border, var(--color-border));
+  color: var(--uxm-time-input-disabled-color, var(--color-text-muted));
+  opacity: var(--uxm-time-input-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+
+.uxm-time-input--error .uxm-time-input__input {
+  background-color: var(--uxm-time-input-error-bg, var(--color-card));
+  border-color: var(--uxm-time-input-error-border, var(--color-danger-text));
+}
+
+.uxm-time-input--error .uxm-time-input__icon,
+.uxm-time-input--error .uxm-time-input__meridiem {
+  color: var(--uxm-time-input-error-color, var(--color-danger-text));
+  border-color: var(--uxm-time-input-error-border, var(--color-danger-text));
+}
+
+.uxm-time-input__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-time-input-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-time-input-error-color, var(--color-danger-text));
+}
+
+/* Clear (✕) — positioning only; chrome comes from the shared
+   `.uxm-field-clear` IconButton (same 22×22 affordance as the other inputs).
+   Sits inboard of the trailing clock icon; in 12h it also clears the AM/PM
+   badge that sits between them. */
+.uxm-time-input__clear {
+  position: absolute;
+  right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.uxm-time-input[data-format="12h"] .uxm-time-input__clear {
+  right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 8px + var(--uxm-time-input-meridiem-width, 24px) + 6px);
+}
+
+/* Reserve trailing room so the value never slides under the ✕ — on top of the
+   room already reserved for the icon (and, in 12h, the AM/PM badge). */
+.uxm-time-input--clearable .uxm-time-input__input {
+  padding-right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 6px + var(--uxm-field-clear-size, 22px) + 8px);
+}
+
+.uxm-time-input--clearable[data-format="12h"] .uxm-time-input__input {
+  padding-right: calc(var(--uxm-time-input-icon-offset, 12px) + var(--uxm-time-input-icon-size, 16px) + 8px + var(--uxm-time-input-meridiem-width, 24px) + 6px + var(--uxm-field-clear-size, 22px) + 8px);
+}
+
+/* TimeInput popover — three click-list columns (hour / minute / AM-PM).
+   Anchored to the wrapper's bottom-left so it lines up with the field
+   width. Filter drop-shadow gives the rounded corners a soft surround
+   without rectangular bleed. Mirrors DateInput's popover positioning so
+   the two atoms float at the same offset. */
+.uxm-time-input__popover {
+  /* Positioning + portal + dismissal handled by Popover. Width matches
+     the anchor (via Popover's `matchAnchorWidth` prop) so the three
+     columns fill the field width like before. This class contributes
+     visual chrome only: the panel surface (bg / border / radius /
+     shadow) + flex layout for the three columns. */
+  display: flex;
+  background-color: var(--uxm-time-input-popover-bg, var(--color-card));
+  border: 1px solid var(--uxm-time-input-popover-border, var(--color-border));
+  border-radius: var(--uxm-time-input-popover-radius, 8px);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+}
+
+.uxm-time-input__column {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--uxm-time-input-popover-border, var(--color-border));
+}
+
+.uxm-time-input__column:last-child {
+  border-right: none;
+}
+
+.uxm-time-input__column-head {
+  padding: 6px 8px;
+  text-align: center;
+  font-size: calc(12px * var(--type-scale, 1));
+  font-weight: 600;
+  color: var(--uxm-time-input-color, var(--color-text));
+  background-color: var(--uxm-time-input-popover-head-bg, var(--color-surface-alt));
+  border-bottom: 1px solid var(--uxm-time-input-popover-border, var(--color-border));
+}
+
+.uxm-time-input__column-body {
+  /* Scrollable column. Height tuned so ~7 rows are visible at default font
+     — enough context above and below the selected row that the centered
+     scroll behaviour reads as "your value is here" rather than "this list
+     is short." */
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.uxm-time-input__row {
+  /* Reset button chrome so the rows read as plain list items. */
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: calc(13px * var(--type-scale, 1));
+  color: var(--uxm-time-input-color, var(--color-text));
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.1s, color 0.1s;
+}
+
+/* Row hover + selected defaults mirror the Listbox option tokens
+   (`--color-surface-alt` / `--color-accent-subtle` / `--color-accent-bold`)
+   so a selected time visually matches a selected listbox option out of
+   the box. TimeInput keeps its own theming surface — designers can tune
+   these independently if they want a distinct time-picker palette. */
+.uxm-time-input__row:hover {
+  background-color: var(--uxm-time-input-popover-row-hover-bg, var(--color-surface-alt));
+}
+
+.uxm-time-input__row--selected {
+  background-color: var(--uxm-time-input-popover-row-selected-bg, var(--color-accent-subtle));
+  color: var(--uxm-time-input-popover-row-selected-color, var(--color-accent-bold));
+  font-weight: 600;
+}
+
+.uxm-time-input__row--selected:hover {
+  background-color: var(--uxm-time-input-popover-row-selected-bg, var(--color-accent-subtle));
+}