@eifi1/ui-kit 0.7.1 → 0.8.1

package/dist/components/description-list.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../lib/cn.js";
+import { FieldHint } from "./ui.js";
+const ListContext = createContext({ layout: "rows", numeric: false, density: "comfortable" });
+function DescriptionList({
+  layout = "rows",
+  numeric = false,
+  density = "comfortable",
+  minCardWidth = "10rem",
+  className,
+  style,
+  ...rest
+}) {
+  const cards = layout === "cards";
+  const grid = cards ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}), 1fr))` } : void 0;
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { layout, numeric, density }, children: /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ...rest,
+      "data-layout": layout,
+      style: grid ? { ...grid, ...style } : style,
+      className: cn(
+        cards ? cn("grid", density === "compact" ? "gap-2" : "gap-3") : "@container divide-y divide-[var(--border)]",
+        density === "compact" ? "text-xs" : "text-sm",
+        className
+      )
+    }
+  ) });
+}
+const ROW_PAD = { comfortable: "py-2.5", compact: "py-1.5" };
+const CARD_PAD = { comfortable: "px-3 py-2.5", compact: "px-2.5 py-1.5" };
+function DescriptionItem({
+  term,
+  children,
+  hint,
+  numeric: numericProp,
+  detailClassName,
+  className,
+  ...rest
+}) {
+  const { layout, numeric: listNumeric, density } = useContext(ListContext);
+  const numeric = numericProp ?? listNumeric;
+  const cards = layout === "cards";
+  const termNode = /* @__PURE__ */ jsxs(
+    "dt",
+    {
+      className: cn(
+        "flex min-w-0 items-center gap-1 text-[var(--text-muted)]",
+        cards && "text-xs uppercase tracking-wide"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: term }),
+        hint && /* @__PURE__ */ jsx(FieldHint, { label: hint, side: "top", className: "shrink-0" })
+      ]
+    }
+  );
+  const detail = /* @__PURE__ */ jsx(
+    "dd",
+    {
+      className: cn(
+        "min-w-0 break-words text-[var(--text-primary)]",
+        numeric && "tabular-nums text-end",
+        cards && "mt-0.5 font-medium",
+        detailClassName
+      ),
+      children
+    }
+  );
+  if (cards) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: cn(
+          "min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          CARD_PAD[density],
+          className
+        ),
+        children: [
+          termNode,
+          detail
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "grid gap-x-4 gap-y-0.5",
+        numeric ? (
+          // Never stacks: a figure is short (see DescriptionListProps.numeric).
+          "grid-cols-[minmax(0,1fr)_auto] items-baseline"
+        ) : "grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline",
+        ROW_PAD[density],
+        className
+      ),
+      children: [
+        termNode,
+        detail
+      ]
+    }
+  );
+}
+export {
+  DescriptionItem,
+  DescriptionList
+};
+//# sourceMappingURL=description-list.js.map

package/dist/components/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/description-list.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldHint } from \"./ui\";\n\nexport type DescriptionListLayout = \"rows\" | \"cards\";\nexport type DescriptionListDensity = \"comfortable\" | \"compact\";\n\ninterface ListContextValue {\n  layout: DescriptionListLayout;\n  numeric: boolean;\n  density: DescriptionListDensity;\n}\n\nconst ListContext = createContext<ListContextValue>({ layout: \"rows\", numeric: false, density: \"comfortable\" });\n\nexport interface DescriptionListProps extends ComponentPropsWithoutRef<\"dl\"> {\n  /**\n   * `rows` (default): term beside detail, a two-column list that stacks the pair\n   * when the LIST is narrower than 24rem — a container query, so a detail panel\n   * beside a sidebar stacks where it is actually cramped, not where the viewport is.\n   * `cards`: a grid of small bordered cards, term above body — keksdose's overview\n   * figures, lenkbank's account facts.\n   */\n  layout?: DescriptionListLayout;\n  /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of\n   *  rows does not stack on a phone — a figure is short, and putting it under its\n   *  term would double the list's height to gain no width. Per item: see\n   *  {@link DescriptionItemProps.numeric}. */\n  numeric?: boolean;\n  /** `compact` tightens the rhythm for a dense side panel. */\n  density?: DescriptionListDensity;\n  /** `cards` only: the narrowest a card may get before the grid drops a column. */\n  minCardWidth?: string;\n}\n\n/**\n * A real `<dl>` — terms and their details, which is what keksdose's eight and\n * lenkbank's four hand-built \"label: value\" blocks were, and none of them said so.\n * As a `<dl>` a reader announces \"list, 6 items\" and pairs each term with its detail;\n * as a stack of `<div>`s it read one undifferentiated run of text.\n *\n * Composed from {@link DescriptionItem} children rather than taking an `items`\n * array. The call sites this replaces are mostly CONDITIONAL — \"IBAN, if there is\n * one\", \"closing date, once closed\" — and `{iban && <DescriptionItem …>}` reads as\n * what it means, where an array wants `.filter(Boolean)` and a cast. Children also\n * give each item its own props (a numeric figure in an otherwise textual list, a\n * `data-private` detail) with no parallel config object. A data-driven list loses\n * nothing: `items.map((i) => <DescriptionItem key={i.term} {...i} />)`.\n *\n * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly\n * this: styling a pair as a unit (a row, a card) without breaking the list.\n */\nexport function DescriptionList({\n  layout = \"rows\",\n  numeric = false,\n  density = \"comfortable\",\n  minCardWidth = \"10rem\",\n  className,\n  style,\n  ...rest\n}: DescriptionListProps) {\n  const cards = layout === \"cards\";\n  const grid: CSSProperties | undefined = cards\n    ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}), 1fr))` }\n    : undefined;\n  return (\n    <ListContext.Provider value={{ layout, numeric, density }}>\n      <dl\n        {...rest}\n        data-layout={layout}\n        style={grid ? { ...grid, ...style } : style}\n        className={cn(\n          cards\n            ? cn(\"grid\", density === \"compact\" ? \"gap-2\" : \"gap-3\")\n            : \"@container divide-y divide-[var(--border)]\",\n          density === \"compact\" ? \"text-xs\" : \"text-sm\",\n          className,\n        )}\n      />\n    </ListContext.Provider>\n  );\n}\n\nexport interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** What is described: \"Opened\", \"IBAN\", \"Net rent\". */\n  term: ReactNode;\n  /** The description itself. */\n  children?: ReactNode;\n  /** The explanation behind a \"?\" beside the term (a {@link FieldHint}) — the same\n   *  meaning `hint` has on `StatTile` and the labelled fields. */\n  hint?: string;\n  /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides\n   *  the list's setting either way. */\n  numeric?: boolean;\n  /** Classes for the `<dd>`. */\n  detailClassName?: string;\n}\n\nconst ROW_PAD: Record<DescriptionListDensity, string> = { comfortable: \"py-2.5\", compact: \"py-1.5\" };\nconst CARD_PAD: Record<DescriptionListDensity, string> = { comfortable: \"px-3 py-2.5\", compact: \"px-2.5 py-1.5\" };\n\n/** One term and its detail inside a {@link DescriptionList}. */\nexport function DescriptionItem({\n  term,\n  children,\n  hint,\n  numeric: numericProp,\n  detailClassName,\n  className,\n  ...rest\n}: DescriptionItemProps) {\n  const { layout, numeric: listNumeric, density } = useContext(ListContext);\n  const numeric = numericProp ?? listNumeric;\n  const cards = layout === \"cards\";\n\n  const termNode = (\n    <dt\n      className={cn(\n        \"flex min-w-0 items-center gap-1 text-[var(--text-muted)]\",\n        cards && \"text-xs uppercase tracking-wide\",\n      )}\n    >\n      <span className=\"min-w-0 break-words\">{term}</span>\n      {hint && <FieldHint label={hint} side=\"top\" className=\"shrink-0\" />}\n    </dt>\n  );\n  const detail = (\n    <dd\n      className={cn(\n        \"min-w-0 break-words text-[var(--text-primary)]\",\n        numeric && \"tabular-nums text-end\",\n        cards && \"mt-0.5 font-medium\",\n        detailClassName,\n      )}\n    >\n      {children}\n    </dd>\n  );\n\n  if (cards) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          CARD_PAD[density],\n          className,\n        )}\n      >\n        {termNode}\n        {detail}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"grid gap-x-4 gap-y-0.5\",\n        numeric\n          ? // Never stacks: a figure is short (see DescriptionListProps.numeric).\n            \"grid-cols-[minmax(0,1fr)_auto] items-baseline\"\n          : \"grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline\",\n        ROW_PAD[density],\n        className,\n      )}\n    >\n      {termNode}\n      {detail}\n    </div>\n  );\n}\n"],"mappings":";AAoEM,cAiDF,YAjDE;AApEN,SAAS,eAAe,kBAAkB;AAE1C,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAW1B,MAAM,cAAc,cAAgC,EAAE,QAAQ,QAAQ,SAAS,OAAO,SAAS,cAAc,CAAC;AAuCvG,SAAS,gBAAgB;AAAA,EAC9B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,QAAQ,WAAW;AACzB,QAAM,OAAkC,QACpC,EAAE,qBAAqB,sCAAsC,YAAY,WAAW,IACpF;AACJ,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,SAAS,QAAQ,GACtD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,OAAO,OAAO,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AAAA,MACtC,WAAW;AAAA,QACT,QACI,GAAG,QAAQ,YAAY,YAAY,UAAU,OAAO,IACpD;AAAA,QACJ,YAAY,YAAY,YAAY;AAAA,QACpC;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAiBA,MAAM,UAAkD,EAAE,aAAa,UAAU,SAAS,SAAS;AACnG,MAAM,WAAmD,EAAE,aAAa,eAAe,SAAS,gBAAgB;AAGzG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,EAAE,QAAQ,SAAS,aAAa,QAAQ,IAAI,WAAW,WAAW;AACxE,QAAM,UAAU,eAAe;AAC/B,QAAM,QAAQ,WAAW;AAEzB,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,uBAAuB,gBAAK;AAAA,QAC3C,QAAQ,oBAAC,aAAU,OAAO,MAAM,MAAK,OAAM,WAAU,YAAW;AAAA;AAAA;AAAA,EACnE;AAEF,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAGF,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,OAAO;AAAA,UAChB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,UAEI;AAAA,YACA;AAAA,QACJ,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/disclosure.d.ts

@@ -42,6 +42,15 @@ interface CollapseProps extends ComponentPropsWithoutRef<"div"> {
  * it, they would hold the row open by that much.
  */
 declare function Collapse({ open, keepMounted, children, className, style, ...rest }: CollapseProps): react.JSX.Element;
+/**
+ * What {@link DisclosureProps.triggerProps} may put on the header button: its own
+ * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —
+ * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor
+ * `className`, which is {@link DisclosureProps.headerClassName}.
+ */
+type DisclosureTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "type" | "aria-expanded" | "aria-controls" | "disabled" | "onClick" | "children" | "className"> & {
+    [data: `data-${string}`]: string | number | boolean | undefined;
+};
 /**
  * `title` is omitted from the div's own props because this component already owns the
  * name: here it is the header's content (and a ReactNode), not the browser's tooltip.
@@ -73,6 +82,16 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      * its own surface.
      */
     variant?: "card" | "bare";
+    /**
+     * Where a `bare` disclosure draws its chevron. `start` (default) is the leading
+     * chevron that turns from the reading direction to down. `end` puts it at the far
+     * end of the row, pointing down and turning up as the card's does — keksdose's
+     * account menu, whose language sub-list reads "Language 🇩🇪 ⌄" with the chevron
+     * after the flag, like every other menu row with a sub-list. With `trailing`, the
+     * chevron follows it, as on a card. A `card` always has it at the end, so this is
+     * ignored there.
+     */
+    chevronPosition?: "start" | "end";
     /**
      * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern
      * puts the button INSIDE the heading when the disclosure titles a section, so the
@@ -85,6 +104,22 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
     disabled?: boolean;
     /** Extra classes for the header button. */
     headerClassName?: string;
+    /**
+     * Attributes for the header BUTTON — the outer props go to the wrapping div — such as
+     * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state
+     * when they depend on it: keksdose's budget table names each group's toggle
+     * "Expand group Food" / "Collapse group Food", because the visible title is only the
+     * group's name:
+     *
+     * ```tsx
+     * triggerProps={(open) => ({ "aria-label": t(open ? "collapseGroup" : "expandGroup", { name }) })}
+     * ```
+     *
+     * An `aria-label` REPLACES the title as the button's name, so it must still contain
+     * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}
+     * for what the disclosure keeps for itself.
+     */
+    triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);
     /** Extra classes for the body's wrapper — where its padding and spacing live. */
     bodyClassName?: string;
     /**
@@ -123,6 +158,6 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
  * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that
  * is the default and when to opt out.
  */
-declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, headingAs: Heading, keepMounted, disabled, headerClassName, bodyClassName, trailing, controls, className, children, ...rest }: DisclosureProps): react.JSX.Element;
+declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, chevronPosition, headingAs: Heading, keepMounted, disabled, headerClassName, triggerProps, bodyClassName, trailing, controls, className, children, ...rest }: DisclosureProps): react.JSX.Element;
 
