@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/input.d.ts

@@ -0,0 +1,98 @@
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import type { CommitScope } from "./write-lock.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CharacterCountLabels, type PasswordRevealLabels } from "./field-base.js";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    /** Classes for the `<input>` itself, as distinct from `className`, which
+     *  styles the field WRAPPER once a `label` turns this into a FloatingField.
+     *  Without it a labelled Input had no way to reach its own element — so
+     *  `tabular-nums` on a numeric text field, which NumberInput has supported
+     *  all along through the identically named prop, was simply unavailable. */
+    inputClassName?: string;
+    /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a
+     *  heading. For the one field a form is about (a feedback subject, an account
+     *  name), never for a stack of them. Labelled fields only: the label is what
+     *  the placeholder falls back to once it goes `sr-only`. */
+    variant?: "field" | "display";
+    /** The field is required and unanswered, or holds something that cannot be
+     *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn
+     *  since feedback #235.
+     *
+     *  It exists here because writing `aria-invalid` by hand did NOT do this. The
+     *  attribute spreads onto the element and nothing styles it — there is no
+     *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —
+     *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader
+     *  and painted the field exactly as if it were fine. Setting the prop sets the
+     *  attribute too, so the two can no longer be spelled separately. */
+    invalid?: boolean;
+    /** What is wrong with the value, in the caller's own words ("That IBAN has 21
+     *  digits"). Rendered under the field, pointed at by the control's
+     *  `aria-describedby` — MERGED with any the caller already passed — and implies
+     *  `invalid`, so the field paints as well as announces. `invalid` alone still
+     *  covers the case where the message lives elsewhere. See {@link useFieldError}. */
+    error?: ReactNode;
+    /**
+     * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the
+     * app built the caption by hand under each field, and half of those never reached a
+     * screen reader). The {@link Select} rule, so every field reads alike:
+     *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with
+     *    `aria-describedby` — after the caller's own ids, before the error's;
+     *  - anything else (a {@link FieldHint} "?") rides the label line beside the
+     *    animated label, as NumberInput's does — or, on a field with no label, sits at the
+     *    field's end edge outside the box, and `className` then styles that row.
+     */
+    hint?: ReactNode;
+    /**
+     * A live "12/80" under the field, with `maxLength` (keksdose K11 — the broadcast,
+     * support and handoff-note fields counted by hand). Read with the field as "12 of 80
+     * characters", and announced politely only on entering the last stretch and on
+     * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored
+     * without a `maxLength`: a count with no limit is not what this answers. Counts
+     * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;
+     * uncontrolled, `defaultValue` and then every change event — a value written from
+     * outside without one (a form library's `reset`) shows from the next keystroke.
+     */
+    showCount?: boolean;
+    /** The counter's words. See {@link CharacterCountLabels}. */
+    countLabels?: Partial<CharacterCountLabels>;
+    /** Names for the password reveal toggle, English by default — it is the one
+     *  string this component renders on its own behalf, and a German form was
+     *  reading it out in English. See {@link PasswordRevealLabels}. */
+    passwordLabels?: Partial<PasswordRevealLabels>;
+    /**
+     * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a text field
+     * that SAVES itself: a name committed on blur (0.34, KS U10 — Kurvenschmiede's segment
+     * and profile names, behind a local `CommitInput`). `disabled` takes the field out of
+     * the tab order, so the reason never reached a keyboard.
+     *
+     * With a reason the field stays in the tab order and shows its value, `readOnly` (the
+     * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled` — NumberInput's
+     * lock (0.33.1), Autocomplete's. Nothing a save listens to is reported: not `onChange`,
+     * not `onBlur` (on a field that saves itself, blur IS the save), and not Enter, which is
+     * swallowed so the field does not submit the form around it; the caller's `onKeyDown`
+     * still hears every other key. The reason is a line under the field at Large and on a
+     * touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the
+     * input's `aria-describedby`, between the caption and the error. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line
+     * under the field at Large and on a touch screen, the tooltip otherwise (§4 "No fact
+     * only in a tooltip"; DUP-3, refactor audit 2026-10).
+     */
+    disabledReasonDisplay?: DisabledReasonDisplay;
+    /**
+     * This field COMMITS — {@link Button}'s `commit`: under a locked
+     * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason
+     * (which wins over its own). A field whose value only reaches the server through its
+     * form's Save leaves this off and stays editable under the lock — the Save takes
+     * `commit`. No provider, or an unlocked one: no effect.
+     */
+    commit?: CommitScope;
+    /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): as
+     *  `forwardRef`, with a `displayName` line beside it, this module could not drop an
+     *  unused component, and `{ Spinner }` brought Input, Select and Textarea along. */
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function Input(props: InputProps): import("react").JSX.Element;

