@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/DateField.js

@@ -0,0 +1,166 @@
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
+import { useId as z, useState as h } from "react";
+import { cn as S } from "../lib/cn.js";
+import { formatDate as G, parseDate as H } from "../lib/values/date.js";
+import { parsePlainDate as L } from "../lib/time/plain.js";
+import { pad as F } from "../lib/pad.js";
+import { Icon as U } from "./Icon.js";
+import { IconButton as _ } from "./IconButton.js";
+import { Input as C } from "./Input.js";
+import { Popover as $ } from "./Popover.js";
+import { CALENDAR_POPOVER_CLASS as K, DateCalendar as Y } from "./DateCalendar.js";
+import { useUiStrings as B, useUiLocale as q } from "../lib/i18n/provider.js";
+import { isoDateString as J } from "../lib/time/types.js";
+function M(e) {
+  if (!e) return null;
+  try {
+    const { year: t, month: n, day: l } = L(e);
+    return new Date(t, n - 1, l);
+  } catch {
+    return null;
+  }
+}
+function P(e) {
+  return J({ year: e.getFullYear(), month: e.getMonth() + 1, day: e.getDate() });
+}
+const D = (e, t) => e ? G(e, t) : "";
+function Q({
+  value: e,
+  onValueChange: t,
+  onEditingChange: n,
+  "aria-label": l,
+  placeholder: u,
+  disabled: x = !1,
+  invalidMessage: y,
+  className: s
+}) {
+  const a = B().dateField, d = z(), o = q(), [N, T] = h(!1), [i, m] = h(""), [p, g] = h(!1), [j, b] = h(!1), A = N || p ? i : D(e, o), v = (r) => {
+    const f = r.trim();
+    if (f === "") {
+      g(!1), m(""), e !== null && t(null);
+      return;
+    }
+    const I = H(f, o);
+    if (I === null) {
+      g(!0);
+      return;
+    }
+    g(!1), m(D(I, o)), I !== e && t(I);
+  }, E = () => {
+    N || (p || m(D(e, o)), T(!0), n?.(!0));
+  }, R = (r) => {
+    v(r.currentTarget.value), T(!1), n?.(!1);
+  }, k = (r) => {
+    r.key === "Enter" ? (r.preventDefault(), v(r.currentTarget.value)) : r.key === "Escape" && (g(!1), m(D(e, o)));
+  };
+  return /* @__PURE__ */ w("div", { className: S("flex flex-col gap-1", s), children: [
+    /* @__PURE__ */ c(
+      C,
+      {
+        value: A,
+        onChange: (r) => {
+          m(r.currentTarget.value);
+        },
+        onFocus: E,
+        onBlur: R,
+        onKeyDown: k,
+        placeholder: u ?? a.placeholder,
+        disabled: x,
+        inputMode: "numeric",
+        autoComplete: "off",
+        "aria-label": l,
+        "aria-invalid": p || void 0,
+        "aria-describedby": p ? d : void 0,
+        trailing: /* @__PURE__ */ c(
+          $,
+          {
+            align: "end",
+            open: j,
+            onOpenChange: b,
+            className: K,
+            "aria-label": a.calendarOf(l),
+            trigger: /* @__PURE__ */ c(
+              _,
+              {
+                label: a.chooseFromCalendar,
+                icon: /* @__PURE__ */ c(U, { name: "calendar", size: "sm" }),
+                disabledReason: x ? a.locked : void 0,
+                size: "sm"
+              }
+            ),
+            children: /* @__PURE__ */ c(
+              Y,
+              {
+                value: M(e),
+                onValueChange: (r) => {
+                  const f = r instanceof Date ? P(r) : null;
+                  g(!1), m(D(f, o)), f !== e && t(f), b(!1);
+                }
+              }
+            )
+          }
+        )
+      }
+    ),
+    p ? /* @__PURE__ */ c("p", { id: d, className: "text-2xs text-danger-text", children: y ?? a.invalidMessage }) : null
+  ] });
+}
+function V(e) {
+  if (!e) return { date: null, time: "" };
+  const t = new Date(e);
+  return Number.isNaN(t.getTime()) ? { date: null, time: "" } : { date: P(t), time: `${F(t.getHours())}:${F(t.getMinutes())}` };
+}
+function O(e, t) {
+  const n = M(e);
+  if (!n) return null;
+  const [l, u] = (t || "00:00").split(":").map(Number);
+  return n.setHours(l ?? 0, u ?? 0, 0, 0), n.toISOString();
+}
+function ue({
+  value: e,
+  onValueChange: t,
+  onEditingChange: n,
+  "aria-label": l,
+  disabled: u = !1,
+  className: x
+}) {
+  const y = B().dateField, s = V(e), [a, d] = h(null), o = a ?? s.time, N = () => n?.(!0), T = (i) => {
+    i.currentTarget.contains(i.relatedTarget) || n?.(!1);
+  };
+  return /* @__PURE__ */ w("div", { className: S("flex flex-wrap items-start gap-2", x), onFocus: N, onBlur: T, children: [
+    /* @__PURE__ */ c(
+      Q,
+      {
+        className: "min-w-[11rem] flex-1",
+        value: s.date,
+        "aria-label": y.dateOf(l),
+        disabled: u,
+        onValueChange: (i) => {
+          t(i === null ? null : O(i, o));
+        }
+      }
+    ),
+    /* @__PURE__ */ c(
+      C,
+      {
+        type: "time",
+        step: 60,
+        className: "w-[8.5rem]",
+        "aria-label": y.timeOf(l),
+        disabled: u || s.date === null,
+        value: o,
+        onChange: (i) => {
+          d(i.currentTarget.value);
+        },
+        onBlur: () => {
+          a !== null && s.date !== null && a !== s.time && t(O(s.date, a)), d(null);
+        }
+      }
+    )
+  ] });
+}
+export {
+  Q as DateField,
+  ue as DateTimeField
+};
+//# sourceMappingURL=DateField.js.map

