@nocoo/basalt 2.1.8 → 3.0.0

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nconst badgeVariants = cva(\n\t\"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-transparent bg-basalt-primary text-basalt-primary-foreground\",\n\t\t\t\tsecondary: \"border-transparent bg-basalt-secondary text-basalt-foreground\",\n\t\t\t\tdestructive: \"border-transparent bg-basalt-destructive text-basalt-destructive-foreground\",\n\t\t\t\toutline: \"border-basalt-border text-basalt-foreground\",\n\t\t\t\tinfo: \"border-transparent bg-basalt-info-tint text-basalt-info\",\n\t\t\t\tsuccess: \"border-transparent bg-basalt-heatmap-green-3 text-white\",\n\t\t\t\twarning: \"border-transparent bg-basalt-warning-tint text-basalt-warning\",\n\t\t\t\terror: \"border-transparent bg-basalt-danger-tint text-basalt-danger\",\n\t\t\t\tred: \"border-transparent bg-basalt-danger text-white\",\n\t\t\t\torange: \"border-transparent bg-basalt-warning text-white\",\n\t\t\t\tteal: \"border-transparent bg-basalt-badge-teal text-white\",\n\t\t\t\tblue: \"border-transparent bg-basalt-info text-white\",\n\t\t\t\tpurple: \"border-transparent bg-basalt-badge-purple text-white\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\" },\n\t},\n);\n\nexport interface BadgeProps\n\textends React.HTMLAttributes<HTMLSpanElement>,\n\t\tOmit<VariantProps<typeof badgeVariants>, \"variant\"> {\n\t/**\n\t * Visual style variant for the badge.\n\t *\n\t * Note: Supports standard semantic tones and decorative color tokens.\n\t * Pass null to omit variant styling.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof badgeVariants>[\"variant\"];\n\n\t/**\n\t * Renders a small circular dot indicator before children.\n\t *\n\t * @default false\n\t */\n\tdot?: boolean;\n}\n\nexport function Badge({ className, variant, dot, children, ...props }: BadgeProps) {\n\treturn (\n\t\t<span className={cn(BASALT_UI_CLASS, badgeVariants({ variant }), className)} {...props}>\n\t\t\t{dot ? <span className=\"size-1.5 rounded-full bg-current\" aria-hidden=\"true\" /> : null}\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;AAKA,IAAM,IAAgB,EACrB,0FACA;CACC,UAAU,EACT,SAAS;EACR,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,KAAK;EACL,QAAQ;EACR,MAAM;EACN,MAAM;EACN,QAAQ;CACT,EACD;CACA,iBAAiB,EAAE,SAAS,UAAU;AACvC,CACD;AAuBA,SAAgB,EAAM,EAAE,cAAW,YAAS,QAAK,aAAU,GAAG,KAAqB;CAClF,OACC,kBAAC,QAAD;EAAM,WAAW,EAAG,GAAiB,EAAc,EAAE,WAAQ,CAAC,GAAG,CAAS;EAAG,GAAI;EAAjF,UAAA,CACE,IAAM,kBAAC,QAAD;GAAM,WAAU;GAAmC,eAAY;EAAQ,CAAA,IAAI,MACjF,CACI;;AAER"}
+{"version":3,"file":"badge.js","names":["badgeVariants","cva","Badge","props","cn","BASALT_UI_CLASS","className","dot","children"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nconst badgeVariants = cva(\n\t\"inline-flex items-center gap-basalt-space-md rounded-basalt-full border basalt-inline font-medium\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-transparent bg-basalt-primary text-basalt-primary-foreground\",\n\t\t\t\tsecondary: \"border-transparent bg-basalt-secondary text-basalt-foreground\",\n\t\t\t\tdestructive: \"border-transparent bg-basalt-destructive text-basalt-destructive-foreground\",\n\t\t\t\toutline: \"border-basalt-border text-basalt-foreground\",\n\t\t\t\tinfo: \"border-transparent bg-basalt-info-tint text-basalt-info\",\n\t\t\t\tsuccess: \"border-transparent bg-basalt-badge-green text-basalt-badge-green-foreground\",\n\t\t\t\twarning: \"border-transparent bg-basalt-warning-tint text-basalt-warning\",\n\t\t\t\terror: \"border-transparent bg-basalt-danger-tint text-basalt-danger\",\n\t\t\t\tred: \"border-transparent bg-basalt-danger text-basalt-danger-foreground\",\n\t\t\t\torange: \"border-transparent bg-basalt-warning text-basalt-warning-foreground\",\n\t\t\t\tteal: \"border-transparent bg-basalt-badge-teal text-basalt-badge-teal-foreground\",\n\t\t\t\tblue: \"border-transparent bg-basalt-info text-basalt-info-foreground\",\n\t\t\t\tpurple: \"border-transparent bg-basalt-badge-purple text-basalt-badge-purple-foreground\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\" },\n\t},\n);\n\nexport interface BadgeProps\n\textends React.HTMLAttributes<HTMLSpanElement>,\n\t\tOmit<VariantProps<typeof badgeVariants>, \"variant\"> {\n\t/**\n\t * Visual style variant for the badge.\n\t *\n\t * Note: Supports standard semantic tones and decorative color tokens.\n\t * Pass null to omit variant styling.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof badgeVariants>[\"variant\"];\n\n\t/**\n\t * Renders a small circular dot indicator before children.\n\t *\n\t * @default false\n\t */\n\tdot?: boolean;\n}\n\nexport function Badge({ className, variant, dot, children, ...props }: BadgeProps) {\n\treturn (\n\t\t<span className={cn(BASALT_UI_CLASS, badgeVariants({ variant }), className)} {...props}>\n\t\t\t{dot ? (\n\t\t\t\t<span className=\"size-basalt-1_5 rounded-basalt-full bg-current\" aria-hidden=\"true\" />\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;AAKA,IAAMA,IAAgBC,EACrB,qGACA;CACC,UAAU,EACT,SAAS;EACR,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,KAAK;EACL,QAAQ;EACR,MAAM;EACN,MAAM;EACN,QAAQ;CACT,EACD;CACA,iBAAiB,EAAE,SAAS,UAAU;AACvC,CACD;AAuBA,SAAgBC,EAAM,EAAE,cAAW,YAAS,QAAK,aAAU,GAAGC,KAAqB;CAClF,OACC,kBAAC,QAAD;EAAM,WAAWC,EAAGC,GAAiBL,EAAc,EAAE,WAAQ,CAAC,GAAGM,CAAS;EAAG,GAAIH;EAAjF,UAAA,CACEI,IACA,kBAAC,QAAD;GAAM,WAAU;GAAiD,eAAY;EAAQ,CAAA,IAClF,MACHC,CACI;;AAER"}

package/dist/components/banner.d.ts

@@ -15,7 +15,7 @@ export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title
      */
     variant?: VariantProps<typeof bannerVariants>["variant"];
     /**
-     * Sizing preset controlling padding geometry and action placement.
+     * Sizing preset controlling action placement; shared banner padding stays consistent.
      *
      * Note: Defaults to "base". In compact mode ("sm"), only direct `<Banner.Action>` elements
      * are placed in the trailing slot, while other action content renders inline next to the description.
@@ -67,7 +67,7 @@ export interface BannerActionProps extends Omit<ButtonProps, "variant" | "size"
     /**
      * Sizing preset. When unspecified or null, resolves to "icon" if children are omitted,
      * null, or an empty string, "sm" when parent Banner is compact ("sm"), or "default" otherwise.
-     * When iconOnly mode is resolved, an additional "size-8" class is attached.
+     * Icon-only mode uses the shared intrinsic icon action size.
      */
     size?: ButtonProps["size"];
     /**

package/dist/components/banner.js

@@ -6,17 +6,17 @@ import { Children as r, createContext as i, isValidElement as a, useContext as o
 import { cva as s } from "class-variance-authority";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/banner.tsx
-var d = s("flex w-full items-start gap-3 rounded-basalt-md text-sm", {
+var d = s("basalt-banner flex w-full items-start gap-basalt-space-lg rounded-basalt-md", {
 	variants: {
 		variant: {
 			default: "bg-basalt-info-tint text-basalt-info",
 			alert: "bg-basalt-warning-tint text-basalt-warning",
 			error: "bg-basalt-danger-tint text-basalt-danger",
-			secondary: "bg-basalt-muted text-basalt-foreground"
+			secondary: "text-basalt-foreground"
 		},
 		size: {
-			base: "px-4 py-3",
-			sm: "px-3 py-2"
+			base: "",
+			sm: ""
 		}
 	},
 	defaultVariants: {
@@ -38,6 +38,7 @@ function m({ className: n, variant: i = "default", size: a = "base", title: o, d
 			size: y
 		},
 		children: /* @__PURE__ */ u("div", {
+			"data-basalt-surface": v === "secondary" ? "" : void 0,
 			className: e(t, d({
 				variant: v,
 				size: y
@@ -45,11 +46,11 @@ function m({ className: n, variant: i = "default", size: a = "base", title: o, d
 			..._,
 			children: [
 				m ? /* @__PURE__ */ l("span", {
-					className: "mt-0.5 inline-flex shrink-0 [&_svg]:size-5",
+					className: "inline-flex h-[1lh] shrink-0 items-center [&_svg]:size-basalt-icon-lg",
 					children: m
 				}) : null,
 				/* @__PURE__ */ u("div", {
-					className: "min-w-0 flex-1 space-y-0.5",
+					className: "min-w-0 flex-1 space-y-basalt-space-xs",
 					children: [
 						o ? /* @__PURE__ */ l("p", {
 							className: "font-medium",
@@ -63,7 +64,7 @@ function m({ className: n, variant: i = "default", size: a = "base", title: o, d
 					]
 				}),
 				w.length > 0 ? /* @__PURE__ */ l("div", {
-					className: "flex shrink-0 items-center gap-2",
+					className: "flex shrink-0 items-center gap-basalt-space-lg",
 					children: w
 				}) : null
 			]
@@ -76,7 +77,7 @@ function h({ className: t, variant: r = "default", size: i, icon: a, children: s
 		variant: d,
 		size: i ?? (p ? "icon" : u.size === "sm" ? "sm" : "default"),
 		icon: a,
-		className: e(p && "size-8", t),
+		className: e(p && "basalt-action-icon", t),
 		...c,
 		children: s
 	});

package/dist/components/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../src/components/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChildren,\n\tcreateContext,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactNode,\n\tuseContext,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\n\nconst bannerVariants = cva(\"flex w-full items-start gap-3 rounded-basalt-md text-sm\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"bg-basalt-info-tint text-basalt-info\",\n\t\t\talert: \"bg-basalt-warning-tint text-basalt-warning\",\n\t\t\terror: \"bg-basalt-danger-tint text-basalt-danger\",\n\t\t\tsecondary: \"bg-basalt-muted text-basalt-foreground\",\n\t\t},\n\t\tsize: {\n\t\t\tbase: \"px-4 py-3\",\n\t\t\tsm: \"px-3 py-2\",\n\t\t},\n\t},\n\tdefaultVariants: { variant: \"default\", size: \"base\" },\n});\n\ntype BannerVariant = NonNullable<VariantProps<typeof bannerVariants>[\"variant\"]>;\ntype BannerSize = NonNullable<VariantProps<typeof bannerVariants>[\"size\"]>;\n\nconst BannerContext = createContext<{ variant: BannerVariant; size: BannerSize }>({\n\tvariant: \"default\",\n\tsize: \"base\",\n});\n\nexport interface BannerProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\">,\n\t\tOmit<VariantProps<typeof bannerVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual tone variant of the banner.\n\t *\n\t * Note: Defaults to \"default\" (informational). Passing null falls back to \"default\".\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof bannerVariants>[\"variant\"];\n\n\t/**\n\t * Sizing preset controlling padding geometry and action placement.\n\t *\n\t * Note: Defaults to \"base\". In compact mode (\"sm\"), only direct `<Banner.Action>` elements\n\t * are placed in the trailing slot, while other action content renders inline next to the description.\n\t * Passing null falls back to \"base\".\n\t *\n\t * @default \"base\"\n\t */\n\tsize?: VariantProps<typeof bannerVariants>[\"size\"];\n\n\t/**\n\t * Primary heading text.\n\t *\n\t * Note: When present (or when description is present), structured mode is enabled\n\t * and standard children are not rendered.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary copy rendered below the title.\n\t */\n\tdescription?: ReactNode;\n\n\t/**\n\t * Visual icon rendered before the banner content.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Trailing or inline call-to-action slot.\n\t * Pass `<Banner.Action>` elements for contextual styling.\n\t * In compact mode (\"sm\"), only direct `<Banner.Action>` elements are placed in the trailing slot,\n\t * while other action content renders inline next to the description.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Unstructured child content rendered only when both title and description are null or undefined.\n\t * When title or description is non-null/non-undefined (including empty string or false),\n\t * structured mode is active and children are ignored.\n\t */\n\tchildren?: HTMLAttributes<HTMLDivElement>[\"children\"];\n}\n\nexport interface BannerActionProps\n\textends Omit<\n\t\tButtonProps,\n\t\t\"variant\" | \"size\" | \"asChild\" | \"type\" | \"loading\" | \"icon\" | \"children\"\n\t> {\n\t/**\n\t * Visual style variant. Preserves \"ghost\" and \"secondary\"; all other values\n\t * are mapped contextually to \"destructive\" (when parent Banner variant is \"error\")\n\t * or \"default\".\n\t *\n\t * Note: Ordinary function component without forwarded ref.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\n\t/**\n\t * Sizing preset. When unspecified or null, resolves to \"icon\" if children are omitted,\n\t * null, or an empty string, \"sm\" when parent Banner is compact (\"sm\"), or \"default\" otherwise.\n\t * When iconOnly mode is resolved, an additional \"size-8\" class is attached.\n\t */\n\tsize?: ButtonProps[\"size\"];\n\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * @default false\n\t */\n\tasChild?: ButtonProps[\"asChild\"];\n\n\t/**\n\t * Button type attribute.\n\t *\n\t * @default \"button\"\n\t */\n\ttype?: ButtonProps[\"type\"];\n\n\t/**\n\t * Display loading spinner and disable interactions.\n\t *\n\t * @default false\n\t */\n\tloading?: ButtonProps[\"loading\"];\n\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: ButtonProps[\"icon\"];\n\n\t/**\n\t * Action label content. When null, undefined, or empty string, enables iconOnly sizing mode.\n\t */\n\tchildren?: ButtonProps[\"children\"];\n}\n\nfunction isBannerAction(node: ReactNode): boolean {\n\treturn isValidElement(node) && node.type === BannerAction;\n}\n\nfunction BannerRoot({\n\tclassName,\n\tvariant = \"default\",\n\tsize = \"base\",\n\ttitle,\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\t...props\n}: BannerProps) {\n\tconst resolvedVariant = variant ?? \"default\";\n\tconst resolvedSize = size ?? \"base\";\n\tconst structured = title != null || description != null;\n\tconst nodes = Children.toArray(action);\n\tconst ctas = nodes.filter(isBannerAction);\n\tconst other = nodes.filter((node) => !isBannerAction(node));\n\tconst trailing = resolvedSize === \"sm\" ? ctas : [...other, ...ctas];\n\tconst inlineActions = resolvedSize === \"sm\" ? other : [];\n\n\treturn (\n\t\t<BannerContext.Provider value={{ variant: resolvedVariant, size: resolvedSize }}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\tbannerVariants({ variant: resolvedVariant, size: resolvedSize }),\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{icon ? <span className=\"mt-0.5 inline-flex shrink-0 [&_svg]:size-5\">{icon}</span> : null}\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-0.5\">\n\t\t\t\t\t{title ? <p className=\"font-medium\">{title}</p> : null}\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tresolvedVariant === \"secondary\" ? \"text-basalt-muted-foreground\" : \"text-current\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t{inlineActions.length > 0 ? <> {inlineActions}</> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : inlineActions.length > 0 ? (\n\t\t\t\t\t\t<div>{inlineActions}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{structured ? null : children}\n\t\t\t\t</div>\n\t\t\t\t{trailing.length > 0 ? (\n\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-2\">{trailing}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</BannerContext.Provider>\n\t);\n}\n\nexport function BannerAction({\n\tclassName,\n\tvariant = \"default\",\n\tsize,\n\ticon,\n\tchildren,\n\t...props\n}: BannerActionProps) {\n\tconst banner = useContext(BannerContext);\n\tconst mapped =\n\t\tvariant === \"ghost\"\n\t\t\t? \"ghost\"\n\t\t\t: variant === \"secondary\"\n\t\t\t\t? \"secondary\"\n\t\t\t\t: banner.variant === \"error\"\n\t\t\t\t\t? \"destructive\"\n\t\t\t\t\t: \"default\";\n\tconst iconOnly = children == null || children === \"\";\n\treturn (\n\t\t<Button\n\t\t\tvariant={mapped}\n\t\t\tsize={size ?? (iconOnly ? \"icon\" : banner.size === \"sm\" ? \"sm\" : \"default\")}\n\t\t\ticon={icon}\n\t\t\tclassName={cn(iconOnly && \"size-8\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\nBannerAction.displayName = \"Banner.Action\";\n\nexport const Banner = Object.assign(BannerRoot, { Action: BannerAction });\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAiB,EAAI,2DAA2D;CACrF,UAAU;EACT,SAAS;GACR,SAAS;GACT,OAAO;GACP,OAAO;GACP,WAAW;EACZ;EACA,MAAM;GACL,MAAM;GACN,IAAI;EACL;CACD;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAO;AACrD,CAAC,GAKK,IAAgB,EAA4D;CACjF,SAAS;CACT,MAAM;AACP,CAAC;AAkHD,SAAS,EAAe,GAA0B;CACjD,OAAO,EAAe,CAAI,KAAK,EAAK,SAAS;AAC9C;AAEA,SAAS,EAAW,EACnB,cACA,aAAU,WACV,UAAO,QACP,UACA,gBACA,SACA,WACA,aACA,GAAG,KACY;CACf,IAAM,IAAkB,KAAW,WAC7B,IAAe,KAAQ,QACvB,IAAa,KAAS,QAAQ,KAAe,MAC7C,IAAQ,EAAS,QAAQ,CAAM,GAC/B,IAAO,EAAM,OAAO,CAAc,GAClC,IAAQ,EAAM,QAAQ,MAAS,CAAC,EAAe,CAAI,CAAC,GACpD,IAAW,MAAiB,OAAO,IAAO,CAAC,GAAG,GAAO,GAAG,CAAI,GAC5D,IAAgB,MAAiB,OAAO,IAAQ,CAAC;CAEvD,OACC,kBAAC,EAAc,UAAf;EAAwB,OAAO;GAAE,SAAS;GAAiB,MAAM;EAAa;EAC7E,UAAA,kBAAC,OAAD;GACC,WAAW,EACV,GACA,EAAe;IAAE,SAAS;IAAiB,MAAM;GAAa,CAAC,GAC/D,CACD;GACA,GAAI;GANL,UAAA;IAQE,IAAO,kBAAC,QAAD;KAAM,WAAU;KAA8C,UAAA;IAAW,CAAA,IAAI;IACrF,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,IAAQ,kBAAC,KAAD;OAAG,WAAU;OAAe,UAAA;MAAS,CAAA,IAAI;MACjD,IACA,kBAAC,OAAD;OACC,WAAW,EACV,MAAoB,cAAc,iCAAiC,cACpE;OAHD,UAAA,CAKE,GACA,EAAc,SAAS,IAAI,kBAAA,GAAA,EAAA,UAAA,CAAE,KAAE,CAAgB,EAAA,CAAA,IAAI,IAChD;MACF,CAAA,IAAA,EAAc,SAAS,IAC1B,kBAAC,OAAD,EAAA,UAAM,EAAmB,CAAA,IACtB;MACH,IAAa,OAAO;KACjB;;IACJ,EAAS,SAAS,IAClB,kBAAC,OAAD;KAAK,WAAU;KAAoC,UAAA;IAAc,CAAA,IAC9D;GACA;;CACkB,CAAA;AAE1B;AAEA,SAAgB,EAAa,EAC5B,cACA,aAAU,WACV,SACA,SACA,aACA,GAAG,KACkB;CACrB,IAAM,IAAS,EAAW,CAAa,GACjC,IACL,MAAY,UACT,UACA,MAAY,cACX,cACA,EAAO,YAAY,UAClB,gBACA,WACA,IAAW,KAAY,QAAQ,MAAa;CAClD,OACC,kBAAC,GAAD;EACC,SAAS;EACT,MAAM,MAAS,IAAW,SAAS,EAAO,SAAS,OAAO,OAAO;EAC3D;EACN,WAAW,EAAG,KAAY,UAAU,CAAS;EAC7C,GAAI;EAEH;CACM,CAAA;AAEV;AACA,EAAa,cAAc;AAE3B,IAAa,IAAS,OAAO,OAAO,GAAY,EAAE,QAAQ,EAAa,CAAC"}
+{"version":3,"file":"banner.js","names":["_Fragment","Fragment$1","bannerVariants","cva","BannerContext","createContext","isBannerAction","isValidElement","node","BannerAction","BannerRoot","props","resolvedVariant","variant","resolvedSize","size","structured","title","description","nodes","Children","action","ctas","other","trailing","inlineActions","cn","BASALT_UI_CLASS","className","icon","children","banner","useContext","mapped","iconOnly","Button","Banner"],"sources":["../../src/components/banner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChildren,\n\tcreateContext,\n\ttype HTMLAttributes,\n\tisValidElement,\n\ttype ReactNode,\n\tuseContext,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button, type ButtonProps } from \"./button\";\n\nconst bannerVariants = cva(\n\t\"basalt-banner flex w-full items-start gap-basalt-space-lg rounded-basalt-md\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-info-tint text-basalt-info\",\n\t\t\t\talert: \"bg-basalt-warning-tint text-basalt-warning\",\n\t\t\t\terror: \"bg-basalt-danger-tint text-basalt-danger\",\n\t\t\t\tsecondary: \"text-basalt-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tbase: \"\",\n\t\t\t\tsm: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"base\" },\n\t},\n);\n\ntype BannerVariant = NonNullable<VariantProps<typeof bannerVariants>[\"variant\"]>;\ntype BannerSize = NonNullable<VariantProps<typeof bannerVariants>[\"size\"]>;\n\nconst BannerContext = createContext<{ variant: BannerVariant; size: BannerSize }>({\n\tvariant: \"default\",\n\tsize: \"base\",\n});\n\nexport interface BannerProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"children\">,\n\t\tOmit<VariantProps<typeof bannerVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual tone variant of the banner.\n\t *\n\t * Note: Defaults to \"default\" (informational). Passing null falls back to \"default\".\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof bannerVariants>[\"variant\"];\n\n\t/**\n\t * Sizing preset controlling action placement; shared banner padding stays consistent.\n\t *\n\t * Note: Defaults to \"base\". In compact mode (\"sm\"), only direct `<Banner.Action>` elements\n\t * are placed in the trailing slot, while other action content renders inline next to the description.\n\t * Passing null falls back to \"base\".\n\t *\n\t * @default \"base\"\n\t */\n\tsize?: VariantProps<typeof bannerVariants>[\"size\"];\n\n\t/**\n\t * Primary heading text.\n\t *\n\t * Note: When present (or when description is present), structured mode is enabled\n\t * and standard children are not rendered.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Secondary copy rendered below the title.\n\t */\n\tdescription?: ReactNode;\n\n\t/**\n\t * Visual icon rendered before the banner content.\n\t */\n\ticon?: ReactNode;\n\n\t/**\n\t * Trailing or inline call-to-action slot.\n\t * Pass `<Banner.Action>` elements for contextual styling.\n\t * In compact mode (\"sm\"), only direct `<Banner.Action>` elements are placed in the trailing slot,\n\t * while other action content renders inline next to the description.\n\t */\n\taction?: ReactNode;\n\n\t/**\n\t * Unstructured child content rendered only when both title and description are null or undefined.\n\t * When title or description is non-null/non-undefined (including empty string or false),\n\t * structured mode is active and children are ignored.\n\t */\n\tchildren?: HTMLAttributes<HTMLDivElement>[\"children\"];\n}\n\nexport interface BannerActionProps\n\textends Omit<\n\t\tButtonProps,\n\t\t\"variant\" | \"size\" | \"asChild\" | \"type\" | \"loading\" | \"icon\" | \"children\"\n\t> {\n\t/**\n\t * Visual style variant. Preserves \"ghost\" and \"secondary\"; all other values\n\t * are mapped contextually to \"destructive\" (when parent Banner variant is \"error\")\n\t * or \"default\".\n\t *\n\t * Note: Ordinary function component without forwarded ref.\n\t *\n\t * @default \"default\"\n\t */\n\tvariant?: ButtonProps[\"variant\"];\n\n\t/**\n\t * Sizing preset. When unspecified or null, resolves to \"icon\" if children are omitted,\n\t * null, or an empty string, \"sm\" when parent Banner is compact (\"sm\"), or \"default\" otherwise.\n\t * Icon-only mode uses the shared intrinsic icon action size.\n\t */\n\tsize?: ButtonProps[\"size\"];\n\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * @default false\n\t */\n\tasChild?: ButtonProps[\"asChild\"];\n\n\t/**\n\t * Button type attribute.\n\t *\n\t * @default \"button\"\n\t */\n\ttype?: ButtonProps[\"type\"];\n\n\t/**\n\t * Display loading spinner and disable interactions.\n\t *\n\t * @default false\n\t */\n\tloading?: ButtonProps[\"loading\"];\n\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: ButtonProps[\"icon\"];\n\n\t/**\n\t * Action label content. When null, undefined, or empty string, enables iconOnly sizing mode.\n\t */\n\tchildren?: ButtonProps[\"children\"];\n}\n\nfunction isBannerAction(node: ReactNode): boolean {\n\treturn isValidElement(node) && node.type === BannerAction;\n}\n\nfunction BannerRoot({\n\tclassName,\n\tvariant = \"default\",\n\tsize = \"base\",\n\ttitle,\n\tdescription,\n\ticon,\n\taction,\n\tchildren,\n\t...props\n}: BannerProps) {\n\tconst resolvedVariant = variant ?? \"default\";\n\tconst resolvedSize = size ?? \"base\";\n\tconst structured = title != null || description != null;\n\tconst nodes = Children.toArray(action);\n\tconst ctas = nodes.filter(isBannerAction);\n\tconst other = nodes.filter((node) => !isBannerAction(node));\n\tconst trailing = resolvedSize === \"sm\" ? ctas : [...other, ...ctas];\n\tconst inlineActions = resolvedSize === \"sm\" ? other : [];\n\n\treturn (\n\t\t<BannerContext.Provider value={{ variant: resolvedVariant, size: resolvedSize }}>\n\t\t\t<div\n\t\t\t\tdata-basalt-surface={resolvedVariant === \"secondary\" ? \"\" : undefined}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\tbannerVariants({ variant: resolvedVariant, size: resolvedSize }),\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{icon ? (\n\t\t\t\t\t<span className=\"inline-flex h-[1lh] shrink-0 items-center [&_svg]:size-basalt-icon-lg\">\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-basalt-space-xs\">\n\t\t\t\t\t{title ? <p className=\"font-medium\">{title}</p> : null}\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tresolvedVariant === \"secondary\" ? \"text-basalt-muted-foreground\" : \"text-current\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t{inlineActions.length > 0 ? <> {inlineActions}</> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : inlineActions.length > 0 ? (\n\t\t\t\t\t\t<div>{inlineActions}</div>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{structured ? null : children}\n\t\t\t\t</div>\n\t\t\t\t{trailing.length > 0 ? (\n\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-basalt-space-lg\">{trailing}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</BannerContext.Provider>\n\t);\n}\n\nexport function BannerAction({\n\tclassName,\n\tvariant = \"default\",\n\tsize,\n\ticon,\n\tchildren,\n\t...props\n}: BannerActionProps) {\n\tconst banner = useContext(BannerContext);\n\tconst mapped =\n\t\tvariant === \"ghost\"\n\t\t\t? \"ghost\"\n\t\t\t: variant === \"secondary\"\n\t\t\t\t? \"secondary\"\n\t\t\t\t: banner.variant === \"error\"\n\t\t\t\t\t? \"destructive\"\n\t\t\t\t\t: \"default\";\n\tconst iconOnly = children == null || children === \"\";\n\treturn (\n\t\t<Button\n\t\t\tvariant={mapped}\n\t\t\tsize={size ?? (iconOnly ? \"icon\" : banner.size === \"sm\" ? \"sm\" : \"default\")}\n\t\t\ticon={icon}\n\t\t\tclassName={cn(iconOnly && \"basalt-action-icon\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\nBannerAction.displayName = \"Banner.Action\";\n\nexport const Banner = Object.assign(BannerRoot, { Action: BannerAction });\n"],"mappings":";;;;;;;;AAaA,IAAME,IAAiBC,EACtB,+EACA;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,OAAO;GACP,OAAO;GACP,WAAW;EACZ;EACA,MAAM;GACL,MAAM;GACN,IAAI;EACL;CACD;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAO;AACrD,CACD,GAKMC,IAAgBC,EAA4D;CACjF,SAAS;CACT,MAAM;AACP,CAAC;AAkHD,SAASC,EAAe,GAA0B;CACjD,OAAOC,EAAeC,CAAI,KAAKA,EAAK,SAASC;AAC9C;AAEA,SAASC,EAAW,EACnB,cACA,aAAU,WACV,UAAO,QACP,UACA,gBACA,SACA,WACA,aACA,GAAGC,KACY;CACf,IAAMC,IAAkBC,KAAW,WAC7BC,IAAeC,KAAQ,QACvBC,IAAaC,KAAS,QAAQC,KAAe,MAC7CC,IAAQC,EAAS,QAAQC,CAAM,GAC/BC,IAAOH,EAAM,OAAOb,CAAc,GAClCiB,IAAQJ,EAAM,QAAQ,MAAS,CAACb,EAAeE,CAAI,CAAC,GACpDgB,IAAWV,MAAiB,OAAOQ,IAAO,CAAC,GAAGC,GAAO,GAAGD,CAAI,GAC5DG,IAAgBX,MAAiB,OAAOS,IAAQ,CAAC;CAEvD,OACC,kBAACnB,EAAc,UAAf;EAAwB,OAAO;GAAE,SAASQ;GAAiB,MAAME;EAAa;EAC7E,UAAA,kBAAC,OAAD;GACC,uBAAqBF,MAAoB,cAAc,KAAK,KAAA;GAC5D,WAAWc,EACVC,GACAzB,EAAe;IAAE,SAASU;IAAiB,MAAME;GAAa,CAAC,GAC/Dc,CACD;GACA,GAAIjB;GAPL,UAAA;IASEkB,IACA,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAA;IACI,CAAA,IACH;IACJ,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACEZ,IAAQ,kBAAC,KAAD;OAAG,WAAU;OAAe,UAAAA;MAAS,CAAA,IAAI;MACjDC,IACA,kBAAC,OAAD;OACC,WAAWQ,EACVd,MAAoB,cAAc,iCAAiC,cACpE;OAHD,UAAA,CAKEM,GACAO,EAAc,SAAS,IAAI,kBAAAzB,GAAA,EAAA,UAAA,CAAE,KAAEyB,CAAgB,EAAA,CAAA,IAAI,IAChD;MACF,CAAA,IAAAA,EAAc,SAAS,IAC1B,kBAAC,OAAD,EAAA,UAAMA,EAAmB,CAAA,IACtB;MACHT,IAAa,OAAOc;KACjB;;IACJN,EAAS,SAAS,IAClB,kBAAC,OAAD;KAAK,WAAU;KAAkD,UAAAA;IAAc,CAAA,IAC5E;GACA;;CACkB,CAAA;AAE1B;AAEA,SAAgBf,EAAa,EAC5B,cACA,aAAU,WACV,SACA,SACA,aACA,GAAGE,KACkB;CACrB,IAAMoB,IAASC,EAAW5B,CAAa,GACjC6B,IACLpB,MAAY,UACT,UACAA,MAAY,cACX,cACAkB,EAAO,YAAY,UAClB,gBACA,WACAG,IAAWJ,KAAY,QAAQA,MAAa;CAClD,OACC,kBAACK,GAAD;EACC,SAASF;EACT,MAAMlB,MAASmB,IAAW,SAASH,EAAO,SAAS,OAAO,OAAO;EAC3D;EACN,WAAWL,EAAGQ,KAAY,sBAAsBN,CAAS;EACzD,GAAIjB;EAEH;CACM,CAAA;AAEV;AACA,EAAa,cAAc;AAE3B,IAAayB,IAAS,OAAO,OAAO1B,GAAY,EAAE,QAAQD,EAAa,CAAC"}

package/dist/components/basalt-mark.js

@@ -5,7 +5,7 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/basalt-mark.tsx
 function i({ className: i, ...a }) {
 	return /* @__PURE__ */ r("svg", {
-		className: e("h-5 w-5", i),
+		className: e("h-basalt-5 w-basalt-5", i),
 		viewBox: "0 0 128 128",
 		role: "img",
 		"aria-label": "Basalt",

package/dist/components/basalt-mark.js.map

@@ -1 +1 @@
-{"version":3,"file":"basalt-mark.js","names":[],"sources":["../../src/components/basalt-mark.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport { basaltMarkPng } from \"../assets/brand-mark\";\nimport { cn } from \"../utils/cn\";\n\nexport type BasaltMarkProps = Omit<SVGAttributes<SVGSVGElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the mark.\n\t */\n\tclassName?: string;\n};\n\nexport function BasaltMark({ className, ...props }: BasaltMarkProps) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-5 w-5\", className)}\n\t\t\tviewBox=\"0 0 128 128\"\n\t\t\trole=\"img\"\n\t\t\taria-label=\"Basalt\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<title>Basalt</title>\n\t\t\t<image href={basaltMarkPng} width=\"128\" height=\"128\" />\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAWA,SAAgB,EAAW,EAAE,cAAW,GAAG,KAA0B;CACpE,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,WAAW,CAAS;EAClC,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAI;EALL,UAAA,CAOC,kBAAC,SAAD,EAAA,UAAO,SAAa,CAAA,GACpB,kBAAC,SAAD;GAAO,MAAM;GAAe,OAAM;GAAM,QAAO;EAAO,CAAA,CAClD;;AAEP"}
+{"version":3,"file":"basalt-mark.js","names":["BasaltMark","props","cn","className","basaltMarkPng"],"sources":["../../src/components/basalt-mark.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport { basaltMarkPng } from \"../assets/brand-mark\";\nimport { cn } from \"../utils/cn\";\n\nexport type BasaltMarkProps = Omit<SVGAttributes<SVGSVGElement>, \"className\"> & {\n\t/**\n\t * Additional classes for the mark.\n\t */\n\tclassName?: string;\n};\n\nexport function BasaltMark({ className, ...props }: BasaltMarkProps) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-basalt-5 w-basalt-5\", className)}\n\t\t\tviewBox=\"0 0 128 128\"\n\t\t\trole=\"img\"\n\t\t\taria-label=\"Basalt\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<title>Basalt</title>\n\t\t\t<image href={basaltMarkPng} width=\"128\" height=\"128\" />\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EAAW,EAAE,cAAW,GAAGC,KAA0B;CACpE,OACC,kBAAC,OAAD;EACC,WAAWC,EAAG,yBAAyBC,CAAS;EAChD,SAAQ;EACR,MAAK;EACL,cAAW;EACX,GAAIF;EALL,UAAA,CAOC,kBAAC,SAAD,EAAA,UAAO,SAAa,CAAA,GACpB,kBAAC,SAAD;GAAO,MAAMG;GAAe,OAAM;GAAM,QAAO;EAAO,CAAA,CAClD;;AAEP"}

package/dist/components/battery-meter.js

@@ -6,7 +6,7 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 function i({ value: i, label: a, status: o = "discharging", className: s, ...c }) {
 	let l = o !== "offline" && Number.isFinite(i), u = l ? Math.min(100, Math.max(0, i)) : 0, d = u <= 20 ? "bg-basalt-danger" : u <= 50 ? "bg-basalt-warning" : "bg-basalt-primary";
 	return /* @__PURE__ */ r("div", {
-		className: e(t, "inline-flex items-center gap-2 text-xs tabular-nums", s),
+		className: e(t, "inline-flex items-center gap-basalt-space-lg text-basalt-sm tabular-nums", s),
 		...c,
 		children: [
 			l ? /* @__PURE__ */ n("meter", {
@@ -24,23 +24,23 @@ function i({ value: i, label: a, status: o = "discharging", className: s, ...c }
 			}),
 			/* @__PURE__ */ r("span", {
 				"aria-hidden": "true",
-				className: "relative inline-flex h-4 w-9 gap-0.5 rounded-sm border border-basalt-muted-foreground/60 p-0.5",
+				className: "relative inline-flex h-basalt-4 w-basalt-9 gap-basalt-space-xs rounded-basalt-sm border border-basalt-muted-foreground/60 p-basalt-space-xs",
 				children: [[
 					0,
 					1,
 					2,
 					3
 				].map((t) => /* @__PURE__ */ n("span", {
-					className: "relative flex-1 overflow-hidden rounded-[1px] bg-basalt-muted",
+					className: "relative flex-1 overflow-hidden rounded-basalt-sm bg-basalt-muted",
 					children: /* @__PURE__ */ n("span", {
 						className: e("absolute inset-y-0 left-0", d),
 						style: { width: `${Math.min(100, Math.max(0, u - t * 25) * 4)}%` }
 					})
-				}, t)), /* @__PURE__ */ n("span", { className: "absolute -right-1 top-1 h-1.5 w-0.5 rounded-r-sm bg-basalt-muted-foreground/60" })]
+				}, t)), /* @__PURE__ */ n("span", { className: "absolute -right-basalt-1 top-basalt-1 h-basalt-1_5 w-basalt-0_5 rounded-r-basalt-sm bg-basalt-muted-foreground/60" })]
 			}),
 			/* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
-				className: "min-w-9 text-basalt-foreground",
+				className: "min-w-basalt-9 text-basalt-foreground",
 				children: l ? `${Math.round(u)}%` : "Offline"
 			}),
 			o === "charging" && l ? /* @__PURE__ */ n("span", {

package/dist/components/battery-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"battery-meter.js","names":[],"sources":["../../src/components/battery-meter.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface BatteryMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Battery charge in percent, clamped to 0–100. Non-finite readings are unavailable. */\n\tvalue: number;\n\t/** Accessible name of the battery. */\n\tlabel: string;\n\t/** Device state, also announced with the value. @default \"discharging\" */\n\tstatus?: \"charging\" | \"discharging\" | \"offline\";\n}\n\nexport function BatteryMeter({\n\tvalue,\n\tlabel,\n\tstatus = \"discharging\",\n\tclassName,\n\t...props\n}: BatteryMeterProps) {\n\tconst available = status !== \"offline\" && Number.isFinite(value);\n\tconst charge = available ? Math.min(100, Math.max(0, value)) : 0;\n\tconst color =\n\t\tcharge <= 20 ? \"bg-basalt-danger\" : charge <= 50 ? \"bg-basalt-warning\" : \"bg-basalt-primary\";\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-2 text-xs tabular-nums\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{available ? (\n\t\t\t\t<meter\n\t\t\t\t\tclassName=\"sr-only\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={100}\n\t\t\t\t\tlow={20}\n\t\t\t\t\thigh={80}\n\t\t\t\t\toptimum={100}\n\t\t\t\t\tvalue={charge}\n\t\t\t\t\taria-label={`${label}, ${status}`}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<span className=\"sr-only\">{label}: unavailable</span>\n\t\t\t)}\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"relative inline-flex h-4 w-9 gap-0.5 rounded-sm border border-basalt-muted-foreground/60 p-0.5\"\n\t\t\t>\n\t\t\t\t{[0, 1, 2, 3].map((segment) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={segment}\n\t\t\t\t\t\tclassName=\"relative flex-1 overflow-hidden rounded-[1px] bg-basalt-muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\"absolute inset-y-0 left-0\", color)}\n\t\t\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, charge - segment * 25) * 4)}%` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t\t<span className=\"absolute -right-1 top-1 h-1.5 w-0.5 rounded-r-sm bg-basalt-muted-foreground/60\" />\n\t\t\t</span>\n\t\t\t<span aria-hidden=\"true\" className=\"min-w-9 text-basalt-foreground\">\n\t\t\t\t{available ? `${Math.round(charge)}%` : \"Offline\"}\n\t\t\t</span>\n\t\t\t{status === \"charging\" && available ? (\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">Charging</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAa,EAC5B,UACA,UACA,YAAS,eACT,cACA,GAAG,KACkB;CACrB,IAAM,IAAY,MAAW,aAAa,OAAO,SAAS,CAAK,GACzD,IAAS,IAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAK,CAAC,IAAI,GACzD,IACL,KAAU,KAAK,qBAAqB,KAAU,KAAK,sBAAsB;CAC1E,OACC,kBAAC,OAAD;EACC,WAAW,EACV,GACA,uDACA,CACD;EACA,GAAI;EANL,UAAA;GAQE,IACA,kBAAC,SAAD;IACC,WAAU;IACV,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,SAAS;IACT,OAAO;IACP,cAAY,GAAG,EAAM,IAAI;GACzB,CAAA,IAED,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA2B,GAAM,eAAmB;;GAErD,kBAAC,QAAD;IACC,eAAY;IACZ,WAAU;IAFX,UAAA,CAIE;KAAC;KAAG;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,MAClB,kBAAC,QAAD;KAEC,WAAU;KAEV,UAAA,kBAAC,QAAD;MACC,WAAW,EAAG,6BAA6B,CAAK;MAChD,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAS,IAAU,EAAE,IAAI,CAAC,EAAE,GAAG;KAC5E,CAAA;IACI,GAPA,CAOA,CACN,GACD,kBAAC,QAAD,EAAM,WAAU,iFAAkF,CAAA,CAC7F;;GACN,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,IAAY,GAAG,KAAK,MAAM,CAAM,EAAE,KAAK;GACnC,CAAA;GACL,MAAW,cAAc,IACzB,kBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAAc,CAAA,IAC1D;EACA;;AAEP"}
+{"version":3,"file":"battery-meter.js","names":["BatteryMeter","props","available","status","value","charge","color","cn","BASALT_UI_CLASS","className","label","segment"],"sources":["../../src/components/battery-meter.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface BatteryMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Battery charge in percent, clamped to 0–100. Non-finite readings are unavailable. */\n\tvalue: number;\n\t/** Accessible name of the battery. */\n\tlabel: string;\n\t/** Device state, also announced with the value. @default \"discharging\" */\n\tstatus?: \"charging\" | \"discharging\" | \"offline\";\n}\n\nexport function BatteryMeter({\n\tvalue,\n\tlabel,\n\tstatus = \"discharging\",\n\tclassName,\n\t...props\n}: BatteryMeterProps) {\n\tconst available = status !== \"offline\" && Number.isFinite(value);\n\tconst charge = available ? Math.min(100, Math.max(0, value)) : 0;\n\tconst color =\n\t\tcharge <= 20 ? \"bg-basalt-danger\" : charge <= 50 ? \"bg-basalt-warning\" : \"bg-basalt-primary\";\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex items-center gap-basalt-space-lg text-basalt-sm tabular-nums\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{available ? (\n\t\t\t\t<meter\n\t\t\t\t\tclassName=\"sr-only\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={100}\n\t\t\t\t\tlow={20}\n\t\t\t\t\thigh={80}\n\t\t\t\t\toptimum={100}\n\t\t\t\t\tvalue={charge}\n\t\t\t\t\taria-label={`${label}, ${status}`}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<span className=\"sr-only\">{label}: unavailable</span>\n\t\t\t)}\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"relative inline-flex h-basalt-4 w-basalt-9 gap-basalt-space-xs rounded-basalt-sm border border-basalt-muted-foreground/60 p-basalt-space-xs\"\n\t\t\t>\n\t\t\t\t{[0, 1, 2, 3].map((segment) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={segment}\n\t\t\t\t\t\tclassName=\"relative flex-1 overflow-hidden rounded-basalt-sm bg-basalt-muted\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\"absolute inset-y-0 left-0\", color)}\n\t\t\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, charge - segment * 25) * 4)}%` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t\t<span className=\"absolute -right-basalt-1 top-basalt-1 h-basalt-1_5 w-basalt-0_5 rounded-r-basalt-sm bg-basalt-muted-foreground/60\" />\n\t\t\t</span>\n\t\t\t<span aria-hidden=\"true\" className=\"min-w-basalt-9 text-basalt-foreground\">\n\t\t\t\t{available ? `${Math.round(charge)}%` : \"Offline\"}\n\t\t\t</span>\n\t\t\t{status === \"charging\" && available ? (\n\t\t\t\t<span className=\"text-basalt-muted-foreground\">Charging</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAaA,SAAgBA,EAAa,EAC5B,UACA,UACA,YAAS,eACT,cACA,GAAGC,KACkB;CACrB,IAAMC,IAAYC,MAAW,aAAa,OAAO,SAASC,CAAK,GACzDC,IAASH,IAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGE,CAAK,CAAC,IAAI,GACzDE,IACLD,KAAU,KAAK,qBAAqBA,KAAU,KAAK,sBAAsB;CAC1E,OACC,kBAAC,OAAD;EACC,WAAWE,EACVC,GACA,4EACAC,CACD;EACA,GAAIR;EANL,UAAA;GAQEC,IACA,kBAAC,SAAD;IACC,WAAU;IACV,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,SAAS;IACT,OAAOG;IACP,cAAY,GAAGK,EAAM,IAAIP;GACzB,CAAA,IAED,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA2BO,GAAM,eAAmB;;GAErD,kBAAC,QAAD;IACC,eAAY;IACZ,WAAU;IAFX,UAAA,CAIE;KAAC;KAAG;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,MAClB,kBAAC,QAAD;KAEC,WAAU;KAEV,UAAA,kBAAC,QAAD;MACC,WAAWH,EAAG,6BAA6BD,CAAK;MAChD,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGD,IAASM,IAAU,EAAE,IAAI,CAAC,EAAE,GAAG;KAC5E,CAAA;IACI,GAPAA,CAOA,CACN,GACD,kBAAC,QAAD,EAAM,WAAU,oHAAqH,CAAA,CAChI;;GACN,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAAT,IAAY,GAAG,KAAK,MAAMG,CAAM,EAAE,KAAK;GACnC,CAAA;GACLF,MAAW,cAAcD,IACzB,kBAAC,QAAD;IAAM,WAAU;IAA+B,UAAA;GAAc,CAAA,IAC1D;EACA;;AAEP"}

package/dist/components/breadcrumbs.js

@@ -5,24 +5,24 @@ import { Link as n } from "./link.js";
 import { ChevronRight as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/breadcrumbs.tsx
-var o = "text-sm font-normal";
+var o = "text-basalt-base font-normal";
 function s({ items: s, className: c }) {
 	return /* @__PURE__ */ i("nav", {
 		"aria-label": "Breadcrumb",
-		className: e(t, "flex items-center gap-1 text-sm font-normal text-basalt-muted-foreground", c),
+		className: e(t, "flex items-center gap-basalt-space-sm text-basalt-base font-normal text-basalt-muted-foreground", c),
 		children: s.map((t, c) => {
 			let l = c === s.length - 1 && !t.href, u = t.icon ? /* @__PURE__ */ a("span", {
-				className: "inline-flex items-center gap-1",
+				className: "inline-flex items-center gap-basalt-space-sm",
 				children: [t.icon, t.label]
 			}) : t.label;
 			return /* @__PURE__ */ a("span", {
-				className: "flex items-center gap-1",
+				className: "flex items-center gap-basalt-space-sm",
 				children: [c > 0 ? /* @__PURE__ */ i(r, {
-					className: "size-3",
+					className: "size-basalt-icon-sm",
 					"aria-hidden": "true"
 				}) : null, t.href ? /* @__PURE__ */ i(n, {
 					href: t.href,
-					className: e(o, "text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground"),
+					className: e(o, "text-basalt-muted-foreground no-underline transition-colors basalt-motion hover:text-basalt-foreground"),
 					children: u
 				}) : /* @__PURE__ */ i("span", {
 					"aria-current": l ? "page" : void 0,

package/dist/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Link } from \"./link\";\n\nconst crumbTypeClass = \"text-sm font-normal\";\n\nexport interface BreadcrumbItem {\n\t/**\n\t * Navigation target URL. When omitted, item renders as unlinked text (and only receives aria-current=\"page\" if it is the final item).\n\t */\n\thref?: string;\n\t/**\n\t * Content label rendered inside the breadcrumb segment.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Optional leading icon rendered before the label.\n\t */\n\ticon?: ReactNode;\n}\n\nexport interface BreadcrumbsProps {\n\t/**\n\t * List of breadcrumb segments ({ label: ReactNode, href?: string, icon?: ReactNode }[]) in hierarchical order from root to current page.\n\t * Only the final item in the array without an href receives aria-current=\"page\".\n\t * Interactive items render via Link, delegating routing to LinkProvider when configured.\n\t * Component only accepts items and className without native HTML rest attribute forwarding or forwarded ref.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * Optional class name applied to the outer nav element.\n\t */\n\tclassName?: string;\n}\n\nexport function Breadcrumbs({ items, className }: BreadcrumbsProps) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"Breadcrumb\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center gap-1 text-sm font-normal text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst current = index === items.length - 1 && !item.href;\n\t\t\t\tconst label = item.icon ? (\n\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem.label\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<span key={`${String(item.label)}-${index}`} className=\"flex items-center gap-1\">\n\t\t\t\t\t\t{index > 0 ? <ChevronRight className=\"size-3\" aria-hidden=\"true\" /> : null}\n\t\t\t\t\t\t{item.href ? (\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\t\"text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-current={current ? \"page\" : undefined}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\tcurrent ? \"text-basalt-foreground\" : \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,IAAM,IAAiB;AA+BvB,SAAgB,EAAY,EAAE,UAAO,gBAA+B;CACnE,OACC,kBAAC,OAAD;EACC,cAAW;EACX,WAAW,EACV,GACA,4EACA,CACD;EAEC,UAAA,EAAM,KAAK,GAAM,MAAU;GAC3B,IAAM,IAAU,MAAU,EAAM,SAAS,KAAK,CAAC,EAAK,MAC9C,IAAQ,EAAK,OAClB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,EAAK,MACL,EAAK,KACD;GAEN,CAAA,IAAA,EAAK;GAEN,OACC,kBAAC,QAAD;IAA6C,WAAU;IAAvD,UAAA,CACE,IAAQ,IAAI,kBAAC,GAAD;KAAc,WAAU;KAAS,eAAY;IAAQ,CAAA,IAAI,MACrE,EAAK,OACL,kBAAC,GAAD;KACC,MAAM,EAAK;KACX,WAAW,EACV,GACA,0FACD;KAEC,UAAA;IACI,CAAA,IAEN,kBAAC,QAAD;KACC,gBAAc,IAAU,SAAS,KAAA;KACjC,WAAW,EACV,GACA,IAAU,2BAA2B,8BACtC;KAEC,UAAA;IACI,CAAA,CAEF;GAvBK,GAAA,GAAG,OAAO,EAAK,KAAK,EAAE,GAAG,GAuB9B;EAER,CAAC;CACG,CAAA;AAEP"}
+{"version":3,"file":"breadcrumbs.js","names":["crumbTypeClass","Breadcrumbs","cn","BASALT_UI_CLASS","className","items","current","index","item","label","ChevronRight","Link"],"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Link } from \"./link\";\n\nconst crumbTypeClass = \"text-basalt-base font-normal\";\n\nexport interface BreadcrumbItem {\n\t/**\n\t * Navigation target URL. When omitted, item renders as unlinked text (and only receives aria-current=\"page\" if it is the final item).\n\t */\n\thref?: string;\n\t/**\n\t * Content label rendered inside the breadcrumb segment.\n\t */\n\tlabel: ReactNode;\n\t/**\n\t * Optional leading icon rendered before the label.\n\t */\n\ticon?: ReactNode;\n}\n\nexport interface BreadcrumbsProps {\n\t/**\n\t * List of breadcrumb segments ({ label: ReactNode, href?: string, icon?: ReactNode }[]) in hierarchical order from root to current page.\n\t * Only the final item in the array without an href receives aria-current=\"page\".\n\t * Interactive items render via Link, delegating routing to LinkProvider when configured.\n\t * Component only accepts items and className without native HTML rest attribute forwarding or forwarded ref.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * Optional class name applied to the outer nav element.\n\t */\n\tclassName?: string;\n}\n\nexport function Breadcrumbs({ items, className }: BreadcrumbsProps) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"Breadcrumb\"\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center gap-basalt-space-sm text-basalt-base font-normal text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst current = index === items.length - 1 && !item.href;\n\t\t\t\tconst label = item.icon ? (\n\t\t\t\t\t<span className=\"inline-flex items-center gap-basalt-space-sm\">\n\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\titem.label\n\t\t\t\t);\n\t\t\t\treturn (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={`${String(item.label)}-${index}`}\n\t\t\t\t\t\tclassName=\"flex items-center gap-basalt-space-sm\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{index > 0 ? <ChevronRight className=\"size-basalt-icon-sm\" aria-hidden=\"true\" /> : null}\n\t\t\t\t\t\t{item.href ? (\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\t\"text-basalt-muted-foreground no-underline transition-colors basalt-motion hover:text-basalt-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-current={current ? \"page\" : undefined}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tcrumbTypeClass,\n\t\t\t\t\t\t\t\t\tcurrent ? \"text-basalt-foreground\" : \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,IAAMA,IAAiB;AA+BvB,SAAgBC,EAAY,EAAE,UAAO,gBAA+B;CACnE,OACC,kBAAC,OAAD;EACC,cAAW;EACX,WAAWC,EACVC,GACA,mGACAC,CACD;EAEC,UAAAC,EAAM,KAAK,GAAM,MAAU;GAC3B,IAAMC,IAAUC,MAAUF,EAAM,SAAS,KAAK,CAACG,EAAK,MAC9CC,IAAQD,EAAK,OAClB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACEA,EAAK,MACLA,EAAK,KACD;GAEN,CAAA,IAAAA,EAAK;GAEN,OACC,kBAAC,QAAD;IAEC,WAAU;IAFX,UAAA,CAIED,IAAQ,IAAI,kBAACG,GAAD;KAAc,WAAU;KAAsB,eAAY;IAAQ,CAAA,IAAI,MAClFF,EAAK,OACL,kBAACG,GAAD;KACC,MAAMH,EAAK;KACX,WAAWN,EACVF,GACA,wGACD;KAEC,UAAAS;IACI,CAAA,IAEN,kBAAC,QAAD;KACC,gBAAcH,IAAU,SAAS,KAAA;KACjC,WAAWJ,EACVF,GACAM,IAAU,2BAA2B,8BACtC;KAEC,UAAAG;IACI,CAAA,CAEF;GAzBA,GAAA,GAAG,OAAOD,EAAK,KAAK,EAAE,GAAGD,GAyBzB;EAER,CAAC;CACG,CAAA;AAEP"}

package/dist/components/button.js

@@ -8,21 +8,21 @@ import { cva as a } from "class-variance-authority";
 import { Loader2 as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/button.tsx
-var l = a(`${t} relative inline-flex cursor-pointer items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 ${n} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
+var l = a(`${t} relative inline-flex cursor-pointer items-center justify-center gap-basalt-control-gap rounded-basalt-md font-medium wrap-anywhere transition-colors basalt-motion before:absolute before:-inset-basalt-border-width ${n} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
-			default: "bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90",
-			secondary: "bg-basalt-control text-basalt-foreground hover:bg-basalt-accent",
-			destructive: "bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90",
-			outline: "border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground",
-			ghost: "hover:bg-basalt-accent hover:text-basalt-accent-foreground",
+			default: "bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover",
+			secondary: "basalt-choice bg-basalt-control text-basalt-foreground hover:bg-basalt-hover",
+			destructive: "bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive-hover",
+			outline: "basalt-choice border border-basalt-border bg-basalt-control hover:bg-basalt-hover hover:text-basalt-accent-foreground",
+			ghost: "basalt-choice hover:bg-basalt-hover hover:text-basalt-accent-foreground",
 			link: "text-basalt-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-basalt-md px-3 text-xs",
-			lg: "h-10 rounded-basalt-md px-6",
-			icon: "h-9 w-9 shrink-0"
+			default: "basalt-action [&_svg]:size-basalt-icon",
+			sm: "basalt-action basalt-action-sm [&_svg]:size-basalt-icon",
+			lg: "basalt-action basalt-action-lg [&_svg]:size-basalt-icon-lg",
+			icon: "basalt-action basalt-action-icon shrink-0 [&_svg]:size-basalt-icon"
 		}
 	},
 	defaultVariants: {

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\n// Keep rounded corners inside the button's rectangular pointer target.\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90\",\n\t\t\t\tsecondary: \"bg-basalt-control text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive/90\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-basalt-border bg-basalt-control hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"hover:bg-basalt-accent hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-basalt-md px-3 text-xs\",\n\t\t\t\tlg: \"h-10 rounded-basalt-md px-6\",\n\t\t\t\ticon: \"h-9 w-9 shrink-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAiB,EACtB,GAAG,EAAgB,gKAAgK,EAAW,0KAC9L;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GA2Ca,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAa,GAAQ,KAAY;CAEvC,IAAI,GAAS;EACZ,IAAI,KAAc,EAAM,eAAe,CAAQ,GAAG;GACjD,IAAM,IAAe,GACf,IACL,OAAO,EAAa,QAAS,YAAY,EAAa,KAAK,YAAY,MAAM,UAExE,KAAwB,MAAwC;IAGrE,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAErB,8BAA8B,KAC9B,OAAO,EAAM,4BAA6B,cAE1C,EAAM,yBAAyB;GAEjC,GAEM,KAAkB,MAA+B;IAKtD,CAJI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,eAC/D,EAAM,eAAe,GAEtB,EAAM,gBAAgB,GAClB,OAAO,EAAM,aAAa,4BAA6B,cAC1D,EAAM,YAAY,yBAAyB;GAE7C,GAEM,IAAkB;IACvB,SAAS;IACT,gBAAgB;IAChB,WAAW;IACX,kBAAkB;IAClB,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,mBAAmB;IACnB,aAAa;IACb,oBAAoB;IACpB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,sBAAsB;IACtB,aAAa;IACb,oBAAoB;IACpB,YAAY;IACZ,mBAAmB;GACpB,GAEM,IAAiB,EAAM,aAAa,GAAc;IACvD,GAAG;IACH,GAAI,IAAiB,EAAE,UAAU,GAAK,IAAI,CAAC;IAC3C,iBAAiB;IACjB,aAAa,IAAU,KAAO,KAAA;IAC9B,UAAU;GACX,CAAC,GAEK,IAAqC;IAC1C,GAAG;IACH,GAAG;IACH,iBAAiB;IACjB,aAAa,IAAU,SAAS,KAAA;IAChC,UAAU;GACX;GAKA,OAJI,MACH,EAAU,WAAW,KAIrB,kBAAC,GAAD;IACC,WAAW,EAAG,EAAe;KAAE;KAAS;IAAK,CAAC,GAAG,CAAS;IACrD;IACL,GAAI;IAEH,UAAA;GACI,CAAA;EAER;EAEA,OACC,kBAAC,GAAD;GAAM,WAAW,EAAG,EAAe;IAAE;IAAS;GAAK,CAAC,GAAG,CAAS;GAAQ;GAAK,GAAI;GAC/E;EACI,CAAA;CAER;CAEA,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAiD,eAAY;CAAQ,CAAA,IAExF;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU;EACV,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAqBrB,IAAa,IAAa,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAG,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAW,EAAG,EAAe;EAAE;EAAS;CAAK,CAAC,GAAG,CAAS;CAAG,GAAI;CAA9E,UAAA,CACE,GACA,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}
+{"version":3,"file":"button.js","names":["React","buttonVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Button","props","isDisabled","disabled","loading","asChild","children","childElement","isNativeButton","blockActivationEvent","event","handleKeyEvent","blockedHandlers","sanitizedChild","slotProps","Slot","cn","className","iconNode","Loader2","icon","LinkButton"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\n// Keep rounded corners inside the button's rectangular pointer target.\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center gap-basalt-control-gap rounded-basalt-md font-medium wrap-anywhere transition-colors basalt-motion before:absolute before:-inset-basalt-border-width ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover\",\n\t\t\t\tsecondary: \"basalt-choice bg-basalt-control text-basalt-foreground hover:bg-basalt-hover\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-basalt-destructive text-basalt-destructive-foreground hover:bg-basalt-destructive-hover\",\n\t\t\t\toutline:\n\t\t\t\t\t\"basalt-choice border border-basalt-border bg-basalt-control hover:bg-basalt-hover hover:text-basalt-accent-foreground\",\n\t\t\t\tghost: \"basalt-choice hover:bg-basalt-hover hover:text-basalt-accent-foreground\",\n\t\t\t\tlink: \"text-basalt-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"basalt-action [&_svg]:size-basalt-icon\",\n\t\t\t\tsm: \"basalt-action basalt-action-sm [&_svg]:size-basalt-icon\",\n\t\t\t\tlg: \"basalt-action basalt-action-lg [&_svg]:size-basalt-icon-lg\",\n\t\t\t\ticon: \"basalt-action basalt-action-icon shrink-0 [&_svg]:size-basalt-icon\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Pass control to child element slot.\n\t *\n\t * Note: Child element must forward props and ref in all states. When disabled or loading,\n\t * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both\n\t * child and parent while retaining browser default Tab navigation without trapping focus.\n\t * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal\n\t * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.\n\t *\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Button type attribute.\n\t * @default \"button\"\n\t */\n\ttype?: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t/**\n\t * Display loading spinner and disable interactions.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant,\n\t\t\tsize,\n\t\t\tasChild = false,\n\t\t\ttype = \"button\",\n\t\t\tloading = false,\n\t\t\ticon,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isDisabled = Boolean(disabled || loading);\n\n\t\tif (asChild) {\n\t\t\tif (isDisabled && React.isValidElement(children)) {\n\t\t\t\tconst childElement = children as React.ReactElement<Record<string, unknown>>;\n\t\t\t\tconst isNativeButton =\n\t\t\t\t\ttypeof childElement.type === \"string\" && childElement.type.toLowerCase() === \"button\";\n\n\t\t\t\tconst blockActivationEvent = (event: React.SyntheticEvent | Event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (\n\t\t\t\t\t\t\"stopImmediatePropagation\" in event &&\n\t\t\t\t\t\ttypeof event.stopImmediatePropagation === \"function\"\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst handleKeyEvent = (event: React.KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \" || event.key === \"Spacebar\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst blockedHandlers = {\n\t\t\t\t\tonClick: blockActivationEvent,\n\t\t\t\t\tonClickCapture: blockActivationEvent,\n\t\t\t\t\tonKeyDown: handleKeyEvent,\n\t\t\t\t\tonKeyDownCapture: handleKeyEvent,\n\t\t\t\t\tonKeyUp: handleKeyEvent,\n\t\t\t\t\tonKeyUpCapture: handleKeyEvent,\n\t\t\t\t\tonKeyPress: handleKeyEvent,\n\t\t\t\t\tonKeyPressCapture: handleKeyEvent,\n\t\t\t\t\tonMouseDown: blockActivationEvent,\n\t\t\t\t\tonMouseDownCapture: blockActivationEvent,\n\t\t\t\t\tonMouseUp: blockActivationEvent,\n\t\t\t\t\tonMouseUpCapture: blockActivationEvent,\n\t\t\t\t\tonPointerDown: blockActivationEvent,\n\t\t\t\t\tonPointerDownCapture: blockActivationEvent,\n\t\t\t\t\tonPointerUp: blockActivationEvent,\n\t\t\t\t\tonPointerUpCapture: blockActivationEvent,\n\t\t\t\t\tonAuxClick: blockActivationEvent,\n\t\t\t\t\tonAuxClickCapture: blockActivationEvent,\n\t\t\t\t};\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t...(isNativeButton ? { disabled: true } : {}),\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? true : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t});\n\n\t\t\t\tconst slotProps: Record<string, unknown> = {\n\t\t\t\t\t...props,\n\t\t\t\t\t...blockedHandlers,\n\t\t\t\t\t\"aria-disabled\": true,\n\t\t\t\t\t\"aria-busy\": loading ? \"true\" : undefined,\n\t\t\t\t\ttabIndex: -1,\n\t\t\t\t};\n\t\t\t\tif (isNativeButton) {\n\t\t\t\t\tslotProps.disabled = true;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Slot\n\t\t\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...slotProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t{sanitizedChild}\n\t\t\t\t\t</Slot>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Slot className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin motion-reduce:animate-none\" aria-hidden=\"true\" />\n\t\t) : (\n\t\t\ticon\n\t\t);\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclassName={cn(buttonVariants({ variant, size }), className)}\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\taria-busy={loading || undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{iconNode}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport interface LinkButtonProps\n\textends React.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t\tOmit<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof buttonVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof buttonVariants>[\"size\"];\n\t/**\n\t * Optional leading icon slot.\n\t */\n\ticon?: React.ReactNode;\n}\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n\t({ className, variant, size, icon, children, ...props }, ref) => (\n\t\t<a ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t\t\t{icon}\n\t\t\t{children}\n\t\t</a>\n\t),\n);\nLinkButton.displayName = \"LinkButton\";\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;AASA,IAAMC,IAAiBC,EACtB,GAAGC,EAAgB,wNAAwNC,EAAW,2JACtP;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,WAAW;GACX,aACC;GACD,SACC;GACD,OAAO;GACP,MAAM;EACP;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,SAAS;EACT,MAAM;CACP;AACD,CACD,GA2CaC,IAASL,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAGM,KAEJ,MACI;CACJ,IAAMC,IAAa,GAAQC,KAAYC;CAEvC,IAAIC,GAAS;EACZ,IAAIH,KAAcP,EAAM,eAAeW,CAAQ,GAAG;GACjD,IAAMC,IAAeD,GACfE,IACL,OAAOD,EAAa,QAAS,YAAYA,EAAa,KAAK,YAAY,MAAM,UAExEE,KAAwB,MAAwC;IAGrE,AAFAC,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAErB,8BAA8BA,KAC9B,OAAOA,EAAM,4BAA6B,cAE1CA,EAAM,yBAAyB;GAEjC,GAEMC,KAAkB,MAA+B;IAKtD,CAJID,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,eAC/DA,EAAM,eAAe,GAEtBA,EAAM,gBAAgB,GAClB,OAAOA,EAAM,aAAa,4BAA6B,cAC1DA,EAAM,YAAY,yBAAyB;GAE7C,GAEME,IAAkB;IACvB,SAASH;IACT,gBAAgBA;IAChB,WAAWE;IACX,kBAAkBA;IAClB,SAASA;IACT,gBAAgBA;IAChB,YAAYA;IACZ,mBAAmBA;IACnB,aAAaF;IACb,oBAAoBA;IACpB,WAAWA;IACX,kBAAkBA;IAClB,eAAeA;IACf,sBAAsBA;IACtB,aAAaA;IACb,oBAAoBA;IACpB,YAAYA;IACZ,mBAAmBA;GACpB,GAEMI,IAAiBlB,EAAM,aAAaY,GAAc;IACvD,GAAGK;IACH,GAAIJ,IAAiB,EAAE,UAAU,GAAK,IAAI,CAAC;IAC3C,iBAAiB;IACjB,aAAaJ,IAAU,KAAO,KAAA;IAC9B,UAAU;GACX,CAAC,GAEKU,IAAqC;IAC1C,GAAGb;IACH,GAAGW;IACH,iBAAiB;IACjB,aAAaR,IAAU,SAAS,KAAA;IAChC,UAAU;GACX;GAKA,OAJII,MACH,EAAU,WAAW,KAIrB,kBAACO,GAAD;IACC,WAAWC,EAAGpB,EAAe;KAAE;KAAS;IAAK,CAAC,GAAGqB,CAAS;IACrD;IACL,GAAIH;IAEH,UAAAD;GACI,CAAA;EAER;EAEA,OACC,kBAACE,GAAD;GAAM,WAAWC,EAAGpB,EAAe;IAAE;IAAS;GAAK,CAAC,GAAGqB,CAAS;GAAQ;GAAK,GAAIhB;GAC/E;EACI,CAAA;CAER;CAEA,IAAMiB,IAAWd,IAChB,kBAACe,GAAD;EAAS,WAAU;EAAiD,eAAY;CAAQ,CAAA,IAExFC;CAED,OACC,kBAAC,UAAD;EACC,WAAWJ,EAAGpB,EAAe;GAAE;GAAS;EAAK,CAAC,GAAGqB,CAAS;EACrD;EACC;EACN,UAAUf;EACV,aAAWE,KAAW,KAAA;EACtB,GAAIH;EANL,UAAA,CAQEiB,GACAZ,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAqBrB,IAAae,IAAa1B,EAAM,YAC9B,EAAE,cAAW,YAAS,SAAM,SAAM,aAAU,GAAGM,KAAS,MACxD,kBAAC,KAAD;CAAQ;CAAK,WAAWe,EAAGpB,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGqB,CAAS;CAAG,GAAIhB;CAA9E,UAAA,CACEmB,GACAd,CACC;AAEL,CAAA,CAAA;AACA,EAAW,cAAc"}

package/dist/components/chat-bubble.js

@@ -5,16 +5,17 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/chat-bubble.tsx
 function i({ variant: i = "assistant", streaming: a = !1, className: o, children: s }) {
 	if (i === "system") return /* @__PURE__ */ n("p", {
-		className: e(t, "px-1 text-center text-[11px] text-basalt-muted-foreground", o),
+		className: e(t, "px-basalt-space-sm text-center text-basalt-xs text-basalt-muted-foreground", o),
 		children: s
 	});
 	let c = i === "user";
 	return /* @__PURE__ */ n("div", {
 		className: e(t, "flex w-full", c ? "justify-end" : "justify-start"),
 		children: /* @__PURE__ */ r("div", {
-			className: e("max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm", c ? "rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground" : "rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50", o),
+			"data-basalt-surface": c ? void 0 : "",
+			className: e("max-w-[92%] px-basalt-panel-x py-basalt-panel-y text-basalt-base leading-[var(--basalt-line-body)] shadow-sm", c ? "rounded-basalt-lg rounded-br-basalt-md bg-basalt-primary text-basalt-primary-foreground" : "rounded-basalt-lg rounded-bl-basalt-md text-basalt-foreground ring-1 ring-basalt-border/50", o),
 			children: [s, a ? /* @__PURE__ */ n("span", {
-				className: "mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none",
+				className: "mt-basalt-space-sm inline-block h-basalt-3 w-basalt-1_5 animate-pulse rounded-basalt-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none",
 				"aria-hidden": !0
 			}) : null]
 		})

package/dist/components/chat-bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-bubble.js","names":[],"sources":["../../src/components/chat-bubble.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type ChatBubbleVariant = \"assistant\" | \"system\" | \"user\";\n\nexport interface ChatBubbleProps {\n\t/**\n\t * Alignment and fill.\n\t * @default \"assistant\"\n\t */\n\tvariant?: ChatBubbleVariant;\n\t/**\n\t * Show a streaming caret after the body.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Optional class name applied to the message bubble.\n\t * Component only accepts variant, streaming, className, and children without native HTML rest forwarding or forwarded ref.\n\t */\n\tclassName?: string;\n\t/**\n\t * Message content.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function ChatBubble({\n\tvariant = \"assistant\",\n\tstreaming = false,\n\tclassName,\n\tchildren,\n}: ChatBubbleProps) {\n\tif (variant === \"system\") {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"px-1 text-center text-[11px] text-basalt-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t}\n\tconst user = variant === \"user\";\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"flex w-full\", user ? \"justify-end\" : \"justify-start\")}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm\",\n\t\t\t\t\tuser\n\t\t\t\t\t\t? \"rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground\"\n\t\t\t\t\t\t: \"rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AA4BA,SAAgB,EAAW,EAC1B,aAAU,aACV,eAAY,IACZ,cACA,eACmB;CACnB,IAAI,MAAY,UACf,OACC,kBAAC,KAAD;EACC,WAAW,EACV,GACA,6DACA,CACD;EAEC;CACC,CAAA;CAGL,IAAM,IAAO,MAAY;CACzB,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAiB,eAAe,IAAO,gBAAgB,eAAe;EACxF,UAAA,kBAAC,OAAD;GACC,WAAW,EACV,uDACA,IACG,+EACA,qGACH,CACD;GAPD,UAAA,CASE,GACA,IACA,kBAAC,QAAD;IACC,WAAU;IACV,eAAA;GACA,CAAA,IACE,IACA;;CACD,CAAA;AAEP"}
+{"version":3,"file":"chat-bubble.js","names":["ChatBubble","variant","cn","BASALT_UI_CLASS","className","user","children","streaming"],"sources":["../../src/components/chat-bubble.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type ChatBubbleVariant = \"assistant\" | \"system\" | \"user\";\n\nexport interface ChatBubbleProps {\n\t/**\n\t * Alignment and fill.\n\t * @default \"assistant\"\n\t */\n\tvariant?: ChatBubbleVariant;\n\t/**\n\t * Show a streaming caret after the body.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Optional class name applied to the message bubble.\n\t * Component only accepts variant, streaming, className, and children without native HTML rest forwarding or forwarded ref.\n\t */\n\tclassName?: string;\n\t/**\n\t * Message content.\n\t */\n\tchildren: ReactNode;\n}\n\nexport function ChatBubble({\n\tvariant = \"assistant\",\n\tstreaming = false,\n\tclassName,\n\tchildren,\n}: ChatBubbleProps) {\n\tif (variant === \"system\") {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"px-basalt-space-sm text-center text-basalt-xs text-basalt-muted-foreground\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t}\n\tconst user = variant === \"user\";\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"flex w-full\", user ? \"justify-end\" : \"justify-start\")}>\n\t\t\t<div\n\t\t\t\tdata-basalt-surface={user ? undefined : \"\"}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"max-w-[92%] px-basalt-panel-x py-basalt-panel-y text-basalt-base leading-[var(--basalt-line-body)] shadow-sm\",\n\t\t\t\t\tuser\n\t\t\t\t\t\t? \"rounded-basalt-lg rounded-br-basalt-md bg-basalt-primary text-basalt-primary-foreground\"\n\t\t\t\t\t\t: \"rounded-basalt-lg rounded-bl-basalt-md text-basalt-foreground ring-1 ring-basalt-border/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"mt-basalt-space-sm inline-block h-basalt-3 w-basalt-1_5 animate-pulse rounded-basalt-sm bg-basalt-primary/70 align-middle motion-reduce:animate-none\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,EAAW,EAC1B,aAAU,aACV,eAAY,IACZ,cACA,eACmB;CACnB,IAAIC,MAAY,UACf,OACC,kBAAC,KAAD;EACC,WAAWC,EACVC,GACA,8EACAC,CACD;EAEC;CACC,CAAA;CAGL,IAAMC,IAAOJ,MAAY;CACzB,OACC,kBAAC,OAAD;EAAK,WAAWC,EAAGC,GAAiB,eAAeE,IAAO,gBAAgB,eAAe;EACxF,UAAA,kBAAC,OAAD;GACC,uBAAqBA,IAAO,KAAA,IAAY;GACxC,WAAWH,EACV,gHACAG,IACG,4FACA,8FACHD,CACD;GARD,UAAA,CAUEE,GACAC,IACA,kBAAC,QAAD;IACC,WAAU;IACV,eAAA;GACA,CAAA,IACE,IACA;;CACD,CAAA;AAEP"}

package/dist/components/chat-composer.d.ts

@@ -1,4 +1,18 @@
+import { type ReactNode } from "react";
 export interface ChatComposerProps {
+    /** Controlled draft; keep one draft per conversation in the application. */
+    value?: string;
+    /** Initial draft when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Model, tool and context controls arranged before Send. */
+    toolbar?: ReactNode;
+    /** Caller-owned attachments; this component never uploads files. */
+    attachments?: readonly ChatComposerAttachment[];
+    onRemoveAttachment?: (id: string) => void;
+    /** Local file selection callback. File validation/upload belong to the application. */
+    onFilesSelect?: (files: File[]) => void;
+    accept?: string;
     /**
      * Disable the field and send.
      * @default false
@@ -19,9 +33,9 @@ export interface ChatComposerProps {
      */
     placeholder?: string;
     /**
-     * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).
+     * Called with trimmed text. Async failure preserves draft and attachments for retry.
      */
-    onSend: (text: string) => void;
+    onSend: (text: string) => void | Promise<void>;
     /**
      * Called when the stop control is pressed while streaming is active.
      */
@@ -42,4 +56,8 @@ export interface ChatComposerProps {
      */
     className?: string;
 }
-export declare function ChatComposer({ disabled, streaming, label, placeholder, onSend, onCancel, sendLabel, cancelLabel, className, }: ChatComposerProps): import("react").JSX.Element;
+export type ChatComposerAttachment = {
+    id: string;
+    name: string;
+};
+export declare function ChatComposer({ disabled, streaming, label, placeholder, onSend, onCancel, sendLabel, cancelLabel, className, value, defaultValue, onValueChange, toolbar, attachments, onRemoveAttachment, onFilesSelect, accept, }: ChatComposerProps): import("react").JSX.Element;