@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Checkbox } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/checkbox/checkbox.tsx
 /**
 * Checkbox, rebuilt on React Aria.
@@ -43,15 +43,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 */
 const checkboxVariants = cva([selectionLabelVariants()]);
 const checkboxBoxVariants = cva([
-	"inline-flex size-4 shrink-0 items-center justify-center",
-	"rounded-2xs border-(length:--border-width)",
+	"inline-flex size-4.5 shrink-0 items-center justify-center",
+	"rounded-checkbox border-(length:--border-width)",
 	"box-border",
-	"bg-background border-border",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
-	"group-data-[selected]:text-primary-foreground",
-	"group-data-[indeterminate]:bg-primary group-data-[indeterminate]:border-primary-strong",
-	"group-data-[indeterminate]:text-primary-foreground",
+	"bg-surface border-control-edge text-primary-foreground",
+	"checkbox-box",
+	"group-data-[selected]:border-primary-strong",
+	"group-data-[indeterminate]:border-primary-strong",
+	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground",
 	selectionRingVariants()
 ]);
 const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...props }, ref) {
@@ -60,30 +59,28 @@ const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...prop
 		inputRef: ref,
 		"data-slot": "checkbox",
 		className: cn(checkboxVariants(), className),
-		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			"aria-hidden": "true",
 			"data-slot": "checkbox-box",
 			className: checkboxBoxVariants(),
-			children: isIndeterminate ? /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-indeterminate",
-				viewBox: "0 0 16 16",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-fill",
+				className: "checkbox-fill"
+			}), /* @__PURE__ */ jsx("svg", {
+				"data-slot": "checkbox-mark",
+				"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
+				viewBox: "0 0 18 18",
 				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2.5",
-				strokeLinecap: "round",
-				className: "size-3",
-				children: /* @__PURE__ */ jsx("path", { d: "M4 8h8" })
-			}) : isSelected ? /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-check",
-				viewBox: "0 0 16 16",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2.5",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				className: "size-3",
-				children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-6" })
-			}) : null
+				className: "absolute -inset-px size-4.5 overflow-visible",
+				children: /* @__PURE__ */ jsx("path", {
+					className: "checkbox-mark",
+					pathLength: "1",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
 		}), children == null ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "checkbox-label",
 			children

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  // rounded-2xs, not rounded-sm. --radius-sm is 8px, which on a 16px box\n  // is exactly half its width -- a circle, indistinguishable from a radio\n  // button. A screenshot caught that; no assertion in this suite did, which\n  // is why NotACircle now exists. --radius-xs (6px) is still 75% of the way\n  // there, so the scale gained a 4px step rather than this reaching for a\n  // bracket value that check:hardcoding would rightly reject.\n  \"rounded-2xs border-(length:--border-width)\",\n\n  // box-border: content-box would add the border to the 16px box and make it\n  // 18, which is the same opt-in-reset exposure as everywhere else.\n  \"box-border\",\n\n  // Unselected: a neutral boundary, NOT the legacy border-primary. Brand\n  // orange is 2.44:1 on white and cannot legally be the only thing describing\n  // a control's edge.\n  \"bg-background border-border\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // Selected and indeterminate paint the same: both mean \"this control has a\n  // value\", and the glyph inside says which.\n  //\n  // primary-strong on the border, not primary: a filled orange box is 2.44:1\n  // against the page, so the FILL cannot satisfy 1.4.11 and the boundary has\n  // to. Same reasoning, and the same token, as the Button's outline variant.\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n  \"group-data-[indeterminate]:bg-primary group-data-[indeterminate]:border-primary-strong\",\n  \"group-data-[indeterminate]:text-primary-foreground\",\n\n  // Shared with Radio and Switch. The ring goes on the BOX rather than the\n  // input, because React Aria's input is visually hidden.\n  selectionRingVariants(),\n]);\n\n/**\n * A checkbox.\n *\n * @example\n * <Checkbox defaultSelected>Email me about new courses</Checkbox>\n * <Checkbox aria-label=\"Select row\" />\n */\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            {/*\n              Chosen in JS rather than toggled with CSS. Two rules that both\n              apply -- show-when-selected and hide-when-indeterminate -- have\n              equal specificity, so which wins comes down to the order\n              Tailwind happened to emit them in. Rendering one glyph makes\n              the precedence explicit and puts it in the DOM, where a test\n              can read it.\n\n              Indeterminate wins: both states can be true at once (a \"select\n              all\" box that has been partially cleared), and a tick there\n              would say the opposite of the aria-checked=\"mixed\" beside it.\n            */}\n            {isIndeterminate ? (\n              <svg\n                data-slot=\"checkbox-indeterminate\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                className=\"size-3\"\n              >\n                <path d=\"M4 8h8\" />\n              </svg>\n            ) : isSelected ? (\n              <svg\n                data-slot=\"checkbox-check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"size-3\"\n              >\n                <path d=\"m3.5 8.5 3 3 6-6\" />\n              </svg>\n            ) : null}\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CAOA;CAIA;CAKA;CAEA;CAQA;CACA;CACA;CACA;CAIA,sBAAsB;AACxB,CAAC;AAuBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,UAAA,EAAA,UAAA,CAKE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAa9E,UAAA,kBACC,oBAAC,OAAD;IACE,aAAU;IACV,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,SAAU,CAAA;GACf,CAAA,IACH,aACF,oBAAC,OAAD;IACE,aAAU;IACV,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA,IACH;EACA,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4.5 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}

