@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/components/authed-image.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { AuthedFetcher, UseAuthedSrcResult } from '../hooks/use-authed-src.js';
+
+/** The two states an image can be in besides "there". */
+interface AuthedImageLabels {
+    /** Read out while the bytes are on their way (the skeleton itself is silent). */
+    loading: string;
+    /** Shown, small, in place of an image that could not be fetched or decoded. */
+    loadError: string;
+    /** The failed tile's accessible name, given the image's alt. */
+    failedImage: (alt: string) => string;
+}
+declare const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels;
+interface AuthedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
+    /** The image's URL — an API path when a {@link fetcher} is given. */
+    src: string | null | undefined;
+    /** Required: an image without a text alternative is a gap a reader falls into.
+     *  `""` for a purely decorative one. */
+    alt: string;
+    /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded
+     *  by the browser as usual and this is an `<img>` with loading and error states. */
+    fetcher?: AuthedFetcher | null;
+    /** Classes for the box around the image (the placeholders fill it). */
+    wrapperClassName?: string;
+    /**
+     * Wrap the image in a link to itself, opening in a new tab — kastlan's
+     * `AuthedImage` did, because an object URL is the only address of a protected image
+     * a browser tab can open. The link's href is the `blob:` URL, never the API path.
+     */
+    link?: boolean;
+    /** Replaces the default skeleton while loading. */
+    loadingFallback?: ReactNode;
+    /** Replaces the default "couldn't load" tile. */
+    errorFallback?: ReactNode;
+    labels?: Partial<AuthedImageLabels>;
+}
+/**
+ * An image with a loading state, an error state and — given a `fetcher` — the app's
+ * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which
+ * rendered NOTHING until the blob arrived and nothing at all if it never did: a card
+ * with a photo slot either had the photo or was silently shorter.
+ *
+ * Two failures are one state here: the fetch failing (401, 404, offline) and the
+ * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served
+ * where an image was expected).
+ */
+declare function AuthedImage({ src, alt, fetcher, wrapperClassName, className, link, loadingFallback, errorFallback, labels: labelsProp, onLoad, onError, ...rest }: AuthedImageProps): react.JSX.Element;
+/**
+ * The rendering half of {@link AuthedImage}, for a caller that already holds a
+ * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link
+ * as well). Internal to the package.
+ */
+declare function ImageStates({ fetched, alt, labels, className, wrapperClassName, link, loadingFallback, errorFallback, imgProps, onLoad, onError, }: {
+    fetched: UseAuthedSrcResult;
+    alt: string;
+    labels: AuthedImageLabels;
+    className?: string;
+    wrapperClassName?: string;
+    link?: boolean;
+    loadingFallback?: ReactNode;
+    errorFallback?: ReactNode;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children" | "onLoad" | "onError">;
+    onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
+    onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
+}): react.JSX.Element;
+
+export { AuthedImage, type AuthedImageLabels, type AuthedImageProps, DEFAULT_AUTHED_IMAGE_LABELS, ImageStates };

package/dist/components/authed-image.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageOff } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { SKELETON_CLASS } from "./skeleton.js";
+import { useAuthedSrc } from "../hooks/use-authed-src.js";
+const DEFAULT_AUTHED_IMAGE_LABELS = {
+  loading: "Loading image\u2026",
+  loadError: "Image couldn\u2019t be loaded",
+  failedImage: (alt) => `${alt}: image couldn\u2019t be loaded`
+};
+function AuthedImage({
+  src,
+  alt,
+  fetcher,
+  wrapperClassName,
+  className,
+  link,
+  loadingFallback,
+  errorFallback,
+  labels: labelsProp,
+  onLoad,
+  onError,
+  ...rest
+}) {
+  const labels = useKitLabels("authedImage", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);
+  const fetched = useAuthedSrc(src, { fetcher });
+  return /* @__PURE__ */ jsx(
+    ImageStates,
+    {
+      fetched,
+      alt,
+      labels,
+      className,
+      wrapperClassName,
+      link,
+      loadingFallback,
+      errorFallback,
+      imgProps: rest,
+      onLoad,
+      onError
+    }
+  );
+}
+function ImageStates({
+  fetched,
+  alt,
+  labels,
+  className,
+  wrapperClassName,
+  link,
+  loadingFallback,
+  errorFallback,
+  imgProps,
+  onLoad,
+  onError
+}) {
+  const [decode, setDecode] = useState(null);
+  const decoded = decode && decode.src === fetched.src ? decode.state : "pending";
+  const failed = fetched.status === "error" || decoded === "error";
+  const waiting = !failed && (fetched.status === "loading" || fetched.src !== null && decoded === "pending");
+  const img = fetched.src !== null && !failed && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
+  /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...imgProps,
+      src: fetched.src,
+      alt,
+      onLoad: (e) => {
+        setDecode({ src: fetched.src, state: "loaded" });
+        onLoad?.(e);
+      },
+      onError: (e) => {
+        setDecode({ src: fetched.src, state: "error" });
+        onError?.(e);
+      },
+      className: cn(
+        // Kept in the tree while it decodes (the browser needs it there to load at
+        // all), but invisible, so the skeleton is what shows.
+        decoded === "pending" && "opacity-0",
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-image-state": failed ? "error" : waiting ? "loading" : fetched.status === "idle" ? "idle" : "ready",
+      className: cn("relative block overflow-hidden", wrapperClassName),
+      "aria-busy": waiting || void 0,
+      children: [
+        link && img && fetched.src ? /* @__PURE__ */ jsx("a", { href: fetched.src, target: "_blank", rel: "noreferrer noopener", className: "block h-full w-full", children: img }) : img,
+        waiting && (loadingFallback ?? /* @__PURE__ */ jsx("span", { className: cn(SKELETON_CLASS, "absolute inset-0 block rounded-none"), children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.loading }) })),
+        failed && (errorFallback ?? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "img",
+            "aria-label": alt ? labels.failedImage(alt) : labels.loadError,
+            className: "flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-[var(--bg-hover)] p-2 text-center text-xs text-[var(--text-muted)]",
+            children: [
+              /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": true, className: "size-5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "line-clamp-2", children: labels.loadError })
+            ]
+          }
+        ))
+      ]
+    }
+  );
+}
+export {
+  AuthedImage,
+  DEFAULT_AUTHED_IMAGE_LABELS,
+  ImageStates
+};
+//# sourceMappingURL=authed-image.js.map

