@nocoo/basalt 2.0.2 → 2.1.0

package/dist/components/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { FOCUS_BORDER as t, overlayItemClass as n, overlayPanelClass as r } from "./overlay.js";
-import { controlSurfaceClass as i } from "../utils/control-surface.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";
@@ -11,13 +11,13 @@ 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: n, children: r, size: a = "default", loading: o = !1, disabled: d = !1, ...f }, p) => /* @__PURE__ */ l(u.Trigger, {
+}, h = a.forwardRef(({ className: r, children: i, size: a = "default", loading: o = !1, disabled: d = !1, ...f }, p) => /* @__PURE__ */ l(u.Trigger, {
 	ref: p,
 	...f,
 	disabled: d || o,
 	"aria-busy": o || void 0,
-	className: i(e("flex w-full items-center justify-between", m[a], t, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", n)),
-	children: [r, /* @__PURE__ */ c(s, { className: "h-4 w-4 opacity-50" })]
+	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" })]
 }));
 h.displayName = u.Trigger.displayName;
 var g = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Label, {
@@ -26,20 +26,20 @@ var g = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Label, {
 	...n
 }));
 g.displayName = u.Label.displayName;
-var _ = a.forwardRef(({ className: t, children: n, position: i = "popper", sideOffset: a = 4, ...o }, s) => /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Content, {
+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: i,
+	position: r,
 	sideOffset: a,
-	className: r(e(i === "popper" && "w-[var(--radix-select-trigger-width)]", t)),
+	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: r, ...i }, a) => /* @__PURE__ */ l(u.Item, {
+var v = a.forwardRef(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ l(u.Item, {
 	ref: a,
-	className: n(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 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)),
 	...i,
-	children: [/* @__PURE__ */ c(u.ItemText, { children: r }), /* @__PURE__ */ c(u.ItemIndicator, {
+	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" })
 	})]

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"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\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\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\nexport type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\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,IAAa,IAAgC,EAAgB,MAWhD,IAET,EAAgB,OAGP,IAET,EAAgB,OAId,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAG,KAAS,MAC1F,kBAAC,EAAgB,SAAjB;CACM;CACL,GAAI;CACJ,UAAU,KAAY;CACtB,aAAW,KAAW,KAAA;CACtB,WAAW,EACV,EACC,4CACA,EAAkB,IAClB,GACA,+FACA,CACD,CACD;CAbD,UAAA,CAeE,GACD,kBAAC,GAAD,EAAa,WAAU,qBAAsB,CAAA,CACrB;AACzB,CAAA,CAAA;AACD,EAAc,cAAc,EAAgB,QAAQ;AAIpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,oDAAoD,CAAS;CAC3E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAkBhD,IAAa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAG,KAAS,MACpF,kBAAC,EAAgB,QAAjB,EAAA,UACC,kBAAC,EAAgB,SAAjB;CACM;CACK;CACE;CACZ,WAAW,EACV,EAAG,MAAa,YAAY,yCAAyC,CAAS,CAC/E;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;AACtC,CAAA,EACF,CAAA,CACxB;AACD,EAAc,cAAc,EAAgB,QAAQ;AAYpD,IAAa,IAAa,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAgB,MAAjB;CACM;CACL,WAAW,EACV,EACC,0LACA,CACD,CACD;CACA,GAAI;CARL,UAAA,CAUC,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA,GAC9D,kBAAC,EAAgB,eAAjB;EAA+B,WAAU;EACxC,UAAA,kBAAC,GAAD,EAAO,WAAU,cAAe,CAAA;CACF,CAAA,CACV;AACtB,CAAA,CAAA;AACD,EAAW,cAAc,EAAgB,KAAK"}
+{"version":3,"file":"select.js","names":[],"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,IAAa,IAAgC,EAAgB,MAWhD,IAET,EAAgB,OAWP,IAET,EAAgB,OAId,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAG,KAAS,MAC1F,kBAAC,EAAgB,SAAjB;CACM;CACL,GAAI;CACJ,UAAU,KAAY;CACtB,aAAW,KAAW,KAAA;CACtB,WAAW,EACV,EACC,4CACA,EAAkB,IAClB,GACA,+FACA,CACD,CACD;CAbD,UAAA,CAeE,GACD,kBAAC,GAAD,EAAa,WAAU,qBAAsB,CAAA,CACrB;AACzB,CAAA,CAAA;AACD,EAAc,cAAc,EAAgB,QAAQ;AAYpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,oDAAoD,CAAS;CAC3E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAkBhD,IAAa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAG,KAAS,MACpF,kBAAC,EAAgB,QAAjB,EAAA,UACC,kBAAC,EAAgB,SAAjB;CACM;CACK;CACE;CACZ,WAAW,EACV,EAAG,MAAa,YAAY,yCAAyC,CAAS,CAC/E;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;AACtC,CAAA,EACF,CAAA,CACxB;AACD,EAAc,cAAc,EAAgB,QAAQ;AAYpD,IAAa,IAAa,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAgB,MAAjB;CACM;CACL,WAAW,EACV,EACC,0LACA,CACD,CACD;CACA,GAAI;CARL,UAAA,CAUC,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA,GAC9D,kBAAC,EAAgB,eAAjB;EAA+B,WAAU;EACxC,UAAA,kBAAC,GAAD,EAAO,WAAU,cAAe,CAAA;CACF,CAAA,CACV;AACtB,CAAA,CAAA;AACD,EAAW,cAAc,EAAgB,KAAK"}

package/dist/components/sheet.d.ts

@@ -1,25 +1,129 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-export declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
+type RadixDialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+type RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+type RadixDialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+type RadixDialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+type RadixDialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+type RadixDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+export interface SheetProps extends Omit<RadixDialogProps, "open" | "defaultOpen" | "onOpenChange" | "modal"> {
+    /**
+     * Controlled open state of the sheet drawer.
+     */
+    open?: RadixDialogProps["open"];
+    /**
+     * Uncontrolled default open state of the sheet on initial render.
+     * @default false
+     */
+    defaultOpen?: RadixDialogProps["defaultOpen"];
+    /**
+     * Callback invoked when the open state changes.
+     */
+    onOpenChange?: RadixDialogProps["onOpenChange"];
+    /**
+     * Whether the sheet renders modally, preventing outside interaction and hiding background content from screen readers.
+     * @default true
+     */
+    modal?: RadixDialogProps["modal"];
+}
+export declare const Sheet: React.FC<SheetProps>;
+export interface SheetTriggerProps extends Omit<RadixDialogTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixDialogTriggerProps["asChild"];
+}
 export declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SheetCloseProps extends Omit<RadixDialogCloseProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Close forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixDialogCloseProps["asChild"];
+}
 export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface SheetTitleProps extends Omit<RadixDialogTitleProps, "asChild"> {
+    /**
+     * Change the default rendered heading element to the child element, merging props and behavior.
+     * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.
+     * @default false
+     */
+    asChild?: RadixDialogTitleProps["asChild"];
+}
+export declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface SheetDescriptionProps extends Omit<RadixDialogDescriptionProps, "asChild"> {
+    /**
+     * Change the default rendered paragraph element to the child element, merging props and behavior.
+     * Description forwards ref to HTMLParagraphElement and inherits native p attributes.
+     * @default false
+     */
+    asChild?: RadixDialogDescriptionProps["asChild"];
+}
+export declare const SheetDescription: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const SIDE: {
-    readonly right: "fixed inset-y-0 right-0 box-border 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 box-border 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 box-border 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 box-border 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-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";
 };
 export type SheetSide = keyof typeof SIDE;
-export declare const SheetContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export interface SheetContentProps extends Omit<RadixDialogContentProps, "side" | "asChild" | "forceMount" | "trapFocus" | "onOpenAutoFocus" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
+    /**
+     * Edge of the screen where the drawer panel is positioned and anchored.
+     * @default "right"
+     */
     side?: SheetSide;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixDialogContentProps["asChild"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * When forceMount is true, the content remains mounted even when closed.
+     * The caller is responsible for visibility transitions and unmounting after animation completes.
+     * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.
+     */
+    forceMount?: RadixDialogContentProps["forceMount"];
+    /**
+     * Event handler called when auto-focusing the first element on open. Can be prevented with event.preventDefault().
+     */
+    onOpenAutoFocus?: RadixDialogContentProps["onOpenAutoFocus"];
+    /**
+     * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().
+     */
+    onCloseAutoFocus?: RadixDialogContentProps["onCloseAutoFocus"];
+    /**
+     * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().
+     */
+    onEscapeKeyDown?: RadixDialogContentProps["onEscapeKeyDown"];
+    /**
+     * Event handler called when a pointer event occurs outside the sheet bounds.
+     */
+    onPointerDownOutside?: RadixDialogContentProps["onPointerDownOutside"];
+    /**
+     * Event handler called when focus moves outside the sheet bounds.
+     */
+    onFocusOutside?: RadixDialogContentProps["onFocusOutside"];
+    /**
+     * Event handler called when any interaction (pointer or focus) occurs outside the sheet bounds.
+     */
+    onInteractOutside?: RadixDialogContentProps["onInteractOutside"];
+}
+export declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Element;
 export declare namespace SheetHeader {
     var displayName: string;
 }
-export declare function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SheetFooter({ className, ...props }: SheetFooterProps): React.JSX.Element;
 export declare namespace SheetFooter {
     var displayName: string;
 }

package/dist/components/sheet.js

@@ -1,50 +1,57 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-dialog";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { OVERLAY_LAYER as n, OVERLAY_MOTION as r } from "./overlay.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-dialog";
 //#region src/components/sheet.tsx
-var s = o.Root, c = o.Trigger, l = o.Close, u = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Title, {
+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),
 	...n
 }));