package/dist/chip-group/chip-group.d.ts

@@ -0,0 +1,37 @@
+//#region src/chip-group/chip-group.d.ts
+/**
+ * ChipGroup: selectable filter chips for narrowing a list by facets people
+ * toggle often, such as topics, statuses or tags.
+ *
+ * Selecting a chip grows a check in at its start (it draws itself as it
+ * scales up from a soft blur), the label slides over, the chip widens on the
+ * morph spring, and its neighbours glide to their new places, even across
+ * lines. The row follows its own height. Long sets fold behind a "+N more"
+ * chip; opening it grows the hidden chips in one after another. Arrow keys move
+ * between chips, Space or Enter toggles, and each chip is a pressed or
+ * unpressed button. Selected reads as a tint plus the check, never colour alone.
+ */
+export interface ChipOption {
+  value: string;
+  label: string;
+}
+export interface ChipGroupProps {
+  options: ChipOption[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  /** Accessible name of the group, such as "Topics". */
+  label: string;
+  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */
+  multiple?: boolean;
+  /** Chips shown before the rest fold behind a "+N more" chip. Chips selected when it folds stay in view. */
+  maxVisible?: number;
+  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */
+  moreLabel?: (hidden: number) => string;
+  /** @default "Show less" */
+  lessLabel?: string;
+  /** Extra classes for the group. Merged last. */
+  className?: string;
+}
+export declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=chip-group.d.ts.map

package/dist/chip-group/chip-group.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { useFlip } from "../lib/flip.js";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chip-group/chip-group.tsx
+/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */
+const MORE = "\0more";
+/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */
+const STAGGER_MS = 35;
+const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange, label, multiple = true, maxVisible = Infinity, moreLabel = (hidden) => `+${hidden} more`, lessLabel = "Show less", className }, ref) {
+	const [expanded, setExpanded] = useState(false);
+	const [pinned, setPinned] = useState(value);
+	const [active, setActive] = useState(null);
+	const foldable = options.length > maxVisible;
+	const visible = !foldable || expanded ? options : options.filter((option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value));
+	const hidden = options.length - visible.length;
+	const showMore = foldable && (expanded || hidden > 0);
+	const keys = [...visible.map((option) => option.value), ...showMore ? [MORE] : []];
+	const tabStop = active !== null && keys.includes(active) ? active : visible.find((option) => value.includes(option.value))?.value ?? keys[0];
+	const group = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, group), [ref]);
+	const frame = useRef(null);
+	const morphKey = `${expanded}|${value.join(",")}`;
+	useFlip(group, morphKey, "var(--duration-morph)", "var(--ease-morph)");
+	useHeightFollow(frame, group, morphKey);
+	const seen = useRef(new Set(options.map((option) => option.value)));
+	const revealedAt = /* @__PURE__ */ new Map();
+	let rank = 0;
+	for (const option of visible) if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));
+	function toggle(next) {
+		const on = value.includes(next);
+		if (!multiple) {
+			onValueChange(on ? [] : [next]);
+			return;
+		}
+		onValueChange(options.filter((option) => option.value === next ? !on : value.includes(option.value)).map((option) => option.value));
+	}
+	function toggleMore() {
+		if (expanded) setPinned(value);
+		else seen.current = new Set(visible.map((option) => option.value));
+		setExpanded(!expanded);
+	}
+	function onKeyDown(event) {
+		const buttons = Array.from(event.currentTarget.querySelectorAll("button[data-chip]"));
+		const index = buttons.indexOf(document.activeElement);
+		if (index < 0) return;
+		const last = buttons.length - 1;
+		const moves = {
+			ArrowRight: index === last ? 0 : index + 1,
+			ArrowDown: index === last ? 0 : index + 1,
+			ArrowLeft: index === 0 ? last : index - 1,
+			ArrowUp: index === 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		buttons[moves[event.key]].focus();
+	}
+	const moreText = expanded ? lessLabel : moreLabel(hidden);
+	return /* @__PURE__ */ jsx("div", {
+		ref: frame,
+		"data-slot": "chip-group-frame",
+		className: "height-follow min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: refs,
+			role: "group",
+			"aria-label": label,
+			"data-slot": "chip-group",
+			onKeyDown,
+			className: cn("relative isolate flex flex-wrap gap-2 box-border font-sans", className),
+			children: [visible.map((option) => {
+				const selected = value.includes(option.value);
+				const delay = revealedAt.get(option.value);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-flip": "",
+					"data-chip": option.value,
+					"data-slot": "chip",
+					"aria-pressed": selected,
+					tabIndex: tabStop === option.value ? 0 : -1,
+					onClick: () => toggle(option.value),
+					onFocus: () => setActive(option.value),
+					style: delay === void 0 ? void 0 : { animationDelay: `${delay}ms` },
+					className: cn("chip", delay === void 0 ? "" : "motion-safe:animate-chip-reveal"),
+					children: /* @__PURE__ */ jsxs("span", {
+						"data-selected": selected,
+						className: "chip-body",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-check",
+								children: /* @__PURE__ */ jsx("svg", {
+									width: 14,
+									height: 14,
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 2.5,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M4 12.5 9.5 18 20 6.5",
+										pathLength: 1
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-slot"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: option.label
+							})
+						]
+					})
+				}, option.value);
+			}), showMore ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-flip": "",
+				"data-chip": MORE,
+				"data-more": "",
+				"aria-expanded": expanded,
+				tabIndex: tabStop === MORE ? 0 : -1,
+				onClick: toggleMore,
+				onFocus: () => setActive(MORE),
+				className: "chip chip-more",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "chip-body tabular-nums",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: moreText,
+						motion: "rise",
+						children: moreText
+					})
+				})
+			}, MORE) : null]
+		})
+	});
+});
+//#endregion
+export { ChipGroup };
+
+//# sourceMappingURL=chip-group.js.map

