@nocoo/basalt 2.2.0 → 3.1.0

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";

package/dist/components/sheet.js.map

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

package/dist/components/sidebar.js

@@ -1,53 +1,55 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
-import { OVERLAY_LAYER as n, OVERLAY_MOTION as r } from "./overlay.js";
-import { Dialog as i, DialogOverlay as a, DialogPortal as o } from "./dialog.js";
-import { Collapsible as s, CollapsibleContent as c, CollapsibleTrigger as l } from "./collapsible.js";
-import { SkeletonLine as u } from "./skeleton-line.js";
-import { createContext as d, useCallback as f, useContext as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
-import { ChevronUp as _, Search as v } from "lucide-react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import * as x from "@radix-ui/react-dialog";
+import { FOCUS_INSET as n, OVERLAY_LAYER as r, OVERLAY_MOTION as i } from "./overlay.js";
+import { Dialog as a, DialogOverlay as o, DialogPortal as s } from "./dialog.js";
+import { Collapsible as c, CollapsibleContent as l, CollapsibleTrigger as u } from "./collapsible.js";
+import { useHoverHighlight as d } from "../utils/use-hover-highlight.js";
+import { SkeletonLine as f } from "./skeleton-line.js";
+import { NAV_ITEM_CLASS as p, NAV_LIST_CLASS as m, NAV_ROW_CLASS as h } from "../utils/navigation.js";
+import { createContext as g, useCallback as _, useContext as v, useLayoutEffect as y, useRef as b, useState as x } from "react";
+import { ChevronUp as S, Search as C } from "lucide-react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import * as E from "@radix-ui/react-dialog";
 //#region src/components/sidebar.tsx
-var S = d(null);
-function C() {
-	let e = p(S);
+var D = g(null);
+function O() {
+	let e = v(D);
 	if (!e) throw Error("useSidebar must be used within SidebarProvider");
 	return e;
 }
-function w({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, side: r = "left", loading: i = !1, peek: a = !1, overlay: o = !1, defaultWidth: s = 260, children: c }) {
-	let [l, u] = g(t), [d, p] = g(!1), [_, v] = g(() => T(s)), b = f((e) => {
-		v(T(e));
-	}, []), x = h(null), C = h(e ?? t), w = h(o), E = e ?? l;
-	m(() => {
-		o && !E && (C.current || !w.current) && document.activeElement instanceof HTMLElement && (x.current = document.activeElement), C.current = E, w.current = o;
+function k({ collapsed: e, defaultCollapsed: t = !1, onCollapsedChange: n, side: r = "left", loading: i = !1, peek: a = !1, overlay: o = !1, defaultWidth: s = 260, children: c }) {
+	let [l, u] = x(t), [d, f] = x(!1), [p, m] = x(() => A(s)), h = _((e) => {
+		m(A(e));
+	}, []), g = b(null), v = b(e ?? t), S = b(o), C = e ?? l;
+	y(() => {
+		o && !C && (v.current || !S.current) && document.activeElement instanceof HTMLElement && (g.current = document.activeElement), v.current = C, S.current = o;
 	});
-	let D = f((t) => {
-		!t && document.activeElement instanceof HTMLElement && (x.current = document.activeElement), e === void 0 && u(t), n?.(t);
+	let T = _((t) => {
+		!t && document.activeElement instanceof HTMLElement && (g.current = document.activeElement), e === void 0 && u(t), n?.(t);
 	}, [e, n]);
-	return /* @__PURE__ */ y(S.Provider, {
+	return /* @__PURE__ */ w(D.Provider, {
 		value: {
-			collapsed: E,
-			setCollapsed: D,
+			collapsed: C,
+			setCollapsed: T,
 			side: r,
 			loading: i,
 			peek: a,
 			peeking: d,
-			setPeeking: p,
+			setPeeking: f,
 			overlay: o,
-			width: _,
-			setWidth: b,
-			lastFocusRef: x
+			width: p,
+			setWidth: h,
+			lastFocusRef: g
 		},
 		children: c
 	});
 }
-function T(e) {
+function A(e) {
 	return Math.min(400, Math.max(180, e));
 }
-function E({ side: t, width: n, onWidth: r }) {
-	return /* @__PURE__ */ y("div", {
+function j({ side: t, width: n, onWidth: r }) {
+	return /* @__PURE__ */ w("div", {
 		role: "separator",
 		"aria-orientation": "vertical",
 		"aria-valuenow": n,
@@ -55,12 +57,12 @@ function E({ side: t, width: n, onWidth: r }) {
 		"aria-valuemax": 400,
 		"aria-label": "Resize sidebar",
 		tabIndex: 0,
-		className: e("absolute top-0 h-full w-1 cursor-col-resize bg-transparent", t === "right" ? "left-0" : "right-0"),
+		className: e("absolute top-0 h-full w-basalt-1 cursor-col-resize bg-transparent", t === "right" ? "left-0" : "right-0"),
 		onPointerDown: (e) => {
 			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId);
 			let i = e.clientX, a = n, o = e.currentTarget, s = (e) => {
 				let n = t === "right" ? i - e.clientX : e.clientX - i;
-				r(T(a + n));
+				r(A(a + n));
 			}, c = () => {
 				o.removeEventListener("pointermove", s), o.removeEventListener("pointerup", c), o.removeEventListener("pointercancel", c);
 			};
@@ -70,180 +72,190 @@ function E({ side: t, width: n, onWidth: r }) {
 			if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 			e.preventDefault();
 			let i = e.key === "ArrowRight" ? 1 : -1;
-			r(T(n + (t === "right" ? -i * 8 : i * 8)));
+			r(A(n + (t === "right" ? -i * 8 : i * 8)));
 		}
 	});
 }
-function D({ collapsed: s, className: c, children: l, onMouseEnter: d, onMouseLeave: f, style: m, ...h }) {
-	let g = p(S), _ = g ? g.collapsed && !(g.peek && g.peeking) : s ?? !1, v = g?.side ?? "left", C = g?.overlay ?? !1, w = g?.width ?? 260, T = g?.loading ? /* @__PURE__ */ b("div", {
-		className: "flex flex-col gap-2 p-3",
+function M({ collapsed: n, className: c, children: l, onMouseEnter: u, onMouseLeave: d, style: p, ...m }) {
+	let h = v(D), g = h ? h.collapsed && !(h.peek && h.peeking) : n ?? !1, _ = h?.side ?? "left", y = h?.overlay ?? !1, b = h?.width ?? 260, x = h?.loading ? /* @__PURE__ */ T("div", {
+		className: "flex flex-col gap-basalt-space-lg p-basalt-space-lg",
 		role: "status",
 		"aria-live": "polite",
 		children: [
-			/* @__PURE__ */ y(u, {}),
-			/* @__PURE__ */ y(u, {}),
-			/* @__PURE__ */ y(u, {})
+			/* @__PURE__ */ w(f, {}),
+			/* @__PURE__ */ w(f, {}),
+			/* @__PURE__ */ w(f, {})
 		]
-	}) : l, D = g && !_ ? /* @__PURE__ */ y(E, {
-		side: v,
-		width: g.width,
-		onWidth: g.setWidth
-	}) : null, O = e(t, "relative flex shrink-0 flex-col bg-basalt-background text-sm text-basalt-foreground", r, c);
-	return C && g ? /* @__PURE__ */ y(i, {
-		open: !g.collapsed,
-		onOpenChange: (e) => g.setCollapsed(!e),
-		children: /* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(a, {}), /* @__PURE__ */ b(x.Content, {
+	}) : l, S = h && !g ? /* @__PURE__ */ w(j, {
+		side: _,
+		width: h.width,
+		onWidth: h.setWidth
+	}) : null, C = e(t, "relative flex shrink-0 flex-col bg-basalt-background text-basalt-base text-basalt-foreground", i, c);
+	return y && h ? /* @__PURE__ */ w(a, {
+		open: !h.collapsed,
+		onOpenChange: (e) => h.setCollapsed(!e),
+		children: /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ w(o, {}), /* @__PURE__ */ T(E.Content, {
 			"data-basalt-sidebar": "",
 			"aria-label": "Sidebar",
 			"data-overlay": "",
-			"data-side": v,
-			"aria-busy": g.loading || void 0,
-			onMouseEnter: d,
-			onMouseLeave: f,
+			"data-side": _,
+			"aria-busy": h.loading || void 0,
+			onMouseEnter: u,
+			onMouseLeave: d,
 			ref: (e) => {
-				e && document.activeElement instanceof HTMLElement && !e.contains(document.activeElement) && (g.lastFocusRef.current = document.activeElement);
+				e && document.activeElement instanceof HTMLElement && !e.contains(document.activeElement) && (h.lastFocusRef.current = document.activeElement);
 			},
 			onOpenAutoFocus: (e) => {
 				let t = "relatedTarget" in e ? e.relatedTarget : null;
-				t instanceof HTMLElement && (g.lastFocusRef.current = t);
+				t instanceof HTMLElement && (h.lastFocusRef.current = t);
 			},
 			onCloseAutoFocus: (e) => {
-				e.preventDefault(), g.lastFocusRef.current?.focus();
+				e.preventDefault(), h.lastFocusRef.current?.focus();
 			},
-			className: e(O, n, "fixed inset-y-0 overflow-hidden shadow-md", v === "right" ? "right-0" : "left-0"),
+			className: e(C, r, "fixed inset-y-0 overflow-hidden shadow-md", _ === "right" ? "right-0" : "left-0"),
 			style: {
-				width: w,
-				...m
+				width: b,
+				...p
 			},
-			...h,
-			children: [T, D]
+			...m,
+			children: [x, S]
 		})] })
-	}) : /* @__PURE__ */ b("aside", {
+	}) : /* @__PURE__ */ T("aside", {
 		"data-basalt-sidebar": "",
-		"data-collapsed": _ ? "" : void 0,
-		"data-side": v,
-		"aria-busy": g?.loading || void 0,
+		"data-collapsed": g ? "" : void 0,
+		"data-side": _,
+		"aria-busy": h?.loading || void 0,
 		onMouseEnter: (e) => {
-			g?.peek && g.collapsed && g.setPeeking(!0), d?.(e);
+			h?.peek && h.collapsed && h.setPeeking(!0), u?.(e);
 		},
 		onMouseLeave: (e) => {
-			g?.peek && g.setPeeking(!1), f?.(e);
+			h?.peek && h.setPeeking(!1), d?.(e);
 		},
-		className: e(O, "sticky transition-all duration-300 ease-in-out", v === "right" ? "order-last" : void 0, _ ? "w-[68px] overflow-y-hidden" : "overflow-hidden"),
-		style: _ ? m : {
-			width: w,
-			...m
+		className: e(C, "sticky overflow-hidden transition-[width] basalt-motion duration-basalt-normal ease-basalt", _ === "right" ? "order-last" : void 0, g && "w-basalt-rail"),
+		style: g ? p : {
+			width: b,
+			...p
 		},
-		...h,
-		children: [T, D]
+		...m,
+		children: [x, S]
 	});
 }
-function O({ className: t, ...n }) {
-	return /* @__PURE__ */ y("div", {
-		className: e("flex h-14 shrink-0 items-center px-3", t),
+var N = "min-h-[calc(var(--basalt-line-row)+2*var(--basalt-space-lg))] py-basalt-space-lg";
+function P({ className: t, ...n }) {
+	return /* @__PURE__ */ w("div", {
+		"data-slot": "sidebar-header",
+		className: e("flex h-basalt-14 shrink-0 items-center gap-basalt-row-gap px-basalt-nav-inset", t),
 		...n
 	});
 }
-function k({ shortcut: n = "⌘K", className: r, children: i, ...a }) {
-	return /* @__PURE__ */ b("button", {
+function F({ shortcut: n = "⌘K", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ T("button", {
 		type: "button",
-		className: e(t, "flex w-full cursor-pointer items-center gap-3 rounded-lg bg-basalt-secondary px-3 py-1.5 transition-colors hover:bg-basalt-accent", r),
+		className: e(t, h, N, "w-full cursor-pointer bg-basalt-secondary transition-colors basalt-motion hover:bg-basalt-hover", r),
 		...a,
 		children: [
-			/* @__PURE__ */ y(v, {
-				className: "h-4 w-4 text-basalt-muted-foreground",
+			/* @__PURE__ */ w(C, {
+				className: "h-basalt-4 w-basalt-4 text-basalt-muted-foreground",
 				strokeWidth: 1.5
 			}),
-			/* @__PURE__ */ y("span", {
-				className: "flex-1 text-left text-sm text-basalt-muted-foreground",
+			/* @__PURE__ */ w("span", {
+				className: "flex-1 text-left text-basalt-base text-basalt-muted-foreground",
 				children: i
 			}),
-			/* @__PURE__ */ y("kbd", {
-				className: "pointer-events-none hidden rounded-sm border border-basalt-border bg-basalt-card px-1.5 py-0.5 text-[10px] font-medium text-basalt-muted-foreground sm:inline-block",
+			/* @__PURE__ */ w("kbd", {
+				className: "pointer-events-none hidden rounded-basalt-sm border border-basalt-border bg-basalt-card px-basalt-space-md py-basalt-space-xs text-basalt-xs font-medium text-basalt-muted-foreground sm:inline-block",
 				children: n
 			})
 		]
 	});
 }
-function A({ className: t, ...n }) {
-	return /* @__PURE__ */ y("nav", {
-		className: e("flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain", t),
+function I({ className: t, ...n }) {
+	let r = d(void 0, { restoreOnPointerLeave: !1 });
+	return /* @__PURE__ */ w("nav", {
+		ref: r,
+		"data-slot": "sidebar-nav",
+		className: e(m, "min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain", t),
 		...n
 	});
 }
-function j({ className: t, ...n }) {
-	return /* @__PURE__ */ y("p", {
-		className: e("px-6 pt-3 pb-1 text-[11px] font-medium tracking-[0.14em] text-basalt-muted-foreground uppercase", t),
+function L({ className: t, ...n }) {
+	return /* @__PURE__ */ w("p", {
+		"data-slot": "sidebar-partition",
+		className: e("shrink-0 px-basalt-row-x pt-basalt-layout pb-basalt-space-lg text-basalt-sm font-semibold tracking-wide text-basalt-foreground uppercase", t),
 		...n
 	});
 }
-function M({ active: t = !1, className: n, ...r }) {
-	return /* @__PURE__ */ y("button", {
+function R({ active: t = !1, className: n, ...r }) {
+	return /* @__PURE__ */ w("button", {
 		type: "button",
 		"aria-current": t ? "page" : void 0,
-		className: e("flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-normal transition-colors", t ? "bg-basalt-accent text-basalt-foreground" : "text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground", n),
+		"data-basalt-hover-item": "",
+		"data-sidebar-row": "",
+		"data-hover-selected": t,
+		className: e(p, N, "w-full", n),
 		...r
 	});
 }
-function N({ active: t = !1, className: n, ...r }) {
-	return /* @__PURE__ */ y("button", {
+function z({ active: t = !1, className: n, ...r }) {
+	return /* @__PURE__ */ w("button", {
 		type: "button",
 		"aria-current": t ? "page" : void 0,
-		className: e("relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors", t ? "bg-basalt-accent text-basalt-foreground" : "text-basalt-muted-foreground hover:bg-basalt-accent hover:text-basalt-foreground", n),
+		"data-basalt-hover-item": "",
+		"data-sidebar-row": "",
+		"data-hover-selected": t,
+		className: e(p, N, "relative w-basalt-control justify-center", n),
 		...r
 	});
 }
-function P({ label: t, defaultOpen: n = !0, children: i }) {
-	let [a, o] = g(n);
-	return /* @__PURE__ */ b(s, {
-		open: a,
-		onOpenChange: o,
-		children: [/* @__PURE__ */ y("div", {
-			className: "mt-2 px-3",
-			children: /* @__PURE__ */ y(l, {
-				asChild: !0,
-				children: /* @__PURE__ */ b("button", {
-					type: "button",
-					className: "flex w-full items-center justify-between px-3 py-2.5",
-					children: [/* @__PURE__ */ y("span", {
-						className: "text-sm font-normal text-basalt-muted-foreground",
-						children: t
-					}), /* @__PURE__ */ y("span", {
-						className: "flex h-7 w-7 shrink-0 items-center justify-center",
-						children: /* @__PURE__ */ y(_, {
-							className: e("h-4 w-4 text-basalt-muted-foreground transition-transform duration-200", r, !a && "rotate-180"),
-							strokeWidth: 1.5
-						})
-					})]
-				})
+function B({ label: t, defaultOpen: r = !0, children: a }) {
+	let [o, s] = x(r);
+	return /* @__PURE__ */ T(c, {
+		open: o,
+		onOpenChange: s,
+		"data-slot": "sidebar-group",
+		className: "shrink-0 pt-basalt-layout-sm",
+		children: [/* @__PURE__ */ w(u, {
+			asChild: !0,
+			children: /* @__PURE__ */ T("button", {
+				type: "button",
+				"data-slot": "sidebar-group-label",
+				className: e("flex w-full cursor-pointer items-center justify-between gap-basalt-row-gap rounded-basalt-md px-basalt-row-x py-basalt-space-lg text-left text-basalt-xs font-semibold leading-basalt-row tracking-wide text-basalt-muted-foreground uppercase transition-colors basalt-motion hover:text-basalt-foreground", n),
+				children: [/* @__PURE__ */ w("span", {
+					className: "min-w-0 truncate",
+					children: t
+				}), /* @__PURE__ */ w(S, {
+					className: e("h-basalt-4 w-basalt-4 text-basalt-muted-foreground transition-transform basalt-motion duration-basalt-normal", i, !o && "rotate-180"),
+					strokeWidth: 1.5
+				})]
 			})
-		}), /* @__PURE__ */ y(c, {
+		}), /* @__PURE__ */ w(l, {
 			unstyled: !0,
-			children: /* @__PURE__ */ y("div", {
-				className: "flex flex-col gap-0.5 px-3",
-				children: i
+			children: /* @__PURE__ */ w("div", {
+				className: "flex flex-col gap-basalt-nav-gap pt-basalt-nav-gap",
+				children: a
 			})
 		})]
 	});
 }
-function F({ className: t, ...n }) {
-	return /* @__PURE__ */ y("div", {
-		className: e("shrink-0 px-4 py-3", t),
+function V({ className: t, ...n }) {
+	return /* @__PURE__ */ w("div", {
+		"data-slot": "sidebar-footer",
+		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-nav-inset py-basalt-nav-inset", t),
 		...n
 	});
 }
-function I({ name: t, email: n, avatar: r, action: i, className: a }) {
-	return /* @__PURE__ */ b("div", {
-		className: e("flex items-center gap-3", a),
+function H({ name: t, email: n, avatar: r, action: i, className: a }) {
+	return /* @__PURE__ */ T("div", {
+		className: e("flex items-center gap-basalt-space-lg", a),
 		children: [
 			r,
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ T("div", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ y("p", {
-					className: "truncate text-sm font-medium text-basalt-foreground",
+				children: [/* @__PURE__ */ w("p", {
+					className: "truncate text-basalt-base font-medium text-basalt-foreground",
 					children: t
-				}), n ? /* @__PURE__ */ y("p", {
-					className: "truncate text-xs text-basalt-muted-foreground",
+				}), n ? /* @__PURE__ */ w("p", {
+					className: "truncate text-basalt-sm text-basalt-muted-foreground",
 					children: n
 				}) : null]
 			}),
@@ -251,15 +263,15 @@ function I({ name: t, email: n, avatar: r, action: i, className: a }) {
 		]
 	});
 }
-function L({ mobileSurface: t = "inset", className: n, ...r }) {
-	return /* @__PURE__ */ y("div", {
+function U({ mobileSurface: t = "inset", className: n, ...r }) {
+	return /* @__PURE__ */ w("div", {
 		"data-basalt-surface-root": "",
 		"data-basalt-island": t,
-		className: e("min-h-0 min-w-0 flex-1 bg-basalt-card text-basalt-card-foreground md:rounded-basalt-island md:p-5", t === "inset" ? "rounded-[16px] p-3 shadow-sm ring-1 ring-basalt-border/40" : "md:shadow-sm md:ring-1 md:ring-basalt-border/40", n),
+		className: e("min-h-0 min-w-0 flex-1 bg-basalt-card text-basalt-card-foreground md:rounded-basalt-island md:p-basalt-layout-lg lg:px-basalt-layout-xl", t === "inset" ? "rounded-basalt-lg p-basalt-layout shadow-sm ring-1 ring-basalt-border/40" : "md:shadow-sm md:ring-1 md:ring-basalt-border/40", n),
 		...r
 	});
 }
 //#endregion
-export { L as ContentIsland, D as Sidebar, F as SidebarFooter, P as SidebarGroup, O as SidebarHeader, N as SidebarIconItem, M as SidebarItem, A as SidebarNav, j as SidebarPartition, w as SidebarProvider, k as SidebarSearch, I as SidebarUser, C as useSidebar };
+export { U as ContentIsland, M as Sidebar, V as SidebarFooter, B as SidebarGroup, P as SidebarHeader, z as SidebarIconItem, R as SidebarItem, I as SidebarNav, L as SidebarPartition, k as SidebarProvider, F as SidebarSearch, H as SidebarUser, O as useSidebar };
 
 //# sourceMappingURL=sidebar.js.map