@nocoo/basalt 2.2.0 → 3.1.0

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["React","Table","props","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","TableHead","TableCell","TableCaption"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-sm text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"border-b border-basalt-border p-3 text-left text-xs font-medium text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td className={cn(\"p-3\", className)} {...props} />\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption className={cn(\"mt-2 text-sm text-basalt-muted-foreground\", className)} {...props} />\n\t);\n}\n"],"mappings":";;;;;;AAWA,IAAaC,IAAQD,EAAM,YAGxB,EAAE,cAAW,GAAGE,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAWC,EACVC,GACA,mGACAC,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaI,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIJ,EAAQ,CAAA,GAI9DK,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI1DM,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAgB9DO,KAAY,EACxB,cACA,aAAU,WACV,GAAGP,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeQ,MAAY,cAAoBR,EAAM;CAC1C;AACX,CAAA,GAUWS,KAAa,EACzB,cACA,GAAGT,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,gGACAE,CACD;CACA,GAAIH;AACJ,CAAA,GAUWU,KAAa,EACzB,cACA,GAAGV,QAEH,kBAAC,MAAD;CAAI,WAAWC,EAAG,OAAOE,CAAS;CAAG,GAAIH;AAAQ,CAAA;AAUlD,SAAgBW,EAAa,EAC5B,cACA,GAAGX,KACkE;CACrE,OACC,kBAAC,WAAD;EAAS,WAAWC,EAAG,6CAA6CE,CAAS;EAAG,GAAIH;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"table.js","names":["_Fragment","React","Fragment$1","Table","props","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","textAlignClass","textAlign","TableHead","align","TableCell","TableCaption","SortIcon","sorted","ArrowUp","ArrowDown","ArrowUpDown","trailing","TableSortableHeader","label","icon"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Logical inline alignment. Maps to CSS `text-align: start | end`. */\nexport type TableTextAlign = \"start\" | \"end\";\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-start text-basalt-code leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nfunction textAlignClass(textAlign?: TableTextAlign) {\n\tif (textAlign === \"end\") return \"text-end tabular-nums\";\n\tif (textAlign === \"start\") return \"text-start\";\n}\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted headers keep `text-start` unless native `align` is set.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableHead = ({\n\tclassName,\n\ttextAlign,\n\talign,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle text-basalt-sm font-medium text-basalt-muted-foreground\",\n\t\t\ttextAlignClass(textAlign) ?? (align == null ? \"text-start\" : undefined),\n\t\t\tclassName,\n\t\t)}\n\t\talign={align}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted cells inherit from the table or row. Native HTML `align` is unchanged.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableCell = ({\n\tclassName,\n\ttextAlign,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\ttextAlignClass(textAlign),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\n\t\t\t\t\"px-basalt-panel-x py-basalt-panel-y text-basalt-base text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type TableSortableHeaderProps = {\n\tchildren: React.ReactNode;\n\t/**\n\t * Logical control layout. `end` places the sort icon inward of the label.\n\t * @default \"start\"\n\t */\n\ttextAlign?: TableTextAlign;\n\t/**\n\t * Current sort direction when this column is sorted.\n\t */\n\tsorted?: TableSortDirection;\n\tclassName?: string;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"className\">;\n\nfunction SortIcon({ sorted, trailing }: { sorted?: TableSortDirection; trailing: boolean }) {\n\tconst Icon = sorted === \"asc\" ? ArrowUp : sorted === \"desc\" ? ArrowDown : ArrowUpDown;\n\treturn (\n\t\t<Icon\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"size-basalt-icon-sm shrink-0\",\n\t\t\t\ttrailing && \"ms-auto\",\n\t\t\t\t!sorted &&\n\t\t\t\t\t\"opacity-0 transition-opacity basalt-motion group-hover:opacity-60 group-focus-visible:opacity-60 motion-reduce:transition-none\",\n\t\t\t)}\n\t\t\tstrokeWidth={1.5}\n\t\t/>\n\t);\n}\n\nexport const TableSortableHeader = React.forwardRef<HTMLButtonElement, TableSortableHeaderProps>(\n\t({ children, textAlign = \"start\", sorted, className, ...props }, ref) => {\n\t\tconst label = (\n\t\t\t<span className=\"flex min-w-0 items-center gap-basalt-control-gap truncate\">{children}</span>\n\t\t);\n\t\tconst icon = <SortIcon sorted={sorted} trailing={textAlign !== \"end\"} />;\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex w-full cursor-pointer items-center gap-basalt-control-gap rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary\",\n\t\t\t\t\ttextAlign === \"end\" ? \"justify-end text-end\" : \"text-start\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{textAlign === \"end\" ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nTableSortableHeader.displayName = \"TableSortableHeader\";\n"],"mappings":";;;;;;;AAgBA,IAAaG,IAAQF,EAAM,YAGxB,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAWC,EACVC,GACA,+IACAC,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaI,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIJ,EAAQ,CAAA,GAI9DK,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI1DM,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAgB9DO,KAAY,EACxB,cACA,aAAU,WACV,GAAGP,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeQ,MAAY,cAAoBR,EAAM;CAC1C;AACX,CAAA;AAGF,SAASS,EAAe,GAA4B;CACnD,IAAIC,MAAc,OAAO,OAAO;CAChC,IAAIA,MAAc,SAAS,OAAO;AACnC;AAaA,IAAaC,KAAa,EACzB,cACA,cACA,UACA,GAAGX,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,0MACAQ,EAAeC,CAAS,MAAME,KAAS,OAAO,eAAe,KAAA,IAC7DT,CACD;CACO;CACP,GAAIH;AACJ,CAAA,GAcWa,KAAa,EACzB,cACA,cACA,GAAGb,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,kGACAQ,EAAeC,CAAS,GACxBP,CACD;CACA,GAAIH;AACJ,CAAA;AAUF,SAAgBc,EAAa,EAC5B,cACA,GAAGd,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWC,EACV,qFACAE,CACD;EACA,GAAIH;CACJ,CAAA;AAEH;AAgBA,SAASe,EAAS,EAAE,WAAQ,eAAgE;CAE3F,OACC,kBAFYC,MAAW,QAAQC,IAAUD,MAAW,SAASE,IAAYC,GAEzE;EACC,eAAY;EACZ,WAAWlB,EACV,gCACAmB,KAAY,WACZ,CAACJ,KACA,gIACF;EACA,aAAa;CACb,CAAA;AAEH;AAEA,IAAaK,IAAsBxB,EAAM,YACvC,EAAE,aAAU,eAAY,SAAS,WAAQ,cAAW,GAAGG,KAAS,MAAQ;CACxE,IAAMsB,IACL,kBAAC,QAAD;EAAM,WAAU;EAA6D;CAAe,CAAA,GAEvFC,IAAO,kBAACR,GAAD;EAAkB;EAAQ,UAAUL,MAAc;CAAQ,CAAA;CACvE,OACC,kBAAC,UAAD;EACC,MAAK;EACA;EACL,WAAWT,EACV,wPACAS,MAAc,QAAQ,yBAAyB,cAC/CP,CACD;EACA,GAAIH;EAEH,UAAAU,MAAc,QACd,kBAAAd,GAAA,EAAA,UAAA,CACE2B,GACAD,CACA,EAAA,CAAA,IAEF,kBAAA1B,GAAA,EAAA,UAAA,CACE0B,GACAC,CACA,EAAA,CAAA;CAEI,CAAA;AAEV,CACD;AACA,EAAoB,cAAc"}

package/dist/components/tabs.js

@@ -30,16 +30,17 @@ var u = i.forwardRef(({ className: t, children: n, showIndicator: i = !0, ...l }
 	});
 	return /* @__PURE__ */ o(s.List, {
 		ref: d,
-		className: e("relative flex flex-wrap items-center gap-1 border-b border-basalt-border", t),
+		className: e("relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border", t),
 		...l,
 		children: [n, i ? /* @__PURE__ */ a("span", {
 			"aria-hidden": "true",
 			"data-slot": "selection-indicator",
-			className: e("pointer-events-none absolute h-0.5 bg-basalt-primary", p),
+			className: e("pointer-events-none absolute h-basalt-0_5 bg-basalt-primary", p),
 			style: {
-				left: f.left,
+				left: 0,
+				transform: `translate(${f.left}px, ${f.top}px)`,
 				width: f.visible ? f.width : 0,
-				top: f.top
+				top: 0
 			}
 		}) : null]
 	});