package/dist/chip-group/chip-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.js","names":[],"sources":["../../src/chip-group/chip-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * ChipGroup: selectable filter chips for narrowing a list by facets people\n * toggle often, such as topics, statuses or tags.\n *\n * Selecting a chip grows a check in at its start (it draws itself as it\n * scales up from a soft blur), the label slides over, the chip widens on the\n * morph spring, and its neighbours glide to their new places, even across\n * lines. The row follows its own height. Long sets fold behind a \"+N more\"\n * chip; opening it grows the hidden chips in one after another. Arrow keys move\n * between chips, Space or Enter toggles, and each chip is a pressed or\n * unpressed button. Selected reads as a tint plus the check, never colour alone.\n */\nexport interface ChipOption {\n  value: string;\n  label: string;\n}\n\nexport interface ChipGroupProps {\n  options: ChipOption[];\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Accessible name of the group, such as \"Topics\". */\n  label: string;\n  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */\n  multiple?: boolean;\n  /** Chips shown before the rest fold behind a \"+N more\" chip. Chips selected when it folds stay in view. */\n  maxVisible?: number;\n  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */\n  moreLabel?: (hidden: number) => string;\n  /** @default \"Show less\" */\n  lessLabel?: string;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\n/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */\nconst MORE = \"\\u0000more\";\n/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */\nconst STAGGER_MS = 35;\n\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(\n  {\n    options,\n    value,\n    onValueChange,\n    label,\n    multiple = true,\n    maxVisible = Infinity,\n    moreLabel = (hidden) => `+${hidden} more`,\n    lessLabel = \"Show less\",\n    className,\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useState(false);\n  // Chips selected when the overflow folds stay in view, so a selection is never hidden.\n  const [pinned, setPinned] = useState<string[]>(value);\n  const [active, setActive] = useState<string | null>(null);\n  const foldable = options.length > maxVisible;\n  const visible =\n    !foldable || expanded\n      ? options\n      : options.filter(\n          (option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value),\n        );\n  const hidden = options.length - visible.length;\n  const showMore = foldable && (expanded || hidden > 0);\n  const keys = [...visible.map((option) => option.value), ...(showMore ? [MORE] : [])];\n  // One chip holds the tab stop: the last one focused, else the first selected, else the first.\n  const tabStop =\n    active !== null && keys.includes(active)\n      ? active\n      : (visible.find((option) => value.includes(option.value))?.value ?? keys[0]);\n\n  const group = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, group), [ref]);\n  const frame = useRef<HTMLDivElement>(null);\n  const morphKey = `${expanded}|${value.join(\",\")}`;\n  // Neighbours glide to their new places when a chip widens, even across lines; the row follows its height.\n  useFlip(group, morphKey, \"var(--duration-morph)\", \"var(--ease-morph)\");\n  useHeightFollow(frame, group, morphKey);\n  // Chips that appear after the first render grow in; the ones there from the start never animate.\n  const seen = useRef(new Set(options.map((option) => option.value)));\n  const revealedAt = new Map<string, number>();\n  let rank = 0;\n  for (const option of visible) {\n    if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));\n  }\n\n  function toggle(next: string) {\n    const on = value.includes(next);\n    if (!multiple) {\n      onValueChange(on ? [] : [next]);\n      return;\n    }\n    onValueChange(\n      options.filter((option) => (option.value === next ? !on : value.includes(option.value))).map((option) => option.value),\n    );\n  }\n\n  function toggleMore() {\n    if (expanded) setPinned(value);\n    // Only the chips this opening reveals grow in; the ones already on screen stay put.\n    else seen.current = new Set(visible.map((option) => option.value));\n    setExpanded(!expanded);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-chip]\"));\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0) return;\n    const last = buttons.length - 1;\n    const moves: Record<string, number> = {\n      ArrowRight: index === last ? 0 : index + 1,\n      ArrowDown: index === last ? 0 : index + 1,\n      ArrowLeft: index === 0 ? last : index - 1,\n      ArrowUp: index === 0 ? last : index - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    buttons[moves[event.key]!]!.focus();\n  }\n\n  const moreText = expanded ? lessLabel : moreLabel(hidden);\n\n  return (\n    <div ref={frame} data-slot=\"chip-group-frame\" className=\"height-follow min-w-0\">\n      <div\n        ref={refs}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chip-group\"\n        onKeyDown={onKeyDown}\n        className={cn(\"relative isolate flex flex-wrap gap-2 box-border font-sans\", className)}\n      >\n        {visible.map((option) => {\n          const selected = value.includes(option.value);\n          const delay = revealedAt.get(option.value);\n          return (\n            <button\n              key={option.value}\n              type=\"button\"\n              data-flip=\"\"\n              data-chip={option.value}\n              data-slot=\"chip\"\n              aria-pressed={selected}\n              tabIndex={tabStop === option.value ? 0 : -1}\n              onClick={() => toggle(option.value)}\n              onFocus={() => setActive(option.value)}\n              style={delay === undefined ? undefined : ({ animationDelay: `${delay}ms` })}\n              className={cn(\"chip\", delay === undefined ? \"\" : \"motion-safe:animate-chip-reveal\")}\n            >\n              <span data-selected={selected} className=\"chip-body\">\n                <span aria-hidden=\"true\" className=\"chip-check\">\n                  <svg width={14} height={14} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 12.5 9.5 18 20 6.5\" pathLength={1} />\n                  </svg>\n                </span>\n                <span aria-hidden=\"true\" className=\"chip-slot\" />\n                <span className=\"truncate\">{option.label}</span>\n              </span>\n            </button>\n          );\n        })}\n        {showMore ? (\n          <button\n            key={MORE}\n            type=\"button\"\n            data-flip=\"\"\n            data-chip={MORE}\n            data-more=\"\"\n            aria-expanded={expanded}\n            tabIndex={tabStop === MORE ? 0 : -1}\n            onClick={toggleMore}\n            onFocus={() => setActive(MORE)}\n            className=\"chip chip-more\"\n          >\n            <span className=\"chip-body tabular-nums\">\n              <SwapText swapKey={moreText} motion=\"rise\">\n                {moreText}\n              </SwapText>\n            </span>\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/chip-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group.js";
+export { ChipGroup, type ChipGroupProps, type ChipOption };