package/dist/components/authed-image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/authed-image.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ImgHTMLAttributes, ReactNode } from \"react\";\nimport { ImageOff } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { useAuthedSrc } from \"../hooks/use-authed-src\";\nimport type { AuthedFetcher, UseAuthedSrcResult } from \"../hooks/use-authed-src\";\n\n/** The two states an image can be in besides \"there\". */\nexport interface AuthedImageLabels {\n  /** Read out while the bytes are on their way (the skeleton itself is silent). */\n  loading: string;\n  /** Shown, small, in place of an image that could not be fetched or decoded. */\n  loadError: string;\n  /** The failed tile's accessible name, given the image's alt. */\n  failedImage: (alt: string) => string;\n}\n\nexport const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels = {\n  loading: \"Loading image…\",\n  loadError: \"Image couldn’t be loaded\",\n  failedImage: (alt) => `${alt}: image couldn’t be loaded`,\n};\n\nexport interface AuthedImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\" | \"children\"> {\n  /** The image's URL — an API path when a {@link fetcher} is given. */\n  src: string | null | undefined;\n  /** Required: an image without a text alternative is a gap a reader falls into.\n   *  `\"\"` for a purely decorative one. */\n  alt: string;\n  /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded\n   *  by the browser as usual and this is an `<img>` with loading and error states. */\n  fetcher?: AuthedFetcher | null;\n  /** Classes for the box around the image (the placeholders fill it). */\n  wrapperClassName?: string;\n  /**\n   * Wrap the image in a link to itself, opening in a new tab — kastlan's\n   * `AuthedImage` did, because an object URL is the only address of a protected image\n   * a browser tab can open. The link's href is the `blob:` URL, never the API path.\n   */\n  link?: boolean;\n  /** Replaces the default skeleton while loading. */\n  loadingFallback?: ReactNode;\n  /** Replaces the default \"couldn't load\" tile. */\n  errorFallback?: ReactNode;\n  labels?: Partial<AuthedImageLabels>;\n}\n\n/**\n * An image with a loading state, an error state and — given a `fetcher` — the app's\n * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which\n * rendered NOTHING until the blob arrived and nothing at all if it never did: a card\n * with a photo slot either had the photo or was silently shorter.\n *\n * Two failures are one state here: the fetch failing (401, 404, offline) and the\n * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served\n * where an image was expected).\n */\nexport function AuthedImage({\n  src,\n  alt,\n  fetcher,\n  wrapperClassName,\n  className,\n  link,\n  loadingFallback,\n  errorFallback,\n  labels: labelsProp,\n  onLoad,\n  onError,\n  ...rest\n}: AuthedImageProps) {\n  const labels = useKitLabels(\"authedImage\", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);\n  const fetched = useAuthedSrc(src, { fetcher });\n  return (\n    <ImageStates\n      fetched={fetched}\n      alt={alt}\n      labels={labels}\n      className={className}\n      wrapperClassName={wrapperClassName}\n      link={link}\n      loadingFallback={loadingFallback}\n      errorFallback={errorFallback}\n      imgProps={rest}\n      onLoad={onLoad}\n      onError={onError}\n    />\n  );\n}\n\n/**\n * The rendering half of {@link AuthedImage}, for a caller that already holds a\n * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link\n * as well). Internal to the package.\n */\nexport function ImageStates({\n  fetched,\n  alt,\n  labels,\n  className,\n  wrapperClassName,\n  link,\n  loadingFallback,\n  errorFallback,\n  imgProps,\n  onLoad,\n  onError,\n}: {\n  fetched: UseAuthedSrcResult;\n  alt: string;\n  labels: AuthedImageLabels;\n  className?: string;\n  wrapperClassName?: string;\n  link?: boolean;\n  loadingFallback?: ReactNode;\n  errorFallback?: ReactNode;\n  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\" | \"children\" | \"onLoad\" | \"onError\">;\n  onLoad?: ImgHTMLAttributes<HTMLImageElement>[\"onLoad\"];\n  onError?: ImgHTMLAttributes<HTMLImageElement>[\"onError\"];\n}) {\n  // Decode state, per src: keyed so a new picture starts over rather than inheriting\n  // the previous one's \"loaded\" or \"broken\".\n  const [decode, setDecode] = useState<{ src: string | null; state: \"loaded\" | \"error\" } | null>(null);\n  const decoded = decode && decode.src === fetched.src ? decode.state : \"pending\";\n  const failed = fetched.status === \"error\" || decoded === \"error\";\n  const waiting = !failed && (fetched.status === \"loading\" || (fetched.src !== null && decoded === \"pending\"));\n\n  const img = fetched.src !== null && !failed && (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions\n    <img\n      {...imgProps}\n      src={fetched.src}\n      alt={alt}\n      onLoad={(e) => {\n        setDecode({ src: fetched.src, state: \"loaded\" });\n        onLoad?.(e);\n      }}\n      onError={(e) => {\n        setDecode({ src: fetched.src, state: \"error\" });\n        onError?.(e);\n      }}\n      className={cn(\n        // Kept in the tree while it decodes (the browser needs it there to load at\n        // all), but invisible, so the skeleton is what shows.\n        decoded === \"pending\" && \"opacity-0\",\n        className,\n      )}\n    />\n  );\n\n  return (\n    <span\n      data-image-state={failed ? \"error\" : waiting ? \"loading\" : fetched.status === \"idle\" ? \"idle\" : \"ready\"}\n      className={cn(\"relative block overflow-hidden\", wrapperClassName)}\n      aria-busy={waiting || undefined}\n    >\n      {link && img && fetched.src ? (\n        <a href={fetched.src} target=\"_blank\" rel=\"noreferrer noopener\" className=\"block h-full w-full\">\n          {img}\n        </a>\n      ) : (\n        img\n      )}\n      {waiting &&\n        (loadingFallback ?? (\n          <span className={cn(SKELETON_CLASS, \"absolute inset-0 block rounded-none\")}>\n            <span className=\"sr-only\">{labels.loading}</span>\n          </span>\n        ))}\n      {failed &&\n        (errorFallback ?? (\n          <span\n            // `role=\"img\"` with the alt as its name: the picture that failed still\n            // occupies its place in the reading order, and \"couldn't be loaded\" is\n            // the one fact a reader needs about it.\n            role=\"img\"\n            aria-label={alt ? labels.failedImage(alt) : labels.loadError}\n            className=\"flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-[var(--bg-hover)] p-2 text-center text-xs text-[var(--text-muted)]\"\n          >\n            <ImageOff aria-hidden className=\"size-5 shrink-0\" />\n            <span aria-hidden className=\"line-clamp-2\">{labels.loadError}</span>\n          </span>\n        ))}\n    </span>\n  );\n}\n"],"mappings":";AA8EI,cAiGM,YAjGN;AA9EJ,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAatB,MAAM,8BAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa,CAAC,QAAQ,GAAG,GAAG;AAC9B;AAqCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,aAAa,KAAK,EAAE,QAAQ,CAAC;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AAGD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmE,IAAI;AACnG,QAAM,UAAU,UAAU,OAAO,QAAQ,QAAQ,MAAM,OAAO,QAAQ;AACtE,QAAM,SAAS,QAAQ,WAAW,WAAW,YAAY;AACzD,QAAM,UAAU,CAAC,WAAW,QAAQ,WAAW,aAAc,QAAQ,QAAQ,QAAQ,YAAY;AAEjG,QAAM,MAAM,QAAQ,QAAQ,QAAQ,CAAC;AAAA,EAEnC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK,QAAQ;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,kBAAU,EAAE,KAAK,QAAQ,KAAK,OAAO,SAAS,CAAC;AAC/C,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,SAAS,CAAC,MAAM;AACd,kBAAU,EAAE,KAAK,QAAQ,KAAK,OAAO,QAAQ,CAAC;AAC9C,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,QAGT,YAAY,aAAa;AAAA,QACzB;AAAA,MACF;AAAA;AAAA,EACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,SAAS,UAAU,UAAU,YAAY,QAAQ,WAAW,SAAS,SAAS;AAAA,MAChG,WAAW,GAAG,kCAAkC,gBAAgB;AAAA,MAChE,aAAW,WAAW;AAAA,MAErB;AAAA,gBAAQ,OAAO,QAAQ,MACtB,oBAAC,OAAE,MAAM,QAAQ,KAAK,QAAO,UAAS,KAAI,uBAAsB,WAAU,uBACvE,eACH,IAEA;AAAA,QAED,YACE,mBACC,oBAAC,UAAK,WAAW,GAAG,gBAAgB,qCAAqC,GACvE,8BAAC,UAAK,WAAU,WAAW,iBAAO,SAAQ,GAC5C;AAAA,QAEH,WACE,iBACC;AAAA,UAAC;AAAA;AAAA,YAIC,MAAK;AAAA,YACL,cAAY,MAAM,OAAO,YAAY,GAAG,IAAI,OAAO;AAAA,YACnD,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS,eAAW,MAAC,WAAU,mBAAkB;AAAA,cAClD,oBAAC,UAAK,eAAW,MAAC,WAAU,gBAAgB,iBAAO,WAAU;AAAA;AAAA;AAAA,QAC/D;AAAA;AAAA;AAAA,EAEN;AAEJ;","names":[]}

