@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/chat-message.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { Collapsible as n, CollapsibleContent as r, CollapsibleTrigger as i } from "./collapsible.js";
+import { useChatMessage as a } from "../viewmodels/use-chat-message.js";
+import { ChatMarkdown as o } from "./chat-markdown.js";
+import { Check as s, Copy as c, ExternalLink as l, FileText as u, Pencil as d, RotateCcw as f, ThumbsDown as p, ThumbsUp as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/chat-message.tsx
+function v({ variant: v, content: y, streaming: b, trace: x, children: S, author: C, onEdit: w, onRegenerate: T, feedback: E, onFeedback: D, className: O, sources: k = [], sourcesLabel: A = "Sources" }) {
+	let j = a(y, k);
+	return /* @__PURE__ */ _("article", {
+		"aria-label": `${C || (v === "user" ? "You" : "Assistant")} message`,
+		className: e("basalt-ui group min-w-0 space-y-basalt-content-gap", O),
+		children: [/* @__PURE__ */ g("div", {
+			className: e("flex", v === "user" ? "justify-end" : "justify-start"),
+			children: /* @__PURE__ */ _("div", {
+				"data-basalt-surface": v === "user" ? "" : void 0,
+				className: e("min-w-0 space-y-basalt-content-gap", v === "user" ? "max-w-[90%] rounded-basalt-lg px-basalt-panel-x py-basalt-panel-y" : "w-full"),
+				children: [
+					x,
+					y && (v === "user" ? /* @__PURE__ */ g("p", {
+						className: "whitespace-pre-wrap break-words text-basalt-base leading-[var(--basalt-line-relaxed)]",
+						children: y
+					}) : /* @__PURE__ */ g(o, {
+						content: y,
+						streaming: b
+					})),
+					b && /* @__PURE__ */ g("span", {
+						"aria-hidden": "true",
+						className: "inline-block size-basalt-2 rounded-basalt-full bg-basalt-primary animate-pulse motion-reduce:animate-none"
+					}),
+					S
+				]
+			})
+		}), !b && y && /* @__PURE__ */ _(n, {
+			className: "space-y-basalt-content-gap",
+			children: [/* @__PURE__ */ _("div", {
+				"data-slot": "chat-actions",
+				className: e("flex flex-wrap items-center gap-basalt-space-xs text-basalt-muted-foreground", v === "user" ? "justify-end -mr-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]" : "-ml-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]"),
+				children: [
+					/* @__PURE__ */ g(t, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": j.copied ? "Copied" : "Copy message",
+						onClick: () => void j.copy((e) => navigator.clipboard.writeText(e)),
+						children: j.copied ? /* @__PURE__ */ g(s, { strokeWidth: 1.5 }) : /* @__PURE__ */ g(c, { strokeWidth: 1.5 })
+					}),
+					w && /* @__PURE__ */ g(t, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": "Edit message",
+						onClick: w,
+						children: /* @__PURE__ */ g(d, { strokeWidth: 1.5 })
+					}),
+					T && /* @__PURE__ */ g(t, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": "Regenerate response",
+						onClick: T,
+						children: /* @__PURE__ */ g(f, { strokeWidth: 1.5 })
+					}),
+					D && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(t, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": "Helpful",
+						"aria-pressed": E === "up",
+						onClick: () => D("up"),
+						children: /* @__PURE__ */ g(m, { strokeWidth: 1.5 })
+					}), /* @__PURE__ */ g(t, {
+						size: "icon",
+						variant: "ghost",
+						"aria-label": "Not helpful",
+						"aria-pressed": E === "down",
+						onClick: () => D("down"),
+						children: /* @__PURE__ */ g(p, { strokeWidth: 1.5 })
+					})] }),
+					j.sources.length > 0 && /* @__PURE__ */ g(i, {
+						"aria-label": `${A} ${j.sources.length}`,
+						className: "ml-basalt-control-gap min-h-basalt-action gap-basalt-control-gap rounded-basalt-sm px-basalt-space-sm text-basalt-sm font-normal text-basalt-muted-foreground hover:bg-basalt-hover",
+						children: /* @__PURE__ */ _("span", {
+							className: "flex items-center gap-basalt-control-gap",
+							children: [
+								/* @__PURE__ */ g(u, {
+									"aria-hidden": "true",
+									className: "size-basalt-icon",
+									strokeWidth: 1.5
+								}),
+								/* @__PURE__ */ g("span", { children: A }),
+								/* @__PURE__ */ g("span", {
+									className: "tabular-nums",
+									children: j.sources.length
+								})
+							]
+						})
+					}),
+					j.copyError && /* @__PURE__ */ g("span", {
+						role: "alert",
+						className: "text-basalt-sm text-basalt-danger",
+						children: "Could not copy"
+					})
+				]
+			}), j.sources.length > 0 && /* @__PURE__ */ g(r, {
+				unstyled: !0,
+				children: /* @__PURE__ */ g("ul", {
+					"aria-label": A,
+					className: "space-y-basalt-space-xs",
+					children: j.sources.map((e) => {
+						let t = e.href ? "a" : "span";
+						return /* @__PURE__ */ g("li", { children: /* @__PURE__ */ _(t, {
+							href: e.href,
+							target: e.href ? "_blank" : void 0,
+							rel: e.href ? "noopener noreferrer" : void 0,
+							className: "flex min-w-0 items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground outline-hidden hover:bg-basalt-hover focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring",
+							children: [
+								/* @__PURE__ */ g(u, {
+									"aria-hidden": "true",
+									className: "size-basalt-icon shrink-0",
+									strokeWidth: 1.5
+								}),
+								/* @__PURE__ */ g("span", {
+									className: "min-w-0 flex-1 break-words",
+									children: e.name
+								}),
+								e.type && /* @__PURE__ */ g("span", {
+									className: "shrink-0 font-mono text-basalt-xs",
+									children: e.type
+								}),
+								e.href && /* @__PURE__ */ g(l, {
+									"aria-hidden": "true",
+									className: "size-basalt-icon-sm shrink-0",
+									strokeWidth: 1.5
+								})
+							]
+						}) }, e.id);
+					})
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { v as ChatMessage };
+
+//# sourceMappingURL=chat-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.js","names":["_Fragment","ChatMessage","vm","useChatMessage","content","sources","author","variant","cn","className","trace","ChatMarkdown","streaming","children","Collapsible","Button","text","Check","Copy","onEdit","Pencil","onRegenerate","RotateCcw","onFeedback","Fragment","feedback","ThumbsUp","ThumbsDown","CollapsibleTrigger","sourcesLabel","FileText","CollapsibleContent","Source","source","ExternalLink"],"sources":["../../src/components/chat-message.tsx"],"sourcesContent":["import {\n\tCheck,\n\tCopy,\n\tExternalLink,\n\tFileText,\n\tPencil,\n\tRotateCcw,\n\tThumbsDown,\n\tThumbsUp,\n} from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useChatMessage } from \"../viewmodels/use-chat-message\";\nimport { Button } from \"./button\";\nimport { ChatMarkdown } from \"./chat-markdown\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\n\nexport interface ChatMessageProps {\n\tvariant: \"user\" | \"assistant\";\n\tcontent: string;\n\tstreaming?: boolean;\n\t/** Thinking, tool calls and other trace content before the response. */\n\ttrace?: ReactNode;\n\t/** Approval or result content after the response; use sources for citations. */\n\tchildren?: ReactNode;\n\tauthor?: string;\n\tonEdit?: () => void;\n\tonRegenerate?: () => void;\n\tfeedback?: \"up\" | \"down\";\n\tonFeedback?: (value: \"up\" | \"down\") => void;\n\t/** Compact source disclosure beside message actions. No card wrapper is added. */\n\tsources?: readonly { id: string; name: string; type?: string; href?: string }[];\n\t/** Source disclosure label. @default \"Sources\" */\n\tsourcesLabel?: string;\n\tclassName?: string;\n}\n\nexport function ChatMessage({\n\tvariant,\n\tcontent,\n\tstreaming,\n\ttrace,\n\tchildren,\n\tauthor,\n\tonEdit,\n\tonRegenerate,\n\tfeedback,\n\tonFeedback,\n\tclassName,\n\tsources = [],\n\tsourcesLabel = \"Sources\",\n}: ChatMessageProps) {\n\tconst vm = useChatMessage(content, sources);\n\treturn (\n\t\t<article\n\t\t\taria-label={`${author || (variant === \"user\" ? \"You\" : \"Assistant\")} message`}\n\t\t\tclassName={cn(\"basalt-ui group min-w-0 space-y-basalt-content-gap\", className)}\n\t\t>\n\t\t\t<div className={cn(\"flex\", variant === \"user\" ? \"justify-end\" : \"justify-start\")}>\n\t\t\t\t<div\n\t\t\t\t\tdata-basalt-surface={variant === \"user\" ? \"\" : undefined}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"min-w-0 space-y-basalt-content-gap\",\n\t\t\t\t\t\tvariant === \"user\"\n\t\t\t\t\t\t\t? \"max-w-[90%] rounded-basalt-lg px-basalt-panel-x py-basalt-panel-y\"\n\t\t\t\t\t\t\t: \"w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{trace}\n\t\t\t\t\t{content &&\n\t\t\t\t\t\t(variant === \"user\" ? (\n\t\t\t\t\t\t\t<p className=\"whitespace-pre-wrap break-words text-basalt-base leading-[var(--basalt-line-relaxed)]\">\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ChatMarkdown content={content} streaming={streaming} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t{streaming && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName=\"inline-block size-basalt-2 rounded-basalt-full bg-basalt-primary animate-pulse motion-reduce:animate-none\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{!streaming && content && (\n\t\t\t\t<Collapsible className=\"space-y-basalt-content-gap\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-slot=\"chat-actions\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-wrap items-center gap-basalt-space-xs text-basalt-muted-foreground\",\n\t\t\t\t\t\t\tvariant === \"user\"\n\t\t\t\t\t\t\t\t? \"justify-end -mr-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]\"\n\t\t\t\t\t\t\t\t: \"-ml-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\taria-label={vm.copied ? \"Copied\" : \"Copy message\"}\n\t\t\t\t\t\t\tonClick={() => void vm.copy((text) => navigator.clipboard.writeText(text))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{vm.copied ? <Check strokeWidth={1.5} /> : <Copy strokeWidth={1.5} />}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{onEdit && (\n\t\t\t\t\t\t\t<Button size=\"icon\" variant=\"ghost\" aria-label=\"Edit message\" onClick={onEdit}>\n\t\t\t\t\t\t\t\t<Pencil strokeWidth={1.5} />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onRegenerate && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\taria-label=\"Regenerate response\"\n\t\t\t\t\t\t\t\tonClick={onRegenerate}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RotateCcw strokeWidth={1.5} />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onFeedback && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\taria-label=\"Helpful\"\n\t\t\t\t\t\t\t\t\taria-pressed={feedback === \"up\"}\n\t\t\t\t\t\t\t\t\tonClick={() => onFeedback(\"up\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ThumbsUp strokeWidth={1.5} />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\taria-label=\"Not helpful\"\n\t\t\t\t\t\t\t\t\taria-pressed={feedback === \"down\"}\n\t\t\t\t\t\t\t\t\tonClick={() => onFeedback(\"down\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ThumbsDown strokeWidth={1.5} />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{vm.sources.length > 0 && (\n\t\t\t\t\t\t\t<CollapsibleTrigger\n\t\t\t\t\t\t\t\taria-label={`${sourcesLabel} ${vm.sources.length}`}\n\t\t\t\t\t\t\t\tclassName=\"ml-basalt-control-gap min-h-basalt-action gap-basalt-control-gap rounded-basalt-sm px-basalt-space-sm text-basalt-sm font-normal text-basalt-muted-foreground hover:bg-basalt-hover\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-basalt-control-gap\">\n\t\t\t\t\t\t\t\t\t<FileText aria-hidden=\"true\" className=\"size-basalt-icon\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t\t\t<span>{sourcesLabel}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"tabular-nums\">{vm.sources.length}</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{vm.copyError && (\n\t\t\t\t\t\t\t<span role=\"alert\" className=\"text-basalt-sm text-basalt-danger\">\n\t\t\t\t\t\t\t\tCould not copy\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{vm.sources.length > 0 && (\n\t\t\t\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t\t\t\t<ul aria-label={sourcesLabel} className=\"space-y-basalt-space-xs\">\n\t\t\t\t\t\t\t\t{vm.sources.map((source) => {\n\t\t\t\t\t\t\t\t\tconst Source = source.href ? \"a\" : \"span\";\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<li key={source.id}>\n\t\t\t\t\t\t\t\t\t\t\t<Source\n\t\t\t\t\t\t\t\t\t\t\t\thref={source.href}\n\t\t\t\t\t\t\t\t\t\t\t\ttarget={source.href ? \"_blank\" : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\trel={source.href ? \"noopener noreferrer\" : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex min-w-0 items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground outline-hidden hover:bg-basalt-hover focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<FileText\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words\">{source.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{source.type && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 font-mono text-basalt-xs\">{source.type}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t{source.href && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon-sm shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</Source>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t)}\n\t\t\t\t</Collapsible>\n\t\t\t)}\n\t\t</article>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/checkbox.js

@@ -9,21 +9,21 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import * as l from "@radix-ui/react-checkbox";
 //#region src/components/checkbox.tsx
 var u = {
-	sm: "h-3 w-3",
-	default: "h-4 w-4"
+	sm: "h-basalt-check-sm w-basalt-check-sm",
+	default: "h-basalt-check w-basalt-check"
 }, d = {
-	sm: "hidden h-3 w-3 group-data-[state=checked]:block",
-	default: "hidden h-4 w-4 group-data-[state=checked]:block"
+	sm: "hidden h-basalt-3 w-basalt-3 group-data-[state=checked]:block",
+	default: "hidden h-basalt-4 w-basalt-4 group-data-[state=checked]:block"
 }, f = {
-	sm: "hidden h-2.5 w-2.5 group-data-[state=indeterminate]:block",
-	default: "hidden h-3 w-3 group-data-[state=indeterminate]:block"
+	sm: "hidden h-basalt-2_5 w-basalt-2_5 group-data-[state=indeterminate]:block",
+	default: "hidden h-basalt-3 w-basalt-3 group-data-[state=indeterminate]:block"
 }, p = i.createContext(null);
 function m(e, t, n) {
 	return n ? e.includes(t) ? e : [...e, t] : e.filter((e) => e !== t);
 }
 var h = i.forwardRef(({ className: r, size: i = "default", ...p }, m) => /* @__PURE__ */ s(l.Root, {
 	ref: m,
-	className: e(t, "group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", u[i], n, r),
+	className: e(t, "group peer shrink-0 rounded-basalt-sm border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", u[i], n, r),
 	...p,
 	children: /* @__PURE__ */ c(l.Indicator, {
 		className: "flex items-center justify-center text-current",
@@ -55,10 +55,10 @@ var g = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange:
 			disabled: l,
 			"aria-invalid": g.ariaInvalid,
 			"aria-describedby": g.mergedDescribedBy,
-			className: e("flex flex-col gap-2", t),
+			className: e("basalt-ui flex flex-col gap-basalt-field-gap", t),
 			children: [u, g.invalid ? /* @__PURE__ */ s("p", {
 				id: g.errorId,
-				className: "text-xs text-basalt-destructive",
+				className: "text-basalt-sm text-basalt-destructive",
 				role: "alert",
 				children: o
 			}) : null]
@@ -68,7 +68,7 @@ var g = i.forwardRef(({ className: t, value: n, defaultValue: i, onValueChange:
 g.displayName = "Checkbox.Group";
 var _ = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s("legend", {
 	ref: r,
-	className: e("text-sm font-medium text-basalt-foreground", t),
+	className: e("mb-basalt-field-gap text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground", t),
 	...n
 }));
 _.displayName = "Checkbox.Legend";
@@ -90,7 +90,7 @@ var v = i.forwardRef(({ className: e, value: t, children: n, disabled: r, size:
 	});
 	return n == null ? y : /* @__PURE__ */ c("label", {
 		htmlFor: _,
-		className: "flex items-center gap-2 text-sm text-basalt-foreground",
+		className: "flex items-center gap-basalt-space-lg text-basalt-base text-basalt-foreground",
 		children: [y, n]
 	});
 });

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive","CHECKBOX_SIZE_CLASS","CHECK_ICON_CLASS","MINUS_ICON_CLASS","CheckboxGroupContext","nextCheckboxGroupValue","checked","current","itemValue","entry","CheckboxRoot","props","cn","BASALT_UI_CLASS","size","FOCUS_RING","className","Check","Minus","CheckboxGroup","describedBy","ariaInvalid","group","useCheckableGroup","children","error","CheckboxLegend","CheckboxItem","grouped","generatedId","controlId","id","isChecked","value","box","disabled","next","Checkbox"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useCheckableGroup } from \"../utils/use-checkable-group\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport type CheckboxSize = \"sm\" | \"default\";\n\nconst CHECKBOX_SIZE_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"h-3 w-3\",\n\tdefault: \"h-4 w-4\",\n};\n\nconst CHECK_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-3 w-3 group-data-[state=checked]:block\",\n\tdefault: \"hidden h-4 w-4 group-data-[state=checked]:block\",\n};\n\nconst MINUS_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-2.5 w-2.5 group-data-[state=indeterminate]:block\",\n\tdefault: \"hidden h-3 w-3 group-data-[state=indeterminate]:block\",\n};\n\ntype CheckboxGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null);\n\nfunction nextCheckboxGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type CheckboxProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the checkbox.\n\t */\n\tchecked?: boolean | \"indeterminate\";\n\t/**\n\t * The visual size of the checkbox.\n\t * @default default\n\t */\n\tsize?: CheckboxSize;\n};\n\nexport type CheckboxGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type CheckboxLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type CheckboxItemProps = Omit<\n\tCheckboxProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is checked.\n\t */\n\tvalue: string;\n};\n\nconst CheckboxRoot = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, size = \"default\", ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"group peer shrink-0 rounded-[4px] border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tCHECKBOX_SIZE_CLASS[size],\n\t\t\tFOCUS_RING,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n\t\t\t<Check className={CHECK_ICON_CLASS[size]} />\n\t\t\t<Minus className={MINUS_ICON_CLASS[size]} />\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst group = useCheckableGroup({\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdescribedBy,\n\t\t\tariaInvalid,\n\t\t\tform: props.form,\n\t\t\tref,\n\t\t});\n\t\treturn (\n\t\t\t<CheckboxGroupContext.Provider\n\t\t\t\tvalue={{ value: group.current, setValue: group.setValue, disabled, invalid: group.invalid }}\n\t\t\t>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={group.setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={group.ariaInvalid}\n\t\t\t\t\taria-describedby={group.mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{group.invalid ? (\n\t\t\t\t\t\t<p id={group.errorId} className=\"text-xs text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</CheckboxGroupContext.Provider>\n\t\t);\n\t},\n);\nCheckboxGroup.displayName = \"Checkbox.Group\";\n\nconst CheckboxLegend = React.forwardRef<HTMLLegendElement, CheckboxLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm font-medium text-basalt-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\nconst CheckboxItem = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(CheckboxGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst isChecked = grouped ? group.value.includes(value) : undefined;\n\tconst box = (\n\t\t<CheckboxRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={isChecked}\n\t\t\tdefaultChecked={grouped ? isChecked : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped && typeof next === \"boolean\") {\n\t\t\t\t\tgroup.setValue(nextCheckboxGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label htmlFor={controlId} className=\"flex items-center gap-2 text-sm text-basalt-foreground\">\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nCheckboxItem.displayName = \"Checkbox.Item\";\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n\tGroup: CheckboxGroup,\n\tLegend: CheckboxLegend,\n\tItem: CheckboxItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive","CHECKBOX_SIZE_CLASS","CHECK_ICON_CLASS","MINUS_ICON_CLASS","CheckboxGroupContext","nextCheckboxGroupValue","checked","current","itemValue","entry","CheckboxRoot","props","cn","BASALT_UI_CLASS","size","FOCUS_RING","className","Check","Minus","CheckboxGroup","describedBy","ariaInvalid","group","useCheckableGroup","children","error","CheckboxLegend","CheckboxItem","grouped","generatedId","controlId","id","isChecked","value","box","disabled","next","Checkbox"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useCheckableGroup } from \"../utils/use-checkable-group\";\nimport { FOCUS_RING } from \"./overlay\";\n\nexport type CheckboxSize = \"sm\" | \"default\";\n\nconst CHECKBOX_SIZE_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"h-basalt-check-sm w-basalt-check-sm\",\n\tdefault: \"h-basalt-check w-basalt-check\",\n};\n\nconst CHECK_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-basalt-3 w-basalt-3 group-data-[state=checked]:block\",\n\tdefault: \"hidden h-basalt-4 w-basalt-4 group-data-[state=checked]:block\",\n};\n\nconst MINUS_ICON_CLASS: Record<CheckboxSize, string> = {\n\tsm: \"hidden h-basalt-2_5 w-basalt-2_5 group-data-[state=indeterminate]:block\",\n\tdefault: \"hidden h-basalt-3 w-basalt-3 group-data-[state=indeterminate]:block\",\n};\n\ntype CheckboxGroupContextValue = {\n\tvalue: string[];\n\tsetValue: (next: string[]) => void;\n\tdisabled: boolean;\n\tinvalid: boolean;\n};\n\nconst CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null);\n\nfunction nextCheckboxGroupValue(current: string[], itemValue: string, checked: boolean): string[] {\n\tif (checked) {\n\t\treturn current.includes(itemValue) ? current : [...current, itemValue];\n\t}\n\treturn current.filter((entry) => entry !== itemValue);\n}\n\nexport type CheckboxProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n\t\"checked\"\n> & {\n\t/**\n\t * The controlled checked state of the checkbox.\n\t */\n\tchecked?: boolean | \"indeterminate\";\n\t/**\n\t * The visual size of the checkbox.\n\t * @default default\n\t */\n\tsize?: CheckboxSize;\n};\n\nexport type CheckboxGroupProps = Omit<\n\tReact.ComponentPropsWithoutRef<\"fieldset\">,\n\t\"onChange\" | \"defaultValue\" | \"disabled\"\n> & {\n\t/**\n\t * The controlled selected values.\n\t */\n\tvalue?: string[];\n\t/**\n\t * The initially selected values.\n\t */\n\tdefaultValue?: string[];\n\t/**\n\t * Called when the selected values change.\n\t */\n\tonValueChange?: (value: string[]) => void;\n\t/**\n\t * Marks the group invalid and shows alert copy.\n\t */\n\terror?: React.ReactNode;\n\t/**\n\t * Disable every item in the group.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport type CheckboxLegendProps = React.ComponentPropsWithoutRef<\"legend\">;\n\nexport type CheckboxItemProps = Omit<\n\tCheckboxProps,\n\t\"checked\" | \"defaultChecked\" | \"onCheckedChange\" | \"value\"\n> & {\n\t/**\n\t * The value stored in the group when this item is checked.\n\t */\n\tvalue: string;\n};\n\nconst CheckboxRoot = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, size = \"default\", ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"group peer shrink-0 rounded-basalt-sm border border-basalt-primary data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground data-[state=indeterminate]:bg-basalt-primary data-[state=indeterminate]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tCHECKBOX_SIZE_CLASS[size],\n\t\t\tFOCUS_RING,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n\t\t\t<Check className={CHECK_ICON_CLASS[size]} />\n\t\t\t<Minus className={MINUS_ICON_CLASS[size]} />\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdisabled = false,\n\t\t\tchildren,\n\t\t\t\"aria-describedby\": describedBy,\n\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst group = useCheckableGroup({\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\terror,\n\t\t\tdescribedBy,\n\t\t\tariaInvalid,\n\t\t\tform: props.form,\n\t\t\tref,\n\t\t});\n\t\treturn (\n\t\t\t<CheckboxGroupContext.Provider\n\t\t\t\tvalue={{ value: group.current, setValue: group.setValue, disabled, invalid: group.invalid }}\n\t\t\t>\n\t\t\t\t<fieldset\n\t\t\t\t\tref={group.setRefs}\n\t\t\t\t\t{...props}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-invalid={group.ariaInvalid}\n\t\t\t\t\taria-describedby={group.mergedDescribedBy}\n\t\t\t\t\tclassName={cn(\"basalt-ui flex flex-col gap-basalt-field-gap\", className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{group.invalid ? (\n\t\t\t\t\t\t<p id={group.errorId} className=\"text-basalt-sm text-basalt-destructive\" role=\"alert\">\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</fieldset>\n\t\t\t</CheckboxGroupContext.Provider>\n\t\t);\n\t},\n);\nCheckboxGroup.displayName = \"Checkbox.Group\";\n\nconst CheckboxLegend = React.forwardRef<HTMLLegendElement, CheckboxLegendProps>(\n\t({ className, ...props }, ref) => (\n\t\t<legend\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"mb-basalt-field-gap text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\nconst CheckboxItem = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxItemProps\n>(({ className, value, children, disabled, size, id, ...props }, ref) => {\n\tconst group = React.useContext(CheckboxGroupContext);\n\tconst grouped = group != null;\n\tconst generatedId = React.useId();\n\tconst controlId = id ?? generatedId;\n\tconst isChecked = grouped ? group.value.includes(value) : undefined;\n\tconst box = (\n\t\t<CheckboxRoot\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tid={controlId}\n\t\t\tvalue={value}\n\t\t\tsize={size}\n\t\t\tchecked={isChecked}\n\t\t\tdefaultChecked={grouped ? isChecked : undefined}\n\t\t\tdisabled={disabled || group?.disabled}\n\t\t\taria-invalid={group?.invalid || undefined}\n\t\t\tclassName={className}\n\t\t\tonCheckedChange={(next) => {\n\t\t\t\tif (grouped && typeof next === \"boolean\") {\n\t\t\t\t\tgroup.setValue(nextCheckboxGroupValue(group.value, value, next));\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n\tif (children == null) {\n\t\treturn box;\n\t}\n\treturn (\n\t\t<label\n\t\t\thtmlFor={controlId}\n\t\t\tclassName=\"flex items-center gap-basalt-space-lg text-basalt-base text-basalt-foreground\"\n\t\t>\n\t\t\t{box}\n\t\t\t{children}\n\t\t</label>\n\t);\n});\nCheckboxItem.displayName = \"Checkbox.Item\";\n\nexport const Checkbox = Object.assign(CheckboxRoot, {\n\tGroup: CheckboxGroup,\n\tLegend: CheckboxLegend,\n\tItem: CheckboxItem,\n});\n"],"mappings":"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"}

package/dist/components/clipboard-text.js

@@ -10,16 +10,16 @@ function c({ text: c, copyText: l, className: u }) {
 	let [d, f] = r(!1);
 	return /* @__PURE__ */ s("div", {
 		"data-slot": "clipboard-text",
-		className: t(e("inline-flex h-9 max-w-full items-stretch shadow-xs", u)),
+		className: t(e("inline-flex min-h-basalt-control max-w-full items-stretch shadow-xs", u)),
 		children: [/* @__PURE__ */ o("code", {
-			className: "flex h-full min-w-0 items-center truncate rounded-l-basalt-md bg-transparent px-4 font-mono text-sm text-basalt-foreground",
+			className: "flex min-w-0 items-center truncate rounded-l-basalt-md bg-transparent px-basalt-space-lg font-mono text-basalt-base text-basalt-foreground",
 			children: c
 		}), /* @__PURE__ */ o(n, {
 			type: "button",
 			size: "icon",
 			variant: "ghost",
 			"aria-label": "Copy",
-			className: "h-full min-h-0 w-9 shrink-0 rounded-none rounded-r-basalt-md border-0 border-l border-basalt-border shadow-none",
+			className: "basalt-action-inset w-basalt-control shrink-0 rounded-none rounded-r-basalt-md border-0 border-l border-basalt-border shadow-none",
 			onClick: async () => {
 				await navigator.clipboard.writeText(l ?? c), f(!0);
 			},

package/dist/components/clipboard-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-text.js","names":["ClipboardText","copied","setCopied","useState","controlSurfaceClass","cn","className","text","Button","copyText","jsx","Check","Copy"],"sources":["../../src/components/clipboard-text.tsx"],"sourcesContent":["import { Check, Copy } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ClipboardTextProps {\n\t/**\n\t * Text string displayed in the inline code block and default text copied to the clipboard.\n\t */\n\ttext: string;\n\t/**\n\t * Optional alternate text string written to clipboard instead of `text`.\n\t * @default text\n\t */\n\tcopyText?: string;\n\t/**\n\t * Additional CSS classes applied to the root container.\n\t */\n\tclassName?: string;\n}\n\nexport function ClipboardText({ text, copyText, className }: ClipboardTextProps) {\n\tconst [copied, setCopied] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"clipboard-text\"\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\"inline-flex h-9 max-w-full items-stretch shadow-xs\", className),\n\t\t\t)}\n\t\t>\n\t\t\t<code className=\"flex h-full min-w-0 items-center truncate rounded-l-basalt-md bg-transparent px-4 font-mono text-sm text-basalt-foreground\">\n\t\t\t\t{text}\n\t\t\t</code>\n\t\t\t<Button\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\taria-label=\"Copy\"\n\t\t\t\tclassName=\"h-full min-h-0 w-9 shrink-0 rounded-none rounded-r-basalt-md border-0 border-l border-basalt-border shadow-none\"\n\t\t\t\tonClick={async () => {\n\t\t\t\t\tawait navigator.clipboard.writeText(copyText ?? text);\n\t\t\t\t\tsetCopied(true);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{copied ? <Check /> : <Copy />}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgBA,EAAc,EAAE,SAAM,aAAU,gBAAiC;CAChF,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK;CAC1C,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWC,EACVC,EAAG,sDAAsDC,CAAS,CACnE;EAJD,UAAA,CAMC,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAC;EACI,CAAA,GACN,kBAACC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,cAAW;GACX,WAAU;GACV,SAAS,YAAY;IAEpB,AADA,MAAM,UAAU,UAAU,UAAUC,KAAYF,CAAI,GACpDL,EAAU,EAAI;GACf;GAEC,UAASQ,EAATT,IAAUU,IAAYC,GAAb,CAAQ,CAAW;EACtB,CAAA,CACJ;;AAEP"}
+{"version":3,"file":"clipboard-text.js","names":["ClipboardText","copied","setCopied","useState","controlSurfaceClass","cn","className","text","Button","copyText","jsx","Check","Copy"],"sources":["../../src/components/clipboard-text.tsx"],"sourcesContent":["import { Check, Copy } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ClipboardTextProps {\n\t/**\n\t * Text string displayed in the inline code block and default text copied to the clipboard.\n\t */\n\ttext: string;\n\t/**\n\t * Optional alternate text string written to clipboard instead of `text`.\n\t * @default text\n\t */\n\tcopyText?: string;\n\t/**\n\t * Additional CSS classes applied to the root container.\n\t */\n\tclassName?: string;\n}\n\nexport function ClipboardText({ text, copyText, className }: ClipboardTextProps) {\n\tconst [copied, setCopied] = useState(false);\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"clipboard-text\"\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\"inline-flex min-h-basalt-control max-w-full items-stretch shadow-xs\", className),\n\t\t\t)}\n\t\t>\n\t\t\t<code className=\"flex min-w-0 items-center truncate rounded-l-basalt-md bg-transparent px-basalt-space-lg font-mono text-basalt-base text-basalt-foreground\">\n\t\t\t\t{text}\n\t\t\t</code>\n\t\t\t<Button\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\taria-label=\"Copy\"\n\t\t\t\tclassName=\"basalt-action-inset w-basalt-control shrink-0 rounded-none rounded-r-basalt-md border-0 border-l border-basalt-border shadow-none\"\n\t\t\t\tonClick={async () => {\n\t\t\t\t\tawait navigator.clipboard.writeText(copyText ?? text);\n\t\t\t\t\tsetCopied(true);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{copied ? <Check /> : <Copy />}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgBA,EAAc,EAAE,SAAM,aAAU,gBAAiC;CAChF,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK;CAC1C,OACC,kBAAC,OAAD;EACC,aAAU;EACV,WAAWC,EACVC,EAAG,uEAAuEC,CAAS,CACpF;EAJD,UAAA,CAMC,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAC;EACI,CAAA,GACN,kBAACC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,cAAW;GACX,WAAU;GACV,SAAS,YAAY;IAEpB,AADA,MAAM,UAAU,UAAU,UAAUC,KAAYF,CAAI,GACpDL,EAAU,EAAI;GACf;GAEC,UAASQ,EAATT,IAAUU,IAAYC,GAAb,CAAQ,CAAW;EACtB,CAAA,CACJ;;AAEP"}

package/dist/components/code.d.ts

@@ -1,26 +1,28 @@
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 export type CodeProps = {
-    /**
-     * Additional classes for the inline code.
-     */
+    /** Additional classes for the inline code. */
     className?: string;
 };
 export declare function Code({ className, ...props }: CodeProps & HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export type CodeBlockProps = {
-    /**
-     * Additional classes for the block.
-     */
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title" | "className"> {
+    /** Exact source text. Copy preserves whitespace and original line endings. */
+    children: string;
+    /** Filename or label shown in the header. Defaults to "Code" when copyable. */
+    title?: string;
+    /** Decorative header icon. Defaults to a file-code glyph; pass null to hide. */
+    icon?: ReactNode;
+    /** Show the copy control and its success/error feedback. @default true */
+    copyable?: boolean;
+    /** Show a non-selectable, screen-reader-hidden line-number gutter. @default false */
+    lineNumbers?: boolean;
+    /** Join a card edge without an outer frame. Code retains its own header and content insets. @default false */
+    attached?: boolean;
+    /** Additional classes for the panel root, not the inner pre element. */
     className?: string;
-};
-export declare function CodeBlock({ className, ...props }: CodeBlockProps & HTMLAttributes<HTMLPreElement>): import("react").JSX.Element;
-export type CodeHighlightedProps = {
-    /**
-     * Source text to highlight.
-     */
+}
+export declare function CodeBlock(props: CodeBlockProps): import("react").JSX.Element;
+export interface CodeHighlightedProps extends Omit<CodeBlockProps, "children"> {
+    /** Source text to highlight with the built-in lightweight tokenizer. */
     code: string;
-    /**
-     * Additional classes for the block.
-     */
-    className?: string;
-};
-export declare function CodeHighlighted({ code, className, ...props }: CodeHighlightedProps & HTMLAttributes<HTMLPreElement>): import("react").JSX.Element;
+}
+export declare function CodeHighlighted({ code, ...props }: CodeHighlightedProps): import("react").JSX.Element;

package/dist/components/code.js

@@ -1,45 +1,107 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { controlSurfaceClass as t } from "../utils/control-surface.js";
-import { jsx as n } from "react/jsx-runtime";
+import { Button as n } from "./button.js";
+import { useCodeBlock as r } from "../viewmodels/use-code-block.js";
+import { useId as i } from "react";
+import { Check as a, Copy as o, FileCode2 as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/code.tsx
-var r = /(\/\/[^\n]*)|("[^"]*"|'[^']*'|`[^`]*`)|\b(import|from|export|default|async|await|function|return|const|let|var|type|interface|as|if|else|throw|new|typeof)\b|(\b\d+\b)|(<\/?[A-Za-z][\w.-]*)/g;
-function i(e) {
-	let t = [], i = 0, a = 0;
-	for (let o of e.matchAll(r)) {
-		let r = o.index ?? 0;
-		r > i && t.push(e.slice(i, r));
-		let s = o[1] ? "text-basalt-muted-foreground" : o[2] ? "text-basalt-chart-5" : o[4] ? "text-basalt-chart-4" : "text-basalt-primary";
-		t.push(/* @__PURE__ */ n("span", {
-			className: s,
-			children: o[0]
-		}, a)), a += 1, i = r + o[0].length;
-	}
-	return i < e.length && t.push(e.slice(i)), t;
-}
-function a({ className: t, ...r }) {
-	return /* @__PURE__ */ n("code", {
-		className: e("rounded-basalt-sm bg-basalt-secondary px-1.5 py-0.5 font-mono text-[13px] text-basalt-foreground", t),
-		...r
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ c("code", {
+		className: e("rounded-basalt-sm bg-basalt-secondary px-basalt-space-md py-basalt-space-xs font-mono text-basalt-sm text-basalt-foreground", t),
+		...n
 	});
 }
-function o({ className: r, ...i }) {
-	return /* @__PURE__ */ n("pre", {
-		className: t(e("overflow-x-auto p-4 font-mono text-basalt-foreground", r)),
-		...i
+function d(e) {
+	return /* @__PURE__ */ c(p, { ...e });
+}
+function f({ code: e, ...t }) {
+	return /* @__PURE__ */ c(p, {
+		...t,
+		highlighted: !0,
+		children: e
 	});
 }
-function s({ code: r, className: a, ...o }) {
-	return /* @__PURE__ */ n("pre", {
-		className: t(e("overflow-x-auto p-4 text-basalt-foreground", a)),
-		...o,
-		children: /* @__PURE__ */ n("code", {
-			className: "font-mono leading-6",
-			children: i(r)
-		})
+function p({ children: u, title: d, icon: f = /* @__PURE__ */ c(s, { strokeWidth: 1.5 }), copyable: p = !0, lineNumbers: m = !1, attached: h = !1, className: g, highlighted: _ = !1, ...v }) {
+	let y = r(u, _), b = i(), x = d || "Code", S = !!d || p, C = y.status === "copied" ? "Copied" : y.status === "error" ? "Copy failed" : "Copy code";
+	return /* @__PURE__ */ l("div", {
+		"data-basalt-code": "",
+		"data-code-attached": h || void 0,
+		className: t(e("flex min-h-0 min-w-0 max-w-full flex-col overflow-hidden text-basalt-foreground", h && "rounded-none border-0 border-t", g)),
+		...v,
+		children: [
+			S && /* @__PURE__ */ l("div", {
+				"data-slot": "code-header",
+				className: "flex shrink-0 flex-wrap items-center justify-between gap-basalt-space-lg border-b border-basalt-border px-basalt-panel-x py-basalt-panel-y",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex min-w-0 flex-1 items-center gap-basalt-row-gap",
+					children: [f && /* @__PURE__ */ c("span", {
+						"aria-hidden": "true",
+						className: "flex size-basalt-icon shrink-0 items-center justify-center text-basalt-muted-foreground [&_svg]:size-basalt-icon",
+						children: f
+					}), /* @__PURE__ */ c("span", {
+						id: b,
+						title: x,
+						className: "min-w-0 break-words font-mono text-basalt-code leading-[var(--basalt-line-row)] [overflow-wrap:anywhere]",
+						children: x
+					})]
+				}), p && /* @__PURE__ */ l(n, {
+					variant: "ghost",
+					className: "shrink-0 border-0 px-basalt-space-md font-normal text-basalt-muted-foreground [&_svg]:size-basalt-icon-sm",
+					"aria-label": C,
+					disabled: y.status === "pending",
+					onClick: () => void y.copy((e) => navigator.clipboard.writeText(e)),
+					children: [y.status === "copied" ? /* @__PURE__ */ c(a, {
+						"aria-hidden": "true",
+						strokeWidth: 1.5
+					}) : /* @__PURE__ */ c(o, {
+						"aria-hidden": "true",
+						strokeWidth: 1.5
+					}), /* @__PURE__ */ c("span", { children: C })]
+				})]
+			}),
+			/* @__PURE__ */ c("pre", {
+				role: "region",
+				"aria-labelledby": S ? b : void 0,
+				"aria-label": S ? void 0 : "Code",
+				tabIndex: 0,
+				onKeyDown: (e) => {
+					e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), e.currentTarget.scrollLeft += (e.key === "ArrowRight" ? 1 : -1) * e.currentTarget.clientWidth / 4);
+				},
+				className: "min-h-0 min-w-0 overflow-auto overscroll-x-contain overscroll-y-auto py-basalt-panel-y font-mono text-basalt-sm leading-[var(--basalt-line-body)] outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring",
+				children: /* @__PURE__ */ l("span", {
+					className: "flex min-w-max",
+					children: [m && /* @__PURE__ */ c("span", {
+						"aria-hidden": "true",
+						className: "shrink-0 select-none border-r border-basalt-border text-right text-basalt-xs tabular-nums text-basalt-muted-foreground",
+						style: { width: `calc(${String(y.lines.length).length}ch + 2 * var(--basalt-space-row-x))` },
+						children: y.lines.map((e, t) => /* @__PURE__ */ c("span", {
+							"data-line-number": t + 1,
+							className: "block h-[var(--basalt-line-body)] px-basalt-row-x before:content-[attr(data-line-number)]"
+						}, t))
+					}), /* @__PURE__ */ c("code", {
+						className: "block flex-1 whitespace-pre px-basalt-panel-x font-mono",
+						style: { minHeight: `calc(${y.lines.length} * var(--basalt-line-body))` },
+						children: y.lines.map((e, t) => /* @__PURE__ */ l("span", {
+							"data-code-line": "",
+							children: [e.map((e, t) => e.className ? /* @__PURE__ */ c("span", {
+								className: e.className,
+								children: e.text
+							}, t) : e.text), t < y.lines.length - 1 ? "\n" : ""]
+						}, t))
+					})]
+				})
+			}),
+			p && /* @__PURE__ */ c("span", {
+				role: y.status === "error" ? "alert" : "status",
+				className: "sr-only",
+				children: y.status === "copied" ? "Code copied" : y.status === "error" ? "Could not copy code. Try again." : ""
+			})
+		]
 	});
 }
 //#endregion
-export { a as Code, o as CodeBlock, s as CodeHighlighted };
+export { u as Code, d as CodeBlock, f as CodeHighlighted };
 
 //# sourceMappingURL=code.js.map

package/dist/components/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":["TOKEN","highlight","nodes","last","key","match","code","index","className","Code","props","cn","CodeBlock","controlSurfaceClass","CodeHighlighted"],"sources":["../../src/components/code.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\n\nconst TOKEN =\n\t/(\\/\\/[^\\n]*)|(\"[^\"]*\"|'[^']*'|`[^`]*`)|\\b(import|from|export|default|async|await|function|return|const|let|var|type|interface|as|if|else|throw|new|typeof)\\b|(\\b\\d+\\b)|(<\\/?[A-Za-z][\\w.-]*)/g;\n\nfunction highlight(code: string): ReactNode[] {\n\tconst nodes: ReactNode[] = [];\n\tlet last = 0;\n\tlet key = 0;\n\tfor (const match of code.matchAll(TOKEN)) {\n\t\tconst index = match.index ?? 0;\n\t\tif (index > last) {\n\t\t\tnodes.push(code.slice(last, index));\n\t\t}\n\t\tconst className = match[1]\n\t\t\t? \"text-basalt-muted-foreground\"\n\t\t\t: match[2]\n\t\t\t\t? \"text-basalt-chart-5\"\n\t\t\t\t: match[4]\n\t\t\t\t\t? \"text-basalt-chart-4\"\n\t\t\t\t\t: \"text-basalt-primary\";\n\t\tnodes.push(\n\t\t\t<span key={key} className={className}>\n\t\t\t\t{match[0]}\n\t\t\t</span>,\n\t\t);\n\t\tkey += 1;\n\t\tlast = index + match[0].length;\n\t}\n\tif (last < code.length) {\n\t\tnodes.push(code.slice(last));\n\t}\n\treturn nodes;\n}\n\nexport type CodeProps = {\n\t/**\n\t * Additional classes for the inline code.\n\t */\n\tclassName?: string;\n};\n\nexport function Code({ className, ...props }: CodeProps & HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<code\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-sm bg-basalt-secondary px-1.5 py-0.5 font-mono text-[13px] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeBlockProps = {\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeBlock({\n\tclassName,\n\t...props\n}: CodeBlockProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\"overflow-x-auto p-4 font-mono text-basalt-foreground\", className),\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type CodeHighlightedProps = {\n\t/**\n\t * Source text to highlight.\n\t */\n\tcode: string;\n\t/**\n\t * Additional classes for the block.\n\t */\n\tclassName?: string;\n};\n\nexport function CodeHighlighted({\n\tcode,\n\tclassName,\n\t...props\n}: CodeHighlightedProps & HTMLAttributes<HTMLPreElement>) {\n\treturn (\n\t\t<pre\n\t\t\tclassName={controlSurfaceClass(cn(\"overflow-x-auto p-4 text-basalt-foreground\", className))}\n\t\t\t{...props}\n\t\t>\n\t\t\t<code className=\"font-mono leading-6\">{highlight(code)}</code>\n\t\t</pre>\n\t);\n}\n"],"mappings":";;;;;AAIA,IAAMA,IACL;AAED,SAASC,EAAU,GAA2B;CAC7C,IAAMC,IAAqB,CAAC,GACxBC,IAAO,GACPC,IAAM;CACV,KAAK,IAAMC,KAASC,EAAK,SAASN,CAAK,GAAG;EACzC,IAAMO,IAAQF,EAAM,SAAS;EAC7B,AAAIE,IAAQJ,KACXD,EAAM,KAAKI,EAAK,MAAMH,GAAMI,CAAK,CAAC;EAEnC,IAAMC,IAAYH,EAAM,KACrB,iCACAA,EAAM,KACL,wBACAA,EAAM,KACL,wBACA;EAOL,AANAH,EAAM,KACL,kBAAC,QAAD;GAA2B;GACzB,UAAAG,EAAM;EACF,GAFKD,CAEL,CACP,GACA,KAAO,GACP,IAAOG,IAAQF,EAAM,EAAE,CAAC;CACzB;CAIA,OAHIF,IAAOG,EAAK,UACfJ,EAAM,KAAKI,EAAK,MAAMH,CAAI,CAAC,GAErBD;AACR;AASA,SAAgBO,EAAK,EAAE,cAAW,GAAGC,KAAkD;CACtF,OACC,kBAAC,QAAD;EACC,WAAWC,EACV,oGACAH,CACD;EACA,GAAIE;CACJ,CAAA;AAEH;AASA,SAAgBE,EAAU,EACzB,cACA,GAAGF,KACgD;CACnD,OACC,kBAAC,OAAD;EACC,WAAWG,EACVF,EAAG,wDAAwDH,CAAS,CACrE;EACA,GAAIE;CACJ,CAAA;AAEH;AAaA,SAAgBI,EAAgB,EAC/B,SACA,cACA,GAAGJ,KACsD;CACzD,OACC,kBAAC,OAAD;EACC,WAAWG,EAAoBF,EAAG,8CAA8CH,CAAS,CAAC;EAC1F,GAAIE;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAU;GAAuB,UAAAT,EAAUK,CAAI;EAAQ,CAAA;CACzD,CAAA;AAEP"}
+{"version":3,"file":"code.js","names":["Code","props","cn","className","CodeBlock","CodePanel","CodeHighlighted","code","FileCode2","vm","useCodeBlock","highlighted","id","useId","heading","title","header","copyable","copyLabel","attached","controlSurfaceClass","icon","Button","text","Check","Copy","event","lineNumbers","index","line","token","tokenIndex"],"sources":["../../src/components/code.tsx"],"sourcesContent":["import { Check, Copy, FileCode2 } from \"lucide-react\";\nimport { type HTMLAttributes, type ReactNode, useId } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { useCodeBlock } from \"../viewmodels/use-code-block\";\nimport { Button } from \"./button\";\n\nexport type CodeProps = {\n\t/** Additional classes for the inline code. */\n\tclassName?: string;\n};\n\nexport function Code({ className, ...props }: CodeProps & HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<code\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-sm bg-basalt-secondary px-basalt-space-md py-basalt-space-xs font-mono text-basalt-sm text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface CodeBlockProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"children\" | \"title\" | \"className\"> {\n\t/** Exact source text. Copy preserves whitespace and original line endings. */\n\tchildren: string;\n\t/** Filename or label shown in the header. Defaults to \"Code\" when copyable. */\n\ttitle?: string;\n\t/** Decorative header icon. Defaults to a file-code glyph; pass null to hide. */\n\ticon?: ReactNode;\n\t/** Show the copy control and its success/error feedback. @default true */\n\tcopyable?: boolean;\n\t/** Show a non-selectable, screen-reader-hidden line-number gutter. @default false */\n\tlineNumbers?: boolean;\n\t/** Join a card edge without an outer frame. Code retains its own header and content insets. @default false */\n\tattached?: boolean;\n\t/** Additional classes for the panel root, not the inner pre element. */\n\tclassName?: string;\n}\n\nexport function CodeBlock(props: CodeBlockProps) {\n\treturn <CodePanel {...props} />;\n}\n\nexport interface CodeHighlightedProps extends Omit<CodeBlockProps, \"children\"> {\n\t/** Source text to highlight with the built-in lightweight tokenizer. */\n\tcode: string;\n}\n\nexport function CodeHighlighted({ code, ...props }: CodeHighlightedProps) {\n\treturn (\n\t\t<CodePanel {...props} highlighted>\n\t\t\t{code}\n\t\t</CodePanel>\n\t);\n}\n\nfunction CodePanel({\n\tchildren: code,\n\ttitle,\n\ticon = <FileCode2 strokeWidth={1.5} />,\n\tcopyable = true,\n\tlineNumbers = false,\n\tattached = false,\n\tclassName,\n\thighlighted = false,\n\t...props\n}: CodeBlockProps & { highlighted?: boolean }) {\n\tconst vm = useCodeBlock(code, highlighted);\n\tconst id = useId();\n\tconst heading = title || \"Code\";\n\tconst header = Boolean(title) || copyable;\n\tconst copyLabel =\n\t\tvm.status === \"copied\" ? \"Copied\" : vm.status === \"error\" ? \"Copy failed\" : \"Copy code\";\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-code=\"\"\n\t\t\tdata-code-attached={attached || undefined}\n\t\t\tclassName={controlSurfaceClass(\n\t\t\t\tcn(\n\t\t\t\t\t\"flex min-h-0 min-w-0 max-w-full flex-col overflow-hidden text-basalt-foreground\",\n\t\t\t\t\tattached && \"rounded-none border-0 border-t\",\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{header && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"code-header\"\n\t\t\t\t\tclassName=\"flex shrink-0 flex-wrap items-center justify-between gap-basalt-space-lg border-b border-basalt-border px-basalt-panel-x py-basalt-panel-y\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex min-w-0 flex-1 items-center gap-basalt-row-gap\">\n\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName=\"flex size-basalt-icon shrink-0 items-center justify-center text-basalt-muted-foreground [&_svg]:size-basalt-icon\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{icon}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={id}\n\t\t\t\t\t\t\ttitle={heading}\n\t\t\t\t\t\t\tclassName=\"min-w-0 break-words font-mono text-basalt-code leading-[var(--basalt-line-row)] [overflow-wrap:anywhere]\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{copyable && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclassName=\"shrink-0 border-0 px-basalt-space-md font-normal text-basalt-muted-foreground [&_svg]:size-basalt-icon-sm\"\n\t\t\t\t\t\t\taria-label={copyLabel}\n\t\t\t\t\t\t\tdisabled={vm.status === \"pending\"}\n\t\t\t\t\t\t\tonClick={() => void vm.copy((text) => navigator.clipboard.writeText(text))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{vm.status === \"copied\" ? (\n\t\t\t\t\t\t\t\t<Check aria-hidden=\"true\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Copy aria-hidden=\"true\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span>{copyLabel}</span>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<pre\n\t\t\t\trole=\"region\"\n\t\t\t\taria-labelledby={header ? id : undefined}\n\t\t\t\taria-label={header ? undefined : \"Code\"}\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveTabindex: Named code overflow region must support keyboard scrolling.\n\t\t\t\ttabIndex={0}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tif (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n\t\t\t\t\tif (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.currentTarget.scrollLeft +=\n\t\t\t\t\t\t((event.key === \"ArrowRight\" ? 1 : -1) * event.currentTarget.clientWidth) / 4;\n\t\t\t\t}}\n\t\t\t\tclassName=\"min-h-0 min-w-0 overflow-auto overscroll-x-contain overscroll-y-auto py-basalt-panel-y font-mono text-basalt-sm leading-[var(--basalt-line-body)] outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\"\n\t\t\t>\n\t\t\t\t<span className=\"flex min-w-max\">\n\t\t\t\t\t{lineNumbers && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName=\"shrink-0 select-none border-r border-basalt-border text-right text-basalt-xs tabular-nums text-basalt-muted-foreground\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: `calc(${String(vm.lines.length).length}ch + 2 * var(--basalt-space-row-x))`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{vm.lines.map((_, index) => (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\tdata-line-number={index + 1}\n\t\t\t\t\t\t\t\t\tclassName=\"block h-[var(--basalt-line-body)] px-basalt-row-x before:content-[attr(data-line-number)]\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t<code\n\t\t\t\t\t\tclassName=\"block flex-1 whitespace-pre px-basalt-panel-x font-mono\"\n\t\t\t\t\t\tstyle={{ minHeight: `calc(${vm.lines.length} * var(--basalt-line-body))` }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{vm.lines.map((line, index) => (\n\t\t\t\t\t\t\t<span key={index} data-code-line=\"\">\n\t\t\t\t\t\t\t\t{line.map((token, tokenIndex) =>\n\t\t\t\t\t\t\t\t\ttoken.className ? (\n\t\t\t\t\t\t\t\t\t\t<span key={tokenIndex} className={token.className}>\n\t\t\t\t\t\t\t\t\t\t\t{token.text}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\ttoken.text\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{index < vm.lines.length - 1 ? \"\\n\" : \"\"}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</code>\n\t\t\t\t</span>\n\t\t\t</pre>\n\t\t\t{copyable && (\n\t\t\t\t<span role={vm.status === \"error\" ? \"alert\" : \"status\"} className=\"sr-only\">\n\t\t\t\t\t{vm.status === \"copied\"\n\t\t\t\t\t\t? \"Code copied\"\n\t\t\t\t\t\t: vm.status === \"error\"\n\t\t\t\t\t\t\t? \"Could not copy code. Try again.\"\n\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/collapsible.js

@@ -14,11 +14,15 @@ var c = s.Root, l = r.forwardRef(({ className: r, children: c, asChild: l = !1,
 	children: c
 }) : /* @__PURE__ */ o(s.CollapsibleTrigger, {
 	ref: d,
-	className: e("m-0 inline-flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-sm font-medium text-basalt-foreground shadow-none select-none", t, "[&_svg]:size-3 [&_svg]:shrink-0 [&_svg]:origin-center [&_svg]:transition-transform [&_svg]:duration-100 [&_svg]:ease-out", "data-[state=open]:[&_svg]:rotate-180", n, r),
+	className: e("basalt-ui group/collapsible m-0 inline-flex min-w-0 cursor-pointer items-center gap-basalt-control-gap border-none bg-transparent p-0 text-left text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground shadow-none select-none", t, n, r),
 	...u,
-	children: [/* @__PURE__ */ a("span", { children: c }), /* @__PURE__ */ a(i, {
+	children: [/* @__PURE__ */ a("span", {
+		className: "flex min-w-0 items-center gap-basalt-control-gap",
+		children: c
+	}), /* @__PURE__ */ a(i, {
 		"aria-hidden": "true",
-		className: n
+		"data-slot": "collapsible-chevron",
+		className: e("size-basalt-icon-sm shrink-0 transition-transform basalt-motion duration-basalt-normal ease-basalt group-data-[state=open]/collapsible:rotate-180", n)
 	})]
 }));
 l.displayName = s.CollapsibleTrigger.displayName;
@@ -27,7 +31,7 @@ var u = r.forwardRef(({ className: t, children: r, unstyled: i = !1, ...o }, c)
 	className: e("overflow-hidden data-[state=closed]:animate-basalt-collapsible-up data-[state=open]:animate-basalt-collapsible-down", n, t),
 	...o,
 	children: i ? r : /* @__PURE__ */ a("div", {
-		className: "my-2 border-l-2 border-basalt-border py-1 pr-1 pl-4 text-sm text-basalt-foreground",
+		className: "my-basalt-layout-sm border-l-2 border-basalt-border px-basalt-card py-basalt-card-sm text-basalt-base text-basalt-foreground",
 		children: r
 	})
 }));