@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/tag-color-picker.d.ts

@@ -1,3 +1,4 @@
+import { type AriaAttributes } from "react";
 import { type TagColor } from "./tag-badge.js";
 export interface TagColorPickerProps {
     /** Accessible group name. */
@@ -14,7 +15,13 @@ export interface TagColorPickerProps {
     labels?: Partial<Record<TagColor, string>>;
     /** Disable the picker. @default false */
     disabled?: boolean;
+    /** Forwarded to the radio group so Field and Label can own it. */
+    id?: string;
+    /** Forwarded to the radio group; Field sets it while the value is invalid. */
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    /** Forwarded to the radio group; Field points it at the hint or error. */
+    "aria-describedby"?: string;
     /** Additional root classes. */
     className?: string;
 }
-export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, className, }: TagColorPickerProps): import("react").JSX.Element;
+export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, id, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, }: TagColorPickerProps): import("react").JSX.Element;

package/dist/components/tag-color-picker.js

@@ -1,38 +1,46 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
-import { ToggleGroup as n, ToggleGroupItem as r } from "./toggle-group.js";
-import { TAG_COLORS as i } from "./tag-badge.js";
-import { useState as a } from "react";
-import { Check as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { FOCUS_INSET as n } from "./overlay.js";
+import { TAG_COLORS as r } from "./tag-badge.js";
+import { useState as i } from "react";
+import { Check as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-radio-group";
 //#region src/components/tag-color-picker.tsx
-var l = Object.keys(i);
-function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, colors: m = l, labels: h, disabled: g = !1, className: _ }) {
-	let [v, y] = a(f), b = d ?? v;
-	return /* @__PURE__ */ s(n, {
-		type: "single",
-		value: b,
+var l = Object.keys(r);
+function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, colors: m = l, labels: h, disabled: g = !1, id: _, "aria-invalid": v, "aria-describedby": y, className: b }) {
+	let [x, S] = i(f), C = d ?? x;
+	return /* @__PURE__ */ o(c.Root, {
+		value: C,
+		id: _,
 		"aria-label": u,
+		"aria-invalid": v,
+		"aria-describedby": y,
 		disabled: g,
-		className: e(t, "flex h-auto flex-wrap justify-start gap-2 rounded-basalt-lg p-1", _),
+		className: e(t, "grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg", b),
 		onValueChange: (e) => {
-			if (!e) return;
 			let t = e;
-			d === void 0 && y(t), p?.(t);
+			d === void 0 && S(t), p?.(t);
 		},
-		children: m.map((t) => /* @__PURE__ */ c(r, {
+		children: m.map((t) => /* @__PURE__ */ s(c.Item, {
 			value: t,
-			"aria-label": h?.[t] ?? i[t].label,
-			className: "h-auto min-w-16 flex-col gap-1.5 rounded-basalt-md px-2 py-2",
-			children: [/* @__PURE__ */ s("span", {
-				"aria-hidden": "true",
-				className: e("flex size-7 items-center justify-center rounded-full border", i[t].className),
-				children: b === t && /* @__PURE__ */ s(o, { className: "size-4" })
-			}), /* @__PURE__ */ s("span", {
-				className: "text-xs",
-				children: h?.[t] ?? i[t].label
-			})]
+			"aria-label": h?.[t] ?? r[t].label,
+			className: e("group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", n, "data-[state=checked]:focus-visible:ring-basalt-primary-foreground"),
+			children: [
+				/* @__PURE__ */ o("span", {
+					"aria-hidden": "true",
+					className: e("size-basalt-7 shrink-0 rounded-basalt-md border", r[t].className)
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "min-w-0 flex-1 break-words text-basalt-sm font-medium",
+					children: h?.[t] ?? r[t].label
+				}),
+				/* @__PURE__ */ o(a, {
+					"aria-hidden": "true",
+					className: "size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100"
+				})
+			]
 		}, t))
 	});
 }

package/dist/components/tag-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-color-picker.js","names":["ALL_COLORS","TAG_COLORS","TagColorPicker","localValue","setLocalValue","useState","defaultValue","selected","value","ToggleGroup","label","cn","BASALT_UI_CLASS","className","next","color","onValueChange","colors","ToggleGroupItem","labels","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<ToggleGroup\n\t\t\ttype=\"single\"\n\t\t\tvalue={selected}\n\t\t\taria-label={label}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-auto flex-wrap justify-start gap-2 rounded-basalt-lg p-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tif (!next) return;\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<ToggleGroupItem\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName=\"h-auto min-w-16 flex-col gap-1.5 rounded-basalt-md px-2 py-2\"\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex size-7 items-center justify-center rounded-full border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selected === color && <Check className=\"size-4\" />}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-xs\">{labels?.[color] ?? TAG_COLORS[color].label}</span>\n\t\t\t\t</ToggleGroupItem>\n\t\t\t))}\n\t\t</ToggleGroup>\n\t);\n}\n"],"mappings":";;;;;;;;;AAyBA,IAAMA,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,gBACuB;CACvB,IAAM,CAACG,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACM,GAAD;EACC,MAAK;EACL,OAAOF;EACP,cAAYG;EACF;EACV,WAAWC,EACVC,GACA,mEACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAI,CAACC,GAAM;GACX,IAAMC,IAAQD;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcW,CAAK,GAC5CC,IAAgBD,CAAK;EACtB;EAEC,UAAAE,EAAO,KAAK,MACZ,kBAACC,GAAD;GAEC,OAAOH;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAU;GAJX,UAAA,CAMC,kBAAC,QAAD;IACC,eAAY;IACZ,WAAWJ,EACV,+DACAV,EAAWc,EAAM,CAAC,SACnB;IAEC,UAAAR,MAAaQ,KAAS,kBAACK,GAAD,EAAO,WAAU,SAAU,CAAA;GAC7C,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAAD,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GAAY,CAAA,CAC5D;EAfX,GAAAA,CAeW,CACjB;CACW,CAAA;AAEf"}
+{"version":3,"file":"tag-color-picker.js","names":["RadioGroupPrimitive","ALL_COLORS","TAG_COLORS","TagColorPicker","ariaInvalid","describedBy","localValue","setLocalValue","useState","defaultValue","selected","value","label","cn","BASALT_UI_CLASS","className","color","next","onValueChange","colors","labels","FOCUS_INSET","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Check } from \"lucide-react\";\nimport { type AriaAttributes, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_INSET } from \"./overlay\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Forwarded to the radio group so Field and Label can own it. */\n\tid?: string;\n\t/** Forwarded to the radio group; Field sets it while the value is invalid. */\n\t\"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n\t/** Forwarded to the radio group; Field points it at the hint or error. */\n\t\"aria-describedby\"?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tid,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-describedby\": describedBy,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tvalue={selected}\n\t\t\tid={id}\n\t\t\taria-label={label}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={describedBy}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<RadioGroupPrimitive.Item\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Accent choice grid: the selected tile owns the primary fill and its\n\t\t\t\t\t\t// contrast-corrected foreground, not a control fill inside a frame.\n\t\t\t\t\t\t\"group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t\t\"data-[state=checked]:focus-visible:ring-basalt-primary-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"size-basalt-7 shrink-0 rounded-basalt-md border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words text-basalt-sm font-medium\">\n\t\t\t\t\t\t{labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100\"\n\t\t\t\t\t/>\n\t\t\t\t</RadioGroupPrimitive.Item>\n\t\t\t))}\n\t\t</RadioGroupPrimitive.Root>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMC,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,OACA,gBAAgBG,GAChB,oBAAoBC,GACpB,gBACuB;CACvB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACN,EAAoB,MAArB;EACC,OAAOU;EACH;EACJ,cAAYE;EACZ,gBAAcR;EACd,oBAAkBC;EACR;EACV,WAAWQ,EACVC,GACA,6GACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAMC,IAAQC;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcS,CAAK,GAC5CE,IAAgBF,CAAK;EACtB;EAEC,UAAAG,EAAO,KAAK,MACZ,kBAACnB,EAAoB,MAArB;GAEC,OAAOgB;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAWH,EAGV,+SACAQ,GACA,mEACD;GAVD,UAAA;IAYC,kBAAC,QAAD;KACC,eAAY;KACZ,WAAWR,EACV,mDACAX,EAAWc,EAAM,CAAC,SACnB;IACA,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;IACjC,CAAA;IACN,kBAACM,GAAD;KACC,eAAY;KACZ,WAAU;IACV,CAAA;GACwB;EAzBpB,GAAAN,CAyBoB,CAC1B;CACwB,CAAA;AAE5B"}

package/dist/components/text.js

@@ -7,11 +7,11 @@ import { cva as r } from "class-variance-authority";
 var i = r("text-basalt-foreground", {
 	variants: {
 		size: {
-			xs: "text-xs",
-			sm: "text-sm",
-			md: "text-sm leading-6",
-			lg: "text-base",
-			xl: "text-lg"
+			xs: "text-basalt-sm",
+			sm: "text-basalt-base",
+			md: "text-basalt-base leading-[var(--basalt-line-relaxed)]",
+			lg: "text-basalt-lg",
+			xl: "text-basalt-xl"
 		},
 		tone: {
 			default: "text-basalt-foreground",

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["React","textVariants","cva","defaultElement","variant","defaultSize","Text","props","Component","as","cn","BASALT_UI_CLASS","size","bold","truncate","className"],"sources":["../../src/components/text.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TextVariant = \"body\" | \"heading\" | \"mono\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextTone = \"default\" | \"muted\";\nexport type TextElement =\n\t| \"h1\"\n\t| \"h2\"\n\t| \"h3\"\n\t| \"h4\"\n\t| \"h5\"\n\t| \"h6\"\n\t| \"p\"\n\t| \"span\"\n\t| \"label\"\n\t| \"dt\"\n\t| \"dd\"\n\t| \"li\"\n\t| \"figcaption\"\n\t| \"legend\"\n\t| \"pre\"\n\t| \"code\"\n\t| \"em\"\n\t| \"strong\"\n\t| \"small\"\n\t| \"abbr\"\n\t| \"time\";\n\nconst textVariants = cva(\"text-basalt-foreground\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-xs\",\n\t\t\tsm: \"text-sm\",\n\t\t\tmd: \"text-sm leading-6\",\n\t\t\tlg: \"text-base\",\n\t\t\txl: \"text-lg\",\n\t\t},\n\t\ttone: {\n\t\t\tdefault: \"text-basalt-foreground\",\n\t\t\tmuted: \"text-basalt-muted-foreground\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t\ttone: \"default\",\n\t},\n});\n\nexport interface TextProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * Visual role. Does not infer document outline.\n\t * @default \"body\"\n\t */\n\tvariant?: TextVariant;\n\t/** Type scale. Defaults by variant: body md, heading lg, mono sm. */\n\tsize?: TextSize;\n\t/**\n\t * Foreground tone.\n\t * @default \"default\"\n\t */\n\ttone?: TextTone;\n\t/** Rendered HTML element. Defaults by variant: body p, heading/mono span. */\n\tas?: TextElement;\n\t/**\n\t * Apply semibold weight.\n\t * @default false\n\t */\n\tbold?: boolean;\n\t/**\n\t * Ellipsize overflow on one line.\n\t * @default false\n\t */\n\ttruncate?: boolean;\n}\n\nfunction defaultElement(variant: TextVariant): TextElement {\n\treturn variant === \"body\" ? \"p\" : \"span\";\n}\n\nfunction defaultSize(variant: TextVariant): TextSize {\n\tif (variant === \"heading\") {\n\t\treturn \"lg\";\n\t}\n\tif (variant === \"mono\") {\n\t\treturn \"sm\";\n\t}\n\treturn \"md\";\n}\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n\t(\n\t\t{\n\t\t\tas,\n\t\t\tbold = false,\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\ttone = \"default\",\n\t\t\ttruncate = false,\n\t\t\tvariant = \"body\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = as ?? defaultElement(variant);\n\t\treturn React.createElement(Component, {\n\t\t\t...props,\n\t\t\tref,\n\t\t\tclassName: cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\ttextVariants({ size: size ?? defaultSize(variant), tone }),\n\t\t\t\tvariant === \"heading\" && \"font-semibold\",\n\t\t\t\tvariant === \"mono\" && \"font-mono\",\n\t\t\t\tbold && \"font-semibold\",\n\t\t\t\ttruncate && \"min-w-0 truncate\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t});\n\t},\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;AA+BA,IAAMC,IAAeC,EAAI,0BAA0B;CAClD,UAAU;EACT,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;EACA,MAAM;GACL,SAAS;GACT,OAAO;EACR;CACD;CACA,iBAAiB;EAChB,MAAM;EACN,MAAM;CACP;AACD,CAAC;AA6BD,SAASC,EAAe,GAAmC;CAC1D,OAAOC,MAAY,SAAS,MAAM;AACnC;AAEA,SAASC,EAAY,GAAgC;CAOpD,OANID,MAAY,YACR,OAEJA,MAAY,SACR,OAED;AACR;AAEA,IAAaE,IAAON,EAAM,YAExB,EACC,OACA,UAAO,IACP,cACA,SACA,UAAO,WACP,cAAW,IACX,aAAU,QACV,GAAGO,KAEJ,MACI;CACJ,IAAMC,IAAYC,KAAMN,EAAeC,CAAO;CAC9C,OAAOJ,EAAM,cAAcQ,GAAW;EACrC,GAAGD;EACH;EACA,WAAWG,EACVC,GACAV,EAAa;GAAE,MAAMW,KAAQP,EAAYD,CAAO;GAAG;EAAK,CAAC,GACzDA,MAAY,aAAa,iBACzBA,MAAY,UAAU,aACtBS,KAAQ,iBACRC,KAAY,oBACZC,CACD;CACD,CAAC;AACF,CACD;AACA,EAAK,cAAc"}
+{"version":3,"file":"text.js","names":["React","textVariants","cva","defaultElement","variant","defaultSize","Text","props","Component","as","cn","BASALT_UI_CLASS","size","bold","truncate","className"],"sources":["../../src/components/text.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TextVariant = \"body\" | \"heading\" | \"mono\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextTone = \"default\" | \"muted\";\nexport type TextElement =\n\t| \"h1\"\n\t| \"h2\"\n\t| \"h3\"\n\t| \"h4\"\n\t| \"h5\"\n\t| \"h6\"\n\t| \"p\"\n\t| \"span\"\n\t| \"label\"\n\t| \"dt\"\n\t| \"dd\"\n\t| \"li\"\n\t| \"figcaption\"\n\t| \"legend\"\n\t| \"pre\"\n\t| \"code\"\n\t| \"em\"\n\t| \"strong\"\n\t| \"small\"\n\t| \"abbr\"\n\t| \"time\";\n\nconst textVariants = cva(\"text-basalt-foreground\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-basalt-sm\",\n\t\t\tsm: \"text-basalt-base\",\n\t\t\tmd: \"text-basalt-base leading-[var(--basalt-line-relaxed)]\",\n\t\t\tlg: \"text-basalt-lg\",\n\t\t\txl: \"text-basalt-xl\",\n\t\t},\n\t\ttone: {\n\t\t\tdefault: \"text-basalt-foreground\",\n\t\t\tmuted: \"text-basalt-muted-foreground\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t\ttone: \"default\",\n\t},\n});\n\nexport interface TextProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * Visual role. Does not infer document outline.\n\t * @default \"body\"\n\t */\n\tvariant?: TextVariant;\n\t/** Type scale. Defaults by variant: body md, heading lg, mono sm. */\n\tsize?: TextSize;\n\t/**\n\t * Foreground tone.\n\t * @default \"default\"\n\t */\n\ttone?: TextTone;\n\t/** Rendered HTML element. Defaults by variant: body p, heading/mono span. */\n\tas?: TextElement;\n\t/**\n\t * Apply semibold weight.\n\t * @default false\n\t */\n\tbold?: boolean;\n\t/**\n\t * Ellipsize overflow on one line.\n\t * @default false\n\t */\n\ttruncate?: boolean;\n}\n\nfunction defaultElement(variant: TextVariant): TextElement {\n\treturn variant === \"body\" ? \"p\" : \"span\";\n}\n\nfunction defaultSize(variant: TextVariant): TextSize {\n\tif (variant === \"heading\") {\n\t\treturn \"lg\";\n\t}\n\tif (variant === \"mono\") {\n\t\treturn \"sm\";\n\t}\n\treturn \"md\";\n}\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n\t(\n\t\t{\n\t\t\tas,\n\t\t\tbold = false,\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\ttone = \"default\",\n\t\t\ttruncate = false,\n\t\t\tvariant = \"body\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = as ?? defaultElement(variant);\n\t\treturn React.createElement(Component, {\n\t\t\t...props,\n\t\t\tref,\n\t\t\tclassName: cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\ttextVariants({ size: size ?? defaultSize(variant), tone }),\n\t\t\t\tvariant === \"heading\" && \"font-semibold\",\n\t\t\t\tvariant === \"mono\" && \"font-mono\",\n\t\t\t\tbold && \"font-semibold\",\n\t\t\t\ttruncate && \"min-w-0 truncate\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t});\n\t},\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;AA+BA,IAAMC,IAAeC,EAAI,0BAA0B;CAClD,UAAU;EACT,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;EACA,MAAM;GACL,SAAS;GACT,OAAO;EACR;CACD;CACA,iBAAiB;EAChB,MAAM;EACN,MAAM;CACP;AACD,CAAC;AA6BD,SAASC,EAAe,GAAmC;CAC1D,OAAOC,MAAY,SAAS,MAAM;AACnC;AAEA,SAASC,EAAY,GAAgC;CAOpD,OANID,MAAY,YACR,OAEJA,MAAY,SACR,OAED;AACR;AAEA,IAAaE,IAAON,EAAM,YAExB,EACC,OACA,UAAO,IACP,cACA,SACA,UAAO,WACP,cAAW,IACX,aAAU,QACV,GAAGO,KAEJ,MACI;CACJ,IAAMC,IAAYC,KAAMN,EAAeC,CAAO;CAC9C,OAAOJ,EAAM,cAAcQ,GAAW;EACrC,GAAGD;EACH;EACA,WAAWG,EACVC,GACAV,EAAa;GAAE,MAAMW,KAAQP,EAAYD,CAAO;GAAG;EAAK,CAAC,GACzDA,MAAY,aAAa,iBACzBA,MAAY,UAAU,aACtBS,KAAQ,iBACRC,KAAY,oBACZC,CACD;CACD,CAAC;AACF,CACD;AACA,EAAK,cAAc"}

package/dist/components/theme-toggle.js

@@ -5,7 +5,7 @@ import { Monitor as n, Moon as r, Sun as i } from "lucide-react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/theme-toggle.tsx
 var o = {
-	className: "h-4 w-4",
+	className: "h-basalt-4 w-basalt-4",
 	"aria-hidden": !0,
 	strokeWidth: 1.5
 };

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

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.js","names":["ICON_PROPS","ThemeToggle","ariaLabel","useTheme","Button","setTheme","theme","jsx","Monitor","Moon","Sun"],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"../providers/theme\";\nimport { Button } from \"./button\";\n\nconst ICON_PROPS = { className: \"h-4 w-4\", \"aria-hidden\": true as const, strokeWidth: 1.5 };\n\nexport interface ThemeToggleProps {\n\t/**\n\t * Accessible name for the toggle.\n\t */\n\t\"aria-label\": string;\n}\n\nexport function ThemeToggle({ \"aria-label\": ariaLabel }: ThemeToggleProps) {\n\tconst { theme, setTheme } = useTheme();\n\tconst cycle = () => {\n\t\tif (theme === \"system\") setTheme(\"light\");\n\t\telse if (theme === \"light\") setTheme(\"dark\");\n\t\telse setTheme(\"system\");\n\t};\n\treturn (\n\t\t<Button type=\"button\" variant=\"ghost\" size=\"icon\" onClick={cycle} aria-label={ariaLabel}>\n\t\t\t{theme === \"system\" ? (\n\t\t\t\t<Monitor {...ICON_PROPS} />\n\t\t\t) : theme === \"dark\" ? (\n\t\t\t\t<Moon {...ICON_PROPS} />\n\t\t\t) : (\n\t\t\t\t<Sun {...ICON_PROPS} />\n\t\t\t)}\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;AAIA,IAAMA,IAAa;CAAE,WAAW;CAAW,eAAe;CAAe,aAAa;AAAI;AAS1F,SAAgBC,EAAY,EAAE,cAAcC,KAA+B;CAC1E,IAAM,EAAE,UAAO,gBAAaC,EAAS;CAMrC,OACC,kBAACC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAQ,MAAK;EAAO,eAN/B;GACnB,AAAwBC,EAApBC,MAAU,WAAmB,UACxBA,MAAU,UAAkB,SACvB,QAAQ;EACvB;EAEmE,cAAYJ;EAC5E,UACAK,EADAD,MAAU,WACTE,IACEF,MAAU,SACZG,IAEAC,GAJD,EAAS,GAAIV,EAAa,CAIJ;CAEhB,CAAA;AAEV"}
+{"version":3,"file":"theme-toggle.js","names":["ICON_PROPS","ThemeToggle","ariaLabel","useTheme","Button","setTheme","theme","jsx","Monitor","Moon","Sun"],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"../providers/theme\";\nimport { Button } from \"./button\";\n\nconst ICON_PROPS = {\n\tclassName: \"h-basalt-4 w-basalt-4\",\n\t\"aria-hidden\": true as const,\n\tstrokeWidth: 1.5,\n};\n\nexport interface ThemeToggleProps {\n\t/**\n\t * Accessible name for the toggle.\n\t */\n\t\"aria-label\": string;\n}\n\nexport function ThemeToggle({ \"aria-label\": ariaLabel }: ThemeToggleProps) {\n\tconst { theme, setTheme } = useTheme();\n\tconst cycle = () => {\n\t\tif (theme === \"system\") setTheme(\"light\");\n\t\telse if (theme === \"light\") setTheme(\"dark\");\n\t\telse setTheme(\"system\");\n\t};\n\treturn (\n\t\t<Button type=\"button\" variant=\"ghost\" size=\"icon\" onClick={cycle} aria-label={ariaLabel}>\n\t\t\t{theme === \"system\" ? (\n\t\t\t\t<Monitor {...ICON_PROPS} />\n\t\t\t) : theme === \"dark\" ? (\n\t\t\t\t<Moon {...ICON_PROPS} />\n\t\t\t) : (\n\t\t\t\t<Sun {...ICON_PROPS} />\n\t\t\t)}\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;AAIA,IAAMA,IAAa;CAClB,WAAW;CACX,eAAe;CACf,aAAa;AACd;AASA,SAAgBC,EAAY,EAAE,cAAcC,KAA+B;CAC1E,IAAM,EAAE,UAAO,gBAAaC,EAAS;CAMrC,OACC,kBAACC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAQ,MAAK;EAAO,eAN/B;GACnB,AAAwBC,EAApBC,MAAU,WAAmB,UACxBA,MAAU,UAAkB,SACvB,QAAQ;EACvB;EAEmE,cAAYJ;EAC5E,UACAK,EADAD,MAAU,WACTE,IACEF,MAAU,SACZG,IAEAC,GAJD,EAAS,GAAIV,EAAa,CAIJ;CAEhB,CAAA;AAEV"}

package/dist/components/thinking.d.ts

@@ -0,0 +1,16 @@
+import type { ThinkingStep, ThinkingVariant } from "../models/agent-feedback.js";
+export type { ThinkingStep, ThinkingVariant } from "../models/agent-feedback.js";
+export interface ThinkingProps {
+    /** Caller-owned trace steps; the component never executes work. */
+    steps: readonly ThinkingStep[];
+    /** Trace presentation. @default "steps" */
+    variant?: ThinkingVariant;
+    /** Override the derived status title. */
+    title?: string;
+    open?: boolean;
+    /** Initially expand the trace. @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Thinking({ steps, variant, title, className, ...props }: ThinkingProps): import("react").JSX.Element;

package/dist/components/thinking.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Collapsible as t, CollapsibleContent as n, CollapsibleTrigger as r } from "./collapsible.js";
+import { useThinkingViewModel as i } from "../viewmodels/use-thinking.js";
+import { Loader as a } from "./loader.js";
+import { Check as o, Circle as s, CircleAlert as c, Code as l, Search as u, Sparkles as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/thinking.tsx
+function m({ steps: m, variant: h = "steps", title: g, className: _, ...v }) {
+	let y = i({
+		steps: m,
+		...v
+	}), b = h === "search" ? u : h === "coding" ? l : d, x = g ?? (y.status === "error" ? "Needs attention" : y.status === "complete" ? "Thinking complete" : y.status === "running" ? "Thinking" : "Waiting");
+	return /* @__PURE__ */ p(t, {
+		open: y.open,
+		onOpenChange: y.setOpen,
+		className: e("basalt-ui w-full text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground", _),
+		children: [/* @__PURE__ */ f(r, {
+			className: "rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground",
+			children: /* @__PURE__ */ p("span", {
+				className: "inline-flex min-w-0 flex-wrap items-center gap-basalt-row-gap",
+				children: [
+					/* @__PURE__ */ f(b, {
+						"aria-hidden": "true",
+						className: "size-basalt-icon-lg shrink-0",
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ f("span", {
+						role: "status",
+						className: e(y.status === "running" && "basalt-shimmer-label"),
+						children: x
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "text-basalt-sm tabular-nums text-basalt-muted-foreground",
+						children: [
+							y.completed,
+							"/",
+							y.total
+						]
+					})
+				]
+			})
+		}), /* @__PURE__ */ f(n, {
+			unstyled: !0,
+			children: /* @__PURE__ */ p("ol", {
+				"aria-label": "Thinking steps",
+				className: "ml-[calc(var(--basalt-space-row-x)+var(--basalt-size-icon-lg)/2)] space-y-basalt-content-gap border-l border-basalt-border py-basalt-space-lg pl-[calc(var(--basalt-size-icon-lg)/2+var(--basalt-space-row-gap))] pr-basalt-row-x",
+				children: [m.map((t) => /* @__PURE__ */ p("li", {
+					"data-step-status": t.status,
+					className: "basalt-agent-reveal flex items-start gap-basalt-row-gap",
+					children: [/* @__PURE__ */ f("span", {
+						className: "flex h-[var(--basalt-line-body)] w-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground",
+						role: "img",
+						"aria-label": t.status,
+						children: t.status === "running" ? /* @__PURE__ */ f(a, {
+							size: 12,
+							showLabel: !1,
+							showElapsed: !1,
+							"aria-hidden": "true"
+						}) : t.status === "complete" ? /* @__PURE__ */ f(o, { size: 14 }) : t.status === "error" ? /* @__PURE__ */ f(c, {
+							size: 14,
+							className: "text-basalt-danger"
+						}) : /* @__PURE__ */ f(s, { size: 12 })
+					}), /* @__PURE__ */ p("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ f("p", {
+							className: e("text-basalt-code", h === "coding" && "font-mono"),
+							children: t.label
+						}), t.detail && /* @__PURE__ */ f("p", {
+							className: "mt-basalt-space-sm whitespace-pre-wrap break-words text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground",
+							children: t.detail
+						})]
+					})]
+				}, t.id)), m.length === 0 && /* @__PURE__ */ f("li", {
+					className: "text-basalt-sm text-basalt-muted-foreground",
+					children: "No steps yet"
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { m as Thinking };
+
+//# sourceMappingURL=thinking.js.map

package/dist/components/thinking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking.js","names":["Thinking","props","vm","useThinkingViewModel","Icon","variant","Search","Code","Sparkles","heading","title","Collapsible","cn","className","CollapsibleTrigger","CollapsibleContent","steps","step","Loader","Check","CircleAlert","Circle"],"sources":["../../src/components/thinking.tsx"],"sourcesContent":["import { Check, Circle, CircleAlert, Code, Search, Sparkles } from \"lucide-react\";\nimport type { ThinkingStep, ThinkingVariant } from \"../models/agent-feedback\";\nimport { cn } from \"../utils/cn\";\nimport { useThinkingViewModel } from \"../viewmodels/use-thinking\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Loader } from \"./loader\";\n\nexport type { ThinkingStep, ThinkingVariant } from \"../models/agent-feedback\";\nexport interface ThinkingProps {\n\t/** Caller-owned trace steps; the component never executes work. */\n\tsteps: readonly ThinkingStep[];\n\t/** Trace presentation. @default \"steps\" */\n\tvariant?: ThinkingVariant;\n\t/** Override the derived status title. */\n\ttitle?: string;\n\topen?: boolean;\n\t/** Initially expand the trace. @default true */\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tclassName?: string;\n}\n\nexport function Thinking({ steps, variant = \"steps\", title, className, ...props }: ThinkingProps) {\n\tconst vm = useThinkingViewModel({ steps, ...props });\n\tconst Icon = variant === \"search\" ? Search : variant === \"coding\" ? Code : Sparkles;\n\tconst heading =\n\t\ttitle ??\n\t\t(vm.status === \"error\"\n\t\t\t? \"Needs attention\"\n\t\t\t: vm.status === \"complete\"\n\t\t\t\t? \"Thinking complete\"\n\t\t\t\t: vm.status === \"running\"\n\t\t\t\t\t? \"Thinking\"\n\t\t\t\t\t: \"Waiting\");\n\treturn (\n\t\t<Collapsible\n\t\t\topen={vm.open}\n\t\t\tonOpenChange={vm.setOpen}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui w-full text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<CollapsibleTrigger className=\"rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground\">\n\t\t\t\t<span className=\"inline-flex min-w-0 flex-wrap items-center gap-basalt-row-gap\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" className=\"size-basalt-icon-lg shrink-0\" strokeWidth={1.5} />\n\t\t\t\t\t<span role=\"status\" className={cn(vm.status === \"running\" && \"basalt-shimmer-label\")}>\n\t\t\t\t\t\t{heading}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-basalt-sm tabular-nums text-basalt-muted-foreground\">\n\t\t\t\t\t\t{vm.completed}/{vm.total}\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</CollapsibleTrigger>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<ol\n\t\t\t\t\taria-label=\"Thinking steps\"\n\t\t\t\t\tclassName=\"ml-[calc(var(--basalt-space-row-x)+var(--basalt-size-icon-lg)/2)] space-y-basalt-content-gap border-l border-basalt-border py-basalt-space-lg pl-[calc(var(--basalt-size-icon-lg)/2+var(--basalt-space-row-gap))] pr-basalt-row-x\"\n\t\t\t\t>\n\t\t\t\t\t{steps.map((step) => (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tkey={step.id}\n\t\t\t\t\t\t\tdata-step-status={step.status}\n\t\t\t\t\t\t\tclassName=\"basalt-agent-reveal flex items-start gap-basalt-row-gap\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName=\"flex h-[var(--basalt-line-body)] w-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label={step.status}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{step.status === \"running\" ? (\n\t\t\t\t\t\t\t\t\t<Loader size={12} showLabel={false} showElapsed={false} aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t) : step.status === \"complete\" ? (\n\t\t\t\t\t\t\t\t\t<Check size={14} />\n\t\t\t\t\t\t\t\t) : step.status === \"error\" ? (\n\t\t\t\t\t\t\t\t\t<CircleAlert size={14} className=\"text-basalt-danger\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Circle size={12} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t\t\t\t<p className={cn(\"text-basalt-code\", variant === \"coding\" && \"font-mono\")}>\n\t\t\t\t\t\t\t\t\t{step.label}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t{step.detail && (\n\t\t\t\t\t\t\t\t\t<p className=\"mt-basalt-space-sm whitespace-pre-wrap break-words text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{step.detail}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t\t{steps.length === 0 && (\n\t\t\t\t\t\t<li className=\"text-basalt-sm text-basalt-muted-foreground\">No steps yet</li>\n\t\t\t\t\t)}\n\t\t\t\t</ol>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgBA,EAAS,EAAE,UAAO,aAAU,SAAS,UAAO,cAAW,GAAGC,KAAwB;CACjG,IAAMC,IAAKC,EAAqB;EAAE;EAAO,GAAGF;CAAM,CAAC,GAC7CG,IAAOC,MAAY,WAAWC,IAASD,MAAY,WAAWE,IAAOC,GACrEC,IACLC,MACCR,EAAG,WAAW,UACZ,oBACAA,EAAG,WAAW,aACb,sBACAA,EAAG,WAAW,YACb,aACA;CACN,OACC,kBAACS,GAAD;EACC,MAAMT,EAAG;EACT,cAAcA,EAAG;EACjB,WAAWU,EACV,8FACAC,CACD;EAND,UAAA,CAQC,kBAACC,GAAD;GAAoB,WAAU;GAC7B,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACC,kBAACV,GAAD;MAAM,eAAY;MAAO,WAAU;MAA+B,aAAa;KAAM,CAAA;KACrF,kBAAC,QAAD;MAAM,MAAK;MAAS,WAAWQ,EAAGV,EAAG,WAAW,aAAa,sBAAsB;MACjF,UAAAO;KACI,CAAA;KACN,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACEP,EAAG;OAAU;OAAEA,EAAG;MACd;;IACD;;EACa,CAAA,GACpB,kBAACa,GAAD;GAAoB,UAAA;GACnB,UAAA,kBAAC,MAAD;IACC,cAAW;IACX,WAAU;IAFX,UAAA,CAIEC,EAAM,KAAK,MACX,kBAAC,MAAD;KAEC,oBAAkBC,EAAK;KACvB,WAAU;KAHX,UAAA,CAKC,kBAAC,QAAD;MACC,WAAU;MACV,MAAK;MACL,cAAYA,EAAK;MAEhB,UAAAA,EAAK,WAAW,YAChB,kBAACC,GAAD;OAAQ,MAAM;OAAI,WAAW;OAAO,aAAa;OAAO,eAAY;MAAQ,CAAA,IACzED,EAAK,WAAW,aACnB,kBAACE,GAAD,EAAO,MAAM,GAAK,CAAA,IACfF,EAAK,WAAW,UACnB,kBAACG,GAAD;OAAa,MAAM;OAAI,WAAU;MAAsB,CAAA,IAEvD,kBAACC,GAAD,EAAQ,MAAM,GAAK,CAAA;KAEf,CAAA,GACN,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,kBAAC,KAAD;OAAG,WAAWT,EAAG,oBAAoBP,MAAY,YAAY,WAAW;OACtE,UAAAY,EAAK;MACJ,CAAA,GACFA,EAAK,UACL,kBAAC,KAAD;OAAG,WAAU;OACX,UAAAA,EAAK;MACJ,CAAA,CAEA;KACF,CAAA,CAAA;IA7BE,GAAAA,EAAK,EA6BP,CACJ,GACAD,EAAM,WAAW,KACjB,kBAAC,MAAD;KAAI,WAAU;KAA8C,UAAA;IAAgB,CAAA,CAE1E;;EACe,CAAA,CACR;;AAEf"}

package/dist/components/toast.js

@@ -11,10 +11,10 @@ var c = {
 	info: "bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info"
 }, l = {
 	default: null,
-	success: /* @__PURE__ */ a(e, { className: "size-4" }),
-	error: /* @__PURE__ */ a(t, { className: "size-4" }),
-	warning: /* @__PURE__ */ a(r, { className: "size-4" }),
-	info: /* @__PURE__ */ a(n, { className: "size-4" })
+	success: /* @__PURE__ */ a(e, { className: "size-basalt-icon-lg" }),
+	error: /* @__PURE__ */ a(t, { className: "size-basalt-icon-lg" }),
+	warning: /* @__PURE__ */ a(r, { className: "size-basalt-icon-lg" }),
+	info: /* @__PURE__ */ a(n, { className: "size-basalt-icon-lg" })
 };
 function u(e, t) {
 	return t === !1 ? null : t ?? l[e] ?? void 0;
@@ -51,23 +51,28 @@ function p({ closeButton: s = !0, ...l }) {
 	return /* @__PURE__ */ a(o, {
 		closeButton: s,
 		icons: {
-			success: /* @__PURE__ */ a(e, { className: "size-4" }),
-			error: /* @__PURE__ */ a(t, { className: "size-4" }),
-			warning: /* @__PURE__ */ a(r, { className: "size-4" }),
-			info: /* @__PURE__ */ a(n, { className: "size-4" }),
-			close: /* @__PURE__ */ a(i, { className: "size-3.5" })
+			success: /* @__PURE__ */ a(e, { className: "size-basalt-icon-lg" }),
+			error: /* @__PURE__ */ a(t, { className: "size-basalt-icon-lg" }),
+			warning: /* @__PURE__ */ a(r, { className: "size-basalt-icon-lg" }),
+			info: /* @__PURE__ */ a(n, { className: "size-basalt-icon-lg" }),
+			close: /* @__PURE__ */ a(i, { className: "size-basalt-icon" })
+		},
+		toastOptions: {
+			unstyled: !0,
+			classNames: {
+				toast: "basalt-ui basalt-toast flex w-full items-center gap-basalt-space-lg rounded-basalt-md bg-basalt-popover px-basalt-card-lg py-basalt-card text-basalt-base leading-[var(--basalt-leading-banner)] text-basalt-foreground shadow-lg [&_[data-content]]:min-w-0 [&_[data-content]]:flex-1",
+				title: "font-medium",
+				description: "text-basalt-sm leading-[var(--basalt-line-relaxed)] text-basalt-muted-foreground",
+				closeButton: "basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground focus-visible:ring-2 focus-visible:ring-basalt-ring",
+				actionButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover",
+				cancelButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-control hover:bg-basalt-hover",
+				icon: "flex size-basalt-icon-lg shrink-0 items-center justify-center",
+				success: c.success,
+				error: c.error,
+				warning: c.warning,
+				info: c.info
+			}
 		},
-		toastOptions: { classNames: {
-			toast: "border border-basalt-border text-basalt-foreground shadow-lg",
-			title: "text-sm font-medium",
-			description: "text-sm text-basalt-muted-foreground",
-			closeButton: "border-basalt-border bg-basalt-popover text-basalt-muted-foreground hover:text-basalt-foreground",
-			icon: "size-4",
-			success: c.success,
-			error: c.error,
-			warning: c.warning,
-			info: c.info
-		} },
 		...l
 	});
 }

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["sonnerToast","Sonner","Toaster$1","toast$1","VARIANT_CLASS","VARIANT_ICON","Check","CircleAlert","TriangleAlert","Info","resolveIcon","icon","variant","show","rest","options","payload","close","message","toast","Toaster","props","X","Toast"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { Check, CircleAlert, Info, TriangleAlert, X } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as Sonner, toast as sonnerToast } from \"sonner\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n\t/**\n\t * Secondary supporting text or node displayed below the main message.\n\t */\n\tdescription?: ReactNode;\n\t/**\n\t * Custom icon override. When set to `false`, suppresses default status or notification icons.\n\t */\n\ticon?: ReactNode | false;\n\t/**\n\t * Whether a close button is displayed on this individual toast notification.\n\t * @default true\n\t */\n\tclose?: boolean;\n\t/**\n\t * Visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Infinity disables auto-closing. Setting to 0 treats it as falsy and falls back through container duration before defaulting to 4000ms.\n\t * @default \"inherited from container, finally 4000ms\"\n\t */\n\tduration?: number;\n\t/**\n\t * Unique identifier for this toast notification. Can be used with `toast.dismiss(id)` to manually dismiss this specific toast.\n\t */\n\tid?: string | number;\n\t/**\n\t * Optional action button configuration with label and onClick handler.\n\t */\n\taction?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\n/**\n * Options accepted by the root `toast(message, options)` dispatch function, extending `ToastOptions` with an optional `variant`.\n */\nexport type ToastCallOptions = ToastOptions & {\n\t/**\n\t * Visual status variant style for this toast.\n\t * @default \"default\"\n\t */\n\tvariant?: ToastVariant;\n};\n\nconst VARIANT_CLASS: Record<ToastVariant, string> = {\n\tdefault: \"bg-basalt-popover\",\n\tsuccess:\n\t\t\"bg-basalt-heatmap-green-1 [&_[data-icon]]:text-basalt-heatmap-green-4 [&_[data-title]]:text-basalt-heatmap-green-4\",\n\terror:\n\t\t\"bg-basalt-danger-tint [&_[data-icon]]:text-basalt-danger [&_[data-title]]:text-basalt-danger\",\n\twarning:\n\t\t\"bg-basalt-warning-tint [&_[data-icon]]:text-basalt-warning [&_[data-title]]:text-basalt-warning\",\n\tinfo: \"bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info\",\n};\n\nconst VARIANT_ICON: Record<ToastVariant, ReactNode> = {\n\tdefault: null,\n\tsuccess: <Check className=\"size-4\" />,\n\terror: <CircleAlert className=\"size-4\" />,\n\twarning: <TriangleAlert className=\"size-4\" />,\n\tinfo: <Info className=\"size-4\" />,\n};\n\nfunction resolveIcon(variant: ToastVariant, icon: ToastOptions[\"icon\"]) {\n\tif (icon === false) {\n\t\treturn null;\n\t}\n\tif (icon != null) {\n\t\treturn icon;\n\t}\n\treturn VARIANT_ICON[variant] ?? undefined;\n}\n\n/**\n * Dispatches a toast notification with the given message and options.\n * @param message Main notification content or React node.\n * @param options Notification customization options including optional variant.\n * @returns The unique toast identifier (string or number).\n */\nfunction show(message: ReactNode, options: ToastCallOptions = {}) {\n\tconst { variant = \"default\", icon, close = true, ...rest } = options;\n\tconst payload = {\n\t\t...rest,\n\t\tcloseButton: close,\n\t\tclassName: VARIANT_CLASS[variant],\n\t\ticon: resolveIcon(variant, icon),\n\t};\n\tif (variant === \"success\") {\n\t\treturn sonnerToast.success(message, payload);\n\t}\n\tif (variant === \"error\") {\n\t\treturn sonnerToast.error(message, payload);\n\t}\n\tif (variant === \"warning\") {\n\t\treturn sonnerToast.warning(message, payload);\n\t}\n\tif (variant === \"info\") {\n\t\treturn sonnerToast.info(message, payload);\n\t}\n\treturn sonnerToast(message, payload);\n}\n\n/**\n * Imperative notification dispatcher. Directly callable as `toast(message, options)` to display a default notification, with helper methods for status variants (`success`, `error`, `warning`, `info`) and dismissal (`dismiss`).\n */\nexport const toast = Object.assign(show, {\n\t/**\n\t * Dispatches a success status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tsuccess: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"success\" }),\n\t/**\n\t * Dispatches an error status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\terror: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"error\" }),\n\t/**\n\t * Dispatches a warning status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\twarning: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"warning\" }),\n\t/**\n\t * Dispatches an info status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tinfo: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"info\" }),\n\t/**\n\t * Dismisses an active toast by its identifier, or dismisses all toasts when called without arguments. Note: Calling without arguments returns `undefined` at runtime; calling with `id` returns the dismissed `id`.\n\t * @param id Optional identifier of the toast to dismiss. When omitted, all toasts are dismissed.\n\t * @returns The dismissed toast identifier if provided, or undefined if dismissed without arguments.\n\t */\n\tdismiss: sonnerToast.dismiss,\n});\n\ntype SonnerComponentProps = ComponentProps<typeof Sonner>;\n\nexport type ToasterToastOptions = NonNullable<SonnerComponentProps[\"toastOptions\"]>;\nexport type ToasterIcons = NonNullable<SonnerComponentProps[\"icons\"]>;\nexport type ToasterSwipeDirection = NonNullable<SonnerComponentProps[\"swipeDirections\"]>[number];\n\nexport interface ToasterProps\n\textends Omit<\n\t\tSonnerComponentProps,\n\t\t| \"id\"\n\t\t| \"invert\"\n\t\t| \"theme\"\n\t\t| \"position\"\n\t\t| \"hotkey\"\n\t\t| \"richColors\"\n\t\t| \"expand\"\n\t\t| \"duration\"\n\t\t| \"gap\"\n\t\t| \"visibleToasts\"\n\t\t| \"closeButton\"\n\t\t| \"toastOptions\"\n\t\t| \"className\"\n\t\t| \"style\"\n\t\t| \"offset\"\n\t\t| \"mobileOffset\"\n\t\t| \"dir\"\n\t\t| \"swipeDirections\"\n\t\t| \"icons\"\n\t\t| \"containerAriaLabel\"\n\t\t| \"customAriaLabel\"\n\t> {\n\t/**\n\t * Unique identifier for this toaster instance. When set, only toasts dispatched with a matching toasterId will display here. Basalt standard toast options do not expose toasterId, so global un-identified mounting is recommended.\n\t */\n\tid?: SonnerComponentProps[\"id\"];\n\t/**\n\t * Invert toast foreground and background colors.\n\t * @default false\n\t */\n\tinvert?: SonnerComponentProps[\"invert\"];\n\t/**\n\t * Color scheme theme override for toast notifications.\n\t * @default \"light\"\n\t */\n\ttheme?: SonnerComponentProps[\"theme\"];\n\t/**\n\t * Screen positioning for the toast viewport stack.\n\t * @default \"bottom-right\"\n\t */\n\tposition?: SonnerComponentProps[\"position\"];\n\t/**\n\t * Keyboard hotkey combination to expand and focus the toast viewport.\n\t * @default [\"altKey\", \"KeyT\"]\n\t */\n\thotkey?: SonnerComponentProps[\"hotkey\"];\n\t/**\n\t * Whether rich semantic colors should be applied to default notification styles.\n\t * @default false\n\t */\n\trichColors?: SonnerComponentProps[\"richColors\"];\n\t/**\n\t * Whether toasts should be expanded by default rather than collapsed into a stacked pile.\n\t * @default false\n\t */\n\texpand?: SonnerComponentProps[\"expand\"];\n\t/**\n\t * Default visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Passing Infinity prevents auto-closing. When `toastOptions.duration === 0`, it is treated as falsy and bypasses `Toaster.duration`, falling back to 4000.\n\t * @default 4000\n\t */\n\tduration?: SonnerComponentProps[\"duration\"];\n\t/**\n\t * Pixel gap between stacked toasts.\n\t * @default 14\n\t */\n\tgap?: SonnerComponentProps[\"gap\"];\n\t/**\n\t * Maximum number of toasts visible simultaneously in the stack.\n\t * @default 3\n\t */\n\tvisibleToasts?: SonnerComponentProps[\"visibleToasts\"];\n\t/**\n\t * Whether a close button is displayed on each toast notification. Basalt enables this by default (`closeButton = true`), and Basalt single-toast calls also default to `close: true`, overriding `Toaster.closeButton = false`. To hide the close button on an individual toast, pass `close: false` in the dispatch options.\n\t * @default true\n\t */\n\tcloseButton?: SonnerComponentProps[\"closeButton\"];\n\t/**\n\t * Default options and custom class names applied to all rendered toasts. Passing a custom `toastOptions` object will override Basalt default styling rather than deep-merging.\n\t */\n\ttoastOptions?: ToasterToastOptions;\n\t/**\n\t * Additional CSS class name applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tclassName?: SonnerComponentProps[\"className\"];\n\t/**\n\t * Inline style properties applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tstyle?: SonnerComponentProps[\"style\"];\n\t/**\n\t * Viewport offset margin from screen edges on desktop screens.\n\t * @default \"24px\"\n\t */\n\toffset?: SonnerComponentProps[\"offset\"];\n\t/**\n\t * Viewport offset margin from screen edges on mobile devices.\n\t * @default \"16px\"\n\t */\n\tmobileOffset?: SonnerComponentProps[\"mobileOffset\"];\n\t/**\n\t * Layout direction of the notification viewport ('ltr', 'rtl', or document direction when unspecified).\n\t * @default document direction\n\t */\n\tdir?: SonnerComponentProps[\"dir\"];\n\t/**\n\t * Allowed swipe directions to dismiss toasts. Defaults based on position orientation (e.g. ['bottom', 'right'] for bottom-right).\n\t */\n\tswipeDirections?: ToasterSwipeDirection[];\n\t/**\n\t * Custom icon overrides for toast status variants. Basalt preconfigures Lucide icons; passing an `icons` object replaces defaults rather than deep-merging. Basalt status variant dispatches (`toast.success`, `error`, `warning`, `info`) supply default status icons directly, which take precedence over `Toaster.icons`; custom individual toast icons should be passed via `options.icon`.\n\t */\n\ticons?: ToasterIcons;\n\t/**\n\t * Accessible label for the notification region container.\n\t * @default \"Notifications\"\n\t */\n\tcontainerAriaLabel?: SonnerComponentProps[\"containerAriaLabel\"];\n\t/**\n\t * Custom accessible label overriding both containerAriaLabel and hotkey text on the section wrapper.\n\t */\n\tcustomAriaLabel?: SonnerComponentProps[\"customAriaLabel\"];\n}\n\nexport function Toaster({ closeButton = true, ...props }: ToasterProps) {\n\treturn (\n\t\t<Sonner\n\t\t\tcloseButton={closeButton}\n\t\t\ticons={{\n\t\t\t\tsuccess: <Check className=\"size-4\" />,\n\t\t\t\terror: <CircleAlert className=\"size-4\" />,\n\t\t\t\twarning: <TriangleAlert className=\"size-4\" />,\n\t\t\t\tinfo: <Info className=\"size-4\" />,\n\t\t\t\tclose: <X className=\"size-3.5\" />,\n\t\t\t}}\n\t\t\ttoastOptions={{\n\t\t\t\tclassNames: {\n\t\t\t\t\ttoast: \"border border-basalt-border text-basalt-foreground shadow-lg\",\n\t\t\t\t\ttitle: \"text-sm font-medium\",\n\t\t\t\t\tdescription: \"text-sm text-basalt-muted-foreground\",\n\t\t\t\t\tcloseButton:\n\t\t\t\t\t\t\"border-basalt-border bg-basalt-popover text-basalt-muted-foreground hover:text-basalt-foreground\",\n\t\t\t\t\ticon: \"size-4\",\n\t\t\t\t\tsuccess: VARIANT_CLASS.success,\n\t\t\t\t\terror: VARIANT_CLASS.error,\n\t\t\t\t\twarning: VARIANT_CLASS.warning,\n\t\t\t\t\tinfo: VARIANT_CLASS.info,\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport const Toast = Toaster;\n"],"mappings":";;;;;AAiDA,IAAMI,IAA8C;CACnD,SAAS;CACT,SACC;CACD,OACC;CACD,SACC;CACD,MAAM;AACP,GAEMC,IAAgD;CACrD,SAAS;CACT,SAAS,kBAACC,GAAD,EAAO,WAAU,SAAU,CAAA;CACpC,OAAO,kBAACC,GAAD,EAAa,WAAU,SAAU,CAAA;CACxC,SAAS,kBAACC,GAAD,EAAe,WAAU,SAAU,CAAA;CAC5C,MAAM,kBAACC,GAAD,EAAM,WAAU,SAAU,CAAA;AACjC;AAEA,SAASC,EAAY,GAAuB,GAA4B;CAOvE,OANIC,MAAS,KACL,OAEJA,KAGGN,EAAaO,MAAY,KAAA;AACjC;AAQA,SAASC,EAAK,GAAoB,IAA4B,CAAC,GAAG;CACjE,IAAM,EAAE,aAAU,WAAW,SAAM,WAAQ,IAAM,GAAGC,MAASC,GACvDC,IAAU;EACf,GAAGF;EACH,aAAaG;EACb,WAAWb,EAAcQ;EACzB,MAAMF,EAAYE,GAASD,CAAI;CAChC;CAaA,OAZIC,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,UACRZ,EAAY,MAAMkB,GAASF,CAAO,IAEtCJ,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,SACRZ,EAAY,KAAKkB,GAASF,CAAO,IAElChB,EAAYkB,GAASF,CAAO;AACpC;AAKA,IAAaG,IAAQ,OAAO,OAAON,GAAM;CAOxC,UAAU,GAAoB,MAC7BA,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,QAAQ,GAAoB,MAC3BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAQ,CAAC;CAO/C,UAAU,GAAoB,MAC7BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,OAAO,GAAoB,MAC1BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAO,CAAC;CAM9C,SAASf,EAAY;AACtB,CAAC;AAqID,SAAgBoB,EAAQ,EAAE,iBAAc,IAAM,GAAGC,KAAuB;CACvE,OACC,kBAACpB,GAAD;EACc;EACb,OAAO;GACN,SAAS,kBAACK,GAAD,EAAO,WAAU,SAAU,CAAA;GACpC,OAAO,kBAACC,GAAD,EAAa,WAAU,SAAU,CAAA;GACxC,SAAS,kBAACC,GAAD,EAAe,WAAU,SAAU,CAAA;GAC5C,MAAM,kBAACC,GAAD,EAAM,WAAU,SAAU,CAAA;GAChC,OAAO,kBAACa,GAAD,EAAG,WAAU,WAAY,CAAA;EACjC;EACA,cAAc,EACb,YAAY;GACX,OAAO;GACP,OAAO;GACP,aAAa;GACb,aACC;GACD,MAAM;GACN,SAASlB,EAAc;GACvB,OAAOA,EAAc;GACrB,SAASA,EAAc;GACvB,MAAMA,EAAc;EACrB,EACD;EACA,GAAIiB;CACJ,CAAA;AAEH;AAEA,IAAaE,IAAQH"}
+{"version":3,"file":"toast.js","names":["sonnerToast","Sonner","Toaster$1","toast$1","VARIANT_CLASS","VARIANT_ICON","Check","CircleAlert","TriangleAlert","Info","resolveIcon","icon","variant","show","rest","options","payload","close","message","toast","Toaster","props","X","Toast"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { Check, CircleAlert, Info, TriangleAlert, X } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as Sonner, toast as sonnerToast } from \"sonner\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n\t/**\n\t * Secondary supporting text or node displayed below the main message.\n\t */\n\tdescription?: ReactNode;\n\t/**\n\t * Custom icon override. When set to `false`, suppresses default status or notification icons.\n\t */\n\ticon?: ReactNode | false;\n\t/**\n\t * Whether a close button is displayed on this individual toast notification.\n\t * @default true\n\t */\n\tclose?: boolean;\n\t/**\n\t * Visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Infinity disables auto-closing. Setting to 0 treats it as falsy and falls back through container duration before defaulting to 4000ms.\n\t * @default \"inherited from container, finally 4000ms\"\n\t */\n\tduration?: number;\n\t/**\n\t * Unique identifier for this toast notification. Can be used with `toast.dismiss(id)` to manually dismiss this specific toast.\n\t */\n\tid?: string | number;\n\t/**\n\t * Optional action button configuration with label and onClick handler.\n\t */\n\taction?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\n/**\n * Options accepted by the root `toast(message, options)` dispatch function, extending `ToastOptions` with an optional `variant`.\n */\nexport type ToastCallOptions = ToastOptions & {\n\t/**\n\t * Visual status variant style for this toast.\n\t * @default \"default\"\n\t */\n\tvariant?: ToastVariant;\n};\n\nconst VARIANT_CLASS: Record<ToastVariant, string> = {\n\tdefault: \"bg-basalt-popover\",\n\tsuccess:\n\t\t\"bg-basalt-heatmap-green-1 [&_[data-icon]]:text-basalt-heatmap-green-4 [&_[data-title]]:text-basalt-heatmap-green-4\",\n\terror:\n\t\t\"bg-basalt-danger-tint [&_[data-icon]]:text-basalt-danger [&_[data-title]]:text-basalt-danger\",\n\twarning:\n\t\t\"bg-basalt-warning-tint [&_[data-icon]]:text-basalt-warning [&_[data-title]]:text-basalt-warning\",\n\tinfo: \"bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info\",\n};\n\nconst VARIANT_ICON: Record<ToastVariant, ReactNode> = {\n\tdefault: null,\n\tsuccess: <Check className=\"size-basalt-icon-lg\" />,\n\terror: <CircleAlert className=\"size-basalt-icon-lg\" />,\n\twarning: <TriangleAlert className=\"size-basalt-icon-lg\" />,\n\tinfo: <Info className=\"size-basalt-icon-lg\" />,\n};\n\nfunction resolveIcon(variant: ToastVariant, icon: ToastOptions[\"icon\"]) {\n\tif (icon === false) {\n\t\treturn null;\n\t}\n\tif (icon != null) {\n\t\treturn icon;\n\t}\n\treturn VARIANT_ICON[variant] ?? undefined;\n}\n\n/**\n * Dispatches a toast notification with the given message and options.\n * @param message Main notification content or React node.\n * @param options Notification customization options including optional variant.\n * @returns The unique toast identifier (string or number).\n */\nfunction show(message: ReactNode, options: ToastCallOptions = {}) {\n\tconst { variant = \"default\", icon, close = true, ...rest } = options;\n\tconst payload = {\n\t\t...rest,\n\t\tcloseButton: close,\n\t\tclassName: VARIANT_CLASS[variant],\n\t\ticon: resolveIcon(variant, icon),\n\t};\n\tif (variant === \"success\") {\n\t\treturn sonnerToast.success(message, payload);\n\t}\n\tif (variant === \"error\") {\n\t\treturn sonnerToast.error(message, payload);\n\t}\n\tif (variant === \"warning\") {\n\t\treturn sonnerToast.warning(message, payload);\n\t}\n\tif (variant === \"info\") {\n\t\treturn sonnerToast.info(message, payload);\n\t}\n\treturn sonnerToast(message, payload);\n}\n\n/**\n * Imperative notification dispatcher. Directly callable as `toast(message, options)` to display a default notification, with helper methods for status variants (`success`, `error`, `warning`, `info`) and dismissal (`dismiss`).\n */\nexport const toast = Object.assign(show, {\n\t/**\n\t * Dispatches a success status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tsuccess: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"success\" }),\n\t/**\n\t * Dispatches an error status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\terror: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"error\" }),\n\t/**\n\t * Dispatches a warning status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\twarning: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"warning\" }),\n\t/**\n\t * Dispatches an info status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tinfo: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"info\" }),\n\t/**\n\t * Dismisses an active toast by its identifier, or dismisses all toasts when called without arguments. Note: Calling without arguments returns `undefined` at runtime; calling with `id` returns the dismissed `id`.\n\t * @param id Optional identifier of the toast to dismiss. When omitted, all toasts are dismissed.\n\t * @returns The dismissed toast identifier if provided, or undefined if dismissed without arguments.\n\t */\n\tdismiss: sonnerToast.dismiss,\n});\n\ntype SonnerComponentProps = ComponentProps<typeof Sonner>;\n\nexport type ToasterToastOptions = NonNullable<SonnerComponentProps[\"toastOptions\"]>;\nexport type ToasterIcons = NonNullable<SonnerComponentProps[\"icons\"]>;\nexport type ToasterSwipeDirection = NonNullable<SonnerComponentProps[\"swipeDirections\"]>[number];\n\nexport interface ToasterProps\n\textends Omit<\n\t\tSonnerComponentProps,\n\t\t| \"id\"\n\t\t| \"invert\"\n\t\t| \"theme\"\n\t\t| \"position\"\n\t\t| \"hotkey\"\n\t\t| \"richColors\"\n\t\t| \"expand\"\n\t\t| \"duration\"\n\t\t| \"gap\"\n\t\t| \"visibleToasts\"\n\t\t| \"closeButton\"\n\t\t| \"toastOptions\"\n\t\t| \"className\"\n\t\t| \"style\"\n\t\t| \"offset\"\n\t\t| \"mobileOffset\"\n\t\t| \"dir\"\n\t\t| \"swipeDirections\"\n\t\t| \"icons\"\n\t\t| \"containerAriaLabel\"\n\t\t| \"customAriaLabel\"\n\t> {\n\t/**\n\t * Unique identifier for this toaster instance. When set, only toasts dispatched with a matching toasterId will display here. Basalt standard toast options do not expose toasterId, so global un-identified mounting is recommended.\n\t */\n\tid?: SonnerComponentProps[\"id\"];\n\t/**\n\t * Invert toast foreground and background colors.\n\t * @default false\n\t */\n\tinvert?: SonnerComponentProps[\"invert\"];\n\t/**\n\t * Color scheme theme override for toast notifications.\n\t * @default \"light\"\n\t */\n\ttheme?: SonnerComponentProps[\"theme\"];\n\t/**\n\t * Screen positioning for the toast viewport stack.\n\t * @default \"bottom-right\"\n\t */\n\tposition?: SonnerComponentProps[\"position\"];\n\t/**\n\t * Keyboard hotkey combination to expand and focus the toast viewport.\n\t * @default [\"altKey\", \"KeyT\"]\n\t */\n\thotkey?: SonnerComponentProps[\"hotkey\"];\n\t/**\n\t * Whether rich semantic colors should be applied to default notification styles.\n\t * @default false\n\t */\n\trichColors?: SonnerComponentProps[\"richColors\"];\n\t/**\n\t * Whether toasts should be expanded by default rather than collapsed into a stacked pile.\n\t * @default false\n\t */\n\texpand?: SonnerComponentProps[\"expand\"];\n\t/**\n\t * Default visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Passing Infinity prevents auto-closing. When `toastOptions.duration === 0`, it is treated as falsy and bypasses `Toaster.duration`, falling back to 4000.\n\t * @default 4000\n\t */\n\tduration?: SonnerComponentProps[\"duration\"];\n\t/**\n\t * Pixel gap between stacked toasts.\n\t * @default 14\n\t */\n\tgap?: SonnerComponentProps[\"gap\"];\n\t/**\n\t * Maximum number of toasts visible simultaneously in the stack.\n\t * @default 3\n\t */\n\tvisibleToasts?: SonnerComponentProps[\"visibleToasts\"];\n\t/**\n\t * Whether a close button is displayed on each toast notification. Basalt enables this by default (`closeButton = true`), and Basalt single-toast calls also default to `close: true`, overriding `Toaster.closeButton = false`. To hide the close button on an individual toast, pass `close: false` in the dispatch options.\n\t * @default true\n\t */\n\tcloseButton?: SonnerComponentProps[\"closeButton\"];\n\t/**\n\t * Default options and custom class names applied to all rendered toasts. Passing a custom `toastOptions` object will override Basalt default styling rather than deep-merging.\n\t */\n\ttoastOptions?: ToasterToastOptions;\n\t/**\n\t * Additional CSS class name applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tclassName?: SonnerComponentProps[\"className\"];\n\t/**\n\t * Inline style properties applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tstyle?: SonnerComponentProps[\"style\"];\n\t/**\n\t * Viewport offset margin from screen edges on desktop screens.\n\t * @default \"24px\"\n\t */\n\toffset?: SonnerComponentProps[\"offset\"];\n\t/**\n\t * Viewport offset margin from screen edges on mobile devices.\n\t * @default \"16px\"\n\t */\n\tmobileOffset?: SonnerComponentProps[\"mobileOffset\"];\n\t/**\n\t * Layout direction of the notification viewport ('ltr', 'rtl', or document direction when unspecified).\n\t * @default document direction\n\t */\n\tdir?: SonnerComponentProps[\"dir\"];\n\t/**\n\t * Allowed swipe directions to dismiss toasts. Defaults based on position orientation (e.g. ['bottom', 'right'] for bottom-right).\n\t */\n\tswipeDirections?: ToasterSwipeDirection[];\n\t/**\n\t * Custom icon overrides for toast status variants. Basalt preconfigures Lucide icons; passing an `icons` object replaces defaults rather than deep-merging. Basalt status variant dispatches (`toast.success`, `error`, `warning`, `info`) supply default status icons directly, which take precedence over `Toaster.icons`; custom individual toast icons should be passed via `options.icon`.\n\t */\n\ticons?: ToasterIcons;\n\t/**\n\t * Accessible label for the notification region container.\n\t * @default \"Notifications\"\n\t */\n\tcontainerAriaLabel?: SonnerComponentProps[\"containerAriaLabel\"];\n\t/**\n\t * Custom accessible label overriding both containerAriaLabel and hotkey text on the section wrapper.\n\t */\n\tcustomAriaLabel?: SonnerComponentProps[\"customAriaLabel\"];\n}\n\nexport function Toaster({ closeButton = true, ...props }: ToasterProps) {\n\treturn (\n\t\t<Sonner\n\t\t\tcloseButton={closeButton}\n\t\t\ticons={{\n\t\t\t\tsuccess: <Check className=\"size-basalt-icon-lg\" />,\n\t\t\t\terror: <CircleAlert className=\"size-basalt-icon-lg\" />,\n\t\t\t\twarning: <TriangleAlert className=\"size-basalt-icon-lg\" />,\n\t\t\t\tinfo: <Info className=\"size-basalt-icon-lg\" />,\n\t\t\t\tclose: <X className=\"size-basalt-icon\" />,\n\t\t\t}}\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t\tclassNames: {\n\t\t\t\t\ttoast:\n\t\t\t\t\t\t\"basalt-ui basalt-toast flex w-full items-center gap-basalt-space-lg rounded-basalt-md bg-basalt-popover px-basalt-card-lg py-basalt-card text-basalt-base leading-[var(--basalt-leading-banner)] text-basalt-foreground shadow-lg [&_[data-content]]:min-w-0 [&_[data-content]]:flex-1\",\n\t\t\t\t\ttitle: \"font-medium\",\n\t\t\t\t\tdescription:\n\t\t\t\t\t\t\"text-basalt-sm leading-[var(--basalt-line-relaxed)] text-basalt-muted-foreground\",\n\t\t\t\t\tcloseButton:\n\t\t\t\t\t\t\"basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground focus-visible:ring-2 focus-visible:ring-basalt-ring\",\n\t\t\t\t\tactionButton:\n\t\t\t\t\t\t\"basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover\",\n\t\t\t\t\tcancelButton:\n\t\t\t\t\t\t\"basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-control hover:bg-basalt-hover\",\n\t\t\t\t\ticon: \"flex size-basalt-icon-lg shrink-0 items-center justify-center\",\n\t\t\t\t\tsuccess: VARIANT_CLASS.success,\n\t\t\t\t\terror: VARIANT_CLASS.error,\n\t\t\t\t\twarning: VARIANT_CLASS.warning,\n\t\t\t\t\tinfo: VARIANT_CLASS.info,\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport const Toast = Toaster;\n"],"mappings":";;;;;AAiDA,IAAMI,IAA8C;CACnD,SAAS;CACT,SACC;CACD,OACC;CACD,SACC;CACD,MAAM;AACP,GAEMC,IAAgD;CACrD,SAAS;CACT,SAAS,kBAACC,GAAD,EAAO,WAAU,sBAAuB,CAAA;CACjD,OAAO,kBAACC,GAAD,EAAa,WAAU,sBAAuB,CAAA;CACrD,SAAS,kBAACC,GAAD,EAAe,WAAU,sBAAuB,CAAA;CACzD,MAAM,kBAACC,GAAD,EAAM,WAAU,sBAAuB,CAAA;AAC9C;AAEA,SAASC,EAAY,GAAuB,GAA4B;CAOvE,OANIC,MAAS,KACL,OAEJA,KAGGN,EAAaO,MAAY,KAAA;AACjC;AAQA,SAASC,EAAK,GAAoB,IAA4B,CAAC,GAAG;CACjE,IAAM,EAAE,aAAU,WAAW,SAAM,WAAQ,IAAM,GAAGC,MAASC,GACvDC,IAAU;EACf,GAAGF;EACH,aAAaG;EACb,WAAWb,EAAcQ;EACzB,MAAMF,EAAYE,GAASD,CAAI;CAChC;CAaA,OAZIC,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,UACRZ,EAAY,MAAMkB,GAASF,CAAO,IAEtCJ,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,SACRZ,EAAY,KAAKkB,GAASF,CAAO,IAElChB,EAAYkB,GAASF,CAAO;AACpC;AAKA,IAAaG,IAAQ,OAAO,OAAON,GAAM;CAOxC,UAAU,GAAoB,MAC7BA,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,QAAQ,GAAoB,MAC3BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAQ,CAAC;CAO/C,UAAU,GAAoB,MAC7BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,OAAO,GAAoB,MAC1BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAO,CAAC;CAM9C,SAASf,EAAY;AACtB,CAAC;AAqID,SAAgBoB,EAAQ,EAAE,iBAAc,IAAM,GAAGC,KAAuB;CACvE,OACC,kBAACpB,GAAD;EACc;EACb,OAAO;GACN,SAAS,kBAACK,GAAD,EAAO,WAAU,sBAAuB,CAAA;GACjD,OAAO,kBAACC,GAAD,EAAa,WAAU,sBAAuB,CAAA;GACrD,SAAS,kBAACC,GAAD,EAAe,WAAU,sBAAuB,CAAA;GACzD,MAAM,kBAACC,GAAD,EAAM,WAAU,sBAAuB,CAAA;GAC7C,OAAO,kBAACa,GAAD,EAAG,WAAU,mBAAoB,CAAA;EACzC;EACA,cAAc;GACb,UAAU;GACV,YAAY;IACX,OACC;IACD,OAAO;IACP,aACC;IACD,aACC;IACD,cACC;IACD,cACC;IACD,MAAM;IACN,SAASlB,EAAc;IACvB,OAAOA,EAAc;IACrB,SAASA,EAAc;IACvB,MAAMA,EAAc;GACrB;EACD;EACA,GAAIiB;CACJ,CAAA;AAEH;AAEA,IAAaE,IAAQH"}

package/dist/components/toggle-group.js

@@ -17,16 +17,17 @@ var c = i.createContext("single"), l = i.forwardRef(({ className: n, children: i
 		value: l.type,
 		children: /* @__PURE__ */ o(s.Root, {
 			ref: f,
-			className: e(t, "relative inline-flex h-8 shrink-0 items-center gap-0.5 rounded-full bg-basalt-muted p-0.5 ring-1 ring-basalt-border/70", n),
+			className: e(t, "relative inline-flex shrink-0 items-center gap-basalt-space-xs rounded-basalt-full bg-basalt-muted p-basalt-space-xs ring-1 ring-basalt-border/70", n),
 			...l,
 			children: [d ? /* @__PURE__ */ a("span", {
 				"aria-hidden": "true",
 				"data-slot": "selection-indicator",
-				className: e("pointer-events-none absolute rounded-full bg-basalt-primary shadow-sm", m),
+				className: e("pointer-events-none absolute rounded-basalt-full bg-basalt-primary", m),
 				style: {
-					left: p.left,
+					left: 0,
+					transform: `translate(${p.left}px, ${p.top}px)`,
 					width: p.visible ? p.width : 0,
-					top: p.top,
+					top: 0,
 					height: p.visible ? p.height : 0
 				}
 			}) : null, i]
@@ -38,7 +39,7 @@ var u = i.forwardRef(({ className: t, ...r }, o) => {
 	let l = i.useContext(c);
 	return /* @__PURE__ */ a(s.Item, {
 		ref: o,
-		className: e("relative inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[11px] font-semibold tracking-wide text-basalt-muted-foreground transition-colors before:absolute before:inset-0", "hover:text-basalt-foreground", n, "aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground", l === "multiple" && "aria-pressed:bg-basalt-primary aria-pressed:shadow-sm", "disabled:pointer-events-none disabled:opacity-50", t),
+		className: e("relative basalt-action basalt-action-sm inline-flex cursor-pointer items-center rounded-basalt-full font-semibold leading-[var(--basalt-line-body)] tracking-wide text-basalt-muted-foreground transition-colors basalt-motion before:absolute before:-inset-basalt-border-width", "hover:text-basalt-foreground", n, "aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground", l === "multiple" && "aria-pressed:bg-basalt-primary", "disabled:pointer-events-none disabled:opacity-50", t),
 		...r
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":["React","ToggleGroupPrimitive","ToggleGroupMode","ToggleGroup","props","sliding","rootRef","useSelectionIndicator","cn","BASALT_UI_CLASS","className","motionClassName","state","children","ToggleGroupItem","mode","FOCUS_RING"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst ToggleGroupMode = React.createContext<\"single\" | \"multiple\">(\"single\");\n\ntype RadixToggleGroupSingleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"single\" };\ntype RadixToggleGroupMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nexport interface ToggleGroupSingleProps\n\textends Omit<\n\t\tRadixToggleGroupSingleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Single-selection mode.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value in single mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupSingleProps[\"value\"];\n\t/**\n\t * Default string value in single mode when initially rendered.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixToggleGroupSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when single selected value changes.\n\t */\n\tonValueChange?: RadixToggleGroupSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupSingleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupSingleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupSingleProps[\"orientation\"];\n}\n\nexport interface ToggleGroupMultipleProps\n\textends Omit<\n\t\tRadixToggleGroupMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Multiple-selection mode.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled array in multiple mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupMultipleProps[\"value\"];\n\t/**\n\t * Default string array in multiple mode when initially rendered.\n\t * @default []\n\t */\n\tdefaultValue?: RadixToggleGroupMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when multiple selected values change.\n\t */\n\tonValueChange?: RadixToggleGroupMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupMultipleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupMultipleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupMultipleProps[\"orientation\"];\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport const ToggleGroup = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Root>,\n\tToggleGroupProps\n>(({ className, children, ...props }, ref) => {\n\tconst sliding = props.type === \"single\";\n\tconst {\n\t\tref: rootRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\t// TooltipTrigger can also own data-state on a composed toggle.\n\t\titemSelector: '[aria-checked=\"true\"]',\n\t\tenabled: sliding,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<ToggleGroupMode.Provider value={props.type}>\n\t\t\t<ToggleGroupPrimitive.Root\n\t\t\t\tref={rootRef}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"relative inline-flex h-8 shrink-0 items-center gap-0.5 rounded-full bg-basalt-muted p-0.5 ring-1 ring-basalt-border/70\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{sliding ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"pointer-events-none absolute rounded-full bg-basalt-primary shadow-sm\",\n\t\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: state.left,\n\t\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\t\ttop: state.top,\n\t\t\t\t\t\t\theight: state.visible ? state.height : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</ToggleGroupPrimitive.Root>\n\t\t</ToggleGroupMode.Provider>\n\t);\n});\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nexport interface ToggleGroupItemProps\n\textends Omit<RadixToggleGroupItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique item value within the group. Forwards ref to HTMLButtonElement.\n\t */\n\tvalue: RadixToggleGroupItemProps[\"value\"];\n\t/**\n\t * Whether this toggle item is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupItemProps[\"disabled\"];\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Item>,\n\tToggleGroupItemProps\n>(({ className, ...props }, ref) => {\n\tconst mode = React.useContext(ToggleGroupMode);\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[11px] font-semibold tracking-wide text-basalt-muted-foreground transition-colors before:absolute before:inset-0\",\n\t\t\t\t\"hover:text-basalt-foreground\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\t\"aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground\",\n\t\t\t\tmode === \"multiple\" && \"aria-pressed:bg-basalt-primary aria-pressed:shadow-sm\",\n\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAkBF,EAAM,cAAqC,QAAQ,GAwF9DG,IAAcH,EAAM,YAG9B,EAAE,cAAW,aAAU,GAAGI,KAAS,MAAQ;CAC7C,IAAMC,IAAUD,EAAM,SAAS,UACzB,EACL,KAAKE,GACL,UACA,uBACGC,EAAsB;EAEzB,cAAc;EACd,SAASF;EACT;CACD,CAAC;CAED,OACC,kBAACH,EAAgB,UAAjB;EAA0B,OAAOE,EAAM;EACtC,UAAA,kBAACH,EAAqB,MAAtB;GACC,KAAKK;GACL,WAAWE,EACVC,GACA,0HACAC,CACD;GACA,GAAIN;GAPL,UAAA,CASEC,IACA,kBAAC,QAAD;IACC,eAAY;IACZ,aAAU;IACV,WAAWG,EACV,yEACAG,CACD;IACA,OAAO;KACN,MAAMC,EAAM;KACZ,OAAOA,EAAM,UAAUA,EAAM,QAAQ;KACrC,KAAKA,EAAM;KACX,QAAQA,EAAM,UAAUA,EAAM,SAAS;IACxC;GACA,CAAA,IACE,MACHC,CACyB;;CACF,CAAA;AAE5B,CAAC;AACD,EAAY,cAAcZ,EAAqB,KAAK;AAepD,IAAaa,IAAkBd,EAAM,YAGlC,EAAE,cAAW,GAAGI,KAAS,MAAQ;CACnC,IAAMW,IAAOf,EAAM,WAAWE,CAAe;CAC7C,OACC,kBAACD,EAAqB,MAAtB;EACM;EACL,WAAWO,EACV,kMACA,gCACAQ,GACA,2FACAD,MAAS,cAAc,yDACvB,oDACAL,CACD;EACA,GAAIN;CACJ,CAAA;AAEH,CAAC;AACD,EAAgB,cAAcH,EAAqB,KAAK"}
+{"version":3,"file":"toggle-group.js","names":["React","ToggleGroupPrimitive","ToggleGroupMode","ToggleGroup","props","sliding","rootRef","useSelectionIndicator","cn","BASALT_UI_CLASS","className","motionClassName","state","children","ToggleGroupItem","mode","FOCUS_RING"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst ToggleGroupMode = React.createContext<\"single\" | \"multiple\">(\"single\");\n\ntype RadixToggleGroupSingleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"single\" };\ntype RadixToggleGroupMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nexport interface ToggleGroupSingleProps\n\textends Omit<\n\t\tRadixToggleGroupSingleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Single-selection mode.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value in single mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupSingleProps[\"value\"];\n\t/**\n\t * Default string value in single mode when initially rendered.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixToggleGroupSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when single selected value changes.\n\t */\n\tonValueChange?: RadixToggleGroupSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupSingleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupSingleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupSingleProps[\"orientation\"];\n}\n\nexport interface ToggleGroupMultipleProps\n\textends Omit<\n\t\tRadixToggleGroupMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Multiple-selection mode.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled array in multiple mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupMultipleProps[\"value\"];\n\t/**\n\t * Default string array in multiple mode when initially rendered.\n\t * @default []\n\t */\n\tdefaultValue?: RadixToggleGroupMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when multiple selected values change.\n\t */\n\tonValueChange?: RadixToggleGroupMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupMultipleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupMultipleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupMultipleProps[\"orientation\"];\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport const ToggleGroup = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Root>,\n\tToggleGroupProps\n>(({ className, children, ...props }, ref) => {\n\tconst sliding = props.type === \"single\";\n\tconst {\n\t\tref: rootRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\t// TooltipTrigger can also own data-state on a composed toggle.\n\t\titemSelector: '[aria-checked=\"true\"]',\n\t\tenabled: sliding,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<ToggleGroupMode.Provider value={props.type}>\n\t\t\t<ToggleGroupPrimitive.Root\n\t\t\t\tref={rootRef}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"relative inline-flex shrink-0 items-center gap-basalt-space-xs rounded-basalt-full bg-basalt-muted p-basalt-space-xs ring-1 ring-basalt-border/70\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{sliding ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"pointer-events-none absolute rounded-basalt-full bg-basalt-primary\",\n\t\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\theight: state.visible ? state.height : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</ToggleGroupPrimitive.Root>\n\t\t</ToggleGroupMode.Provider>\n\t);\n});\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nexport interface ToggleGroupItemProps\n\textends Omit<RadixToggleGroupItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique item value within the group. Forwards ref to HTMLButtonElement.\n\t */\n\tvalue: RadixToggleGroupItemProps[\"value\"];\n\t/**\n\t * Whether this toggle item is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupItemProps[\"disabled\"];\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Item>,\n\tToggleGroupItemProps\n>(({ className, ...props }, ref) => {\n\tconst mode = React.useContext(ToggleGroupMode);\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative basalt-action basalt-action-sm inline-flex cursor-pointer items-center rounded-basalt-full font-semibold leading-[var(--basalt-line-body)] tracking-wide text-basalt-muted-foreground transition-colors basalt-motion before:absolute before:-inset-basalt-border-width\",\n\t\t\t\t\"hover:text-basalt-foreground\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\t\"aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground\",\n\t\t\t\tmode === \"multiple\" && \"aria-pressed:bg-basalt-primary\",\n\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAkBF,EAAM,cAAqC,QAAQ,GAwF9DG,IAAcH,EAAM,YAG9B,EAAE,cAAW,aAAU,GAAGI,KAAS,MAAQ;CAC7C,IAAMC,IAAUD,EAAM,SAAS,UACzB,EACL,KAAKE,GACL,UACA,uBACGC,EAAsB;EAEzB,cAAc;EACd,SAASF;EACT;CACD,CAAC;CAED,OACC,kBAACH,EAAgB,UAAjB;EAA0B,OAAOE,EAAM;EACtC,UAAA,kBAACH,EAAqB,MAAtB;GACC,KAAKK;GACL,WAAWE,EACVC,GACA,qJACAC,CACD;GACA,GAAIN;GAPL,UAAA,CASEC,IACA,kBAAC,QAAD;IACC,eAAY;IACZ,aAAU;IACV,WAAWG,EACV,sEACAG,CACD;IACA,OAAO;KACN,MAAM;KACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;KACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;KACrC,KAAK;KACL,QAAQA,EAAM,UAAUA,EAAM,SAAS;IACxC;GACA,CAAA,IACE,MACHC,CACyB;;CACF,CAAA;AAE5B,CAAC;AACD,EAAY,cAAcZ,EAAqB,KAAK;AAepD,IAAaa,IAAkBd,EAAM,YAGlC,EAAE,cAAW,GAAGI,KAAS,MAAQ;CACnC,IAAMW,IAAOf,EAAM,WAAWE,CAAe;CAC7C,OACC,kBAACD,EAAqB,MAAtB;EACM;EACL,WAAWO,EACV,oRACA,gCACAQ,GACA,2FACAD,MAAS,cAAc,kCACvB,oDACAL,CACD;EACA,GAAIN;CACJ,CAAA;AAEH,CAAC;AACD,EAAgB,cAAcH,EAAqB,KAAK"}

package/dist/components/toggle.js

@@ -7,16 +7,16 @@ import { cva as i } from "class-variance-authority";
 import { jsx as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-toggle";
 //#region src/components/toggle.tsx
-var s = i(`${t} relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 hover:bg-basalt-accent aria-pressed:bg-basalt-accent ${n}`, {
+var s = i(`${t} basalt-choice relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md font-medium transition-colors basalt-motion before:absolute before:-inset-basalt-border-width hover:bg-basalt-hover ${n}`, {
 	variants: {
 		variant: {
-			default: "bg-basalt-muted text-basalt-foreground",
-			outline: "border border-basalt-border bg-basalt-secondary"
+			default: "bg-basalt-control text-basalt-foreground",
+			outline: "border border-basalt-border bg-basalt-control"
 		},
 		size: {
-			default: "h-9 px-3",
-			sm: "h-8 px-2 text-xs",
-			lg: "h-10 px-4"
+			default: "basalt-action",
+			sm: "basalt-action basalt-action-sm",
+			lg: "basalt-action basalt-action-lg"
 		}
 	},
 	defaultVariants: {

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":["React","TogglePrimitive","toggleVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Toggle","props","cn","className"],"sources":["../../src/components/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst toggleVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 hover:bg-basalt-accent aria-pressed:bg-basalt-accent ${FOCUS_RING}`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\toutline: \"border border-basalt-border bg-basalt-secondary\",\n\t\t\t},\n\t\t\tsize: { default: \"h-9 px-3\", sm: \"h-8 px-2 text-xs\", lg: \"h-10 px-4\" },\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\ntype RadixToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>;\n\nexport interface ToggleProps\n\textends Omit<RadixToggleProps, \"pressed\" | \"defaultPressed\" | \"onPressedChange\" | \"disabled\">,\n\t\tOmit<VariantProps<typeof toggleVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof toggleVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof toggleVariants>[\"size\"];\n\t/**\n\t * Controlled pressed state of the toggle. Forwards ref to HTMLButtonElement.\n\t */\n\tpressed?: RadixToggleProps[\"pressed\"];\n\t/**\n\t * Uncontrolled pressed state when initially rendered.\n\t * @default false\n\t */\n\tdefaultPressed?: RadixToggleProps[\"defaultPressed\"];\n\t/**\n\t * Callback invoked when pressed state changes.\n\t */\n\tonPressedChange?: RadixToggleProps[\"onPressedChange\"];\n\t/**\n\t * Whether the toggle is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleProps[\"disabled\"];\n}\n\nexport const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(\n\t({ className, variant, size, ...props }, ref) => (\n\t\t<TogglePrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(toggleVariants({ variant, size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToggle.displayName = TogglePrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAiBC,EACtB,GAAGC,EAAgB,+MAA+MC,KAClO;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,SAAS;EACV;EACA,MAAM;GAAE,SAAS;GAAY,IAAI;GAAoB,IAAI;EAAY;CACtE;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACxD,CACD,GAqCaC,IAASN,EAAM,YAC1B,EAAE,cAAW,YAAS,SAAM,GAAGO,KAAS,MACxC,kBAACN,EAAgB,MAAjB;CACM;CACL,WAAWO,EAAGN,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGO,CAAS;CAC1D,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcN,EAAgB,KAAK"}
+{"version":3,"file":"toggle.js","names":["React","TogglePrimitive","toggleVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Toggle","props","cn","className"],"sources":["../../src/components/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst toggleVariants = cva(\n\t`${BASALT_UI_CLASS} basalt-choice relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md font-medium transition-colors basalt-motion before:absolute before:-inset-basalt-border-width hover:bg-basalt-hover ${FOCUS_RING}`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-control text-basalt-foreground\",\n\t\t\t\toutline: \"border border-basalt-border bg-basalt-control\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"basalt-action\",\n\t\t\t\tsm: \"basalt-action basalt-action-sm\",\n\t\t\t\tlg: \"basalt-action basalt-action-lg\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\ntype RadixToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>;\n\nexport interface ToggleProps\n\textends Omit<RadixToggleProps, \"pressed\" | \"defaultPressed\" | \"onPressedChange\" | \"disabled\">,\n\t\tOmit<VariantProps<typeof toggleVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof toggleVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof toggleVariants>[\"size\"];\n\t/**\n\t * Controlled pressed state of the toggle. Forwards ref to HTMLButtonElement.\n\t */\n\tpressed?: RadixToggleProps[\"pressed\"];\n\t/**\n\t * Uncontrolled pressed state when initially rendered.\n\t * @default false\n\t */\n\tdefaultPressed?: RadixToggleProps[\"defaultPressed\"];\n\t/**\n\t * Callback invoked when pressed state changes.\n\t */\n\tonPressedChange?: RadixToggleProps[\"onPressedChange\"];\n\t/**\n\t * Whether the toggle is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleProps[\"disabled\"];\n}\n\nexport const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(\n\t({ className, variant, size, ...props }, ref) => (\n\t\t<TogglePrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(toggleVariants({ variant, size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToggle.displayName = TogglePrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAiBC,EACtB,GAAGC,EAAgB,uNAAuNC,KAC1O;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,SAAS;EACV;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;EACL;CACD;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACxD,CACD,GAqCaC,IAASN,EAAM,YAC1B,EAAE,cAAW,YAAS,SAAM,GAAGO,KAAS,MACxC,kBAACN,EAAgB,MAAjB;CACM;CACL,WAAWO,EAAGN,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGO,CAAS;CAC1D,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcN,EAAgB,KAAK"}

package/dist/components/tool-chips.d.ts

@@ -0,0 +1,12 @@
+import type { ToolDiff, ToolStep } from "../models/agent-feedback.js";
+export type { ToolDiff, ToolStep } from "../models/agent-feedback.js";
+export interface ToolChipsProps {
+    /** Caller-owned tool activity; statuses never advance automatically. */
+    steps: readonly ToolStep[];
+    diffs?: readonly ToolDiff[];
+    title?: string;
+    /** Start with the tool list expanded. @default true */
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare function ToolChips({ steps, diffs, title, defaultOpen, className, }: ToolChipsProps): import("react").JSX.Element;