@eifi1/ui-kit 0.20.1 → 0.22.0

package/dist/components/ui.js

@@ -10,6 +10,14 @@ import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
 import { useCommitReason } from "./write-lock.js";
+import { mergeDescribedBy } from "./choice-parts.js";
+import {
+  EndHintRow,
+  FieldCaption,
+  LockedReason,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
 const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const BUTTON_SIZES = {
   md: "gap-2 px-3 py-2 text-sm",
@@ -766,7 +774,77 @@ function resolvePasswordRevealLabels(partial) {
   if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;
   return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
 }
+const DEFAULT_CHARACTER_COUNT_LABELS = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => left === 1 ? "1 character left" : `${left} characters left`,
+  limitReached: "Character limit reached"
+};
+function textLength(value) {
+  return value === void 0 || value === null ? 0 : String(value).length;
+}
+function useTypedLength(value, defaultValue) {
+  const [typed, setTyped] = useState(() => textLength(defaultValue));
+  return { used: value !== void 0 ? textLength(value) : typed, track: (text) => setTyped(text.length) };
+}
+function nearLimitAt(max) {
+  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));
+}
+function countZone(used, max) {
+  if (used >= max) return "limit";
+  return max - used <= nearLimitAt(max) ? "near" : "ok";
+}
+function CharacterCount({
+  id,
+  used,
+  max,
+  labels,
+  caption
+}) {
+  const zone = countZone(used, max);
+  const [said, setSaid] = useState({ zone, text: "" });
+  if (said.zone !== zone) {
+    setSaid({
+      zone,
+      text: zone === "near" ? labels.remaining(max - used) : zone === "limit" ? labels.limitReached : ""
+    });
+  }
+  return (
+    // `relative` holds the sr-only region (see sr-only-containment.test).
+    /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: caption }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "shrink-0 text-[11px] leading-tight tabular-nums",
+            zone === "limit" ? "text-[var(--danger)]" : zone === "near" ? "text-[var(--warning)]" : "text-[var(--text-muted)]"
+          ),
+          children: [
+            used,
+            "/",
+            max
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id, hidden: true, children: labels.count(used, max) }),
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: said.text })
+    ] })
+  );
+}
+function fieldBelow(hint, counter, errorEl) {
+  if (counter === null && hint.captionText === void 0 && errorEl === null) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    counter ?? /* @__PURE__ */ jsx(FieldCaption, { parts: hint }),
+    errorEl
+  ] });
+}
+const FLOATING_PLACEHOLDER_ON_FOCUS = "focus:placeholder:text-[var(--text-placeholder)]";
+const hasPlaceholderText = (placeholder) => placeholder !== void 0 && placeholder.trim() !== "";
 const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
+function useCharacterCountLabels(prop) {
+  return useKitLabels("characterCount", DEFAULT_CHARACTER_COUNT_LABELS, prop);
+}
 const Input = forwardRef(function Input2(props, ref) {
   const {
     className,
@@ -778,18 +856,43 @@ const Input = forwardRef(function Input2(props, ref) {
     variant = "field",
     invalid,
     error,
+    hint,
+    showCount,
+    countLabels,
     passwordLabels,
     ...rest
   } = props;
-  const reserve = "error" in props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
+  const countId = useId();
+  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const maxLength = rest.maxLength;
+  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
+  const length = useTypedLength(rest.value, rest.defaultValue);
+  const countText = useCharacterCountLabels(countLabels);
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    // Caller's, caption, count — then the error, appended by the hook.
+    mergeDescribedBy(hintParts.describedBy, counting && countId),
     rest["aria-invalid"]
   );
+  const counter = counting ? /* @__PURE__ */ jsx(
+    CharacterCount,
+    {
+      id: countId,
+      used: length.used,
+      max: maxLength,
+      labels: countText,
+      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
+    }
+  ) : null;
+  const below = fieldBelow(hintParts, counter, errorEl);
+  const onChange = counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
   const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
   const isPassword = type === "password";
   const [revealed, setRevealed] = useState(false);
@@ -815,8 +918,10 @@ const Input = forwardRef(function Input2(props, ref) {
     }
   ) : null;
   if (label === void 0) {
+    const endHint = hintParts.labelHint;
+    const ownClass = endHint === void 0 ? className : void 0;
     if (!isPassword) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
         "input",
         {
           ref,
@@ -827,11 +932,12 @@ const Input = forwardRef(function Input2(props, ref) {
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
           onClick: handleClick,
-          className: cn(FIELD_BASE, className, inputClassName, isInvalid && FIELD_INVALID)
+          onChange,
+          className: cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID)
         }
-      ) });
+      ) }) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", ownClass), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -842,41 +948,74 @@ const Input = forwardRef(function Input2(props, ref) {
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
+          onChange,
           className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID)
         }
       ),
       revealToggle
