@eifi1/ui-kit 0.8.1 → 0.10.0

package/dist/components/toast.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { PHONE_QUERY } from "./ui.js";
+let sonner = null;
+let loading = null;
+const queue = [];
+function loadSonner() {
+  loading ??= import("sonner").then(
+    (mod) => {
+      sonner = mod;
+      for (const fn of queue.splice(0)) fn(mod);
+      return mod;
+    },
+    () => {
+      queue.length = 0;
+      console.warn(
+        "@eifi1/ui-kit: `toast` needs the optional peer `sonner` \u2014 install it (npm i sonner) to show toasts."
+      );
+      return null;
+    }
+  );
+  return loading;
+}
+function withSonner(fn) {
+  if (sonner) {
+    fn(sonner);
+    return;
+  }
+  queue.push(fn);
+  void loadSonner();
+}
+let counter = 0;
+const nextId = () => `kit-toast-${++counter}`;
+const DEFAULT_TOAST_LABELS = {
+  close: "Close notification",
+  notifications: "Notifications",
+  undo: "Undo",
+  redo: "Redo"
+};
+let activeLabels = DEFAULT_TOAST_LABELS;
+const TOAST_ACTION_DURATION = 8e3;
+const privately = (node) => /* @__PURE__ */ jsx("span", { "data-private": "", children: node });
+function toSonnerData(opts, id) {
+  const { redact, description, duration, action, ...rest } = opts ?? {};
+  const data = { ...rest, id };
+  if (description !== void 0) data.description = redact ? privately(description) : description;
+  if (action) data.action = action;
+  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : void 0);
+  if (resolved !== void 0) data.duration = resolved;
+  return data;
+}
+function show(kind, message, opts) {
+  const id = opts?.id ?? nextId();
+  const title = opts?.redact ? privately(message) : message;
+  const data = toSonnerData(opts, id);
+  withSonner((s) => {
+    if (kind === "default") s.toast(title, data);
+    else s.toast[kind](title, data);
+  });
+  return id;
+}
+function undoable(message, { tone = "success", label, run, ...opts }, fallback) {
+  return show(tone, message, {
+    ...opts,
+    action: { label: label ?? fallback, onClick: () => run() }
+  });
+}
+const toast = Object.assign(
+  (message, opts) => show("default", message, opts),
+  {
+    message: (message, opts) => show("default", message, opts),
+    success: (message, opts) => show("success", message, opts),
+    error: (message, opts) => show("error", message, opts),
+    warning: (message, opts) => show("warning", message, opts),
+    info: (message, opts) => show("info", message, opts),
+    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */
+    loading: (message, opts) => show("loading", message, opts),
+    /**
+     * A loading toast that becomes the success or the error toast, in place, when
+     * `promise` settles. Returns the toast's id; the promise itself is the caller's.
+     */
+    promise(promise, options) {
+      const { loading: pending, success, error, finally: onFinally, ...opts } = options;
+      const id = show("loading", pending, opts);
+      const same = { ...opts, id };
+      Promise.resolve().then(() => typeof promise === "function" ? promise() : promise).then(
+        (value) => {
+          if (success === void 0) toast.dismiss(id);
+          else show("success", typeof success === "function" ? success(value) : success, same);
+        },
+        (reason) => {
+          if (error === void 0) toast.dismiss(id);
+          else show("error", typeof error === "function" ? error(reason) : error, same);
+        }
+      ).finally(() => onFinally?.());
+      return id;
+    },
+    /** Close one toast, or every toast when `id` is omitted. */
+    dismiss(id) {
+      withSonner((s) => s.toast.dismiss(id));
+    },
+    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */
+    custom(render, opts) {
+      const id = opts?.id ?? nextId();
+      const data = toSonnerData(opts, id);
+      withSonner((s) => s.toast.custom(render, data));
+      return id;
+    },
+    /**
+     * "Deleted — Undo": a toast whose action takes the step back, labelled by the
+     * provider's `toast.undo`. The journal stays the app's; this is only its toast.
+     * Pair with {@link toast.redo} so the step back can itself be taken back.
+     */
+    undo(message, { onUndo, ...opts }) {
+      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);
+    },
+    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */
+    redo(message, { onRedo, ...opts }) {
+      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);
+    }
+  }
+);
+const KIT_TOASTER_STYLE = {
+  zIndex: "var(--z-toast, 2147483647)",
+  fontFamily: "inherit",
+  "--normal-bg": "var(--bg-surface)",
+  "--normal-bg-hover": "var(--bg-hover)",
+  "--normal-border": "var(--border)",
+  "--normal-border-hover": "var(--border-strong)",
+  "--normal-text": "var(--text-primary)",
+  "--gray2": "var(--bg-hover)",
+  "--gray5": "var(--border-strong)",
+  "--gray11": "var(--text-muted)",
+  "--success-bg": "var(--toast-success-bg)",
+  "--success-border": "var(--toast-success-border)",
+  "--success-text": "var(--success)",
+  "--info-bg": "var(--toast-info-bg)",
+  "--info-border": "var(--toast-info-border)",
+  "--info-text": "var(--info)",
+  "--warning-bg": "var(--toast-warning-bg)",
+  "--warning-border": "var(--toast-warning-border)",
+  "--warning-text": "var(--warning)",
+  "--error-bg": "var(--toast-danger-bg)",
+  "--error-border": "var(--toast-danger-border)",
+  "--error-text": "var(--danger)"
+};
+const ALL_DIRECTIONS = ["top", "right", "bottom", "left"];
+function readDocumentTheme() {
+  return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+function subscribeDocumentTheme(onChange) {
+  if (typeof MutationObserver === "undefined") return () => {
+  };
+  const mo = new MutationObserver(onChange);
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+  return () => mo.disconnect();
+}
+const px = (v) => typeof v === "number" ? `${v}px` : v;
+function Toaster({
+  position,
+  navOffset,
+  theme,
+  labels: labelsProp,
+  closeButton = true,
+  richColors = true,
+  swipeDirections = ALL_DIRECTIONS,
+  offset,
+  mobileOffset,
+  className,
+  style,
+  ...rest
+}) {
+  const [mod, setMod] = useState(sonner);
+  useEffect(() => {
+    if (mod) return;
+    let live = true;
+    void loadSonner().then((m) => {
+      if (live && m) setMod(m);
+    });
+    return () => {
+      live = false;
+    };
+  }, [mod]);
+  const labels = useKitLabels("toast", DEFAULT_TOAST_LABELS, labelsProp);
+  useEffect(() => {
+    activeLabels = labels;
+    return () => {
+      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;
+    };
+  }, [labels]);
+  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => "light");
+  const phone = useMediaQuery(PHONE_QUERY, false);
+  const resolved = position ?? (phone ? "bottom-center" : "top-center");
+  const bottom = `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;
+  const top = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+  const computed = resolved.startsWith("bottom") ? { bottom } : { top };
+  if (!mod) return null;
+  const Sonner = mod.Toaster;
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      ...rest,
+      position: resolved,
+      theme: theme ?? documentTheme,
+      closeButton,
+      richColors,
+      swipeDirections,
+      offset: offset ?? computed,
+      mobileOffset: mobileOffset ?? offset ?? computed,
+      containerAriaLabel: labels.notifications,
+      toastOptions: { closeButtonAriaLabel: labels.close },
+      className: className ? `kit-toaster ${className}` : "kit-toaster",
+      style: { ...KIT_TOASTER_STYLE, ...style }
+    }
+  );
+}
+export {
+  DEFAULT_TOAST_LABELS,
+  TOAST_ACTION_DURATION,
+  Toaster,
+  toast
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\n\n/**\n * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.\n *\n * WHY A WRAPPER AND NOT \"USE SONNER\". Both apps mounted sonner by hand and carried the\n * same policy in it — bottom-centre on a phone so the toast covers neither the header\n * nor the bottom nav, a lift above that nav, swipe in every direction, a z-index above\n * every overlay, the theme fed in from the store — and one of them wrote that policy\n * twice. `toast` mirrors sonner's call shape, so migrating is an import swap:\n *\n *     import { toast } from \"@eifi1/ui-kit\";   // was: from \"sonner\"\n *\n * WHY SONNER IS LOADED LAZILY. It is an OPTIONAL peer, and this module is re-exported by\n * the barrel: a static import here would make every app that imports a Button install\n * it (see optional-peer-imports.test.tsx). So nothing here imports it statically. The\n * `<Toaster>` loads it when it mounts — long before anyone clicks anything — and a call\n * made before that is queued and replayed in order the moment it has loaded. Every call\n * returns its id synchronously anyway: the id is chosen here, not by sonner.\n */\n\ntype Sonner = typeof import(\"sonner\");\ntype SonnerData = NonNullable<Parameters<Sonner[\"toast\"]>[1]>;\n\n/* ── Loading sonner ──────────────────────────────────────────────────────── */\n\nlet sonner: Sonner | null = null;\nlet loading: Promise<Sonner | null> | null = null;\nconst queue: Array<(s: Sonner) => void> = [];\n\nfunction loadSonner(): Promise<Sonner | null> {\n  loading ??= import(\"sonner\").then(\n    (mod) => {\n      sonner = mod;\n      // Flushed in the SAME callback that sets `sonner`, so a call arriving between\n      // the two cannot overtake one that was queued before it.\n      for (const fn of queue.splice(0)) fn(mod);\n      return mod;\n    },\n    () => {\n      queue.length = 0;\n      console.warn(\n        \"@eifi1/ui-kit: `toast` needs the optional peer `sonner` — install it (npm i sonner) to show toasts.\",\n      );\n      return null;\n    },\n  );\n  return loading;\n}\n\nfunction withSonner(fn: (s: Sonner) => void): void {\n  if (sonner) {\n    fn(sonner);\n    return;\n  }\n  queue.push(fn);\n  void loadSonner();\n}\n\nlet counter = 0;\nconst nextId = () => `kit-toast-${++counter}`;\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** The words the toast layer says. `close` and `notifications` are read by a screen\n *  reader (the close button's name, the toast region's name); `undo` and `redo` are\n *  the default action labels of {@link toast.undo} / {@link toast.redo}. */\nexport interface ToastLabels {\n  close: string;\n  notifications: string;\n  undo: string;\n  redo: string;\n}\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n\n/** What the mounted `<Toaster>` resolved from `<UiKitProvider>` — so `toast.undo()`,\n *  which is called from mutation callbacks and not from a component, still says\n *  \"Rückgängig\" in a German app. */\nlet activeLabels: ToastLabels = DEFAULT_TOAST_LABELS;\n\n/* ── The API ─────────────────────────────────────────────────────────────── */\n\nexport type ToastId = string | number;\n\n/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls\n *  `event.preventDefault()`. */\nexport interface ToastAction {\n  label: ReactNode;\n  onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToastOptions {\n  /** Re-using an id REPLACES the toast on screen with that id (in place — it does not\n   *  stack a second one), which is how a toast is updated. Default: a fresh id. */\n  id?: ToastId;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** A second, quieter button (sonner's `cancel`). */\n  cancel?: ToastAction;\n  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or\n   *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to\n   *  read the message AND reach the button. */\n  duration?: number;\n  /** Called when the toast is closed by the user (close button, swipe, action). */\n  onDismiss?: (toast: { id: ToastId }) => void;\n  /** Called when the toast times out. */\n  onAutoClose?: (toast: { id: ToastId }) => void;\n  /** Wrap the message and the description in `data-private`, so an app's demo /\n   *  privacy mode blurs them like every other sensitive value. */\n  redact?: boolean;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /** `false`: no close button, no swipe. */\n  dismissible?: boolean;\n  /** Per toast, over the `<Toaster>`'s `closeButton`. */\n  closeButton?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The default duration of a toast that carries an action (8s rather than 4s). */\nexport const TOAST_ACTION_DURATION = 8000;\n\ntype Kind = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\n\nconst privately = (node: ReactNode) => <span data-private=\"\">{node}</span>;\n\nfunction toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {\n  const { redact, description, duration, action, ...rest } = opts ?? {};\n  const data: SonnerData = { ...rest, id };\n  if (description !== undefined) data.description = redact ? privately(description) : description;\n  if (action) data.action = action;\n  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);\n  if (resolved !== undefined) data.duration = resolved;\n  return data;\n}\n\nfunction show(kind: Kind, message: ReactNode, opts?: ToastOptions): ToastId {\n  const id = opts?.id ?? nextId();\n  const title = opts?.redact ? privately(message) : message;\n  const data = toSonnerData(opts, id);\n  withSonner((s) => {\n    if (kind === \"default\") s.toast(title, data);\n    else s.toast[kind](title, data);\n  });\n  return id;\n}\n\nexport interface ToastPromiseOptions<T> extends ToastOptions {\n  loading: ReactNode;\n  /** The success message, or a function of the resolved value. Omitted: the loading\n   *  toast is dismissed. */\n  success?: ReactNode | ((value: T) => ReactNode);\n  /** The error message, or a function of the rejection. Omitted: dismissed. */\n  error?: ReactNode | ((error: unknown) => ReactNode);\n  finally?: () => void;\n}\n\nexport interface ToastUndoOptions extends Omit<ToastOptions, \"action\"> {\n  /** Called when the button is pressed. */\n  onUndo: () => void;\n  /** Default: `toast.undo` from `<UiKitProvider>` (\"Undo\"). */\n  label?: ReactNode;\n  /** Default `success` — the step the toast reports worked. */\n  tone?: Exclude<Kind, \"loading\">;\n}\n\nexport interface ToastRedoOptions extends Omit<ToastUndoOptions, \"onUndo\"> {\n  onRedo: () => void;\n}\n\nfunction undoable(\n  message: ReactNode,\n  { tone = \"success\", label, run, ...opts }: Omit<ToastUndoOptions, \"onUndo\"> & { run: () => void },\n  fallback: ReactNode,\n): ToastId {\n  return show(tone, message, {\n    ...opts,\n    action: { label: label ?? fallback, onClick: () => run() },\n  });\n}\n\n/**\n * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the\n * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /\n * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's\n * id; pass it back as `id` to replace that toast in place.\n *\n * Needs a mounted {@link Toaster}. Messages may be any ReactNode.\n */\nexport const toast = Object.assign(\n  (message: ReactNode, opts?: ToastOptions): ToastId => show(\"default\", message, opts),\n  {\n    message: (message: ReactNode, opts?: ToastOptions) => show(\"default\", message, opts),\n    success: (message: ReactNode, opts?: ToastOptions) => show(\"success\", message, opts),\n    error: (message: ReactNode, opts?: ToastOptions) => show(\"error\", message, opts),\n    warning: (message: ReactNode, opts?: ToastOptions) => show(\"warning\", message, opts),\n    info: (message: ReactNode, opts?: ToastOptions) => show(\"info\", message, opts),\n    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */\n    loading: (message: ReactNode, opts?: ToastOptions) => show(\"loading\", message, opts),\n\n    /**\n     * A loading toast that becomes the success or the error toast, in place, when\n     * `promise` settles. Returns the toast's id; the promise itself is the caller's.\n     */\n    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId {\n      const { loading: pending, success, error, finally: onFinally, ...opts } = options;\n      const id = show(\"loading\", pending, opts);\n      const same = { ...opts, id };\n      Promise.resolve()\n        .then(() => (typeof promise === \"function\" ? promise() : promise))\n        .then(\n          (value) => {\n            if (success === undefined) toast.dismiss(id);\n            else show(\"success\", typeof success === \"function\" ? success(value) : success, same);\n          },\n          (reason: unknown) => {\n            if (error === undefined) toast.dismiss(id);\n            else show(\"error\", typeof error === \"function\" ? error(reason) : error, same);\n          },\n        )\n        .finally(() => onFinally?.());\n      return id;\n    },\n\n    /** Close one toast, or every toast when `id` is omitted. */\n    dismiss(id?: ToastId): void {\n      withSonner((s) => s.toast.dismiss(id));\n    },\n\n    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */\n    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, \"redact\">): ToastId {\n      const id = opts?.id ?? nextId();\n      const data = toSonnerData(opts, id);\n      withSonner((s) => s.toast.custom(render, data));\n      return id;\n    },\n\n    /**\n     * \"Deleted — Undo\": a toast whose action takes the step back, labelled by the\n     * provider's `toast.undo`. The journal stays the app's; this is only its toast.\n     * Pair with {@link toast.redo} so the step back can itself be taken back.\n     */\n    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId {\n      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);\n    },\n\n    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */\n    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId {\n      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);\n    },\n  },\n);\n\n/* ── The Toaster ─────────────────────────────────────────────────────────── */\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type ToastSwipeDirection = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** sonner's offset: one value for every edge, or per edge. Numbers are px. */\nexport type ToasterOffset =\n  | string\n  | number\n  | { top?: string | number; right?: string | number; bottom?: string | number; left?: string | number };\n\nexport interface ToasterProps {\n  /** Default: `bottom-center` on a phone (so the toast covers neither the header's\n   *  buttons nor the bottom nav's), `top-center` from `md` up. */\n  position?: ToastPosition;\n  /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe\n   *  area is added either way. Numbers are px. */\n  navOffset?: string | number;\n  /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts\n   *  on `<html>` — whichever store the app built, with nothing passed. */\n  theme?: \"light\" | \"dark\" | \"system\";\n  labels?: Partial<ToastLabels>;\n  /** Default 4s (8s for a toast with an action). */\n  duration?: number;\n  visibleToasts?: number;\n  expand?: boolean;\n  /** Default true. */\n  closeButton?: boolean;\n  /** Tone-coloured toasts (the AlertBanner tokens). Default true. */\n  richColors?: boolean;\n  /** Default: every direction. */\n  swipeDirections?: ToastSwipeDirection[];\n  /** Overrides the computed offset outright (above the nav on a phone, below a 48px\n   *  top bar on desktop). */\n  offset?: ToasterOffset;\n  /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s\n   *  phone value. */\n  mobileOffset?: ToasterOffset;\n  /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */\n  hotkey?: string[];\n  gap?: number;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The kit's palette, mapped onto sonner's variables. Inline on the toaster element,\n *  so it wins over sonner's injected sheet with no specificity contest. The tone\n *  backgrounds go through `--toast-*` aliases computed at `:root` in tokens.css:\n *  sonner redefines `--success-bg` on this same element, and a variable cannot read\n *  its own name — `--success-bg: var(--success-bg)` here would be a cycle. */\nconst KIT_TOASTER_STYLE = {\n  zIndex: \"var(--z-toast, 2147483647)\",\n  fontFamily: \"inherit\",\n  \"--normal-bg\": \"var(--bg-surface)\",\n  \"--normal-bg-hover\": \"var(--bg-hover)\",\n  \"--normal-border\": \"var(--border)\",\n  \"--normal-border-hover\": \"var(--border-strong)\",\n  \"--normal-text\": \"var(--text-primary)\",\n  \"--gray2\": \"var(--bg-hover)\",\n  \"--gray5\": \"var(--border-strong)\",\n  \"--gray11\": \"var(--text-muted)\",\n  \"--success-bg\": \"var(--toast-success-bg)\",\n  \"--success-border\": \"var(--toast-success-border)\",\n  \"--success-text\": \"var(--success)\",\n  \"--info-bg\": \"var(--toast-info-bg)\",\n  \"--info-border\": \"var(--toast-info-border)\",\n  \"--info-text\": \"var(--info)\",\n  \"--warning-bg\": \"var(--toast-warning-bg)\",\n  \"--warning-border\": \"var(--toast-warning-border)\",\n  \"--warning-text\": \"var(--warning)\",\n  \"--error-bg\": \"var(--toast-danger-bg)\",\n  \"--error-border\": \"var(--toast-danger-border)\",\n  \"--error-text\": \"var(--danger)\",\n} as CSSProperties;\n\nconst ALL_DIRECTIONS: ToastSwipeDirection[] = [\"top\", \"right\", \"bottom\", \"left\"];\n\n/** Light or dark, as the `.dark` class on `<html>` says right now. */\nfunction readDocumentTheme(): \"light\" | \"dark\" {\n  return typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction subscribeDocumentTheme(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\") return () => {};\n  const mo = new MutationObserver(onChange);\n  mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => mo.disconnect();\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * Where the toasts appear, with the kit's defaults — mount ONE, near the root and\n * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a\n * toast's content navigates.\n *\n * Accessible as sonner makes it: the toasts sit in a polite live region, so a message\n * is announced with its description and its action's label; every toast and every\n * button in it is focusable, the timer pauses while focus or the pointer is inside,\n * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast\n * with an action stays up 8s by default, so the button can be reached.\n */\nexport function Toaster({\n  position,\n  navOffset,\n  theme,\n  labels: labelsProp,\n  closeButton = true,\n  richColors = true,\n  swipeDirections = ALL_DIRECTIONS,\n  offset,\n  mobileOffset,\n  className,\n  style,\n  ...rest\n}: ToasterProps) {\n  const [mod, setMod] = useState<Sonner | null>(sonner);\n  useEffect(() => {\n    if (mod) return;\n    let live = true;\n    void loadSonner().then((m) => {\n      if (live && m) setMod(m);\n    });\n    return () => {\n      live = false;\n    };\n  }, [mod]);\n\n  const labels = useKitLabels(\"toast\", DEFAULT_TOAST_LABELS, labelsProp);\n  useEffect(() => {\n    activeLabels = labels;\n    return () => {\n      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;\n    };\n  }, [labels]);\n\n  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => \"light\" as const);\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const resolved: ToastPosition = position ?? (phone ? \"bottom-center\" : \"top-center\");\n\n  // Above the bottom nav and the home indicator: whichever is taller, since the nav\n  // already pads itself by the safe area (the same sum BulkActionBar floats on).\n  const bottom = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;\n  // Below a 48px TopBar with the same 1rem clearance.\n  const top = \"calc(env(safe-area-inset-top, 0px) + 4rem)\";\n  const computed = resolved.startsWith(\"bottom\") ? { bottom } : { top };\n\n  if (!mod) return null;\n  const Sonner = mod.Toaster;\n  return (\n    <Sonner\n      {...rest}\n      position={resolved}\n      theme={theme ?? documentTheme}\n      closeButton={closeButton}\n      richColors={richColors}\n      swipeDirections={swipeDirections}\n      offset={offset ?? computed}\n      mobileOffset={mobileOffset ?? offset ?? computed}\n      containerAriaLabel={labels.notifications}\n      toastOptions={{ closeButtonAriaLabel: labels.close }}\n      className={className ? `kit-toaster ${className}` : \"kit-toaster\"}\n      style={{ ...KIT_TOASTER_STYLE, ...style }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
 
 interface ToggleOption<T extends string> {
     value: T;
@@ -40,6 +40,34 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * live and others are not is a menu with holes in it, and no caller here wants one.
      */
     disabled?: boolean;
+    /**
+     * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor
+     * (rule-editor:204) writes as `optionClassName="px-2 py-1 text-xs"` beside a small
+     * caption. `md` (default) is the size every other group has.
+     */
+    size?: "sm" | "md";
+    /**
+     * Stand in a form row as a FIELD: with a label the group wears the field's chrome —
+     * border, surface, the top strip with a small static label in it, a labelled
+     * {@link Select}'s height — so beside an Input or a Select it reads as one of them
+     * rather than as a control with a caption over it. lenkbank builds exactly this by
+     * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes
+     * are why the chrome STRETCHES to its row as well as matching the select's padding:
+     * a native select's height is the browser's, so a toggle a few pixels short of it
+     * is levelled up by the row rather than by arithmetic.
+     *
+     * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With
+     * a label, `className` styles the field's wrapper — as on {@link Select} — and the
+     * group's own box is dropped: two nested borders read as a control in a control.
+     */
+    label?: ReactNode;
+    /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with
+     *  `label`. */
+    hint?: ReactNode;
+    /** The message under the field when it is wrong: paints the field's border with
+     *  `--danger`, marks the group `aria-invalid` and describes it with the message, as
+     *  {@link Select}'s `error` does. Only with `label`. */
+    error?: ReactNode;
 }
 /** The group as it has always been: one option is always the answer. */
 interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {

package/dist/components/toggle-group.js

@@ -1,7 +1,9 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
+import { FIELD_INVALID, FloatingField } from "./ui.js";
 function ToggleGroup(props) {
   const {
     value,
@@ -10,9 +12,17 @@ function ToggleGroup(props) {
     optionClassName,
     ariaLabel,
     disabled = false,
+    size = "md",
+    label,
+    hint,
+    error,
     "aria-label": ariaLabelAttr,
     ...restWithMode
   } = props;
+  const labelId = useId();
+  const errorId = useId();
+  const field = label !== void 0 && label !== null && label !== false && label !== "";
+  const hasError = field && error !== void 0 && error !== null && error !== false && error !== "";
   const { allowEmpty: _allowEmpty, onChange: _onChange, ...rest } = restWithMode;
   const choose = (next) => {
     if (props.allowEmpty) props.onChange(next === value ? null : next);
@@ -36,12 +46,15 @@ function ToggleGroup(props) {
     buttons?.[next]?.focus();
     choose(options[next].value);
   };
-  return /* @__PURE__ */ jsx(
+  const group = /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       role: clearable ? "group" : "radiogroup",
       "aria-label": ariaLabelAttr ?? ariaLabel,
+      "aria-labelledby": field && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
+      "aria-invalid": hasError || rest["aria-invalid"] || void 0,
+      "aria-describedby": hasError ? rest["aria-describedby"] ? `${rest["aria-describedby"]} ${errorId}` : errorId : rest["aria-describedby"],
       "aria-disabled": disabled || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
@@ -61,7 +74,10 @@ function ToggleGroup(props) {
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
         disabled && "opacity-60",
-        className
+        // Inside the field's chrome the group is only a row of segments: no border, no
+        // surface, no padding of its own, and the field (not the group) is what dims.
+        field && "border-0 bg-transparent p-0 shadow-none opacity-100",
+        !field && className
       ),
       children: options.map((opt, index) => {
         const active = opt.value === value;
@@ -100,6 +116,11 @@ function ToggleGroup(props) {
               // inside the segment it belongs to; focus-visible keeps it for the
               // keyboard, which is the only input that needs it.
               "min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+              size === "sm" && "px-2 py-1 text-xs",
+              // In a field: no vertical padding and a 20px line — a `text-sm` line, the
+              // same line a labelled Select holds under its label strip — so the field's
+              // own `pt-4 pb-1` decides the height, as it does for the select.
+              field && "py-0 leading-5",
               active ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
               // No hover fill on a group that cannot be changed — a segment that
               // lights up under the pointer is an offer, and there is none here.
@@ -114,6 +135,34 @@ function ToggleGroup(props) {
       })
     }
   );
+  if (!field) return group;
+  return (
+    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what
+    // levels it with a select beside it whatever the browser makes of the select.
+    /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+      /* @__PURE__ */ jsx(
+        FloatingField,
+        {
+          className: "flex flex-1 flex-col",
+          label: /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+          staticLabel: true,
+          hint,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm",
+                disabled && "bg-[var(--bg-surface-2)] opacity-60",
+                hasError && FIELD_INVALID
+              ),
+              children: group
+            }
+          )
+        }
+      ),
+      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error })
+    ] })
+  );
 }
 export {
   ToggleGroup

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n}\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  value: T;\n  onChange: (value: T) => void;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  value: T | null;\n  onChange: (value: T | null) => void;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    ariaLabel,\n    disabled = false,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, ...rest } = restWithMode;\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  const clearable = props.allowEmpty === true;\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The clearable mode is a\n  // row of toggle buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  return (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={clearable ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={clearable ? undefined : \"radio\"}\n            aria-checked={clearable ? undefined : active}\n            aria-pressed={clearable ? active : undefined}\n            disabled={disabled}\n            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={clearable ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA8KU;AA7KV,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAuFxB,SAAS,YAA8B,OAA0C;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAGJ,QAAM,EAAE,YAAY,aAAa,UAAU,WAAW,GAAG,KAAK,IAAI;AAClE,QAAM,SAAS,CAAC,SAAY;AAC1B,QAAI,MAAM,WAAY,OAAM,SAAS,SAAS,QAAQ,OAAO,IAAI;AAAA,QAC5D,OAAM,SAAS,IAAI;AAAA,EAC1B;AACA,QAAM,YAAY,MAAM,eAAe;AAKvC,QAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,QAAQ,QAAQ,CAAC,GAAG;AAC7E,QAAM,aAAa,CAAC,GAAqC,UAAkB;AACzE,UAAM,OAAO,QAAQ,SAAS;AAC9B,QAAI,OAAsB;AAC1B,UAAM,OAAO,eAAe,EAAE,KAAK,EAAE,aAAa;AAClD,QAAI,SAAS,EAAG,QAAO,QAAQ;AAAA,aACtB,EAAE,QAAQ,YAAa,QAAO,QAAQ;AAAA,aACtC,EAAE,QAAQ,UAAW,QAAO,QAAQ;AAAA,aACpC,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO;AACjC,QAAI,SAAS,KAAM;AACnB,MAAE,eAAe;AACjB,WAAO,OAAO,IAAI,OAAO,OAAO,OAAO,IAAI;AAC3C,UAAM,UAAU,EAAE,cAAc,eAAe,iBAAoC,iBAAiB;AACpG,cAAU,IAAI,GAAG,MAAM;AACvB,WAAO,QAAQ,IAAI,EAAE,KAAK;AAAA,EAC5B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAWE,GAAG;AAAA,MACJ,MAAM,YAAY,UAAU;AAAA,MAG5B,cAAY,iBAAiB;AAAA,MAI7B,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,KAAK,UAAU;AAC3B,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAM,YAAY,SAAY;AAAA,YAC9B,gBAAc,YAAY,SAAY;AAAA,YACtC,gBAAc,YAAY,SAAS;AAAA,YACnC;AAAA,YACA,UAAU,YAAY,SAAY,IAAI,UAAU,UAAU,IAAI;AAAA,YAC9D,WAAW,YAAY,SAAY,CAAC,MAAM,WAAW,GAAG,KAAK;AAAA,YAC7D,SAAS,MAAM,OAAO,IAAI,KAAK;AAAA,YAC/B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SACI,sDACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UA3CA,IAAI;AAAA,QA4CX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField } from \"./ui\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n}\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  value: T;\n  onChange: (value: T) => void;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  value: T | null;\n  onChange: (value: T | null) => void;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const field = label !== undefined && label !== null && label !== false && label !== \"\";\n  const hasError = field && error !== undefined && error !== null && error !== false && error !== \"\";\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, ...rest } = restWithMode;\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  const clearable = props.allowEmpty === true;\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The clearable mode is a\n  // row of toggle buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={clearable ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={field && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        hasError ? (rest[\"aria-describedby\"] ? `${rest[\"aria-describedby\"]} ${errorId}` : errorId) : rest[\"aria-describedby\"]\n      }\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !field && className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={clearable ? undefined : \"radio\"}\n            aria-checked={clearable ? undefined : active}\n            aria-pressed={clearable ? active : undefined}\n            disabled={disabled}\n            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={clearable ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              size === \"sm\" && \"px-2 py-1 text-xs\",\n              // In a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n  if (!field) return group;\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {hasError && (\n        <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/tooltip.d.ts

@@ -22,6 +22,13 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
     label: ReactNode;
     side?: TooltipSide;
     className?: string;
+    /**
+     * Where the bubble lives. Left out (the default since 0.10.0), the tooltip decides for
+     * itself: the bubble stays next to the trigger unless an ancestor clips or scrolls
+     * (`overflow` other than `visible`), in which case it is portalled — see "Inside a
+     * scroll container" below. `true` always portals, `false` never does; both are exactly
+     * what they were before the default existed.
+     */
     portal?: boolean;
     /** Tag the bubble `data-private`, for a label that repeats the user's own data. */
     redact?: boolean;
@@ -30,11 +37,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
 /**
  * Hover/focus label for a control.
  *
- * Two implementations, and the choice matters more than it looks. The default is
- * CSS-only: the bubble is always mounted next to the trigger and fades in on
- * `:hover`, which costs no state and works in a plain render test. The `portal`
- * variant mounts the bubble in `document.body` only while hovered, positioned by
- * measurement.
+ * Two placements, and the choice matters more than it looks. In place, the bubble is
+ * always mounted next to the trigger and fades in on `:hover`, which costs no state and
+ * works in a plain render test. Portalled, the bubble is mounted in `document.body`
+ * only while it is up, positioned by measurement.
  *
  * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs
  * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is
@@ -66,18 +72,35 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
  * point somewhere else — which is precisely what you cannot do when what you need to
  * read is underneath it. The listener is the document's rather than the wrapper's
  * because the pointer opens this with the keyboard focus somewhere else entirely, and
- * it is subscribed only while a bubble is actually up: the CSS variant is always
+ * it is subscribed only while a bubble is actually up: the in-place bubble is always
  * mounted, and a table of forty tooltips must not mean forty keydown listeners.
  *
- * ⚠️ **Inside a scroll container, use `portal`.** An always-mounted bubble is
- * absolutely positioned, but an absolutely positioned descendant still counts
- * towards its scroll-container ancestor's scrollable overflow — so an invisible
- * bubble on a control near the right edge makes the container scroll sideways
- * with nothing to reveal. That is what Keksdose feedback dev#488 reported on the
- * admin roster: 66px of horizontal scroll on a table that fit, 44px of it owed to
- * tooltips nobody could see. The portalled bubble is `position: fixed` and absent
- * until hovered, so it adds no width — and, being outside the container, it also
- * cannot be clipped by it.
+ * ⚠️ **Inside a scroll container, the bubble has to be portalled — and by default it
+ * now is.** An always-mounted bubble is absolutely positioned, but an absolutely
+ * positioned descendant still counts towards its scroll-container ancestor's
+ * scrollable overflow — so an invisible bubble on a control near the right edge makes
+ * the container scroll sideways with nothing to reveal. That is what Keksdose feedback
+ * dev#488 reported on the admin roster: 66px of horizontal scroll on a table that fit,
+ * 44px of it owed to tooltips nobody could see. And a visible one is clipped by the
+ * container's edge. The portalled bubble is `position: fixed` and absent until hovered,
+ * so it adds no width and cannot be clipped.
+ *
+ * Until 0.10.0 the cure was `portal` at the call site, and kastlan asked for it to stop
+ * being one: every tooltip in a table, a drawer or a scrolling card had to remember it,
+ * and the ones that forgot were only found by someone scrolling sideways. So with
+ * `portal` left out, the tooltip looks for a clipping ancestor itself — any element
+ * between it and `<body>` whose computed `overflow-x` / `overflow-y` is not `visible`.
+ * It looks at MOUNT, not only on open: dev#488's phantom scroll is caused by a bubble
+ * nobody opened, so a check that waited for the hover would find the damage already
+ * done. It looks again on every open, for a container that started scrolling after
+ * the tooltip mounted (a table that grew). Only the bubble changes place; the trigger
+ * and the caller's child stay mounted, so a switch never costs a focused button its
+ * focus. Outside any such container the in-place bubble is kept, which is still the
+ * cheaper one and the one a plain render test can find without a hover.
+ *
+ * Why not simply portal everything? Because the in-place bubble is the one existing
+ * app tests rely on (it is in the DOM without a hover), and because it follows its
+ * trigger through a scroll or an animation for free — the portalled one re-measures.
  */
 declare function Tooltip({ label, side, className, portal, redact, children, ...rest }: TooltipProps): react.JSX.Element;
 interface TooltipSize {