package/dist/components/breadcrumbs.d.ts

@@ -25,7 +25,8 @@ interface BreadcrumbLinkProps {
 }
 interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
     items: BreadcrumbItem[];
-    /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
+    /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app
+     *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
     renderLink?: (props: BreadcrumbLinkProps) => ReactElement;
     /**
      * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing

package/dist/components/breadcrumbs.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { useKitLabels } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
 const DEFAULT_BREADCRUMBS_LABELS = {
   label: "Breadcrumb",
   showAll: "Show full path"
@@ -20,6 +21,7 @@ function Breadcrumbs({
   ...rest
 }) {
   const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
+  const kitLink = useKitLink();
   const [expanded, setExpanded] = useState(false);
   const revealedRef = useRef(null);
   const focusRevealed = useRef(false);
@@ -44,7 +46,8 @@ function Breadcrumbs({
       content = /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "block max-w-[16rem] truncate font-medium text-[var(--text-primary)]", children: item.label });
     } else if (item.href !== void 0) {
       const props = { href: item.href, className: linkClass, children: item.label };
-      content = renderLink ? renderLink(props) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, children: props.children });
+      const kit = pickLinkRenderer(void 0, kitLink, item.href);
+      content = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, children: props.children });
     } else {
       content = /* @__PURE__ */ jsx("span", { className: "block max-w-[14rem] truncate", children: item.label });
     }