package/dist/chip-group/index.js

@@ -0,0 +1,2 @@
+import { ChipGroup } from "./chip-group.js";
+export { ChipGroup };

package/dist/confirm-morph/confirm-morph.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from "react";
+//#region src/confirm-morph/confirm-morph.d.ts
+/** Where the control is in its life: resting, asking, working, finished, or failed. */
+export type ConfirmMorphState = "idle" | "confirming" | "pending" | "done" | "error";
+/** How the question is answered: a press, a press held until the fill completes, or a press followed by a short countdown. */
+export type ConfirmMorphMode = "press" | "hold" | "countdown";
+/**
+ * A button for destructive or important actions that asks in place. Pressing it
+ * morphs the same pill into an inline question with Cancel and Confirm, then into
+ * a spinner, then into a result with Undo. The width springs to each face while
+ * the faces crossfade at their natural width, so text never squashes and nothing
+ * around the control jumps. Escape, an outside press, or the timeout all return
+ * it to rest.
+ *
+ * Use it where a modal dialog would be heavy: deleting a project, revoking
+ * access, discarding a draft.
+ */
+export interface ConfirmMorphProps {
+  /** The resting label, such as "Delete project". */
+  label: ReactNode;
+  /** A plain icon before the resting label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** The question shown while confirming, such as "Delete 3 files?". Defaults to the label with a question mark. */
+  prompt?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Shown beside the spinner while `onConfirm` resolves. */
+  pendingLabel?: string;
+  doneLabel?: string;
+  errorLabel?: string;
+  retryLabel?: string;
+  undoLabel?: string;
+  /** Shown beside the spinner while `onUndo` resolves. */
+  undoingLabel?: string;
+  /**
+   * `danger` (default) gives the confirm button the destructive colour, for
+   * actions that destroy something. `neutral` gives it the primary colour, for
+   * important actions that can be reversed. The resting button is neutral either way.
+   */
+  tone?: "danger" | "neutral";
+  /** `press` confirms on a press. `hold` asks for a press held for `holdDuration`. `countdown` confirms, then counts down `countdown` seconds that Cancel or Escape can still stop. */
+  confirmMode?: ConfirmMorphMode;
+  /** Milliseconds the confirm button must be held in `hold` mode. */
+  holdDuration?: number;
+  /** Seconds counted down before the action runs in `countdown` mode. */
+  countdown?: number;
+  /** Text before the seconds in `countdown` mode, such as "Deleting in". Defaults to the pending label followed by "in". */
+  countdownLabel?: string;
+  /** Runs on confirm. Return a promise to show the pending face; a rejection shows the error face with Retry. */
+  onConfirm?: () => void | Promise<unknown>;
+  /** Offering it adds Undo to the result. Return a promise to show a pending face while it runs. */
+  onUndo?: () => void | Promise<unknown>;
+  onCancel?: () => void;
+  /** Controlled state. Pair it with `onStateChange`. */
+  state?: ConfirmMorphState;
+  /** Starting state when uncontrolled. */
+  defaultState?: ConfirmMorphState;
+  onStateChange?: (state: ConfirmMorphState) => void;
+  /** Milliseconds before an unanswered question returns to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+  confirmTimeout?: number;
+  /** Milliseconds a result stays before returning to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+  resultTimeout?: number;
+  /** A press outside the control cancels an open question. Defaults to true. */
+  cancelOnOutsidePress?: boolean;
+  isDisabled?: boolean;
+  /** Extra classes for the root. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button for an action that deserves a second thought, without a dialog. It
+ * asks in place: the pill morphs into a question with Cancel and Confirm, then
+ * a spinner, then a result with Undo, its width springing to each face while the
+ * faces crossfade at their natural width.
+ *
+ * Escape, a press outside, or the timeout answer the question with no. Focus
+ * follows the control between faces, but only when it was already inside, so a
+ * timeout never steals it. A live region announces each step.
+ *
+ * @example
+ * <ConfirmMorph label="Delete project" onConfirm={() => deleteProject()} onUndo={() => restore()} />
+ * <ConfirmMorph label="Delete project" confirmMode="hold" onConfirm={deleteProject} />
+ */
+export declare const ConfirmMorph: import("react").ForwardRefExoticComponent<ConfirmMorphProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=confirm-morph.d.ts.map