package/dist/components/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sources":["../../src/components/DateField.tsx"],"sourcesContent":["import { useId, useState, type FocusEvent, type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { formatDate, parseDate } from \"../lib/values/date\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { isoDateString, parsePlainDate } from \"../lib/time/plain\";\nimport { pad } from \"../lib/pad\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input } from \"./Input\";\nimport { Popover } from \"./Popover\";\nimport { CALENDAR_POPOVER_CLASS, DateCalendar } from \"./DateCalendar\";\n\n/* ============================================================================\n   DATE FIELD — a date you can TYPE, with a calendar beside it (SG-906).\n\n   `DatePicker` is a button: the only way in is pointing at a calendar. That is\n   right for scheduling and wrong for correcting a record, where the person very\n   often knows the date and types faster than they can page to it. So this is a\n   text field first — `MM/DD/YYYY` or ISO, read by the library's own `parseDate`,\n   the same reader every consumer's typed date already goes through — with the\n   shared `DateCalendar` one click away for anyone who would rather point.\n\n   THE VALUE IS THE STORED FORM, NEVER THE DISPLAY FORM. `value` and what\n   `onValueChange` reports are ISO calendar dates (`2025-03-11`) or null. The\n   box shows `formatDate`'s `03/11/2025`. Picking March 11 and typing\n   `3/11/2025` therefore report the identical value.\n\n   WHAT A PERSON TYPED IS NEVER TAKEN FROM THEM. While the box has focus it\n   shows the person's own text, whatever `value` does meanwhile. A typed string\n   that is not a date stays in the box with a sentence saying why, rather than\n   snapping back to the last good value. `onEditingChange` reports focus, so a\n   consumer holding the value elsewhere can apply the same rule.\n\n   COMMIT, not every keystroke: Enter, leaving the box, or a calendar pick.\n   Clearing the box and committing reports null. Escape puts the box back to the\n   current value.\n   ========================================================================= */\n\n/** ISO calendar date to a LOCAL-midnight `Date`. Never `new Date(iso)` — that parses as UTC.\n *  Reads the string through `parsePlainDate` — the same calendar-length-checked reader the\n *  rest of the package uses — rather than a second, looser regex (DX-3254). */\nfunction isoToLocalDate(iso: string | null): Date | null {\n  if (!iso) return null;\n  try {\n    const { year, month, day } = parsePlainDate(iso);\n    return new Date(year, month - 1, day);\n  } catch {\n    return null;\n  }\n}\n\n/** A local `Date` to its ISO calendar date — the stored form. */\nfunction localDateToIso(date: Date): string {\n  return isoDateString({ year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() });\n}\n\n/** What the box shows for a stored value: `03/11/2025`, or nothing. */\nconst display = (iso: string | null, locale: string) => (iso ? formatDate(iso, locale) : \"\");\n\nexport interface DateFieldProps {\n  /** The stored ISO calendar date (`YYYY-MM-DD`), or null for none. */\n  value: string | null;\n  /** Reports the new ISO date, or null when the person cleared it. Only on commit. */\n  onValueChange: (value: string | null) => void;\n  /** Told when the box gains and loses focus — i.e. while the person's own text is on screen. */\n  onEditingChange?: (editing: boolean) => void;\n  /** The accessible name. Required: a date box with no name is a box nobody can find. */\n  \"aria-label\": string;\n  /** Omit for the built-in placeholder. A custom one is not translated for you: it must describe the locale's date shape (the order and separator `formatDate` prints for the provider locale). */\n  placeholder?: string;\n  disabled?: boolean;\n  /** The sentence shown for typed text that is not a date. Omit for the built-in one. */\n  invalidMessage?: string;\n  className?: string;\n}\n\nexport function DateField({\n  value,\n  onValueChange,\n  onEditingChange,\n  \"aria-label\": ariaLabel,\n  placeholder,\n  disabled = false,\n  invalidMessage,\n  className,\n}: DateFieldProps) {\n  const strings = useUiStrings().dateField;\n  const errorId = useId();\n  const locale = useUiLocale();\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const [calendarOpen, setCalendarOpen] = useState(false);\n\n  /* The person's text while they are in the box, or while it is refused; the value otherwise. */\n  const shown = editing || invalid ? draft : display(value, locale);\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    if (trimmed === \"\") {\n      setInvalid(false);\n      setDraft(\"\");\n      if (value !== null) onValueChange(null);\n      return;\n    }\n    const iso = parseDate(trimmed, locale);\n    if (iso === null) {\n      setInvalid(true);\n      return;\n    }\n    setInvalid(false);\n    setDraft(display(iso, locale));\n    if (iso !== value) onValueChange(iso);\n  };\n\n  const onFocus = () => {\n    if (!editing) {\n      if (!invalid) setDraft(display(value, locale));\n      setEditing(true);\n      onEditingChange?.(true);\n    }\n  };\n\n  const onBlur = (event: FocusEvent<HTMLInputElement>) => {\n    commit(event.currentTarget.value);\n    setEditing(false);\n    onEditingChange?.(false);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      commit(event.currentTarget.value);\n    } else if (event.key === \"Escape\") {\n      setInvalid(false);\n      setDraft(display(value, locale));\n    }\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <Input\n        value={shown}\n        onChange={(event) => {\n          setDraft(event.currentTarget.value);\n        }}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder ?? strings.placeholder}\n        disabled={disabled}\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        aria-label={ariaLabel}\n        aria-invalid={invalid || undefined}\n        aria-describedby={invalid ? errorId : undefined}\n        trailing={\n          <Popover\n            align=\"end\"\n            open={calendarOpen}\n            onOpenChange={setCalendarOpen}\n            className={CALENDAR_POPOVER_CLASS}\n            aria-label={strings.calendarOf(ariaLabel)}\n            trigger={\n              <IconButton\n                label={strings.chooseFromCalendar}\n                icon={<Icon name=\"calendar\" size=\"sm\" />}\n                disabledReason={disabled ? strings.locked : undefined}\n                size=\"sm\"\n              />\n            }\n          >\n            <DateCalendar\n              value={isoToLocalDate(value)}\n              onValueChange={(picked) => {\n                const iso = picked instanceof Date ? localDateToIso(picked) : null;\n                setInvalid(false);\n                setDraft(display(iso, locale));\n                if (iso !== value) onValueChange(iso);\n                setCalendarOpen(false);\n              }}\n            />\n          </Popover>\n        }\n      />\n      {invalid ? (\n        <p id={errorId} className=\"text-2xs text-danger-text\">\n          {invalidMessage ?? strings.invalidMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/* ============================================================================\n   DATE-TIME FIELD — the same typeable date, plus a time.\n\n   The date half IS a `DateField`, so everything above holds for it. The time\n   half is the platform's own time input: a real time picker on every phone and\n   desktop browser, keyboard-drivable, and localised, which a hand-built one\n   would have to re-earn.\n\n   THE VALUE IS AN INSTANT: an ISO string with its zone (`toISOString()`), read\n   and written in the reader's LOCAL zone — the same zone `formatDateTime` shows\n   it in. A date with no time yet is midnight; clearing the date clears the whole\n   value.\n   ========================================================================= */\n\n/** An ISO instant to the local calendar date and `HH:MM` it shows as. */\nfunction splitInstant(iso: string | null): { date: string | null; time: string } {\n  if (!iso) return { date: null, time: \"\" };\n  const at = new Date(iso);\n  if (Number.isNaN(at.getTime())) return { date: null, time: \"\" };\n  return { date: localDateToIso(at), time: `${pad(at.getHours())}:${pad(at.getMinutes())}` };\n}\n\n/** A local calendar date and `HH:MM` back to the instant, as ISO. */\nfunction joinInstant(date: string, time: string): string | null {\n  const day = isoToLocalDate(date);\n  if (!day) return null;\n  const [hours, minutes] = (time || \"00:00\").split(\":\").map(Number);\n  day.setHours(hours ?? 0, minutes ?? 0, 0, 0);\n  return day.toISOString();\n}\n\nexport interface DateTimeFieldProps {\n  /** The stored ISO instant, or null for none. */\n  value: string | null;\n  /** Reports the new ISO instant, or null when the date was cleared. Only on commit. */\n  onValueChange: (value: string | null) => void;\n  /** Told while either half has focus. */\n  onEditingChange?: (editing: boolean) => void;\n  \"aria-label\": string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function DateTimeField({\n  value,\n  onValueChange,\n  onEditingChange,\n  \"aria-label\": ariaLabel,\n  disabled = false,\n  className,\n}: DateTimeFieldProps) {\n  const strings = useUiStrings().dateField;\n  const current = splitInstant(value);\n  const [timeDraft, setTimeDraft] = useState<string | null>(null);\n  const time = timeDraft ?? current.time;\n\n  /* Focus is reported for the PAIR: moving from the date box to the time box is\n     still editing, so only focus leaving the group entirely ends it. */\n  const onGroupFocus = () => onEditingChange?.(true);\n  const onGroupBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) onEditingChange?.(false);\n  };\n\n  return (\n    <div className={cn(\"flex flex-wrap items-start gap-2\", className)} onFocus={onGroupFocus} onBlur={onGroupBlur}>\n      <DateField\n        className=\"min-w-[11rem] flex-1\"\n        value={current.date}\n        aria-label={strings.dateOf(ariaLabel)}\n        disabled={disabled}\n        onValueChange={(date) => {\n          onValueChange(date === null ? null : joinInstant(date, time));\n        }}\n      />\n      <Input\n        type=\"time\"\n        step={60}\n        className=\"w-[8.5rem]\"\n        aria-label={strings.timeOf(ariaLabel)}\n        disabled={disabled || current.date === null}\n        value={time}\n        onChange={(event) => {\n          setTimeDraft(event.currentTarget.value);\n        }}\n        onBlur={() => {\n          if (timeDraft !== null && current.date !== null && timeDraft !== current.time) {\n            onValueChange(joinInstant(current.date, timeDraft));\n          }\n          setTimeDraft(null);\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["isoToLocalDate","iso","year","month","day","parsePlainDate","localDateToIso","date","isoDateString","display","locale","formatDate","DateField","value","onValueChange","onEditingChange","ariaLabel","placeholder","disabled","invalidMessage","className","strings","useUiStrings","errorId","useId","useUiLocale","editing","setEditing","useState","draft","setDraft","invalid","setInvalid","calendarOpen","setCalendarOpen","shown","commit","text","trimmed","parseDate","onFocus","onBlur","event","onKeyDown","cn","jsx","Input","Popover","CALENDAR_POPOVER_CLASS","IconButton","Icon","DateCalendar","picked","splitInstant","at","pad","joinInstant","time","hours","minutes","DateTimeField","current","timeDraft","setTimeDraft","onGroupFocus","onGroupBlur","jsxs"],"mappings":"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"}

package/dist/components/DatePicker.js

@@ -0,0 +1,56 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as i } from "../lib/cn.js";
+import { dateFormat as w } from "../lib/intl-cache.js";
+import { Icon as A } from "./Icon.js";
+import { Button as C } from "./Button.js";
+import { Popover as D } from "./Popover.js";
+import { DateCalendar as L, CALENDAR_POPOVER_CLASS as O } from "./DateCalendar.js";
+import { useUiLocale as R, useUiStrings as S } from "../lib/i18n/provider.js";
+function z({
+  value: n,
+  onValueChange: c,
+  range: o = !1,
+  min: f,
+  max: u,
+  isDateDisabled: p,
+  placeholder: d,
+  disabled: h = !1,
+  format: g,
+  clearable: x = !0,
+  className: N
+}) {
+  const P = R(), l = S().datePicker, r = g ?? ((y) => w(P, { day: "numeric", month: "short", year: "numeric" }).format(y)), a = n ?? null, e = o ? a ?? { from: null, to: null } : null, s = o ? null : a, m = o ? e?.from ? e.to ? l.range(r(e.from), r(e.to)) : l.rangeOpen(r(e.from)) : null : s ? r(s) : null;
+  return /* @__PURE__ */ t(
+    D,
+    {
+      align: "start",
+      className: i(O, N),
+      trigger: /* @__PURE__ */ t(
+        C,
+        {
+          variant: "outline",
+          disabled: h,
+          className: "w-full justify-between font-normal",
+          leadingIcon: /* @__PURE__ */ t(A, { name: "calendar", size: "sm", className: "text-tertiary" }),
+          children: /* @__PURE__ */ t("span", { className: i("flex-1 text-left", !m && "text-field-placeholder"), children: m ?? d ?? l.placeholder })
+        }
+      ),
+      children: /* @__PURE__ */ t(
+        L,
+        {
+          value: n,
+          onValueChange: c,
+          range: o,
+          min: f,
+          max: u,
+          isDateDisabled: p,
+          clearable: x
+        }
+      )
+    }
+  );
+}
+export {
+  z as DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { dateFormat } from \"../lib/intl-cache\";\nimport { Icon } from \"./Icon\";\nimport { Button } from \"./Button\";\nimport { Popover } from \"./Popover\";\nimport { CALENDAR_POPOVER_CLASS, DateCalendar, type DateRange } from \"./DateCalendar\";\n\n/* ============================================================================\n   DATE PICKER — a button that opens the calendar.\n\n   For choosing a date (or a range) by pointing. The calendar itself — the\n   timezone-safe month grid, the fixed six-week frame, the keyboard — is\n   `DateCalendar`, shared with `DateField`, the typeable date box (SG-906). Use\n   `DateField` where a person may know the date and want to type it; use this\n   where picking from a calendar is the whole interaction (scheduling, ranges).\n   ========================================================================= */\n\nexport type { DateRange };\n\nexport interface DatePickerProps {\n  /** A single date, or a range when `range` is set. */\n  value?: Date | DateRange | null;\n  onValueChange?: (value: Date | DateRange | null) => void;\n  range?: boolean;\n  min?: Date;\n  max?: Date;\n  /** Disable specific days — weekends, holidays, taken slots. */\n  isDateDisabled?: (date: Date) => boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  /** How the chosen date reads in the trigger. */\n  format?: (date: Date) => string;\n  /** Draw the Clear button (default). `false` for a field that must always hold a date: no Clear button, and the picker never emits null. */\n  clearable?: boolean;\n  className?: string;\n}\n\nexport function DatePicker({\n  value,\n  onValueChange,\n  range = false,\n  min,\n  max,\n  isDateDisabled,\n  placeholder,\n  disabled = false,\n  format,\n  clearable = true,\n  className,\n}: DatePickerProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().datePicker;\n  const shown = format ?? ((date: Date) => dateFormat(locale, { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(date));\n  const selected = value ?? null;\n  const asRange = range ? ((selected as DateRange | null) ?? { from: null, to: null }) : null;\n  const single = range ? null : (selected as Date | null);\n\n  const label = range\n    ? asRange?.from\n      ? asRange.to\n        ? strings.range(shown(asRange.from), shown(asRange.to))\n        : strings.rangeOpen(shown(asRange.from))\n      : null\n    : single\n      ? shown(single)\n      : null;\n\n  return (\n    <Popover\n      align=\"start\"\n      className={cn(CALENDAR_POPOVER_CLASS, className)}\n      trigger={\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className=\"w-full justify-between font-normal\"\n          leadingIcon={<Icon name=\"calendar\" size=\"sm\" className=\"text-tertiary\" />}\n        >\n          <span className={cn(\"flex-1 text-left\", !label && \"text-field-placeholder\")}>{label ?? placeholder ?? strings.placeholder}</span>\n        </Button>\n      }\n    >\n      <DateCalendar\n        value={value}\n        onValueChange={onValueChange}\n        range={range}\n        min={min}\n        max={max}\n        isDateDisabled={isDateDisabled}\n        clearable={clearable}\n      />\n    </Popover>\n  );\n}\n"],"names":["DatePicker","value","onValueChange","range","min","max","isDateDisabled","placeholder","disabled","format","clearable","className","locale","useUiLocale","strings","useUiStrings","shown","date","dateFormat","selected","asRange","single","label","jsx","Popover","cn","CALENDAR_POPOVER_CLASS","Button","Icon","DateCalendar"],"mappings":";;;;;;;;AAsCO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AACF,GAAoB;AAClB,QAAMC,IAASC,EAAA,GACTC,IAAUC,IAAe,YACzBC,IAAQP,MAAW,CAACQ,MAAeC,EAAWN,GAAQ,EAAE,KAAK,WAAW,OAAO,SAAS,MAAM,UAAA,CAAW,EAAE,OAAOK,CAAI,IACtHE,IAAWlB,KAAS,MACpBmB,IAAUjB,IAAUgB,KAAiC,EAAE,MAAM,MAAM,IAAI,SAAU,MACjFE,IAASlB,IAAQ,OAAQgB,GAEzBG,IAAQnB,IACViB,GAAS,OACPA,EAAQ,KACNN,EAAQ,MAAME,EAAMI,EAAQ,IAAI,GAAGJ,EAAMI,EAAQ,EAAE,CAAC,IACpDN,EAAQ,UAAUE,EAAMI,EAAQ,IAAI,CAAC,IACvC,OACFC,IACEL,EAAMK,CAAM,IACZ;AAEN,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAWC,EAAGC,GAAwBf,CAAS;AAAA,MAC/C,SACE,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAAnB;AAAA,UACA,WAAU;AAAA,UACV,+BAAcoB,GAAA,EAAK,MAAK,YAAW,MAAK,MAAK,WAAU,iBAAgB;AAAA,UAEvE,UAAA,gBAAAL,EAAC,QAAA,EAAK,WAAWE,EAAG,oBAAoB,CAACH,KAAS,wBAAwB,GAAI,UAAAA,KAASf,KAAeO,EAAQ,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAI9H,UAAA,gBAAAS;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,OAAA5B;AAAA,UACA,eAAAC;AAAA,UACA,OAAAC;AAAA,UACA,KAAAC;AAAA,UACA,KAAAC;AAAA,UACA,gBAAAC;AAAA,UACA,WAAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/DateTimeText.js