package/dist/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            content = renderLink ? (\n              renderLink(props)\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";AAsGoB,cAkCJ,YAlCI;AAtGpB,SAAS,UAAU,WAAW,QAAQ,gBAAgB;AAEtD,SAAS,cAAc,sBAAsB;AAC7C,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAStB,MAAM,6BAAgD;AAAA,EAC3D,OAAO;AAAA,EACP,SAAS;AACX;AAoDO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,eAAe,4BAA4B,UAAU;AACjF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,cAAc,OAAsB,IAAI;AAC9C,QAAM,gBAAgB,OAAO,KAAK;AAClC,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,cAAc,QAAS;AACzC,kBAAc,UAAU;AACxB,UAAM,KAAK,YAAY;AACvB,KAAC,IAAI,cAA2B,SAAS,KAAK,KAAK,MAAM;AAAA,EAC3D,GAAG,CAAC,QAAQ,CAAC;AACb,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,MAAM,KAAK,IAAI,GAAG,OAAO;AAG/B,QAAM,YAAY,KAAK,IAAI,GAAG,MAAM,SAAS,GAAG;AAChD,QAAM,cAAc,YAAY,CAAC,YAAY,YAAY,KAAK;AAC9D,QAAM,WAAW,CAAC,MAAc,eAAe,KAAK,KAAK,IAAI;AAE7D,QAAM,MACJ,oBAAC,UAAK,eAAW,MAAC,WAAU,6DACzB,uBAAa,oBAAC,gBAAa,WAAU,6BAA4B,GACpE;AAEF,QAAM,YACJ;AAEF,SACE,oBAAC,SAAK,GAAG,MAAM,cAAY,aAAa,OAAO,OAAO,WAAW,GAAG,mBAAmB,SAAS,GAC9F,8BAAC,QAAG,WAAU,oGACX,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,UAAM,MAAM,KAAK,QAAQ,OAAO,KAAK,UAAU,WAAW,GAAG,CAAC,IAAI,KAAK,KAAK,KAAK,OAAO,CAAC;AACzF,QAAI;AACJ,QAAI,MAAM;AACR,gBACE,oBAAC,UAAK,gBAAa,QAAO,WAAU,uEACjC,eAAK,OACR;AAAA,IAEJ,WAAW,KAAK,SAAS,QAAW;AAClC,YAAM,QAA6B,EAAE,MAAM,KAAK,MAAM,WAAW,WAAW,UAAU,KAAK,MAAM;AACjG,gBAAU,aACR,WAAW,KAAK,IAEhB,oBAAC,OAAE,MAAM,MAAM,MAAM,WAAW,MAAM,WACnC,gBAAM,UACT;AAAA,IAEJ,OAAO;AACL,gBAAU,oBAAC,UAAK,WAAU,gCAAgC,eAAK,OAAM;AAAA,IACvE;AACA,WACE,qBAAC,YACE;AAAA,qBAAe,MAAM,KACpB,qBAAC,QAAG,WAAU,uCACX;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,4BAAc,UAAU;AACxB,0BAAY,IAAI;AAAA,YAClB;AAAA,YACA,cAAY,OAAO;AAAA,YACnB,iBAAe;AAAA,YACf,WAAU;AAAA,YAEV,8BAAC,kBAAe,WAAU,UAAS,eAAW,MAAC;AAAA;AAAA,QACjD;AAAA,SACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM,IAAI,cAAc;AAAA,UAE7B,UAAU,MAAM,KAAK,YAAY,KAAK,SAAS,SAAY,KAAK;AAAA,UAChE,WAAW,GAAG,kDAAkD,SAAS,CAAC,KAAK,gBAAgB;AAAA,UAE9F;AAAA,gBAAI,KAAK;AAAA,YACT;AAAA;AAAA;AAAA,MACH;AAAA,SA1Ba,GA2Bf;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const kitLink = useKitLink();\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);\n            content = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/bulk-action-bar.d.ts

@@ -56,8 +56,16 @@ interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role
     open?: boolean;
     /** Clear the selection / leave selection mode. */
     onClear: () => void;
-    /** The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
-     *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */
+    /**
+     * The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
+     * in the caller's order. They are the toolbar's arrow-key stops, after the clear.
+     *
+     * LINKS rove too (keksdose F8): a `<Button href>` — "View report", which navigates
+     * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place
+     * among the buttons, not a second Tab stop beside the toolbar's one. A disabled
+     * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any
+     * other focusable of your own joins with `data-toolbar-item`.
+     */
     children?: ReactNode;
     /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per
      *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */

package/dist/components/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { OVERLAY_EXIT_MS, prefersReducedMotion } from \"../hooks/use-close-transition\";\nimport { Button, IconButton } from \"./ui\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\nexport const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {\n  selected: (count) => `${count} selected`,\n  clear: \"Clear selection\",\n  cleared: \"Selection cleared\",\n};\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's\n * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\nconst BREAKPOINTS = [\n  [\"xl\", \"(min-width: 1280px)\"],\n  [\"lg\", \"(min-width: 1024px)\"],\n  [\"md\", \"(min-width: 768px)\"],\n  [\"sm\", \"(min-width: 640px)\"],\n] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useMediaQuery(BREAKPOINTS[0][1], false),\n    lg: useMediaQuery(BREAKPOINTS[1][1], false),\n    md: useMediaQuery(BREAKPOINTS[2][1], false),\n    sm: useMediaQuery(BREAKPOINTS[3][1], false),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const [key] of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /** The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: Partial<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!prefersReducedMotion());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear}>\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  const rowClass = cn(\"flex items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      <span className=\"min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-[var(--border)] px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/bulk-action-bar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { OVERLAY_EXIT_MS, prefersReducedMotion } from \"../hooks/use-close-transition\";\nimport { Button, IconButton } from \"./ui\";\n\nexport interface BulkActionBarLabels {\n  /** The count, shown in the bar, spoken by its live region and used as the toolbar's\n   *  name: \"3 selected\". */\n  selected: (count: number) => string;\n  /** The clear/cancel action's name — the X of the floating bar, the text button of the\n   *  others. */\n  clear: string;\n  /** Spoken when the selection empties and the bar goes. */\n  cleared: string;\n}\n\nexport const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {\n  selected: (count) => `${count} selected`,\n  clear: \"Clear selection\",\n  cleared: \"Selection cleared\",\n};\n\n/**\n * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the\n * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the\n * desktop's: pinned to the top of its scroll container, over the rows it acts on.\n * `inline` — in the flow, where the caller places it.\n */\nexport type BulkActionBarVariant = \"floating\" | \"sticky\" | \"inline\";\n\n/**\n * A variant per breakpoint, mobile first — `{ base: \"floating\", md: \"sticky\" }` is the\n * phone's floating card below 768px and the desktop's sticky bar from there up. The\n * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's\n * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)\n * computes exactly this with its own `useMediaQuery(\"(min-width: 768px)\")`; every bar\n * that is a card on a phone and a strip on a desktop would repeat it.\n *\n * Resolved in JS rather than with `md:` classes because the variants differ in more\n * than classes: the floating bar's clear is an icon at the start, the others' a text\n * button at the end, and the floating bar is positioned by inline style.\n */\nexport interface ResponsiveBulkActionBarVariant {\n  base: BulkActionBarVariant;\n  sm?: BulkActionBarVariant;\n  md?: BulkActionBarVariant;\n  lg?: BulkActionBarVariant;\n  xl?: BulkActionBarVariant;\n}\n\nconst BREAKPOINTS = [\n  [\"xl\", \"(min-width: 1280px)\"],\n  [\"lg\", \"(min-width: 1024px)\"],\n  [\"md\", \"(min-width: 768px)\"],\n  [\"sm\", \"(min-width: 640px)\"],\n] as const;\n\n/** The variant in force: the widest breakpoint that matches AND names one, else\n *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —\n *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)\n *  every query is false, so the bar renders its `base`, the phone's, first. */\nfunction useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {\n  const matches = {\n    xl: useMediaQuery(BREAKPOINTS[0][1], false),\n    lg: useMediaQuery(BREAKPOINTS[1][1], false),\n    md: useMediaQuery(BREAKPOINTS[2][1], false),\n    sm: useMediaQuery(BREAKPOINTS[3][1], false),\n  };\n  if (typeof variant === \"string\") return variant;\n  for (const [key] of BREAKPOINTS) {\n    const v = variant[key];\n    if (matches[key] && v !== undefined) return v;\n  }\n  return variant.base;\n}\n\nexport interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\" | \"children\"> {\n  /** How many items are selected. The bar shows only while this is above zero —\n   *  unless {@link open} says otherwise. */\n  count: number;\n  /**\n   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked\n   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as\n   * before.\n   *\n   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a\n   * \"Select\" button, and the bar must be there at \"0 selected\" to hold the way out and\n   * a \"Select all\" (pass it as a child); gated on the count, the bar appeared only at\n   * the first tick, and the user who pressed \"Select\" saw nothing happen. The exit plays\n   * when it closes either way, and the count is still announced on every change.\n   */\n  open?: boolean;\n  /** Clear the selection / leave selection mode. */\n  onClear: () => void;\n  /**\n   * The actions: buttons (`IconButton size=\"lg\"` on a phone, `Button` from md up),\n   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.\n   *\n   * LINKS rove too (keksdose F8): a `<Button href>` — \"View report\", which navigates\n   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place\n   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled\n   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any\n   * other focusable of your own joins with `data-toolbar-item`.\n   */\n  children?: ReactNode;\n  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per\n   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */\n  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;\n  /**\n   * Content BELOW the toolbar row, inside the same surface — the same floating card or\n   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops\n   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's\n   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —\n   * a category picker, an exclude checkbox, Apply — under the count and the clear; a\n   * form is not a toolbar's content (`role=\"toolbar\"` promises one arrow-key widget),\n   * and set beside the bar it lost the sticky tint and scrolled away from it.\n   *\n   * On the floating variant the panel scrolls within 60% of the viewport's height, so a\n   * long form on a phone cannot push the bar off the top of the screen.\n   */\n  panel?: ReactNode;\n  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */\n  labels?: Partial<BulkActionBarLabels>;\n}\n\n/** Where the floating bar sits: clear of the phone nav and of the home indicator,\n *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.\n *  Set as inline style, so reposition it through `style` (which is merged over this,\n *  e.g. `style={{ insetInline: \"auto 2rem\", width: \"24rem\" }}`), not `className`. */\nconst FLOATING_STYLE: CSSProperties = {\n  bottom: \"calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)\",\n  // Both insets on both sides: a logical side has no one physical inset to name, and\n  // the bar is symmetric, so RTL needs nothing more.\n  insetInline: \"max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))\",\n};\n\n/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by\n *  `tabindex`, because the roving below sets every one but the current to `-1` — a\n *  custom control joins with `data-toolbar-item`.\n *\n *  `a[href]` is here on purpose (keksdose F8, a \"View report\" `Button href` in the bar):\n *  a link in a toolbar is a toolbar item like any other, and left out it would keep its\n *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`\n *  WITHOUT one, and is skipped as a disabled button is. */\nconst ITEMS =\n  \"button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]\";\n\n/** Keys a text field needs for itself — the toolbar must not take its caret away. */\nfunction ownsArrows(el: Element): boolean {\n  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;\n  if (el instanceof HTMLInputElement) return ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\"].includes(el.type);\n  return (el as HTMLElement).isContentEditable;\n}\n\n/**\n * The bar that appears while rows are selected: the count, a way out, and what can be\n * done to all of them at once.\n *\n * keksdose had written it three times — the transactions phone bar\n * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars\n * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had\n * drifted where it matters: two parked themselves with a guessed `bottom-16` that the\n * third had already found leaves a 24px gap (live #314: the nav is content-sized and\n * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,\n * and all three were `role=\"toolbar\"` without the arrow keys that role promises.\n *\n * ## Keep it mounted\n *\n * Render it unconditionally and let `count` decide. At zero it renders only its live\n * region — which must already be in the DOM for the first \"3 selected\" to be heard —\n * and when the count drops to zero it plays its exit before it goes, which a\n * `{count > 0 && <Bar/>}` gate would cut off.\n *\n * ## The toolbar\n *\n * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab\n * leaves — the WAI-ARIA toolbar pattern, since that is what `role=\"toolbar\"` tells a\n * screen reader to expect. The stop remembers the control last used. Arrow keys inside\n * a text field stay the field's.\n *\n * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,\n * because tapping more rows is how a selection grows.\n */\nexport function BulkActionBar({\n  count,\n  onClear,\n  children,\n  variant: variantProp = \"floating\",\n  open,\n  panel,\n  labels: labelsProp,\n  className,\n  style,\n  onKeyDown,\n  onFocus,\n  ...rest\n}: BulkActionBarProps) {\n  const labels = useKitLabels(\"bulkActionBar\", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n  const barRef = useRef<HTMLDivElement>(null);\n  const variant = useResolvedVariant(variantProp);\n  const shown = open ?? count > 0;\n\n  // The count the bar last SHOWED, so a bar lowering itself after \"clear\" still reads\n  // \"3 selected\" on its way out rather than \"0 selected\". Adjusted during render\n  // (`Collapse`'s pattern), as is the exit below.\n  const [shownCount, setShownCount] = useState(count);\n  const [leaving, setLeaving] = useState(false);\n  const [prev, setPrev] = useState({ count, shown });\n  if (count !== prev.count || shown !== prev.shown) {\n    setPrev({ count, shown });\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else if (prev.shown) {\n      setLeaving(!prefersReducedMotion());\n    }\n  }\n  useEffect(() => {\n    if (!leaving) return;\n    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [leaving]);\n\n  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected\n  // was not the result of anything the user just did.\n  const spoken = useRef(count);\n  useEffect(() => {\n    if (spoken.current === count) return;\n    spoken.current = count;\n    // In selection mode the bar stays at zero, so zero is a count like any other.\n    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);\n  }, [count, shown, labels, announce]);\n\n  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM\n  // rather than through props: after every render the remembered control (or the\n  // first) is the one with `tabindex=0`, every other one `-1`.\n  const active = useRef<HTMLElement | null>(null);\n  // Every render: the caller's controls come and go (a \"remove added\" that exists\n  // only while some are removable), and a stop on a control that left must move on.\n  useLayoutEffect(() => {\n    rove(barRef.current, active);\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;\n    const list = itemsOf(barRef.current);\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    if (at === -1 || list.length === 0) return;\n    const step = horizontalStep(e.key, barRef.current);\n    let next = -1;\n    if (step !== 0) next = (at + step + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === -1) return;\n    e.preventDefault();\n    active.current = list[next];\n    rove(barRef.current, active);\n    list[next].focus();\n  };\n\n  if (!shown && !leaving) {\n    return <span {...regionProps} />;\n  }\n\n  const floating = variant === \"floating\";\n  const clear = floating ? (\n    <IconButton size=\"lg\" onClick={onClear} aria-label={labels.clear}>\n      <X />\n    </IconButton>\n  ) : (\n    <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={onClear}>\n      {labels.clear}\n    </Button>\n  );\n\n  const hasPanel = panel !== undefined && panel !== null && panel !== false;\n  // The surface — where the bar sits and what it looks like — and the toolbar row's\n  // own layout. Without a panel they are one element, exactly as before 0.11.0; with\n  // one the surface wraps the row and the panel, so both share its tint and position.\n  const surfaceClass = floating\n    ? cn(\n        \"fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        shown ? \"animate-sheet\" : \"animate-sheet-out\",\n      )\n    : cn(\n        variant === \"sticky\" &&\n          \"sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur\",\n        shown ? \"animate-overlay\" : \"animate-overlay-out\",\n      );\n  const rowClass = cn(\"flex items-center\", floating ? \"gap-1 px-2 py-1\" : \"gap-2 px-3 py-2\");\n  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;\n\n  const toolbar = (\n    <div\n      {...(hasPanel ? null : rest)}\n      ref={barRef}\n      role=\"toolbar\"\n      aria-label={labels.selected(shownCount)}\n      aria-orientation=\"horizontal\"\n      data-bulk-action-bar={hasPanel ? undefined : variant}\n      // Leaving: out of the tab order and the accessibility tree at once, while the\n      // bar still animates. The selection it acted on is already gone.\n      inert={(!hasPanel && !shown) || undefined}\n      onKeyDown={handleKeyDown}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // Clicking a control is using it: the stop follows the pointer too.\n        const hit = itemsOf(barRef.current).find((el) => el === e.target);\n        if (hit) {\n          active.current = hit;\n          rove(barRef.current, active);\n        }\n      }}\n      style={hasPanel ? undefined : surfaceStyle}\n      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}\n    >\n      {floating && clear}\n      <span className=\"min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]\">\n        {labels.selected(shownCount)}\n      </span>\n      {/* `contents`, so the caller's controls are flex items of the bar itself. */}\n      <div className=\"contents\">{children}</div>\n      {!floating && clear}\n    </div>\n  );\n\n  return (\n    <>\n      <span {...regionProps} />\n      {hasPanel ? (\n        <div\n          {...rest}\n          data-bulk-action-bar={variant}\n          inert={!shown || undefined}\n          style={surfaceStyle}\n          className={cn(\"flex flex-col\", surfaceClass, className)}\n        >\n          {toolbar}\n          <div\n            data-bulk-action-bar-panel=\"\"\n            className={cn(\n              \"border-t border-[var(--border)] px-3 py-3\",\n              floating && \"max-h-[60dvh] overflow-y-auto\",\n            )}\n          >\n            {panel}\n          </div>\n        </div>\n      ) : (\n        toolbar\n      )}\n    </>\n  );\n}\n\nfunction itemsOf(bar: HTMLElement | null): HTMLElement[] {\n  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];\n}\n\n/** Put the one Tab stop on the remembered control — or the first, when that one has\n *  gone or was never set — and take it off every other. */\nfunction rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {\n  const list = itemsOf(bar);\n  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;\n  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;\n}\n"],"mappings":";AA8QW,SAkEP,UAlEO,KAgCP,YAhCO;AA9QX,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AAE7D,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,4BAA4B;AACtD,SAAS,QAAQ,kBAAkB;AAa5B,MAAM,iCAAsD;AAAA,EACjE,UAAU,CAAC,UAAU,GAAG,KAAK;AAAA,EAC7B,OAAO;AAAA,EACP,SAAS;AACX;AA8BA,MAAM,cAAc;AAAA,EAClB,CAAC,MAAM,qBAAqB;AAAA,EAC5B,CAAC,MAAM,qBAAqB;AAAA,EAC5B,CAAC,MAAM,oBAAoB;AAAA,EAC3B,CAAC,MAAM,oBAAoB;AAC7B;AAMA,SAAS,mBAAmB,SAAsF;AAChH,QAAM,UAAU;AAAA,IACd,IAAI,cAAc,YAAY,CAAC,EAAE,CAAC,GAAG,KAAK;AAAA,IAC1C,IAAI,cAAc,YAAY,CAAC,EAAE,CAAC,GAAG,KAAK;AAAA,IAC1C,IAAI,cAAc,YAAY,CAAC,EAAE,CAAC,GAAG,KAAK;AAAA,IAC1C,IAAI,cAAc,YAAY,CAAC,EAAE,CAAC,GAAG,KAAK;AAAA,EAC5C;AACA,MAAI,OAAO,YAAY,SAAU,QAAO;AACxC,aAAW,CAAC,GAAG,KAAK,aAAa;AAC/B,UAAM,IAAI,QAAQ,GAAG;AACrB,QAAI,QAAQ,GAAG,KAAK,MAAM,OAAW,QAAO;AAAA,EAC9C;AACA,SAAO,QAAQ;AACjB;AAuDA,MAAM,iBAAgC;AAAA,EACpC,QAAQ;AAAA;AAAA;AAAA,EAGR,aAAa;AACf;AAUA,MAAM,QACJ;AAGF,SAAS,WAAW,IAAsB;AACxC,MAAI,cAAc,uBAAuB,cAAc,kBAAmB,QAAO;AACjF,MAAI,cAAc,iBAAkB,QAAO,CAAC,CAAC,UAAU,YAAY,SAAS,UAAU,OAAO,EAAE,SAAS,GAAG,IAAI;AAC/G,SAAQ,GAAmB;AAC7B;AA+BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,cAAc;AAAA,EACvB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,aAAa,iBAAiB,gCAAgC,UAAU;AACvF,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAC9C,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,UAAU,mBAAmB,WAAW;AAC9C,QAAM,QAAQ,QAAQ,QAAQ;AAK9B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,MAAM,CAAC;AACjD,MAAI,UAAU,KAAK,SAAS,UAAU,KAAK,OAAO;AAChD,YAAQ,EAAE,OAAO,MAAM,CAAC;AACxB,QAAI,OAAO;AACT,oBAAc,KAAK;AACnB,iBAAW,KAAK;AAAA,IAClB,WAAW,KAAK,OAAO;AACrB,iBAAW,CAAC,qBAAqB,CAAC;AAAA,IACpC;AAAA,EACF;AACA,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,eAAe;AACjE,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAIZ,QAAM,SAAS,OAAO,KAAK;AAC3B,YAAU,MAAM;AACd,QAAI,OAAO,YAAY,MAAO;AAC9B,WAAO,UAAU;AAEjB,aAAS,QAAQ,KAAK,QAAQ,OAAO,SAAS,KAAK,IAAI,OAAO,OAAO;AAAA,EACvE,GAAG,CAAC,OAAO,OAAO,QAAQ,QAAQ,CAAC;AAKnC,QAAM,SAAS,OAA2B,IAAI;AAG9C,kBAAgB,MAAM;AACpB,SAAK,OAAO,SAAS,MAAM;AAAA,EAC7B,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,gBAAY,CAAC;AACb,QAAI,EAAE,oBAAoB,WAAW,EAAE,MAAiB,EAAG;AAC3D,UAAM,OAAO,QAAQ,OAAO,OAAO;AACnC,UAAM,KAAK,KAAK,QAAQ,SAAS,aAA4B;AAC7D,QAAI,OAAO,MAAM,KAAK,WAAW,EAAG;AACpC,UAAM,OAAO,eAAe,EAAE,KAAK,OAAO,OAAO;AACjD,QAAI,OAAO;AACX,QAAI,SAAS,EAAG,SAAQ,KAAK,OAAO,KAAK,UAAU,KAAK;AAAA,aAC/C,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO,KAAK,SAAS;AAC/C,QAAI,SAAS,GAAI;AACjB,MAAE,eAAe;AACjB,WAAO,UAAU,KAAK,IAAI;AAC1B,SAAK,OAAO,SAAS,MAAM;AAC3B,SAAK,IAAI,EAAE,MAAM;AAAA,EACnB;AAEA,MAAI,CAAC,SAAS,CAAC,SAAS;AACtB,WAAO,oBAAC,UAAM,GAAG,aAAa;AAAA,EAChC;AAEA,QAAM,WAAW,YAAY;AAC7B,QAAM,QAAQ,WACZ,oBAAC,cAAW,MAAK,MAAK,SAAS,SAAS,cAAY,OAAO,OACzD,8BAAC,KAAE,GACL,IAEA,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,MAAK,MAAK,SAAS,SAC1D,iBAAO,OACV;AAGF,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AAIpE,QAAM,eAAe,WACjB;AAAA,IACE;AAAA,IACA,QAAQ,kBAAkB;AAAA,EAC5B,IACA;AAAA,IACE,YAAY,YACV;AAAA,IACF,QAAQ,oBAAoB;AAAA,EAC9B;AACJ,QAAM,WAAW,GAAG,qBAAqB,WAAW,oBAAoB,iBAAiB;AACzF,QAAM,eAAe,WAAW,EAAE,GAAG,gBAAgB,GAAG,MAAM,IAAI;AAElE,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,WAAW,OAAO;AAAA,MACvB,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAY,OAAO,SAAS,UAAU;AAAA,MACtC,oBAAiB;AAAA,MACjB,wBAAsB,WAAW,SAAY;AAAA,MAG7C,OAAQ,CAAC,YAAY,CAAC,SAAU;AAAA,MAChC,WAAW;AAAA,MACX,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AAEX,cAAM,MAAM,QAAQ,OAAO,OAAO,EAAE,KAAK,CAAC,OAAO,OAAO,EAAE,MAAM;AAChE,YAAI,KAAK;AACP,iBAAO,UAAU;AACjB,eAAK,OAAO,SAAS,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,OAAO,WAAW,SAAY;AAAA,MAC9B,WAAW,WAAW,WAAW,GAAG,UAAU,cAAc,SAAS;AAAA,MAEpE;AAAA,oBAAY;AAAA,QACb,oBAAC,UAAK,WAAU,0EACb,iBAAO,SAAS,UAAU,GAC7B;AAAA,QAEA,oBAAC,SAAI,WAAU,YAAY,UAAS;AAAA,QACnC,CAAC,YAAY;AAAA;AAAA;AAAA,EAChB;AAGF,SACE,iCACE;AAAA,wBAAC,UAAM,GAAG,aAAa;AAAA,IACtB,WACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,wBAAsB;AAAA,QACtB,OAAO,CAAC,SAAS;AAAA,QACjB,OAAO;AAAA,QACP,WAAW,GAAG,iBAAiB,cAAc,SAAS;AAAA,QAErD;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,8BAA2B;AAAA,cAC3B,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF,IAEA;AAAA,KAEJ;AAEJ;AAEA,SAAS,QAAQ,KAAwC;AACvD,SAAO,MAAM,MAAM,KAAK,IAAI,iBAA8B,KAAK,CAAC,IAAI,CAAC;AACvE;AAIA,SAAS,KAAK,KAAyB,QAA+C;AACpF,QAAM,OAAO,QAAQ,GAAG;AACxB,MAAI,CAAC,OAAO,WAAW,CAAC,KAAK,SAAS,OAAO,OAAO,EAAG,QAAO,UAAU,KAAK,CAAC,KAAK;AACnF,aAAW,MAAM,KAAM,IAAG,WAAW,OAAO,OAAO,UAAU,IAAI;AACnE;","names":[]}

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

