@eifi1/ui-kit 0.5.1 → 0.6.1

package/dist/components/file-dropzone.js

@@ -1,124 +1,249 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { Upload } from "lucide-react";
-import { Button } from "./ui.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { Upload, X } from "lucide-react";
+import { Button, IconButton } from "./ui.js";
 import { cn } from "../lib/cn.js";
-import { useKitFileLabels } from "../i18n/kit-labels.js";
+import { useAnnounce } from "../hooks/use-announce.js";
+import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels.js";
+import { DEFAULT_FILE_PICKER_LABELS, screenFiles, summariseRejections } from "./file-button.js";
 function FileDropzone({
   file,
   onFileSelected,
+  multiple,
+  files,
+  onFilesSelected,
+  onClear,
+  onRemove,
   accept,
   isValid,
   invalidMessage,
+  maxSize,
+  maxFiles,
   onInvalid,
+  onReject,
+  rejectionFeedback,
+  labels: labelsProp,
   dropLabel,
   browseLabel,
   emptyLabel,
   hint,
   className,
   "aria-label": ariaLabel,
+  "aria-describedby": describedByProp,
   ...rest
 }) {
   const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState(null);
   const fileInputRef = useRef(null);
+  const rootRef = useRef(null);
+  const errorId = useId();
   const fileText = useKitFileLabels();
-  const acceptFile = (f) => {
-    if (!f) return;
-    if (!isValid(f)) {
-      if (onInvalid) {
-        onInvalid(f);
+  const labels = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS, labelsProp);
+  const status = useAnnounce();
+  const alert = useAnnounce({ politeness: "assertive" });
+  const feedback = rejectionFeedback ?? (onInvalid || onReject ? "none" : "toast");
+  const acceptFiles = (list) => {
+    if (!list || list.length === 0) return;
+    const all = Array.from(list);
+    const { accepted, rejected } = screenFiles(
+      multiple ? all : all.slice(0, 1),
+      {
+        accept: isValid ? void 0 : accept,
+        maxSize,
+        maxFiles: multiple ? maxFiles : void 0,
+        isValid,
+        invalidMessage
+      },
+      labels,
+      fileText.size
+    );
+    if (accepted.length > 0) {
+      setError(null);
+      if (multiple) {
+        onFilesSelected?.(accepted);
       } else {
-        void import("sonner").then(({ toast }) => toast.error(invalidMessage));
+        onFileSelected?.(accepted[0]);
+        onFilesSelected?.(accepted);
+      }
+      status.announce(labels.selected(accepted.length, accepted[0].name));
+    }
+    if (rejected.length > 0) {
+      for (const r of rejected) onInvalid?.(r.file);
+      onReject?.(rejected);
+      const message = summariseRejections(rejected, labels);
+      if (feedback === "toast") {
+        void import("sonner").then(({ toast }) => toast.error(message));
+      } else {
+        if (feedback === "inline") setError(message);
+        alert.announce(message);
       }
-      return;
     }
-    onFileSelected(f);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      onDragEnter: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.dataTransfer.types.includes("Files")) setDragOver(true);
-      },
-      onDragOver: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = "copy";
-        if (!dragOver && e.dataTransfer.types.includes("Files")) setDragOver(true);
-      },
-      onDragLeave: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.currentTarget.contains(e.relatedTarget)) return;
-        setDragOver(false);
-      },
-      onDrop: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragOver(false);
-        acceptFile(e.dataTransfer.files?.[0]);
-      },
-      onClick: () => fileInputRef.current?.click(),
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
+  const afterRemoval = (message) => {
+    rootRef.current?.focus();
+    status.announce(message);
+  };
+  const chosen = multiple ? files ?? [] : file ? [file] : [];
+  const showError = feedback === "inline" && error !== null;
+  const describedBy = cn(describedByProp, showError && errorId) || void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: rootRef,
+        onDragEnter: (e) => {
           e.preventDefault();
-          fileInputRef.current?.click();
-        }
-      },
-      role: "button",
-      tabIndex: 0,
-      "aria-label": ariaLabel ?? dropLabel,
-      className: cn(
-        // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,
-        // which Tailwind implements as `position: absolute` — so without a positioned
-        // ancestor its containing block is the INITIAL one, and it is laid out at its
-        // own offset from the top of the document. Nothing looks wrong, because the
-        // input is 1x1 and clipped; what breaks is the page height. On a long page
-        // every escaped sr-only element extends `documentElement.scrollHeight` to its
-        // own offset, which produces a second, whole-document scrollbar alongside the
-        // app shell's own — one that scrolls past the end of the content into nothing.
-        // Measured on the showcase: body 900px, document 47,919px.
-        "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors",
-        // Three states out of two border tokens: the target rests on the plain
-        // hairline, hover pulls it to `--border-strong`, and a live drag keeps that
-        // border and adds the `--bg-active` wash on top — so "let go here" still reads
-        // one step louder than "you are over it".
-        dragOver ? "border-[var(--border-strong)] bg-[var(--bg-active)]" : "border-[var(--border)] hover:border-[var(--border-strong)]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Upload, { className: "size-5 text-[var(--text-muted)]" }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-secondary)]", children: file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: file ? fileText.size(file.size) : hint }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "secondary",
-            onClick: (e) => {
-              e.stopPropagation();
-              fileInputRef.current?.click();
-            },
-            children: browseLabel
+          e.stopPropagation();
+          if (e.dataTransfer.types.includes("Files")) setDragOver(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.dataTransfer.dropEffect = "copy";
+          if (!dragOver && e.dataTransfer.types.includes("Files")) setDragOver(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.currentTarget.contains(e.relatedTarget)) return;
+          setDragOver(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(false);
+          acceptFiles(e.dataTransfer.files);
+        },
+        onClick: () => fileInputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            fileInputRef.current?.click();
           }
