@eifi1/ui-kit 0.9.0 → 0.10.0

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

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+interface BulkActionBarLabels {
+    /** The count, shown in the bar, spoken by its live region and used as the toolbar's
+     *  name: "3 selected". */
+    selected: (count: number) => string;
+    /** The clear/cancel action's name — the X of the floating bar, the text button of the
+     *  others. */
+    clear: string;
+    /** Spoken when the selection empties and the bar goes. */
+    cleared: string;
+}
+declare const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels;
+/**
+ * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the
+ * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the
+ * desktop's: pinned to the top of its scroll container, over the rows it acts on.
+ * `inline` — in the flow, where the caller places it.
+ */
+type BulkActionBarVariant = "floating" | "sticky" | "inline";
+interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "children"> {
+    /** How many items are selected. The bar shows only while this is above zero. */
+    count: number;
+    /** 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. */
+    children?: ReactNode;
+    /** Default `floating`. See {@link BulkActionBarVariant}. */
+    variant?: BulkActionBarVariant;
+    /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
+    labels?: Partial<BulkActionBarLabels>;
+}
+/**
+ * The bar that appears while rows are selected: the count, a way out, and what can be
+ * done to all of them at once.
+ *
+ * keksdose had written it three times — the transactions phone bar
+ * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars
+ * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had
+ * drifted where it matters: two parked themselves with a guessed `bottom-16` that the
+ * third had already found leaves a 24px gap (live #314: the nav is content-sized and
+ * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,
+ * and all three were `role="toolbar"` without the arrow keys that role promises.
+ *
+ * ## Keep it mounted
+ *
+ * Render it unconditionally and let `count` decide. At zero it renders only its live
+ * region — which must already be in the DOM for the first "3 selected" to be heard —
+ * and when the count drops to zero it plays its exit before it goes, which a
+ * `{count > 0 && <Bar/>}` gate would cut off.
+ *
+ * ## The toolbar
+ *
+ * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab
+ * leaves — the WAI-ARIA toolbar pattern, since that is what `role="toolbar"` tells a
+ * screen reader to expect. The stop remembers the control last used. Arrow keys inside
+ * a text field stay the field's.
+ *
+ * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,
+ * because tapping more rows is how a selection grows.
+ */
+declare function BulkActionBar({ count, onClear, children, variant, labels: labelsProp, className, style, onKeyDown, onFocus, ...rest }: BulkActionBarProps): react.JSX.Element;
+
+export { BulkActionBar, type BulkActionBarLabels, type BulkActionBarProps, type BulkActionBarVariant, DEFAULT_BULK_ACTION_BAR_LABELS };

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

