@devalok/shilp-sutra 0.51.0 → 0.53.0

package/dist/ui/autocomplete.d.ts

@@ -1,59 +1,61 @@
 "use client";
+import { InputProps } from './input';
 import * as React from 'react';
-type AutocompleteOption = {
+export type AutocompleteOption = {
     label: string;
     value: string;
 };
 /**
- * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard
- * navigation, and ARIA combobox semantics. Suitable for "type to search" fields where the
- * full list is known ahead of time (client-side filtering only).
+ * A free-text input with a live-filtered dropdown, keyboard navigation, and
+ * combobox ARIA. The field itself is the DS `Input`, so it inherits size,
+ * error/state painting, read-only, hover, and FormField wiring.
  *
- * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),
- * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type
- * with suggestions; use Combobox for structured single or multi-select dropdowns.
- *
- * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.
- * The input's text is synced to `value.label` on mount.
- *
- * @example
- * // City search autocomplete:
- * <Autocomplete
- *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}
- *   value={selectedCity}
- *   onValueChange={(opt) => setSelectedCity(opt)}
- *   placeholder="Search cities..."
- * />
- *
- * @example
- * // Employee name lookup with custom empty text:
- * <Autocomplete
- *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}
- *   onValueChange={(opt) => setAssignee(opt.value)}
- *   emptyText="No employees found"
- *   placeholder="Search employees..."
- * />
- * // These are just a few ways — feel free to combine props creatively!
+ * Free-text (no forced selection) — for enforced selection use `Combobox`.
+ * `value`/`defaultValue` are a full `AutocompleteOption` (or null).
  */
-type AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {
+export type AutocompleteProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     options: AutocompleteOption[];
+    /** Controlled selection. */
     value?: AutocompleteOption | null;
+    /** Initial selection for uncontrolled mode. */
+    defaultValue?: AutocompleteOption | null;
     onValueChange?: (option: AutocompleteOption) => void;
     placeholder?: string;
     emptyText?: string;
     disabled?: boolean;
+    /** Input size (forwarded to the composed `Input`). */
+    size?: InputProps['size'];
+    /** Field state (forwarded to `Input`); overrides FormField auto-consumption. */
+    state?: InputProps['state'];
+    /** Show a loading spinner + `loadingText` (async "type to search"). */
+    isLoading?: boolean;
+    loadingText?: string;
+    /** Custom option renderer. Receives the option and the current query. */
+    renderOption?: (option: AutocompleteOption, query: string) => React.ReactNode;
     className?: string;
     id?: string;
 };
-declare const Autocomplete: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const Autocomplete: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
     options: AutocompleteOption[];
+    /** Controlled selection. */
     value?: AutocompleteOption | null;
+    /** Initial selection for uncontrolled mode. */
+    defaultValue?: AutocompleteOption | null;
     onValueChange?: (option: AutocompleteOption) => void;
     placeholder?: string;
     emptyText?: string;
     disabled?: boolean;
+    /** Input size (forwarded to the composed `Input`). */
+    size?: InputProps["size"];
+    /** Field state (forwarded to `Input`); overrides FormField auto-consumption. */
+    state?: InputProps["state"];
+    /** Show a loading spinner + `loadingText` (async "type to search"). */
+    isLoading?: boolean;
+    loadingText?: string;
+    /** Custom option renderer. Receives the option and the current query. */
+    renderOption?: (option: AutocompleteOption, query: string) => React.ReactNode;
     className?: string;
     id?: string;
 } & React.RefAttributes<HTMLInputElement>>;
-export { Autocomplete, type AutocompleteOption, type AutocompleteProps };
+export { Autocomplete };
 //# sourceMappingURL=autocomplete.d.ts.map

package/dist/ui/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY;aAVP,kBAAkB,EAAE;YACrB,kBAAkB,GAAG,IAAI;oBACjB,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;kBACtC,MAAM;gBACR,MAAM;eACP,OAAO;gBACN,MAAM;SACb,MAAM;0CA8PZ,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAC,KAAK,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAKhD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACvF,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;IACzB,gFAAgF;IAChF,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAC3B,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD,QAAA,MAAM,YAAY;aAnCP,kBAAkB,EAAE;IAC7B,4BAA4B;YACpB,kBAAkB,GAAG,IAAI;IACjC,+CAA+C;mBAChC,kBAAkB,GAAG,IAAI;oBACxB,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;kBACtC,MAAM;gBACR,MAAM;eACP,OAAO;IAClB,sDAAsD;WAC/C,UAAU,CAAC,MAAM,CAAC;IACzB,gFAAgF;YACxE,UAAU,CAAC,OAAO,CAAC;IAC3B,uEAAuE;gBAC3D,OAAO;kBACL,MAAM;IACpB,yEAAyE;mBAC1D,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS;gBACjE,MAAM;SACb,MAAM;0CA2PZ,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/ui/autocomplete.js

