@eifi1/ui-kit 0.4.0

package/dist/components/ui.js

@@ -0,0 +1,512 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { ChevronDown, Eye, EyeOff, HelpCircle } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { Tooltip } from "./tooltip.js";
+const BUTTON_BASE = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+const buttonVariantClasses = {
+  primary: "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]",
+  secondary: "border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
+  ghost: "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
+  danger: "bg-red-600 text-white hover:bg-red-500 focus:ring-red-300",
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]"
+};
+function buttonClasses(variant = "primary", className) {
+  return cn(BUTTON_BASE, buttonVariantClasses[variant], className);
+}
+function Button({
+  variant = "primary",
+  stretch,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      className: cn(
+        BUTTON_BASE,
+        // In a flex row next to a taller labelled field, `stretch` makes the button
+        // fill the field's height so the two line up (self-stretch overrides the row's
+        // align-items). No effect outside a flex row / when it's already the tallest.
+        stretch && "self-stretch",
+        buttonVariantClasses[variant],
+        className
+      )
+    }
+  );
+}
+const ICON_BUTTON_BASE = "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:size-5";
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      ...rest,
+      className: cn(
+        ICON_BUTTON_BASE,
+        size === "sm" ? "size-8" : "size-9",
+        buttonVariantClasses[variant],
+        className
+      )
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-[var(--brand)] focus:ring-[var(--brand)] dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 disabled:cursor-default disabled:bg-slate-50 disabled:text-slate-500 dark:disabled:bg-slate-800/60 dark:disabled:text-slate-400 [&[readonly]]:bg-slate-50 [&[readonly]]:text-slate-500 dark:[&[readonly]]:bg-slate-800/60 dark:[&[readonly]]:text-slate-400";
+const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-white [&[readonly]]:text-slate-900 dark:[&[readonly]]:bg-slate-900 dark:[&[readonly]]:text-slate-100";
+const FIELD_FLOATING_PAD = "pt-4 pb-1";
+const FIELD_INVALID = "border-rose-400 ring-1 ring-rose-400 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/80 dark:ring-rose-500/80 dark:focus:border-rose-400";
+const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
+const PHONE_QUERY = "(max-width: 767px)";
+const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-slate-400 focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60 dark:placeholder:text-slate-500";
+const FIELD_TRIGGER = cn(
+  FIELD_BASE,
+  "relative flex items-center justify-between gap-2 text-left hover:bg-slate-50 dark:hover:bg-slate-800"
+);
+function FieldChevron({ className }) {
+  return /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: cn(
+        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+        className
+      )
+    }
+  );
+}
+const FLOATING_LABEL_CLASS = cn(
+  "pointer-events-none absolute left-3 top-2.5 text-sm text-slate-400 transition-all",
+  "max-w-[calc(100%-1.5rem)] truncate",
+  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600",
+  "dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300",
+  "peer-disabled:opacity-50"
+);
+const FLOATING_ROW_CLASS = cn(
+  "pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all",
+  "max-w-[calc(100%-3rem)] text-sm text-slate-400",
+  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600",
+  "dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300",
+  "peer-disabled:opacity-50"
+);
+const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-slate-500 dark:text-slate-400 peer-disabled:opacity-50";
+const FLOATING_LABEL_STATIC = cn(
+  "pointer-events-none absolute left-3 top-1",
+  STATIC_LABEL_TYPE,
+  "max-w-[calc(100%-1.5rem)] truncate"
+);
+function FloatingField({
+  className,
+  htmlFor,
+  label,
+  staticLabel,
+  srOnlyLabel,
+  hint,
+  children
+}) {
+  const withHint = hint !== void 0 && !srOnlyLabel;
+  const atEnd = withHint && staticLabel;
+  const labelEl = label !== void 0 && /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor,
+      className: srOnlyLabel ? "sr-only" : atEnd ? cn("pointer-events-none min-w-0 truncate", STATIC_LABEL_TYPE) : withHint ? "pointer-events-none min-w-0 truncate" : staticLabel ? FLOATING_LABEL_STATIC : FLOATING_LABEL_CLASS,
+      children: label
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    children,
+    withHint ? (
+      // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
+      // the field's own right padding instead of running under the chevron.
+      // Animated: the row floats with the label and is only as wide as it needs
+      // to be. Either way the hint keeps its width (`shrink-0`) and the label
+      // is the one that gives way.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: atEnd ? "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1" : FLOATING_ROW_CLASS,
+          children: [
+            labelEl,
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+          ]
+        }
+      )
+    ) : labelEl
+  ] });
+}
+function FieldHint({ label, side = "left" }) {
+  return /* @__PURE__ */ jsx(Tooltip, { label, side, portal: true, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick: (e) => e.preventDefault(),
+      className: "flex text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200",
+      children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5" })
+    }
+  ) });
+}
+function FieldLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
+}
+const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
+const Input = forwardRef(function Input2({ className, inputClassName, label, id, placeholder, type, variant = "field", invalid, ...rest }, ref) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState(false);
+  const effectiveType = isPassword && revealed ? "text" : type;
+  const handleClick = PICKER_TYPES.has(type ?? "") ? (e) => {
+    rest.onClick?.(e);
+    try {
+      e.currentTarget.showPicker?.();
+    } catch {
+    }
+  } : rest.onClick;
+  const revealToggle = isPassword ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      onClick: () => setRevealed((v) => !v),
+      "aria-label": revealed ? "Hide password" : "Show password",
+      "aria-pressed": revealed,
+      className: "absolute inset-y-0 right-0 flex items-center px-2.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+      children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+    }
+  ) : null;
+  if (label === void 0) {
+    if (!isPassword) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          type,
+          placeholder,
+          ...rest,
+          "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+          onClick: handleClick,
+          className: cn(FIELD_BASE, className, inputClassName, invalid && FIELD_INVALID)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          type: effectiveType,
+          placeholder,
+          ...rest,
+          "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+          className: cn(FIELD_BASE, "pr-9", inputClassName, invalid && FIELD_INVALID)
+        }
+      ),
+      revealToggle
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: fieldId,
+        type: effectiveType,
+        placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : " ",
+        ...rest,
+        "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+        onClick: handleClick,
+        className: cn(
+          asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
+          isPassword && "pr-9",
+          inputClassName,
+          invalid && FIELD_INVALID
+        )
+      }
+    ),
+    revealToggle
+  ] });
+});
+Input.displayName = "Input";
+const Select = forwardRef(function Select2({ className, label, id, children, invalid, hint, ...rest }, ref) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, {});
+  if (label === void 0) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref,
+          ...rest,
+          "aria-invalid": invalid || void 0,
+          className: cn(FIELD_BASE, "appearance-none pr-9", invalid && FIELD_INVALID),
+          children
+        }
+      ),
+      chevron
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        id: fieldId,
+        ...rest,
+        "aria-invalid": invalid || void 0,
+        className: cn(
+          FIELD_BASE,
+          FIELD_FLOATING_PAD,
+          "peer appearance-none pr-9",
+          invalid && FIELD_INVALID
+        ),
+        children
+      }
+    ),
+    chevron
+  ] });
+});
+Select.displayName = "Select";
+const Textarea = forwardRef(function Textarea2({ className, label, id, placeholder, invalid, ...rest }, ref) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  if (label === void 0) {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        placeholder,
+        ...rest,
+        "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+        className: cn(FIELD_BASE, className, invalid && FIELD_INVALID)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      id: fieldId,
+      placeholder: " ",
+      ...rest,
+      "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+      className: cn(FLOATING_INPUT_CLASS, invalid && FIELD_INVALID)
+    }
+  ) });
+});
+Textarea.displayName = "Textarea";
+function Card({
+  className,
+  children,
+  flush
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Surface + border are theme tokens so the palette switcher (feedback
+        // #307) can re-skin every card; a caller's own bg-*/border-* override
+        // still wins via tailwind-merge.
+        "bg-[var(--bg-surface)]",
+        flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm",
+        className
+      ),
+      children
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        // Grid (not flex) so CardAction can occupy a top-right column; with no
+        // action it collapses to one column and title/description stack.
+        "grid auto-rows-min items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-[var(--money-neutral)]", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-start-1 row-span-2 self-start justify-self-end", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn("px-6 last:pb-6", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 pb-6", className),
+      ...props
+    }
+  );
+}
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block h-5 w-5 animate-spin rounded-full border-2 border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200",
+        className
+      )
+    }
+  );
+}
+function EmptyState({
+  title,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50/50 px-4 py-10 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-slate-700 dark:text-slate-200", children: title }),
+        hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint })
+      ]
+    }
+  );
+}
+const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-slate-200 dark:border-slate-800";
+const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-slate-200 md:dark:border-slate-800";
+const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-slate-300";
+const TAB_ACTIVE_CLASSES = "border-slate-900 text-slate-900 dark:border-slate-100 dark:text-slate-100";
+const TAB_INACTIVE_CLASSES = "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 dark:text-slate-400 dark:hover:text-slate-200";
+const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-300 md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
+const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-slate-900 md:text-slate-900 md:dark:border-slate-100 md:dark:text-slate-100";
+const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-slate-500 md:hover:border-slate-300 md:hover:text-slate-700 md:dark:text-slate-400 md:dark:hover:text-slate-200";
+function Tabs({ tabs, active, onChange, className, wrap = false, label }) {
+  const onListKeyDown = (e) => {
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0 && e.key !== "Home" && e.key !== "End") return;
+    const items = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+    const from = items.indexOf(document.activeElement);
+    if (from === -1) return;
+    e.preventDefault();
+    const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
+    items[to]?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": label,
+      onKeyDown: onListKeyDown,
+      className: cn(wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES, className),
+      children: tabs.map((tab) => {
+        const isActive = tab.id === active;
+        const shared = {
+          role: "tab",
+          "aria-selected": isActive,
+          className: cn(
+            wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
+            wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES
+          )
+        };
+        const inner = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          tab.label,
+          tab.badge != null ? tab.badge : null
+        ] });
+        return tab.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...shared,
+            href: tab.href,
+            draggable: false,
+            onClick: (e) => {
+              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+              e.preventDefault();
+              onChange(tab.id);
+            },
+            onKeyDown: (e) => {
+              if (e.key !== " ") return;
+              e.preventDefault();
+              onChange(tab.id);
+            },
+            children: inner
+          },
+          tab.id
+        ) : /* @__PURE__ */ jsx("button", { ...shared, onClick: () => onChange(tab.id), children: inner }, tab.id);
+      })
+    }
+  );
+}
+export {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  FIELD_BASE,
+  FIELD_DISPLAY,
+  FIELD_FLOATING_PAD,
+  FIELD_INVALID,
+  FIELD_TRIGGER,
+  FIELD_WRITABLE_LOOK,
+  FLOATING_INPUT_CLASS,
+  FLOATING_LABEL_CLASS,
+  FLOATING_LABEL_STATIC,
+  FieldChevron,
+  FieldHint,
+  FieldLabel,
+  FloatingField,
+  IconButton,
+  Input,
+  PHONE_QUERY,
+  Select,
+  Spinner,
+  Tabs,
+  Textarea,
+  buttonClasses
+};
+//# sourceMappingURL=ui.js.map

