@nocoo/basalt 2.1.8 → 3.0.0

package/dist/components/recommendation-card.js

@@ -0,0 +1,123 @@
+"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 { useHoverHighlight as a } from "../utils/use-hover-highlight.js";
+import { LayerCard as o } from "./layer-card.js";
+import { useRecommendationCardViewModel as s } from "../viewmodels/use-recommendation-card.js";
+import { RECOMMENDATION_CONFIDENCE as c } from "../models/recommendation.js";
+import { useId as l, useRef as u } from "react";
+import { Check as d, ChevronDown as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/recommendation-card.tsx
+function g({ value: t }) {
+	let n = c[t];
+	return /* @__PURE__ */ h("span", {
+		className: e("inline-flex min-w-0 items-center gap-basalt-space-md text-basalt-sm", n.className),
+		children: [/* @__PURE__ */ m("span", {
+			"aria-hidden": "true",
+			className: "inline-flex items-center gap-basalt-space-xs",
+			children: [
+				0,
+				1,
+				2
+			].map((t) => /* @__PURE__ */ m("span", { className: e("h-basalt-2_5 w-basalt-1 rounded-basalt-full", t < n.bars ? "bg-current" : "bg-basalt-border") }, t))
+		}), n.label]
+	});
+}
+function _({ title: c = "Recommended action", className: _, ...v }) {
+	let y = s(v), b = l(), x = a(), S = u(null);
+	return /* @__PURE__ */ h(o, {
+		padding: "none",
+		"aria-labelledby": b,
+		className: e("w-full min-w-0 overflow-hidden leading-[var(--basalt-line-body)]", _),
+		children: [/* @__PURE__ */ h("div", {
+			className: "space-y-basalt-space-md px-basalt-panel-x py-basalt-panel-y",
+			children: [/* @__PURE__ */ m("h3", {
+				id: b,
+				className: "break-words text-basalt-base font-medium",
+				children: c
+			}), y.active ? /* @__PURE__ */ m("p", {
+				className: "basalt-agent-reveal whitespace-pre-wrap break-words text-basalt-code leading-[var(--basalt-line-body)] text-basalt-muted-foreground",
+				children: y.active.description
+			}, y.active.id) : /* @__PURE__ */ m("p", {
+				className: "text-basalt-base text-basalt-muted-foreground",
+				role: "status",
+				children: "No recommendations yet"
+			})]
+		}), y.active && /* @__PURE__ */ h(n, {
+			open: y.open,
+			onOpenChange: y.setOpen,
+			children: [
+				/* @__PURE__ */ m(r, {
+					unstyled: !0,
+					children: /* @__PURE__ */ h("div", {
+						className: "border-t border-basalt-border px-[calc(var(--basalt-space-panel-x)-var(--basalt-space-row-x))] py-basalt-panel-y",
+						children: [/* @__PURE__ */ m("p", {
+							className: "px-basalt-row-x py-basalt-space-sm text-basalt-sm text-basalt-muted-foreground",
+							children: "Other options"
+						}), /* @__PURE__ */ m("div", {
+							ref: x,
+							className: "basalt-hover-list",
+							role: "group",
+							"aria-label": "Alternative recommendations",
+							children: y.others.map((e) => /* @__PURE__ */ h(t, {
+								variant: "ghost",
+								disabled: y.blocked || e.disabled,
+								"data-basalt-hover-item": "",
+								"data-disabled": y.blocked || e.disabled ? "" : void 0,
+								onClick: () => {
+									y.select(e.id), S.current?.focus();
+								},
+								className: "h-auto min-h-basalt-menu-row w-full justify-start whitespace-normal px-basalt-row-x py-basalt-row-y text-left hover:bg-transparent",
+								children: [/* @__PURE__ */ m("span", {
+									className: "min-w-0 flex-1 break-words text-basalt-code",
+									children: e.label
+								}), /* @__PURE__ */ m(g, { value: e.confidence })]
+							}, e.id))
+						})]
+					})
+				}),
+				y.error && /* @__PURE__ */ m("p", {
+					role: "alert",
+					className: "px-basalt-panel-x pb-basalt-space-lg text-basalt-sm text-basalt-danger",
+					children: y.error
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex min-w-0 flex-wrap items-center justify-between gap-basalt-content-gap border-t border-basalt-border px-basalt-panel-x py-basalt-panel-y",
+					children: [/* @__PURE__ */ m(g, { value: y.active.confidence }), /* @__PURE__ */ h("div", {
+						className: "flex min-w-0 max-w-full flex-wrap items-center justify-end gap-basalt-content-gap",
+						children: [y.others.length > 0 && /* @__PURE__ */ m(i, {
+							asChild: !0,
+							children: /* @__PURE__ */ h(t, {
+								ref: S,
+								size: "sm",
+								variant: "secondary",
+								disabled: y.blocked,
+								children: ["Alternatives", /* @__PURE__ */ m(f, {
+									"aria-hidden": "true",
+									className: e("transition-transform basalt-motion motion-reduce:transition-none", y.open && "rotate-180")
+								})]
+							})
+						}), /* @__PURE__ */ m(t, {
+							size: "sm",
+							disabled: y.blocked || y.active.disabled || y.accepted,
+							loading: y.pending,
+							onClick: () => void y.accept(),
+							children: y.accepted ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(d, { "aria-hidden": "true" }), "Accepted"] }) : y.active.actionLabel ?? "Accept"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ m("span", {
+					role: "status",
+					className: "sr-only",
+					children: y.accepted ? "Recommendation accepted" : y.pending ? "Accepting recommendation" : ""
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { _ as RecommendationCard };
+
+//# sourceMappingURL=recommendation-card.js.map

package/dist/components/recommendation-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recommendation-card.js","names":["_Fragment","Fragment$1","Confidence","confidence","RECOMMENDATION_CONFIDENCE","value","cn","bar","RecommendationCard","props","vm","useRecommendationCardViewModel","id","useId","highlightRef","useHoverHighlight","alternativesRef","useRef","LayerCard","className","title","Collapsible","CollapsibleContent","Button","option","CollapsibleTrigger","ChevronDown","Check"],"sources":["../../src/components/recommendation-card.tsx"],"sourcesContent":["import { Check, ChevronDown } from \"lucide-react\";\nimport { useId, useRef } from \"react\";\nimport {\n\tRECOMMENDATION_CONFIDENCE,\n\ttype RecommendationConfidence,\n\ttype RecommendationOption,\n} from \"../models/recommendation\";\nimport { cn } from \"../utils/cn\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { useRecommendationCardViewModel } from \"../viewmodels/use-recommendation-card\";\nimport { Button } from \"./button\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { LayerCard } from \"./layer-card\";\n\nexport type { RecommendationConfidence, RecommendationOption } from \"../models/recommendation\";\n\nexport interface RecommendationCardProps {\n\t/** Caller-owned options with stable IDs. Remount with a new key for a new request. */\n\toptions: readonly RecommendationOption[];\n\t/** Card heading. @default \"Recommended action\" */\n\ttitle?: string;\n\t/** Explicit acceptance; rejected promises keep the choice and allow retry. */\n\tonAccept: (option: RecommendationOption) => void | Promise<void>;\n\tdisabled?: boolean;\n\tclassName?: string;\n}\n\nfunction Confidence({ value }: { value: RecommendationConfidence }) {\n\tconst confidence = RECOMMENDATION_CONFIDENCE[value];\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-0 items-center gap-basalt-space-md text-basalt-sm\",\n\t\t\t\tconfidence.className,\n\t\t\t)}\n\t\t>\n\t\t\t<span aria-hidden=\"true\" className=\"inline-flex items-center gap-basalt-space-xs\">\n\t\t\t\t{[0, 1, 2].map((bar) => (\n\t\t\t\t\t<span\n\t\t\t\t\t\tkey={bar}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-basalt-2_5 w-basalt-1 rounded-basalt-full\",\n\t\t\t\t\t\t\tbar < confidence.bars ? \"bg-current\" : \"bg-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</span>\n\t\t\t{confidence.label}\n\t\t</span>\n\t);\n}\n\nexport function RecommendationCard({\n\ttitle = \"Recommended action\",\n\tclassName,\n\t...props\n}: RecommendationCardProps) {\n\tconst vm = useRecommendationCardViewModel(props);\n\tconst id = useId();\n\tconst highlightRef = useHoverHighlight();\n\tconst alternativesRef = useRef<HTMLButtonElement>(null);\n\treturn (\n\t\t<LayerCard\n\t\t\tpadding=\"none\"\n\t\t\taria-labelledby={id}\n\t\t\tclassName={cn(\"w-full min-w-0 overflow-hidden leading-[var(--basalt-line-body)]\", className)}\n\t\t>\n\t\t\t<div className=\"space-y-basalt-space-md px-basalt-panel-x py-basalt-panel-y\">\n\t\t\t\t<h3 id={id} className=\"break-words text-basalt-base font-medium\">\n\t\t\t\t\t{title}\n\t\t\t\t</h3>\n\t\t\t\t{vm.active ? (\n\t\t\t\t\t<p\n\t\t\t\t\t\tkey={vm.active.id}\n\t\t\t\t\t\tclassName=\"basalt-agent-reveal whitespace-pre-wrap break-words text-basalt-code leading-[var(--basalt-line-body)] text-basalt-muted-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{vm.active.description}\n\t\t\t\t\t</p>\n\t\t\t\t) : (\n\t\t\t\t\t<p className=\"text-basalt-base text-basalt-muted-foreground\" role=\"status\">\n\t\t\t\t\t\tNo recommendations yet\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{vm.active && (\n\t\t\t\t<Collapsible open={vm.open} onOpenChange={vm.setOpen}>\n\t\t\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t\t\t<div className=\"border-t border-basalt-border px-[calc(var(--basalt-space-panel-x)-var(--basalt-space-row-x))] py-basalt-panel-y\">\n\t\t\t\t\t\t\t<p className=\"px-basalt-row-x py-basalt-space-sm text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\tOther options\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tref={highlightRef}\n\t\t\t\t\t\t\t\tclassName=\"basalt-hover-list\"\n\t\t\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t\t\taria-label=\"Alternative recommendations\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{vm.others.map((option) => (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tdisabled={vm.blocked || option.disabled}\n\t\t\t\t\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\t\t\tdata-disabled={vm.blocked || option.disabled ? \"\" : undefined}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tvm.select(option.id);\n\t\t\t\t\t\t\t\t\t\t\talternativesRef.current?.focus();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-auto min-h-basalt-menu-row w-full justify-start whitespace-normal px-basalt-row-x py-basalt-row-y text-left hover:bg-transparent\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words text-basalt-code\">\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<Confidence value={option.confidence} />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t{vm.error && (\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t\t\tclassName=\"px-basalt-panel-x pb-basalt-space-lg text-basalt-sm text-basalt-danger\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{vm.error}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"flex min-w-0 flex-wrap items-center justify-between gap-basalt-content-gap border-t border-basalt-border px-basalt-panel-x py-basalt-panel-y\">\n\t\t\t\t\t\t<Confidence value={vm.active.confidence} />\n\t\t\t\t\t\t<div className=\"flex min-w-0 max-w-full flex-wrap items-center justify-end gap-basalt-content-gap\">\n\t\t\t\t\t\t\t{vm.others.length > 0 && (\n\t\t\t\t\t\t\t\t<CollapsibleTrigger asChild>\n\t\t\t\t\t\t\t\t\t<Button ref={alternativesRef} size=\"sm\" variant=\"secondary\" disabled={vm.blocked}>\n\t\t\t\t\t\t\t\t\t\tAlternatives\n\t\t\t\t\t\t\t\t\t\t<ChevronDown\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"transition-transform basalt-motion motion-reduce:transition-none\",\n\t\t\t\t\t\t\t\t\t\t\t\tvm.open && \"rotate-180\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tdisabled={vm.blocked || vm.active.disabled || vm.accepted}\n\t\t\t\t\t\t\t\tloading={vm.pending}\n\t\t\t\t\t\t\t\tonClick={() => void vm.accept()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{vm.accepted ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Check aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\tAccepted\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\t(vm.active.actionLabel ?? \"Accept\")\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span role=\"status\" className=\"sr-only\">\n\t\t\t\t\t\t{vm.accepted ? \"Recommendation accepted\" : vm.pending ? \"Accepting recommendation\" : \"\"}\n\t\t\t\t\t</span>\n\t\t\t\t</Collapsible>\n\t\t\t)}\n\t\t</LayerCard>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;AA2BA,SAASE,EAAW,EAAE,YAA8C;CACnE,IAAMC,IAAaC,EAA0BC;CAC7C,OACC,kBAAC,QAAD;EACC,WAAWC,EACV,uEACAH,EAAW,SACZ;EAJD,UAAA,CAMC,kBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA;IAAC;IAAG;IAAG;GAAC,CAAC,CAAC,KAAK,MACf,kBAAC,QAAD,EAEC,WAAWG,EACV,+CACAC,IAAMJ,EAAW,OAAO,eAAe,kBACxC,EACA,GALKI,CAKL,CACD;EACI,CAAA,GACLJ,EAAW,KACP;;AAER;AAEA,SAAgBK,EAAmB,EAClC,WAAQ,sBACR,cACA,GAAGC,KACwB;CAC3B,IAAMC,IAAKC,EAA+BF,CAAK,GACzCG,IAAKC,EAAM,GACXC,IAAeC,EAAkB,GACjCC,IAAkBC,EAA0B,IAAI;CACtD,OACC,kBAACC,GAAD;EACC,SAAQ;EACR,mBAAiBN;EACjB,WAAWN,EAAG,oEAAoEa,CAAS;EAH5F,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,MAAD;IAAQ;IAAI,WAAU;IACpB,UAAAC;GACE,CAAA,GACHV,EAAG,SACH,kBAAC,KAAD;IAEC,WAAU;IAET,UAAAA,EAAG,OAAO;GACT,GAJGA,EAAG,OAAO,EAIb,IAEH,kBAAC,KAAD;IAAG,WAAU;IAAgD,MAAK;IAAS,UAAA;GAExE,CAAA,CAEA;EACJ,CAAA,GAAAA,EAAG,UACH,kBAACW,GAAD;GAAa,MAAMX,EAAG;GAAM,cAAcA,EAAG;GAA7C,UAAA;IACC,kBAACY,GAAD;KAAoB,UAAA;KACnB,UAAA,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,kBAAC,KAAD;OAAG,WAAU;OAAiF,UAAA;MAE3F,CAAA,GACH,kBAAC,OAAD;OACC,KAAKR;OACL,WAAU;OACV,MAAK;OACL,cAAW;OAEV,UAAAJ,EAAG,OAAO,KAAK,MACf,kBAACa,GAAD;QAEC,SAAQ;QACR,UAAUb,EAAG,WAAWc,EAAO;QAC/B,0BAAuB;QACvB,iBAAed,EAAG,WAAWc,EAAO,WAAW,KAAK,KAAA;QACpD,eAAe;SAEd,AADAd,EAAG,OAAOc,EAAO,EAAE,GACnBR,EAAgB,SAAS,MAAM;QAChC;QACA,WAAU;QAVX,UAAA,CAYC,kBAAC,QAAD;SAAM,WAAU;SACd,UAAAQ,EAAO;QACH,CAAA,GACN,kBAACtB,GAAD,EAAY,OAAOsB,EAAO,WAAa,CAAA,CAChC;OAfF,GAAAA,EAAO,EAeL,CACR;MACG,CAAA,CACD;;IACc,CAAA;IACnBd,EAAG,SACH,kBAAC,KAAD;KACC,MAAK;KACL,WAAU;KAET,UAAAA,EAAG;IACF,CAAA;IAEJ,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAACR,GAAD,EAAY,OAAOQ,EAAG,OAAO,WAAa,CAAA,GAC1C,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACEA,EAAG,OAAO,SAAS,KACnB,kBAACe,GAAD;OAAoB,SAAA;OACnB,UAAA,kBAACF,GAAD;QAAQ,KAAKP;QAAiB,MAAK;QAAK,SAAQ;QAAY,UAAUN,EAAG;QAAzE,UAAA,CAAkF,gBAEjF,kBAACgB,GAAD;SACC,eAAY;SACZ,WAAWpB,EACV,oEACAI,EAAG,QAAQ,YACZ;QACA,CAAA,CACM;;MACW,CAAA,GAErB,kBAACa,GAAD;OACC,MAAK;OACL,UAAUb,EAAG,WAAWA,EAAG,OAAO,YAAYA,EAAG;OACjD,SAASA,EAAG;OACZ,eAAe,KAAKA,EAAG,OAAO;OAE7B,UAAAA,EAAG,WACH,kBAAAV,GAAA,EAAA,UAAA,CACC,kBAAC2B,GAAD,EAAO,eAAY,OAAQ,CAAA,GAAC,UAE3B,EAAA,CAAA,IAEDjB,EAAG,OAAO,eAAe;MAEpB,CAAA,CACJ;KACD,CAAA,CAAA;;IACL,kBAAC,QAAD;KAAM,MAAK;KAAS,WAAU;KAC5B,UAAAA,EAAG,WAAW,4BAA4BA,EAAG,UAAU,6BAA6B;IAChF,CAAA;GACM;EAEJ,CAAA,CAAA;;AAEb"}

package/dist/components/resource-list.js

@@ -15,7 +15,7 @@ var a = [{
 }];
 function o({ title: o, description: s, data: c, header: l, toolbar: u, filters: d, bulkActions: f, state: p, children: m, footer: h, className: g, loading: _, empty: v, error: y, onRetry: b }) {
 	return /* @__PURE__ */ i("div", {
-		className: e("min-w-0 space-y-4", g),
+		className: e("min-w-0 space-y-basalt-layout-lg", g),
 		children: [
 			l ?? /* @__PURE__ */ r(n, {
 				title: o,

package/dist/components/resource-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-list.js","names":[],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n\t/** Custom heading; falls back to PageHeader. */\n\theader?: ReactNode;\n\t/** Search and primary actions below the heading. */\n\ttoolbar?: ReactNode;\n\t/** Active filters and their controls. */\n\tfilters?: ReactNode;\n\t/** Selection-dependent actions. */\n\tbulkActions?: ReactNode;\n\t/** State content replacing the results; undefined falls through to children/data. */\n\tstate?: ReactNode;\n\t/** Custom results such as a typed DataTable. */\n\tchildren?: ReactNode;\n\t/** Pagination or result summary after the results. */\n\tfooter?: ReactNode;\n\t/** Classes for the root region. */\n\tclassName?: string;\n\t/** Show the default table loading state. @default false */\n\tloading?: boolean;\n\t/** Content shown when default data is empty. */\n\tempty?: ReactNode;\n\t/** Default table error content. */\n\terror?: ReactNode;\n\t/** Retry callback for the default table. */\n\tonRetry?: () => void;\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({\n\ttitle,\n\tdescription,\n\tdata,\n\theader,\n\ttoolbar,\n\tfilters,\n\tbulkActions,\n\tstate,\n\tchildren,\n\tfooter,\n\tclassName,\n\tloading,\n\tempty,\n\terror,\n\tonRetry,\n}: ResourceListProps) {\n\treturn (\n\t\t<div className={cn(\"min-w-0 space-y-4\", className)}>\n\t\t\t{header ?? <PageHeader title={title} description={description} />}\n\t\t\t{toolbar != null ? <div>{toolbar}</div> : null}\n\t\t\t{filters != null ? <div>{filters}</div> : null}\n\t\t\t{bulkActions != null ? <div>{bulkActions}</div> : null}\n\t\t\t{state ?? children ?? (\n\t\t\t\t<DataTable\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcolumns={COLUMNS}\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tempty={empty}\n\t\t\t\t\terror={error}\n\t\t\t\t\tonRetry={onRetry}\n\t\t\t\t\taria-label={title}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{footer != null ? <div>{footer}</div> : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAwCA,IAAM,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQ,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQ,EAAI;AAAO,CACjE;AAEA,SAAgB,EAAa,EAC5B,UACA,gBACA,SACA,WACA,YACA,YACA,gBACA,UACA,aACA,WACA,cACA,YACA,UACA,UACA,cACqB;CACrB,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,qBAAqB,CAAS;EAAjD,UAAA;GACE,KAAU,kBAAC,GAAD;IAAmB;IAAoB;GAAc,CAAA;GAC/D,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAM,EAAa,CAAA;GACrC,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAM,EAAa,CAAA;GACrC,KAAe,OAAkC,OAA3B,kBAAC,OAAD,EAAA,UAAM,EAAiB,CAAA;GAC7C,KAAS,KACT,kBAAC,GAAD;IACO;IACN,SAAS;IACA;IACF;IACA;IACE;IACT,cAAY;GACZ,CAAA;GAED,KAAU,OAA6B,OAAtB,kBAAC,OAAD,EAAA,UAAM,EAAY,CAAA;EAChC;;AAEP"}
+{"version":3,"file":"resource-list.js","names":["COLUMNS","row","ResourceList","cn","className","header","PageHeader","toolbar","filters","bulkActions","state","children","DataTable","title","footer"],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n\t/** Custom heading; falls back to PageHeader. */\n\theader?: ReactNode;\n\t/** Search and primary actions below the heading. */\n\ttoolbar?: ReactNode;\n\t/** Active filters and their controls. */\n\tfilters?: ReactNode;\n\t/** Selection-dependent actions. */\n\tbulkActions?: ReactNode;\n\t/** State content replacing the results; undefined falls through to children/data. */\n\tstate?: ReactNode;\n\t/** Custom results such as a typed DataTable. */\n\tchildren?: ReactNode;\n\t/** Pagination or result summary after the results. */\n\tfooter?: ReactNode;\n\t/** Classes for the root region. */\n\tclassName?: string;\n\t/** Show the default table loading state. @default false */\n\tloading?: boolean;\n\t/** Content shown when default data is empty. */\n\tempty?: ReactNode;\n\t/** Default table error content. */\n\terror?: ReactNode;\n\t/** Retry callback for the default table. */\n\tonRetry?: () => void;\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({\n\ttitle,\n\tdescription,\n\tdata,\n\theader,\n\ttoolbar,\n\tfilters,\n\tbulkActions,\n\tstate,\n\tchildren,\n\tfooter,\n\tclassName,\n\tloading,\n\tempty,\n\terror,\n\tonRetry,\n}: ResourceListProps) {\n\treturn (\n\t\t<div className={cn(\"min-w-0 space-y-basalt-layout-lg\", className)}>\n\t\t\t{header ?? <PageHeader title={title} description={description} />}\n\t\t\t{toolbar != null ? <div>{toolbar}</div> : null}\n\t\t\t{filters != null ? <div>{filters}</div> : null}\n\t\t\t{bulkActions != null ? <div>{bulkActions}</div> : null}\n\t\t\t{state ?? children ?? (\n\t\t\t\t<DataTable\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcolumns={COLUMNS}\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tempty={empty}\n\t\t\t\t\terror={error}\n\t\t\t\t\tonRetry={onRetry}\n\t\t\t\t\taria-label={title}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{footer != null ? <div>{footer}</div> : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAwCA,IAAMA,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQC,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQA,EAAI;AAAO,CACjE;AAEA,SAAgBC,EAAa,EAC5B,UACA,gBACA,SACA,WACA,YACA,YACA,gBACA,UACA,aACA,WACA,cACA,YACA,UACA,UACA,cACqB;CACrB,OACC,kBAAC,OAAD;EAAK,WAAWC,EAAG,oCAAoCC,CAAS;EAAhE,UAAA;GACEC,KAAU,kBAACC,GAAD;IAAmB;IAAoB;GAAc,CAAA;GAC/DC,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAMA,EAAa,CAAA;GACrCC,KAAW,OAA8B,OAAvB,kBAAC,OAAD,EAAA,UAAMA,EAAa,CAAA;GACrCC,KAAe,OAAkC,OAA3B,kBAAC,OAAD,EAAA,UAAMA,EAAiB,CAAA;GAC7CC,KAASC,KACT,kBAACC,GAAD;IACO;IACN,SAASZ;IACA;IACF;IACA;IACE;IACT,cAAYa;GACZ,CAAA;GAEDC,KAAU,OAA6B,OAAtB,kBAAC,OAAD,EAAA,UAAMA,EAAY,CAAA;EAChC;;AAEP"}

package/dist/components/responsive-master-detail.js

@@ -7,7 +7,7 @@ import { ArrowLeft as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/responsive-master-detail.tsx
 function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange: m, selectedId: h, listLabel: g = "Items", detailLabel: _ = "Details", backLabel: v = "Back to items", empty: y = /* @__PURE__ */ c("p", {
-	className: "p-6 text-sm text-basalt-muted-foreground",
+	className: "p-basalt-layout text-basalt-base text-basalt-muted-foreground",
 	children: "Choose an item to see its details."
 }), className: b }) {
 	let [x, S] = o(!1), C = a(null), w = a(null), T = a(null), E = a({
@@ -36,16 +36,16 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 	]), /* @__PURE__ */ l("div", {
 		role: "group",
 		"aria-label": u,
-		className: e(t, "grid min-w-0 grid-cols-1 overflow-hidden rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)]", b),
+		className: e(t, "grid min-h-0 min-w-0 grid-cols-1 rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)] md:overflow-hidden", b),
 		children: [/* @__PURE__ */ c("section", {
 			ref: C,
 			"aria-label": g,
 			tabIndex: -1,
 			hidden: x && p,
 			inert: x && p,
-			className: e("min-w-0 bg-basalt-card focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:border-r md:border-basalt-border", p && "hidden md:block"),
+			className: e("min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border", p && "hidden md:block"),
 			onFocusCapture: (e) => {
-				T.current = e.target;
+				e.target !== e.currentTarget && (T.current = e.target);
 			},
 			onPointerDownCapture: (e) => {
 				let t = e.target.closest("button, a[href], input, [tabindex]");
@@ -58,12 +58,12 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			tabIndex: -1,
 			hidden: x && !p,
 			inert: x && !p,
-			className: e("min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring", !p && "hidden md:block"),
+			className: e("min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain", !p && "hidden md:block"),
 			children: [
 				x && p && /* @__PURE__ */ c("div", {
-					className: "border-b border-basalt-border p-2",
+					className: "border-b border-basalt-border p-basalt-space-lg",
 					children: /* @__PURE__ */ l(n, {
-						size: "sm",
+						className: "min-h-basalt-touch",
 						variant: "ghost",
 						onClick: () => m(!1),
 						children: [/* @__PURE__ */ c(s, {}), v]

package/dist/components/responsive-master-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-master-detail.js","names":[],"sources":["../../src/components/responsive-master-detail.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ResponsiveMasterDetailProps {\n\t/** Accessible name of the composition. */\n\tlabel: string;\n\t/** Application-rendered list; selection, routing and data remain outside. */\n\tlist: ReactNode;\n\t/** Application-rendered detail content. */\n\tchildren: ReactNode;\n\t/** Controlled detail visibility. */\n\tdetailOpen: boolean;\n\t/** Requests opening/closing the detail; the caller accepts the change. */\n\tonDetailOpenChange: (open: boolean) => void;\n\t/** Current selection identity, used to focus newly selected mobile details. */\n\tselectedId?: string | null;\n\t/** List region name. @default \"Items\" */\n\tlistLabel?: string;\n\t/** Detail region name. @default \"Details\" */\n\tdetailLabel?: string;\n\t/** Mobile return action text. @default \"Back to items\" */\n\tbackLabel?: string;\n\t/** Desktop detail placeholder while no item is open. */\n\tempty?: ReactNode;\n\t/** Additional root classes; provide application-specific height/scrolling here. */\n\tclassName?: string;\n}\n/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */\nexport function ResponsiveMasterDetail({\n\tlabel,\n\tlist,\n\tchildren,\n\tdetailOpen,\n\tonDetailOpenChange,\n\tselectedId,\n\tlistLabel = \"Items\",\n\tdetailLabel = \"Details\",\n\tbackLabel = \"Back to items\",\n\tempty = (\n\t\t<p className=\"p-6 text-sm text-basalt-muted-foreground\">Choose an item to see its details.</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-w-0 grid-cols-1 overflow-hidden rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<section\n\t\t\t\tref={listRegion}\n\t\t\t\taria-label={listLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && detailOpen}\n\t\t\t\tinert={compact && detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 bg-basalt-card focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\topener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-2\">\n\t\t\t\t\t\t<Button size=\"sm\" variant=\"ghost\" onClick={() => onDetailOpenChange(false)}>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAA2C,UAAA;AAAqC,CAAA,GAE9F,gBAC+B;CAC/B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAa,EAAoB,IAAI,GACrC,IAAe,EAAoB,IAAI,GACvC,IAAS,EAA2B,IAAI,GACxC,IAAW,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBA,QAAgB;EACf,IAAM,IAAQ,OAAO,WAAW,oBAAoB,GAC9C,UAAe,EAAW,EAAM,OAAO;EAG7C,OAFA,EAAO,GACP,EAAM,iBAAiB,UAAU,CAAM,SAC1B,EAAM,oBAAoB,UAAU,CAAM;CACxD,GAAG,CAAC,CAAC,GACL,QAAsB;EACrB,IAAM,IAAS,EAAS;EAOxB,IALC,KACA,MACC,CAAC,EAAO,WAAW,CAAC,EAAO,cAAc,EAAO,eAAe,MAEhE,EAAa,SAAS,MAAM,GACzB,KAAW,CAAC,KAAc,EAAO,YAAY;GAChD,IAAM,IAAS,EAAO;GACtB,AAAI,GAAQ,eAAe,CAAC,EAAO,QAAQ,mBAAmB,IAAG,EAAO,MAAM,IACzE,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAAC;EAAS;EAAY;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,GACA,2IACA,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAK;GACL,cAAY;GACZ,UAAU;GACV,QAAQ,KAAW;GACnB,OAAO,KAAW;GAClB,WAAW,EACV,wJACA,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,EAAO,UAAU,EAAM;GACxB;GACA,uBAAuB,MAAU;IAChC,IAAM,IAAU,EAAM,OAAmB,QACxC,oCACD;IACA,AAAI,MAAQ,EAAO,UAAU;GAC9B;GAEC,UAAA;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAK;GACL,cAAY;GACZ,UAAU;GACV,QAAQ,KAAW,CAAC;GACpB,OAAO,KAAW,CAAC;GACnB,WAAW,EACV,0HACA,CAAC,KAAc,iBAChB;GATD,UAAA;IAWE,KAAW,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAQ;MAAQ,eAAe,EAAmB,EAAK;MAAzE,UAAA,CACC,kBAAC,GAAD,CAAY,CAAA,GACX,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAAC;KAAY,OAAO,CAAC;KAChC;IACG,CAAA;IACJ,CAAC,KAAc;GACR;EACL,CAAA,CAAA;;AAEP"}
+{"version":3,"file":"responsive-master-detail.js","names":["ResponsiveMasterDetail","compact","setCompact","useState","listRegion","useRef","detailRegion","opener","previous","useEffect","query","update","useLayoutEffect","before","detailOpen","selectedId","target","label","cn","BASALT_UI_CLASS","className","listLabel","event","list","detailLabel","Button","onDetailOpenChange","ArrowLeft","backLabel","empty"],"sources":["../../src/components/responsive-master-detail.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ResponsiveMasterDetailProps {\n\t/** Accessible name of the composition. */\n\tlabel: string;\n\t/** Application-rendered list; selection, routing and data remain outside. */\n\tlist: ReactNode;\n\t/** Application-rendered detail content. */\n\tchildren: ReactNode;\n\t/** Controlled detail visibility. */\n\tdetailOpen: boolean;\n\t/** Requests opening/closing the detail; the caller accepts the change. */\n\tonDetailOpenChange: (open: boolean) => void;\n\t/** Current selection identity, used to focus newly selected mobile details. */\n\tselectedId?: string | null;\n\t/** List region name. @default \"Items\" */\n\tlistLabel?: string;\n\t/** Detail region name. @default \"Details\" */\n\tdetailLabel?: string;\n\t/** Mobile return action text. @default \"Back to items\" */\n\tbackLabel?: string;\n\t/** Desktop detail placeholder while no item is open. */\n\tempty?: ReactNode;\n\t/** Additional root classes; provide application-specific height/scrolling here. */\n\tclassName?: string;\n}\n/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */\nexport function ResponsiveMasterDetail({\n\tlabel,\n\tlist,\n\tchildren,\n\tdetailOpen,\n\tonDetailOpenChange,\n\tselectedId,\n\tlistLabel = \"Items\",\n\tdetailLabel = \"Details\",\n\tbackLabel = \"Back to items\",\n\tempty = (\n\t\t<p className=\"p-basalt-layout text-basalt-base text-basalt-muted-foreground\">\n\t\t\tChoose an item to see its details.\n\t\t</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-h-0 min-w-0 grid-cols-1 rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)] md:overflow-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<section\n\t\t\t\tref={listRegion}\n\t\t\t\taria-label={listLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && detailOpen}\n\t\t\t\tinert={compact && detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\tif (event.target !== event.currentTarget) opener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-basalt-space-lg\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"min-h-basalt-touch\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => onDetailOpenChange(false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAAgE,UAAA;AAE1E,CAAA,GAEJ,gBAC+B;CAC/B,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAaC,EAAoB,IAAI,GACrCC,IAAeD,EAAoB,IAAI,GACvCE,IAASF,EAA2B,IAAI,GACxCG,IAAWH,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBAI,QAAgB;EACf,IAAMC,IAAQ,OAAO,WAAW,oBAAoB,GAC9CC,UAAeT,EAAWQ,EAAM,OAAO;EAG7C,OAFAC,EAAO,GACPD,EAAM,iBAAiB,UAAUC,CAAM,SAC1BD,EAAM,oBAAoB,UAAUC,CAAM;CACxD,GAAG,CAAC,CAAC,GACLC,QAAsB;EACrB,IAAMC,IAASL,EAAS;EAOxB,IALCP,KACAa,MACC,CAACD,EAAO,WAAW,CAACA,EAAO,cAAcA,EAAO,eAAeE,MAEhET,EAAa,SAAS,MAAM,GACzBL,KAAW,CAACa,KAAcD,EAAO,YAAY;GAChD,IAAMG,IAAST,EAAO;GACtB,AAAIS,GAAQ,eAAe,CAACA,EAAO,QAAQ,mBAAmB,IAAGA,EAAO,MAAM,IACzEZ,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAACH;EAASa;EAAYC;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYE;EACZ,WAAWC,EACVC,GACA,sJACAC,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAKhB;GACL,cAAYiB;GACZ,UAAU;GACV,QAAQpB,KAAWa;GACnB,OAAOb,KAAWa;GAClB,WAAWI,EACV,4LACAJ,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,AAAIQ,EAAM,WAAWA,EAAM,kBAAe,EAAO,UAAUA,EAAM;GAClE;GACA,uBAAuB,MAAU;IAChC,IAAMN,IAAUM,EAAM,OAAmB,QACxC,oCACD;IACA,AAAIN,MAAQ,EAAO,UAAUA;GAC9B;GAEC,UAAAO;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAKjB;GACL,cAAYkB;GACZ,UAAU;GACV,QAAQvB,KAAW,CAACa;GACpB,OAAOb,KAAW,CAACa;GACnB,WAAWI,EACV,6KACA,CAACJ,KAAc,iBAChB;GATD,UAAA;IAWEb,KAAWa,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAACW,GAAD;MACC,WAAU;MACV,SAAQ;MACR,eAAeC,EAAmB,EAAK;MAHxC,UAAA,CAKC,kBAACC,GAAD,CAAY,CAAA,GACXC,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAACd;KAAY,OAAO,CAACA;KAChC;IACG,CAAA;IACJ,CAACA,KAAce;GACR;EACL,CAAA,CAAA;;AAEP"}

package/dist/components/scroll-area.js

@@ -4,15 +4,15 @@ import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-scroll-area";
 //#region src/components/scroll-area.tsx
-var a = "flex touch-none select-none p-px transition-colors motion-reduce:transition-none";
+var a = "flex touch-none select-none p-px transition-colors basalt-motion motion-reduce:transition-none";
 function o({ orientation: t }) {
 	return /* @__PURE__ */ n(i.Scrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation: t,
-		className: e(a, t === "vertical" ? "h-full w-2.5 border-l border-l-transparent" : "h-2.5 flex-col border-t border-t-transparent"),
+		className: e(a, t === "vertical" ? "h-full w-basalt-2_5 border-l border-l-transparent" : "h-basalt-2_5 flex-col border-t border-t-transparent"),
 		children: /* @__PURE__ */ n(i.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "relative flex-1 rounded-full bg-basalt-border"
+			className: "relative flex-1 rounded-basalt-full bg-basalt-border"
 		})
 	});
 }

package/dist/components/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype RootProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"asChild\"\n\t| \"children\"\n\t| \"className\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\ntype ViewportProps = Pick<\n\tReact.ComponentPropsWithoutRef<\"div\">,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"children\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\nexport interface ScrollAreaProps extends RootProps, ViewportProps {\n\t/** Classes applied to the non-scrolling root. */\n\tclassName?: string;\n\t/** Axes that may scroll. @default \"vertical\" */\n\torientation?: ScrollAreaOrientation;\n\t/** Classes applied to the actual scrolling viewport. */\n\tviewportClassName?: string;\n}\n\nconst SCROLLBAR_CLASSES =\n\t\"flex touch-none select-none p-px transition-colors motion-reduce:transition-none\";\n\nfunction ScrollBar({ orientation }: { orientation: \"horizontal\" | \"vertical\" }) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\tSCROLLBAR_CLASSES,\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"h-full w-2.5 border-l border-l-transparent\"\n\t\t\t\t\t: \"h-2.5 flex-col border-t border-t-transparent\",\n\t\t\t)}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb\n\t\t\t\tdata-slot=\"scroll-area-thumb\"\n\t\t\t\tclassName=\"relative flex-1 rounded-full bg-basalt-border\"\n\t\t\t/>\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t);\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n\t(\n\t\t{\n\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonScroll,\n\t\t\torientation = \"vertical\",\n\t\t\trole,\n\t\t\ttabIndex = 0,\n\t\t\tviewportClassName,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasVertical = orientation !== \"horizontal\";\n\t\tconst hasHorizontal = orientation !== \"vertical\";\n\t\tconst viewportRole = role ?? (ariaLabel || ariaLabelledBy ? \"region\" : undefined);\n\n\t\treturn (\n\t\t\t<ScrollAreaPrimitive.Root\n\t\t\t\tdata-slot=\"scroll-area\"\n\t\t\t\tclassName={cn(\"relative min-h-0 min-w-0 overflow-hidden\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-orientation={orientation}\n\t\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\trole={viewportRole}\n\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAM,IACL;AAED,SAAS,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAAC,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAW,EACV,GACA,MAAgB,aACb,+CACA,8CACJ;EAEA,UAAA,kBAAC,EAAoB,OAArB;GACC,aAAU;GACV,WAAU;EACV,CAAA;CAC6B,CAAA;AAEjC;AAEA,IAAa,IAAa,EAAM,YAE9B,EACC,oBAAoB,GACpB,cAAc,GACd,mBAAmB,GACnB,aACA,cACA,aACA,iBAAc,YACd,SACA,cAAW,GACX,sBACA,GAAG,KAEJ,MACI;CACJ,IAAM,IAAc,MAAgB,cAC9B,IAAgB,MAAgB,YAChC,IAAe,MAAS,KAAa,IAAiB,WAAW,KAAA;CAEvE,OACC,kBAAC,EAAoB,MAArB;EACC,aAAU;EACV,WAAW,EAAG,4CAA4C,CAAS;EACnE,GAAI;EAHL,UAAA;GAKC,kBAAC,EAAoB,UAArB;IACM;IACL,oBAAkB;IAClB,aAAU;IACV,oBAAkB;IAClB,cAAY;IACZ,mBAAiB;IACjB,MAAM;IACI;IACA;IACV,WAAW,EACV,0KACA,MAAgB,cAAc,sBAC9B,MAAgB,gBAAgB,sBAChC,CACD;IAEC;GAC4B,CAAA;GAC7B,IAAc,kBAAC,GAAD,EAAW,aAAY,WAAY,CAAA,IAAI;GACrD,IAAgB,kBAAC,GAAD,EAAW,aAAY,aAAc,CAAA,IAAI;GACzD,KAAe,IACf,kBAAC,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA,IACzD;EACqB;;AAE5B,CACD;AACA,EAAW,cAAc"}
+{"version":3,"file":"scroll-area.js","names":["React","ScrollAreaPrimitive","SCROLLBAR_CLASSES","ScrollBar","cn","orientation","ScrollArea","ariaDescribedBy","ariaLabel","ariaLabelledBy","props","hasVertical","hasHorizontal","viewportRole","role","className","viewportClassName"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype RootProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"asChild\"\n\t| \"children\"\n\t| \"className\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\ntype ViewportProps = Pick<\n\tReact.ComponentPropsWithoutRef<\"div\">,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"children\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\nexport interface ScrollAreaProps extends RootProps, ViewportProps {\n\t/** Classes applied to the non-scrolling root. */\n\tclassName?: string;\n\t/** Axes that may scroll. @default \"vertical\" */\n\torientation?: ScrollAreaOrientation;\n\t/** Classes applied to the actual scrolling viewport. */\n\tviewportClassName?: string;\n}\n\nconst SCROLLBAR_CLASSES =\n\t\"flex touch-none select-none p-px transition-colors basalt-motion motion-reduce:transition-none\";\n\nfunction ScrollBar({ orientation }: { orientation: \"horizontal\" | \"vertical\" }) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\tSCROLLBAR_CLASSES,\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"h-full w-basalt-2_5 border-l border-l-transparent\"\n\t\t\t\t\t: \"h-basalt-2_5 flex-col border-t border-t-transparent\",\n\t\t\t)}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb\n\t\t\t\tdata-slot=\"scroll-area-thumb\"\n\t\t\t\tclassName=\"relative flex-1 rounded-basalt-full bg-basalt-border\"\n\t\t\t/>\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t);\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n\t(\n\t\t{\n\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonScroll,\n\t\t\torientation = \"vertical\",\n\t\t\trole,\n\t\t\ttabIndex = 0,\n\t\t\tviewportClassName,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasVertical = orientation !== \"horizontal\";\n\t\tconst hasHorizontal = orientation !== \"vertical\";\n\t\tconst viewportRole = role ?? (ariaLabel || ariaLabelledBy ? \"region\" : undefined);\n\n\t\treturn (\n\t\t\t<ScrollAreaPrimitive.Root\n\t\t\t\tdata-slot=\"scroll-area\"\n\t\t\t\tclassName={cn(\"relative min-h-0 min-w-0 overflow-hidden\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-orientation={orientation}\n\t\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\trole={viewportRole}\n\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAME,IACL;AAED,SAASC,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAACF,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAWG,EACVF,GACAG,MAAgB,aACb,sDACA,qDACJ;EAEA,UAAA,kBAACJ,EAAoB,OAArB;GACC,aAAU;GACV,WAAU;EACV,CAAA;CAC6B,CAAA;AAEjC;AAEA,IAAaK,IAAaN,EAAM,YAE9B,EACC,oBAAoBO,GACpB,cAAcC,GACd,mBAAmBC,GACnB,aACA,cACA,aACA,iBAAc,YACd,SACA,cAAW,GACX,sBACA,GAAGC,KAEJ,MACI;CACJ,IAAMC,IAAcN,MAAgB,cAC9BO,IAAgBP,MAAgB,YAChCQ,IAAeC,MAASN,KAAaC,IAAiB,WAAW,KAAA;CAEvE,OACC,kBAACR,EAAoB,MAArB;EACC,aAAU;EACV,WAAWG,EAAG,4CAA4CW,CAAS;EACnE,GAAIL;EAHL,UAAA;GAKC,kBAACT,EAAoB,UAArB;IACM;IACL,oBAAkBI;IAClB,aAAU;IACV,oBAAkBE;IAClB,cAAYC;IACZ,mBAAiBC;IACjB,MAAMI;IACI;IACA;IACV,WAAWT,EACV,0KACAC,MAAgB,cAAc,sBAC9BA,MAAgB,gBAAgB,sBAChCW,CACD;IAEC;GAC4B,CAAA;GAC7BL,IAAc,kBAACR,GAAD,EAAW,aAAY,WAAY,CAAA,IAAI;GACrDS,IAAgB,kBAACT,GAAD,EAAW,aAAY,aAAc,CAAA,IAAI;GACzDQ,KAAeC,IACf,kBAACX,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA,IACzD;EACqB;;AAE5B,CACD;AACA,EAAW,cAAc"}

package/dist/components/section-rule.d.ts

@@ -1,10 +1,12 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
-    /** Section title shown before the dashed rule. */
+    /** Compact label with a rule, or a reading-focused section heading. @default "label" */
+    variant?: "label" | "heading";
+    /** Section heading; the label variant includes a trailing rule. */
     title: ReactNode;
     /** Info tooltip beside the title. */
     hint?: ReactNode;
-    /** Actions on the right of the dashed rule. */
+    /** Actions aligned to the end of the heading row. */
     actions?: ReactNode;
 };
-export declare function SectionRule({ title, hint, actions, className, children, ...props }: SectionRuleProps): import("react").JSX.Element;
+export declare function SectionRule({ title, hint, actions, className, children, variant, ...props }: SectionRuleProps): import("react").JSX.Element;

package/dist/components/section-rule.js

@@ -5,34 +5,34 @@ import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger
 import { Info as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/section-rule.tsx
-function l({ title: l, hint: u, actions: d, className: f, children: p, ...m }) {
+function l({ title: l, hint: u, actions: d, className: f, children: p, variant: m = "label", ...h }) {
 	return /* @__PURE__ */ c("section", {
-		className: e(t, "space-y-3", f),
-		...m,
+		className: e(t, m === "heading" ? "space-y-basalt-layout" : "space-y-basalt-layout-sm", f),
+		...h,
 		children: [/* @__PURE__ */ c("div", {
-			className: "flex flex-wrap items-center gap-3",
+			className: "flex flex-wrap items-center gap-basalt-layout-sm",
 			children: [
 				/* @__PURE__ */ c("div", {
-					className: "flex min-w-0 items-center gap-1.5",
+					className: "flex min-w-0 max-w-full items-center gap-basalt-space-md",
 					children: [/* @__PURE__ */ s("h2", {
-						className: "text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase",
+						className: m === "heading" ? "font-basalt-display text-basalt-2xl font-semibold tracking-tight text-basalt-foreground [overflow-wrap:anywhere]" : "text-basalt-sm font-medium tracking-wider text-basalt-muted-foreground uppercase",
 						children: l
 					}), u ? /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
 						asChild: !0,
 						children: /* @__PURE__ */ s("button", {
 							type: "button",
 							"aria-label": "More information",
-							className: "inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
-							children: /* @__PURE__ */ s(o, { className: "size-3.5" })
+							className: "inline-flex size-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground",
+							children: /* @__PURE__ */ s(o, { className: "size-basalt-icon" })
 						})
 					}), /* @__PURE__ */ s(r, { children: u })] }) }) : null]
 				}),
-				/* @__PURE__ */ s("div", {
-					className: "h-px min-w-4 flex-1 border-t border-dashed border-basalt-border",
+				m === "label" ? /* @__PURE__ */ s("div", {
+					className: "h-px min-w-basalt-4 flex-1 border-t border-dashed border-basalt-border",
 					"aria-hidden": "true"
-				}),
+				}) : null,
 				d ? /* @__PURE__ */ s("div", {
-					className: "flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-2",
+					className: "ml-auto flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-basalt-space-lg",
 					children: d
 				}) : null
 			]

package/dist/components/section-rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-rule.js","names":[],"sources":["../../src/components/section-rule.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n\t/** Section title shown before the dashed rule. */\n\ttitle: ReactNode;\n\t/** Info tooltip beside the title. */\n\thint?: ReactNode;\n\t/** Actions on the right of the dashed rule. */\n\tactions?: ReactNode;\n};\n\nexport function SectionRule({\n\ttitle,\n\thint,\n\tactions,\n\tclassName,\n\tchildren,\n\t...props\n}: SectionRuleProps) {\n\treturn (\n\t\t<section className={cn(BASALT_UI_CLASS, \"space-y-3\", className)} {...props}>\n\t\t\t<div className=\"flex flex-wrap items-center gap-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1.5\">\n\t\t\t\t\t<h2 className=\"text-xs font-medium tracking-wider text-basalt-muted-foreground uppercase\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t{hint ? (\n\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Info className=\"size-3.5\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>{hint}</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"h-px min-w-4 flex-1 border-t border-dashed border-basalt-border\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-2\">\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAY,EAC3B,UACA,SACA,YACA,cACA,aACA,GAAG,KACiB;CACpB,OACC,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAiB,aAAa,CAAS;EAAG,GAAI;EAArE,UAAA,CACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,WAAU;MACZ,UAAA;KACE,CAAA,GACH,IACA,kBAAC,GAAD,EAAA,UACC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAAC,UAAD;OACC,MAAK;OACL,cAAW;OACX,WAAU;OAEV,UAAA,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MACrB,CAAA;KACO,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAqB,CAAA,CAC9B,EAAA,CAAA,EACO,CAAA,IACd,IACA;;IACL,kBAAC,OAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA;IACA,IACA,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA;IACG,CAAA,IACF;GACA;EACJ,CAAA,GAAA,CACO;;AAEX"}
+{"version":3,"file":"section-rule.js","names":["SectionRule","props","cn","BASALT_UI_CLASS","variant","className","title","hint","TooltipProvider","Tooltip","TooltipTrigger","Info","TooltipContent","actions","children"],"sources":["../../src/components/section-rule.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nexport type SectionRuleProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> & {\n\t/** Compact label with a rule, or a reading-focused section heading. @default \"label\" */\n\tvariant?: \"label\" | \"heading\";\n\t/** Section heading; the label variant includes a trailing rule. */\n\ttitle: ReactNode;\n\t/** Info tooltip beside the title. */\n\thint?: ReactNode;\n\t/** Actions aligned to the end of the heading row. */\n\tactions?: ReactNode;\n};\n\nexport function SectionRule({\n\ttitle,\n\thint,\n\tactions,\n\tclassName,\n\tchildren,\n\tvariant = \"label\",\n\t...props\n}: SectionRuleProps) {\n\treturn (\n\t\t<section\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\tvariant === \"heading\" ? \"space-y-basalt-layout\" : \"space-y-basalt-layout-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex flex-wrap items-center gap-basalt-layout-sm\">\n\t\t\t\t<div className=\"flex min-w-0 max-w-full items-center gap-basalt-space-md\">\n\t\t\t\t\t<h2\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tvariant === \"heading\"\n\t\t\t\t\t\t\t\t? \"font-basalt-display text-basalt-2xl font-semibold tracking-tight text-basalt-foreground [overflow-wrap:anywhere]\"\n\t\t\t\t\t\t\t\t: \"text-basalt-sm font-medium tracking-wider text-basalt-muted-foreground uppercase\"\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\t\t\t\t\t{hint ? (\n\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"More information\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex size-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground hover:text-basalt-foreground\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Info className=\"size-basalt-icon\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>{hint}</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{variant === \"label\" ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"h-px min-w-basalt-4 flex-1 border-t border-dashed border-basalt-border\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"ml-auto flex min-w-0 max-w-full shrink-0 flex-wrap items-center justify-end gap-basalt-space-lg\">\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n"],"mappings":";;;;;;;AAiBA,SAAgBA,EAAY,EAC3B,UACA,SACA,YACA,cACA,aACA,aAAU,SACV,GAAGC,KACiB;CACpB,OACC,kBAAC,WAAD;EACC,WAAWC,EACVC,GACAC,MAAY,YAAY,0BAA0B,4BAClDC,CACD;EACA,GAAIJ;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MACC,WACCG,MAAY,YACT,qHACA;MAGH,UAAAE;KACE,CAAA,GACHC,IACA,kBAACC,GAAD,EAAA,UACC,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAAC,UAAD;OACC,MAAK;OACL,cAAW;OACX,WAAU;OAEV,UAAA,kBAACC,GAAD,EAAM,WAAU,mBAAoB,CAAA;MAC7B,CAAA;KACO,CAAA,GAChB,kBAACC,GAAD,EAAA,UAAiBL,EAAqB,CAAA,CAC9B,EAAA,CAAA,EACO,CAAA,IACd,IACA;;IACJH,MAAY,UACZ,kBAAC,OAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,IACE;IACHS,IACA,kBAAC,OAAD;KAAK,WAAU;KACb,UAAAA;IACG,CAAA,IACF;GACA;EACJ,CAAA,GAAAC,CACO;;AAEX"}

package/dist/components/segment-control.js

@@ -12,15 +12,15 @@ var o = r.forwardRef(({ allOption: o, className: s, disabled: c = !1, legend: l,
 	return /* @__PURE__ */ a("fieldset", {
 		ref: m,
 		disabled: c,
-		className: e("min-w-0 border-0 p-0", s),
+		className: e("basalt-ui min-w-0 border-0 p-0", s),
 		...p,
 		children: [/* @__PURE__ */ i("legend", {
 			id: h,
-			className: "mb-2 block text-xs font-medium text-basalt-muted-foreground",
+			className: "mb-basalt-space-lg block text-basalt-sm font-medium text-basalt-muted-foreground",
 			children: l
 		}), /* @__PURE__ */ i("div", {
 			"data-slot": "segment-control-viewport",
-			className: "max-w-full overflow-x-auto pb-1",
+			className: "max-w-full overflow-x-auto pb-basalt-space-sm",
 			children: /* @__PURE__ */ i(t, {
 				type: "single",
 				value: f,

package/dist/components/segment-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment-control.js","names":[],"sources":["../../src/components/segment-control.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface SegmentControlOption {\n\t/** The value selected when this segment is activated. */\n\tvalue: string;\n\t/** The visible label for the segment. */\n\tlabel: React.ReactNode;\n\t/** Disable only this segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlAllOption {\n\t/** The value representing the unfiltered selection. */\n\tvalue: string;\n\t/** The visible label for the leading segment. */\n\tlabel?: React.ReactNode;\n\t/** Disable only the leading segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlProps\n\textends Omit<React.HTMLAttributes<HTMLFieldSetElement>, \"children\" | \"onChange\"> {\n\t/** The currently selected value. */\n\tvalue: string;\n\t/** Called when the user selects a different segment. */\n\tonValueChange: (value: string) => void;\n\t/** The visible legend that names the control. */\n\tlegend: React.ReactNode;\n\t/** The selectable segments shown after the optional All segment. */\n\toptions: readonly SegmentControlOption[];\n\t/** Add a leading unfiltered segment, labelled All by default. */\n\tallOption?: SegmentControlAllOption;\n\t/**\n\t * Disable every segment.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}\n\nexport const SegmentControl = React.forwardRef<HTMLFieldSetElement, SegmentControlProps>(\n\t(\n\t\t{ allOption, className, disabled = false, legend, onValueChange, options, value, ...props },\n\t\tref,\n\t) => {\n\t\tconst legendId = React.useId();\n\t\tconst items: readonly SegmentControlOption[] = allOption\n\t\t\t? [{ ...allOption, label: allOption.label ?? \"All\" }, ...options]\n\t\t\t: options;\n\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(\"min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-2 block text-xs font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div data-slot=\"segment-control-viewport\" className=\"max-w-full overflow-x-auto pb-1\">\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAa,IAAiB,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAG,KACpF,MACI;CACJ,IAAM,IAAW,EAAM,MAAM,GACvB,IAAyC,IAC5C,CAAC;EAAE,GAAG;EAAW,OAAO,EAAU,SAAS;CAAM,GAAG,GAAG,CAAO,IAC9D;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAW,EAAG,wBAAwB,CAAS;EAC/C,GAAI;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAI;GACJ,WAAU;GAET,UAAA;EACM,CAAA,GACR,kBAAC,OAAD;GAAK,aAAU;GAA2B,WAAU;GACnD,UAAA,kBAAC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAI,KACH,EAAc,CAAS;IAEzB;IACA,mBAAiB;IACjB,WAAU;IAET,UAAA,EAAM,KAAK,MACX,kBAAC,GAAD;KAAkC,OAAO,EAAK;KAAO,UAAU,EAAK;KAClE,UAAA,EAAK;IACU,GAFK,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}
+{"version":3,"file":"segment-control.js","names":["React","SegmentControl","props","legendId","items","allOption","options","cn","className","legend","ToggleGroup","nextValue","onValueChange","ToggleGroupItem","item"],"sources":["../../src/components/segment-control.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface SegmentControlOption {\n\t/** The value selected when this segment is activated. */\n\tvalue: string;\n\t/** The visible label for the segment. */\n\tlabel: React.ReactNode;\n\t/** Disable only this segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlAllOption {\n\t/** The value representing the unfiltered selection. */\n\tvalue: string;\n\t/** The visible label for the leading segment. */\n\tlabel?: React.ReactNode;\n\t/** Disable only the leading segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlProps\n\textends Omit<React.HTMLAttributes<HTMLFieldSetElement>, \"children\" | \"onChange\"> {\n\t/** The currently selected value. */\n\tvalue: string;\n\t/** Called when the user selects a different segment. */\n\tonValueChange: (value: string) => void;\n\t/** The visible legend that names the control. */\n\tlegend: React.ReactNode;\n\t/** The selectable segments shown after the optional All segment. */\n\toptions: readonly SegmentControlOption[];\n\t/** Add a leading unfiltered segment, labelled All by default. */\n\tallOption?: SegmentControlAllOption;\n\t/**\n\t * Disable every segment.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}\n\nexport const SegmentControl = React.forwardRef<HTMLFieldSetElement, SegmentControlProps>(\n\t(\n\t\t{ allOption, className, disabled = false, legend, onValueChange, options, value, ...props },\n\t\tref,\n\t) => {\n\t\tconst legendId = React.useId();\n\t\tconst items: readonly SegmentControlOption[] = allOption\n\t\t\t? [{ ...allOption, label: allOption.label ?? \"All\" }, ...options]\n\t\t\t: options;\n\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(\"basalt-ui min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-basalt-space-lg block text-basalt-sm font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"segment-control-viewport\"\n\t\t\t\t\tclassName=\"max-w-full overflow-x-auto pb-basalt-space-sm\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAaC,IAAiBD,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAGE,KACpF,MACI;CACJ,IAAMC,IAAWH,EAAM,MAAM,GACvBI,IAAyCC,IAC5C,CAAC;EAAE,GAAGA;EAAW,OAAOA,EAAU,SAAS;CAAM,GAAG,GAAGC,CAAO,IAC9DA;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIN;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAIC;GACJ,WAAU;GAET,UAAAM;EACM,CAAA,GACR,kBAAC,OAAD;GACC,aAAU;GACV,WAAU;GAEV,UAAA,kBAACC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAIC,KACHC,EAAcD,CAAS;IAEzB;IACA,mBAAiBR;IACjB,WAAU;IAET,UAAAC,EAAM,KAAK,MACX,kBAACS,GAAD;KAAkC,OAAOC,EAAK;KAAO,UAAUA,EAAK;KAClE,UAAAA,EAAK;IACU,GAFKA,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}

package/dist/components/select.js

@@ -2,50 +2,65 @@
 import { cn as e } from "../utils/cn.js";
 import { controlSurfaceClass as t } from "../utils/control-surface.js";
 import { FOCUS_BORDER as n, overlayItemClass as r, overlayPanelClass as i } from "./overlay.js";
-import * as a from "react";
-import { Check as o, ChevronDown as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import * as u from "@radix-ui/react-select";
+import { useHoverHighlight as a } from "../utils/use-hover-highlight.js";
+import * as o from "react";
+import { Check as s, ChevronDown as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-select";
 //#region src/components/select.tsx
-var d = u.Root, f = u.Value, p = u.Group, m = {
-	sm: "h-8 px-2.5 text-xs",
-	default: "h-9 px-3 text-sm",
-	lg: "h-10 px-4 text-base"
-}, h = a.forwardRef(({ className: r, children: i, size: a = "default", loading: o = !1, disabled: d = !1, ...f }, p) => /* @__PURE__ */ l(u.Trigger, {
+var f = d.Root, p = d.Value, m = d.Group, h = {
+	sm: "basalt-action basalt-action-sm",
+	default: "basalt-action",
+	lg: "basalt-action basalt-action-lg"
+}, g = o.forwardRef(({ className: r, children: i, size: a = "default", loading: o = !1, disabled: s = !1, ...f }, p) => /* @__PURE__ */ u(d.Trigger, {
 	ref: p,
 	...f,
-	disabled: d || o,
+	disabled: s || o,
 	"aria-busy": o || void 0,
-	className: t(e("flex w-full items-center justify-between", m[a], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", r)),
-	children: [i, /* @__PURE__ */ c(s, { className: "h-4 w-4 opacity-50" })]
+	className: t(e("group/select flex w-full items-center justify-between", h[a], n, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", r)),
+	children: [i, /* @__PURE__ */ l(c, {
+		"aria-hidden": "true",
+		className: "h-basalt-4 w-basalt-4 opacity-50 transition-transform basalt-motion duration-basalt-normal group-data-[state=open]/select:rotate-180 motion-reduce:transition-none"
+	})]
 }));
-h.displayName = u.Trigger.displayName;
-var g = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Label, {
+g.displayName = d.Trigger.displayName;
+var _ = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l(d.Label, {
 	ref: r,
-	className: e("px-2 py-1.5 text-xs text-basalt-muted-foreground", t),
+	className: e("px-basalt-space-lg py-basalt-space-md text-basalt-sm text-basalt-muted-foreground", t),
 	...n
 }));
-g.displayName = u.Label.displayName;
-var _ = a.forwardRef(({ className: t, children: n, position: r = "popper", sideOffset: a = 4, ...o }, s) => /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Content, {
-	ref: s,
-	position: r,
-	sideOffset: a,
-	className: i(e(r === "popper" && "w-[var(--radix-select-trigger-width)]", t)),
-	...o,
-	children: /* @__PURE__ */ c(u.Viewport, { children: n })
-}) }));
-_.displayName = u.Content.displayName;
-var v = a.forwardRef(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ l(u.Item, {
+_.displayName = d.Label.displayName;
+var v = o.forwardRef(({ className: t, children: n, position: r = "popper", sideOffset: o = 4, ...s }, c) => {
+	let u = a();
+	return /* @__PURE__ */ l(d.Portal, { children: /* @__PURE__ */ l(d.Content, {
+		ref: c,
+		position: r,
+		sideOffset: o,
+		className: i(e(r === "popper" && "w-[var(--radix-select-trigger-width)]", t)),
+		...s,
+		children: /* @__PURE__ */ l(d.Viewport, {
+			ref: u,
+			className: "basalt-hover-list",
+			children: n
+		})
+	}) });
+});
+v.displayName = d.Content.displayName;
+var y = o.forwardRef(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ u(d.Item, {
+	"data-basalt-hover-item": "",
 	ref: a,
-	className: r(e("relative pr-8 outline-hidden hover:bg-basalt-accent focus-visible:bg-basalt-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
+	className: r(e("relative outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
 	...i,
-	children: [/* @__PURE__ */ c(u.ItemText, { children: n }), /* @__PURE__ */ c(u.ItemIndicator, {
-		className: "absolute right-2",
-		children: /* @__PURE__ */ c(o, { className: "h-3.5 w-3.5" })
+	children: [/* @__PURE__ */ l(d.ItemText, {
+		className: "min-w-0 flex-1",
+		children: n
+	}), /* @__PURE__ */ l("span", {
+		className: "inline-flex w-basalt-icon shrink-0 justify-end",
+		children: /* @__PURE__ */ l(d.ItemIndicator, { children: /* @__PURE__ */ l(s, { className: "size-basalt-icon" }) })
 	})]
 }));
-v.displayName = u.Item.displayName;
+y.displayName = d.Item.displayName;
 //#endregion
-export { d as Select, _ as SelectContent, p as SelectGroup, v as SelectItem, g as SelectLabel, h as SelectTrigger, f as SelectValue };
+export { f as Select, v as SelectContent, m as SelectGroup, y as SelectItem, _ as SelectLabel, g as SelectTrigger, p as SelectValue };
 
 //# sourceMappingURL=select.js.map