@nocoo/basalt 2.0.2 → 2.1.0

package/dist/components/breadcrumbs.d.ts

@@ -1,9 +1,29 @@
 import type { ReactNode } from "react";
-export declare function Breadcrumbs({ items, className, }: {
-    items: {
-        href?: string;
-        label: ReactNode;
-        icon?: ReactNode;
-    }[];
+export interface BreadcrumbItem {
+    /**
+     * Navigation target URL. When omitted, item renders as unlinked text (and only receives aria-current="page" if it is the final item).
+     */
+    href?: string;
+    /**
+     * Content label rendered inside the breadcrumb segment.
+     */
+    label: ReactNode;
+    /**
+     * Optional leading icon rendered before the label.
+     */
+    icon?: ReactNode;
+}
+export interface BreadcrumbsProps {
+    /**
+     * List of breadcrumb segments ({ label: ReactNode, href?: string, icon?: ReactNode }[]) in hierarchical order from root to current page.
+     * Only the final item in the array without an href receives aria-current="page".
+     * Interactive items render via Link, delegating routing to LinkProvider when configured.
+     * Component only accepts items and className without native HTML rest attribute forwarding or forwarded ref.
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Optional class name applied to the outer nav element.
+     */
     className?: string;
-}): import("react").JSX.Element;
+}
+export declare function Breadcrumbs({ items, className }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/breadcrumbs.js

@@ -1,38 +1,39 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Link as t } from "./link.js";
-import { ChevronRight as n } from "lucide-react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+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 a = "text-sm font-normal";
-function o({ items: o, className: s }) {
-	return /* @__PURE__ */ r("nav", {
+var o = "text-sm font-normal";
+function s({ items: s, className: c }) {
+	return /* @__PURE__ */ i("nav", {
 		"aria-label": "Breadcrumb",
-		className: e("flex items-center gap-1 text-sm font-normal text-basalt-muted-foreground", s),
-		children: o.map((s, c) => {
-			let l = c === o.length - 1 && !s.href, u = s.icon ? /* @__PURE__ */ i("span", {
+		className: e(t, "flex items-center gap-1 text-sm 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",
-				children: [s.icon, s.label]
-			}) : s.label;
-			return /* @__PURE__ */ i("span", {
+				children: [t.icon, t.label]
+			}) : t.label;
+			return /* @__PURE__ */ a("span", {
 				className: "flex items-center gap-1",
-				children: [c > 0 ? /* @__PURE__ */ r(n, {
+				children: [c > 0 ? /* @__PURE__ */ i(r, {
 					className: "size-3",
 					"aria-hidden": "true"
-				}) : null, s.href ? /* @__PURE__ */ r(t, {
-					href: s.href,
-					className: e(a, "text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground"),
+				}) : null, t.href ? /* @__PURE__ */ i(n, {
+					href: t.href,
+					className: e(o, "text-basalt-muted-foreground no-underline transition-colors hover:text-basalt-foreground"),
 					children: u
-				}) : /* @__PURE__ */ r("span", {
+				}) : /* @__PURE__ */ i("span", {
 					"aria-current": l ? "page" : void 0,
-					className: e(a, l ? "text-basalt-foreground" : "text-basalt-muted-foreground"),
+					className: e(o, l ? "text-basalt-foreground" : "text-basalt-muted-foreground"),
 					children: u
 				})]
-			}, `${String(s.label)}-${c}`);
+			}, `${String(t.label)}-${c}`);
 		})
 	});
 }
 //#endregion
-export { o as Breadcrumbs };
+export { s as Breadcrumbs };
 
 //# sourceMappingURL=breadcrumbs.js.map

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 { Link } from \"./link\";\n\nconst crumbTypeClass = \"text-sm font-normal\";\n\nexport function Breadcrumbs({\n\titems,\n\tclassName,\n}: {\n\titems: { href?: string; label: ReactNode; icon?: ReactNode }[];\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<nav\n\t\t\taria-label=\"Breadcrumb\"\n\t\t\tclassName={cn(\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":";;;;;;AAKA,IAAM,IAAiB;AAEvB,SAAgB,EAAY,EAC3B,UACA,gBAIE;CACF,OACC,kBAAC,OAAD;EACC,cAAW;EACX,WAAW,EACV,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":[],"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"}

package/dist/components/button.d.ts

@@ -4,13 +4,59 @@ declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
     size?: "default" | "icon" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, Omit<VariantProps<typeof buttonVariants>, "variant" | "size"> {
+    /**
+     * Visual style variant.
+     * @default "default"
+     */
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+    /**
+     * Sizing preset.
+     * @default "default"
+     */
+    size?: VariantProps<typeof buttonVariants>["size"];
+    /**
+     * Pass control to child element slot.
+     *
+     * Note: Child element must forward props and ref in all states. When disabled or loading,
+     * asChild suppresses click, keyboard activation (Enter/Space), and pointer handlers on both
+     * child and parent while retaining browser default Tab navigation without trapping focus.
+     * To preserve single DOM node layout and avoid unexpected child layout shifts, no internal
+     * spinner is inserted in asChild loading mode; visual disabled state is expressed via aria-disabled.
+     *
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * Button type attribute.
+     * @default "button"
+     */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /**
+     * Display loading spinner and disable interactions.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Optional leading icon slot.
+     */
     icon?: React.ReactNode;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof buttonVariants> {
+export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, Omit<VariantProps<typeof buttonVariants>, "variant" | "size"> {
+    /**
+     * Visual style variant.
+     * @default "default"
+     */
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+    /**
+     * Sizing preset.
+     * @default "default"
+     */
+    size?: VariantProps<typeof buttonVariants>["size"];
+    /**
+     * Optional leading icon slot.
+     */
     icon?: React.ReactNode;
 }
 export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/button.js

@@ -1,13 +1,14 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_RING as t } from "./overlay.js";
-import * as n from "react";
-import { Slot as r } from "@radix-ui/react-slot";
-import { cva as i } from "class-variance-authority";
-import { Loader2 as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { FOCUS_RING as n } from "./overlay.js";
+import * as r from "react";
+import { Slot as i } from "@radix-ui/react-slot";
+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 c = i(`inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${t} disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
+var l = a(`${t} inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${n} disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
 			default: "bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary/90",
@@ -28,46 +29,96 @@ var c = i(`inline-flex items-center justify-center gap-2 rounded-basalt-md text-
 		variant: "default",
 		size: "default"
 	}
-}), l = n.forwardRef(({ className: t, variant: n, size: i, asChild: l = !1, type: u = "button", loading: d = !1, icon: f, children: p, disabled: m, ...h }, g) => {
-	let _ = l ? r : "button";
-	if (l) return /* @__PURE__ */ o(_, {
-		className: e(c({
-			variant: n,
-			size: i
-		}), t),
-		ref: g,
-		...h,
-		children: p
-	});
-	let v = d ? /* @__PURE__ */ o(a, {
-		className: "animate-basalt-spin",
+}), u = r.forwardRef(({ className: t, variant: n, size: a, asChild: u = !1, type: d = "button", loading: f = !1, icon: p, children: m, disabled: h, ...g }, _) => {
+	let v = !!(h || f);
+	if (u) {
+		if (v && r.isValidElement(m)) {
+			let o = m, c = typeof o.type == "string" && o.type.toLowerCase() === "button", u = (e) => {
+				e.preventDefault(), e.stopPropagation(), "stopImmediatePropagation" in e && typeof e.stopImmediatePropagation == "function" && e.stopImmediatePropagation();
+			}, d = (e) => {
+				e.key === "Enter" || e.key === " " || e.key === "Spacebar" ? (e.preventDefault(), e.stopPropagation(), typeof e.nativeEvent?.stopImmediatePropagation == "function" && e.nativeEvent.stopImmediatePropagation()) : (e.stopPropagation(), typeof e.nativeEvent?.stopImmediatePropagation == "function" && e.nativeEvent.stopImmediatePropagation());
+			}, p = {
+				onClick: u,
+				onClickCapture: u,
+				onKeyDown: d,
+				onKeyDownCapture: d,
+				onKeyUp: d,
+				onKeyUpCapture: d,
+				onKeyPress: d,
+				onKeyPressCapture: d,
+				onMouseDown: u,
+				onMouseDownCapture: u,
+				onMouseUp: u,
+				onMouseUpCapture: u,
+				onPointerDown: u,
+				onPointerDownCapture: u,
+				onPointerUp: u,
+				onPointerUpCapture: u,
+				onAuxClick: u,
+				onAuxClickCapture: u
+			}, { disabled: h, ...v } = o.props, y = r.cloneElement(o, {
+				...v,
+				...p,
+				...c ? { disabled: !0 } : {},
+				"aria-disabled": !0,
+				"aria-busy": f ? !0 : void 0,
+				tabIndex: -1
+			}), b = {
+				...g,
+				...p,
+				"aria-disabled": !0,
+				"aria-busy": f ? "true" : void 0,
+				tabIndex: -1
+			};
+			return c && (b.disabled = !0), /* @__PURE__ */ s(i, {
+				className: e(l({
+					variant: n,
+					size: a
+				}), t),
+				ref: _,
+				...b,
+				children: y
+			});
+		}
+		return /* @__PURE__ */ s(i, {
+			className: e(l({
+				variant: n,
+				size: a
+			}), t),
+			ref: _,
+			...g,
+			children: m
+		});
+	}
+	let y = f ? /* @__PURE__ */ s(o, {
+		className: "animate-basalt-spin motion-reduce:animate-none",
 		"aria-hidden": "true"
-	}) : f;
-	return /* @__PURE__ */ s("button", {
-		className: e(c({
+	}) : p;
+	return /* @__PURE__ */ c("button", {
+		className: e(l({
 			variant: n,
-			size: i
+			size: a
 		}), t),
-		ref: g,
-		type: u,
-		disabled: m || d,
-		"aria-busy": d || void 0,
-		...h,
-		children: [v, p]
+		ref: _,
+		type: d,
+		disabled: v,
+		"aria-busy": f || void 0,
+		...g,
+		children: [y, m]
 	});
 });
-l.displayName = "Button";
-var u = n.forwardRef(({ className: t, variant: n, size: r, icon: i, children: a, ...o }, l) => /* @__PURE__ */ s("a", {
-	ref: l,
-	className: e(c({
+u.displayName = "Button";
+var d = r.forwardRef(({ className: t, variant: n, size: r, icon: i, children: a, ...o }, s) => /* @__PURE__ */ c("a", {
+	ref: s,
+	className: e(l({
 		variant: n,
 		size: r
 	}), t),
 	...o,
 	children: [i, a]
 }));
-u.displayName = "LinkButton";
+d.displayName = "LinkButton";
 //#endregion
-export { l as Button, u as LinkButton, c as buttonVariants };
+export { u as Button, d as LinkButton, l as buttonVariants };
 
 //# sourceMappingURL=button.js.map

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 { FOCUS_RING } from \"./overlay\";\n\nconst buttonVariants = cva(\n\t`inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none 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\",\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 React.ButtonHTMLAttributes<HTMLButtonElement>,\n\t\tVariantProps<typeof buttonVariants> {\n\tasChild?: boolean;\n\tloading?: boolean;\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 Comp = asChild ? Slot : \"button\";\n\t\tif (asChild) {\n\t\t\treturn (\n\t\t\t\t<Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</Comp>\n\t\t\t);\n\t\t}\n\t\tconst iconNode = loading ? (\n\t\t\t<Loader2 className=\"animate-basalt-spin\" 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={disabled || loading}\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\tVariantProps<typeof buttonVariants> {\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":";;;;;;;;;AAOA,IAAM,IAAiB,EACtB,yGAAyG,EAAW,gHACpH;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,GAUa,IAAS,EAAM,YAE1B,EACC,cACA,YACA,SACA,aAAU,IACV,UAAO,UACP,aAAU,IACV,SACA,aACA,aACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAO,IAAU,IAAO;CAC9B,IAAI,GACH,OACC,kBAAC,GAAD;EAAM,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EAAQ;EAAK,GAAI;EAC/E;CACI,CAAA;CAGR,IAAM,IAAW,IAChB,kBAAC,GAAD;EAAS,WAAU;EAAsB,eAAY;CAAQ,CAAA,IAE7D;CAED,OACC,kBAAC,UAAD;EACC,WAAW,EAAG,EAAe;GAAE;GAAS;EAAK,CAAC,GAAG,CAAS;EACrD;EACC;EACN,UAAU,KAAY;EACtB,aAAW,KAAW,KAAA;EACtB,GAAI;EANL,UAAA,CAQE,GACA,CACM;;AAEV,CACD;AACA,EAAO,cAAc;AAQrB,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":[],"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\nconst buttonVariants = cva(\n\t`${BASALT_UI_CLASS} inline-flex items-center justify-center gap-2 rounded-basalt-md text-sm font-medium transition-colors ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-50 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\",\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\tevent.stopPropagation();\n\t\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// For non-activation keys like Tab, suppress user handlers from running while preserving browser default navigation\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (typeof event.nativeEvent?.stopImmediatePropagation === \"function\") {\n\t\t\t\t\t\t\tevent.nativeEvent.stopImmediatePropagation();\n\t\t\t\t\t\t}\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 { disabled: _ignoredChildDisabled, ...sanitizedProps } = childElement.props;\n\n\t\t\t\tconst sanitizedChild = React.cloneElement(childElement, {\n\t\t\t\t\t...sanitizedProps,\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":";;;;;;;;;;AAQA,IAAM,IAAiB,EACtB,GAAG,EAAgB,yGAAyG,EAAW,yIACvI;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;IACtD,AAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,cAC/D,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,OAAO,EAAM,aAAa,4BAA6B,cAC1D,EAAM,YAAY,yBAAyB,MAI5C,EAAM,gBAAgB,GAClB,OAAO,EAAM,aAAa,4BAA6B,cAC1D,EAAM,YAAY,yBAAyB;GAG9C,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,EAAE,UAAU,GAAuB,GAAG,MAAmB,EAAa,OAEtE,IAAiB,EAAM,aAAa,GAAc;IACvD,GAAG;IACH,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"}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export type ChatBubbleVariant = "assistant" | "system" | "user";
+export interface ChatBubbleProps {
+    /**
+     * Alignment and fill.
+     * @default "assistant"
+     */
+    variant?: ChatBubbleVariant;
+    /**
+     * Show a streaming caret after the body.
+     * @default false
+     */
+    streaming?: boolean;
+    /**
+     * Optional class name applied to the message bubble.
+     * Component only accepts variant, streaming, className, and children without native HTML rest forwarding or forwarded ref.
+     */
+    className?: string;
+    /**
+     * Message content.
+     */
+    children: ReactNode;
+}
+export declare function ChatBubble({ variant, streaming, className, children, }: ChatBubbleProps): import("react").JSX.Element;

package/dist/components/chat-bubble.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+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),
+		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),
+			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",
+				"aria-hidden": !0
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { i as ChatBubble };
+
+//# sourceMappingURL=chat-bubble.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,45 @@
+export interface ChatComposerProps {
+    /**
+     * Disable the field and send.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.
+     * @default false
+     */
+    streaming?: boolean;
+    /**
+     * Field accessible name.
+     * @default "Message"
+     */
+    label?: string;
+    /**
+     * Placeholder when empty.
+     */
+    placeholder?: string;
+    /**
+     * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).
+     */
+    onSend: (text: string) => void;
+    /**
+     * Called when the stop control is pressed while streaming is active.
+     */
+    onCancel?: () => void;
+    /**
+     * Send control accessible name.
+     * @default "Send message"
+     */
+    sendLabel?: string;
+    /**
+     * Stop control accessible name.
+     * @default "Stop generating"
+     */
+    cancelLabel?: string;
+    /**
+     * Optional class name applied to the form container.
+     * Component manages internal draft/height state and does not forward native form rest attributes or ref.
+     */
+    className?: string;
+}
+export declare function ChatComposer({ disabled, streaming, label, placeholder, onSend, onCancel, sendLabel, cancelLabel, className, }: ChatComposerProps): import("react").JSX.Element;

package/dist/components/chat-composer.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { InputArea as n } from "./input-area.js";
+import { useRef as r, useState as i } from "react";
+import { ArrowUp as a, Square as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/chat-composer.tsx
+function l({ disabled: l = !1, streaming: u = !1, label: d = "Message", placeholder: f, onSend: p, onCancel: m, sendLabel: h = "Send message", cancelLabel: g = "Stop generating", className: _ }) {
+	let [v, y] = i(""), b = r(null), x = r(!1), S = () => {
+		let e = b.current;
+		e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
+	}, C = () => {
+		let e = v.trim();
+		!e || l || u || (p(e), y(""), requestAnimationFrame(() => {
+			let e = b.current;
+			e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`, e.focus());
+		}));
+	};
+	return /* @__PURE__ */ s("form", {
+		className: e("border-t border-basalt-border/50 bg-basalt-card p-3", _),
+		onSubmit: (e) => {
+			e.preventDefault(), C();
+		},
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50",
+			children: [/* @__PURE__ */ s(n, {
+				ref: b,
+				value: v,
+				onChange: (e) => {
+					y(e.target.value), requestAnimationFrame(S);
+				},
+				onCompositionStart: () => {
+					x.current = !0;
+				},
+				onCompositionEnd: () => {
+					x.current = !1;
+				},
+				onKeyDown: (e) => {
+					x.current || e.nativeEvent.isComposing || e.key !== "Enter" || e.shiftKey || (e.preventDefault(), C());
+				},
+				rows: 1,
+				placeholder: f,
+				disabled: l,
+				"aria-label": d,
+				className: "max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0"
+			}), u ? /* @__PURE__ */ s(t, {
+				type: "button",
+				size: "icon",
+				variant: "secondary",
+				onClick: m,
+				disabled: !m,
+				"aria-label": g,
+				children: /* @__PURE__ */ s(o, {
+					className: "h-3.5 w-3.5 fill-current",
+					strokeWidth: 0
+				})
+			}) : /* @__PURE__ */ s(t, {
+				type: "submit",
+				size: "icon",
+				disabled: l || !v.trim(),
+				"aria-label": h,
+				children: /* @__PURE__ */ s(a, {
+					className: "h-4 w-4",
+					strokeWidth: 2.25
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { l as ChatComposer };
+
+//# sourceMappingURL=chat-composer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.js","names":[],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tconst el = ref.current;\n\t\t\tif (el) {\n\t\t\t\tel.style.height = \"0px\";\n\t\t\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t\t\t\tel.focus();\n\t\t\t}\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgB,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,IAAM,EAA4B,IAAI,GACtC,IAAe,EAAO,EAAK,GAE3B,UAAe;EACpB,IAAM,IAAK,EAAI;EACV,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE;CACrD,GAEM,UAAe;EACpB,IAAM,IAAO,EAAM,KAAK;EACpB,CAAC,KAAQ,KAAY,MAGzB,EAAO,CAAI,GACX,EAAS,EAAE,GACX,4BAA4B;GAC3B,IAAM,IAAK,EAAI;GACf,AAAI,MACH,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE,KACpD,EAAG,MAAM;EAEX,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,uDAAuD,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADA,EAAM,eAAe,GACrB,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,sBAAsB,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAC5D,EAAa,WAAW,EAAM,YAAY,eAG1C,EAAM,QAAQ,WAAW,EAAM,aAGnC,EAAM,eAAe,GACrB,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAY;IACZ,WAAU;GACV,CAAA,GACA,IACA,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAU,KAAY,CAAC,EAAM,KAAK;IAClC,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ChatHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "className"> {
+    /**
+     * Conversation title.
+     */
+    title: ReactNode;
+    /**
+     * Secondary line under the title.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Leading mark, usually an icon.
+     */
+    leading?: ReactNode;
+    /**
+     * Trailing actions.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class name applied to the header element.
+     * Component inherits native header HTMLAttributes on the root element but does not forward ref.
+     */
+    className?: string;
+}
+export declare function ChatHeader({ title, subtitle, leading, children, className, ...props }: ChatHeaderProps): import("react").JSX.Element;

package/dist/components/chat-header.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/chat-header.tsx
+function i({ title: i, subtitle: a, leading: o, children: s, className: c, ...l }) {
+	return /* @__PURE__ */ r("header", {
+		className: e(t, "flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5", c),
+		...l,
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [o ? /* @__PURE__ */ n("span", {
+				className: "flex h-8 w-8 items-center justify-center",
+				children: o
+			}) : null, /* @__PURE__ */ r("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ n("p", {
+					className: "truncate text-sm font-semibold tracking-tight",
+					children: i
+				}), a ? /* @__PURE__ */ n("p", {
+					className: "truncate text-[11px] text-basalt-muted-foreground",
+					children: a
+				}) : null]
+			})]
+		}), s ? /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-1",
+			children: s
+		}) : null]
+	});
+}
+//#endregion
+export { i as ChatHeader };
+
+//# sourceMappingURL=chat-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.js","names":[],"sources":["../../src/components/chat-header.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface ChatHeaderProps\n\textends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"children\" | \"className\"> {\n\t/**\n\t * Conversation title.\n\t */\n\ttitle: ReactNode;\n\t/**\n\t * Secondary line under the title.\n\t */\n\tsubtitle?: ReactNode;\n\t/**\n\t * Leading mark, usually an icon.\n\t */\n\tleading?: ReactNode;\n\t/**\n\t * Trailing actions.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Optional class name applied to the header element.\n\t * Component inherits native header HTMLAttributes on the root element but does not forward ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatHeader({\n\ttitle,\n\tsubtitle,\n\tleading,\n\tchildren,\n\tclassName,\n\t...props\n}: ChatHeaderProps) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-2\">\n\t\t\t\t{leading ? (\n\t\t\t\t\t<span className=\"flex h-8 w-8 items-center justify-center\">{leading}</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t<p className=\"truncate text-sm font-semibold tracking-tight\">{title}</p>\n\t\t\t\t\t{subtitle ? (\n\t\t\t\t\t\t<p className=\"truncate text-[11px] text-basalt-muted-foreground\">{subtitle}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{children ? <div className=\"flex items-center gap-1\">{children}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAAW,EAC1B,UACA,aACA,YACA,aACA,cACA,GAAG,KACgB;CACnB,OACC,kBAAC,UAAD;EACC,WAAW,EACV,GACA,wFACA,CACD;EACA,GAAI;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,IACA,kBAAC,QAAD;IAAM,WAAU;IAA4C,UAAA;GAAc,CAAA,IACvE,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAAiD,UAAA;IAAS,CAAA,GACtE,IACA,kBAAC,KAAD;KAAG,WAAU;KAAqD,UAAA;IAAY,CAAA,IAC3E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAA,IAAW,kBAAC,OAAD;GAAK,WAAU;GAA2B;EAAc,CAAA,IAAI,IACjE;;AAEV"}