package/dist/components/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ui.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport { ChevronDown, Eye, EyeOff, HelpCircle } from \"lucide-react\";\nimport type { ButtonHTMLAttributes, ComponentPropsWithoutRef, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Tooltip } from \"./tooltip\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"brand\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\nconst BUTTON_BASE =\n  \"inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (primary = filled warm chip, secondary =\n// outline); `brand` stays the solid accent for the rare strong CTA; danger stays red\n// (destructive semantics). All focus rings use the brand accent.\nconst buttonVariantClasses: Record<ButtonVariant, string> = {\n  primary:\n    \"border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]\",\n  secondary:\n    \"border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  ghost:\n    \"bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]\",\n  danger: \"bg-red-600 text-white hover:bg-red-500 focus:ring-red-300\",\n  brand:\n    \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]\",\n};\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base + variant maps as\n * `<Button>`, so the two stay in lockstep.\n */\nexport function buttonClasses(variant: ButtonVariant = \"primary\", className?: string): string {\n  return cn(BUTTON_BASE, buttonVariantClasses[variant], className);\n}\n\nexport function Button({\n  variant = \"primary\",\n  stretch,\n  className,\n  ...rest\n}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant; stretch?: boolean }) {\n  return (\n    <button\n      {...rest}\n      className={cn(\n        BUTTON_BASE,\n        // In a flex row next to a taller labelled field, `stretch` makes the button\n        // fill the field's height so the two line up (self-stretch overrides the row's\n        // align-items). No effect outside a flex row / when it's already the tallest.\n        stretch && \"self-stretch\",\n        buttonVariantClasses[variant],\n        className,\n      )}\n    />\n  );\n}\n\n// Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2\n// gap-2 — so rendering a bare glyph through it gives a small icon in a wide,\n// text-shaped box. This fixes a square box instead and, crucially, forces the\n// child icon to 20px via `[&_svg]:size-5` so a caller cannot under-size it. Use\n// it wherever an action is a bare icon (edit/delete/tools) so they all match the\n// top-bar icon buttons and can never drift apart again.\n//\n// Draws its colours from the same `buttonVariantClasses` map as <Button>, so the\n// two re-skin together with the palette.\nconst ICON_BUTTON_BASE =\n  \"inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:size-5\";\n\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    variant?: ButtonVariant;\n    /** Box size: md = 36px (matches the top bar), sm = 32px. The icon stays 20px. */\n    size?: \"sm\" | \"md\";\n  }\n>(function IconButton({ variant = \"ghost\", size = \"md\", className, ...rest }, ref) {\n  return (\n    <button\n      ref={ref}\n      {...rest}\n      className={cn(\n        ICON_BUTTON_BASE,\n        size === \"sm\" ? \"size-8\" : \"size-9\",\n        buttonVariantClasses[variant],\n        className,\n      )}\n    />\n  );\n});\nIconButton.displayName = \"IconButton\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-[var(--border)] bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-[var(--brand)] focus:ring-[var(--brand)] dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own `text-slate-900`\n  // overrides the browser's grey — so a read-only value sat there in full-strength\n  // black, indistinguishable from one you could retype (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-slate-50 disabled:text-slate-500 dark:disabled:bg-slate-800/60 dark:disabled:text-slate-400 \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: white\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-slate-50 [&[readonly]]:text-slate-500 dark:[&[readonly]]:bg-slate-800/60 dark:[&[readonly]]:text-slate-400\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-white [&[readonly]]:text-slate-900 dark:[&[readonly]]:bg-slate-900 dark:[&[readonly]]:text-slate-100\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1\";\n\n// Error/required highlight for a field that is missing a value — a rose border\n// and matching focus ring so the control itself shows what's wrong, not just a\n// note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, full rose = rgb(208,30,78): left/top/bottom all 208,\n// right 160 then 115 — the side that is supposed to shout, at 55–77% of the others.\n// A border plus a ring is 2 CSS px, so whatever the fraction there is always one\n// fully covered device pixel on every side (re-measured: worst side 241).\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-rose-400 ring-1 ring-rose-400 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/80 dark:ring-rose-500/80 dark:focus:border-rose-400\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/** The phone breakpoint the display treatment below keys off — the same one the\n *  numpad sheet uses, kept in one place so the two can't drift apart. */\nexport const PHONE_QUERY = \"(max-width: 767px)\";\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies below\n * {@link PHONE_QUERY} and the field is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-slate-400 focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60 dark:placeholder:text-slate-500\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-left hover:bg-slate-50 dark:hover:bg-slate-800\",\n);\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pr-9` on the trigger so the value can't run underneath. */\nexport function FieldChevron({ className }: { className?: string }) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the white field, so no background chip and nothing to mismatch the card.\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute left-3 top-2.5 text-sm text-slate-400 transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600\",\n  \"dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300\",\n  \"peer-disabled:opacity-50\",\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider right clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the right edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48).\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-slate-400\",\n  \"peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600\",\n  \"dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300\",\n  \"peer-disabled:opacity-50\",\n);\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nconst STATIC_LABEL_TYPE =\n  \"text-[11px] leading-tight text-slate-500 dark:text-slate-400 peer-disabled:opacity-50\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below.\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute left-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n}: {\n  className?: string;\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the right edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    <div className={cn(\"relative\", className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `left-3`, so a long label truncates at\n        // the field's own right padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div\n          className={\n            atEnd\n              ? \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\"\n              : FLOATING_ROW_CLASS\n          }\n        >\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled {@link Select} / {@link Input} as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n */\nexport function FieldHint({ label, side = \"left\" }: { label: string; side?: \"left\" | \"right\" | \"top\" | \"bottom\" }) {\n  return (\n    <Tooltip label={label} side={side} portal>\n      <button\n        type=\"button\"\n        aria-label={label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        className=\"flex text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200\"\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport function FieldLabel({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <span className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport const Input = forwardRef<\n  HTMLInputElement,\n  InputHTMLAttributes<HTMLInputElement> & {\n    label?: ReactNode;\n    /** Classes for the `<input>` itself, as distinct from `className`, which\n     *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n     *  Without it a labelled Input had no way to reach its own element — so\n     *  `tabular-nums` on a numeric text field, which NumberInput has supported\n     *  all along through the identically named prop, was simply unavailable. */\n    inputClassName?: string;\n    /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n     *  heading. For the one field a form is about (a feedback subject, an account\n     *  name), never for a stack of them. Labelled fields only: the label is what\n     *  the placeholder falls back to once it goes `sr-only`. */\n    variant?: \"field\" | \"display\";\n    /** The field is required and unanswered, or holds something that cannot be\n     *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n     *  since feedback #235.\n     *\n     *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n     *  attribute spreads onto the element and nothing styles it — there is no\n     *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n     *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n     *  and painted the field exactly as if it were fine. Setting the prop sets the\n     *  attribute too, so the two can no longer be spelled separately. */\n    invalid?: boolean;\n  }\n>(function Input(\n  { className, inputClassName, label, id, placeholder, type, variant = \"field\", invalid, ...rest },\n  ref,\n) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      onClick={() => setRevealed((v) => !v)}\n      aria-label={revealed ? \"Hide password\" : \"Show password\"}\n      aria-pressed={revealed}\n      className=\"absolute inset-y-0 right-0 flex items-center px-2.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    if (!isPassword) {\n      return (\n        <input\n          ref={ref}\n          id={id}\n          type={type}\n          placeholder={placeholder}\n          {...rest}\n          // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n          // carried, or setting `invalid` would have quietly deleted a caller's own\n          // `aria-invalid`. The prop is the one that also paints; a bare attribute\n          // still announces, which is all it ever did.\n          aria-invalid={invalid || rest[\"aria-invalid\"] || undefined}\n          onClick={handleClick}\n          className={cn(FIELD_BASE, className, inputClassName, invalid && FIELD_INVALID)}\n        />\n      );\n    }\n    return (\n      <div className={cn(\"relative\", className)}>\n        <input\n          ref={ref}\n          id={id}\n          type={effectiveType}\n          placeholder={placeholder}\n          {...rest}\n          aria-invalid={invalid || rest[\"aria-invalid\"] || undefined}\n          className={cn(FIELD_BASE, \"pr-9\", inputClassName, invalid && FIELD_INVALID)}\n        />\n        {revealToggle}\n      </div>\n    );\n  }\n  return (\n    <FloatingField className={className} htmlFor={fieldId} label={label} srOnlyLabel={asDisplay}>\n      <input\n        ref={ref}\n        id={fieldId}\n        type={effectiveType}\n        // A labelled field's placeholder is normally a single space, feeding the\n        // floating label's peer-placeholder-shown trick. With the label sr-only\n        // there is no float left to drive, and an empty borderless line would say\n        // nothing at all — so the label text becomes the placeholder.\n        placeholder={asDisplay ? (placeholder ?? (typeof label === \"string\" ? label : \" \")) : \" \"}\n        {...rest}\n        aria-invalid={invalid || rest[\"aria-invalid\"] || undefined}\n        onClick={handleClick}\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n            : FLOATING_INPUT_CLASS,\n          isPassword && \"pr-9\",\n          inputClassName,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {revealToggle}\n    </FloatingField>\n  );\n});\nInput.displayName = \"Input\";\n\nexport const Select = forwardRef<\n  HTMLSelectElement,\n  SelectHTMLAttributes<HTMLSelectElement> & {\n    label?: ReactNode;\n    invalid?: boolean;\n    /** A {@link FieldHint} for the label line — see {@link FloatingField}. */\n    hint?: ReactNode;\n  }\n>(function Select({ className, label, id, children, invalid, hint, ...rest }, ref) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the right border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker).\n  const chevron = rest.disabled ? null : <FieldChevron />;\n  if (label === undefined) {\n    return (\n      <div className={cn(\"relative\", className)}>\n        <select\n          ref={ref}\n          {...rest}\n          aria-invalid={invalid || undefined}\n          className={cn(FIELD_BASE, \"appearance-none pr-9\", invalid && FIELD_INVALID)}\n        >\n          {children}\n        </select>\n        {chevron}\n      </div>\n    );\n  }\n  return (\n    <FloatingField className={className} htmlFor={fieldId} label={label} staticLabel hint={hint}>\n      <select\n        ref={ref}\n        id={fieldId}\n        {...rest}\n        aria-invalid={invalid || undefined}\n        className={cn(\n          FIELD_BASE,\n          FIELD_FLOATING_PAD,\n          \"peer appearance-none pr-9\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n      {chevron}\n    </FloatingField>\n  );\n});\nSelect.displayName = \"Select\";\n\nexport const Textarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    label?: ReactNode;\n    /** See {@link Input}'s `invalid`. */\n    invalid?: boolean;\n  }\n>(function Textarea({ className, label, id, placeholder, invalid, ...rest }, ref) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  if (label === undefined) {\n    return (\n      <textarea\n        ref={ref}\n        id={id}\n        placeholder={placeholder}\n        {...rest}\n        aria-invalid={invalid || rest[\"aria-invalid\"] || undefined}\n        className={cn(FIELD_BASE, className, invalid && FIELD_INVALID)}\n      />\n    );\n  }\n  return (\n    <FloatingField className={className} htmlFor={fieldId} label={label}>\n      <textarea\n        ref={ref}\n        id={fieldId}\n        placeholder=\" \"\n        {...rest}\n        aria-invalid={invalid || rest[\"aria-invalid\"] || undefined}\n        className={cn(FLOATING_INPUT_CLASS, invalid && FIELD_INVALID)}\n      />\n    </FloatingField>\n  );\n});\nTextarea.displayName = \"Textarea\";\n\nexport function Card({\n  className,\n  children,\n  flush,\n}: {\n  className?: string;\n  children: ReactNode;\n  /**\n   * When true, drop the card chrome (border, rounded corners, shadow) on mobile so the\n   * card spans edge-to-edge. Chrome reappears at the `md` breakpoint. Use for primary\n   * content cards on data pages; leave off for centered dialog/panel cards.\n   */\n  flush?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\n        // Surface + border are theme tokens so the palette switcher (feedback\n        // #307) can re-skin every card; a caller's own bg-*/border-* override\n        // still wins via tailwind-merge.\n        \"bg-[var(--bg-surface)]\",\n        flush\n          ? \"border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm\"\n          : \"rounded-lg border border-[var(--border)] shadow-sm\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// Composed shadcn-style Card sub-parts. `Card` stays padding-less (callers set\n// their own padding via className), so these own the padding/rhythm. Token-driven\n// so they re-skin with the palette. Use CardHeader → CardTitle/CardDescription\n// (+ optional CardAction, top-right) → CardContent → CardFooter.\nexport function CardHeader({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        // Grid (not flex) so CardAction can occupy a top-right column; with no\n        // action it collapses to one column and title/description stack.\n        \"grid auto-rows-min items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardDescription({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-[var(--money-neutral)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardAction({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-start-1 row-span-2 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  // `last:pb-6`, not a plain `pb-6`: CardHeader owns the top padding and CardFooter\n  // owns the bottom one, so a card WITHOUT a footer had nothing closing it off and\n  // its last field sat flush against the card edge (kastlan feedback: the language\n  // input touching the card bottom on /profile). Scoping to `:last-child` fixes that\n  // case and leaves a footered card's rhythm exactly as it was.\n  return <div data-slot=\"card-content\" className={cn(\"px-6 last:pb-6\", className)} {...props} />;\n}\n\nexport function CardFooter({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function Spinner({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn(\n        \"inline-block h-5 w-5 animate-spin rounded-full border-2 border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200\",\n        className,\n      )}\n    />\n  );\n}\n\nexport function EmptyState({\n  title,\n  hint,\n  className,\n}: {\n  title: string;\n  hint?: string;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50/50 px-4 py-10 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400\",\n        className,\n      )}\n    >\n      <div className=\"font-medium text-slate-700 dark:text-slate-200\">{title}</div>\n      {hint && <div className=\"mt-1 text-xs\">{hint}</div>}\n    </div>\n  );\n}\n\nexport interface TabsProps<T extends string> {\n  /** `label` is a ReactNode so tabs can pair an icon with text; `badge` is an\n   *  optional trailing node (e.g. a count pill). `href` marks a tab that IS a route:\n   *  it renders as an anchor so it can be middle-/⌘-clicked into a new tab (Keksdose\n   *  feedback #451), while a plain click still goes through `onChange` and stays\n   *  client-side. Tabs that only flip local state leave it unset — a link to a URL\n   *  that does not select the tab would be worse than no link. */\n  tabs: { id: T; label: ReactNode; badge?: ReactNode; href?: string }[];\n  active: T;\n  onChange: (id: T) => void;\n  className?: string;\n  /** Let the strip WRAP onto as many rows as it needs below `md`, instead of\n   *  scrolling sideways — for a strip carrying more tabs than fit on a phone row.\n   *  Keksdose live #262: ten reports on a 406px screen showed about three, and the\n   *  round-2 answer (a <select> below `md`) cost a tap to open and a tap to choose.\n   *  *\"I would rather keep the tabs but have multirow tabs depending on the screen\n   *  size, I will not loose the function to see all reports at once and navigate by\n   *  single click rather by double click.\"*\n   *\n   *  The active MARKER has to change with the layout, which is why this cannot be\n   *  done from a call site with a `className`: the default marker is a `border-b-2`\n   *  underline riding the container's own bottom rule, and a tab sitting in a row\n   *  that does not touch that rule cannot wear it — every row but the last would\n   *  show a stray line floating mid-strip, and `-mb-px` would pull each chip a\n   *  pixel into the row beneath it. A wrapped strip marks the active tab with a\n   *  filled brand chip instead, which is also the only thing findable at a glance\n   *  among ten same-weight labels on three rows.\n   *\n   *  From `md` up NOTHING changes: same single-line underline strip, same paddings,\n   *  same colours as every other strip in the app.\n   *\n   *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)\n   *  already fit a phone row, and turning those into chips would be an unrequested\n   *  redesign of three other pages. */\n  wrap?: boolean;\n  /** Accessible name for the `role=\"tablist\"` container. Every tab carries its own\n   *  text, so this names the GROUP, not the tabs; leave it unset where a visible\n   *  heading immediately above already does that job. */\n  label?: string;\n}\n\n// The two shapes are written out as whole strings rather than as one base plus a\n// pile of `md:` overrides. The unwrapped pair is character-for-character what this\n// component has always emitted, so the strips that do not opt in cannot drift; the\n// wrapped pair is authored from scratch, so no unprefixed utility has to be beaten\n// by its own `md:` twin through tailwind-merge. The only ordering this relies on is\n// Tailwind's own: unprefixed utilities are emitted first, then `md:`, then\n// `md:dark:` — so from 768px up the wrapped strip resolves to exactly the paint of\n// the default one, in both themes.\nconst TABLIST_CLASSES =\n  \"flex gap-1 overflow-x-auto overflow-y-hidden border-b border-slate-200 dark:border-slate-800\";\nconst TABLIST_WRAP_CLASSES =\n  \"flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-slate-200 md:dark:border-slate-800\";\n\nconst TAB_CLASSES =\n  \"whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-slate-300\";\nconst TAB_ACTIVE_CLASSES = \"border-slate-900 text-slate-900 dark:border-slate-100 dark:text-slate-100\";\nconst TAB_INACTIVE_CLASSES =\n  \"border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 dark:text-slate-400 dark:hover:text-slate-200\";\n\n// Below `md`, a chip: `py-2` on `text-xs` is exactly 32px tall, and ten German\n// report labels then land in three rows on a 406px screen (four at `text-sm`). The\n// active fill is the app's own selected pair, `--brand` / `--brand-contrast`: the\n// palette store writes both halves of it together for every preset and both themes,\n// so the contrast holds everywhere (5.1:1 at its worst preset) without a hard-coded\n// colour. Inactive chips take the raised card surface with full-strength body text —\n// all ten have to stay readable; it is the FILL, not the text weight, that says\n// which one is open.\nconst TAB_WRAP_CLASSES =\n  \"whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-300 md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm\";\nconst TAB_WRAP_ACTIVE_CLASSES =\n  \"bg-[var(--brand)] text-[var(--brand-contrast)] md:border-slate-900 md:text-slate-900 md:dark:border-slate-100 md:dark:text-slate-100\";\nconst TAB_WRAP_INACTIVE_CLASSES =\n  \"bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-slate-500 md:hover:border-slate-300 md:hover:text-slate-700 md:dark:text-slate-400 md:dark:hover:text-slate-200\";\n\nexport function Tabs<T extends string>({ tabs, active, onChange, className, wrap = false, label }: TabsProps<T>) {\n  // Arrow keys walk the strip in DOM order (ARIA tabs pattern), which is what keeps\n  // a WRAPPED strip navigable: the rows flow in DOM order too, so Right off the end\n  // of row one lands on the first chip of row two rather than nowhere. Home/End jump\n  // to the ends. Focus only — activation stays on click/Enter/Space, because a tab\n  // here can be a real route and moving focus must not navigate.\n  const onListKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0 && e.key !== \"Home\" && e.key !== \"End\") return;\n    const items = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const from = items.indexOf(document.activeElement as HTMLElement);\n    if (from === -1) return;\n    e.preventDefault();\n    const to =\n      e.key === \"Home\"\n        ? 0\n        : e.key === \"End\"\n          ? items.length - 1\n          : (from + step + items.length) % items.length;\n    items[to]?.focus();\n  };\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={label}\n      onKeyDown={onListKeyDown}\n      className={cn(wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES, className)}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        // Written once and worn by either tag below, so a routed tab and a\n        // state-only tab stay indistinguishable to the eye and to a screen reader.\n        const shared = {\n          role: \"tab\" as const,\n          \"aria-selected\": isActive,\n          className: cn(\n            wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,\n            wrap\n              ? isActive\n                ? TAB_WRAP_ACTIVE_CLASSES\n                : TAB_WRAP_INACTIVE_CLASSES\n              : isActive\n                ? TAB_ACTIVE_CLASSES\n                : TAB_INACTIVE_CLASSES,\n          ),\n        };\n        const inner = (\n          <span className=\"inline-flex items-center gap-1.5\">\n            {tab.label}\n            {tab.badge != null ? tab.badge : null}\n          </span>\n        );\n        return tab.href ? (\n          <a\n            key={tab.id}\n            {...shared}\n            href={tab.href}\n            draggable={false}\n            onClick={(e) => {\n              // Middle-, ⌘/Ctrl-, Shift- and Alt-click belong to the browser\n              // (feedback #451); only the plain left click is ours to cancel and\n              // route through `onChange`, which keeps the switch client-side.\n              if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n            // A <button> tab activated on Space; an anchor does not, so becoming a\n            // link (feedback #451) would have quietly cost keyboard users the tab\n            // strip. Enter is deliberately untouched — it is the anchor's own\n            // default and already arrives at `onChange` through the click handler\n            // above, so handling it here too would switch tabs twice. Same three\n            // lines the mobile row card carries, for the same reason; the rejected\n            // alternative — keeping a button and faking the middle click with\n            // window.open — is what the whole item is moving away from.\n            onKeyDown={(e) => {\n              if (e.key !== \" \") return;\n              e.preventDefault();\n              onChange(tab.id);\n            }}\n          >\n            {inner}\n          </a>\n        ) : (\n          <button key={tab.id} {...shared} onClick={() => onChange(tab.id)}>\n            {inner}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["IconButton","Input","Select","Textarea"]}