-    ] }) });
+    ] }) }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        id: fieldId,
-        type: effectiveType,
-        placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : " ",
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        onClick: handleClick,
-        className: cn(
-          asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
-          isPassword && "pe-9",
-          inputClassName,
-          isInvalid && FIELD_INVALID
-        )
-      }
-    ),
-    revealToggle
-  ] }) });
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(
+    FloatingField,
+    {
+      className,
+      htmlFor: fieldId,
+      label,
+      srOnlyLabel: asDisplay,
+      hint: hintParts.labelHint,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: fieldId,
+            type: effectiveType,
+            placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : ownPlaceholder ? placeholder : " ",
+            ...rest,
+            "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+            "aria-describedby": describedBy,
+            onClick: handleClick,
+            onChange,
+            className: cn(
+              asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),
+              isPassword && "pe-9",
+              inputClassName,
+              isInvalid && FIELD_INVALID
+            )
+          }
+        ),
+        revealToggle
+      ]
+    }
+  ) });
 });
 Input.displayName = "Input";
 const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
+const LOCKED_SELECT_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape", "Shift"]);
+const FIELD_LOCKED = "cursor-not-allowed bg-[var(--bg-surface-2)] text-[var(--text-muted)]";
 const Select = forwardRef(function Select2(props, ref) {
-  const { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest } = props;
-  const reserve = "error" in props;
+  const {
+    className,
+    label,
+    id,
+    children,
+    invalid,
+    error,
+    hint,
+    size,
+    selectClassName,
+    disabledReason,
+    commit,
+    onMouseDown,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
   const nativeSize = typeof size === "number" ? size : void 0;
   const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
   const small = size === "sm" && label === void 0;
@@ -887,16 +1026,29 @@ const Select = forwardRef(function Select2(props, ref) {
     error,
     invalid,
     // The caption goes in BEFORE the error — the standing advice first, the news
-    // second, the order useFieldError keeps for a caller's own description.
-    textHint ? rest["aria-describedby"] ? `${rest["aria-describedby"]} ${hintId}` : hintId : rest["aria-describedby"],
+    // second, the order useFieldError keeps for a caller's own description. A lock's
+    // reason sits between the two.
+    mergeDescribedBy(rest["aria-describedby"], textHint && hintId, locked && lock.reasonId),
     rest["aria-invalid"]
   );
   const below = textHint || errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
     textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
     errorEl
   ] }) : null;
-  const chevron = rest.disabled || listBox ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
+  const chevron = rest.disabled || listBox || locked ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
   const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
+  const interaction = locked ? {
+    disabled: void 0,
+    "aria-disabled": true,
+    onMouseDown: (e) => e.preventDefault(),
+    onKeyDown: (e) => {
+      if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();
+    },
+    onChange: () => {
+    }
+  } : { onMouseDown, onKeyDown, onChange };
+  const boxClass = locked ? void 0 : className;
+  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: cn("block", className), children: box }) : box;
   if (label === void 0) {
     const select = /* @__PURE__ */ jsx(
       "select",
@@ -905,6 +1057,7 @@ const Select = forwardRef(function Select2(props, ref) {
         id,
         size: nativeSize,
         ...rest,
+        ...interaction,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
         className: cn(
@@ -912,6 +1065,7 @@ const Select = forwardRef(function Select2(props, ref) {
           dress,
           listBox && "py-0",
           small && SELECT_SM,
+          locked && FIELD_LOCKED,
           selectClassName,
           isInvalid && FIELD_INVALID
         ),
@@ -919,60 +1073,100 @@ const Select = forwardRef(function Select2(props, ref) {
       }
     );
     if (hasContent(hint) && !textHint) {
-      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-          select,
-          chevron
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
-      ] }) });
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", boxClass), children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+            select,
+            chevron
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+        ] })
+      ) });
     }
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      select,
-      chevron
-    ] }) });
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+      /* @__PURE__ */ jsxs("div", { className: cn("relative", boxClass), children: [
+        select,
+        chevron
+      ] })
+    ) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint: textHint ? void 0 : hint, children: [
-    /* @__PURE__ */ jsx(
-      "select",
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+    /* @__PURE__ */ jsxs(
+      FloatingField,
       {
-        ref,
-        id: fieldId,
-        size: nativeSize,
-        ...rest,
-        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-        "aria-describedby": describedBy,
-        className: cn(
-          FIELD_BASE,
-          // The floated label takes the top strip of a list box too, so its first
-          // row starts under the label rather than behind it. No bottom padding — see
-          // `dress`.
-          listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
-          "peer",
-          dress,
-          selectClassName,
-          isInvalid && FIELD_INVALID
-        ),
-        children
+        className: boxClass,
+        htmlFor: fieldId,
+        label,
+        staticLabel: true,
+        hint: textHint ? void 0 : hint,
+        children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              size: nativeSize,
+              ...rest,
+              ...interaction,
+              "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+              "aria-describedby": describedBy,
+              className: cn(
+                FIELD_BASE,
+                // The floated label takes the top strip of a list box too, so its first
+                // row starts under the label rather than behind it. No bottom padding — see
+                // `dress`.
+                listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
+                "peer",
+                dress,
+                locked && FIELD_LOCKED,
+                selectClassName,
+                isInvalid && FIELD_INVALID
+              ),
+              children
+            }
+          ),
+          chevron
+        ]
       }