+        },
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel ?? dropLabel,
+        "aria-describedby": describedBy,
+        "data-invalid": showError || void 0,
+        className: cn(
+          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,
+          // which Tailwind implements as `position: absolute` — so without a positioned
+          // ancestor its containing block is the INITIAL one, and it is laid out at its
+          // own offset from the top of the document. Nothing looks wrong, because the
+          // input is 1x1 and clipped; what breaks is the page height. On a long page
+          // every escaped sr-only element extends `documentElement.scrollHeight` to its
+          // own offset, which produces a second, whole-document scrollbar alongside the
+          // app shell's own — one that scrolls past the end of the content into nothing.
+          // Measured on the showcase: body 900px, document 47,919px.
+          "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors",
+          // Three states out of two border tokens: the target rests on the plain
+          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that
+          // border and adds the `--bg-active` wash on top — so "let go here" still reads
+          // one step louder than "you are over it". A refusal shown inline takes the
+          // danger border until the next good pick.
+          dragOver ? "border-[var(--border-strong)] bg-[var(--bg-active)]" : showError ? "border-[var(--danger-border)]" : "border-[var(--border)] hover:border-[var(--border-strong)]",
+          className
         ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept,
-            onChange: (e) => acceptFile(e.target.files?.[0]),
-            className: "sr-only"
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          /* @__PURE__ */ jsx(Upload, { "aria-hidden": true, className: "size-5 text-[var(--text-muted)]" }),
+          multiple && chosen.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex w-full max-w-sm flex-col gap-1 text-start", children: chosen.map((f, i) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: f.name }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: fileText.size(f.size) }),
+                onRemove && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    type: "button",
+                    size: "sm",
+                    "aria-label": labels.remove(f.name),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onRemove(f, i);
+                      afterRemoval(labels.removed(f.name));
+                    },
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+                  }
+                )
+              ]
+            },
+            `${f.name}-${f.size}-${i}`
+          )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-[var(--text-secondary)]", children: [
+              file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel,
+              !multiple && file && onClear && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  size: "sm",
+                  "aria-label": labels.remove(file.name),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onClear();
+                    afterRemoval(labels.removed(file.name));
+                  },
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: file && !multiple ? fileText.size(file.size) : hint })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "secondary",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  fileInputRef.current?.click();
+                },
+                children: browseLabel
+              }
+            ),
+            multiple && chosen.length > 0 && onClear && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClear();
+                  afterRemoval(labels.cleared);
+                },
+                children: labels.clearAll
+              }
+            )
+          ] }),
+          showError && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-[var(--danger)]", children: error }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: (e) => {
+                const picked = Array.from(e.currentTarget.files ?? []);
+                e.currentTarget.value = "";
+                acceptFiles(picked);
+              },
+              onClick: (e) => e.stopPropagation(),
+              className: "sr-only"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { ...status.regionProps }),
+    /* @__PURE__ */ jsx("span", { ...alert.regionProps })
+  ] });
 }
 export {
   FileDropzone

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useKitFileLabels } from \"../i18n/kit-labels\";\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"button\"`, so that is also where an `aria-label` or an `aria-describedby`\n * belongs.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  /**\n   * How to surface {@link invalidMessage}. Defaults to a `sonner` toast — an\n   * optional peer, imported only when a file is actually rejected. Pass your own to\n   * route it somewhere else, or a no-op to silence it. The same escape hatch, for\n   * the same reason, as `useWizard`'s `onValidationFailed`.\n   *\n   * It exists so this module does not import `sonner` STATICALLY. `package.json`\n   * declares that peer `optional`, and the barrel re-exports this file — so a\n   * top-level `import { toast } from \"sonner\"` made the claim false for everybody:\n   * in an app that installed `@hb/ui` without sonner, `import { Button } from\n   * \"@hb/ui\"` failed to resolve and `tsc --noEmit` failed on the missing types,\n   * without a FileDropzone anywhere in it. Both current consumers happen to depend\n   * on sonner, which is why nothing broke and why the contradiction survived:\n   * `use-wizard.ts` had already answered the identical question the other way, in\n   * writing, two modules over.\n   */\n  onInvalid?: (file: File) => void;\n  /** The dropzone's accessible name, and the instruction shown on it. A caller's own\n   *  `aria-label` wins over it — see the root element below. */\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures surface `invalidMessage` (a `sonner` toast by default, see\n * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +\n * `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  onInvalid,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FileDropzoneProps) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      if (onInvalid) {\n        onInvalid(f);\n      } else {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events.\n        void import(\"sonner\").then(({ toast }) => toast.error(invalidMessage));\n      }\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      // `...rest` first: every handler below is the drop gesture itself, and the\n      // `role`/`tabIndex` pair is what makes this div operable by keyboard at all.\n      {...rest}\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n      // that passes no `aria-label` — i.e. all of them today. Standardising on\n      // `aria-label` (audit §api-design) does not get to silently rename an existing\n      // required prop.\n      aria-label={ariaLabel ?? dropLabel}\n      className={cn(\n        // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n        // which Tailwind implements as `position: absolute` — so without a positioned\n        // ancestor its containing block is the INITIAL one, and it is laid out at its\n        // own offset from the top of the document. Nothing looks wrong, because the\n        // input is 1x1 and clipped; what breaks is the page height. On a long page\n        // every escaped sr-only element extends `documentElement.scrollHeight` to its\n        // own offset, which produces a second, whole-document scrollbar alongside the\n        // app shell's own — one that scrolls past the end of the content into nothing.\n        // Measured on the showcase: body 900px, document 47,919px.\n        \"relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        // Three states out of two border tokens: the target rests on the plain\n        // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n        // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n        // one step louder than \"you are over it\".\n        dragOver\n          ? \"border-[var(--border-strong)] bg-[var(--bg-active)]\"\n          : \"border-[var(--border)] hover:border-[var(--border-strong)]\",\n        className,\n      )}\n    >\n      <Upload className=\"size-5 text-[var(--text-muted)]\" />\n      <div className=\"text-sm text-[var(--text-secondary)]\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-[var(--text-muted)]\">\n        {file ? fileText.size(file.size) : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_FILE_PICKER_LABELS, screenFiles, summariseRejections } from \"./file-button\";\nimport type { FilePickerLabels, FileRejection } from \"./file-button\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"button\"`, so that is also where an `aria-label` or an `aria-describedby`\n * belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus returns to the zone, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is a dynamic `import(\"sonner\")` on the\n   * failure path only: `sonner` is an OPTIONAL peer, and a static import here once\n   * broke `import { Button }` for every app without it (see\n   * `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name, and the instruction shown on it. A caller's own\n   *  `aria-label` wins over it — see the root element below. */\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [dragOver, setDragOver] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const errorId = useId();\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // Both are needed because nothing inside a `role=\"button\"` is read out — its\n  // children are presentational — so the echoed file name never reaches a screen\n  // reader on its own.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (!list || list.length === 0) return;\n    const all = Array.from(list);\n    const { accepted, rejected } = screenFiles(\n      multiple ? all : all.slice(0, 1),\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    if (accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      onReject?.(rejected);\n      const message = summariseRejections(rejected, labels);\n      if (feedback === \"toast\") {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events. sonner's own toaster is a live region, so this\n        // path does not announce a second time.\n        void import(\"sonner\").then(({ toast }) => toast.error(message));\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. The zone is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    rootRef.current?.focus();\n    status.announce(message);\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n  return (\n    <>\n      <div\n        // `...rest` first: every handler below is the drop gesture itself, and the\n        // `role`/`tabIndex` pair is what makes this div operable by keyboard at all.\n        {...rest}\n        ref={rootRef}\n        onDragEnter={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n        }}\n        onDragOver={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          e.dataTransfer.dropEffect = \"copy\";\n          if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n        }}\n        onDragLeave={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n          setDragOver(false);\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setDragOver(false);\n          acceptFiles(e.dataTransfer.files);\n        }}\n        onClick={() => fileInputRef.current?.click()}\n        onKeyDown={(e) => {\n          // Only the zone's OWN keys. A remove button inside it is a real button, and\n          // Enter on it bubbling up here would open the picker instead of removing.\n          if (e.target !== e.currentTarget) return;\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            fileInputRef.current?.click();\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n        // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n        // that passes no `aria-label` — i.e. all of them today. Standardising on\n        // `aria-label` (audit §api-design) does not get to silently rename an existing\n        // required prop.\n        aria-label={ariaLabel ?? dropLabel}\n        // No `aria-invalid`: ARIA does not allow it on `role=\"button\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        className={cn(\n          // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n          // which Tailwind implements as `position: absolute` — so without a positioned\n          // ancestor its containing block is the INITIAL one, and it is laid out at its\n          // own offset from the top of the document. Nothing looks wrong, because the\n          // input is 1x1 and clipped; what breaks is the page height. On a long page\n          // every escaped sr-only element extends `documentElement.scrollHeight` to its\n          // own offset, which produces a second, whole-document scrollbar alongside the\n          // app shell's own — one that scrolls past the end of the content into nothing.\n          // Measured on the showcase: body 900px, document 47,919px.\n          \"relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n          // Three states out of two border tokens: the target rests on the plain\n          // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n          // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n          // one step louder than \"you are over it\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          dragOver\n            ? \"border-[var(--border-strong)] bg-[var(--bg-active)]\"\n            : showError\n              ? \"border-[var(--danger-border)]\"\n              : \"border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n        {multiple && chosen.length > 0 ? (\n          <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n            {chosen.map((f, i) => (\n              <li\n                // Name + size + position: two files may share a name, and the index\n                // alone would re-key every row below a removal.\n                key={`${f.name}-${f.size}-${i}`}\n                className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n              >\n                <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                {onRemove && (\n                  <IconButton\n                    type=\"button\"\n                    size=\"sm\"\n                    aria-label={labels.remove(f.name)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemove(f, i);\n                      afterRemoval(labels.removed(f.name));\n                    }}\n                  >\n                    <X aria-hidden />\n                  </IconButton>\n                )}\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <>\n            <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n              {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n              {!multiple && file && onClear && (\n                <IconButton\n                  type=\"button\"\n                  size=\"sm\"\n                  aria-label={labels.remove(file.name)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onClear();\n                    afterRemoval(labels.removed(file.name));\n                  }}\n                >\n                  <X aria-hidden />\n                </IconButton>\n              )}\n            </div>\n            <div className=\"text-xs text-[var(--text-muted)]\">\n              {file && !multiple ? fileText.size(file.size) : hint}\n            </div>\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.stopPropagation();\n              fileInputRef.current?.click();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone: a live region inside a `role=\"button\"` is inside\n          presentational content, and screen readers are not consistent about\n          reading those. `sr-only-fixed`, so they need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/icon-picker.d.ts