package/dist/components/input.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import {
+  EndHintRow,
+  FieldCaption,
+  LockedReason,
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
+import { DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels.js";
+import {
+  CharacterCount,
+  FIELD_BASE,
+  FIELD_DISPLAY,
+  FIELD_INVALID,
+  FieldGroup,
+  FloatingField,
+  FLOATING_INPUT_CLASS,
+  FLOATING_PLACEHOLDER_ON_FOCUS,
+  fieldBelow,
+  hasPlaceholderText,
+  useCharacterCountLabels,
+  useTypedLength
+} from "./field-base.js";
+const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
+function swallowEnter(onKeyDown) {
+  return (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      return;
+    }
+    onKeyDown?.(e);
+  };
+}
+function Input(props) {
+  const {
+    ref,
+    className,
+    inputClassName,
+    label,
+    id,
+    placeholder,
+    type,
+    variant = "field",
+    invalid,
+    error,
+    hint,
+    showCount,
+    countLabels,
+    passwordLabels,
+    disabledReason,
+    disabledReasonDisplay,
+    commit,
+    ...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 lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    // Caller's, caption, count, a lock's reason — then the error, appended by the hook.
+    mergeDescribedBy(hintParts.describedBy, counting && countId, locked && lock.reasonId),
+    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 = locked ? void 0 : counting ? (e) => {
+    length.track(e.target.value);
+    rest.onChange?.(e);
+  } : rest.onChange;
+  const lockProps = locked ? {
+    disabled: void 0,
+    readOnly: true,
+    "aria-disabled": true,
+    onBlur: void 0,
+    onKeyDown: swallowEnter(rest.onKeyDown)
+  } : void 0;
+  const boxClass = locked ? void 0 : className;
+  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box }) : box;
+  const asDisplay = usePhoneLayout() && variant === "display";
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState(false);
+  const effectiveType = isPassword && revealed ? "text" : type;
+  const handleClick = PICKER_TYPES.has(type ?? "") ? (e) => {
+    rest.onClick?.(e);
+    try {
+      e.currentTarget.showPicker?.();
+    } catch {
+    }
+  } : rest.onClick;
+  const passwordText = useKitLabels("passwordReveal", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);
+  const revealToggle = isPassword ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setRevealed((v) => !v),
+      disabled: rest.disabled || locked,
+      "aria-label": revealed ? passwordText.hide : passwordText.show,
+      "aria-pressed": revealed,
+      className: cn(
+        "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-placeholder transition-colors hover:text-secondary focus:outline-none disabled:cursor-default disabled:opacity-50",
+        FOCUS_RING
+      ),
+      children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+    }
+  ) : null;
+  if (label === void 0) {
+    const endHint = hintParts.labelHint;
+    const ownClass = endHint === void 0 ? boxClass : void 0;
+    if (!isPassword) {
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+        /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className: boxClass, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            type,
+            placeholder,
+            ...rest,
+            ...lockProps,
+            "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+            "aria-describedby": describedBy,
+            onClick: handleClick,
+            onChange,
+            className: cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID, locked && "cursor-not-allowed")
+          }
+        ) })
+      ) });
+    }
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+      /* @__PURE__ */ jsx(EndHintRow, { hint: endHint, className: boxClass, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", ownClass), children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            type: effectiveType,
+            placeholder,
+            ...rest,
+            ...lockProps,
+            "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+            "aria-describedby": describedBy,
+            onChange,
+            className: cn(FIELD_BASE, "pe-9", inputClassName, isInvalid && FIELD_INVALID, locked && "cursor-not-allowed")
+          }
+        ),
+        revealToggle
+      ] }) })
+    ) });
+  }
+  const ownPlaceholder = hasPlaceholderText(placeholder);
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, reserve, children: withReason(
+    /* @__PURE__ */ jsxs(
+      FloatingField,
+      {
+        className: boxClass,
+        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,
+              ...lockProps,
+              "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,
+                locked && "cursor-not-allowed"
+              )
+            }
+          ),
+          revealToggle
+        ]
+      }
+    )
+  ) });
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LockedReason,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\nimport {\n  CharacterCount,\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FieldGroup,\n  FloatingField,\n  FLOATING_INPUT_CLASS,\n  FLOATING_PLACEHOLDER_ON_FOCUS,\n  fieldBelow,\n  hasPlaceholderText,\n  useCharacterCountLabels,\n  useTypedLength,\n  type CharacterCountLabels,\n  type PasswordRevealLabels,\n} from \"./field-base\";\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Classes for the `<input>` itself, as distinct from `className`, which\n   *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n   *  Without it a labelled Input had no way to reach its own element — so\n   *  `tabular-nums` on a numeric text field, which NumberInput has supported\n   *  all along through the identically named prop, was simply unavailable. */\n  inputClassName?: string;\n  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n   *  heading. For the one field a form is about (a feedback subject, an account\n   *  name), never for a stack of them. Labelled fields only: the label is what\n   *  the placeholder falls back to once it goes `sr-only`. */\n  variant?: \"field\" | \"display\";\n  /** The field is required and unanswered, or holds something that cannot be\n   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n   *  since feedback #235.\n   *\n   *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n   *  attribute spreads onto the element and nothing styles it — there is no\n   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n   *  and painted the field exactly as if it were fine. Setting the prop sets the\n   *  attribute too, so the two can no longer be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong with the value, in the caller's own words (\"That IBAN has 21\n   *  digits\"). Rendered under the field, pointed at by the control's\n   *  `aria-describedby` — MERGED with any the caller already passed — and implies\n   *  `invalid`, so the field paints as well as announces. `invalid` alone still\n   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the\n   * app built the caption by hand under each field, and half of those never reached a\n   * screen reader). The {@link Select} rule, so every field reads alike:\n   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with\n   *    `aria-describedby` — after the caller's own ids, before the error's;\n   *  - anything else (a {@link FieldHint} \"?\") rides the label line beside the\n   *    animated label, as NumberInput's does — or, on a field with no label, sits at the\n   *    field's end edge outside the box, and `className` then styles that row.\n   */\n  hint?: ReactNode;\n  /**\n   * A live \"12/80\" under the field, with `maxLength` (keksdose K11 — the broadcast,\n   * support and handoff-note fields counted by hand). Read with the field as \"12 of 80\n   * characters\", and announced politely only on entering the last stretch and on\n   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored\n   * without a `maxLength`: a count with no limit is not what this answers. Counts\n   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;\n   * uncontrolled, `defaultValue` and then every change event — a value written from\n   * outside without one (a form library's `reset`) shows from the next keystroke.\n   */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** Names for the password reveal toggle, English by default — it is the one\n   *  string this component renders on its own behalf, and a German form was\n   *  reading it out in English. See {@link PasswordRevealLabels}. */\n  passwordLabels?: Partial<PasswordRevealLabels>;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a text field\n   * that SAVES itself: a name committed on blur (0.34, KS U10 — Kurvenschmiede's segment\n   * and profile names, behind a local `CommitInput`). `disabled` takes the field out of\n   * the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled` — NumberInput's\n   * lock (0.33.1), Autocomplete's. Nothing a save listens to is reported: not `onChange`,\n   * not `onBlur` (on a field that saves itself, blur IS the save), and not Enter, which is\n   * swallowed so the field does not submit the form around it; the caller's `onKeyDown`\n   * still hears every other key. The reason is a line under the field at Large and on a\n   * touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the\n   * input's `aria-describedby`, between the caption and the error. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through its\n   * form's Save leaves this off and stays editable under the lock — the Save takes\n   * `commit`. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): as\n   *  `forwardRef`, with a `displayName` line beside it, this module could not drop an\n   *  unused component, and `{ Spinner }` brought Input, Select and Textarea along. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** What a locked {@link Input} swallows of a key: Enter, which would submit the form. */\nfunction swallowEnter(onKeyDown: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined) {\n  return (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      return;\n    }\n    onKeyDown?.(e);\n  };\n}\n\nexport function Input(props: InputProps) {\n  const {\n    ref,\n    className,\n    inputClassName,\n    label,\n    id,\n    placeholder,\n    type,\n    variant = \"field\",\n    invalid,\n    error,\n    hint,\n    showCount,\n    countLabels,\n    passwordLabels,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ...rest\n  } = props;\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The\n  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under\n  // the control must not rebuild it, or focus and the caret are lost mid-edit.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  // The lock (0.34, KS U10): focusable, `readOnly`, nothing a save listens to is\n  // reported — see `disabledReason`.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // Caller's, caption, count, a lock's reason — then the error, appended by the hook.\n    mergeDescribedBy(hintParts.describedBy, counting && countId, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = locked\n    ? undefined\n    : counting\n      ? (e: ChangeEvent<HTMLInputElement>) => {\n          length.track(e.target.value);\n          rest.onChange?.(e);\n        }\n      : rest.onChange;\n  // Locked, these win over what the caller's spread carried: focusable rather than\n  // `disabled`, `readOnly`, no blur reported (blur is a self-saving field's save), and\n  // Enter swallowed. Spread AFTER `rest` on every branch's input.\n  const lockProps = locked\n    ? {\n        disabled: undefined,\n        readOnly: true,\n        \"aria-disabled\": true as const,\n        onBlur: undefined,\n        onKeyDown: swallowEnter(rest.onKeyDown),\n      }\n    : undefined;\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes its outermost box — so `className` (a width, a flex or grid cell) moves onto\n  // that, as on Select, and the form keeps its layout. `block` so a full-width field\n  // stays full width in it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  const asDisplay = usePhoneLayout() && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const passwordText = useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      // `tabIndex={-1}` sat here, which made this a painted, clickable control that\n      // Tab stepped straight over — on the one field whose value cannot be checked by\n      // looking at it. There is no mouse-only case for a reveal toggle; the people who\n      // cannot see what they typed are exactly who it is for. It is a tab stop now,\n      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the\n      // input underneath and stays put while focus moves onto the button on top of it.\n      onClick={() => setRevealed((v) => !v)}\n      // …and since it is a tab stop, a field the user may not edit must not hand the\n      // keyboard a control that shows what is in it — a locked one included.\n      disabled={rest.disabled || locked}\n      aria-label={revealed ? passwordText.hide : passwordText.show}\n      aria-pressed={revealed}\n      className={cn(\n        \"absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-placeholder transition-colors hover:text-secondary focus:outline-none disabled:cursor-default disabled:opacity-50\",\n        FOCUS_RING,\n      )}\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    // A \"?\" with no label line to ride goes at the end edge, outside the box, and\n    // `className` moves to that row (see `hint`); without one nothing moves.\n    const endHint = hintParts.labelHint;\n    const ownClass = endHint === undefined ? boxClass : undefined;\n    if (!isPassword) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <EndHintRow hint={endHint} className={boxClass}>\n              <input\n                ref={ref}\n                id={id}\n                type={type}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n                // carried, or setting `invalid` would have quietly deleted a caller's own\n                // `aria-invalid`. The prop is the one that also paints; a bare attribute\n                // still announces, which is all it ever did.\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                // Likewise merged rather than replaced — see {@link useFieldError}.\n                aria-describedby={describedBy}\n                onClick={handleClick}\n                onChange={onChange}\n                className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n            </EndHintRow>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <EndHintRow hint={endHint} className={boxClass}>\n            <div className={cn(\"relative\", ownClass)}>\n              <input\n                ref={ref}\n                id={id}\n                type={effectiveType}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                aria-describedby={describedBy}\n                onChange={onChange}\n                className={cn(FIELD_BASE, \"pe-9\", inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n              {revealToggle}\n            </div>\n          </EndHintRow>,\n        )}\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={hintParts.labelHint}\n        >\n          <input\n            ref={ref}\n            id={fieldId}\n            type={effectiveType}\n            // A labelled field with no placeholder of its own gets a single space, which\n            // feeds the floating label's peer-placeholder-shown trick. A caller's own is\n            // kept and shown on focus, once the label has floated out of its way (kastlan\n            // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no\n            // float left to drive, and an empty borderless line would say nothing at all\n            // — so there the label text is the placeholder when the caller gave none.\n            placeholder={\n              asDisplay\n                ? (placeholder ?? (typeof label === \"string\" ? label : \" \"))\n                : ownPlaceholder\n                  ? placeholder\n                  : \" \"\n            }\n            {...rest}\n            {...lockProps}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onClick={handleClick}\n            onChange={onChange}\n            className={cn(\n              asDisplay\n                ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n                : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),\n              isPassword && \"pe-9\",\n              inputClassName,\n              isInvalid && FIELD_INVALID,\n              locked && \"cursor-not-allowed\",\n            )}\n          />\n          {revealToggle}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/jump-calendar.d.ts