@@ -0,0 +1,19 @@
+import { jsx as i, Fragment as m } from "react/jsx-runtime";
+import { useHydrated as a } from "../lib/use-hydrated.js";
+import { useUiLocale as c } from "../lib/i18n/provider.js";
+import { formatDateTime as o } from "../lib/values/datetime.js";
+const n = "UTC", s = n;
+function u(e) {
+  const r = c();
+  if (a()) return o(e, r);
+  const t = o(e, r, { zone: s });
+  return t === String(e) ? t : `${t} ${n}`;
+}
+function U({ at: e }) {
+  return /* @__PURE__ */ i(m, { children: u(e) });
+}
+export {
+  U as DateTimeText,
+  u as useDateTimeText
+};
+//# sourceMappingURL=DateTimeText.js.map

package/dist/components/DateTimeText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeText.js","sources":["../../src/components/DateTimeText.tsx"],"sourcesContent":["import { useUiLocale } from \"../lib/i18n\";\nimport { useHydrated } from \"../lib/use-hydrated\";\nimport { formatDateTime } from \"../lib/values\";\n\n/* ----------------------------------------------------------------------------\n   DATE-TIME TEXT. DXUI-10.\n\n   An instant as the locale's absolute date and clock, in a way a prerendering app can hydrate. `formatDateTime` prints the\n   clock of the zone the code is running in, so a page rendered at build time in one zone and opened by a visitor in another\n   hydrated different text (React error #418, the server HTML thrown away). A prerender has no visitor to read, so until\n   the client has taken over (`useHydrated`: false on a server and while hydrating) the text is the instant in UTC with an\n   explicit label: a function of the instant and the locale alone, never of the zone or of today's date, so the server and the\n   first client render agree in every zone and on every visit. After that the visitor's own `formatDateTime` text replaces it,\n   exactly as a client-only app has always drawn it (no label, no wrapper element, no layout change).\n\n   Every absolute time a library component draws into JSX comes through here (`DateTimeText`, or `useDateTimeText` when the\n   text goes into a sentence); `formatDateTime` stays the call for a string that is not rendered (a title, a test).\n   -------------------------------------------------------------------------- */\n\n/** The label that tells a reader the prerendered clock is UTC, not their own. */\n// I18N-ALLOW: UTC is the time standard's own abbreviation, written the same in every locale\nconst UTC_LABEL = \"UTC\";\n/** The IANA zone the label names; the same word, so it is the label's own constant. */\nconst UTC_ZONE = UTC_LABEL;\n\n/**\n * The text `DateTimeText` draws. An unparseable string is returned unchanged, as `formatDateTime` does.\n */\nexport function useDateTimeText(at: string | number): string {\n  const locale = useUiLocale();\n  const hydrated = useHydrated();\n  if (hydrated) return formatDateTime(at, locale);\n  const utc = formatDateTime(at, locale, { zone: UTC_ZONE });\n  const unparseable = utc === String(at); // formatDateTime hands an unparseable string back unchanged: nothing to label\n  return unparseable ? utc : `${utc} ${UTC_LABEL}`;\n}\n\nexport interface DateTimeTextProps {\n  /** The instant: an ISO string or epoch millis. An unparseable string is drawn as given. */\n  at: string | number;\n}\n\nexport function DateTimeText({ at }: DateTimeTextProps) {\n  return <>{useDateTimeText(at)}</>;\n}\n"],"names":["UTC_LABEL","UTC_ZONE","useDateTimeText","at","locale","useUiLocale","useHydrated","formatDateTime","utc","DateTimeText","jsx","Fragment"],"mappings":";;;;AAqBA,MAAMA,IAAY,OAEZC,IAAWD;AAKV,SAASE,EAAgBC,GAA6B;AAC3D,QAAMC,IAASC,EAAA;AAEf,MADiBC,EAAA,EACH,QAAOC,EAAeJ,GAAIC,CAAM;AAC9C,QAAMI,IAAMD,EAAeJ,GAAIC,GAAQ,EAAE,MAAMH,GAAU;AAEzD,SADoBO,MAAQ,OAAOL,CAAE,IAChBK,IAAM,GAAGA,CAAG,IAAIR,CAAS;AAChD;AAOO,SAASS,EAAa,EAAE,IAAAN,KAAyB;AACtD,SAAO,gBAAAO,EAAAC,GAAA,EAAG,UAAAT,EAAgBC,CAAE,GAAE;AAChC;"}

