@nocoo/basalt 3.1.0 → 3.2.1

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

@@ -5,7 +5,7 @@ export interface PageHeaderBreadcrumb {
     icon?: React.ReactNode;
 }
 export interface PageHeaderProps {
-    /** Heading scale: workspace, dashboard, or reading-focused page. @default "md" */
+    /** Page preset; all presets share the same title and description scale. @default "md" */
     size?: "md" | "lg" | "xl";
     /** The page title, rendered as the only heading. */
     title: React.ReactNode;
@@ -18,4 +18,4 @@ export interface PageHeaderProps {
     /** Own-row filters. Keep short filters in actions. */
     filters?: React.ReactNode;
 }
-export declare function PageHeader({ actions, breadcrumbs, description, filters, size, title, }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps): React.JSX.Element;

package/dist/components/page-header.js

@@ -5,10 +5,10 @@ import { Breadcrumbs as n } from "./breadcrumbs.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/page-header.tsx
-function o({ actions: o, breadcrumbs: s, description: c, filters: l, size: u = "md", title: d }) {
-	let f = r.useId();
+function o({ actions: o, breadcrumbs: s, description: c, filters: l, title: u }) {
+	let d = r.useId();
 	return /* @__PURE__ */ a("header", {
-		"aria-labelledby": f,
+		"aria-labelledby": d,
 		className: e(t, "min-w-0 shrink-0 space-y-basalt-layout"),
 		children: [
 			s && s.length > 0 ? /* @__PURE__ */ i(n, { items: [...s] }) : null,
@@ -17,11 +17,11 @@ function o({ actions: o, breadcrumbs: s, description: c, filters: l, size: u = "
 				children: [/* @__PURE__ */ a("div", {
 					className: "min-w-0 flex-1 space-y-basalt-space-lg",
 					children: [/* @__PURE__ */ i("h1", {
-						id: f,
-						className: e("font-basalt-display font-semibold tracking-tight text-basalt-foreground [overflow-wrap:anywhere]", u === "md" && "text-basalt-3xl", u === "lg" && "text-basalt-4xl", u === "xl" && "text-basalt-4xl md:text-basalt-5xl", "leading-basalt-tight"),
-						children: d
+						id: d,
+						className: "font-basalt-display text-basalt-3xl font-semibold leading-basalt-tight tracking-tight text-basalt-foreground [overflow-wrap:anywhere]",
+						children: u
 					}), c ? /* @__PURE__ */ i("p", {
-						className: e("max-w-[65ch] text-basalt-muted-foreground [overflow-wrap:anywhere]", u === "md" ? "text-basalt-base" : "text-basalt-lg leading-basalt-relaxed"),
+						className: "max-w-[65ch] text-basalt-base leading-basalt-relaxed text-basalt-muted-foreground [overflow-wrap:anywhere]",
 						children: c
 					}) : null]
 				}), o ? /* @__PURE__ */ i("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":["React","PageHeader","titleId","cn","BASALT_UI_CLASS","breadcrumbs","Breadcrumbs","size","title","description","actions","filters"],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** Heading scale: workspace, dashboard, or reading-focused page. @default \"md\" */\n\tsize?: \"md\" | \"lg\" | \"xl\";\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Right-side title-row actions. Put the create button last. */\n\tactions?: React.ReactNode;\n\t/** Own-row filters. Keep short filters in actions. */\n\tfilters?: React.ReactNode;\n}\n\nexport function PageHeader({\n\tactions,\n\tbreadcrumbs,\n\tdescription,\n\tfilters,\n\tsize = \"md\",\n\ttitle,\n}: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header\n\t\t\taria-labelledby={titleId}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 shrink-0 space-y-basalt-layout\")}\n\t\t>\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? <Breadcrumbs items={[...breadcrumbs]} /> : null}\n\t\t\t<div className=\"flex flex-col gap-basalt-layout md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-basalt-space-lg\">\n\t\t\t\t\t<h1\n\t\t\t\t\t\tid={titleId}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"font-basalt-display font-semibold tracking-tight text-basalt-foreground [overflow-wrap:anywhere]\",\n\t\t\t\t\t\t\tsize === \"md\" && \"text-basalt-3xl\",\n\t\t\t\t\t\t\tsize === \"lg\" && \"text-basalt-4xl\",\n\t\t\t\t\t\t\tsize === \"xl\" && \"text-basalt-4xl md:text-basalt-5xl\",\n\t\t\t\t\t\t\t\"leading-basalt-tight\",\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</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"max-w-[65ch] text-basalt-muted-foreground [overflow-wrap:anywhere]\",\n\t\t\t\t\t\t\t\tsize === \"md\" ? \"text-basalt-base\" : \"text-basalt-lg leading-basalt-relaxed\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex 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{filters ? (\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-basalt-space-lg\">{filters}</div>\n\t\t\t) : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AA0BA,SAAgBC,EAAW,EAC1B,YACA,gBACA,gBACA,YACA,UAAO,MACP,YACmB;CACnB,IAAMC,IAAUF,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EACC,mBAAiBE;EACjB,WAAWC,EAAGC,GAAiB,wCAAwC;EAFxE,UAAA;GAIEC,KAAeA,EAAY,SAAS,IAAI,kBAACC,GAAD,EAAa,OAAO,CAAC,GAAGD,CAAW,EAAI,CAAA,IAAI;GACpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MACC,IAAIH;MACJ,WAAWC,EACV,oGACAI,MAAS,QAAQ,mBACjBA,MAAS,QAAQ,mBACjBA,MAAS,QAAQ,sCACjB,sBACD;MAEC,UAAAC;KACE,CAAA,GACHC,IACA,kBAAC,KAAD;MACC,WAAWN,EACV,sEACAI,MAAS,OAAO,qBAAqB,uCACtC;MAEC,UAAAE;KACC,CAAA,IACA,IACA;IACJ,CAAA,GAAAC,IACA,kBAAC,OAAD;KAAK,WAAU;KACb,UAAAA;IACG,CAAA,IACF,IACA;;GACJC,IACA,kBAAC,OAAD;IAAK,WAAU;IAAmD,UAAAA;GAAa,CAAA,IAC5E;EACG;;AAEV"}
+{"version":3,"file":"page-header.js","names":["React","PageHeader","titleId","cn","BASALT_UI_CLASS","breadcrumbs","Breadcrumbs","title","description","actions","filters"],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** Page preset; all presets share the same title and description scale. @default \"md\" */\n\tsize?: \"md\" | \"lg\" | \"xl\";\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Right-side title-row actions. Put the create button last. */\n\tactions?: React.ReactNode;\n\t/** Own-row filters. Keep short filters in actions. */\n\tfilters?: React.ReactNode;\n}\n\nexport function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header\n\t\t\taria-labelledby={titleId}\n\t\t\tclassName={cn(BASALT_UI_CLASS, \"min-w-0 shrink-0 space-y-basalt-layout\")}\n\t\t>\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? <Breadcrumbs items={[...breadcrumbs]} /> : null}\n\t\t\t<div className=\"flex flex-col gap-basalt-layout md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-basalt-space-lg\">\n\t\t\t\t\t<h1\n\t\t\t\t\t\tid={titleId}\n\t\t\t\t\t\tclassName=\"font-basalt-display text-basalt-3xl font-semibold leading-basalt-tight tracking-tight text-basalt-foreground [overflow-wrap:anywhere]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p className=\"max-w-[65ch] text-basalt-base leading-basalt-relaxed text-basalt-muted-foreground [overflow-wrap:anywhere]\">\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex 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{filters ? (\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-basalt-space-lg\">{filters}</div>\n\t\t\t) : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AA0BA,SAAgBC,EAAW,EAAE,YAAS,gBAAa,gBAAa,YAAS,YAA0B;CAClG,IAAMC,IAAUF,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EACC,mBAAiBE;EACjB,WAAWC,EAAGC,GAAiB,wCAAwC;EAFxE,UAAA;GAIEC,KAAeA,EAAY,SAAS,IAAI,kBAACC,GAAD,EAAa,OAAO,CAAC,GAAGD,CAAW,EAAI,CAAA,IAAI;GACpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MACC,IAAIH;MACJ,WAAU;MAET,UAAAK;KACE,CAAA,GACHC,IACA,kBAAC,KAAD;MAAG,WAAU;MACX,UAAAA;KACC,CAAA,IACA,IACA;IACJ,CAAA,GAAAC,IACA,kBAAC,OAAD;KAAK,WAAU;KACb,UAAAA;IACG,CAAA,IACF,IACA;;GACJC,IACA,kBAAC,OAAD;IAAK,WAAU;IAAmD,UAAAA;GAAa,CAAA,IAC5E;EACG;;AAEV"}

package/dist/components/recommendation-card.js

@@ -38,7 +38,7 @@ function _({ title: c = "Recommended action", className: _, ...v }) {
 				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",
+				className: "basalt-agent-reveal whitespace-pre-wrap break-words text-basalt-base 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",
@@ -71,7 +71,7 @@ function _({ title: c = "Recommended action", className: _, ...v }) {
 								},
 								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",
+									className: "min-w-0 flex-1 break-words text-basalt-base",
 									children: e.label
 								}), /* @__PURE__ */ m(g, { value: e.confidence })]
 							}, e.id))

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

@@ -1 +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"}
+{"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-base 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-base\">\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/responsive-master-detail.js

@@ -43,7 +43,7 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			tabIndex: -1,
 			hidden: x && p,
 			inert: x && p,
-			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"),
+			className: e("basalt-focus basalt-focus-inset min-h-0 min-w-0 md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border", p && "hidden md:block"),
 			onFocusCapture: (e) => {
 				e.target !== e.currentTarget && (T.current = e.target);
 			},
@@ -58,7 +58,7 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			tabIndex: -1,
 			hidden: x && !p,
 			inert: x && !p,
-			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"),
+			className: e("basalt-focus basalt-focus-inset min-h-0 min-w-0 bg-basalt-background 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-basalt-space-lg",

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

@@ -1 +1 @@
-{"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"}
+{"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\"basalt-focus basalt-focus-inset min-h-0 min-w-0 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\"basalt-focus basalt-focus-inset min-h-0 min-w-0 bg-basalt-background 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,kIACAJ,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,mHACA,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

@@ -33,7 +33,7 @@ var s = t.forwardRef(({ "aria-describedby": t, "aria-label": a, "aria-labelledby
 				role: y,
 				tabIndex: p,
 				onScroll: u,
-				className: e("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", d === "vertical" && "overflow-x-hidden!", d === "horizontal" && "overflow-y-hidden!", m),
+				className: e("basalt-focus basalt-focus-inset size-full rounded-[inherit]", d === "vertical" && "overflow-x-hidden!", d === "horizontal" && "overflow-y-hidden!", m),
 				children: c
 			}),
 			_ ? /* @__PURE__ */ n(o, { orientation: "vertical" }) : null,

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

@@ -1 +1 @@
-{"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"}
+{"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\"basalt-focus basalt-focus-inset size-full rounded-[inherit]\",\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,+DACAC,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.js

@@ -15,7 +15,7 @@ function l({ title: l, hint: u, actions: d, className: f, children: p, variant:
 				/* @__PURE__ */ c("div", {
 					className: "flex min-w-0 max-w-full items-center gap-basalt-space-md",
 					children: [/* @__PURE__ */ s("h2", {
-						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",
+						className: m === "heading" ? "font-basalt-display text-basalt-xl 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,

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

@@ -1 +1 @@
-{"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"}
+{"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-xl 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,oHACA;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

@@ -20,7 +20,7 @@ var o = r.forwardRef(({ allOption: o, className: s, disabled: c = !1, legend: l,
 			children: l
 		}), /* @__PURE__ */ i("div", {
 			"data-slot": "segment-control-viewport",
-			className: "max-w-full overflow-x-auto pb-basalt-space-sm",
+			className: "max-w-full scroll-p-basalt-space-sm overflow-x-auto p-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":["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"}
+{"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 scroll-p-basalt-space-sm overflow-x-auto p-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

@@ -17,7 +17,7 @@ var f = d.Root, p = d.Value, m = d.Group, h = {
 	...f,
 	disabled: s || o,
 	"aria-busy": o || void 0,
-	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)),
+	className: t(e("group/select flex w-full items-center justify-between gap-basalt-control-gap", 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"
@@ -49,7 +49,7 @@ 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 outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
+	className: r(e("relative data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
 	...i,
 	children: [/* @__PURE__ */ l(d.ItemText, {
 		className: "min-w-0 flex-1",

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["React","SelectPrimitive","Select","SelectValue","SelectGroup","SELECT_SIZE_CLASS","SelectTrigger","props","disabled","loading","controlSurfaceClass","cn","size","FOCUS_BORDER","className","children","ChevronDown","SelectLabel","SelectContent","highlightRef","useHoverHighlight","overlayPanelClass","position","SelectItem","overlayItemClass","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { FOCUS_BORDER, OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type SelectProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled value of the select.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value of the select.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Select: React.FC<SelectProps> = SelectPrimitive.Root;\n\nexport type SelectValueProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n\t\"placeholder\"\n> & {\n\t/**\n\t * Content shown when no value is selected.\n\t */\n\tplaceholder?: React.ReactNode;\n};\nexport const SelectValue: React.ForwardRefExoticComponent<\n\tSelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>\n> = SelectPrimitive.Value;\n\ntype RadixSelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\nexport type SelectGroupProps = Omit<RadixSelectGroupProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Group forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectGroupProps[\"asChild\"];\n};\nexport const SelectGroup: React.ForwardRefExoticComponent<\n\tSelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>\n> = SelectPrimitive.Group;\n\nexport type SelectSize = \"sm\" | \"default\" | \"lg\";\n\nconst SELECT_SIZE_CLASS: Record<SelectSize, string> = {\n\tsm: \"basalt-action basalt-action-sm\",\n\tdefault: \"basalt-action\",\n\tlg: \"basalt-action basalt-action-lg\",\n};\n\nexport type SelectTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n\t\"disabled\"\n> & {\n\t/**\n\t * The visual size of the trigger.\n\t * @default default\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Disable the trigger and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Disable the trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const SelectTrigger = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(({ className, children, size = \"default\", loading = false, disabled = false, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\t{...props}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t\tclassName={controlSurfaceClass(\n\t\t\tcn(\n\t\t\t\t\"group/select flex w-full items-center justify-between\",\n\t\t\t\tSELECT_SIZE_CLASS[size],\n\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t>\n\t\t{children}\n\t\t<ChevronDown\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"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\"\n\t\t/>\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\ntype RadixSelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\nexport type SelectLabelProps = Omit<RadixSelectLabelProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Label forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectLabelProps[\"asChild\"];\n};\n\nexport const SelectLabel = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Label>,\n\tSelectLabelProps\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"px-basalt-space-lg py-basalt-space-md text-basalt-sm text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n\t\"position\" | \"sideOffset\"\n> & {\n\t/**\n\t * The positioning mode for the select content.\n\t * @default popper\n\t */\n\tposition?: \"item-aligned\" | \"popper\";\n\t/**\n\t * The distance between the trigger and the select content.\n\t * @default 4\n\t */\n\tsideOffset?: number;\n};\n\nexport const SelectContent = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = OVERLAY_GAP, ...props }, ref) => {\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tposition={position}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(\n\t\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectPrimitive.Viewport ref={highlightRef} className=\"basalt-hover-list\">\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t);\n});\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the select item.\n\t */\n\tvalue: string;\n};\n\nexport const SelectItem = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText className=\"min-w-0 flex-1\">{children}</SelectPrimitive.ItemText>\n\t\t<span className=\"inline-flex w-basalt-icon shrink-0 justify-end\">\n\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t<Check className=\"size-basalt-icon\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</span>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;;AAyBA,IAAaE,IAAgCD,EAAgB,MAWhDE,IAETF,EAAgB,OAWPG,IAETH,EAAgB,OAIdI,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBaC,IAAgBN,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAGO,KAAS,MAC1F,kBAACN,EAAgB,SAAjB;CACM;CACL,GAAIM;CACJ,UAAUC,KAAYC;CACtB,aAAWA,KAAW,KAAA;CACtB,WAAWC,EACVC,EACC,yDACAN,EAAkBO,IAClBC,GACA,+FACAC,CACD,CACD;CAbD,UAAA,CAeEC,GACD,kBAACC,GAAD;EACC,eAAY;EACZ,WAAU;CACV,CAAA,CACuB;AACzB,CAAA,CAAA;AACD,EAAc,cAAcf,EAAgB,QAAQ;AAYpD,IAAagB,IAAcjB,EAAM,YAG9B,EAAE,cAAW,GAAGO,KAAS,MAC3B,kBAACN,EAAgB,OAAjB;CACM;CACL,WAAWU,EACV,qFACAG,CACD;CACA,GAAIP;AACJ,CAAA,CACD;AACD,EAAY,cAAcN,EAAgB,MAAM;AAkBhD,IAAaiB,IAAgBlB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAGO,KAAS,MAAQ;CAC5F,IAAMY,IAAeC,EAAkB;CACvC,OACC,kBAACnB,EAAgB,QAAjB,EAAA,UACC,kBAACA,EAAgB,SAAjB;EACM;EACK;EACE;EACZ,WAAWoB,EACVV,EAAGW,MAAa,YAAY,yCAAyCR,CAAS,CAC/E;EACA,GAAIP;EAEJ,UAAA,kBAACN,EAAgB,UAAjB;GAA0B,KAAKkB;GAAc,WAAU;GACrD;EACwB,CAAA;CACF,CAAA,EACF,CAAA;AAE1B,CAAC;AACD,EAAc,cAAclB,EAAgB,QAAQ;AAYpD,IAAasB,IAAavB,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAGO,KAAS,MACrC,kBAACN,EAAgB,MAAjB;CACC,0BAAuB;CAClB;CACL,WAAWuB,EACVb,EACC,+HACAG,CACD,CACD;CACA,GAAIP;CATL,UAAA,CAWC,kBAACN,EAAgB,UAAjB;EAA0B,WAAU;EAAkB;CAAmC,CAAA,GACzF,kBAAC,QAAD;EAAM,WAAU;EACf,UAAA,kBAACA,EAAgB,eAAjB,EAAA,UACC,kBAACwB,GAAD,EAAO,WAAU,mBAAoB,CAAA,EACP,CAAA;CAC1B,CAAA,CACe;AACtB,CAAA,CAAA;AACD,EAAW,cAAcxB,EAAgB,KAAK"}
+{"version":3,"file":"select.js","names":["React","SelectPrimitive","Select","SelectValue","SelectGroup","SELECT_SIZE_CLASS","SelectTrigger","props","disabled","loading","controlSurfaceClass","cn","size","FOCUS_BORDER","className","children","ChevronDown","SelectLabel","SelectContent","highlightRef","useHoverHighlight","overlayPanelClass","position","SelectItem","overlayItemClass","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { FOCUS_BORDER, OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type SelectProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled value of the select.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value of the select.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Select: React.FC<SelectProps> = SelectPrimitive.Root;\n\nexport type SelectValueProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n\t\"placeholder\"\n> & {\n\t/**\n\t * Content shown when no value is selected.\n\t */\n\tplaceholder?: React.ReactNode;\n};\nexport const SelectValue: React.ForwardRefExoticComponent<\n\tSelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>\n> = SelectPrimitive.Value;\n\ntype RadixSelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\nexport type SelectGroupProps = Omit<RadixSelectGroupProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Group forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectGroupProps[\"asChild\"];\n};\nexport const SelectGroup: React.ForwardRefExoticComponent<\n\tSelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>\n> = SelectPrimitive.Group;\n\nexport type SelectSize = \"sm\" | \"default\" | \"lg\";\n\nconst SELECT_SIZE_CLASS: Record<SelectSize, string> = {\n\tsm: \"basalt-action basalt-action-sm\",\n\tdefault: \"basalt-action\",\n\tlg: \"basalt-action basalt-action-lg\",\n};\n\nexport type SelectTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n\t\"disabled\"\n> & {\n\t/**\n\t * The visual size of the trigger.\n\t * @default default\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Disable the trigger and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Disable the trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const SelectTrigger = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(({ className, children, size = \"default\", loading = false, disabled = false, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\t{...props}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t\tclassName={controlSurfaceClass(\n\t\t\tcn(\n\t\t\t\t\"group/select flex w-full items-center justify-between gap-basalt-control-gap\",\n\t\t\t\tSELECT_SIZE_CLASS[size],\n\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t>\n\t\t{children}\n\t\t<ChevronDown\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"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\"\n\t\t/>\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\ntype RadixSelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\nexport type SelectLabelProps = Omit<RadixSelectLabelProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Label forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectLabelProps[\"asChild\"];\n};\n\nexport const SelectLabel = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Label>,\n\tSelectLabelProps\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"px-basalt-space-lg py-basalt-space-md text-basalt-sm text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n\t\"position\" | \"sideOffset\"\n> & {\n\t/**\n\t * The positioning mode for the select content.\n\t * @default popper\n\t */\n\tposition?: \"item-aligned\" | \"popper\";\n\t/**\n\t * The distance between the trigger and the select content.\n\t * @default 4\n\t */\n\tsideOffset?: number;\n};\n\nexport const SelectContent = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = OVERLAY_GAP, ...props }, ref) => {\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tposition={position}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(\n\t\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectPrimitive.Viewport ref={highlightRef} className=\"basalt-hover-list\">\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t);\n});\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the select item.\n\t */\n\tvalue: string;\n};\n\nexport const SelectItem = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText className=\"min-w-0 flex-1\">{children}</SelectPrimitive.ItemText>\n\t\t<span className=\"inline-flex w-basalt-icon shrink-0 justify-end\">\n\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t<Check className=\"size-basalt-icon\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</span>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;;AAyBA,IAAaE,IAAgCD,EAAgB,MAWhDE,IAETF,EAAgB,OAWPG,IAETH,EAAgB,OAIdI,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBaC,IAAgBN,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAGO,KAAS,MAC1F,kBAACN,EAAgB,SAAjB;CACM;CACL,GAAIM;CACJ,UAAUC,KAAYC;CACtB,aAAWA,KAAW,KAAA;CACtB,WAAWC,EACVC,EACC,gFACAN,EAAkBO,IAClBC,GACA,+FACAC,CACD,CACD;CAbD,UAAA,CAeEC,GACD,kBAACC,GAAD;EACC,eAAY;EACZ,WAAU;CACV,CAAA,CACuB;AACzB,CAAA,CAAA;AACD,EAAc,cAAcf,EAAgB,QAAQ;AAYpD,IAAagB,IAAcjB,EAAM,YAG9B,EAAE,cAAW,GAAGO,KAAS,MAC3B,kBAACN,EAAgB,OAAjB;CACM;CACL,WAAWU,EACV,qFACAG,CACD;CACA,GAAIP;AACJ,CAAA,CACD;AACD,EAAY,cAAcN,EAAgB,MAAM;AAkBhD,IAAaiB,IAAgBlB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAGO,KAAS,MAAQ;CAC5F,IAAMY,IAAeC,EAAkB;CACvC,OACC,kBAACnB,EAAgB,QAAjB,EAAA,UACC,kBAACA,EAAgB,SAAjB;EACM;EACK;EACE;EACZ,WAAWoB,EACVV,EAAGW,MAAa,YAAY,yCAAyCR,CAAS,CAC/E;EACA,GAAIP;EAEJ,UAAA,kBAACN,EAAgB,UAAjB;GAA0B,KAAKkB;GAAc,WAAU;GACrD;EACwB,CAAA;CACF,CAAA,EACF,CAAA;AAE1B,CAAC;AACD,EAAc,cAAclB,EAAgB,QAAQ;AAYpD,IAAasB,IAAavB,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAGO,KAAS,MACrC,kBAACN,EAAgB,MAAjB;CACC,0BAAuB;CAClB;CACL,WAAWuB,EACVb,EACC,gHACAG,CACD,CACD;CACA,GAAIP;CATL,UAAA,CAWC,kBAACN,EAAgB,UAAjB;EAA0B,WAAU;EAAkB;CAAmC,CAAA,GACzF,kBAAC,QAAD;EAAM,WAAU;EACf,UAAA,kBAACA,EAAgB,eAAjB,EAAA,UACC,kBAACwB,GAAD,EAAO,WAAU,mBAAoB,CAAA,EACP,CAAA;CAC1B,CAAA,CACe;AACtB,CAAA,CAAA;AACD,EAAW,cAAcxB,EAAgB,KAAK"}

package/dist/components/sensitive-input.js

@@ -10,7 +10,7 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
 var l = i.forwardRef(({ className: l, revealLabel: u, hideLabel: d, disabled: f, size: p = "default", passwordManagerIgnore: m = !1, ...h }, g) => {
 	let [_, v] = i.useState(!1);
 	return /* @__PURE__ */ c("div", {
-		className: t("flex focus-within:border-basalt-ring has-[input[aria-invalid=true]]:border-basalt-destructive"),
+		className: t("basalt-focus-group flex has-[input[aria-invalid=true]]:border-basalt-destructive"),
 		children: [/* @__PURE__ */ s(r, {
 			ref: g,
 			type: _ ? "text" : "password",

package/dist/components/sensitive-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input.js","names":["React","SensitiveInput","props","revealed","setRevealed","controlSurfaceClass","Input","cn","className","Button","size","hideLabel","revealLabel","value","jsx","EyeOff","Eye"],"sources":["../../src/components/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nexport type SensitiveInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * Accessible label for the reveal action.\n\t */\n\trevealLabel: string;\n\t/**\n\t * Accessible label for the hide action.\n\t */\n\thideLabel: string;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const SensitiveInput = React.forwardRef<HTMLInputElement, SensitiveInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\trevealLabel,\n\t\t\thideLabel,\n\t\t\tdisabled,\n\t\t\tsize = \"default\",\n\t\t\tpasswordManagerIgnore = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [revealed, setRevealed] = React.useState(false);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\t\"flex focus-within:border-basalt-ring has-[input[aria-invalid=true]]:border-basalt-destructive\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={revealed ? \"text\" : \"password\"}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tpasswordManagerIgnore={passwordManagerIgnore}\n\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 border-0 bg-transparent shadow-none\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize={size === \"default\" ? \"icon\" : size}\n\t\t\t\t\tclassName=\"basalt-action-icon basalt-action-inset shrink-0\"\n\t\t\t\t\taria-label={revealed ? hideLabel : revealLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => setRevealed((value) => !value)}\n\t\t\t\t>\n\t\t\t\t\t{revealed ? (\n\t\t\t\t\t\t<EyeOff className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\t},\n);\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":";;;;;;;;;AA4BA,IAAaC,IAAiBD,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAGE,KAEJ,MACI;CACJ,IAAM,CAACC,GAAUC,KAAeJ,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EACC,WAAWK,EACV,+FACD;EAHD,UAAA,CAKC,kBAACC,GAAD;GACM;GACL,MAAMH,IAAW,SAAS;GACpB;GACiB;GACvB,WAAWI,EAAG,sDAAsDC,CAAS;GACnE;GACV,GAAIN;EACJ,CAAA,GACD,kBAACO,GAAD;GACC,MAAK;GACL,SAAQ;GACR,MAAMC,MAAS,YAAY,SAASA;GACpC,WAAU;GACV,cAAYP,IAAWQ,IAAYC;GACzB;GACV,eAAeR,GAAa,MAAU,CAACS,CAAK;GAE3C,UACAC,EADAX,IACCY,IAEAC,GAFD;IAAQ,WAAU;IAAwB,eAAY;GAAQ,CAEH;EAErD,CAAA,CACJ;;AAEP,CACD;AACA,EAAe,cAAc"}
+{"version":3,"file":"sensitive-input.js","names":["React","SensitiveInput","props","revealed","setRevealed","controlSurfaceClass","Input","cn","className","Button","size","hideLabel","revealLabel","value","jsx","EyeOff","Eye"],"sources":["../../src/components/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nexport type SensitiveInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * Accessible label for the reveal action.\n\t */\n\trevealLabel: string;\n\t/**\n\t * Accessible label for the hide action.\n\t */\n\thideLabel: string;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const SensitiveInput = React.forwardRef<HTMLInputElement, SensitiveInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\trevealLabel,\n\t\t\thideLabel,\n\t\t\tdisabled,\n\t\t\tsize = \"default\",\n\t\t\tpasswordManagerIgnore = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [revealed, setRevealed] = React.useState(false);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\t\"basalt-focus-group flex has-[input[aria-invalid=true]]:border-basalt-destructive\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={revealed ? \"text\" : \"password\"}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tpasswordManagerIgnore={passwordManagerIgnore}\n\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 border-0 bg-transparent shadow-none\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize={size === \"default\" ? \"icon\" : size}\n\t\t\t\t\tclassName=\"basalt-action-icon basalt-action-inset shrink-0\"\n\t\t\t\t\taria-label={revealed ? hideLabel : revealLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => setRevealed((value) => !value)}\n\t\t\t\t>\n\t\t\t\t\t{revealed ? (\n\t\t\t\t\t\t<EyeOff className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\t},\n);\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":";;;;;;;;;AA4BA,IAAaC,IAAiBD,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAGE,KAEJ,MACI;CACJ,IAAM,CAACC,GAAUC,KAAeJ,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EACC,WAAWK,EACV,kFACD;EAHD,UAAA,CAKC,kBAACC,GAAD;GACM;GACL,MAAMH,IAAW,SAAS;GACpB;GACiB;GACvB,WAAWI,EAAG,sDAAsDC,CAAS;GACnE;GACV,GAAIN;EACJ,CAAA,GACD,kBAACO,GAAD;GACC,MAAK;GACL,SAAQ;GACR,MAAMC,MAAS,YAAY,SAASA;GACpC,WAAU;GACV,cAAYP,IAAWQ,IAAYC;GACzB;GACV,eAAeR,GAAa,MAAU,CAACS,CAAK;GAE3C,UACAC,EADAX,IACCY,IAEAC,GAFD;IAAQ,WAAU;IAAwB,eAAY;GAAQ,CAEH;EAErD,CAAA,CACJ;;AAEP,CACD;AACA,EAAe,cAAc"}

package/dist/components/sheet.js

@@ -8,7 +8,7 @@ import * as s from "@radix-ui/react-dialog";
 //#region src/components/sheet.tsx
 var c = s.Root, l = s.Trigger, u = s.Close, d = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Title, {
 	ref: r,
-	className: e("text-basalt-lg font-semibold leading-basalt-tight tracking-tight", t),
+	className: e("text-basalt-xl font-semibold leading-basalt-tight tracking-tight", t),
 	...n
 }));
 d.displayName = s.Title.displayName;
@@ -44,12 +44,12 @@ var p = {
 }));
 m.displayName = "SheetContent";
 var h = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: e("flex flex-col space-y-basalt-space-lg text-left", t),
+	className: e("flex flex-col space-y-basalt-space-md text-left", t),
 	...n
 });
 h.displayName = "SheetHeader";
 var g = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: e("flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end", t),
+	className: e("mt-basalt-layout flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end", t),
 	...n
 });
 g.displayName = "SheetFooter";

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["React","DialogPrimitive","Sheet","SheetTrigger","SheetClose","SheetTitle","props","cn","className","SheetDescription","SIDE","BASALT_UI_CLASS","SheetContent","OVERLAY_LAYER","OVERLAY_MOTION","side","SheetHeader","SheetFooter"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixDialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ntype RadixDialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ntype RadixDialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ntype RadixDialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ntype RadixDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Description\n>;\n\nexport interface SheetProps\n\textends Omit<RadixDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the sheet drawer.\n\t */\n\topen?: RadixDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the sheet on initial render.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixDialogProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when the open state changes.\n\t */\n\tonOpenChange?: RadixDialogProps[\"onOpenChange\"];\n\t/**\n\t * Whether the sheet renders modally, preventing outside interaction and hiding background content from screen readers.\n\t * @default true\n\t */\n\tmodal?: RadixDialogProps[\"modal\"];\n}\n\nexport const Sheet: React.FC<SheetProps> = DialogPrimitive.Root;\n\nexport interface SheetTriggerProps extends Omit<RadixDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTriggerProps[\"asChild\"];\n}\n\nexport const SheetTrigger = DialogPrimitive.Trigger;\n\nexport interface SheetCloseProps extends Omit<RadixDialogCloseProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Close forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogCloseProps[\"asChild\"];\n}\n\nexport const SheetClose = DialogPrimitive.Close;\n\nexport interface SheetTitleProps extends Omit<RadixDialogTitleProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered heading element to the child element, merging props and behavior.\n\t * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTitleProps[\"asChild\"];\n}\n\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tSheetTitleProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-basalt-lg font-semibold leading-basalt-tight tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport interface SheetDescriptionProps extends Omit<RadixDialogDescriptionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered paragraph element to the child element, merging props and behavior.\n\t * Description forwards ref to HTMLParagraphElement and inherits native p attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogDescriptionProps[\"asChild\"];\n}\n\nexport const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tSheetDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"text-basalt-base leading-[var(--basalt-line-body)] text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = DialogPrimitive.Description.displayName;\n\nconst SIDE = {\n\tright: `fixed inset-y-0 right-0 ${BASALT_UI_CLASS} flex h-full w-basalt-80 flex-col gap-basalt-space-lg border-l border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\tleft: `fixed inset-y-0 left-0 ${BASALT_UI_CLASS} flex h-full w-basalt-80 flex-col gap-basalt-space-lg border-r border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\ttop: `fixed inset-x-0 top-0 ${BASALT_UI_CLASS} flex h-basalt-80 w-full flex-col gap-basalt-space-lg border-b border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\tbottom: `fixed inset-x-0 bottom-0 ${BASALT_UI_CLASS} flex h-basalt-80 w-full flex-col gap-basalt-space-lg border-t border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n} as const;\n\nexport type SheetSide = keyof typeof SIDE;\n\nexport interface SheetContentProps\n\textends Omit<\n\t\tRadixDialogContentProps,\n\t\t| \"side\"\n\t\t| \"asChild\"\n\t\t| \"forceMount\"\n\t\t| \"trapFocus\"\n\t\t| \"onOpenAutoFocus\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Edge of the screen where the drawer panel is positioned and anchored.\n\t * @default \"right\"\n\t */\n\tside?: SheetSide;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: RadixDialogContentProps[\"forceMount\"];\n\t/**\n\t * Event handler called when auto-focusing the first element on open. Can be prevented with event.preventDefault().\n\t */\n\tonOpenAutoFocus?: RadixDialogContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().\n\t */\n\tonCloseAutoFocus?: RadixDialogContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().\n\t */\n\tonEscapeKeyDown?: RadixDialogContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Event handler called when a pointer event occurs outside the sheet bounds.\n\t */\n\tonPointerDownOutside?: RadixDialogContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Event handler called when focus moves outside the sheet bounds.\n\t */\n\tonFocusOutside?: RadixDialogContentProps[\"onFocusOutside\"];\n\t/**\n\t * Event handler called when any interaction (pointer or focus) occurs outside the sheet bounds.\n\t */\n\tonInteractOutside?: RadixDialogContentProps[\"onInteractOutside\"];\n}\n\nexport const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tSheetContentProps\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal forceMount={props.forceMount}>\n\t\t<DialogPrimitive.Overlay\n\t\t\tforceMount={props.forceMount}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-sheet-overlay fixed inset-0 bg-basalt-backdrop/50\",\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t)}\n\t\t/>\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-sheet=\"\"\n\t\t\tdata-side={side}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={cn(OVERLAY_LAYER, OVERLAY_MOTION, \"max-h-dvh max-w-full\", SIDE[side], className)}\n\t\t\t{...props}\n\t\t\tstyle={{ boxSizing: \"border-box\", ...props.style }}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPrimitive.Portal>\n));\nSheetContent.displayName = \"SheetContent\";\n\nexport interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetHeader = ({ className, ...props }: SheetHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-basalt-space-lg text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetFooter = ({ className, ...props }: SheetFooterProps) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nSheetFooter.displayName = \"SheetFooter\";\n"],"mappings":";;;;;;;;AAqCA,IAAaE,IAA8BD,EAAgB,MAW9CE,IAAeF,EAAgB,SAW/BG,IAAaH,EAAgB,OAW7BI,IAAaL,EAAM,YAG7B,EAAE,cAAW,GAAGM,KAAS,MAC3B,kBAACL,EAAgB,OAAjB;CACM;CACL,WAAWM,EAAG,oEAAoEC,CAAS;CAC3F,GAAIF;AACJ,CAAA,CACD;AACD,EAAW,cAAcL,EAAgB,MAAM;AAW/C,IAAaQ,IAAmBT,EAAM,YAGnC,EAAE,cAAW,GAAGM,KAAS,MAC3B,kBAACL,EAAgB,aAAjB;CACM;CACL,WAAWM,EACV,mFACAC,CACD;CACA,GAAIF;AACJ,CAAA,CACD;AACD,EAAiB,cAAcL,EAAgB,YAAY;AAE3D,IAAMS,IAAO;CACZ,OAAO,2BAA2BC,EAAgB;CAClD,MAAM,0BAA0BA,EAAgB;CAChD,KAAK,yBAAyBA,EAAgB;CAC9C,QAAQ,4BAA4BA,EAAgB;AACrD,GA8DaC,IAAeZ,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAGM,KAAS,MACrD,kBAACL,EAAgB,QAAjB;CAAwB,YAAYK,EAAM;CAA1C,UAAA,CACC,kBAACL,EAAgB,SAAjB;EACC,YAAYK,EAAM;EAClB,WAAWC,EACV,4DACAM,GACAC,CACD;CACA,CAAA,GACD,kBAACb,EAAgB,SAAjB;EACM;EACL,qBAAkB;EAClB,aAAWc;EACX,4BAAyB;EACzB,WAAWR,EAAGM,GAAeC,GAAgB,wBAAwBJ,EAAKK,IAAOP,CAAS;EAC1F,GAAIF;EACJ,OAAO;GAAE,WAAW;GAAc,GAAGA,EAAM;EAAM;EAEhD;CACuB,CAAA,CACF;AACxB,CAAA,CAAA;AACD,EAAa,cAAc;AAI3B,IAAaU,KAAe,EAAE,cAAW,GAAGV,QAC3C,kBAAC,OAAD;CAAK,WAAWC,EAAG,mDAAmDC,CAAS;CAAG,GAAIF;AAAQ,CAAA;AAE/F,EAAY,cAAc;AAI1B,IAAaW,KAAe,EAAE,cAAW,GAAGX,QAC3C,kBAAC,OAAD;CACC,WAAWC,EACV,wEACAC,CACD;CACA,GAAIF;AACJ,CAAA;AAEF,EAAY,cAAc"}
+{"version":3,"file":"sheet.js","names":["React","DialogPrimitive","Sheet","SheetTrigger","SheetClose","SheetTitle","props","cn","className","SheetDescription","SIDE","BASALT_UI_CLASS","SheetContent","OVERLAY_LAYER","OVERLAY_MOTION","side","SheetHeader","SheetFooter"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixDialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ntype RadixDialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ntype RadixDialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ntype RadixDialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ntype RadixDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Description\n>;\n\nexport interface SheetProps\n\textends Omit<RadixDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the sheet drawer.\n\t */\n\topen?: RadixDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the sheet on initial render.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixDialogProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when the open state changes.\n\t */\n\tonOpenChange?: RadixDialogProps[\"onOpenChange\"];\n\t/**\n\t * Whether the sheet renders modally, preventing outside interaction and hiding background content from screen readers.\n\t * @default true\n\t */\n\tmodal?: RadixDialogProps[\"modal\"];\n}\n\nexport const Sheet: React.FC<SheetProps> = DialogPrimitive.Root;\n\nexport interface SheetTriggerProps extends Omit<RadixDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTriggerProps[\"asChild\"];\n}\n\nexport const SheetTrigger = DialogPrimitive.Trigger;\n\nexport interface SheetCloseProps extends Omit<RadixDialogCloseProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Close forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogCloseProps[\"asChild\"];\n}\n\nexport const SheetClose = DialogPrimitive.Close;\n\nexport interface SheetTitleProps extends Omit<RadixDialogTitleProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered heading element to the child element, merging props and behavior.\n\t * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTitleProps[\"asChild\"];\n}\n\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tSheetTitleProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-basalt-xl font-semibold leading-basalt-tight tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport interface SheetDescriptionProps extends Omit<RadixDialogDescriptionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered paragraph element to the child element, merging props and behavior.\n\t * Description forwards ref to HTMLParagraphElement and inherits native p attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogDescriptionProps[\"asChild\"];\n}\n\nexport const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tSheetDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"text-basalt-base leading-[var(--basalt-line-body)] text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = DialogPrimitive.Description.displayName;\n\nconst SIDE = {\n\tright: `fixed inset-y-0 right-0 ${BASALT_UI_CLASS} flex h-full w-basalt-80 flex-col gap-basalt-space-lg border-l border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\tleft: `fixed inset-y-0 left-0 ${BASALT_UI_CLASS} flex h-full w-basalt-80 flex-col gap-basalt-space-lg border-r border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\ttop: `fixed inset-x-0 top-0 ${BASALT_UI_CLASS} flex h-basalt-80 w-full flex-col gap-basalt-space-lg border-b border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n\tbottom: `fixed inset-x-0 bottom-0 ${BASALT_UI_CLASS} flex h-basalt-80 w-full flex-col gap-basalt-space-lg border-t border-basalt-border p-basalt-card sm:p-basalt-card-lg text-basalt-base text-basalt-foreground shadow-lg`,\n} as const;\n\nexport type SheetSide = keyof typeof SIDE;\n\nexport interface SheetContentProps\n\textends Omit<\n\t\tRadixDialogContentProps,\n\t\t| \"side\"\n\t\t| \"asChild\"\n\t\t| \"forceMount\"\n\t\t| \"trapFocus\"\n\t\t| \"onOpenAutoFocus\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Edge of the screen where the drawer panel is positioned and anchored.\n\t * @default \"right\"\n\t */\n\tside?: SheetSide;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: RadixDialogContentProps[\"forceMount\"];\n\t/**\n\t * Event handler called when auto-focusing the first element on open. Can be prevented with event.preventDefault().\n\t */\n\tonOpenAutoFocus?: RadixDialogContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().\n\t */\n\tonCloseAutoFocus?: RadixDialogContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().\n\t */\n\tonEscapeKeyDown?: RadixDialogContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Event handler called when a pointer event occurs outside the sheet bounds.\n\t */\n\tonPointerDownOutside?: RadixDialogContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Event handler called when focus moves outside the sheet bounds.\n\t */\n\tonFocusOutside?: RadixDialogContentProps[\"onFocusOutside\"];\n\t/**\n\t * Event handler called when any interaction (pointer or focus) occurs outside the sheet bounds.\n\t */\n\tonInteractOutside?: RadixDialogContentProps[\"onInteractOutside\"];\n}\n\nexport const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tSheetContentProps\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal forceMount={props.forceMount}>\n\t\t<DialogPrimitive.Overlay\n\t\t\tforceMount={props.forceMount}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-sheet-overlay fixed inset-0 bg-basalt-backdrop/50\",\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t)}\n\t\t/>\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-sheet=\"\"\n\t\t\tdata-side={side}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={cn(OVERLAY_LAYER, OVERLAY_MOTION, \"max-h-dvh max-w-full\", SIDE[side], className)}\n\t\t\t{...props}\n\t\t\tstyle={{ boxSizing: \"border-box\", ...props.style }}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPrimitive.Portal>\n));\nSheetContent.displayName = \"SheetContent\";\n\nexport interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetHeader = ({ className, ...props }: SheetHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-basalt-space-md text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const SheetFooter = ({ className, ...props }: SheetFooterProps) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"mt-basalt-layout flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nSheetFooter.displayName = \"SheetFooter\";\n"],"mappings":";;;;;;;;AAqCA,IAAaE,IAA8BD,EAAgB,MAW9CE,IAAeF,EAAgB,SAW/BG,IAAaH,EAAgB,OAW7BI,IAAaL,EAAM,YAG7B,EAAE,cAAW,GAAGM,KAAS,MAC3B,kBAACL,EAAgB,OAAjB;CACM;CACL,WAAWM,EAAG,oEAAoEC,CAAS;CAC3F,GAAIF;AACJ,CAAA,CACD;AACD,EAAW,cAAcL,EAAgB,MAAM;AAW/C,IAAaQ,IAAmBT,EAAM,YAGnC,EAAE,cAAW,GAAGM,KAAS,MAC3B,kBAACL,EAAgB,aAAjB;CACM;CACL,WAAWM,EACV,mFACAC,CACD;CACA,GAAIF;AACJ,CAAA,CACD;AACD,EAAiB,cAAcL,EAAgB,YAAY;AAE3D,IAAMS,IAAO;CACZ,OAAO,2BAA2BC,EAAgB;CAClD,MAAM,0BAA0BA,EAAgB;CAChD,KAAK,yBAAyBA,EAAgB;CAC9C,QAAQ,4BAA4BA,EAAgB;AACrD,GA8DaC,IAAeZ,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAGM,KAAS,MACrD,kBAACL,EAAgB,QAAjB;CAAwB,YAAYK,EAAM;CAA1C,UAAA,CACC,kBAACL,EAAgB,SAAjB;EACC,YAAYK,EAAM;EAClB,WAAWC,EACV,4DACAM,GACAC,CACD;CACA,CAAA,GACD,kBAACb,EAAgB,SAAjB;EACM;EACL,qBAAkB;EAClB,aAAWc;EACX,4BAAyB;EACzB,WAAWR,EAAGM,GAAeC,GAAgB,wBAAwBJ,EAAKK,IAAOP,CAAS;EAC1F,GAAIF;EACJ,OAAO;GAAE,WAAW;GAAc,GAAGA,EAAM;EAAM;EAEhD;CACuB,CAAA,CACF;AACxB,CAAA,CAAA;AACD,EAAa,cAAc;AAI3B,IAAaU,KAAe,EAAE,cAAW,GAAGV,QAC3C,kBAAC,OAAD;CAAK,WAAWC,EAAG,mDAAmDC,CAAS;CAAG,GAAIF;AAAQ,CAAA;AAE/F,EAAY,cAAc;AAI1B,IAAaW,KAAe,EAAE,cAAW,GAAGX,QAC3C,kBAAC,OAAD;CACC,WAAWC,EACV,yFACAC,CACD;CACA,GAAIF;AACJ,CAAA;AAEF,EAAY,cAAc"}

package/dist/components/sidebar.js

@@ -163,7 +163,7 @@ function F({ shortcut: n = "⌘K", className: r, children: i, ...a }) {
 				children: i
 			}),
 			/* @__PURE__ */ w("kbd", {
-				className: "pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-xs font-medium text-basalt-muted-foreground sm:inline-block",
+				className: "pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-sm font-medium text-basalt-muted-foreground sm:inline-block",
 				children: n
 			})
 		]
@@ -219,7 +219,7 @@ function B({ label: t, defaultOpen: r = !0, children: a }) {
 			children: /* @__PURE__ */ T("button", {
 				type: "button",
 				"data-slot": "sidebar-group-label",
-				className: e("flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-xs font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground", n),
+				className: e("flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-sm font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground", n),
 				children: [/* @__PURE__ */ w("span", {
 					className: "min-w-0 truncate",
 					children: t
@@ -240,7 +240,7 @@ function B({ label: t, defaultOpen: r = !0, children: a }) {
 function V({ className: t, ...n }) {
 	return /* @__PURE__ */ w("div", {
 		"data-slot": "sidebar-footer",
-		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-nav-inset py-basalt-nav-inset", t),
+		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-layout pt-basalt-space-lg pb-basalt-layout", t),
 		...n
 	});
 }