@@ -0,0 +1,8 @@
+import { type MiniCalendarProps } from "./mini-calendar.js";
+export type PanelCalendarProps = Pick<MiniCalendarProps, "mode" | "from" | "to" | "locale" | "min" | "max" | "labels" | "onSelect" | "focusOnOpen"> & {
+    /** See {@link DatePickerBaseProps.monthJump}. */
+    monthJump?: boolean;
+};
+/** The panel's calendar: the plain {@link MiniCalendar}, exactly as before — or, with
+ *  `monthJump`, the same calendar under a caption that opens a month grid. */
+export declare function PanelCalendar({ monthJump, ...calendar }: PanelCalendarProps): import("react").JSX.Element;

package/dist/components/jump-calendar.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { monthKey, pad, parseIsoDate } from "../lib/dates.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { FOCUS_RING_WIDTH } from "./focus-ring.js";
+import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar } from "./mini-calendar.js";
+import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker.js";
+import { claimEscape } from "../hooks/use-dismiss.js";
+const monthIndex = (key) => Number(key.slice(0, 4)) * 12 + Number(key.slice(5, 7)) - 1;
+const keyOfIndex = (index) => `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad(index % 12 + 1)}`;
+const shiftKey = (key, delta) => keyOfIndex(monthIndex(key) + delta);
+const firstOfKey = (key) => new Date(Number(key.slice(0, 4)), Number(key.slice(5, 7)) - 1, 1);
+const upperFirst = (text, locale) => text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+const MONTH_COLUMNS = 3;
+function openingMonth(from, to, lo, hi) {
+  const start = parseIsoDate(from) ?? parseIsoDate(to) ?? /* @__PURE__ */ new Date();
+  if (lo && start < lo) return monthKey(lo);
+  if (hi && start > hi) return monthKey(hi);
+  return monthKey(start);
+}
+function PanelCalendar({ monthJump, ...calendar }) {
+  return monthJump ? /* @__PURE__ */ jsx(JumpCalendar, { ...calendar }) : /* @__PURE__ */ jsx(MiniCalendar, { ...calendar });
+}
+function JumpCalendar({
+  from = "",
+  to = "",
+  mode = "range",
+  locale,
+  min,
+  max,
+  labels,
+  onSelect,
+  focusOnOpen
+}) {
+  const calendarText = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labels);
+  const monthText = useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS);
+  const id = useId();
+  const captionId = `${id}-caption`;
+  const hintId = `${id}-hint`;
+  const captionRef = useRef(null);
+  const monthsRef = useRef(null);
+  const lo = min ? parseIsoDate(min) : null;
+  const hi = max ? parseIsoDate(max) : null;
+  const minKey = lo ? monthKey(lo) : null;
+  const maxKey = hi ? monthKey(hi) : null;
+  const outOfBounds = (key) => Boolean(minKey && key < minKey || maxKey && key > maxKey);
+  const clampKey = (key) => minKey && key < minKey ? minKey : maxKey && key > maxKey ? maxKey : key;
+  const [view, setView] = useState("days");
+  const [shown, setShown] = useState(() => openingMonth(from, to, lo, hi));
+  const [dayGrid, setDayGrid] = useState(() => ({ key: 0, focus: Boolean(focusOnOpen) }));
+  const [active, setActive] = useState(shown);
+  const [lastValue, setLastValue] = useState({ from, to });
+  if (lastValue.from !== from || lastValue.to !== to) {
+    const changed = lastValue.from !== from ? from : to;
+    setLastValue({ from, to });
+    const next = parseIsoDate(changed) ?? parseIsoDate(from) ?? parseIsoDate(to);
+    const key = next ? monthKey(next) : null;
+    if (key && (key !== shown || view === "months")) {
+      setShown(key);
+      setView("days");
+      setDayGrid((d) => ({ key: d.key + 1, month: key, focus: false }));
+    }
+  }
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const key = pendingFocus.current;
+    if (!key) return;
+    pendingFocus.current = null;
+    monthsRef.current?.querySelector(`[data-month="${key}"]`)?.focus();
+  });
+  const showMonth = (key) => {
+    setShown(key);
+    setDayGrid((d) => ({ ...d, month: key }));
+  };
+  const openMonths = () => {
+    const start = clampKey(shown);
+    pendingFocus.current = start;
+    setActive(start);
+    setView("months");
+  };
+  const closeMonths = (focusCaption) => {
+    setView("days");
+    setDayGrid((d) => ({ ...d, month: shown, focus: false }));
+    if (focusCaption) captionRef.current?.focus();
+  };
+  const pick = (key) => {
+    setShown(key);
+    setView("days");
+    setDayGrid((d) => ({ key: d.key + 1, month: key, focus: true }));
+  };
+  const moveActive = (key, focus) => {
+    if (focus) pendingFocus.current = key;
+    setActive(key);
+  };
+  const inDays = view === "days";
+  const escapeToDays = (e) => {
+    if (e.key !== "Escape" || inDays) return;
+    claimEscape(e);
+    e.stopPropagation();
+    closeMonths(true);
+  };
+  const onMonthKeyDown = (e) => {
+    if (e.key === "Escape") return escapeToDays(e);
+    const step = horizontalStep(e.key, e.currentTarget);
+    const col = monthIndex(active) % 12 % MONTH_COLUMNS;
+    let delta;
+    switch (step ? "horizontal" : e.key) {
+      case "horizontal":
+        delta = step;
+        break;
+      case "ArrowUp":
+        delta = -MONTH_COLUMNS;
+        break;
+      case "ArrowDown":
+        delta = MONTH_COLUMNS;
+        break;
+      case "Home":
+        delta = -col;
+        break;
+      case "End":
+        delta = MONTH_COLUMNS - 1 - col;
+        break;
+      case "PageUp":
+        delta = -12;
+        break;
+      case "PageDown":
+        delta = 12;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (delta !== 0) moveActive(shiftKey(active, delta), true);
+  };
+  const year = Number(active.slice(0, 4));
+  const prevYearBlocked = Boolean(minKey && year - 1 < Number(minKey.slice(0, 4)));
+  const nextYearBlocked = Boolean(maxKey && year + 1 > Number(maxKey.slice(0, 4)));
+  const prevBlocked = !inDays && prevYearBlocked;
+  const nextBlocked = !inDays && nextYearBlocked;
+  const longName = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
+  const shortNames = useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, i) => upperFirst(fmt.format(new Date(2e3, i, 1)), locale));
+  }, [locale]);
+  const caption = inDays ? upperFirst(longName.format(firstOfKey(shown)), locale) : new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
+  const fromDate = parseIsoDate(from);
+  const toDate = parseIsoDate(to);
+  const fromKey = fromDate ? monthKey(fromDate) : null;
+  const toKey = toDate ? monthKey(toDate) : null;
+  const low = fromKey ?? toKey;
+  const high = toKey ?? fromKey;
+  const currentKey = monthKey(/* @__PURE__ */ new Date());
+  const arrow = "rounded p-1 text-muted hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-disabled:hover:bg-transparent";
+  return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 pb-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": inDays ? calendarText.previousMonth : monthText.previousYear,
+          "aria-disabled": prevBlocked || void 0,
+          onClick: () => {
+            if (inDays) showMonth(shiftKey(shown, -1));
+            else if (!prevBlocked) moveActive(shiftKey(active, -12), false);
+          },
+          onKeyDown: escapeToDays,
+          className: arrow,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: captionRef,
+          type: "button",
+          "aria-expanded": !inDays,
+          "aria-describedby": inDays ? hintId : void 0,
+          onClick: inDays ? openMonths : () => closeMonths(false),
+          onKeyDown: escapeToDays,
+          className: "inline-flex min-w-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-secondary hover:bg-hover",
+          children: [
+            /* @__PURE__ */ jsx("span", { id: captionId, "aria-live": "polite", className: "truncate", children: caption }),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": true,
+                className: cn("size-3.5 shrink-0 text-muted", !inDays && "rotate-180")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": inDays ? calendarText.nextMonth : monthText.nextYear,
+          "aria-disabled": nextBlocked || void 0,
+          onClick: () => {
+            if (inDays) showMonth(shiftKey(shown, 1));
+            else if (!nextBlocked) moveActive(shiftKey(active, 12), false);
+          },
+          onKeyDown: escapeToDays,
+          className: arrow,
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: monthText.panel }),
+    inDays ? /* @__PURE__ */ jsx(
+      MiniCalendar,
+      {
+        mode,
+        from,
+        to,
+        locale,
+        min,
+        max,
+        labels,
+        onSelect,
+        focusOnOpen: dayGrid.focus,
+        hideNavigation: true,
+        month: dayGrid.month,
+        onMonthChange: showMonth
+      },
+      dayGrid.key
+    ) : /* @__PURE__ */ jsx("div", { ref: monthsRef, role: "grid", "aria-labelledby": captionId, className: "grid gap-1", children: Array.from({ length: 12 / MONTH_COLUMNS }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-3 gap-1", children: Array.from({ length: MONTH_COLUMNS }, (_2, c) => {
+      const index = row * MONTH_COLUMNS + c;
+      const key = keyOfIndex(year * 12 + index);
+      const disabled = outOfBounds(key);
+      const selected = low !== null && high !== null && key >= low && key <= high;
+      const end = key === fromKey || key === toKey;
+      const current = key === currentKey;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "data-month": key,
+          tabIndex: key === active ? 0 : -1,
+          "aria-label": monthText.month(longName.format(firstOfKey(key))),
+          "aria-selected": selected,
+          "aria-disabled": disabled || void 0,
+          "aria-current": current ? "date" : void 0,
+          onClick: () => {
+            if (!disabled) pick(key);
+          },
+          onKeyDown: onMonthKeyDown,
+          className: cn(
+            // 44px rows: the touch-target size, and four of them stand as tall
+            // as a month of days, so the panel does not jump as the views swap.
+            "h-11 rounded px-1 text-sm tabular-nums transition-colors",
+            FOCUS_RING_WIDTH,
+            "focus-visible:outline-none focus-visible:ring-inset",
+            // A --brand ring on a --brand fill exists only in the DOM.
+            end && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
+            disabled ? "cursor-not-allowed text-placeholder" : end ? "bg-brand text-brand-contrast hover:bg-brand-hover" : selected ? "bg-brand-soft font-medium text-brand-muted hover:bg-brand-soft-hover" : "text-primary hover:bg-hover",
+            current && !selected && !disabled && "ring-1 ring-inset ring-strong"
+          ),
+          children: shortNames[index]
+        },
+        c
+      );
+    }) }, row)) })
+  ] });
+}
+export {
+  PanelCalendar
+};
+//# sourceMappingURL=jump-calendar.js.map