@@ -47,13 +48,13 @@ var u = i.forwardRef(({ className: t, children: n, showIndicator: i = !0, ...l }
 u.displayName = s.List.displayName;
 var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Trigger, {
 	ref: i,
-	className: e("inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-basalt-muted-foreground transition-colors hover:text-basalt-foreground data-[state=active]:text-basalt-primary", n, t),
+	className: e("basalt-action rounded-t-basalt-md inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:bg-basalt-selected data-[state=active]:text-basalt-selected-foreground", n, t),
 	...r
 }));
 d.displayName = s.Trigger.displayName;
 var f = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(s.Content, {
 	ref: i,
-	className: e("mt-3 text-sm text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
+	className: e("mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in", n, t),
 	...r
 }));
 f.displayName = s.Content.displayName;

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["React","TabsPrimitive","measureTabUnderline","item","Tabs","props","cn","BASALT_UI_CLASS","className","TabsList","listRef","useSelectionIndicator","showIndicator","children","motionClassName","state","TabsTrigger","OVERLAY_MOTION","TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-1 border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\"pointer-events-none absolute h-0.5 bg-basalt-primary\", motionClassName)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: state.left,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: state.top,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-basalt-muted-foreground transition-colors hover:text-basalt-foreground data-[state=active]:text-basalt-primary\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-3 text-sm text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAASE,EAAoB,GAK3B;CACD,OAAO;EACN,MAAMC,EAAK;EACX,OAAOA,EAAK;EACZ,KAAKA,EAAK,YAAYA,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAaC,IAA4BJ,EAAM,YAG5C,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,MAAf;CAAyB;CAAK,WAAWK,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CACrF;AACD,EAAK,cAAcJ,EAAc,KAAK;AAUtC,IAAaQ,IAAWT,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAGK,KAAS,MAAQ;CACnE,IAAM,EACL,KAAKK,GACL,UACA,uBACGC,EAAsB;EACzB,cAAc;EACd,SAASC;EACT,aAAaV;EACb;CACD,CAAC;CAED,OACC,kBAACD,EAAc,MAAf;EACC,KAAKS;EACL,WAAWJ,EACV,4EACAE,CACD;EACA,GAAIH;EANL,UAAA,CAQEQ,GACAD,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAWN,EAAG,wDAAwDQ,CAAe;GACrF,OAAO;IACN,MAAMC,EAAM;IACZ,OAAOA,EAAM,UAAUA,EAAM,QAAQ;IACrC,KAAKA,EAAM;GACZ;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAcd,EAAc,KAAK;AAiB1C,IAAae,IAAchB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,6LACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ;AAYhD,IAAaiB,IAAclB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,iFACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ"}
+{"version":3,"file":"tabs.js","names":["React","TabsPrimitive","measureTabUnderline","item","Tabs","props","cn","BASALT_UI_CLASS","className","TabsList","listRef","useSelectionIndicator","showIndicator","children","motionClassName","state","TabsTrigger","OVERLAY_MOTION","TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { OVERLAY_MOTION } from \"./overlay\";\n\nfunction measureTabUnderline(item: HTMLElement): {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n} {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop + item.offsetHeight,\n\t\theight: 0,\n\t};\n}\n\nexport type TabsProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled selected tab.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial tab.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected tab changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Tabs: React.FC<TabsProps> = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Root>,\n\tTabsProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Root ref={ref} className={cn(BASALT_UI_CLASS, className)} {...props} />\n));\nTabs.displayName = TabsPrimitive.Root.displayName;\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n\t/**\n\t * Show the sliding active underline.\n\t * @default true\n\t */\n\tshowIndicator?: boolean;\n};\n\nexport const TabsList = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.List>,\n\tTabsListProps\n>(({ className, children, showIndicator = true, ...props }, ref) => {\n\tconst {\n\t\tref: listRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\titemSelector: '[role=\"tab\"][data-state=\"active\"]',\n\t\tenabled: showIndicator,\n\t\tmapGeometry: measureTabUnderline,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-wrap items-center gap-basalt-space-sm border-b border-basalt-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showIndicator ? (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute h-basalt-0_5 bg-basalt-primary\",\n\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</TabsPrimitive.List>\n\t);\n});\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nexport type TabsTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n\t\"disabled\" | \"value\"\n> & {\n\t/**\n\t * The tab value.\n\t */\n\tvalue: string;\n\t/**\n\t * Disable the tab trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const TabsTrigger = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Trigger>,\n\tTabsTriggerProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"basalt-action rounded-t-basalt-md inline-flex items-center justify-center font-medium text-basalt-muted-foreground transition-colors basalt-motion hover:text-basalt-foreground data-[state=active]:bg-basalt-selected data-[state=active]:text-basalt-selected-foreground\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nexport type TabsContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>,\n\t\"value\"\n> & {\n\t/**\n\t * The tab value this panel belongs to.\n\t */\n\tvalue: string;\n};\n\nexport const TabsContent = React.forwardRef<\n\tReact.ElementRef<typeof TabsPrimitive.Content>,\n\tTabsContentProps\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-basalt-space-lg text-basalt-base text-basalt-foreground data-[state=active]:animate-basalt-tab-in\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAOA,SAASE,EAAoB,GAK3B;CACD,OAAO;EACN,MAAMC,EAAK;EACX,OAAOA,EAAK;EACZ,KAAKA,EAAK,YAAYA,EAAK;EAC3B,QAAQ;CACT;AACD;AAmBA,IAAaC,IAA4BJ,EAAM,YAG5C,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,MAAf;CAAyB;CAAK,WAAWK,EAAGC,GAAiBC,CAAS;CAAG,GAAIH;AAAQ,CAAA,CACrF;AACD,EAAK,cAAcJ,EAAc,KAAK;AAUtC,IAAaQ,IAAWT,EAAM,YAG3B,EAAE,cAAW,aAAU,mBAAgB,IAAM,GAAGK,KAAS,MAAQ;CACnE,IAAM,EACL,KAAKK,GACL,UACA,uBACGC,EAAsB;EACzB,cAAc;EACd,SAASC;EACT,aAAaV;EACb;CACD,CAAC;CAED,OACC,kBAACD,EAAc,MAAf;EACC,KAAKS;EACL,WAAWJ,EACV,0FACAE,CACD;EACA,GAAIH;EANL,UAAA,CAQEQ,GACAD,IACA,kBAAC,QAAD;GACC,eAAY;GACZ,aAAU;GACV,WAAWN,EACV,+DACAQ,CACD;GACA,OAAO;IACN,MAAM;IACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;IACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;IACrC,KAAK;GACN;EACA,CAAA,IACE,IACe;;AAEtB,CAAC;AACD,EAAS,cAAcd,EAAc,KAAK;AAiB1C,IAAae,IAAchB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,8QACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ;AAYhD,IAAaiB,IAAclB,EAAM,YAG9B,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACJ,EAAc,SAAf;CACM;CACL,WAAWK,EACV,wGACAW,GACAT,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAY,cAAcJ,EAAc,QAAQ"}

package/dist/components/tag-badge.d.ts

@@ -3,43 +3,43 @@ import type { ComponentProps } from "react";
 export declare const TAG_COLORS: {
     readonly slate: {
         readonly label: "Slate";
-        readonly className: "border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100";
+        readonly className: "border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground";
     };
     readonly blue: {
         readonly label: "Blue";
-        readonly className: "border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200";
+        readonly className: "border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground";
     };
     readonly violet: {
         readonly label: "Violet";
-        readonly className: "border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200";
+        readonly className: "border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground";
     };
     readonly teal: {
         readonly label: "Teal";
-        readonly className: "border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200";
+        readonly className: "border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground";
     };
     readonly amber: {
         readonly label: "Amber";
-        readonly className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200";
+        readonly className: "border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground";
     };
     readonly rose: {
         readonly label: "Rose";
-        readonly className: "border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200";
+        readonly className: "border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground";
     };
     readonly success: {
         readonly label: "Success";
-        readonly className: "border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200";
+        readonly className: "border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground";
     };
     readonly warning: {
         readonly label: "Warning";
-        readonly className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200";
+        readonly className: "border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground";
     };
     readonly danger: {
         readonly label: "Danger";
-        readonly className: "border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200";
+        readonly className: "border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground";
     };
     readonly info: {
         readonly label: "Info";
-        readonly className: "border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200";
+        readonly className: "border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground";
     };
 };
 export type TagColor = keyof typeof TAG_COLORS;

package/dist/components/tag-badge.js

@@ -6,43 +6,43 @@ import { jsx as n } from "react/jsx-runtime";
 var r = {
 	slate: {
 		label: "Slate",
-		className: "border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100"
+		className: "border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground"
 	},
 	blue: {
 		label: "Blue",
-		className: "border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200"
+		className: "border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground"
 	},
 	violet: {
 		label: "Violet",
-		className: "border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200"
+		className: "border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground"
 	},
 	teal: {
 		label: "Teal",
-		className: "border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200"
+		className: "border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground"
 	},
 	amber: {
 		label: "Amber",
-		className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200"
+		className: "border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground"
 	},
 	rose: {
 		label: "Rose",
-		className: "border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200"
+		className: "border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground"
 	},
 	success: {
 		label: "Success",
-		className: "border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200"
+		className: "border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground"
 	},
 	warning: {
 		label: "Warning",
-		className: "border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200"
+		className: "border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground"
 	},
 	danger: {
 		label: "Danger",
-		className: "border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200"
+		className: "border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground"
 	},
 	info: {
 		label: "Info",
-		className: "border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200"
+		className: "border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground"
 	}
 }, i = [
 	"slate",
@@ -62,7 +62,7 @@ function o({ name: i, colorKey: o, color: s, size: c = "md", className: l, ...u
 	return /* @__PURE__ */ n("span", {
 		...u,
 		"data-tag-color": d,
-		className: e(t, "inline-flex max-w-full items-center break-words rounded-full border font-medium", c === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", r[d].className, l),
+		className: e(t, "inline-flex max-w-full items-center break-words rounded-basalt-full border font-medium", "basalt-inline", c === "sm" && "px-basalt-space-sm", r[d].className, l),
 		children: i
 	});
 }

package/dist/components/tag-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-badge.js","names":["TAG_COLORS","HASH_COLORS","tagColorFor","hash","i","key","TagBadge","props","resolved","color","colorKey","name","cn","BASALT_UI_CLASS","size","className"],"sources":["../../src/components/tag-badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Stable identifiers, labels and opaque foreground/background pairs for both themes. */\nexport const TAG_COLORS = {\n\tslate: {\n\t\tlabel: \"Slate\",\n\t\tclassName:\n\t\t\t\"border-slate-300 bg-slate-100 text-slate-800 basalt-dark:border-slate-600 basalt-dark:bg-slate-800 basalt-dark:text-slate-100\",\n\t},\n\tblue: {\n\t\tlabel: \"Blue\",\n\t\tclassName:\n\t\t\t\"border-blue-300 bg-blue-50 text-blue-800 basalt-dark:border-blue-700 basalt-dark:bg-blue-950 basalt-dark:text-blue-200\",\n\t},\n\tviolet: {\n\t\tlabel: \"Violet\",\n\t\tclassName:\n\t\t\t\"border-violet-300 bg-violet-50 text-violet-800 basalt-dark:border-violet-700 basalt-dark:bg-violet-950 basalt-dark:text-violet-200\",\n\t},\n\tteal: {\n\t\tlabel: \"Teal\",\n\t\tclassName:\n\t\t\t\"border-teal-300 bg-teal-50 text-teal-800 basalt-dark:border-teal-700 basalt-dark:bg-teal-950 basalt-dark:text-teal-200\",\n\t},\n\tamber: {\n\t\tlabel: \"Amber\",\n\t\tclassName:\n\t\t\t\"border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200\",\n\t},\n\trose: {\n\t\tlabel: \"Rose\",\n\t\tclassName:\n\t\t\t\"border-rose-300 bg-rose-50 text-rose-800 basalt-dark:border-rose-700 basalt-dark:bg-rose-950 basalt-dark:text-rose-200\",\n\t},\n\tsuccess: {\n\t\tlabel: \"Success\",\n\t\tclassName:\n\t\t\t\"border-emerald-300 bg-emerald-50 text-emerald-800 basalt-dark:border-emerald-700 basalt-dark:bg-emerald-950 basalt-dark:text-emerald-200\",\n\t},\n\twarning: {\n\t\tlabel: \"Warning\",\n\t\tclassName:\n\t\t\t\"border-amber-300 bg-amber-50 text-amber-900 basalt-dark:border-amber-700 basalt-dark:bg-amber-950 basalt-dark:text-amber-200\",\n\t},\n\tdanger: {\n\t\tlabel: \"Danger\",\n\t\tclassName:\n\t\t\t\"border-red-300 bg-red-50 text-red-800 basalt-dark:border-red-700 basalt-dark:bg-red-950 basalt-dark:text-red-200\",\n\t},\n\tinfo: {\n\t\tlabel: \"Info\",\n\t\tclassName:\n\t\t\t\"border-sky-300 bg-sky-50 text-sky-800 basalt-dark:border-sky-700 basalt-dark:bg-sky-950 basalt-dark:text-sky-200\",\n\t},\n} as const;\nexport type TagColor = keyof typeof TAG_COLORS;\nconst HASH_COLORS = [\"slate\", \"blue\", \"violet\", \"teal\", \"amber\", \"rose\"] as const;\n/** Stable FNV-1a assignment to six non-semantic colors; does not infer business meaning. */\nexport function tagColorFor(key: string): TagColor {\n\tlet hash = 2166136261;\n\tfor (let i = 0; i < key.length; i++) hash = Math.imul(hash ^ key.charCodeAt(i), 16777619);\n\treturn HASH_COLORS[(hash >>> 0) % HASH_COLORS.length];\n}\nexport interface TagBadgeProps extends Omit<ComponentProps<\"span\">, \"children\" | \"color\"> {\n\t/** Visible tag name; color is always accompanied by text. */\n\tname: string;\n\t/** Stable hash input, defaults to name. Use an entity ID to retain color after renaming. */\n\tcolorKey?: string;\n\t/** Explicit hue or semantic color, overriding the deterministic assignment. */\n\tcolor?: TagColor;\n\t/** Badge size. @default \"md\" */\n\tsize?: \"sm\" | \"md\";\n}\nexport function TagBadge({\n\tname,\n\tcolorKey,\n\tcolor,\n\tsize = \"md\",\n\tclassName,\n\t...props\n}: TagBadgeProps) {\n\tconst resolved = color ?? tagColorFor(colorKey ?? name);\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\tdata-tag-color={resolved}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center break-words rounded-full border font-medium\",\n\t\t\t\tsize === \"sm\" ? \"px-2 py-0.5 text-xs\" : \"px-2.5 py-1 text-sm\",\n\t\t\t\tTAG_COLORS[resolved].className,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{name}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAKA,IAAaA,IAAa;CACzB,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WACC;CACF;AACD,GAEMC,IAAc;CAAC;CAAS;CAAQ;CAAU;CAAQ;CAAS;AAAM;AAEvE,SAAgBC,EAAY,GAAuB;CAClD,IAAIC,IAAO;CACX,KAAK,IAAIC,IAAI,GAAGA,IAAIC,EAAI,QAAQ,KAAK,IAAO,KAAK,KAAKF,IAAOE,EAAI,WAAWD,CAAC,GAAG,QAAQ;CACxF,OAAOH,GAAaE,MAAS,KAAKF,EAAY;AAC/C;AAWA,SAAgBK,EAAS,EACxB,SACA,aACA,UACA,UAAO,MACP,cACA,GAAGC,KACc;CACjB,IAAMC,IAAWC,KAASP,EAAYQ,KAAYC,CAAI;CACtD,OACC,kBAAC,QAAD;EACC,GAAIJ;EACJ,kBAAgBC;EAChB,WAAWI,EACVC,GACA,mFACAC,MAAS,OAAO,wBAAwB,uBACxCd,EAAWQ,EAAS,CAAC,WACrBO,CACD;EAEC,UAAAJ;CACI,CAAA;AAER"}
+{"version":3,"file":"tag-badge.js","names":["TAG_COLORS","HASH_COLORS","tagColorFor","hash","i","key","TagBadge","props","resolved","color","colorKey","name","cn","BASALT_UI_CLASS","size","className"],"sources":["../../src/components/tag-badge.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Stable identifiers, labels and opaque foreground/background pairs for both themes. */\nexport const TAG_COLORS = {\n\tslate: {\n\t\tlabel: \"Slate\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-slate-border bg-basalt-tag-slate text-basalt-tag-slate-foreground\",\n\t},\n\tblue: {\n\t\tlabel: \"Blue\",\n\t\tclassName: \"border-basalt-tag-blue-border bg-basalt-tag-blue text-basalt-tag-blue-foreground\",\n\t},\n\tviolet: {\n\t\tlabel: \"Violet\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-violet-border bg-basalt-tag-violet text-basalt-tag-violet-foreground\",\n\t},\n\tteal: {\n\t\tlabel: \"Teal\",\n\t\tclassName: \"border-basalt-tag-teal-border bg-basalt-tag-teal text-basalt-tag-teal-foreground\",\n\t},\n\tamber: {\n\t\tlabel: \"Amber\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-amber-border bg-basalt-tag-amber text-basalt-tag-amber-foreground\",\n\t},\n\trose: {\n\t\tlabel: \"Rose\",\n\t\tclassName: \"border-basalt-tag-rose-border bg-basalt-tag-rose text-basalt-tag-rose-foreground\",\n\t},\n\tsuccess: {\n\t\tlabel: \"Success\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-success-border bg-basalt-tag-success text-basalt-tag-success-foreground\",\n\t},\n\twarning: {\n\t\tlabel: \"Warning\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-warning-border bg-basalt-tag-warning text-basalt-tag-warning-foreground\",\n\t},\n\tdanger: {\n\t\tlabel: \"Danger\",\n\t\tclassName:\n\t\t\t\"border-basalt-tag-danger-border bg-basalt-tag-danger text-basalt-tag-danger-foreground\",\n\t},\n\tinfo: {\n\t\tlabel: \"Info\",\n\t\tclassName: \"border-basalt-tag-info-border bg-basalt-tag-info text-basalt-tag-info-foreground\",\n\t},\n} as const;\nexport type TagColor = keyof typeof TAG_COLORS;\nconst HASH_COLORS = [\"slate\", \"blue\", \"violet\", \"teal\", \"amber\", \"rose\"] as const;\n/** Stable FNV-1a assignment to six non-semantic colors; does not infer business meaning. */\nexport function tagColorFor(key: string): TagColor {\n\tlet hash = 2166136261;\n\tfor (let i = 0; i < key.length; i++) hash = Math.imul(hash ^ key.charCodeAt(i), 16777619);\n\treturn HASH_COLORS[(hash >>> 0) % HASH_COLORS.length];\n}\nexport interface TagBadgeProps extends Omit<ComponentProps<\"span\">, \"children\" | \"color\"> {\n\t/** Visible tag name; color is always accompanied by text. */\n\tname: string;\n\t/** Stable hash input, defaults to name. Use an entity ID to retain color after renaming. */\n\tcolorKey?: string;\n\t/** Explicit hue or semantic color, overriding the deterministic assignment. */\n\tcolor?: TagColor;\n\t/** Badge size. @default \"md\" */\n\tsize?: \"sm\" | \"md\";\n}\nexport function TagBadge({\n\tname,\n\tcolorKey,\n\tcolor,\n\tsize = \"md\",\n\tclassName,\n\t...props\n}: TagBadgeProps) {\n\tconst resolved = color ?? tagColorFor(colorKey ?? name);\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\tdata-tag-color={resolved}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"inline-flex max-w-full items-center break-words rounded-basalt-full border font-medium\",\n\t\t\t\t\"basalt-inline\",\n\t\t\t\tsize === \"sm\" && \"px-basalt-space-sm\",\n\t\t\t\tTAG_COLORS[resolved].className,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{name}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAKA,IAAaA,IAAa;CACzB,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,OAAO;EACN,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,SAAS;EACR,OAAO;EACP,WACC;CACF;CACA,QAAQ;EACP,OAAO;EACP,WACC;CACF;CACA,MAAM;EACL,OAAO;EACP,WAAW;CACZ;AACD,GAEMC,IAAc;CAAC;CAAS;CAAQ;CAAU;CAAQ;CAAS;AAAM;AAEvE,SAAgBC,EAAY,GAAuB;CAClD,IAAIC,IAAO;CACX,KAAK,IAAIC,IAAI,GAAGA,IAAIC,EAAI,QAAQ,KAAK,IAAO,KAAK,KAAKF,IAAOE,EAAI,WAAWD,CAAC,GAAG,QAAQ;CACxF,OAAOH,GAAaE,MAAS,KAAKF,EAAY;AAC/C;AAWA,SAAgBK,EAAS,EACxB,SACA,aACA,UACA,UAAO,MACP,cACA,GAAGC,KACc;CACjB,IAAMC,IAAWC,KAASP,EAAYQ,KAAYC,CAAI;CACtD,OACC,kBAAC,QAAD;EACC,GAAIJ;EACJ,kBAAgBC;EAChB,WAAWI,EACVC,GACA,0FACA,iBACAC,MAAS,QAAQ,sBACjBd,EAAWQ,EAAS,CAAC,WACrBO,CACD;EAEC,UAAAJ;CACI,CAAA;AAER"}

package/dist/components/tag-color-picker.d.ts

@@ -1,3 +1,4 @@
+import { type AriaAttributes } from "react";
 import { type TagColor } from "./tag-badge.js";
 export interface TagColorPickerProps {
     /** Accessible group name. */
@@ -14,7 +15,13 @@ export interface TagColorPickerProps {
     labels?: Partial<Record<TagColor, string>>;
     /** Disable the picker. @default false */
     disabled?: boolean;
+    /** Forwarded to the radio group so Field and Label can own it. */
+    id?: string;
+    /** Forwarded to the radio group; Field sets it while the value is invalid. */
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    /** Forwarded to the radio group; Field points it at the hint or error. */
+    "aria-describedby"?: string;
     /** Additional root classes. */
     className?: string;
 }
-export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, className, }: TagColorPickerProps): import("react").JSX.Element;
+export declare function TagColorPicker({ label, value, defaultValue, onValueChange, colors, labels, disabled, id, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, className, }: TagColorPickerProps): import("react").JSX.Element;

package/dist/components/tag-color-picker.js

@@ -1,38 +1,46 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
-import { ToggleGroup as n, ToggleGroupItem as r } from "./toggle-group.js";
-import { TAG_COLORS as i } from "./tag-badge.js";
-import { useState as a } from "react";
-import { Check as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { FOCUS_INSET as n } from "./overlay.js";
+import { TAG_COLORS as r } from "./tag-badge.js";
+import { useState as i } from "react";
+import { Check as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-radio-group";
 //#region src/components/tag-color-picker.tsx
-var l = Object.keys(i);
-function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, colors: m = l, labels: h, disabled: g = !1, className: _ }) {
-	let [v, y] = a(f), b = d ?? v;
-	return /* @__PURE__ */ s(n, {
-		type: "single",
-		value: b,
+var l = Object.keys(r);
+function u({ label: u, value: d, defaultValue: f = "slate", onValueChange: p, colors: m = l, labels: h, disabled: g = !1, id: _, "aria-invalid": v, "aria-describedby": y, className: b }) {
+	let [x, S] = i(f), C = d ?? x;
+	return /* @__PURE__ */ o(c.Root, {
+		value: C,
+		id: _,
 		"aria-label": u,
+		"aria-invalid": v,
+		"aria-describedby": y,
 		disabled: g,
-		className: e(t, "flex h-auto flex-wrap justify-start gap-2 rounded-basalt-lg p-1", _),
+		className: e(t, "grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg", b),
 		onValueChange: (e) => {
-			if (!e) return;
 			let t = e;
-			d === void 0 && y(t), p?.(t);
+			d === void 0 && S(t), p?.(t);
 		},
-		children: m.map((t) => /* @__PURE__ */ c(r, {
+		children: m.map((t) => /* @__PURE__ */ s(c.Item, {
 			value: t,
-			"aria-label": h?.[t] ?? i[t].label,
-			className: "h-auto min-w-16 flex-col gap-1.5 rounded-basalt-md px-2 py-2",
-			children: [/* @__PURE__ */ s("span", {
-				"aria-hidden": "true",
-				className: e("flex size-7 items-center justify-center rounded-full border", i[t].className),
-				children: b === t && /* @__PURE__ */ s(o, { className: "size-4" })
-			}), /* @__PURE__ */ s("span", {
-				className: "text-xs",
-				children: h?.[t] ?? i[t].label
-			})]
+			"aria-label": h?.[t] ?? r[t].label,
+			className: e("group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", n, "data-[state=checked]:focus-visible:ring-basalt-primary-foreground"),
+			children: [
+				/* @__PURE__ */ o("span", {
+					"aria-hidden": "true",
+					className: e("size-basalt-7 shrink-0 rounded-basalt-md border", r[t].className)
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "min-w-0 flex-1 break-words text-basalt-sm font-medium",
+					children: h?.[t] ?? r[t].label
+				}),
+				/* @__PURE__ */ o(a, {
+					"aria-hidden": "true",
+					className: "size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100"
+				})
+			]
 		}, t))
 	});
 }

package/dist/components/tag-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-color-picker.js","names":["ALL_COLORS","TAG_COLORS","TagColorPicker","localValue","setLocalValue","useState","defaultValue","selected","value","ToggleGroup","label","cn","BASALT_UI_CLASS","className","next","color","onValueChange","colors","ToggleGroupItem","labels","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<ToggleGroup\n\t\t\ttype=\"single\"\n\t\t\tvalue={selected}\n\t\t\taria-label={label}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-auto flex-wrap justify-start gap-2 rounded-basalt-lg p-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tif (!next) return;\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<ToggleGroupItem\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName=\"h-auto min-w-16 flex-col gap-1.5 rounded-basalt-md px-2 py-2\"\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex size-7 items-center justify-center rounded-full border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selected === color && <Check className=\"size-4\" />}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-xs\">{labels?.[color] ?? TAG_COLORS[color].label}</span>\n\t\t\t\t</ToggleGroupItem>\n\t\t\t))}\n\t\t</ToggleGroup>\n\t);\n}\n"],"mappings":";;;;;;;;;AAyBA,IAAMA,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,gBACuB;CACvB,IAAM,CAACG,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACM,GAAD;EACC,MAAK;EACL,OAAOF;EACP,cAAYG;EACF;EACV,WAAWC,EACVC,GACA,mEACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAI,CAACC,GAAM;GACX,IAAMC,IAAQD;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcW,CAAK,GAC5CC,IAAgBD,CAAK;EACtB;EAEC,UAAAE,EAAO,KAAK,MACZ,kBAACC,GAAD;GAEC,OAAOH;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAU;GAJX,UAAA,CAMC,kBAAC,QAAD;IACC,eAAY;IACZ,WAAWJ,EACV,+DACAV,EAAWc,EAAM,CAAC,SACnB;IAEC,UAAAR,MAAaQ,KAAS,kBAACK,GAAD,EAAO,WAAU,SAAU,CAAA;GAC7C,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAAD,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GAAY,CAAA,CAC5D;EAfX,GAAAA,CAeW,CACjB;CACW,CAAA;AAEf"}
+{"version":3,"file":"tag-color-picker.js","names":["RadioGroupPrimitive","ALL_COLORS","TAG_COLORS","TagColorPicker","ariaInvalid","describedBy","localValue","setLocalValue","useState","defaultValue","selected","value","label","cn","BASALT_UI_CLASS","className","color","next","onValueChange","colors","labels","FOCUS_INSET","Check"],"sources":["../../src/components/tag-color-picker.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Check } from \"lucide-react\";\nimport { type AriaAttributes, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_INSET } from \"./overlay\";\nimport { TAG_COLORS, type TagColor } from \"./tag-badge\";\n\nexport interface TagColorPickerProps {\n\t/** Accessible group name. */\n\tlabel: string;\n\t/** Controlled named color. */\n\tvalue?: TagColor;\n\t/** Initial uncontrolled color. @default \"slate\" */\n\tdefaultValue?: TagColor;\n\t/** Color selection request. */\n\tonValueChange?: (value: TagColor) => void;\n\t/** Allowed color subset, in caller-defined order. */\n\tcolors?: readonly TagColor[];\n\t/** Localized visible and accessible color names. */\n\tlabels?: Partial<Record<TagColor, string>>;\n\t/** Disable the picker. @default false */\n\tdisabled?: boolean;\n\t/** Forwarded to the radio group so Field and Label can own it. */\n\tid?: string;\n\t/** Forwarded to the radio group; Field sets it while the value is invalid. */\n\t\"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n\t/** Forwarded to the radio group; Field points it at the hint or error. */\n\t\"aria-describedby\"?: string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\nconst ALL_COLORS = Object.keys(TAG_COLORS) as TagColor[];\nexport function TagColorPicker({\n\tlabel,\n\tvalue,\n\tdefaultValue = \"slate\",\n\tonValueChange,\n\tcolors = ALL_COLORS,\n\tlabels,\n\tdisabled = false,\n\tid,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-describedby\": describedBy,\n\tclassName,\n}: TagColorPickerProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst selected = value ?? localValue;\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tvalue={selected}\n\t\t\tid={id}\n\t\t\taria-label={label}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={describedBy}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid w-full min-w-0 max-w-3xl grid-cols-[repeat(auto-fit,minmax(min(100%,9rem),1fr))] gap-basalt-space-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonValueChange={(next) => {\n\t\t\t\tconst color = next as TagColor;\n\t\t\t\tif (value === undefined) setLocalValue(color);\n\t\t\t\tonValueChange?.(color);\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color) => (\n\t\t\t\t<RadioGroupPrimitive.Item\n\t\t\t\t\tkey={color}\n\t\t\t\t\tvalue={color}\n\t\t\t\t\taria-label={labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Accent choice grid: the selected tile owns the primary fill and its\n\t\t\t\t\t\t// contrast-corrected foreground, not a control fill inside a frame.\n\t\t\t\t\t\t\"group flex min-w-0 items-center gap-basalt-space-lg rounded-basalt-md p-basalt-space-lg text-left text-basalt-foreground transition-colors hover:bg-basalt-hover data-[state=checked]:bg-basalt-primary data-[state=checked]:text-basalt-primary-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\tFOCUS_INSET,\n\t\t\t\t\t\t\"data-[state=checked]:focus-visible:ring-basalt-primary-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"size-basalt-7 shrink-0 rounded-basalt-md border\",\n\t\t\t\t\t\t\tTAG_COLORS[color].className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"min-w-0 flex-1 break-words text-basalt-sm font-medium\">\n\t\t\t\t\t\t{labels?.[color] ?? TAG_COLORS[color].label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"size-basalt-icon shrink-0 opacity-0 group-data-[state=checked]:opacity-100\"\n\t\t\t\t\t/>\n\t\t\t\t</RadioGroupPrimitive.Item>\n\t\t\t))}\n\t\t</RadioGroupPrimitive.Root>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMC,IAAa,OAAO,KAAKC,CAAU;AACzC,SAAgBC,EAAe,EAC9B,UACA,UACA,kBAAe,SACf,kBACA,YAASF,GACT,WACA,cAAW,IACX,OACA,gBAAgBG,GAChB,oBAAoBC,GACpB,gBACuB;CACvB,IAAM,CAACC,GAAYC,KAAiBC,EAASC,CAAY,GACnDC,IAAWC,KAASL;CAC1B,OACC,kBAACN,EAAoB,MAArB;EACC,OAAOU;EACH;EACJ,cAAYE;EACZ,gBAAcR;EACd,oBAAkBC;EACR;EACV,WAAWQ,EACVC,GACA,6GACAC,CACD;EACA,gBAAgB,MAAS;GACxB,IAAMC,IAAQC;GAEd,AADIN,MAAU,KAAA,KAAWJ,EAAcS,CAAK,GAC5CE,IAAgBF,CAAK;EACtB;EAEC,UAAAG,EAAO,KAAK,MACZ,kBAACnB,EAAoB,MAArB;GAEC,OAAOgB;GACP,cAAYI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;GACjD,WAAWH,EAGV,+SACAQ,GACA,mEACD;GAVD,UAAA;IAYC,kBAAC,QAAD;KACC,eAAY;KACZ,WAAWR,EACV,mDACAX,EAAWc,EAAM,CAAC,SACnB;IACA,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAI,IAASJ,MAAUd,EAAWc,EAAM,CAAC;IACjC,CAAA;IACN,kBAACM,GAAD;KACC,eAAY;KACZ,WAAU;IACV,CAAA;GACwB;EAzBpB,GAAAN,CAyBoB,CAC1B;CACwB,CAAA;AAE5B"}

package/dist/components/text.js

@@ -7,11 +7,11 @@ import { cva as r } from "class-variance-authority";
 var i = r("text-basalt-foreground", {
 	variants: {
 		size: {
-			xs: "text-xs",
-			sm: "text-sm",
-			md: "text-sm leading-6",
-			lg: "text-base",
-			xl: "text-lg"
+			xs: "text-basalt-sm",
+			sm: "text-basalt-base",
+			md: "text-basalt-base leading-[var(--basalt-line-relaxed)]",
+			lg: "text-basalt-lg",
+			xl: "text-basalt-xl"
 		},
 		tone: {
 			default: "text-basalt-foreground",

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":["React","textVariants","cva","defaultElement","variant","defaultSize","Text","props","Component","as","cn","BASALT_UI_CLASS","size","bold","truncate","className"],"sources":["../../src/components/text.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TextVariant = \"body\" | \"heading\" | \"mono\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextTone = \"default\" | \"muted\";\nexport type TextElement =\n\t| \"h1\"\n\t| \"h2\"\n\t| \"h3\"\n\t| \"h4\"\n\t| \"h5\"\n\t| \"h6\"\n\t| \"p\"\n\t| \"span\"\n\t| \"label\"\n\t| \"dt\"\n\t| \"dd\"\n\t| \"li\"\n\t| \"figcaption\"\n\t| \"legend\"\n\t| \"pre\"\n\t| \"code\"\n\t| \"em\"\n\t| \"strong\"\n\t| \"small\"\n\t| \"abbr\"\n\t| \"time\";\n\nconst textVariants = cva(\"text-basalt-foreground\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-xs\",\n\t\t\tsm: \"text-sm\",\n\t\t\tmd: \"text-sm leading-6\",\n\t\t\tlg: \"text-base\",\n\t\t\txl: \"text-lg\",\n\t\t},\n\t\ttone: {\n\t\t\tdefault: \"text-basalt-foreground\",\n\t\t\tmuted: \"text-basalt-muted-foreground\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t\ttone: \"default\",\n\t},\n});\n\nexport interface TextProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * Visual role. Does not infer document outline.\n\t * @default \"body\"\n\t */\n\tvariant?: TextVariant;\n\t/** Type scale. Defaults by variant: body md, heading lg, mono sm. */\n\tsize?: TextSize;\n\t/**\n\t * Foreground tone.\n\t * @default \"default\"\n\t */\n\ttone?: TextTone;\n\t/** Rendered HTML element. Defaults by variant: body p, heading/mono span. */\n\tas?: TextElement;\n\t/**\n\t * Apply semibold weight.\n\t * @default false\n\t */\n\tbold?: boolean;\n\t/**\n\t * Ellipsize overflow on one line.\n\t * @default false\n\t */\n\ttruncate?: boolean;\n}\n\nfunction defaultElement(variant: TextVariant): TextElement {\n\treturn variant === \"body\" ? \"p\" : \"span\";\n}\n\nfunction defaultSize(variant: TextVariant): TextSize {\n\tif (variant === \"heading\") {\n\t\treturn \"lg\";\n\t}\n\tif (variant === \"mono\") {\n\t\treturn \"sm\";\n\t}\n\treturn \"md\";\n}\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n\t(\n\t\t{\n\t\t\tas,\n\t\t\tbold = false,\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\ttone = \"default\",\n\t\t\ttruncate = false,\n\t\t\tvariant = \"body\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = as ?? defaultElement(variant);\n\t\treturn React.createElement(Component, {\n\t\t\t...props,\n\t\t\tref,\n\t\t\tclassName: cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\ttextVariants({ size: size ?? defaultSize(variant), tone }),\n\t\t\t\tvariant === \"heading\" && \"font-semibold\",\n\t\t\t\tvariant === \"mono\" && \"font-mono\",\n\t\t\t\tbold && \"font-semibold\",\n\t\t\t\ttruncate && \"min-w-0 truncate\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t});\n\t},\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;AA+BA,IAAMC,IAAeC,EAAI,0BAA0B;CAClD,UAAU;EACT,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;EACA,MAAM;GACL,SAAS;GACT,OAAO;EACR;CACD;CACA,iBAAiB;EAChB,MAAM;EACN,MAAM;CACP;AACD,CAAC;AA6BD,SAASC,EAAe,GAAmC;CAC1D,OAAOC,MAAY,SAAS,MAAM;AACnC;AAEA,SAASC,EAAY,GAAgC;CAOpD,OANID,MAAY,YACR,OAEJA,MAAY,SACR,OAED;AACR;AAEA,IAAaE,IAAON,EAAM,YAExB,EACC,OACA,UAAO,IACP,cACA,SACA,UAAO,WACP,cAAW,IACX,aAAU,QACV,GAAGO,KAEJ,MACI;CACJ,IAAMC,IAAYC,KAAMN,EAAeC,CAAO;CAC9C,OAAOJ,EAAM,cAAcQ,GAAW;EACrC,GAAGD;EACH;EACA,WAAWG,EACVC,GACAV,EAAa;GAAE,MAAMW,KAAQP,EAAYD,CAAO;GAAG;EAAK,CAAC,GACzDA,MAAY,aAAa,iBACzBA,MAAY,UAAU,aACtBS,KAAQ,iBACRC,KAAY,oBACZC,CACD;CACD,CAAC;AACF,CACD;AACA,EAAK,cAAc"}
+{"version":3,"file":"text.js","names":["React","textVariants","cva","defaultElement","variant","defaultSize","Text","props","Component","as","cn","BASALT_UI_CLASS","size","bold","truncate","className"],"sources":["../../src/components/text.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TextVariant = \"body\" | \"heading\" | \"mono\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextTone = \"default\" | \"muted\";\nexport type TextElement =\n\t| \"h1\"\n\t| \"h2\"\n\t| \"h3\"\n\t| \"h4\"\n\t| \"h5\"\n\t| \"h6\"\n\t| \"p\"\n\t| \"span\"\n\t| \"label\"\n\t| \"dt\"\n\t| \"dd\"\n\t| \"li\"\n\t| \"figcaption\"\n\t| \"legend\"\n\t| \"pre\"\n\t| \"code\"\n\t| \"em\"\n\t| \"strong\"\n\t| \"small\"\n\t| \"abbr\"\n\t| \"time\";\n\nconst textVariants = cva(\"text-basalt-foreground\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-basalt-sm\",\n\t\t\tsm: \"text-basalt-base\",\n\t\t\tmd: \"text-basalt-base leading-[var(--basalt-line-relaxed)]\",\n\t\t\tlg: \"text-basalt-lg\",\n\t\t\txl: \"text-basalt-xl\",\n\t\t},\n\t\ttone: {\n\t\t\tdefault: \"text-basalt-foreground\",\n\t\t\tmuted: \"text-basalt-muted-foreground\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t\ttone: \"default\",\n\t},\n});\n\nexport interface TextProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * Visual role. Does not infer document outline.\n\t * @default \"body\"\n\t */\n\tvariant?: TextVariant;\n\t/** Type scale. Defaults by variant: body md, heading lg, mono sm. */\n\tsize?: TextSize;\n\t/**\n\t * Foreground tone.\n\t * @default \"default\"\n\t */\n\ttone?: TextTone;\n\t/** Rendered HTML element. Defaults by variant: body p, heading/mono span. */\n\tas?: TextElement;\n\t/**\n\t * Apply semibold weight.\n\t * @default false\n\t */\n\tbold?: boolean;\n\t/**\n\t * Ellipsize overflow on one line.\n\t * @default false\n\t */\n\ttruncate?: boolean;\n}\n\nfunction defaultElement(variant: TextVariant): TextElement {\n\treturn variant === \"body\" ? \"p\" : \"span\";\n}\n\nfunction defaultSize(variant: TextVariant): TextSize {\n\tif (variant === \"heading\") {\n\t\treturn \"lg\";\n\t}\n\tif (variant === \"mono\") {\n\t\treturn \"sm\";\n\t}\n\treturn \"md\";\n}\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n\t(\n\t\t{\n\t\t\tas,\n\t\t\tbold = false,\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\ttone = \"default\",\n\t\t\ttruncate = false,\n\t\t\tvariant = \"body\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = as ?? defaultElement(variant);\n\t\treturn React.createElement(Component, {\n\t\t\t...props,\n\t\t\tref,\n\t\t\tclassName: cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\ttextVariants({ size: size ?? defaultSize(variant), tone }),\n\t\t\t\tvariant === \"heading\" && \"font-semibold\",\n\t\t\t\tvariant === \"mono\" && \"font-mono\",\n\t\t\t\tbold && \"font-semibold\",\n\t\t\t\ttruncate && \"min-w-0 truncate\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t});\n\t},\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;AA+BA,IAAMC,IAAeC,EAAI,0BAA0B;CAClD,UAAU;EACT,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;EACA,MAAM;GACL,SAAS;GACT,OAAO;EACR;CACD;CACA,iBAAiB;EAChB,MAAM;EACN,MAAM;CACP;AACD,CAAC;AA6BD,SAASC,EAAe,GAAmC;CAC1D,OAAOC,MAAY,SAAS,MAAM;AACnC;AAEA,SAASC,EAAY,GAAgC;CAOpD,OANID,MAAY,YACR,OAEJA,MAAY,SACR,OAED;AACR;AAEA,IAAaE,IAAON,EAAM,YAExB,EACC,OACA,UAAO,IACP,cACA,SACA,UAAO,WACP,cAAW,IACX,aAAU,QACV,GAAGO,KAEJ,MACI;CACJ,IAAMC,IAAYC,KAAMN,EAAeC,CAAO;CAC9C,OAAOJ,EAAM,cAAcQ,GAAW;EACrC,GAAGD;EACH;EACA,WAAWG,EACVC,GACAV,EAAa;GAAE,MAAMW,KAAQP,EAAYD,CAAO;GAAG;EAAK,CAAC,GACzDA,MAAY,aAAa,iBACzBA,MAAY,UAAU,aACtBS,KAAQ,iBACRC,KAAY,oBACZC,CACD;CACD,CAAC;AACF,CACD;AACA,EAAK,cAAc"}

package/dist/components/theme-toggle.js

@@ -5,7 +5,7 @@ import { Monitor as n, Moon as r, Sun as i } from "lucide-react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/theme-toggle.tsx
 var o = {
-	className: "h-4 w-4",
+	className: "h-basalt-4 w-basalt-4",
 	"aria-hidden": !0,
 	strokeWidth: 1.5
 };

package/dist/components/theme-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.js","names":["ICON_PROPS","ThemeToggle","ariaLabel","useTheme","Button","setTheme","theme","jsx","Monitor","Moon","Sun"],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"../providers/theme\";\nimport { Button } from \"./button\";\n\nconst ICON_PROPS = { className: \"h-4 w-4\", \"aria-hidden\": true as const, strokeWidth: 1.5 };\n\nexport interface ThemeToggleProps {\n\t/**\n\t * Accessible name for the toggle.\n\t */\n\t\"aria-label\": string;\n}\n\nexport function ThemeToggle({ \"aria-label\": ariaLabel }: ThemeToggleProps) {\n\tconst { theme, setTheme } = useTheme();\n\tconst cycle = () => {\n\t\tif (theme === \"system\") setTheme(\"light\");\n\t\telse if (theme === \"light\") setTheme(\"dark\");\n\t\telse setTheme(\"system\");\n\t};\n\treturn (\n\t\t<Button type=\"button\" variant=\"ghost\" size=\"icon\" onClick={cycle} aria-label={ariaLabel}>\n\t\t\t{theme === \"system\" ? (\n\t\t\t\t<Monitor {...ICON_PROPS} />\n\t\t\t) : theme === \"dark\" ? (\n\t\t\t\t<Moon {...ICON_PROPS} />\n\t\t\t) : (\n\t\t\t\t<Sun {...ICON_PROPS} />\n\t\t\t)}\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;AAIA,IAAMA,IAAa;CAAE,WAAW;CAAW,eAAe;CAAe,aAAa;AAAI;AAS1F,SAAgBC,EAAY,EAAE,cAAcC,KAA+B;CAC1E,IAAM,EAAE,UAAO,gBAAaC,EAAS;CAMrC,OACC,kBAACC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAQ,MAAK;EAAO,eAN/B;GACnB,AAAwBC,EAApBC,MAAU,WAAmB,UACxBA,MAAU,UAAkB,SACvB,QAAQ;EACvB;EAEmE,cAAYJ;EAC5E,UACAK,EADAD,MAAU,WACTE,IACEF,MAAU,SACZG,IAEAC,GAJD,EAAS,GAAIV,EAAa,CAIJ;CAEhB,CAAA;AAEV"}
+{"version":3,"file":"theme-toggle.js","names":["ICON_PROPS","ThemeToggle","ariaLabel","useTheme","Button","setTheme","theme","jsx","Monitor","Moon","Sun"],"sources":["../../src/components/theme-toggle.tsx"],"sourcesContent":["import { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"../providers/theme\";\nimport { Button } from \"./button\";\n\nconst ICON_PROPS = {\n\tclassName: \"h-basalt-4 w-basalt-4\",\n\t\"aria-hidden\": true as const,\n\tstrokeWidth: 1.5,\n};\n\nexport interface ThemeToggleProps {\n\t/**\n\t * Accessible name for the toggle.\n\t */\n\t\"aria-label\": string;\n}\n\nexport function ThemeToggle({ \"aria-label\": ariaLabel }: ThemeToggleProps) {\n\tconst { theme, setTheme } = useTheme();\n\tconst cycle = () => {\n\t\tif (theme === \"system\") setTheme(\"light\");\n\t\telse if (theme === \"light\") setTheme(\"dark\");\n\t\telse setTheme(\"system\");\n\t};\n\treturn (\n\t\t<Button type=\"button\" variant=\"ghost\" size=\"icon\" onClick={cycle} aria-label={ariaLabel}>\n\t\t\t{theme === \"system\" ? (\n\t\t\t\t<Monitor {...ICON_PROPS} />\n\t\t\t) : theme === \"dark\" ? (\n\t\t\t\t<Moon {...ICON_PROPS} />\n\t\t\t) : (\n\t\t\t\t<Sun {...ICON_PROPS} />\n\t\t\t)}\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;AAIA,IAAMA,IAAa;CAClB,WAAW;CACX,eAAe;CACf,aAAa;AACd;AASA,SAAgBC,EAAY,EAAE,cAAcC,KAA+B;CAC1E,IAAM,EAAE,UAAO,gBAAaC,EAAS;CAMrC,OACC,kBAACC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAQ,MAAK;EAAO,eAN/B;GACnB,AAAwBC,EAApBC,MAAU,WAAmB,UACxBA,MAAU,UAAkB,SACvB,QAAQ;EACvB;EAEmE,cAAYJ;EAC5E,UACAK,EADAD,MAAU,WACTE,IACEF,MAAU,SACZG,IAEAC,GAJD,EAAS,GAAIV,EAAa,CAIJ;CAEhB,CAAA;AAEV"}

package/dist/components/thinking.d.ts

@@ -0,0 +1,16 @@
+import type { ThinkingStep, ThinkingVariant } from "../models/agent-feedback.js";
+export type { ThinkingStep, ThinkingVariant } from "../models/agent-feedback.js";
+export interface ThinkingProps {
+    /** Caller-owned trace steps; the component never executes work. */
+    steps: readonly ThinkingStep[];
+    /** Trace presentation. @default "steps" */
+    variant?: ThinkingVariant;
+    /** Override the derived status title. */
+    title?: string;
+    open?: boolean;
+    /** Initially expand the trace. @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Thinking({ steps, variant, title, className, ...props }: ThinkingProps): import("react").JSX.Element;

package/dist/components/thinking.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Collapsible as t, CollapsibleContent as n, CollapsibleTrigger as r } from "./collapsible.js";
+import { useThinkingViewModel as i } from "../viewmodels/use-thinking.js";
+import { Loader as a } from "./loader.js";
+import { Check as o, Circle as s, CircleAlert as c, Code as l, Search as u, Sparkles as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/thinking.tsx
+function m({ steps: m, variant: h = "steps", title: g, className: _, ...v }) {
+	let y = i({
+		steps: m,
+		...v
+	}), b = h === "search" ? u : h === "coding" ? l : d, x = g ?? (y.status === "error" ? "Needs attention" : y.status === "complete" ? "Thinking complete" : y.status === "running" ? "Thinking" : "Waiting");
+	return /* @__PURE__ */ p(t, {
+		open: y.open,
+		onOpenChange: y.setOpen,
+		className: e("basalt-ui w-full text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground", _),
+		children: [/* @__PURE__ */ f(r, {
+			className: "rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground",
+			children: /* @__PURE__ */ p("span", {
+				className: "inline-flex min-w-0 flex-wrap items-center gap-basalt-row-gap",
+				children: [
+					/* @__PURE__ */ f(b, {
+						"aria-hidden": "true",
+						className: "size-basalt-icon-lg shrink-0",
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ f("span", {
+						role: "status",
+						className: e(y.status === "running" && "basalt-shimmer-label"),
+						children: x
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "text-basalt-sm tabular-nums text-basalt-muted-foreground",
+						children: [
+							y.completed,
+							"/",
+							y.total
+						]
+					})
+				]
+			})
+		}), /* @__PURE__ */ f(n, {
+			unstyled: !0,
+			children: /* @__PURE__ */ p("ol", {
+				"aria-label": "Thinking steps",
+				className: "ml-[calc(var(--basalt-space-row-x)+var(--basalt-size-icon-lg)/2)] space-y-basalt-content-gap border-l border-basalt-border py-basalt-space-lg pl-[calc(var(--basalt-size-icon-lg)/2+var(--basalt-space-row-gap))] pr-basalt-row-x",
+				children: [m.map((t) => /* @__PURE__ */ p("li", {
+					"data-step-status": t.status,
+					className: "basalt-agent-reveal flex items-start gap-basalt-row-gap",
+					children: [/* @__PURE__ */ f("span", {
+						className: "flex h-[var(--basalt-line-body)] w-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground",
+						role: "img",
+						"aria-label": t.status,
+						children: t.status === "running" ? /* @__PURE__ */ f(a, {
+							size: 12,
+							showLabel: !1,
+							showElapsed: !1,
+							"aria-hidden": "true"
+						}) : t.status === "complete" ? /* @__PURE__ */ f(o, { size: 14 }) : t.status === "error" ? /* @__PURE__ */ f(c, {
+							size: 14,
+							className: "text-basalt-danger"
+						}) : /* @__PURE__ */ f(s, { size: 12 })
+					}), /* @__PURE__ */ p("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ f("p", {
+							className: e("text-basalt-code", h === "coding" && "font-mono"),
+							children: t.label
+						}), t.detail && /* @__PURE__ */ f("p", {
+							className: "mt-basalt-space-sm whitespace-pre-wrap break-words text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground",
+							children: t.detail
+						})]
+					})]
+				}, t.id)), m.length === 0 && /* @__PURE__ */ f("li", {
+					className: "text-basalt-sm text-basalt-muted-foreground",
+					children: "No steps yet"
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { m as Thinking };
+
+//# sourceMappingURL=thinking.js.map

package/dist/components/thinking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thinking.js","names":["Thinking","props","vm","useThinkingViewModel","Icon","variant","Search","Code","Sparkles","heading","title","Collapsible","cn","className","CollapsibleTrigger","CollapsibleContent","steps","step","Loader","Check","CircleAlert","Circle"],"sources":["../../src/components/thinking.tsx"],"sourcesContent":["import { Check, Circle, CircleAlert, Code, Search, Sparkles } from \"lucide-react\";\nimport type { ThinkingStep, ThinkingVariant } from \"../models/agent-feedback\";\nimport { cn } from \"../utils/cn\";\nimport { useThinkingViewModel } from \"../viewmodels/use-thinking\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Loader } from \"./loader\";\n\nexport type { ThinkingStep, ThinkingVariant } from \"../models/agent-feedback\";\nexport interface ThinkingProps {\n\t/** Caller-owned trace steps; the component never executes work. */\n\tsteps: readonly ThinkingStep[];\n\t/** Trace presentation. @default \"steps\" */\n\tvariant?: ThinkingVariant;\n\t/** Override the derived status title. */\n\ttitle?: string;\n\topen?: boolean;\n\t/** Initially expand the trace. @default true */\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tclassName?: string;\n}\n\nexport function Thinking({ steps, variant = \"steps\", title, className, ...props }: ThinkingProps) {\n\tconst vm = useThinkingViewModel({ steps, ...props });\n\tconst Icon = variant === \"search\" ? Search : variant === \"coding\" ? Code : Sparkles;\n\tconst heading =\n\t\ttitle ??\n\t\t(vm.status === \"error\"\n\t\t\t? \"Needs attention\"\n\t\t\t: vm.status === \"complete\"\n\t\t\t\t? \"Thinking complete\"\n\t\t\t\t: vm.status === \"running\"\n\t\t\t\t\t? \"Thinking\"\n\t\t\t\t\t: \"Waiting\");\n\treturn (\n\t\t<Collapsible\n\t\t\topen={vm.open}\n\t\t\tonOpenChange={vm.setOpen}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui w-full text-basalt-base leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<CollapsibleTrigger className=\"rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground\">\n\t\t\t\t<span className=\"inline-flex min-w-0 flex-wrap items-center gap-basalt-row-gap\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" className=\"size-basalt-icon-lg shrink-0\" strokeWidth={1.5} />\n\t\t\t\t\t<span role=\"status\" className={cn(vm.status === \"running\" && \"basalt-shimmer-label\")}>\n\t\t\t\t\t\t{heading}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-basalt-sm tabular-nums text-basalt-muted-foreground\">\n\t\t\t\t\t\t{vm.completed}/{vm.total}\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</CollapsibleTrigger>\n\t\t\t<CollapsibleContent unstyled>\n\t\t\t\t<ol\n\t\t\t\t\taria-label=\"Thinking steps\"\n\t\t\t\t\tclassName=\"ml-[calc(var(--basalt-space-row-x)+var(--basalt-size-icon-lg)/2)] space-y-basalt-content-gap border-l border-basalt-border py-basalt-space-lg pl-[calc(var(--basalt-size-icon-lg)/2+var(--basalt-space-row-gap))] pr-basalt-row-x\"\n\t\t\t\t>\n\t\t\t\t\t{steps.map((step) => (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tkey={step.id}\n\t\t\t\t\t\t\tdata-step-status={step.status}\n\t\t\t\t\t\t\tclassName=\"basalt-agent-reveal flex items-start gap-basalt-row-gap\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName=\"flex h-[var(--basalt-line-body)] w-basalt-icon-lg shrink-0 items-center justify-center text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label={step.status}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{step.status === \"running\" ? (\n\t\t\t\t\t\t\t\t\t<Loader size={12} showLabel={false} showElapsed={false} aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t) : step.status === \"complete\" ? (\n\t\t\t\t\t\t\t\t\t<Check size={14} />\n\t\t\t\t\t\t\t\t) : step.status === \"error\" ? (\n\t\t\t\t\t\t\t\t\t<CircleAlert size={14} className=\"text-basalt-danger\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Circle size={12} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t\t\t\t<p className={cn(\"text-basalt-code\", variant === \"coding\" && \"font-mono\")}>\n\t\t\t\t\t\t\t\t\t{step.label}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t{step.detail && (\n\t\t\t\t\t\t\t\t\t<p className=\"mt-basalt-space-sm whitespace-pre-wrap break-words text-basalt-sm leading-[var(--basalt-line-body)] text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{step.detail}\n\t\t\t\t\t\t\t\t\t</p>\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</li>\n\t\t\t\t\t))}\n\t\t\t\t\t{steps.length === 0 && (\n\t\t\t\t\t\t<li className=\"text-basalt-sm text-basalt-muted-foreground\">No steps yet</li>\n\t\t\t\t\t)}\n\t\t\t\t</ol>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgBA,EAAS,EAAE,UAAO,aAAU,SAAS,UAAO,cAAW,GAAGC,KAAwB;CACjG,IAAMC,IAAKC,EAAqB;EAAE;EAAO,GAAGF;CAAM,CAAC,GAC7CG,IAAOC,MAAY,WAAWC,IAASD,MAAY,WAAWE,IAAOC,GACrEC,IACLC,MACCR,EAAG,WAAW,UACZ,oBACAA,EAAG,WAAW,aACb,sBACAA,EAAG,WAAW,YACb,aACA;CACN,OACC,kBAACS,GAAD;EACC,MAAMT,EAAG;EACT,cAAcA,EAAG;EACjB,WAAWU,EACV,8FACAC,CACD;EAND,UAAA,CAQC,kBAACC,GAAD;GAAoB,WAAU;GAC7B,UAAA,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACC,kBAACV,GAAD;MAAM,eAAY;MAAO,WAAU;MAA+B,aAAa;KAAM,CAAA;KACrF,kBAAC,QAAD;MAAM,MAAK;MAAS,WAAWQ,EAAGV,EAAG,WAAW,aAAa,sBAAsB;MACjF,UAAAO;KACI,CAAA;KACN,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACEP,EAAG;OAAU;OAAEA,EAAG;MACd;;IACD;;EACa,CAAA,GACpB,kBAACa,GAAD;GAAoB,UAAA;GACnB,UAAA,kBAAC,MAAD;IACC,cAAW;IACX,WAAU;IAFX,UAAA,CAIEC,EAAM,KAAK,MACX,kBAAC,MAAD;KAEC,oBAAkBC,EAAK;KACvB,WAAU;KAHX,UAAA,CAKC,kBAAC,QAAD;MACC,WAAU;MACV,MAAK;MACL,cAAYA,EAAK;MAEhB,UAAAA,EAAK,WAAW,YAChB,kBAACC,GAAD;OAAQ,MAAM;OAAI,WAAW;OAAO,aAAa;OAAO,eAAY;MAAQ,CAAA,IACzED,EAAK,WAAW,aACnB,kBAACE,GAAD,EAAO,MAAM,GAAK,CAAA,IACfF,EAAK,WAAW,UACnB,kBAACG,GAAD;OAAa,MAAM;OAAI,WAAU;MAAsB,CAAA,IAEvD,kBAACC,GAAD,EAAQ,MAAM,GAAK,CAAA;KAEf,CAAA,GACN,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,kBAAC,KAAD;OAAG,WAAWT,EAAG,oBAAoBP,MAAY,YAAY,WAAW;OACtE,UAAAY,EAAK;MACJ,CAAA,GACFA,EAAK,UACL,kBAAC,KAAD;OAAG,WAAU;OACX,UAAAA,EAAK;MACJ,CAAA,CAEA;KACF,CAAA,CAAA;IA7BE,GAAAA,EAAK,EA6BP,CACJ,GACAD,EAAM,WAAW,KACjB,kBAAC,MAAD;KAAI,WAAU;KAA8C,UAAA;IAAgB,CAAA,CAE1E;;EACe,CAAA,CACR;;AAEf"}