@@ -0,0 +1,72 @@
+import * as react from 'react';
+import { ComponentType, ComponentPropsWithoutRef } from 'react';
+import { TileSize } from './tile-radio.js';
+
+interface IconPickerLabels {
+    /** The "no icon" tile's name, when `allowNone` is set. */
+    none: string;
+    /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */
+    mixed: string;
+    /** The search box's accessible name and placeholder, when `searchable` is set. */
+    search: string;
+    /** Shown in place of the tiles when the search matches nothing. */
+    noResults: string;
+    /** Announced as the search narrows the grid. Receives the number of matches. */
+    resultCount: (count: number) => string;
+}
+declare const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels;
+interface IconOption<T extends string> {
+    value: T;
+    /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`
+     *  — the tile's name is `label`. */
+    icon: ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    /** What the symbol IS, in the user's language ("Game controller") — not the icon
+     *  library's identifier (`Gamepad2`), which is nobody's word for anything. */
+    label: string;
+    /** More words the search matches ("games", "play"), besides `label`. */
+    keywords?: string[];
+    /** A remark read after the name and shown under it in the bubble ("used by
+     *  Leisure"). The tile wears a dot while it has one. */
+    note?: string;
+    disabled?: boolean;
+}
+interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children" | "defaultValue"> {
+    options: IconOption<T>[];
+    /** The chosen icon, or `null` for none. */
+    value: T | null;
+    onChange: (value: T | null) => void;
+    /** Lead with a "no icon" tile whose value is `null`. */
+    allowNone?: boolean;
+    /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is
+     *  described as mixed. */
+    mixed?: boolean;
+    /**
+     * "automatic" (default): an arrow key moves AND chooses, the APG radio group.
+     * "manual": arrows move focus only; Space or Enter chooses. For a picker whose every
+     * change is expensive — a bulk edit that saves as it goes.
+     */
+    activation?: "automatic" | "manual";
+    /** A search box above the grid, matching `label` and `keywords`. For a set large
+     *  enough that scanning it is slower than typing. */
+    searchable?: boolean;
+    /** 28 / 32 / 44px tiles. Default "md"; "lg" is the touch-target size. */
+    size?: TileSize;
+    disabled?: boolean;
+    labels?: Partial<IconPickerLabels>;
+}
+/**
+ * A grid of symbols that is one radio group, with an optional search.
+ *
+ * Name the group with `aria-label` or `aria-labelledby`. The name lands on the
+ * radiogroup itself, not on the outer box: with `searchable` the outer box also holds
+ * the search field, which has a name of its own.
+ *
+ * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a
+ * right-to-left page), Home and End.
+ */
+declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, disabled, labels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): react.JSX.Element;
+
+export { DEFAULT_ICON_PICKER_LABELS, type IconOption, IconPicker, type IconPickerLabels, type IconPickerProps };

package/dist/components/icon-picker.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { SearchField } from "./search-field.js";
+import { TILE_SIZE, TileRadioGroup } from "./tile-radio.js";
+const DEFAULT_ICON_PICKER_LABELS = {
+  none: "No icon",
+  mixed: "Mixed: the selected items have different icons",
+  search: "Search icons",
+  noResults: "No icons match",
+  resultCount: (count) => count === 1 ? "1 icon" : `${count} icons`
+};
+function fold(text, locale) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase(locale);
+}
+function IconPicker({
+  options,
+  value,
+  onChange,
+  allowNone = false,
+  mixed = false,
+  activation = "automatic",
+  searchable = false,
+  size = "md",
+  disabled = false,
+  labels,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}) {
+  const text = useKitLabels("iconPicker", DEFAULT_ICON_PICKER_LABELS, labels);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale();
+  const mixedId = useId();
+  const [query, setQuery] = useState("");
+  const needle = fold(query.trim(), locale);
+  const visible = useMemo(
+    () => needle ? options.filter(
+      (o) => [o.label, ...o.keywords ?? []].some((w) => fold(w, locale).includes(needle))
+    ) : options,
+    [options, needle, locale]
+  );
+  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+  const items = [
+    // "None" stays through a search: it is the way back to no icon, and it matches
+    // no word anybody would type for it.
+    ...allowNone ? [{ key: null, label: text.none }] : [],
+    ...visible.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled }))
+  ];
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("space-y-2", className), children: [
+    searchable && /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        value: query,
+        onChange: setQuery,
+        "aria-label": text.search,
+        clearLabel: common.clear,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": [ariaDescribedBy, mixed && mixedId].filter(Boolean).join(" ") || void 0,
+        "aria-disabled": disabled || void 0,
+        className: "flex flex-wrap items-center gap-1.5",
+        children: /* @__PURE__ */ jsx(
+          TileRadioGroup,
+          {
+            items,
+            checked: mixed ? void 0 : value,
+            onSelect: onChange,
+            activation,
+            disabled,
+            size,
+            renderTile: (item) => {
+              const Icon = item.key === null ? void 0 : byValue.get(item.key)?.icon;
+              return Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: TILE_SIZE[size].glyph }) : null;
+            },
+            tileClassName: (_item, selected) => selected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+          }
+        )
+      }
+    ),
+    needle && visible.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: text.noResults }),
+    mixed && /* @__PURE__ */ jsx("span", { id: mixedId, hidden: true, children: text.mixed }),
+    searchable && // Typing moves no focus and the grid changes silently, so the count is said.
+    // `sr-only-fixed`: this sits inside a consumer's markup and must not extend
+    // the document height (see tokens.css).
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: needle ? text.resultCount(visible.length) : "" })
+  ] });
+}
+export {
+  DEFAULT_ICON_PICKER_LABELS,
+  IconPicker
+};
+//# sourceMappingURL=icon-picker.js.map

package/dist/components/icon-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\nexport const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels = {\n  none: \"No icon\",\n  mixed: \"Mixed: the selected items have different icons\",\n  search: \"Search icons\",\n  noResults: \"No icons match\",\n  resultCount: (count) => (count === 1 ? \"1 icon\" : `${count} icons`),\n};\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  disabled?: boolean;\n  labels?: Partial<IconPickerLabels>;\n}\n\n/** Case- and accent-insensitive, so \"cafe\" finds \"Café\". */\nfunction fold(text: string, locale: string | undefined): string {\n  return text.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLocaleLowerCase(locale);\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  disabled = false,\n  labels,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const [query, setQuery] = useState(\"\");\n  const needle = fold(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => fold(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={[ariaDescribedBy, mixed && mixedId].filter(Boolean).join(\" \") || undefined}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          onSelect={onChange}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            selected ? \"text-[var(--text-primary)]\" : \"text-[var(--text-secondary)]\"\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-[var(--text-muted)]\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -68,6 +68,9 @@ interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">, "onSel
      * Saturday in much of the Arab world — which is what the user's own wall calendar
      * does. It was hard-wired to Monday before, which is wrong for most of the people
      * who use a Sunday-first calendar and invisible to the people who wrote this one.
+     *
+     * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's
+     * week info, else Monday.
      */
     weekStartsOn?: WeekDay;
     onSelect: (from: string, to: string) => void;