@@ -0,0 +1,149 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { useAnnounce } from "../hooks/use-announce.js";
+import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition.js";
+import { Button, IconButton } from "./ui.js";
+const DEFAULT_BULK_ACTION_BAR_LABELS = {
+  selected: (count) => `${count} selected`,
+  clear: "Clear selection",
+  cleared: "Selection cleared"
+};
+const FLOATING_STYLE = {
+  bottom: "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)",
+  // Both insets on both sides: a logical side has no one physical inset to name, and
+  // the bar is symmetric, so RTL needs nothing more.
+  insetInline: "max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))"
+};
+const ITEMS = "button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]";
+function ownsArrows(el) {
+  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;
+  if (el instanceof HTMLInputElement) return !["button", "checkbox", "radio", "submit", "reset"].includes(el.type);
+  return el.isContentEditable;
+}
+function BulkActionBar({
+  count,
+  onClear,
+  children,
+  variant = "floating",
+  labels: labelsProp,
+  className,
+  style,
+  onKeyDown,
+  onFocus,
+  ...rest
+}) {
+  const labels = useKitLabels("bulkActionBar", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);
+  const { announce, regionProps } = useAnnounce();
+  const barRef = useRef(null);
+  const shown = count > 0;
+  const [shownCount, setShownCount] = useState(count);
+  const [leaving, setLeaving] = useState(false);
+  const [prevCount, setPrevCount] = useState(count);
+  if (count !== prevCount) {
+    setPrevCount(count);
+    if (shown) {
+      setShownCount(count);
+      setLeaving(false);
+    } else {
+      setLeaving(prevCount > 0 && !prefersReducedMotion());
+    }
+  }
+  useEffect(() => {
+    if (!leaving) return;
+    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [leaving]);
+  const spoken = useRef(count);
+  useEffect(() => {
+    if (spoken.current === count) return;
+    spoken.current = count;
+    announce(count > 0 ? labels.selected(count) : labels.cleared);
+  }, [count, labels, announce]);
+  const active = useRef(null);
+  useLayoutEffect(() => {
+    rove(barRef.current, active);
+  });
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || ownsArrows(e.target)) return;
+    const list = itemsOf(barRef.current);
+    const at = list.indexOf(document.activeElement);
+    if (at === -1 || list.length === 0) return;
+    const step = horizontalStep(e.key, barRef.current);
+    let next = -1;
+    if (step !== 0) next = (at + step + list.length) % list.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = list.length - 1;
+    if (next === -1) return;
+    e.preventDefault();
+    active.current = list[next];
+    rove(barRef.current, active);
+    list[next].focus();
+  };
+  if (!shown && !leaving) {
+    return /* @__PURE__ */ jsx("span", { ...regionProps });
+  }
+  const floating = variant === "floating";
+  const clear = floating ? /* @__PURE__ */ jsx(IconButton, { size: "lg", onClick: onClear, "aria-label": labels.clear, children: /* @__PURE__ */ jsx(X, {}) }) : /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onClear, children: labels.clear });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ...regionProps }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: barRef,
+        role: "toolbar",
+        "aria-label": labels.selected(shownCount),
+        "aria-orientation": "horizontal",
+        "data-bulk-action-bar": variant,
+        inert: !shown || void 0,
+        onKeyDown: handleKeyDown,
+        onFocus: (e) => {
+          onFocus?.(e);
+          const hit = itemsOf(barRef.current).find((el) => el === e.target);
+          if (hit) {
+            active.current = hit;
+            rove(barRef.current, active);
+          }
+        },
+        style: floating ? { ...FLOATING_STYLE, ...style } : style,
+        className: cn(
+          "flex items-center",
+          floating ? cn(
+            "fixed z-30 gap-1 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 shadow-lg",
+            shown ? "animate-sheet" : "animate-sheet-out"
+          ) : cn(
+            "gap-2 px-3 py-2",
+            variant === "sticky" && "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
+            shown ? "animate-overlay" : "animate-overlay-out"
+          ),
+          className
+        ),
+        children: [
+          floating && clear,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]", children: labels.selected(shownCount) }),
+          /* @__PURE__ */ jsx("div", { className: "contents", children }),
+          !floating && clear
+        ]
+      }
+    )
+  ] });
+}
+function itemsOf(bar) {
+  return bar ? Array.from(bar.querySelectorAll(ITEMS)) : [];
+}
+function rove(bar, active) {
+  const list = itemsOf(bar);
+  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;
+  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;
+}
+export {
+  BulkActionBar,
+  DEFAULT_BULK_ACTION_BAR_LABELS
+};
+//# sourceMappingURL=bulk-action-bar.js.map

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

@@ -0,0 +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 { 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\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  count: number;\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}. */\n  variant?: BulkActionBarVariant;\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 = \"floating\",\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 shown = 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 [prevCount, setPrevCount] = useState(count);\n  if (count !== prevCount) {\n    setPrevCount(count);\n    if (shown) {\n      setShownCount(count);\n      setLeaving(false);\n    } else {\n      setLeaving(prevCount > 0 && !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    announce(count > 0 ? labels.selected(count) : labels.cleared);\n  }, [count, 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  return (\n    <>\n      <span {...regionProps} />\n      <div\n        {...rest}\n        ref={barRef}\n        role=\"toolbar\"\n        aria-label={labels.selected(shownCount)}\n        aria-orientation=\"horizontal\"\n        data-bulk-action-bar={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={!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={floating ? { ...FLOATING_STYLE, ...style } : style}\n        className={cn(\n          \"flex items-center\",\n          floating\n            ? cn(\n                \"fixed z-30 gap-1 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 shadow-lg\",\n                shown ? \"animate-sheet\" : \"animate-sheet-out\",\n              )\n            : cn(\n                \"gap-2 px-3 py-2\",\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          className,\n        )}\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}\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":[]}