-export { Collapse, type CollapseProps, Disclosure, type DisclosureProps };
+export { Collapse, type CollapseProps, Disclosure, type DisclosureProps, type DisclosureTriggerProps };

package/dist/components/disclosure.js

@@ -50,10 +50,12 @@ function Disclosure({
   defaultOpen = false,
   onOpenChange,
   variant = "card",
+  chevronPosition = "start",
   headingAs: Heading,
   keepMounted,
   disabled,
   headerClassName,
+  triggerProps,
   bodyClassName,
   trailing,
   controls,
@@ -65,6 +67,7 @@ function Disclosure({
   const open = controlled ?? own;
   const bodyId = useId();
   const card = variant === "card";
+  const chevronAtEnd = card || chevronPosition === "end";
   const triggerOnly = controls !== void 0;
   const joined = open && !triggerOnly;
   const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
@@ -73,9 +76,11 @@ function Disclosure({
     if (controlled === void 0) setOwn(next);
     onOpenChange?.(next);
   };
+  const extraTriggerProps = typeof triggerProps === "function" ? triggerProps(open) : triggerProps;
   const button = /* @__PURE__ */ jsxs(
     "button",
     {
+      ...extraTriggerProps,
       type: "button",
       "aria-expanded": open,
       "aria-controls": triggerOnly ? controls : bodyId,
@@ -102,12 +107,12 @@ function Disclosure({
         headerClassName
       ),
       children: [
-        !card && /* @__PURE__ */ jsx(Chevron, { open, leading: true }),
+        !chevronAtEnd && /* @__PURE__ */ jsx(Chevron, { open, leading: true }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("span", { className: cn("block", card && "text-sm font-semibold text-[var(--text-primary)]"), children: title }),
           hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs font-normal text-[var(--text-muted)]", children: hint })
         ] }),
-        card && !hasTrailing && /* @__PURE__ */ jsx(Chevron, { open })
+        chevronAtEnd && !hasTrailing && /* @__PURE__ */ jsx(Chevron, { open, small: !card })
       ]
     }
   );
@@ -131,7 +136,7 @@ function Disclosure({
             children: [
               header,
               /* @__PURE__ */ jsx("div", { className: "relative flex shrink-0 items-center gap-2", children: trailing }),
-              card && /* @__PURE__ */ jsx(Chevron, { open })
+              chevronAtEnd && /* @__PURE__ */ jsx(Chevron, { open, small: !card })
             ]
           }
         ) : header,
@@ -140,14 +145,18 @@ function Disclosure({
     }
   );
 }
-function Chevron({ open, leading = false }) {
+function Chevron({
+  open,
+  leading = false,
+  small = leading
+}) {
   return /* @__PURE__ */ jsx(
     ChevronDown,
     {
       "aria-hidden": true,
       className: cn(
         "shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none",
-        leading ? "size-3.5" : "size-4",
+        small ? "size-3.5" : "size-4",
         leading ? !open && "-rotate-90 rtl:rotate-90" : open && "rotate-180"
       )
     }

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/** Read at the moment of closing, like `useCloseTransition` does: the setting can\n *  change under a long-lived page, and jsdom/SSR have no `matchMedia` — where \"no\n *  animation\" is also the only correct answer, since nothing is painting. */\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\" ||\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   */\n  variant?: \"card\" | \"bare\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   */\n  trailing?: ReactNode;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  bodyClassName,\n  trailing,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const button = (\n    <button\n      type=\"button\"\n      aria-expanded={open}\n      aria-controls={triggerOnly ? controls : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        hasTrailing\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : \"after:rounded-sm\",\n            )\n          : \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              hasTrailing ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {!card && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {card && !hasTrailing && <Chevron open={open} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={hasTrailing ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {hasTrailing ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {card && <Chevron open={open} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({ open, leading = false }: { open: boolean; leading?: boolean }) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        leading ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/** Read at the moment of closing, like `useCloseTransition` does: the setting can\n *  change under a long-lived page, and jsdom/SSR have no `matchMedia` — where \"no\n *  animation\" is also the only correct answer, since nothing is painting. */\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\" ||\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   */\n  variant?: \"card\" | \"bare\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there.\n   */\n  chevronPosition?: \"start\" | \"end\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   */\n  trailing?: ReactNode;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition = \"start\",\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  // The card's chevron trails always; a bare one only when asked to.\n  const chevronAtEnd = card || chevronPosition === \"end\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      aria-controls={triggerOnly ? controls : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        hasTrailing\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : \"after:rounded-sm\",\n            )\n          : \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              hasTrailing ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {!chevronAtEnd && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {chevronAtEnd && !hasTrailing && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={hasTrailing ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {hasTrailing ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/facing-pair.d.ts

@@ -3,6 +3,8 @@ import { SeriesChartAxis } from './series-chart.js';
 import './chart-zoom.js';
 import 'recharts';
 import './series-chart-labels.js';
+import './toggle-legend.js';
+import './series-chart-ticks.js';
 
 /** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
 type FacingSide = "left" | "right";

package/dist/components/file-button.d.ts

@@ -60,6 +60,19 @@ interface FilePickerLabels {
     /** Spoken after a remove / clear, since the button that was pressed is gone. */
     removed: (name: string) => string;
     cleared: string;
+    /** The dropzone's accessible name, when the host passes no `dropLabel`. */
+    dropzone: string;
+    /** The dropzone's Browse button, when the host passes no `browseLabel`. */
+    browse: string;
+    /** What an empty single-file dropzone says (no `emptyLabel` given). */
+    empty: string;
+    /** …and an empty `multiple` one. */
+    emptyMultiple: string;
+    /** The dropzone's second line (no `hint` given). Receives `accept` as a person
+     *  reads it (`".pdf, image/png"`), or `""` when anything goes. */
+    hint: (accept: string) => string;
+    /** What a `busy` dropzone says in place of its body ("Uploading…"). */
+    busy: string;
 }
 declare const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels;
 type FileRejectionReason = "type" | "size" | "count" | "invalid";
@@ -81,6 +94,9 @@ interface FileRejection {
  * `model/step`: that is how `accept` has to be written for the dialog anyway.
  */
 declare function matchesAccept(file: File, accept: string | undefined): boolean;
+/** @internal `" .PDF, image/png ,"` => `".pdf, image/png"` — `accept` as a person reads
+ *  it. Also the dropzone's default hint. */
+declare function formatAccept(accept: string): string;
 /** What the pickers screen a pick with. All optional; nothing set accepts everything. */
 interface FileScreenOptions {
     accept?: string;
@@ -191,4 +207,4 @@ interface FileButtonProps extends Omit<UseFilePickerOptions, "disabled">, Omit<B
  */
 declare const FileButton: react.ForwardRefExoticComponent<FileButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-export { DEFAULT_FILE_PICKER_LABELS, FileButton, type FileButtonProps, type FilePickHandler, type FilePickerLabels, type FileRejection, type FileRejectionReason, type FileScreenOptions, type UseFilePickerOptions, type UseFilePickerReturn, judgePick, matchesAccept, screenFiles, summariseRejections, useFilePicker };
+export { DEFAULT_FILE_PICKER_LABELS, FileButton, type FileButtonProps, type FilePickHandler, type FilePickerLabels, type FileRejection, type FileRejectionReason, type FileScreenOptions, type UseFilePickerOptions, type UseFilePickerReturn, formatAccept, judgePick, matchesAccept, screenFiles, summariseRejections, useFilePicker };

package/dist/components/file-button.js

@@ -17,7 +17,13 @@ const DEFAULT_FILE_PICKER_LABELS = {
   remove: (name) => `Remove \u201C${name}\u201D`,
   clearAll: "Remove all files",
   removed: (name) => `\u201C${name}\u201D removed`,
-  cleared: "All files removed"
+  cleared: "All files removed",
+  dropzone: "File upload",
+  browse: "Browse",
+  empty: "Drop a file here",
+  emptyMultiple: "Drop files here",
+  hint: (accept) => accept ? `Accepted: ${accept}` : "Any file type",
+  busy: "Uploading\u2026"
 };
 function matchesAccept(file, accept) {
   const tokens = (accept ?? "").split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
@@ -255,6 +261,7 @@ FileButton.displayName = "FileButton";
 export {
   DEFAULT_FILE_PICKER_LABELS,
   FileButton,
+  formatAccept,
   judgePick,
   matchesAccept,
   screenFiles,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-button.tsx"],"sourcesContent":["import { forwardRef, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, DragEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner } from \"./ui\";\n\n/**\n * A button that opens the file picker — the shape all three apps kept writing by hand\n * as a `<Button>` plus a hidden `<input type=\"file\">` plus a ref between them (seven\n * copies in keksdose, two each in kastlan and lenkbank).\n *\n * Every copy had to remember the same four things, and each one forgot at least one:\n *\n *  1. **Reset the input after every pick.** A file input fires `change` only when its\n *     value CHANGES, so picking the same file twice in a row — the retry after a failed\n *     upload, the second photo of the same receipt — did nothing at all, which reads as\n *     a broken button. `value = \"\"` after each pick; always, not per call site.\n *  2. **`type=\"button\"`.** `<Button>` does not set it, and inside a form a bare button\n *     submits the form before the picker opens.\n *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's\n *     \"All files\" switch, a drop, and a mobile share sheet all hand over whatever the\n *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and\n *     an optional `isValid`.\n *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a\n *     translated message per file, and spoken through a live region — the kit does not\n *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).\n *\n * The part that is not a button — the hidden input, the check, the announcement — is\n * {@link useFilePicker}, for the case where the thing that opens the picker is someone\n * else's control (a card's \"Add\" action, a menu item, a second button for the camera).\n */\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the file pickers ({@link FileButton}, `FileDropzone`) render or speak.\n *  Messages are functions of the file name so a translation can put it anywhere. */\nexport interface FilePickerLabels {\n  /** The file's type is not in `accept`, when no `accept` is known to name (see\n   *  `rejectedTypeOnly`). */\n  rejectedType: (name: string) => string;\n  /** The file's type is not in `accept`, naming what IS accepted: `accept`'s tokens,\n   *  lower-cased and joined with \", \" (`\".csv\"` => \"Only .csv files\"). Used whenever\n   *  `accept` is set — kastlan kept a custom `isValid` + `invalidMessage` per form only\n   *  to say this, and `accept` already knows it. */\n  rejectedTypeOnly: (accept: string, name: string) => string;\n  /** The file is larger than `maxSize`; `maxSize` arrives formatted (\"5 MB\"). */\n  rejectedSize: (name: string, maxSize: string) => string;\n  /** The file was one too many for `maxFiles`. */\n  rejectedCount: (name: string, maxFiles: number) => string;\n  /** `isValid` said no and the caller gave no `invalidMessage`. */\n  rejectedInvalid: (name: string) => string;\n  /** Spoken instead of the per-file message when more than one file was refused. */\n  rejectedMany: (count: number) => string;\n  /** Spoken (and shown, on a dropzone) when `onPick` refused the WHOLE pick.\n   *  Receives the number of files in it. */\n  rejectedPick: (count: number) => string;\n  /** Spoken after a pick the component itself echoes (the dropzone). */\n  selected: (count: number, firstName: string) => string;\n  /** The dropzone's remove button for one file. */\n  remove: (name: string) => string;\n  /** The dropzone's remove-everything button in `multiple` mode. */\n  clearAll: string;\n  /** Spoken after a remove / clear, since the button that was pressed is gone. */\n  removed: (name: string) => string;\n  cleared: string;\n}\n\nexport const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels = {\n  rejectedType: (name) => `“${name}” is not a supported file type`,\n  rejectedTypeOnly: (accept) => `Only ${accept} files`,\n  rejectedSize: (name, maxSize) => `“${name}” is larger than ${maxSize}`,\n  rejectedCount: (name, maxFiles) =>\n    `“${name}” was not added: at most ${maxFiles} ${maxFiles === 1 ? \"file\" : \"files\"}`,\n  rejectedInvalid: (name) => `“${name}” cannot be used here`,\n  rejectedMany: (count) => `${count} files were not added`,\n  rejectedPick: (count) =>\n    count === 1 ? \"The file was not added\" : `None of the ${count} files were added`,\n  selected: (count, firstName) => (count === 1 ? `“${firstName}” selected` : `${count} files selected`),\n  remove: (name) => `Remove “${name}”`,\n  clearAll: \"Remove all files\",\n  removed: (name) => `“${name}” removed`,\n  cleared: \"All files removed\",\n};\n\n/* ── Screening ───────────────────────────────────────────────────────────── */\n\nexport type FileRejectionReason = \"type\" | \"size\" | \"count\" | \"invalid\";\n\n/** One file the picker refused, and why. `message` is already translated (see\n *  {@link FilePickerLabels}, or the caller's `invalidMessage`), so a host that just\n *  wants to show it can render `rejections[0].message` as is. */\nexport interface FileRejection {\n  file: File;\n  reason: FileRejectionReason;\n  message: string;\n}\n\n/**\n * Does `file` satisfy an `accept` string, the way the browser's dialog reads it?\n * Comma-separated tokens: `.ext` (case-insensitive suffix of the name), `type/*`\n * (a MIME family) or an exact MIME type. An empty or absent `accept` takes anything.\n *\n * A file with no `type` — common for `.step`, `.dat`, anything the OS has no MIME\n * mapping for — can only match by extension, which is why lenkbank lists `.stp` AND\n * `model/step`: that is how `accept` has to be written for the dialog anyway.\n */\nexport function matchesAccept(file: File, accept: string | undefined): boolean {\n  const tokens = (accept ?? \"\")\n    .split(\",\")\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  // An EMPTY type is the browser saying \"I don't know\", not \"it's something else\": HEIC\n  // photos on Windows without the codec arrive with `type === \"\"`. Refusing them\n  // (0.6.0) refused iPhone photos the picker itself had just offered (keksdose). So a\n  // missing type is inferred from the extension where that is unambiguous, and a file\n  // whose type cannot be known at all is given the benefit of the doubt — nothing here\n  // proves it does not match, and the server validates what it receives anyway.\n  const type = (file.type || typeFromExtension(name) || \"\").toLowerCase();\n  if (!type && !tokens.every((t) => t.startsWith(\".\"))) return true;\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) return name.endsWith(token);\n    if (!type) return false;\n    if (token.endsWith(\"/*\")) return type.startsWith(token.slice(0, -1));\n    return type === token;\n  });\n}\n\n/** MIME types for the extensions a browser most often leaves untyped. */\nconst EXTENSION_TYPES: Record<string, string> = {\n  heic: \"image/heic\",\n  heif: \"image/heif\",\n  avif: \"image/avif\",\n  webp: \"image/webp\",\n  jpg: \"image/jpeg\",\n  jpeg: \"image/jpeg\",\n  png: \"image/png\",\n  gif: \"image/gif\",\n  pdf: \"application/pdf\",\n  csv: \"text/csv\",\n  txt: \"text/plain\",\n};\n\nfunction typeFromExtension(name: string): string | undefined {\n  const dot = name.lastIndexOf(\".\");\n  return dot === -1 ? undefined : EXTENSION_TYPES[name.slice(dot + 1)];\n}\n\n/** `\" .PDF, image/png ,\"` => `\".pdf, image/png\"` — `accept` as a person reads it. */\nfunction formatAccept(accept: string): string {\n  return accept\n    .split(\",\")\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean)\n    .join(\", \");\n}\n\n/** What the pickers screen a pick with. All optional; nothing set accepts everything. */\nexport interface FileScreenOptions {\n  accept?: string;\n  /** Bytes. Larger files are refused with reason `\"size\"`. */\n  maxSize?: number;\n  /** How many files one pick may deliver. The rest are refused with reason `\"count\"`\n   *  — first come, first kept. For a running cap (\"at most 5 attachments\") pass what\n   *  is LEFT: `maxFiles={5 - attachments.length}`. */\n  maxFiles?: number;\n  /** The caller's own check, after `accept` and `maxSize`. */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal; `labels.rejectedInvalid` otherwise. */\n  invalidMessage?: string;\n}\n\n/** @internal Split a pick into the files that pass and the ones that do not. */\nexport function screenFiles(\n  files: readonly File[],\n  opts: FileScreenOptions,\n  labels: FilePickerLabels,\n  formatSize: (bytes: number) => string,\n): { accepted: File[]; rejected: FileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: FileRejection[] = [];\n  // Name what `accept` takes (\"Only .csv files\") — unless the host translated\n  // `rejectedType` but not yet `rejectedTypeOnly`: its own sentence beats an English one.\n  const acceptText = opts.accept ? formatAccept(opts.accept) : \"\";\n  const useOnly =\n    acceptText !== \"\" &&\n    (labels.rejectedTypeOnly !== DEFAULT_FILE_PICKER_LABELS.rejectedTypeOnly ||\n      labels.rejectedType === DEFAULT_FILE_PICKER_LABELS.rejectedType);\n  const typeMessage = (name: string) =>\n    useOnly ? labels.rejectedTypeOnly(acceptText, name) : labels.rejectedType(name);\n  for (const file of files) {\n    let reason: FileRejectionReason | null = null;\n    if (!matchesAccept(file, opts.accept)) reason = \"type\";\n    else if (opts.maxSize !== undefined && file.size > opts.maxSize) reason = \"size\";\n    else if (opts.isValid && !opts.isValid(file)) reason = \"invalid\";\n    // Count last, and only against files that passed everything else: a refused\n    // file should not use up one of the slots a good one could have had.\n    else if (opts.maxFiles !== undefined && accepted.length >= opts.maxFiles) reason = \"count\";\n    if (reason === null) {\n      accepted.push(file);\n      continue;\n    }\n    const message =\n      reason === \"type\"\n        ? typeMessage(file.name)\n        : reason === \"size\"\n          ? labels.rejectedSize(file.name, formatSize(opts.maxSize ?? 0))\n          : reason === \"count\"\n            ? labels.rejectedCount(file.name, Math.max(0, opts.maxFiles ?? 0))\n            : (opts.invalidMessage ?? labels.rejectedInvalid(file.name));\n    rejected.push({ file, reason, message });\n  }\n  return { accepted, rejected };\n}\n\n/**\n * Judges a pick as a whole — keksdose's \"refuse the pick if any file is bad\", which\n * with `onFiles` + `onReject` alone had to be rebuilt from two calls in a microtask.\n *\n * Called ONCE per pick, after screening and before `onFiles` / `onReject`, with both\n * halves (either may be empty). Return `false` to refuse the whole pick: the accepted\n * files are not delivered, `onReject` still receives what screening refused, and one\n * sentence (`labels.rejectedPick`) is spoken for the pick instead of a per-file one.\n * Return nothing to let the pick through as usual.\n *\n * ```tsx\n * onPick={(ok, bad) => bad.length === 0 || false}  // all or nothing\n * ```\n */\nexport type FilePickHandler = (accepted: File[], rejected: FileRejection[]) => boolean | void;\n\n/** @internal The shared tail of both pickers: run `onPick`, and say whether the pick\n *  stands. A pick with nothing accepted has nothing to refuse, so `false` there is\n *  treated as no verdict and the usual per-file messages are kept. */\nexport function judgePick(\n  onPick: FilePickHandler | undefined,\n  accepted: File[],\n  rejected: FileRejection[],\n): boolean {\n  if (!onPick) return true;\n  return onPick(accepted, rejected) !== false || accepted.length === 0;\n}\n\n/** One sentence for a whole batch of refusals: the file's own message for one, a\n *  count for several — reading out five sentences in a row helps nobody. */\nexport function summariseRejections(rejected: readonly FileRejection[], labels: FilePickerLabels): string {\n  if (rejected.length === 0) return \"\";\n  if (rejected.length === 1) return rejected[0].message;\n  return labels.rejectedMany(rejected.length);\n}\n\n/* ── useFilePicker ───────────────────────────────────────────────────────── */\n\nexport interface UseFilePickerOptions extends FileScreenOptions {\n  /** Let one pick deliver several files. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /**\n   * Ask a phone for its camera instead of the file chooser: `\"environment\"` is the\n   * back camera, `\"user\"` the front. A HINT — desktop browsers ignore it, and Chrome\n   * drops it when `multiple` is also set (a camera cannot deliver a list), which is why\n   * keksdose's camera input has no `multiple`. Pass one or the other.\n   */\n  capture?: boolean | \"user\" | \"environment\";\n  /** The files that passed, in pick order. Never called with an empty array.\n   *  Optional since 0.7 for a caller that takes the pick through `onPick` alone. */\n  onFiles?: (files: File[]) => void;\n  /** See {@link FilePickHandler}: the whole pick at once, with the power to refuse it. */\n  onPick?: FilePickHandler;\n  /** The files that did not, with a translated message each. The refusals are also\n   *  spoken through a live region, so this is for SHOWING them, not for a11y. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** `open()` and `take()` do nothing while set. */\n  disabled?: boolean;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n}\n\nexport interface UseFilePickerReturn {\n  /** Open the system picker. Call it from a click handler — browsers only open a file\n   *  dialog in response to a user gesture. */\n  open: () => void;\n  /** Screen and deliver files that arrived some other way — a drop, a paste. Honours\n   *  `multiple` (only the first file without it) and every check. */\n  take: (files: ArrayLike<File> | null | undefined) => void;\n  /** The hidden input and the live region. Render it once, anywhere — it takes no\n   *  space and needs no positioned ancestor. */\n  element: ReactElement;\n}\n\n/**\n * The headless half of {@link FileButton}: a hidden file input you can open from any\n * control, with the reset, the screening and the announcement built in.\n *\n * ```tsx\n * const picker = useFilePicker({ accept: \".pdf\", onFiles: ([f]) => upload(f) });\n * return <>{picker.element}<DetailTableCard onAdd={picker.open} … /></>;\n * ```\n */\nexport function useFilePicker({\n  accept,\n  multiple,\n  capture,\n  maxSize,\n  maxFiles,\n  isValid,\n  invalidMessage,\n  onFiles,\n  onPick,\n  onReject,\n  disabled,\n  labels: labelsProp,\n}: UseFilePickerOptions): UseFilePickerReturn {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  const fileText = useKitFileLabels();\n  // Assertive: a refusal is a failure the user has to hear before they move on, and\n  // it is the only thing this region ever says.\n  const { announce, regionProps } = useAnnounce({ politeness: \"assertive\" });\n\n  const take = (list: ArrayLike<File> | null | undefined) => {\n    if (disabled || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const files = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      files,\n      // A single-file picker holds one file by definition; `maxFiles` is a multi-mode\n      // cap and would only ever say \"0\" there if a caller passed it by mistake.\n      { accept, maxSize, maxFiles: multiple ? maxFiles : undefined, isValid, invalidMessage },\n      labels,\n      fileText.size,\n    );\n    if (!judgePick(onPick, accepted, rejected)) {\n      if (rejected.length > 0) onReject?.(rejected);\n      announce(labels.rejectedPick(files.length));\n      return;\n    }\n    if (accepted.length > 0) onFiles?.(accepted);\n    if (rejected.length > 0) {\n      onReject?.(rejected);\n      announce(summariseRejections(rejected, labels));\n    }\n  };\n\n  const element = (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        disabled={disabled}\n        // `hidden` (display: none), not `sr-only`: the control a user reaches is the\n        // button, and a second, nameless tab stop for the same action is noise. A\n        // display:none file input still opens on `.click()` in every current browser —\n        // and, unlike `sr-only`, it cannot escape to the initial containing block and\n        // stretch the page (see the note in `file-dropzone.tsx`).\n        className=\"hidden\"\n        tabIndex={-1}\n        aria-hidden\n        onChange={(e) => {\n          // Copy BEFORE the reset: `files` is a live view of the input's value, and\n          // clearing the value empties it.\n          const picked = Array.from(e.currentTarget.files ?? []);\n          e.currentTarget.value = \"\";\n          take(picked);\n        }}\n      />\n      <span {...regionProps} />\n    </>\n  );\n\n  return {\n    open: () => {\n      if (!disabled) inputRef.current?.click();\n    },\n    take,\n    element,\n  };\n}\n\n/* ── FileButton ──────────────────────────────────────────────────────────── */\n\ntype ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;\n\nexport interface FileButtonProps\n  extends Omit<UseFilePickerOptions, \"disabled\">,\n    // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to\n    // \"button\" (see 2. above) — a file trigger never submits a form.\n    Omit<ButtonOwnProps, \"type\" | \"children\" | \"accept\" | \"capture\" | \"multiple\"> {\n  /** The button's content — usually an icon and a word. It is the accessible name. */\n  children: ReactNode;\n  /** Busy: disabled, `aria-busy`, and a spinner before the content — for \"uploading\". */\n  pending?: boolean;\n  /** Also accept files dropped ON the button (lenkbank's \"drop onto the button\").\n   *  Off by default: a button that silently takes drops is a surprise on a page that\n   *  has a real drop target elsewhere. */\n  droppable?: boolean;\n}\n\n/**\n * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop\n * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the\n * picker from elsewhere too).\n *\n * ```tsx\n * <FileButton accept=\"image/*,application/pdf\" capture=\"environment\" variant=\"secondary\"\n *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>\n *   <Camera aria-hidden /> Photograph receipt\n * </FileButton>\n * ```\n */\nexport const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(function FileButton(\n  {\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles,\n    onPick,\n    onReject,\n    labels,\n    pending,\n    droppable,\n    disabled,\n    children,\n    className,\n    onClick,\n    onDragEnter,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n    ...rest\n  },\n  ref,\n) {\n  const inert = Boolean(disabled || pending);\n  const picker = useFilePicker({\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles,\n    onPick,\n    onReject,\n    labels,\n    disabled: inert,\n  });\n  const [dragOver, setDragOver] = useState(false);\n\n  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n  // Only when `droppable`: otherwise the caller's own handlers are passed untouched.\n  const dropHandlers = droppable\n    ? {\n        onDragEnter: (e: DragEvent<HTMLButtonElement>) => {\n          onDragEnter?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          if (!inert) setDragOver(true);\n        },\n        onDragOver: (e: DragEvent<HTMLButtonElement>) => {\n          onDragOver?.(e);\n          if (!hasFiles(e)) return;\n          // Always cancel for a file drag, busy or not: an uncancelled drop makes the\n          // browser NAVIGATE to the file, which loses the page.\n          e.preventDefault();\n          e.dataTransfer.dropEffect = inert ? \"none\" : \"copy\";\n        },\n        onDragLeave: (e: DragEvent<HTMLButtonElement>) => {\n          onDragLeave?.(e);\n          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n          setDragOver(false);\n        },\n        onDrop: (e: DragEvent<HTMLButtonElement>) => {\n          onDrop?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          setDragOver(false);\n          picker.take(e.dataTransfer.files);\n        },\n      }\n    : { onDragEnter, onDragOver, onDragLeave, onDrop };\n\n  // `Button` is a plain function component; under React 19 `ref` is an ordinary prop\n  // and reaches the `<button>` through its `...rest`. Its props type just does not\n  // declare it, hence the widening here rather than a second button implementation.\n  const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };\n\n  return (\n    <>\n      <Button\n        {...rest}\n        {...refProp}\n        {...dropHandlers}\n        type=\"button\"\n        disabled={inert}\n        aria-busy={pending || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // A live drag gets the focus ring's colour as a ring: \"let go here\", in the\n          // same vocabulary the button already uses for \"you are here\".\n          dragOver && \"ring-2 ring-[var(--brand)]\",\n          className,\n        )}\n        onClick={(e) => {\n          onClick?.(e);\n          if (!e.defaultPrevented) picker.open();\n        }}\n      >\n        {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same\n            thing on the button, and a spoken \"Loading\" would run into its name. */}\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {children}\n      </Button>\n      {picker.element}\n    </>\n  );\n});\nFileButton.displayName = \"FileButton\";\n"],"mappings":"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","names":["FileButton"]}
+{"version":3,"sources":["../../src/components/file-button.tsx"],"sourcesContent":["import { forwardRef, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, DragEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner } from \"./ui\";\n\n/**\n * A button that opens the file picker — the shape all three apps kept writing by hand\n * as a `<Button>` plus a hidden `<input type=\"file\">` plus a ref between them (seven\n * copies in keksdose, two each in kastlan and lenkbank).\n *\n * Every copy had to remember the same four things, and each one forgot at least one:\n *\n *  1. **Reset the input after every pick.** A file input fires `change` only when its\n *     value CHANGES, so picking the same file twice in a row — the retry after a failed\n *     upload, the second photo of the same receipt — did nothing at all, which reads as\n *     a broken button. `value = \"\"` after each pick; always, not per call site.\n *  2. **`type=\"button\"`.** `<Button>` does not set it, and inside a form a bare button\n *     submits the form before the picker opens.\n *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's\n *     \"All files\" switch, a drop, and a mobile share sheet all hand over whatever the\n *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and\n *     an optional `isValid`.\n *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a\n *     translated message per file, and spoken through a live region — the kit does not\n *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).\n *\n * The part that is not a button — the hidden input, the check, the announcement — is\n * {@link useFilePicker}, for the case where the thing that opens the picker is someone\n * else's control (a card's \"Add\" action, a menu item, a second button for the camera).\n */\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the file pickers ({@link FileButton}, `FileDropzone`) render or speak.\n *  Messages are functions of the file name so a translation can put it anywhere. */\nexport interface FilePickerLabels {\n  /** The file's type is not in `accept`, when no `accept` is known to name (see\n   *  `rejectedTypeOnly`). */\n  rejectedType: (name: string) => string;\n  /** The file's type is not in `accept`, naming what IS accepted: `accept`'s tokens,\n   *  lower-cased and joined with \", \" (`\".csv\"` => \"Only .csv files\"). Used whenever\n   *  `accept` is set — kastlan kept a custom `isValid` + `invalidMessage` per form only\n   *  to say this, and `accept` already knows it. */\n  rejectedTypeOnly: (accept: string, name: string) => string;\n  /** The file is larger than `maxSize`; `maxSize` arrives formatted (\"5 MB\"). */\n  rejectedSize: (name: string, maxSize: string) => string;\n  /** The file was one too many for `maxFiles`. */\n  rejectedCount: (name: string, maxFiles: number) => string;\n  /** `isValid` said no and the caller gave no `invalidMessage`. */\n  rejectedInvalid: (name: string) => string;\n  /** Spoken instead of the per-file message when more than one file was refused. */\n  rejectedMany: (count: number) => string;\n  /** Spoken (and shown, on a dropzone) when `onPick` refused the WHOLE pick.\n   *  Receives the number of files in it. */\n  rejectedPick: (count: number) => string;\n  /** Spoken after a pick the component itself echoes (the dropzone). */\n  selected: (count: number, firstName: string) => string;\n  /** The dropzone's remove button for one file. */\n  remove: (name: string) => string;\n  /** The dropzone's remove-everything button in `multiple` mode. */\n  clearAll: string;\n  /** Spoken after a remove / clear, since the button that was pressed is gone. */\n  removed: (name: string) => string;\n  cleared: string;\n  /** The dropzone's accessible name, when the host passes no `dropLabel`. */\n  dropzone: string;\n  /** The dropzone's Browse button, when the host passes no `browseLabel`. */\n  browse: string;\n  /** What an empty single-file dropzone says (no `emptyLabel` given). */\n  empty: string;\n  /** …and an empty `multiple` one. */\n  emptyMultiple: string;\n  /** The dropzone's second line (no `hint` given). Receives `accept` as a person\n   *  reads it (`\".pdf, image/png\"`), or `\"\"` when anything goes. */\n  hint: (accept: string) => string;\n  /** What a `busy` dropzone says in place of its body (\"Uploading…\"). */\n  busy: string;\n}\n\nexport const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels = {\n  rejectedType: (name) => `“${name}” is not a supported file type`,\n  rejectedTypeOnly: (accept) => `Only ${accept} files`,\n  rejectedSize: (name, maxSize) => `“${name}” is larger than ${maxSize}`,\n  rejectedCount: (name, maxFiles) =>\n    `“${name}” was not added: at most ${maxFiles} ${maxFiles === 1 ? \"file\" : \"files\"}`,\n  rejectedInvalid: (name) => `“${name}” cannot be used here`,\n  rejectedMany: (count) => `${count} files were not added`,\n  rejectedPick: (count) =>\n    count === 1 ? \"The file was not added\" : `None of the ${count} files were added`,\n  selected: (count, firstName) => (count === 1 ? `“${firstName}” selected` : `${count} files selected`),\n  remove: (name) => `Remove “${name}”`,\n  clearAll: \"Remove all files\",\n  removed: (name) => `“${name}” removed`,\n  cleared: \"All files removed\",\n  dropzone: \"File upload\",\n  browse: \"Browse\",\n  empty: \"Drop a file here\",\n  emptyMultiple: \"Drop files here\",\n  hint: (accept) => (accept ? `Accepted: ${accept}` : \"Any file type\"),\n  busy: \"Uploading…\",\n};\n\n/* ── Screening ───────────────────────────────────────────────────────────── */\n\nexport type FileRejectionReason = \"type\" | \"size\" | \"count\" | \"invalid\";\n\n/** One file the picker refused, and why. `message` is already translated (see\n *  {@link FilePickerLabels}, or the caller's `invalidMessage`), so a host that just\n *  wants to show it can render `rejections[0].message` as is. */\nexport interface FileRejection {\n  file: File;\n  reason: FileRejectionReason;\n  message: string;\n}\n\n/**\n * Does `file` satisfy an `accept` string, the way the browser's dialog reads it?\n * Comma-separated tokens: `.ext` (case-insensitive suffix of the name), `type/*`\n * (a MIME family) or an exact MIME type. An empty or absent `accept` takes anything.\n *\n * A file with no `type` — common for `.step`, `.dat`, anything the OS has no MIME\n * mapping for — can only match by extension, which is why lenkbank lists `.stp` AND\n * `model/step`: that is how `accept` has to be written for the dialog anyway.\n */\nexport function matchesAccept(file: File, accept: string | undefined): boolean {\n  const tokens = (accept ?? \"\")\n    .split(\",\")\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  // An EMPTY type is the browser saying \"I don't know\", not \"it's something else\": HEIC\n  // photos on Windows without the codec arrive with `type === \"\"`. Refusing them\n  // (0.6.0) refused iPhone photos the picker itself had just offered (keksdose). So a\n  // missing type is inferred from the extension where that is unambiguous, and a file\n  // whose type cannot be known at all is given the benefit of the doubt — nothing here\n  // proves it does not match, and the server validates what it receives anyway.\n  const type = (file.type || typeFromExtension(name) || \"\").toLowerCase();\n  if (!type && !tokens.every((t) => t.startsWith(\".\"))) return true;\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) return name.endsWith(token);\n    if (!type) return false;\n    if (token.endsWith(\"/*\")) return type.startsWith(token.slice(0, -1));\n    return type === token;\n  });\n}\n\n/** MIME types for the extensions a browser most often leaves untyped. */\nconst EXTENSION_TYPES: Record<string, string> = {\n  heic: \"image/heic\",\n  heif: \"image/heif\",\n  avif: \"image/avif\",\n  webp: \"image/webp\",\n  jpg: \"image/jpeg\",\n  jpeg: \"image/jpeg\",\n  png: \"image/png\",\n  gif: \"image/gif\",\n  pdf: \"application/pdf\",\n  csv: \"text/csv\",\n  txt: \"text/plain\",\n};\n\nfunction typeFromExtension(name: string): string | undefined {\n  const dot = name.lastIndexOf(\".\");\n  return dot === -1 ? undefined : EXTENSION_TYPES[name.slice(dot + 1)];\n}\n\n/** @internal `\" .PDF, image/png ,\"` => `\".pdf, image/png\"` — `accept` as a person reads\n *  it. Also the dropzone's default hint. */\nexport function formatAccept(accept: string): string {\n  return accept\n    .split(\",\")\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean)\n    .join(\", \");\n}\n\n/** What the pickers screen a pick with. All optional; nothing set accepts everything. */\nexport interface FileScreenOptions {\n  accept?: string;\n  /** Bytes. Larger files are refused with reason `\"size\"`. */\n  maxSize?: number;\n  /** How many files one pick may deliver. The rest are refused with reason `\"count\"`\n   *  — first come, first kept. For a running cap (\"at most 5 attachments\") pass what\n   *  is LEFT: `maxFiles={5 - attachments.length}`. */\n  maxFiles?: number;\n  /** The caller's own check, after `accept` and `maxSize`. */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal; `labels.rejectedInvalid` otherwise. */\n  invalidMessage?: string;\n}\n\n/** @internal Split a pick into the files that pass and the ones that do not. */\nexport function screenFiles(\n  files: readonly File[],\n  opts: FileScreenOptions,\n  labels: FilePickerLabels,\n  formatSize: (bytes: number) => string,\n): { accepted: File[]; rejected: FileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: FileRejection[] = [];\n  // Name what `accept` takes (\"Only .csv files\") — unless the host translated\n  // `rejectedType` but not yet `rejectedTypeOnly`: its own sentence beats an English one.\n  const acceptText = opts.accept ? formatAccept(opts.accept) : \"\";\n  const useOnly =\n    acceptText !== \"\" &&\n    (labels.rejectedTypeOnly !== DEFAULT_FILE_PICKER_LABELS.rejectedTypeOnly ||\n      labels.rejectedType === DEFAULT_FILE_PICKER_LABELS.rejectedType);\n  const typeMessage = (name: string) =>\n    useOnly ? labels.rejectedTypeOnly(acceptText, name) : labels.rejectedType(name);\n  for (const file of files) {\n    let reason: FileRejectionReason | null = null;\n    if (!matchesAccept(file, opts.accept)) reason = \"type\";\n    else if (opts.maxSize !== undefined && file.size > opts.maxSize) reason = \"size\";\n    else if (opts.isValid && !opts.isValid(file)) reason = \"invalid\";\n    // Count last, and only against files that passed everything else: a refused\n    // file should not use up one of the slots a good one could have had.\n    else if (opts.maxFiles !== undefined && accepted.length >= opts.maxFiles) reason = \"count\";\n    if (reason === null) {\n      accepted.push(file);\n      continue;\n    }\n    const message =\n      reason === \"type\"\n        ? typeMessage(file.name)\n        : reason === \"size\"\n          ? labels.rejectedSize(file.name, formatSize(opts.maxSize ?? 0))\n          : reason === \"count\"\n            ? labels.rejectedCount(file.name, Math.max(0, opts.maxFiles ?? 0))\n            : (opts.invalidMessage ?? labels.rejectedInvalid(file.name));\n    rejected.push({ file, reason, message });\n  }\n  return { accepted, rejected };\n}\n\n/**\n * Judges a pick as a whole — keksdose's \"refuse the pick if any file is bad\", which\n * with `onFiles` + `onReject` alone had to be rebuilt from two calls in a microtask.\n *\n * Called ONCE per pick, after screening and before `onFiles` / `onReject`, with both\n * halves (either may be empty). Return `false` to refuse the whole pick: the accepted\n * files are not delivered, `onReject` still receives what screening refused, and one\n * sentence (`labels.rejectedPick`) is spoken for the pick instead of a per-file one.\n * Return nothing to let the pick through as usual.\n *\n * ```tsx\n * onPick={(ok, bad) => bad.length === 0 || false}  // all or nothing\n * ```\n */\nexport type FilePickHandler = (accepted: File[], rejected: FileRejection[]) => boolean | void;\n\n/** @internal The shared tail of both pickers: run `onPick`, and say whether the pick\n *  stands. A pick with nothing accepted has nothing to refuse, so `false` there is\n *  treated as no verdict and the usual per-file messages are kept. */\nexport function judgePick(\n  onPick: FilePickHandler | undefined,\n  accepted: File[],\n  rejected: FileRejection[],\n): boolean {\n  if (!onPick) return true;\n  return onPick(accepted, rejected) !== false || accepted.length === 0;\n}\n\n/** One sentence for a whole batch of refusals: the file's own message for one, a\n *  count for several — reading out five sentences in a row helps nobody. */\nexport function summariseRejections(rejected: readonly FileRejection[], labels: FilePickerLabels): string {\n  if (rejected.length === 0) return \"\";\n  if (rejected.length === 1) return rejected[0].message;\n  return labels.rejectedMany(rejected.length);\n}\n\n/* ── useFilePicker ───────────────────────────────────────────────────────── */\n\nexport interface UseFilePickerOptions extends FileScreenOptions {\n  /** Let one pick deliver several files. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /**\n   * Ask a phone for its camera instead of the file chooser: `\"environment\"` is the\n   * back camera, `\"user\"` the front. A HINT — desktop browsers ignore it, and Chrome\n   * drops it when `multiple` is also set (a camera cannot deliver a list), which is why\n   * keksdose's camera input has no `multiple`. Pass one or the other.\n   */\n  capture?: boolean | \"user\" | \"environment\";\n  /** The files that passed, in pick order. Never called with an empty array.\n   *  Optional since 0.7 for a caller that takes the pick through `onPick` alone. */\n  onFiles?: (files: File[]) => void;\n  /** See {@link FilePickHandler}: the whole pick at once, with the power to refuse it. */\n  onPick?: FilePickHandler;\n  /** The files that did not, with a translated message each. The refusals are also\n   *  spoken through a live region, so this is for SHOWING them, not for a11y. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** `open()` and `take()` do nothing while set. */\n  disabled?: boolean;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n}\n\nexport interface UseFilePickerReturn {\n  /** Open the system picker. Call it from a click handler — browsers only open a file\n   *  dialog in response to a user gesture. */\n  open: () => void;\n  /** Screen and deliver files that arrived some other way — a drop, a paste. Honours\n   *  `multiple` (only the first file without it) and every check. */\n  take: (files: ArrayLike<File> | null | undefined) => void;\n  /** The hidden input and the live region. Render it once, anywhere — it takes no\n   *  space and needs no positioned ancestor. */\n  element: ReactElement;\n}\n\n/**\n * The headless half of {@link FileButton}: a hidden file input you can open from any\n * control, with the reset, the screening and the announcement built in.\n *\n * ```tsx\n * const picker = useFilePicker({ accept: \".pdf\", onFiles: ([f]) => upload(f) });\n * return <>{picker.element}<DetailTableCard onAdd={picker.open} … /></>;\n * ```\n */\nexport function useFilePicker({\n  accept,\n  multiple,\n  capture,\n  maxSize,\n  maxFiles,\n  isValid,\n  invalidMessage,\n  onFiles,\n  onPick,\n  onReject,\n  disabled,\n  labels: labelsProp,\n}: UseFilePickerOptions): UseFilePickerReturn {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  const fileText = useKitFileLabels();\n  // Assertive: a refusal is a failure the user has to hear before they move on, and\n  // it is the only thing this region ever says.\n  const { announce, regionProps } = useAnnounce({ politeness: \"assertive\" });\n\n  const take = (list: ArrayLike<File> | null | undefined) => {\n    if (disabled || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const files = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      files,\n      // A single-file picker holds one file by definition; `maxFiles` is a multi-mode\n      // cap and would only ever say \"0\" there if a caller passed it by mistake.\n      { accept, maxSize, maxFiles: multiple ? maxFiles : undefined, isValid, invalidMessage },\n      labels,\n      fileText.size,\n    );\n    if (!judgePick(onPick, accepted, rejected)) {\n      if (rejected.length > 0) onReject?.(rejected);\n      announce(labels.rejectedPick(files.length));\n      return;\n    }\n    if (accepted.length > 0) onFiles?.(accepted);\n    if (rejected.length > 0) {\n      onReject?.(rejected);\n      announce(summariseRejections(rejected, labels));\n    }\n  };\n\n  const element = (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        disabled={disabled}\n        // `hidden` (display: none), not `sr-only`: the control a user reaches is the\n        // button, and a second, nameless tab stop for the same action is noise. A\n        // display:none file input still opens on `.click()` in every current browser —\n        // and, unlike `sr-only`, it cannot escape to the initial containing block and\n        // stretch the page (see the note in `file-dropzone.tsx`).\n        className=\"hidden\"\n        tabIndex={-1}\n        aria-hidden\n        onChange={(e) => {\n          // Copy BEFORE the reset: `files` is a live view of the input's value, and\n          // clearing the value empties it.\n          const picked = Array.from(e.currentTarget.files ?? []);\n          e.currentTarget.value = \"\";\n          take(picked);\n        }}\n      />\n      <span {...regionProps} />\n    </>\n  );\n\n  return {\n    open: () => {\n      if (!disabled) inputRef.current?.click();\n    },\n    take,\n    element,\n  };\n}\n\n/* ── FileButton ──────────────────────────────────────────────────────────── */\n\ntype ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;\n\nexport interface FileButtonProps\n  extends Omit<UseFilePickerOptions, \"disabled\">,\n    // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to\n    // \"button\" (see 2. above) — a file trigger never submits a form.\n    Omit<ButtonOwnProps, \"type\" | \"children\" | \"accept\" | \"capture\" | \"multiple\"> {\n  /** The button's content — usually an icon and a word. It is the accessible name. */\n  children: ReactNode;\n  /** Busy: disabled, `aria-busy`, and a spinner before the content — for \"uploading\". */\n  pending?: boolean;\n  /** Also accept files dropped ON the button (lenkbank's \"drop onto the button\").\n   *  Off by default: a button that silently takes drops is a surprise on a page that\n   *  has a real drop target elsewhere. */\n  droppable?: boolean;\n}\n\n/**\n * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop\n * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the\n * picker from elsewhere too).\n *\n * ```tsx\n * <FileButton accept=\"image/*,application/pdf\" capture=\"environment\" variant=\"secondary\"\n *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>\n *   <Camera aria-hidden /> Photograph receipt\n * </FileButton>\n * ```\n */\nexport const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(function FileButton(\n  {\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles,\n    onPick,\n    onReject,\n    labels,\n    pending,\n    droppable,\n    disabled,\n    children,\n    className,\n    onClick,\n    onDragEnter,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n    ...rest\n  },\n  ref,\n) {\n  const inert = Boolean(disabled || pending);\n  const picker = useFilePicker({\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles,\n    onPick,\n    onReject,\n    labels,\n    disabled: inert,\n  });\n  const [dragOver, setDragOver] = useState(false);\n\n  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n  // Only when `droppable`: otherwise the caller's own handlers are passed untouched.\n  const dropHandlers = droppable\n    ? {\n        onDragEnter: (e: DragEvent<HTMLButtonElement>) => {\n          onDragEnter?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          if (!inert) setDragOver(true);\n        },\n        onDragOver: (e: DragEvent<HTMLButtonElement>) => {\n          onDragOver?.(e);\n          if (!hasFiles(e)) return;\n          // Always cancel for a file drag, busy or not: an uncancelled drop makes the\n          // browser NAVIGATE to the file, which loses the page.\n          e.preventDefault();\n          e.dataTransfer.dropEffect = inert ? \"none\" : \"copy\";\n        },\n        onDragLeave: (e: DragEvent<HTMLButtonElement>) => {\n          onDragLeave?.(e);\n          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n          setDragOver(false);\n        },\n        onDrop: (e: DragEvent<HTMLButtonElement>) => {\n          onDrop?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          setDragOver(false);\n          picker.take(e.dataTransfer.files);\n        },\n      }\n    : { onDragEnter, onDragOver, onDragLeave, onDrop };\n\n  // `Button` is a plain function component; under React 19 `ref` is an ordinary prop\n  // and reaches the `<button>` through its `...rest`. Its props type just does not\n  // declare it, hence the widening here rather than a second button implementation.\n  const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };\n\n  return (\n    <>\n      <Button\n        {...rest}\n        {...refProp}\n        {...dropHandlers}\n        type=\"button\"\n        disabled={inert}\n        aria-busy={pending || undefined}\n        data-drag-over={dragOver || undefined}\n        className={cn(\n          // A live drag gets the focus ring's colour as a ring: \"let go here\", in the\n          // same vocabulary the button already uses for \"you are here\".\n          dragOver && \"ring-2 ring-[var(--brand)]\",\n          className,\n        )}\n        onClick={(e) => {\n          onClick?.(e);\n          if (!e.defaultPrevented) picker.open();\n        }}\n      >\n        {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same\n            thing on the button, and a spoken \"Loading\" would run into its name. */}\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {children}\n      </Button>\n      {picker.element}\n    </>\n  );\n});\nFileButton.displayName = \"FileButton\";\n"],"mappings":"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","names":["FileButton"]}