-u.displayName = o.Title.displayName;
-var d = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Description, {
+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),
 	...n
 }));
-d.displayName = o.Description.displayName;
-var f = {
-	right: "fixed inset-y-0 right-0 box-border 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 box-border 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 box-border 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 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border p-6 text-sm text-basalt-foreground shadow-lg"
-}, p = r.forwardRef(({ className: r, side: s = "right", children: c, ...l }, u) => /* @__PURE__ */ a(o.Portal, { children: [/* @__PURE__ */ i(o.Overlay, { className: e("fixed inset-0 bg-black/50 backdrop-blur-xs", t, n) }), /* @__PURE__ */ i(o.Content, {
-	ref: u,
-	"data-basalt-surface-root": "",
-	className: e(t, n, f[s], r),
-	...l,
-	style: {
-		boxSizing: "border-box",
-		...l.style
-	},
-	children: c
-})] }));
-p.displayName = "SheetContent";
-var m = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
+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`
+}, 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)
+	}), /* @__PURE__ */ a(s.Content, {
+		ref: u,
+		"data-basalt-surface-root": "",
+		className: e(n, r, p[i], t),
+		...l,
+		style: {
+			boxSizing: "border-box",
+			...l.style
+		},
+		children: c
+	})]
+}));
+m.displayName = "SheetContent";
+var h = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
 	className: e("flex flex-col space-y-2 text-left", t),
 	...n
 });
-m.displayName = "SheetHeader";
-var h = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
+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),
 	...n
 });
-h.displayName = "SheetFooter";
+g.displayName = "SheetFooter";
 //#endregion
-export { s as Sheet, l as SheetClose, p as SheetContent, d as SheetDescription, h as SheetFooter, m as SheetHeader, u as SheetTitle, c as SheetTrigger };
+export { c as Sheet, u as SheetClose, m as SheetContent, f as SheetDescription, g as SheetFooter, h as SheetHeader, d as SheetTitle, l as SheetTrigger };
 
 //# sourceMappingURL=sheet.js.map

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"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 { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const Sheet = DialogPrimitive.Root;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\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 const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\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:\n\t\t\"fixed inset-y-0 right-0 box-border 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 box-border 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 box-border 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:\n\t\t\"fixed inset-x-0 bottom-0 box-border 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 const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { side?: SheetSide }\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal>\n\t\t<DialogPrimitive.Overlay\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-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 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\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":";;;;;;;AAKA,IAAa,IAAQ,EAAgB,MACxB,IAAe,EAAgB,SAC/B,IAAa,EAAgB,OAC7B,IAAa,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,qDAAqD,CAAS;CAC5E,GAAI;AACJ,CAAA,CACD;AACD,EAAW,cAAc,EAAgB,MAAM;AAE/C,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAgB,YAAY;AAE3D,IAAM,IAAO;CACZ,OACC;CACD,MAAM;CACN,KAAK;CACL,QACC;AACF,GAIa,IAAe,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAG,KAAS,MACrD,kBAAC,EAAgB,QAAjB,EAAA,UAAA,CACC,kBAAC,EAAgB,SAAjB,EACC,WAAW,EAAG,8CAA8C,GAAe,CAAc,EACzF,CAAA,GACD,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAG,GAAe,GAAgB,EAAK,IAAO,CAAS;CAClE,GAAI;CACJ,OAAO;EAAE,WAAW;EAAc,GAAG,EAAM;CAAM;CAEhD;AACuB,CAAA,CACF,EAAA,CAAA,CACxB;AACD,EAAa,cAAc;AAE3B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAY,cAAc;AAE1B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAY,cAAc"}
+{"version":3,"file":"sheet.js","names":[],"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-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,IAAa,IAA8B,EAAgB,MAW9C,IAAe,EAAgB,SAW/B,IAAa,EAAgB,OAW7B,IAAa,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,qDAAqD,CAAS;CAC5E,GAAI;AACJ,CAAA,CACD;AACD,EAAW,cAAc,EAAgB,MAAM;AAW/C,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAgB,YAAY;AAE3D,IAAM,IAAO;CACZ,OAAO,2BAA2B,EAAgB;CAClD,MAAM,0BAA0B,EAAgB;CAChD,KAAK,yBAAyB,EAAgB;CAC9C,QAAQ,4BAA4B,EAAgB;AACrD,GA8Da,IAAe,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAG,KAAS,MACrD,kBAAC,EAAgB,QAAjB;CAAwB,YAAY,EAAM;CAA1C,UAAA,CACC,kBAAC,EAAgB,SAAjB;EACC,YAAY,EAAM;EAClB,WAAW,EAAG,8CAA8C,GAAe,CAAc;CACzF,CAAA,GACD,kBAAC,EAAgB,SAAjB;EACM;EACL,4BAAyB;EACzB,WAAW,EAAG,GAAe,GAAgB,EAAK,IAAO,CAAS;EAClE,GAAI;EACJ,OAAO;GAAE,WAAW;GAAc,GAAG,EAAM;EAAM;EAEhD;CACuB,CAAA,CACF;AACxB,CAAA,CAAA;AACD,EAAa,cAAc;AAI3B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAY,cAAc;AAI1B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAY,cAAc"}

package/dist/components/sidebar.d.ts

@@ -1,18 +1,55 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, type RefObject } from "react";
 export type SidebarSide = "left" | "right";
-type SidebarContextValue = {
+export interface SidebarContextValue {
+    /**
+     * Whether the sidebar is currently collapsed.
+     */
     collapsed: boolean;
+    /**
+     * Callback to update the collapsed state.
+     */
     setCollapsed: (next: boolean) => void;
+    /**
+     * Which edge the sidebar occupies.
+     */
     side: SidebarSide;
+    /**
+     * Whether the sidebar is currently displaying a loading skeleton.
+     */
     loading: boolean;
+    /**
+     * Whether the sidebar rail expands on pointer hover.
+     */
     peek: boolean;
+    /**
+     * Whether the sidebar is actively hovering in peek preview mode.
+     */
     peeking: boolean;
+    /**
+     * Callback to update the peek preview state.
+     */
     setPeeking: (next: boolean) => void;
+    /**
+     * Whether the sidebar is rendering as a modal overlay drawer instead of in-flow layout chrome.
+     */
     overlay: boolean;
+    /**
+     * Current expanded width in pixels, clamped between 180 and 400.
+     */
     width: number;
+    /**
+     * Callback to update the sidebar width. Value is clamped between 180 and 400 pixels.
+     */
     setWidth: (next: number) => void;
+    /**
+     * Reference to the last active element that held focus before opening the sidebar drawer.
+     */
     lastFocusRef: RefObject<HTMLElement | null>;
-};
+}
+/**
+ * Accesses the sidebar context value. Must be used within a `SidebarProvider`; throws an error if called outside.
+ * Returns the active sidebar state and control callbacks.
+ */
 export declare function useSidebar(): SidebarContextValue;
 export type SidebarProviderProps = {
     /**
@@ -49,7 +86,7 @@ export type SidebarProviderProps = {
      */
     overlay?: boolean;
     /**
-     * Expanded width in pixels.
+     * Initial expanded width in pixels, clamped between 180 and 400.
      * @default 260
      */
     defaultWidth?: number;
@@ -67,12 +104,26 @@ export type SidebarProps = HTMLAttributes<HTMLElement> & {
     collapsed?: boolean;
 };
 export declare function Sidebar({ collapsed: collapsedProp, className, children, onMouseEnter, onMouseLeave, style, ...props }: SidebarProps): import("react").JSX.Element;
-export declare function SidebarHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function SidebarSearch({ shortcut, className, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): import("react").JSX.Element;
+/**
+ * Props for `SidebarSearch`. Renders a native `<button>` element and accepts all standard button HTML attributes and click handlers.
+ */
+export interface SidebarSearchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Shortcut key display label rendered inside the trailing kbd tag. Note: this is a visual label only and does not register a global keyboard shortcut.
+     * @default "⌘K"
+     */
     shortcut?: string;
-}): import("react").JSX.Element;
-export declare function SidebarNav({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export declare function SidebarPartition({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+}
+export declare function SidebarSearch({ shortcut, className, children, ...props }: SidebarSearchProps): import("react").JSX.Element;
+export interface SidebarNavProps extends HTMLAttributes<HTMLElement> {
+}
+export declare function SidebarNav({ className, ...props }: SidebarNavProps): import("react").JSX.Element;
+export interface SidebarPartitionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export declare function SidebarPartition({ className, ...props }: SidebarPartitionProps): import("react").JSX.Element;
 export type SidebarItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * Mark the item as the current page.
@@ -81,21 +132,62 @@ export type SidebarItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     active?: boolean;
 };
 export declare function SidebarItem({ active, className, ...props }: SidebarItemProps): import("react").JSX.Element;
-export declare function SidebarIconItem({ active, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+/**
+ * Props for `SidebarIconItem`. Accepts standard button HTML attributes. The caller is responsible for providing accessible labeling via `aria-label` or `aria-labelledby` as icon buttons do not automatically generate accessible names.
+ */
+export interface SidebarIconItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Mark the icon button as active page item.
+     * @default false
+     */
     active?: boolean;
-}): import("react").JSX.Element;
-export declare function SidebarGroup({ label, defaultOpen, children, }: {
+}
+export declare function SidebarIconItem({ active, className, ...props }: SidebarIconItemProps): import("react").JSX.Element;
+/**
+ * Props for `SidebarGroup`. Uncontrolled collapsible section that accepts only the documented properties. It does not accept controlled open props or arbitrary DOM attributes.
+ */
+export interface SidebarGroupProps {
+    /**
+     * Section label displayed on the group trigger.
+     */
     label: ReactNode;
+    /**
+     * Uncontrolled initial open state for the collapsible group.
+     * @default true
+     */
     defaultOpen?: boolean;
+    /**
+     * Navigation items rendered inside the group.
+     */
     children: ReactNode;
-}): import("react").JSX.Element;
-export declare function SidebarFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function SidebarUser({ name, email, avatar, action, className, }: {
+}
+export declare function SidebarGroup({ label, defaultOpen, children }: SidebarGroupProps): import("react").JSX.Element;
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarFooter({ className, ...props }: SidebarFooterProps): import("react").JSX.Element;
+export interface SidebarUserProps {
+    /**
+     * User display name.
+     */
     name: ReactNode;
+    /**
+     * Optional user email or secondary text.
+     */
     email?: ReactNode;
+    /**
+     * Avatar element slot.
+     */
     avatar?: ReactNode;
+    /**
+     * Trailing action slot (e.g. settings or logout button).
+     */
     action?: ReactNode;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
-}): import("react").JSX.Element;
-export declare function ContentIsland({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export {};
+}
+export declare function SidebarUser({ name, email, avatar, action, className }: SidebarUserProps): import("react").JSX.Element;
+export interface ContentIslandProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare function ContentIsland({ className, ...props }: ContentIslandProps): import("react").JSX.Element;