package/dist/components/calculator.d.ts

@@ -34,6 +34,10 @@ import '../feedback/feedback-dialog.js';
 import './confirm-dialog.js';
 import './floating-panel.js';
 import './copy-button.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not

package/dist/components/chip.d.ts

@@ -16,9 +16,21 @@ import { LucideIcon } from 'lucide-react';
  * "choose one of eight things to do" and a row of eight chips says "here are eight
  * things". Using `Button` for both is the mistake this exists to prevent.
  */
-type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info" | "income" | "expense";
-/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px. */
-type ChipSize = "sm" | "md" | "lg";
+type ChipTone = "neutral" | "brand" | "danger" | "warning" | "success" | "info" | "income" | "expense" | ChipHue;
+/**
+ * Categorical hues (0.10.0): colour that says "a different value" and nothing more —
+ * kastlan's status-badge.tsx paints ~15 enums in 9 Tailwind hues by hand. Four of those
+ * nine are semantic and already tones (green = `success`, yellow = `warning`, red =
+ * `danger`, gray = `neutral`); these five are the rest, each a `--hue-*` token triple
+ * in tokens.css with a light and a dark value. Use a semantic tone when the value HAS a
+ * meaning (overdue is `danger`), a hue when it only needs telling apart (sent vs
+ * accepted vs invoiced).
+ */
+type ChipHue = "blue" | "indigo" | "purple" | "teal" | "orange";
+/** `lg` is the 44px touch target (`min-h-11`) a phone surface wants; `md` is ~28px.
+ *  `xs` (0.10.0) is 11px type at `px-1.5` — keksdose's goal markers and budget-cell
+ *  badges, which sit inside a figure's line and must not make it taller. */
+type ChipSize = "xs" | "sm" | "md" | "lg";
 /**
  * How much of the tone the chip wears.
  *
@@ -29,8 +41,12 @@ type ChipSize = "sm" | "md" | "lg";
  * - `solid`: the tone as a fill under contrasting text — the "count" pill (unread
  *   messages, open tasks). It centres its content and sets figures tabular, so a
  *   one-digit count is a round dot and "9" → "10" does not jiggle the row.
+ * - `dot` (0.10.0): no pill at all — a dot in the tone's colour before plain text, for
+ *   a status in a dense list or a table column where eight tinted pills in a column
+ *   would outshout the figures beside them (kastlan's unit picker already draws its
+ *   UnitStatus this way, from a separate `dotColor` map).
  */
-type ChipVariant = "soft" | "outline" | "solid";
+type ChipVariant = "soft" | "outline" | "solid" | "dot";
 /** `pill` (default) is fully rounded; `square` has the small radius of a field or a
  *  button — for a chip that sits in a table cell or beside square controls. */
 type ChipShape = "pill" | "square";