@@ -1,29 +1,30 @@
 "use client";
 import { autoUpdate as e, flip as t, offset as n, shift as r, size as i, useFloating as a } from "../_chunks/primitives.js";
-import { springs as o, tweens as s } from "./lib/motion.js";
-import { cn as c } from "./lib/utils.js";
-import { useFormField as l } from "./form.js";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
-import { AnimatePresence as m, motion as h } from "framer-motion";
+import { tweens as o } from "./lib/motion.js";
+import { cn as s } from "./lib/utils.js";
+import { Spinner as c } from "./spinner.js";
+import { useMotion as l } from "../_chunks/motion-provider.js";
+import { useFormField as u } from "./form.js";
+import { Input as ee } from "./input.js";
+import * as d from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
+import { AnimatePresence as g, motion as _ } from "framer-motion";
 //#region src/ui/autocomplete.tsx
-var g = {
-	hidden: {},
-	visible: { transition: { staggerChildren: .03 } }
-}, _ = {
-	hidden: {
-		opacity: 0,
-		y: 4
-	},
-	visible: {
-		opacity: 1,
-		y: 0,
-		transition: o.snappy
-	}
-}, v = u.forwardRef(({ options: o, value: v, onValueChange: y, placeholder: b, emptyText: x = "No options", disabled: S, className: C, id: w, ...T }, E) => {
-	let D = u.useId(), O = w || D, k = `${O}-listbox`, A = `${O}-option`, [j, M] = u.useState(v?.label ?? ""), [N, P] = u.useState(!1), [F, I] = u.useState(-1), L = u.useRef(null), R = u.useRef(null), z = u.useRef(null), B = u.useRef(null), { refs: V, floatingStyles: H } = a({
-		open: N,
+function v({ label: e, query: t }) {
+	let n = t ? e.toLowerCase().indexOf(t.toLowerCase()) : -1;
+	return n === -1 ? /* @__PURE__ */ p(f, { children: e }) : /* @__PURE__ */ m(f, { children: [
+		e.slice(0, n),
+		/* @__PURE__ */ p("span", {
+			className: "font-semibold text-accent-11",
+			children: e.slice(n, n + t.length)
+		}),
+		e.slice(n + t.length)
+	] });
+}
+var y = d.forwardRef(({ options: f, value: y, defaultValue: b = null, onValueChange: x, placeholder: S, emptyText: C = "No options", disabled: w, size: T, state: E, isLoading: D = !1, loadingText: O = "Loading…", renderOption: k, className: A, id: j, ...M }, N) => {
+	let te = d.useId(), P = j || te, F = `${P}-listbox`, I = `${P}-option`, L = y !== void 0, [R, z] = d.useState(b), B = L ? y : R, [V, H] = d.useState(B?.label ?? ""), [U, W] = d.useState(!1), [G, K] = d.useState(-1), q = d.useRef(null), J = d.useRef(null), Y = d.useRef(null), { reducedMotion: X } = l(), { refs: Z, floatingStyles: ne } = a({
+		open: U,
 		placement: "bottom-start",
 		whileElementsMounted: e,
 		middleware: [
@@ -37,110 +38,114 @@ var g = {
 				});
 			} })
 		]
-	}), U = u.useCallback((e) => {
-		L.current = e, V.setReference(e), typeof E == "function" ? E(e) : E && (E.current = e);
-	}, [E, V]), W = u.useCallback((e) => {
-		R.current = e, B.current = e, V.setFloating(e);
-	}, [V]);
-	u.useEffect(() => {
-		M(v?.label ?? "");
-	}, [v]), u.useEffect(() => () => {}, []);
-	let G = u.useMemo(() => j ? o.filter((e) => e.label.toLowerCase().includes(j.toLowerCase())) : o, [o, j]), K = u.useCallback((e) => {
-		M(e.label), P(!1), I(-1), y?.(e);
-	}, [y]), q = u.useCallback((e) => {
-		if (!N) {
-			(e.key === "ArrowDown" || e.key === "Enter") && P(!0);
-			return;
-		}
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), I((e) => Math.min(e + 1, G.length - 1));
-				break;
-			case "ArrowUp":
-				e.preventDefault(), I((e) => Math.max(e - 1, 0));
-				break;
-			case "Home":
-				e.preventDefault(), I(0);
-				break;
-			case "End":
-				e.preventDefault(), I(G.length - 1);
-				break;
-			case "Enter":
-				e.preventDefault(), F >= 0 && G[F] && K(G[F]);
-				break;
-			case "Escape":
-				P(!1), I(-1);
-				break;
+	}), re = d.useCallback((e) => {
+		J.current = e, Z.setReference(e);
+	}, [Z]), ie = d.useCallback((e) => {
+		q.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
+	}, [N]), ae = d.useCallback((e) => {
+		Y.current = e, Z.setFloating(e);
+	}, [Z]);
+	d.useEffect(() => {
+		H(B?.label ?? "");
+	}, [B]);
+	let Q = d.useMemo(() => V ? f.filter((e) => e.label.toLowerCase().includes(V.toLowerCase())) : f, [f, V]), $ = d.useCallback((e) => {
+		H(e.label), W(!1), K(-1), L || z(e), x?.(e);
+	}, [L, x]), oe = d.useCallback((e) => {
+		if (!w) {
+			if (!U) {
+				(e.key === "ArrowDown" || e.key === "Enter") && W(!0);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), K((e) => Math.min(e + 1, Q.length - 1));
+					break;
+				case "ArrowUp":
+					e.preventDefault(), K((e) => Math.max(e - 1, 0));
+					break;
+				case "Home":
+					e.preventDefault(), K(0);
+					break;
+				case "End":
+					e.preventDefault(), K(Q.length - 1);
+					break;
+				case "Enter":
+					e.preventDefault(), G >= 0 && Q[G] && $(Q[G]);
+					break;
+				case "Escape":
+					W(!1), K(-1);
+					break;
+			}
 		}
 	}, [
-		N,
+		w,
+		U,
+		Q,
 		G,
-		F,
-		K
-	]), J = l(), Y = J.state === "error", X = J.helperTextId, Z = J.required, Q = F >= 0 ? `${A}-${F}` : void 0;
-	return /* @__PURE__ */ f("div", {
-		ref: z,
-		className: c("relative", C),
-		...T,
-		children: [/* @__PURE__ */ d("input", {
-			ref: U,
+		$
+	]), se = u(), ce = !!(j || se.inputId), le = G >= 0 ? `${I}-${G}` : void 0;
+	return /* @__PURE__ */ m("div", {
+		ref: re,
+		className: s("relative", A),
+		...M,
+		children: [/* @__PURE__ */ p(ee, {
+			ref: ie,
 			type: "text",
 			role: "combobox",
-			id: w ?? J.inputId,
-			"aria-expanded": N,
+			size: T,
+			state: E,
+			id: j,
+			value: V,
+			placeholder: S,
+			disabled: w,
+			"aria-expanded": U,
 			"aria-autocomplete": "list",
-			"aria-controls": N ? k : void 0,
-			"aria-activedescendant": Q,
-			"aria-invalid": Y || void 0,
-			"aria-describedby": X,
-			"aria-required": Z || void 0,
-			"aria-label": w || J.inputId ? void 0 : b,
-			value: j,
-			placeholder: b,
-			disabled: S,
-			className: c("flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-body-md text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]", "transition-colors duration-fast-01", S && "opacity-action-disabled cursor-not-allowed"),
+			"aria-controls": U ? F : void 0,
+			"aria-activedescendant": le,
+			"aria-label": ce ? void 0 : S,
+			endSection: D ? /* @__PURE__ */ p(c, { size: "sm" }) : void 0,
 			onChange: (e) => {
-				M(e.target.value), P(!0), I(-1);
+				H(e.target.value), W(!0), K(-1);
 			},
-			onFocus: () => P(!0),
+			onFocus: () => W(!0),
 			onBlur: (e) => {
 				let t = e.relatedTarget;
-				!z.current?.contains(t) && !B.current?.contains(t) && P(!1);
+				!J.current?.contains(t) && !Y.current?.contains(t) && W(!1);
 			},
-			onKeyDown: q
-		}), typeof document < "u" && p(/* @__PURE__ */ d(m, { children: N && /* @__PURE__ */ d(h.ul, {
-			id: k,
-			ref: W,
+			onKeyDown: oe
+		}), typeof document < "u" && h(/* @__PURE__ */ p(g, { children: U && /* @__PURE__ */ p(_.ul, {
+			id: F,
+			ref: ae,
 			role: "listbox",
-			initial: "hidden",
-			animate: "visible",
-			exit: "hidden",
-			variants: g,
-			style: H,
-			className: c("z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover"),
-			children: G.length === 0 ? /* @__PURE__ */ d(h.li, {
-				initial: { opacity: 0 },
-				animate: { opacity: 1 },
-				transition: s.fade,
+			initial: !X && { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: X ? { opacity: 1 } : { opacity: 0 },
+			transition: X ? { duration: 0 } : o.fade,
+			style: ne,
+			className: "z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover",
+			children: D ? /* @__PURE__ */ m("li", {
+				className: "flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
+				children: [/* @__PURE__ */ p(c, { size: "sm" }), O]
+			}) : Q.length === 0 ? /* @__PURE__ */ p("li", {
 				className: "px-ds-04 py-ds-03 text-body-md text-surface-fg-muted",
-				children: x
-			}) : G.map((e, t) => /* @__PURE__ */ d(h.li, {
-				id: `${A}-${t}`,
+				children: C
+			}) : Q.map((e, t) => /* @__PURE__ */ p("li", {
+				id: `${I}-${t}`,
 				role: "option",
-				"aria-selected": F === t,
-				variants: _,
-				className: c("cursor-pointer px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", F === t && "bg-accent-3", v?.value === e.value && "font-semibold"),
+				"aria-selected": G === t,
+				title: e.label,
+				className: s("cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01", G === t && "bg-accent-3", B?.value === e.value && "font-semibold"),
 				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => K(e),
-				onKeyDown: (t) => {
-					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), K(e));
-				},
-				onMouseEnter: () => I(t),
-				children: e.label
+				onClick: () => $(e),
+				onMouseEnter: () => K(t),
+				children: k ? k(e, V) : /* @__PURE__ */ p(v, {
+					label: e.label,
+					query: V
+				})
 			}, e.value))
 		}) }), document.body)]
 	});
 });
-v.displayName = "Autocomplete";
+y.displayName = "Autocomplete";
 //#endregion
-export { v as Autocomplete };
+export { y as Autocomplete };

package/dist/ui/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate,flip, offset, shift, size, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useFormField } from './form'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        size({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Home':\n            e.preventDefault()\n            setHighlightedIndex(0)\n            break\n          case 'End':\n            e.preventDefault()\n            setHighlightedIndex(filtered.length - 1)\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n          id={externalId ?? fieldCtx.inputId}\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          // Named by the associated <Label> (FormField) or an external label via id.\n          // Only when there's no association mechanism, fall back to placeholder.\n          aria-label={externalId || fieldCtx.inputId ? undefined : placeholder}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-body-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps }\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, flip, offset, shift, size as sizeMiddleware, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { useFormField } from './form'\nimport { Input, type InputProps } from './input'\nimport { tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\nexport type AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * A free-text input with a live-filtered dropdown, keyboard navigation, and\n * combobox ARIA. The field itself is the DS `Input`, so it inherits size,\n * error/state painting, read-only, hover, and FormField wiring.\n *\n * Free-text (no forced selection) — for enforced selection use `Combobox`.\n * `value`/`defaultValue` are a full `AutocompleteOption` (or null).\n */\nexport type AutocompleteProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  options: AutocompleteOption[]\n  /** Controlled selection. */\n  value?: AutocompleteOption | null\n  /** Initial selection for uncontrolled mode. */\n  defaultValue?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  /** Input size (forwarded to the composed `Input`). */\n  size?: InputProps['size']\n  /** Field state (forwarded to `Input`); overrides FormField auto-consumption. */\n  state?: InputProps['state']\n  /** Show a loading spinner + `loadingText` (async \"type to search\"). */\n  isLoading?: boolean\n  loadingText?: string\n  /** Custom option renderer. Receives the option and the current query. */\n  renderOption?: (option: AutocompleteOption, query: string) => React.ReactNode\n  className?: string\n  id?: string\n}\n\n/** Bold the matched substring inside an option label. */\nfunction HighlightMatch({ label, query }: { label: string; query: string }) {\n  const idx = query ? label.toLowerCase().indexOf(query.toLowerCase()) : -1\n  if (idx === -1) return <>{label}</>\n  return (\n    <>\n      {label.slice(0, idx)}\n      <span className=\"font-semibold text-accent-11\">{label.slice(idx, idx + query.length)}</span>\n      {label.slice(idx + query.length)}\n    </>\n  )\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      defaultValue = null,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      size,\n      state,\n      isLoading = false,\n      loadingText = 'Loading…',\n      renderOption,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    // Controlled / uncontrolled selection\n    const isControlled = value !== undefined\n    const [internalValue, setInternalValue] = React.useState<AutocompleteOption | null>(defaultValue)\n    const selected = isControlled ? value : internalValue\n\n    const [query, setQuery] = React.useState(selected?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n    const { reducedMotion } = useMotion()\n\n    // Floating UI — anchor the dropdown to the whole field (container width)\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        sizeMiddleware({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    const setContainer = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        containerRef.current = node\n        refs.setReference(node)\n      },\n      [refs],\n    )\n\n    const composedInputRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref],\n    )\n\n    const setFloating = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        floatingRef.current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when the selection changes externally\n    React.useEffect(() => {\n      setQuery(selected?.label ?? '')\n    }, [selected])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        if (!isControlled) setInternalValue(option)\n        onValueChange?.(option)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Home':\n            e.preventDefault()\n            setHighlightedIndex(0)\n            break\n          case 'End':\n            e.preventDefault()\n            setHighlightedIndex(filtered.length - 1)\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) handleSelect(filtered[highlightedIndex])\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [disabled, isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    // FormField wiring is auto-consumed by Input; only used here to decide the\n    // standalone accessible-name fallback + the combobox aria-controls id.\n    const fieldCtx = useFormField()\n    const hasFieldName = !!(externalId || fieldCtx.inputId)\n    const highlightedOptionId = highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={setContainer} className={cn('relative', className)} {...props}>\n        <Input\n          ref={composedInputRef}\n          type=\"text\"\n          role=\"combobox\"\n          size={size}\n          state={state}\n          id={externalId}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-label={hasFieldName ? undefined : placeholder}\n          endSection={isLoading ? <Spinner size=\"sm\" /> : undefined}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            const target = e.relatedTarget as Node | null\n            if (!containerRef.current?.contains(target) && !floatingRef.current?.contains(target)) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={setFloating}\n                  role=\"listbox\"\n                  initial={reducedMotion ? false : { opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={reducedMotion ? { opacity: 1 } : { opacity: 0 }}\n                  transition={reducedMotion ? { duration: 0 } : tweens.fade}\n                  style={floatingStyles}\n                  className=\"z-popover overflow-auto rounded-overlay bg-surface-overlay shadow-raised-hover\"\n                >\n                  {isLoading ? (\n                    <li className=\"flex items-center gap-ds-03 px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">\n                      <Spinner size=\"sm\" />\n                      {loadingText}\n                    </li>\n                  ) : filtered.length === 0 ? (\n                    <li className=\"px-ds-04 py-ds-03 text-body-md text-surface-fg-muted\">{emptyText}</li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- WAI-ARIA combobox: keyboard nav is on the input via aria-activedescendant; options are pointer affordances, not focusable tab stops\n                      <li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        title={option.label}\n                        className={cn(\n                          'cursor-pointer truncate px-ds-04 py-ds-03 text-body-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          selected?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {renderOption ? renderOption(option, query) : <HighlightMatch label={option.label} query={query} />}\n                      </li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete }\n"],"mappings":"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"}

package/dist/ui/button-group.js

@@ -49,6 +49,7 @@ function l(e, t) {
 			error: "bg-error-11/20",
 			success: "bg-success-11/20",
 			warning: "bg-warning-11/20",
+			info: "bg-info-11/20",
 			neutral: "bg-neutral-8/30"
 		};
 		return e[t ?? "accent"] ?? e.accent;
@@ -59,6 +60,7 @@ function l(e, t) {
 			error: "bg-error-5",
 			success: "bg-success-5",
 			warning: "bg-warning-5",
+			info: "bg-info-5",
 			neutral: "bg-neutral-4"
 		};
 		return e[t ?? "accent"] ?? e.accent;

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\nfunction getDividerColor(variant?: string, color?: string): string {\n  if (variant === 'solid') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n      warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  if (variant === 'soft') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-5', error: 'bg-error-5', success: 'bg-success-5',\n      warning: 'bg-warning-5', neutral: 'bg-neutral-4',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AA2BA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAI,MAAY,SAAS;EACvB,IAAM,IAA8B;GAClC,QAAQ;GAAmB,OAAO;GAAkB,SAAS;GAC7D,SAAS;GAAoB,SAAS;EACxC;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CACA,IAAI,MAAY,QAAQ;EACtB,IAAM,IAA8B;GAClC,QAAQ;GAAe,OAAO;GAAc,SAAS;GACrD,SAAS;GAAgB,SAAS;EACpC;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CAEA,OAAO;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAdK,CAcL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\nfunction getDividerColor(variant?: string, color?: string): string {\n  if (variant === 'solid') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n      warning: 'bg-warning-11/20', info: 'bg-info-11/20', neutral: 'bg-neutral-8/30',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  if (variant === 'soft') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-5', error: 'bg-error-5', success: 'bg-success-5',\n      warning: 'bg-warning-5', info: 'bg-info-5', neutral: 'bg-neutral-4',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AA2BA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAI,MAAY,SAAS;EACvB,IAAM,IAA8B;GAClC,QAAQ;GAAmB,OAAO;GAAkB,SAAS;GAC7D,SAAS;GAAoB,MAAM;GAAiB,SAAS;EAC/D;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CACA,IAAI,MAAY,QAAQ;EACtB,IAAM,IAA8B;GAClC,QAAQ;GAAe,OAAO;GAAc,SAAS;GACrD,SAAS;GAAgB,MAAM;GAAa,SAAS;EACvD;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CAEA,OAAO;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAdK,CAcL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}

package/dist/ui/button-processing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-processing.d.ts","sourceRoot":"","sources":["../../src/ui/button-processing.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9D,UAAU,sBAAsB;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,eAAe,CAAA;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAwBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,sBAAsB,qBA0GjF"}
+{"version":3,"file":"button-processing.d.ts","sourceRoot":"","sources":["../../src/ui/button-processing.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9D,UAAU,sBAAsB;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,eAAe,CAAA;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAyBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,sBAAsB,qBA0GjF"}

package/dist/ui/button-processing.js

@@ -9,6 +9,7 @@ var a = {
 	error: "var(--color-error-11)",
 	success: "var(--color-success-11)",
 	warning: "var(--color-warning-11)",
+	info: "var(--color-info-11)",
 	neutral: "var(--color-surface-fg)"
 }, o = {
 	ambient: 3,

package/dist/ui/button-processing.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-processing.js","names":[],"sources":["../../src/ui/button-processing.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { durations } from './lib/motion'\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport type ProcessingSpeed = 'ambient' | 'working' | 'urgent'\n\ninterface ProcessingOverlayProps {\n  active: boolean\n  speed: ProcessingSpeed\n  /** Resolved color name — maps to CSS token `--color-{name}-9` */\n  color: string\n}\n\n// ── Color mapping ──────────────────────────────────────────────────\n\n// Use text-level color tokens (step 11) so ants match the button's text color.\n// This ensures visibility on all variants — especially neutral where step-9 is too close to the soft bg.\nconst COLOR_MAP: Record<string, string> = {\n  accent:  'var(--color-accent-11)',\n  error:   'var(--color-error-11)',\n  success: 'var(--color-success-11)',\n  warning: 'var(--color-warning-11)',\n  neutral: 'var(--color-surface-fg)',\n}\n\n// ── Speed → duration (seconds) ─────────────────────────────────────\n\nconst SPEED_SECONDS: Record<ProcessingSpeed, number> = {\n  ambient: 3,\n  working: 2,\n  urgent:  1,\n}\n\n// ── Component ──────────────────────────────────────────────────────\n\n/**\n * Internal overlay component for button processing state.\n * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).\n * Not exported from the barrel — used only by Button.\n */\nexport function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps) {\n  const solidColor = COLOR_MAP[color] ?? COLOR_MAP.accent\n  const prefersReduced = useReducedMotion()\n  const duration = SPEED_SECONDS[speed]\n  const svgRef = React.useRef<SVGRectElement>(null)\n  const [borderRadius, setBorderRadius] = React.useState(8)\n  const [dashInfo, setDashInfo] = React.useState({ array: '8 6', cycle: 14 })\n  // Explicit pixel dimensions of the button — drives BOTH the SVG box and the\n  // rect geometry. Relying on CSS `w-full`/`calc(100% - 2px)` made the ants'\n  // outline depend on the wrapper's rendered size, which can drift from the\n  // button's own size during width transitions — leaving a visible gap\n  // between the button edge and the ants.\n  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null)\n\n  // Read the button's dimensions + border-radius, compute dash pattern\n  React.useEffect(() => {\n    const wrapper = svgRef.current?.closest('span')\n    const btnEl = wrapper?.previousElementSibling as HTMLElement | null\n    if (!btnEl) return\n\n    const measure = () => {\n      const style = getComputedStyle(btnEl)\n      const rawR = parseFloat(style.borderRadius) || 8\n      const btnW = btnEl.offsetWidth\n      const btnH = btnEl.offsetHeight\n      if (btnW === 0 || btnH === 0) return\n      // Inset 1px so the 2px stroke (centered on the edge) lands exactly on\n      // the button's visual border instead of outside it.\n      const w = btnW - 2\n      const h = btnH - 2\n      // Cap radius at half the shorter dimension (pill buttons report 9999px)\n      const r = Math.min(rawR, h / 2, w / 2)\n      setBorderRadius(r)\n      setSize({ w: btnW, h: btnH })\n\n      // Perimeter of a rounded rect:\n      // 4 straight edges + 4 quarter-circle arcs (= one full circle of radius r)\n      const perimeter = 2 * (w - 2 * r) + 2 * (h - 2 * r) + 2 * Math.PI * r\n\n      // Target: 8px dash, 6px gap — adjust gap so dashes fit evenly (no seam)\n      const dashPx = 8\n      const gapPx = 6\n      const approxCycle = dashPx + gapPx\n      const count = Math.round(perimeter / approxCycle)\n      const adjustedGap = (perimeter - count * dashPx) / count\n      const finalGap = Math.max(2, adjustedGap)\n      setDashInfo({ array: `${dashPx} ${finalGap.toFixed(1)}`, cycle: dashPx + finalGap })\n    }\n\n    measure()\n    // Keep the ants glued to the button when it resizes (text change,\n    // async-feedback icon swap, layout animation settling).\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null\n    ro?.observe(btnEl)\n    return () => ro?.disconnect()\n  }, [active])\n\n  // Render the overlay even before the first measurement settles — the\n  // aria-hidden anchor must exist for discoverability, and the SVG harmlessly\n  // renders at 0x0 until measurement lands a real size (one animation frame).\n  const w = size?.w ?? 0\n  const h = size?.h ?? 0\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.span\n          key=\"processing-ants\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.moderate01b }}\n          aria-hidden=\"true\"\n          className=\"absolute top-0 left-0 pointer-events-none\"\n          style={{ width: w, height: h }}\n        >\n          <svg\n            width={w}\n            height={h}\n            style={{ overflow: 'visible', display: 'block' }}\n          >\n            <motion.rect\n              ref={svgRef}\n              x={1}\n              y={1}\n              width={Math.max(0, w - 2)}\n              height={Math.max(0, h - 2)}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"none\"\n              stroke={solidColor}\n              strokeWidth={2}\n              strokeDasharray={dashInfo.array}\n              style={{ transition: 'stroke 0.3s ease' }}\n              animate={prefersReduced ? {} : { strokeDashoffset: [0, -dashInfo.cycle] }}\n              transition={prefersReduced ? {} : {\n                duration,\n                ease: 'linear',\n                repeat: Infinity,\n              }}\n            />\n          </svg>\n        </motion.span>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── Reduced motion hook ────────────────────────────────────────────\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  })\n\n  React.useEffect(() => {\n    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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"}
+{"version":3,"file":"button-processing.js","names":[],"sources":["../../src/ui/button-processing.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { durations } from './lib/motion'\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport type ProcessingSpeed = 'ambient' | 'working' | 'urgent'\n\ninterface ProcessingOverlayProps {\n  active: boolean\n  speed: ProcessingSpeed\n  /** Resolved color name — maps to CSS token `--color-{name}-9` */\n  color: string\n}\n\n// ── Color mapping ──────────────────────────────────────────────────\n\n// Use text-level color tokens (step 11) so ants match the button's text color.\n// This ensures visibility on all variants — especially neutral where step-9 is too close to the soft bg.\nconst COLOR_MAP: Record<string, string> = {\n  accent:  'var(--color-accent-11)',\n  error:   'var(--color-error-11)',\n  success: 'var(--color-success-11)',\n  warning: 'var(--color-warning-11)',\n  info:    'var(--color-info-11)',\n  neutral: 'var(--color-surface-fg)',\n}\n\n// ── Speed → duration (seconds) ─────────────────────────────────────\n\nconst SPEED_SECONDS: Record<ProcessingSpeed, number> = {\n  ambient: 3,\n  working: 2,\n  urgent:  1,\n}\n\n// ── Component ──────────────────────────────────────────────────────\n\n/**\n * Internal overlay component for button processing state.\n * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).\n * Not exported from the barrel — used only by Button.\n */\nexport function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps) {\n  const solidColor = COLOR_MAP[color] ?? COLOR_MAP.accent\n  const prefersReduced = useReducedMotion()\n  const duration = SPEED_SECONDS[speed]\n  const svgRef = React.useRef<SVGRectElement>(null)\n  const [borderRadius, setBorderRadius] = React.useState(8)\n  const [dashInfo, setDashInfo] = React.useState({ array: '8 6', cycle: 14 })\n  // Explicit pixel dimensions of the button — drives BOTH the SVG box and the\n  // rect geometry. Relying on CSS `w-full`/`calc(100% - 2px)` made the ants'\n  // outline depend on the wrapper's rendered size, which can drift from the\n  // button's own size during width transitions — leaving a visible gap\n  // between the button edge and the ants.\n  const [size, setSize] = React.useState<{ w: number; h: number } | null>(null)\n\n  // Read the button's dimensions + border-radius, compute dash pattern\n  React.useEffect(() => {\n    const wrapper = svgRef.current?.closest('span')\n    const btnEl = wrapper?.previousElementSibling as HTMLElement | null\n    if (!btnEl) return\n\n    const measure = () => {\n      const style = getComputedStyle(btnEl)\n      const rawR = parseFloat(style.borderRadius) || 8\n      const btnW = btnEl.offsetWidth\n      const btnH = btnEl.offsetHeight\n      if (btnW === 0 || btnH === 0) return\n      // Inset 1px so the 2px stroke (centered on the edge) lands exactly on\n      // the button's visual border instead of outside it.\n      const w = btnW - 2\n      const h = btnH - 2\n      // Cap radius at half the shorter dimension (pill buttons report 9999px)\n      const r = Math.min(rawR, h / 2, w / 2)\n      setBorderRadius(r)\n      setSize({ w: btnW, h: btnH })\n\n      // Perimeter of a rounded rect:\n      // 4 straight edges + 4 quarter-circle arcs (= one full circle of radius r)\n      const perimeter = 2 * (w - 2 * r) + 2 * (h - 2 * r) + 2 * Math.PI * r\n\n      // Target: 8px dash, 6px gap — adjust gap so dashes fit evenly (no seam)\n      const dashPx = 8\n      const gapPx = 6\n      const approxCycle = dashPx + gapPx\n      const count = Math.round(perimeter / approxCycle)\n      const adjustedGap = (perimeter - count * dashPx) / count\n      const finalGap = Math.max(2, adjustedGap)\n      setDashInfo({ array: `${dashPx} ${finalGap.toFixed(1)}`, cycle: dashPx + finalGap })\n    }\n\n    measure()\n    // Keep the ants glued to the button when it resizes (text change,\n    // async-feedback icon swap, layout animation settling).\n    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null\n    ro?.observe(btnEl)\n    return () => ro?.disconnect()\n  }, [active])\n\n  // Render the overlay even before the first measurement settles — the\n  // aria-hidden anchor must exist for discoverability, and the SVG harmlessly\n  // renders at 0x0 until measurement lands a real size (one animation frame).\n  const w = size?.w ?? 0\n  const h = size?.h ?? 0\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.span\n          key=\"processing-ants\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: durations.moderate01b }}\n          aria-hidden=\"true\"\n          className=\"absolute top-0 left-0 pointer-events-none\"\n          style={{ width: w, height: h }}\n        >\n          <svg\n            width={w}\n            height={h}\n            style={{ overflow: 'visible', display: 'block' }}\n          >\n            <motion.rect\n              ref={svgRef}\n              x={1}\n              y={1}\n              width={Math.max(0, w - 2)}\n              height={Math.max(0, h - 2)}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"none\"\n              stroke={solidColor}\n              strokeWidth={2}\n              strokeDasharray={dashInfo.array}\n              style={{ transition: 'stroke 0.3s ease' }}\n              animate={prefersReduced ? {} : { strokeDashoffset: [0, -dashInfo.cycle] }}\n              transition={prefersReduced ? {} : {\n                duration,\n                ease: 'linear',\n                repeat: Infinity,\n              }}\n            />\n          </svg>\n        </motion.span>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── Reduced motion hook ────────────────────────────────────────────\n\nfunction useReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  })\n\n  React.useEffect(() => {\n    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [])\n\n  return reduced\n}\n"],"mappings":"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"}

package/dist/ui/button.d.ts

@@ -4,7 +4,7 @@ import { IconInput } from './lib/icon-input';
 import * as React from 'react';
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "solid" | "soft" | "ghost" | null | undefined;
-    color?: "accent" | "success" | "error" | "warning" | "neutral" | null | undefined;
+    color?: "accent" | "success" | "error" | "info" | "warning" | "neutral" | null | undefined;
     weight?: "normal" | "semibold" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "icon" | "compact-xs" | "compact-sm" | "compact-md" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -16,7 +16,7 @@ export declare const buttonVariants: (props?: ({
  * - `variant` controls **visual style**: `"solid"` (default, filled) | `"soft"` (tinted bg) |
  *   `"outline"` (bordered) | `"ghost"` (transparent, for toolbars) | `"link"` (underline, inline)
  * - `color` controls **semantic intent**: `"accent"` (default, brand) | `"error"` (destructive) |
- *   `"success"` | `"warning"` | `"neutral"` (subdued)
+ *   `"success"` | `"warning"` | `"info"` | `"neutral"` (subdued)
  *
  * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;
  * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;
@@ -92,7 +92,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
      */
     processing?: boolean | 'ambient' | 'working' | 'urgent';
     /** Override processing animation color. Defaults to button's own color. */
-    processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral';
+    processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'info' | 'neutral';
     /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */
     processingDisabled?: boolean;
 }

package/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAiF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IAExE,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAgSX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAuF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEjF,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAgSX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}