@@ -1,9 +1,57 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { ButtonVariant, ButtonSize } from './ui.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-Mz8zZHIF.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —
@@ -62,7 +110,8 @@ interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href
     /** The member for the page you are on: `aria-current="page"` and the "on" look of a
      *  pressed member, so a link row reads as a segmented switch between pages. */
     current?: boolean;
-    /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}. */
+    /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.
+     *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */
     renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;
     className?: string;
     children: ReactNode;

package/dist/components/button-group.js

@@ -2,6 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { buttonClasses } from "./ui.js";
+import { useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "./text-link.js";
 const JOINED_COMMON = cn(
   "inline-flex rounded-md border border-[var(--border)]",
   // The group draws the frame; each member gives up its own border, radius and shadow.
@@ -76,6 +78,7 @@ function ButtonGroupLink({
   children,
   ...rest
 }) {
+  const kitLink = useKitLink();
   const props = {
     ...rest,
     href,
@@ -83,7 +86,8 @@ function ButtonGroupLink({
     className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),
     children
   };
-  if (renderLink) return /* @__PURE__ */ jsx(RenderedGroupLink, { render: renderLink, ...props });
+  const render = pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return /* @__PURE__ */ jsx(RenderedGroupLink, { render, ...props });
   const { children: content, ...anchor } = props;
   return /* @__PURE__ */ jsx("a", { ...anchor, children: content });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  if (renderLink) return <RenderedGroupLink render={renderLink} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAiHI;AAhHJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AAYnE,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AA+BA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,MAAI,WAAY,QAAO,oBAAC,qBAAkB,QAAQ,YAAa,GAAG,OAAO;AACzE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.\n   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const kitLink = useKitLink();\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  const render = pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedGroupLink render={render} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAmHI;AAlHJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAYjC,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgCA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,WAAW;AAC3B,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,QAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,MAAI,OAAQ,QAAO,oBAAC,qBAAkB,QAAiB,GAAG,OAAO;AACjE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}