@@ -93,6 +109,16 @@ interface ChipBaseProps {
      * it — "+ Outflow" in green next to an inflow (keksdose #417).
      */
     selected?: boolean;
+    /**
+     * Checkbox mode (0.10.0), for a toggle chip (`onClick` + `selected`): a small box
+     * at the start that shows a tick when `selected`, and the button reports
+     * `role="checkbox"` + `aria-checked` instead of `aria-pressed`. For a set of
+     * include/exclude choices where "on" must read as TICKED, not merely tinted —
+     * keksdose's add-group-card (the "which categories come along" pills), which put a
+     * real `<Checkbox>` inside a `<label>` pill by hand. The box is drawn in both
+     * states so ticking one never shifts its label.
+     */
+    checkbox?: boolean;
     /** Renders a dismiss affordance. Works alongside `href`/`onClick` — see the note below. */
     onRemove?: () => void;
     /** Accessible name for the dismiss button. Default: `common.remove` from the
@@ -247,4 +273,4 @@ interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange
  */
 declare function ChipInput({ value, onChange, placeholder, label, ariaLabel, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ...rest }: ChipInputProps): react.JSX.Element;
 
-export { Chip, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, resolveChipInputLabels };
+export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, resolveChipInputLabels };

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useRef, useState } from "react";
-import { X } from "lucide-react";
+import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { FIELD_INVALID } from "./ui.js";
@@ -42,6 +42,28 @@ const TONE = {
   expense: {
     idle: "border-current/40 bg-[var(--bg-surface-2)] text-[var(--money-expense)]",
     selected: "border-current bg-[var(--bg-active)] text-[var(--money-expense)]"
+  },
+  // The categorical hues: the `info` recipe with its own token triple, so a hue chip
+  // and a status chip in one row carry the same weight.
+  blue: {
+    idle: "border-[var(--hue-blue-border)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]",
+    selected: "border-[var(--hue-blue)] bg-[var(--hue-blue-bg)] text-[var(--hue-blue)]"
+  },
+  indigo: {
+    idle: "border-[var(--hue-indigo-border)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]",
+    selected: "border-[var(--hue-indigo)] bg-[var(--hue-indigo-bg)] text-[var(--hue-indigo)]"
+  },
+  purple: {
+    idle: "border-[var(--hue-purple-border)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]",
+    selected: "border-[var(--hue-purple)] bg-[var(--hue-purple-bg)] text-[var(--hue-purple)]"
+  },
+  teal: {
+    idle: "border-[var(--hue-teal-border)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]",
+    selected: "border-[var(--hue-teal)] bg-[var(--hue-teal-bg)] text-[var(--hue-teal)]"
+  },
+  orange: {
+    idle: "border-[var(--hue-orange-border)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]",
+    selected: "border-[var(--hue-orange)] bg-[var(--hue-orange-bg)] text-[var(--hue-orange)]"
   }
 };
 const OUTLINE = {
@@ -52,7 +74,12 @@ const OUTLINE = {
   success: "border-[var(--success-border)] bg-transparent text-[var(--success)]",
   info: "border-[var(--info-border)] bg-transparent text-[var(--info)]",
   income: "border-current/60 bg-transparent text-[var(--money-income)]",
-  expense: "border-current/60 bg-transparent text-[var(--money-expense)]"
+  expense: "border-current/60 bg-transparent text-[var(--money-expense)]",
+  blue: "border-[var(--hue-blue-border)] bg-transparent text-[var(--hue-blue)]",
+  indigo: "border-[var(--hue-indigo-border)] bg-transparent text-[var(--hue-indigo)]",
+  purple: "border-[var(--hue-purple-border)] bg-transparent text-[var(--hue-purple)]",
+  teal: "border-[var(--hue-teal-border)] bg-transparent text-[var(--hue-teal)]",
+  orange: "border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]"
 };
 const SOLID = {
   neutral: "border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]",
@@ -62,15 +89,40 @@ const SOLID = {
   success: "border-transparent bg-[var(--success)] text-[var(--text-inverse)]",
   info: "border-transparent bg-[var(--info)] text-[var(--text-inverse)]",
   income: "border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]",
-  expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]"
+  expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]",
+  blue: "border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]",
+  indigo: "border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]",
+  purple: "border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]",
+  teal: "border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]",
+  orange: "border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]"
+};
+const DOT = {
+  neutral: "bg-[var(--text-muted)]",
+  brand: "bg-[var(--brand)]",
+  danger: "bg-[var(--danger)]",
+  warning: "bg-[var(--warning)]",
+  success: "bg-[var(--success)]",
+  info: "bg-[var(--info)]",
+  income: "bg-[var(--money-income)]",
+  expense: "bg-[var(--money-expense)]",
+  blue: "bg-[var(--hue-blue)]",
+  indigo: "bg-[var(--hue-indigo)]",
+  purple: "bg-[var(--hue-purple)]",
+  teal: "bg-[var(--hue-teal)]",
+  orange: "bg-[var(--hue-orange)]"
 };