-    ),
-    chevron
-  ] }) });
+    )
+  ) });
 });
 Select.displayName = "Select";
 const Textarea = forwardRef(function Textarea2(props, ref) {
-  const { className, label, id, placeholder, invalid, error, ...rest } = props;
-  const reserve = "error" in props;
+  const { className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
+  const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
+  const countId = useId();
+  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const maxLength = rest.maxLength;
+  const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
+  const length = useTypedLength(rest.value, rest.defaultValue);
+  const countText = useCharacterCountLabels(countLabels);
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    mergeDescribedBy(hintParts.describedBy, counting && countId),
     rest["aria-invalid"]
   );
+  const counter = counting ? /* @__PURE__ */ jsx(
+    CharacterCount,
+    {
+      id: countId,
+      used: length.used,
+      max: maxLength,
+      labels: countText,
+      caption: /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts, className: "mt-0" })
+    }
+  ) : null;
+  const below = fieldBelow(hintParts, counter, errorEl);
+  const onChange = counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
   if (label === void 0) {
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(
+    const endHint = hintParts.labelHint;
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className, children: /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
@@ -981,20 +1175,27 @@ const Textarea = forwardRef(function Textarea2(props, ref) {
         ...rest,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
-        className: cn(FIELD_BASE, className, isInvalid && FIELD_INVALID)
+        onChange,
+        className: cn(FIELD_BASE, endHint === void 0 && className, isInvalid && FIELD_INVALID)
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, reserve, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
       id: fieldId,
-      placeholder: " ",
+      placeholder: ownPlaceholder ? placeholder : " ",
       ...rest,
       "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
       "aria-describedby": describedBy,
-      className: cn(FLOATING_INPUT_CLASS, isInvalid && FIELD_INVALID)
+      onChange,
+      className: cn(
+        FLOATING_INPUT_CLASS,
+        ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS,
+        isInvalid && FIELD_INVALID
+      )
     }
   ) }) });
 });
@@ -1546,6 +1747,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  DEFAULT_CHARACTER_COUNT_LABELS,
   DEFAULT_PASSWORD_REVEAL_LABELS,
   DEFAULT_TABS_LABELS,
   EmptyState,