@nocoo/basalt 2.2.0 → 3.0.0

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

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

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

@@ -7,7 +7,7 @@ import { ArrowLeft as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/responsive-master-detail.tsx
 function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange: m, selectedId: h, listLabel: g = "Items", detailLabel: _ = "Details", backLabel: v = "Back to items", empty: y = /* @__PURE__ */ c("p", {
-	className: "p-6 text-sm text-basalt-muted-foreground",
+	className: "p-basalt-layout text-basalt-base text-basalt-muted-foreground",
 	children: "Choose an item to see its details."
 }), className: b }) {
 	let [x, S] = o(!1), C = a(null), w = a(null), T = a(null), E = a({
@@ -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 bg-basalt-card 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("min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border", p && "hidden md:block"),
 			onFocusCapture: (e) => {
 				e.target !== e.currentTarget && (T.current = e.target);
 			},
@@ -61,9 +61,9 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			className: e("min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain", !p && "hidden md:block"),
 			children: [
 				x && p && /* @__PURE__ */ c("div", {
-					className: "border-b border-basalt-border p-2",
+					className: "border-b border-basalt-border p-basalt-space-lg",
 					children: /* @__PURE__ */ l(n, {
-						className: "min-h-11",
+						className: "min-h-basalt-touch",
 						variant: "ghost",
 						onClick: () => m(!1),
 						children: [/* @__PURE__ */ c(s, {}), v]

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

@@ -1 +1 @@
-{"version":3,"file":"responsive-master-detail.js","names":["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-6 text-sm text-basalt-muted-foreground\">Choose an item to see its details.</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-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 bg-basalt-card 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-2\">\n\t\t\t\t\t\t<Button className=\"min-h-11\" variant=\"ghost\" onClick={() => onDetailOpenChange(false)}>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAA2C,UAAA;AAAqC,CAAA,GAE9F,gBAC+B;CAC/B,IAAM,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,2MACAJ,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;MAAQ,WAAU;MAAW,SAAQ;MAAQ,eAAeC,EAAmB,EAAK;MAApF,UAAA,CACC,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\"min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\tif (event.target !== event.currentTarget) opener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-basalt-space-lg\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"min-h-basalt-touch\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => onDetailOpenChange(false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAAgE,UAAA;AAE1E,CAAA,GAEJ,gBAC+B;CAC/B,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAaC,EAAoB,IAAI,GACrCC,IAAeD,EAAoB,IAAI,GACvCE,IAASF,EAA2B,IAAI,GACxCG,IAAWH,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBAI,QAAgB;EACf,IAAMC,IAAQ,OAAO,WAAW,oBAAoB,GAC9CC,UAAeT,EAAWQ,EAAM,OAAO;EAG7C,OAFAC,EAAO,GACPD,EAAM,iBAAiB,UAAUC,CAAM,SAC1BD,EAAM,oBAAoB,UAAUC,CAAM;CACxD,GAAG,CAAC,CAAC,GACLC,QAAsB;EACrB,IAAMC,IAASL,EAAS;EAOxB,IALCP,KACAa,MACC,CAACD,EAAO,WAAW,CAACA,EAAO,cAAcA,EAAO,eAAeE,MAEhET,EAAa,SAAS,MAAM,GACzBL,KAAW,CAACa,KAAcD,EAAO,YAAY;GAChD,IAAMG,IAAST,EAAO;GACtB,AAAIS,GAAQ,eAAe,CAACA,EAAO,QAAQ,mBAAmB,IAAGA,EAAO,MAAM,IACzEZ,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAACH;EAASa;EAAYC;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYE;EACZ,WAAWC,EACVC,GACA,sJACAC,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAKhB;GACL,cAAYiB;GACZ,UAAU;GACV,QAAQpB,KAAWa;GACnB,OAAOb,KAAWa;GAClB,WAAWI,EACV,4LACAJ,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,AAAIQ,EAAM,WAAWA,EAAM,kBAAe,EAAO,UAAUA,EAAM;GAClE;GACA,uBAAuB,MAAU;IAChC,IAAMN,IAAUM,EAAM,OAAmB,QACxC,oCACD;IACA,AAAIN,MAAQ,EAAO,UAAUA;GAC9B;GAEC,UAAAO;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAKjB;GACL,cAAYkB;GACZ,UAAU;GACV,QAAQvB,KAAW,CAACa;GACpB,OAAOb,KAAW,CAACa;GACnB,WAAWI,EACV,6KACA,CAACJ,KAAc,iBAChB;GATD,UAAA;IAWEb,KAAWa,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAACW,GAAD;MACC,WAAU;MACV,SAAQ;MACR,eAAeC,EAAmB,EAAK;MAHxC,UAAA,CAKC,kBAACC,GAAD,CAAY,CAAA,GACXC,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAACd;KAAY,OAAO,CAACA;KAChC;IACG,CAAA;IACJ,CAACA,KAAce;GACR;EACL,CAAA,CAAA;;AAEP"}

package/dist/components/scroll-area.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["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 motion-reduce:transition-none\";\n\nfunction ScrollBar({ orientation }: { orientation: \"horizontal\" | \"vertical\" }) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\tSCROLLBAR_CLASSES,\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"h-full w-2.5 border-l border-l-transparent\"\n\t\t\t\t\t: \"h-2.5 flex-col border-t border-t-transparent\",\n\t\t\t)}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb\n\t\t\t\tdata-slot=\"scroll-area-thumb\"\n\t\t\t\tclassName=\"relative flex-1 rounded-full bg-basalt-border\"\n\t\t\t/>\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t);\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n\t(\n\t\t{\n\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonScroll,\n\t\t\torientation = \"vertical\",\n\t\t\trole,\n\t\t\ttabIndex = 0,\n\t\t\tviewportClassName,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasVertical = orientation !== \"horizontal\";\n\t\tconst hasHorizontal = orientation !== \"vertical\";\n\t\tconst viewportRole = role ?? (ariaLabel || ariaLabelledBy ? \"region\" : undefined);\n\n\t\treturn (\n\t\t\t<ScrollAreaPrimitive.Root\n\t\t\t\tdata-slot=\"scroll-area\"\n\t\t\t\tclassName={cn(\"relative min-h-0 min-w-0 overflow-hidden\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-orientation={orientation}\n\t\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\trole={viewportRole}\n\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAME,IACL;AAED,SAASC,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAACF,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAWG,EACVF,GACAG,MAAgB,aACb,+CACA,8CACJ;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\"size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAME,IACL;AAED,SAASC,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAACF,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAWG,EACVF,GACAG,MAAgB,aACb,sDACA,qDACJ;EAEA,UAAA,kBAACJ,EAAoB,OAArB;GACC,aAAU;GACV,WAAU;EACV,CAAA;CAC6B,CAAA;AAEjC;AAEA,IAAaK,IAAaN,EAAM,YAE9B,EACC,oBAAoBO,GACpB,cAAcC,GACd,mBAAmBC,GACnB,aACA,cACA,aACA,iBAAc,YACd,SACA,cAAW,GACX,sBACA,GAAGC,KAEJ,MACI;CACJ,IAAMC,IAAcN,MAAgB,cAC9BO,IAAgBP,MAAgB,YAChCQ,IAAeC,MAASN,KAAaC,IAAiB,WAAW,KAAA;CAEvE,OACC,kBAACR,EAAoB,MAArB;EACC,aAAU;EACV,WAAWG,EAAG,4CAA4CW,CAAS;EACnE,GAAIL;EAHL,UAAA;GAKC,kBAACT,EAAoB,UAArB;IACM;IACL,oBAAkBI;IAClB,aAAU;IACV,oBAAkBE;IAClB,cAAYC;IACZ,mBAAiBC;IACjB,MAAMI;IACI;IACA;IACV,WAAWT,EACV,0KACAC,MAAgB,cAAc,sBAC9BA,MAAgB,gBAAgB,sBAChCW,CACD;IAEC;GAC4B,CAAA;GAC7BL,IAAc,kBAACR,GAAD,EAAW,aAAY,WAAY,CAAA,IAAI;GACrDS,IAAgB,kBAACT,GAAD,EAAW,aAAY,aAAc,CAAA,IAAI;GACzDQ,KAAeC,IACf,kBAACX,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA,IACzD;EACqB;;AAE5B,CACD;AACA,EAAW,cAAc"}

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

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

package/dist/components/section-rule.js

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

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

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

package/dist/components/segment-control.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"segment-control.js","names":["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(\"min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-2 block text-xs font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div data-slot=\"segment-control-viewport\" className=\"max-w-full overflow-x-auto pb-1\">\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,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,wBAAwBC,CAAS;EAC/C,GAAIN;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAIC;GACJ,WAAU;GAET,UAAAM;EACM,CAAA,GACR,kBAAC,OAAD;GAAK,aAAU;GAA2B,WAAU;GACnD,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 overflow-x-auto pb-basalt-space-sm\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAaC,IAAiBD,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAGE,KACpF,MACI;CACJ,IAAMC,IAAWH,EAAM,MAAM,GACvBI,IAAyCC,IAC5C,CAAC;EAAE,GAAGA;EAAW,OAAOA,EAAU,SAAS;CAAM,GAAG,GAAGC,CAAO,IAC9DA;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIN;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAIC;GACJ,WAAU;GAET,UAAAM;EACM,CAAA,GACR,kBAAC,OAAD;GACC,aAAU;GACV,WAAU;GAEV,UAAA,kBAACC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAIC,KACHC,EAAcD,CAAS;IAEzB;IACA,mBAAiBR;IACjB,WAAU;IAET,UAAAC,EAAM,KAAK,MACX,kBAACS,GAAD;KAAkC,OAAOC,EAAK;KAAO,UAAUA,EAAK;KAClE,UAAAA,EAAK;IACU,GAFKA,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}

package/dist/components/select.js

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

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","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 { 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: \"h-8 px-2.5 text-xs\",\n\tdefault: \"h-9 px-3 text-sm\",\n\tlg: \"h-10 px-4 text-base\",\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\"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 className=\"h-4 w-4 opacity-50\" />\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(\"px-2 py-1.5 text-xs text-basalt-muted-foreground\", className)}\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\t<SelectPrimitive.Portal>\n\t\t<SelectPrimitive.Content\n\t\t\tref={ref}\n\t\t\tposition={position}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(\n\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n\t\t</SelectPrimitive.Content>\n\t</SelectPrimitive.Portal>\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\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative pr-8 outline-hidden hover:bg-basalt-accent focus-visible:bg-basalt-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2\">\n\t\t\t<Check className=\"h-3.5 w-3.5\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAwBA,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,4CACAN,EAAkBO,IAClBC,GACA,+FACAC,CACD,CACD;CAbD,UAAA,CAeEC,GACD,kBAACC,GAAD,EAAa,WAAU,qBAAsB,CAAA,CACrB;AACzB,CAAA,CAAA;AACD,EAAc,cAAcf,EAAgB,QAAQ;AAYpD,IAAagB,IAAcjB,EAAM,YAG9B,EAAE,cAAW,GAAGO,KAAS,MAC3B,kBAACN,EAAgB,OAAjB;CACM;CACL,WAAWU,EAAG,oDAAoDG,CAAS;CAC3E,GAAIP;AACJ,CAAA,CACD;AACD,EAAY,cAAcN,EAAgB,MAAM;AAkBhD,IAAaiB,IAAgBlB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAGO,KAAS,MACpF,kBAACN,EAAgB,QAAjB,EAAA,UACC,kBAACA,EAAgB,SAAjB;CACM;CACK;CACE;CACZ,WAAWkB,EACVR,EAAGS,MAAa,YAAY,yCAAyCN,CAAS,CAC/E;CACA,GAAIP;CAEJ,UAAA,kBAACN,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;AACtC,CAAA,EACF,CAAA,CACxB;AACD,EAAc,cAAcA,EAAgB,QAAQ;AAYpD,IAAaoB,IAAarB,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAGO,KAAS,MACrC,kBAACN,EAAgB,MAAjB;CACM;CACL,WAAWqB,EACVX,EACC,0LACAG,CACD,CACD;CACA,GAAIP;CARL,UAAA,CAUC,kBAACN,EAAgB,UAAjB,EAA2B,YAAmC,CAAA,GAC9D,kBAACA,EAAgB,eAAjB;EAA+B,WAAU;EACxC,UAAA,kBAACsB,GAAD,EAAO,WAAU,cAAe,CAAA;CACF,CAAA,CACV;AACtB,CAAA,CAAA;AACD,EAAW,cAActB,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\",\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"}

package/dist/components/sensitive-input.js

@@ -1,36 +1,34 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Button as t } from "./button.js";
-import { Input as n } from "./input.js";
-import * as r from "react";
-import { Eye as i, EyeOff as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { controlSurfaceClass as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
+import { Input as r } from "./input.js";
+import * as i from "react";
+import { Eye as a, EyeOff as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/sensitive-input.tsx
-var c = {
-	sm: "h-8 w-8",
-	default: "h-9 w-9",
-	lg: "h-10 w-10"
-}, l = r.forwardRef(({ className: l, revealLabel: u, hideLabel: d, disabled: f, size: p = "default", passwordManagerIgnore: m = !1, ...h }, g) => {
-	let [_, v] = r.useState(!1);
-	return /* @__PURE__ */ s("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ o(n, {
+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"),
+		children: [/* @__PURE__ */ s(r, {
 			ref: g,
 			type: _ ? "text" : "password",
 			size: p,
 			passwordManagerIgnore: m,
-			className: e("pr-10", l),
+			className: e("min-w-0 flex-1 border-0 bg-transparent shadow-none", l),
 			disabled: f,
 			...h
-		}), /* @__PURE__ */ o(t, {
+		}), /* @__PURE__ */ s(n, {
 			type: "button",
 			variant: "ghost",
-			className: e("absolute right-0 top-0", c[p]),
+			size: p === "default" ? "icon" : p,
+			className: "basalt-action-icon basalt-action-inset shrink-0",
 			"aria-label": _ ? d : u,
 			disabled: f,
 			onClick: () => v((e) => !e),
-			children: o(_ ? a : i, {
-				className: "h-4 w-4",
+			children: s(_ ? o : a, {
+				className: "h-basalt-4 w-basalt-4",
 				"aria-hidden": "true"
 			})
 		})]

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

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input.js","names":["React","TOGGLE_SIZE_CLASS","SensitiveInput","props","revealed","setRevealed","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 { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nconst TOGGLE_SIZE_CLASS: Record<InputSize, string> = {\n\tsm: \"h-8 w-8\",\n\tdefault: \"h-9 w-9\",\n\tlg: \"h-10 w-10\",\n};\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 className=\"relative\">\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(\"pr-10\", 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\tclassName={cn(\"absolute right-0 top-0\", TOGGLE_SIZE_CLASS[size])}\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-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-4 w-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":";;;;;;;;AAMA,IAAMC,IAA+C;CACpD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBaC,IAAiBF,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAGG,KAEJ,MACI;CACJ,IAAM,CAACC,GAAUC,KAAeL,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAACM,GAAD;GACM;GACL,MAAMF,IAAW,SAAS;GACpB;GACiB;GACvB,WAAWG,EAAG,SAASC,CAAS;GACtB;GACV,GAAIL;EACJ,CAAA,GACD,kBAACM,GAAD;GACC,MAAK;GACL,SAAQ;GACR,WAAWF,EAAG,0BAA0BN,EAAkBS,EAAK;GAC/D,cAAYN,IAAWO,IAAYC;GACzB;GACV,eAAeP,GAAa,MAAU,CAACQ,CAAK;GAE3C,UACAC,EADAV,IACCW,IAEAC,GAFD;IAAQ,WAAU;IAAU,eAAY;GAAQ,CAEH;EAEvC,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\"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"}

package/dist/components/sheet.d.ts

@@ -64,10 +64,10 @@ export interface SheetDescriptionProps extends Omit<RadixDialogDescriptionProps,
 }
 export declare const SheetDescription: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const SIDE: {
-    readonly right: "fixed inset-y-0 right-0 basalt-ui flex h-full w-80 flex-col gap-3 border-l border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
-    readonly left: "fixed inset-y-0 left-0 basalt-ui flex h-full w-80 flex-col gap-3 border-r border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
-    readonly top: "fixed inset-x-0 top-0 basalt-ui flex h-80 w-full flex-col gap-3 border-b border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
-    readonly bottom: "fixed inset-x-0 bottom-0 basalt-ui flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg";
+    readonly right: "fixed inset-y-0 right-0 basalt-ui 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";
+    readonly left: "fixed inset-y-0 left-0 basalt-ui 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";
+    readonly top: "fixed inset-x-0 top-0 basalt-ui 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";
+    readonly bottom: "fixed inset-x-0 bottom-0 basalt-ui 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";
 };
 export type SheetSide = keyof typeof SIDE;
 export interface SheetContentProps extends Omit<RadixDialogContentProps, "side" | "asChild" | "forceMount" | "trapFocus" | "onOpenAutoFocus" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {

package/dist/components/sheet.js

@@ -8,31 +8,32 @@ 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-lg font-semibold leading-none tracking-tight", t),
+	className: e("text-basalt-lg font-semibold leading-basalt-tight tracking-tight", t),
 	...n
 }));
 d.displayName = s.Title.displayName;
 var f = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Description, {
 	ref: r,
-	className: e("text-sm text-basalt-muted-foreground", t),
+	className: e("text-basalt-base leading-[var(--basalt-line-body)] text-basalt-muted-foreground", t),
 	...n
 }));
 f.displayName = s.Description.displayName;
 var p = {
-	right: `fixed inset-y-0 right-0 ${t} flex h-full w-80 flex-col gap-3 border-l border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg`,
-	left: `fixed inset-y-0 left-0 ${t} flex h-full w-80 flex-col gap-3 border-r border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg`,
-	top: `fixed inset-x-0 top-0 ${t} flex h-80 w-full flex-col gap-3 border-b border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg`,
-	bottom: `fixed inset-x-0 bottom-0 ${t} flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg`
+	right: `fixed inset-y-0 right-0 ${t} 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`,
+	left: `fixed inset-y-0 left-0 ${t} 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`,
+	top: `fixed inset-x-0 top-0 ${t} 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`,
+	bottom: `fixed inset-x-0 bottom-0 ${t} 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`
 }, m = i.forwardRef(({ className: t, side: i = "right", children: c, ...l }, u) => /* @__PURE__ */ o(s.Portal, {
 	forceMount: l.forceMount,
 	children: [/* @__PURE__ */ a(s.Overlay, {
 		forceMount: l.forceMount,
-		className: e("fixed inset-0 bg-black/50 backdrop-blur-xs", n, r)
+		className: e("basalt-sheet-overlay fixed inset-0 bg-basalt-backdrop/50", n, r)
 	}), /* @__PURE__ */ a(s.Content, {
 		ref: u,
 		"data-basalt-sheet": "",
+		"data-side": i,
 		"data-basalt-surface-root": "",
-		className: e(n, r, p[i], t),
+		className: e(n, r, "max-h-dvh max-w-full", p[i], t),
 		...l,
 		style: {
 			boxSizing: "border-box",
@@ -43,12 +44,12 @@ var p = {
 }));
 m.displayName = "SheetContent";
 var h = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: e("flex flex-col space-y-2 text-left", t),
+	className: e("flex flex-col space-y-basalt-space-lg text-left", t),
 	...n
 });
 h.displayName = "SheetHeader";
 var g = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+	className: e("flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end", t),
 	...n
 });
 g.displayName = "SheetFooter";