package/dist/components/DescriptionList.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as n } from "../lib/cn.js";
+function d({ term: t, children: i, mono: r, className: m }) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: n(
+        "grid grid-cols-[minmax(0,min(12rem,40%))_minmax(0,1fr)] items-baseline gap-x-4 gap-y-1 py-1.5",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ e("dt", { className: "truncate text-xs font-medium text-tertiary", children: t }),
+        /* @__PURE__ */ e("dd", { className: n("min-w-0 break-words text-sm text-primary", r && "font-mono text-2xs"), children: i })
+      ]
+    }
+  );
+}
+function u({ entries: t, children: i, className: r, ref: m, ...s }) {
+  return /* @__PURE__ */ e("dl", { ref: m, className: n("flex flex-col", r), ...s, children: t ? t.map(({ key: a, term: c, value: o, mono: x }) => /* @__PURE__ */ e(d, { term: c, mono: x, children: o }, a)) : i });
+}
+export {
+  u as DescriptionList,
+  d as DescriptionListItem
+};
+//# sourceMappingURL=DescriptionList.js.map

package/dist/components/DescriptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.js","sources":["../../src/components/DescriptionList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ============================================================================\n   DESCRIPTION LIST — a term/description pair, and the list that holds them.\n\n   NOT A HAND-ROLL, A NAMED GAP. gpt-manager's Demand Desk had written this\n   exact shape at least twice (SG-833's architectural audit found it a third\n   time in a free-form key/value bag) and said so in its own source: \"Nothing\n   in `@50arms/ui` renders a description list... `DefinitionRow` and\n   `FreeFormDetails` stay app code — but there is now ONE of each rather than\n   three near-copies.\" This is that primitive, so the app copy can go.\n\n   `<dl>`/`<dt>`/`<dd>` SEMANTICS MATTER HERE, not merely for validity. The\n   pairs this renders — a claim's accident date, a diagnostic's raw category, a\n   run's payload keys — genuinely ARE definitions, and a screen reader\n   announcing \"Accident date, definition, November 11 2025\" is a real\n   difference from a wall of unstructured text.\n\n   THE RESPONSIVE TERM COLUMN is carried over unchanged from the app's own\n   `DefinitionRow`, including its own fix: a flat `minmax(0,12rem)` term column\n   claims a fixed 192px a narrow row (a phone-width panel sharing its row with\n   a delete icon) cannot afford, wrapping short values character-by-character.\n   `min(12rem,40%)` keeps the full fixed width on a normal-width row (where\n   40% of the container is always >= 12rem) and shrinks proportionally once the\n   row itself gets tight, so the description column always keeps the majority\n   of the space.\n   ========================================================================= */\n\nexport interface DescriptionListItemProps {\n  /** The label. Kept short — it truncates rather than wrapping. */\n  term: ReactNode;\n  /** The value. */\n  children: ReactNode;\n  /** Machine text (a raw key, a stored id) rather than prose written for a reader. */\n  mono?: boolean;\n  className?: string;\n}\n\n/** One term/description pair. Renders as a `<div>` — mount it inside a `DescriptionList` (or any `<dl>`) for real list semantics. */\nexport function DescriptionListItem({ term, children, mono, className }: DescriptionListItemProps) {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[minmax(0,min(12rem,40%))_minmax(0,1fr)] items-baseline gap-x-4 gap-y-1 py-1.5\",\n        className,\n      )}\n    >\n      <dt className=\"truncate text-xs font-medium text-tertiary\">{term}</dt>\n      <dd className={cn(\"min-w-0 break-words text-sm text-primary\", mono && \"font-mono text-2xs\")}>\n        {children}\n      </dd>\n    </div>\n  );\n}\n\n/** One entry of the data-driven form — see `DescriptionList`'s `entries` prop. */\nexport interface DescriptionListEntry {\n  key: string;\n  term: ReactNode;\n  /** Rendered as-is. Pass a formatted string for a raw value — this does not stringify for you. */\n  value: ReactNode;\n  mono?: boolean;\n}\n\nexport interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDListElement>, \"children\"> {\n  /**\n   * Data-driven form — one `DescriptionListItem` per entry, in order. Use\n   * this for a bag of keys the caller does not know ahead of time (a\n   * diagnostic's context, an error payload) — the shape `FreeFormDetails`\n   * covered in the app. Omit `entries` and pass `children` instead to compose\n   * `DescriptionListItem`s directly, for a fixed, known set of fields.\n   */\n  entries?: readonly DescriptionListEntry[];\n  children?: ReactNode;\n  ref?: Ref<HTMLDListElement>;\n}\n\n/**\n * The list itself — a `<dl>` wrapper, empty of layout beyond stacking its\n * rows. `Card`'s own padding/`divide-y` and any other framing stay the\n * caller's choice via `className`, the same way the app's own usage put\n * `DefinitionRow`s inside a `Card` rendering as `<dl>` rather than folding\n * that framing in here.\n */\nexport function DescriptionList({ entries, children, className, ref, ...props }: DescriptionListProps) {\n  return (\n    <dl ref={ref} className={cn(\"flex flex-col\", className)} {...props}>\n      {entries\n        ? entries.map(({ key, term, value, mono }) => (\n            <DescriptionListItem key={key} term={term} mono={mono}>\n              {value}\n            </DescriptionListItem>\n          ))\n        : children}\n    </dl>\n  );\n}\n"],"names":["DescriptionListItem","term","children","mono","className","jsxs","cn","jsx","DescriptionList","entries","ref","props","key","value"],"mappings":";;AAwCO,SAASA,EAAoB,EAAE,MAAAC,GAAM,UAAAC,GAAU,MAAAC,GAAM,WAAAC,KAAuC;AACjG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,8CAA8C,UAAAN,GAAK;AAAA,QACjE,gBAAAM,EAAC,QAAG,WAAWD,EAAG,4CAA4CH,KAAQ,oBAAoB,GACvF,UAAAD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AA+BO,SAASM,EAAgB,EAAE,SAAAC,GAAS,UAAAP,GAAU,WAAAE,GAAW,KAAAM,GAAK,GAAGC,KAA+B;AACrG,SACE,gBAAAJ,EAAC,MAAA,EAAG,KAAAG,GAAU,WAAWJ,EAAG,iBAAiBF,CAAS,GAAI,GAAGO,GAC1D,UAAAF,IACGA,EAAQ,IAAI,CAAC,EAAE,KAAAG,GAAK,MAAAX,GAAM,OAAAY,GAAO,MAAAV,EAAA,MAC/B,gBAAAI,EAACP,GAAA,EAA8B,MAAAC,GAAY,MAAAE,GACxC,UAAAU,EAAA,GADuBD,CAE1B,CACD,IACDV,EAAA,CACN;AAEJ;"}