+const DOT_SIZE = { xs: "size-1.5", sm: "size-2", md: "size-2", lg: "size-2.5" };
 const CAPS = {
+  xs: "text-[10px] font-semibold uppercase tracking-wider",
   sm: "text-[10px] font-semibold uppercase tracking-wider",
   md: "text-[11px] font-semibold uppercase tracking-wider",
   lg: "text-xs font-semibold uppercase tracking-wider"
 };
 function surfaceOf(tone, variant, selected) {
   const palette = TONE[tone];
+  if (variant === "dot") {
+    return selected ? "border-transparent bg-transparent font-medium text-[var(--text-primary)]" : "border-transparent bg-transparent text-[var(--text-secondary)]";
+  }
   if (variant === "solid") {
     return cn(SOLID[tone], selected && "ring-2 ring-[var(--border-strong)] ring-offset-1 ring-offset-[var(--bg-surface)]");
   }
@@ -78,6 +130,13 @@ function surfaceOf(tone, variant, selected) {
   return variant === "outline" ? OUTLINE[tone] : palette.idle;
 }
 const SIZE = {
+  xs: {
+    body: "gap-1 px-1.5 py-0 text-[11px] leading-4",
+    split: "gap-1 ps-1.5 pe-0.5 py-0 text-[11px] leading-4",
+    tail: "pe-1",
+    icon: "size-3",
+    remove: "size-2.5"
+  },
   sm: {
     body: "gap-1 px-2 py-0.5 text-xs",
     split: "gap-1 ps-2 pe-1 py-0.5 text-xs",
@@ -112,6 +171,7 @@ const Chip = forwardRef(function Chip2({
   caps = false,
   icon: Icon,
   selected,
+  checkbox = false,
   href,
   renderLink,
   onClick,
@@ -129,7 +189,8 @@ const Chip = forwardRef(function Chip2({
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
   const s = SIZE[size];
   const interactive = !!href || !!onClick;
-  const radius = shape === "square" ? size === "sm" ? "rounded" : "rounded-md" : "rounded-full";
+  const radius = shape === "square" ? size === "sm" || size === "xs" ? "rounded" : "rounded-md" : "rounded-full";
+  const dot = variant === "dot";
   const type = cn(caps && CAPS[size], variant === "solid" && "justify-center tabular-nums");
   const surface = cn(
     surfaceOf(tone, variant, selected),
@@ -142,9 +203,26 @@ const Chip = forwardRef(function Chip2({
     radius,
     surface,
     interactive && !disabled && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
+    // An inert dot chip is text in a column: no inset, so it aligns with the header.
+    dot && !interactive && "px-0",
     className
   );
+  const isCheckbox = checkbox && !!onClick && !href;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isCheckbox && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-chip-check": "",
+        className: cn(
+          "flex shrink-0 items-center justify-center rounded-sm border",
+          s.icon,
+          selected ? "border-current bg-current/15" : "border-current/50"
+        ),
+        children: selected && /* @__PURE__ */ jsx(Check, { className: "size-full", strokeWidth: 3 })
+      }
+    ),
+    dot && /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-chip-dot": "", className: cn("shrink-0 rounded-full", DOT_SIZE[size], DOT[tone]) }),
     Icon && /* @__PURE__ */ jsx(Icon, { className: cn(s.icon, "shrink-0"), "aria-hidden": true }),
     /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
   ] });
@@ -223,7 +301,9 @@ const Chip = forwardRef(function Chip2({
         type: "button",
         onClick: onButtonClick,
         disabled,
-        "aria-pressed": selected,
+        role: isCheckbox ? "checkbox" : void 0,
+        "aria-pressed": isCheckbox ? void 0 : selected,
+        "aria-checked": isCheckbox ? !!selected : void 0,
         className: remove ? inner : look,
         ...rest,
         children: body