package/dist/components/use-mobile-reveal.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+
+/**
+ * The phone's endless scroll, in place of the desktop pager (feedback #232).
+ *
+ * A client-side table already holds every row, so there is nothing to fetch — it simply
+ * reveals more of the sorted list as a sentinel scrolls into view. A SERVER-paginated
+ * table keeps its pager instead, because the rest of the rows genuinely are not here.
+ *
+ * The reveal count only ever grows and self-caps at the (re-filtered) list length, which
+ * is why nothing resets it: narrowing a filter cannot leave the limit pointing past the
+ * end, and widening one does not have to re-reveal what the user already scrolled past.
+ *
+ * Lifted out of `DataTable` with the rest of its state; the sentinel ref belongs to the
+ * caller's `<li>`.
+ */
+declare function useMobileReveal<T>({ rows, slice, isServer, isMdUp, defaultPageSize, }: {
+    /** The whole sorted list — what there is to reveal. */
+    rows: T[];
+    /** What a server-paginated table shows instead. */
+    slice: T[];
+    isServer: boolean;
+    isMdUp: boolean;
+    defaultPageSize: number;
+}): {
+    mobileSlice: T[];
+    canRevealMoreMobile: boolean;
+    loadMoreRef: react.RefObject<HTMLLIElement | null>;
+};
+
+export { useMobileReveal };