@nocoo/basalt 2.0.2 → 2.1.0

package/dist/components/dialog.js

@@ -1,68 +1,72 @@
 "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/dialog.tsx
-var s = {
+var c = {
 	sm: "sm:w-72",
 	base: "sm:w-96",
 	lg: "sm:w-[32rem]",
 	xl: "sm:w-[48rem]"
 };
-function c(r) {
-	return e("fixed inset-0 bg-black/40 backdrop-blur-md", t, "data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out", n, r);
+function l(t) {
+	return e("fixed inset-0 bg-black/40 backdrop-blur-md", n, "data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out", r, t);
 }
-function l({ size: r = "base", className: i } = {}) {
-	return e("fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", t, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", n, s[r], i);
+function u({ size: i = "base", className: a } = {}) {
+	return e(t, "fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-6 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", n, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", r, c[i], a);
 }
-var u = o.Root, d = o.Trigger, f = o.Close, p = o.Portal, m = r.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ i(o.Overlay, {
+var d = s.Root, f = s.Trigger, p = s.Close, m = s.Portal, h = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ a(s.Overlay, {
 	ref: n,
-	className: c(e),
+	className: l(e),
 	...t
 }));
-m.displayName = o.Overlay.displayName;
-var h = r.forwardRef(({ className: e, children: t, size: n = "base", disablePointerDismissal: r = !1, onPointerDownOutside: s, onInteractOutside: c, ...u }, d) => /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ i(m, {}), /* @__PURE__ */ i(o.Content, {
-	ref: d,
-	"data-basalt-surface-root": "",
-	className: l({
-		size: n,
-		className: e
-	}),
-	onPointerDownOutside: (e) => {
-		r && e.preventDefault(), s?.(e);
-	},
-	onInteractOutside: (e) => {
-		r && e.preventDefault(), c?.(e);
-	},
-	...u,
-	children: t
-})] }));
-h.displayName = o.Content.displayName;
-var g = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Title, {
+h.displayName = s.Overlay.displayName;
+var g = i.forwardRef(({ className: e, children: t, size: n = "base", disablePointerDismissal: r = !1, onPointerDownOutside: i, onInteractOutside: c, ...l }, d) => /* @__PURE__ */ o(m, {
+	forceMount: l.forceMount,
+	children: [/* @__PURE__ */ a(h, { forceMount: l.forceMount }), /* @__PURE__ */ a(s.Content, {
+		ref: d,
+		"data-basalt-surface-root": "",
+		className: u({
+			size: n,
+			className: e
+		}),
+		onPointerDownOutside: (e) => {
+			r && e.preventDefault(), i?.(e);
+		},
+		onInteractOutside: (e) => {
+			r && e.preventDefault(), c?.(e);
+		},
+		...l,
+		children: t
+	})]
+}));
+g.displayName = s.Content.displayName;
+var _ = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Title, {
 	ref: r,
 	className: e("text-2xl font-semibold tracking-tight", t),
 	...n
 }));
-g.displayName = o.Title.displayName;
-var _ = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Description, {
+_.displayName = s.Title.displayName;
+var v = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Description, {
 	ref: r,
 	className: e("text-base text-basalt-muted-foreground", t),
 	...n
 }));
-_.displayName = o.Description.displayName;
-var v = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
+v.displayName = s.Description.displayName;
+var y = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
 	className: e("flex flex-col space-y-1.5 text-left", t),
 	...n
 });
-v.displayName = "DialogHeader";
-var y = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
-	className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+y.displayName = "DialogHeader";
+var b = ({ className: t, ...n }) => /* @__PURE__ */ a("div", {
+	className: e("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
 	...n
 });
-y.displayName = "DialogFooter";
+b.displayName = "DialogFooter";
 //#endregion
-export { s as DIALOG_SIZES, u as Dialog, f as DialogClose, h as DialogContent, _ as DialogDescription, y as DialogFooter, v as DialogHeader, m as DialogOverlay, p as DialogPortal, g as DialogTitle, d as DialogTrigger, c as dialogOverlayClass, l as dialogPanelClass };
+export { c as DIALOG_SIZES, d as Dialog, p as DialogClose, g as DialogContent, v as DialogDescription, b as DialogFooter, y as DialogHeader, h as DialogOverlay, m as DialogPortal, _ as DialogTitle, f as DialogTrigger, l as dialogOverlayClass, u as dialogPanelClass };
 
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.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 DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\tsize?: DialogSize;\n\tdisablePointerDismissal?: boolean;\n};\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface-root=\"\"\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport const DialogTitle = 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-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const DialogDescription = 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-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport const DialogFooter = ({ 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);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,oOACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAEA,IAAa,IAAS,EAAgB,MACzB,IAAgB,EAAgB,SAChC,IAAc,EAAgB,OAC9B,IAAe,EAAgB,QAE/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAOpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,uBAAuB,MAAU;EAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;CAC7B;CACA,oBAAoB,MAAU;EAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;CAC1B;CACA,GAAI;CAEH;AACuB,CAAA,CACZ,EAAA,CAAA,CAEhB;AACA,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAE5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAE3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAa,cAAc"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.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\nexport const DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\tBASALT_UI_CLASS,\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-6 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\ntype RadixDialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ntype RadixDialogPortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;\ntype RadixDialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ntype RadixDialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ntype RadixDialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ntype RadixDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Description\n>;\ntype RadixDialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\nexport interface DialogProps\n\textends Omit<RadixDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"modal\"> {\n\t/**\n\t * Controlled open state of the dialog.\n\t */\n\topen?: RadixDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the dialog 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 dialog 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 Dialog: React.FC<DialogProps> = DialogPrimitive.Root;\n\nexport interface DialogTriggerProps 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 DialogTrigger = DialogPrimitive.Trigger;\n\nexport interface DialogCloseProps 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 DialogClose = DialogPrimitive.Close;\n\nexport interface DialogPortalProps\n\textends Omit<RadixDialogPortalProps, \"container\" | \"forceMount\"> {\n\t/**\n\t * Target container element where the dialog overlay and content portal should mount.\n\t */\n\tcontainer?: RadixDialogPortalProps[\"container\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixDialogPortalProps[\"forceMount\"];\n}\n\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport interface DialogOverlayProps\n\textends Omit<RadixDialogOverlayProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Overlay forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogOverlayProps[\"asChild\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixDialogOverlayProps[\"forceMount\"];\n}\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tDialogOverlayProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport interface DialogContentProps\n\textends Omit<\n\t\tRadixDialogContentProps,\n\t\t| \"size\"\n\t\t| \"disablePointerDismissal\"\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 * Fixed desktop width preset. Dialog panel scrolls vertically when content overflows available viewport height.\n\t * @default \"base\"\n\t */\n\tsize?: DialogSize;\n\t/**\n\t * When true, pointer interactions outside the dialog panel are prevented from dismissing the dialog.\n\t * @default false\n\t */\n\tdisablePointerDismissal?: boolean;\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 dialog bounds.\n\t */\n\tonPointerDownOutside?: RadixDialogContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Event handler called when focus moves outside the dialog bounds.\n\t */\n\tonFocusOutside?: RadixDialogContentProps[\"onFocusOutside\"];\n\t/**\n\t * Event handler called when any interaction (pointer or focus) occurs outside the dialog bounds.\n\t */\n\tonInteractOutside?: RadixDialogContentProps[\"onInteractOutside\"];\n}\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal forceMount={props.forceMount}>\n\t\t\t<DialogOverlay forceMount={props.forceMount} />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface-root=\"\"\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport interface DialogTitleProps 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 DialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tDialogTitleProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport interface DialogDescriptionProps 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 DialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogFooter = ({ className, ...props }: DialogFooterProps) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,GACA,oOACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAmCA,IAAa,IAAgC,EAAgB,MAWhD,IAAgB,EAAgB,SAWhC,IAAc,EAAgB,OAc9B,IAAe,EAAgB,QAgB/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAkEpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD;CAAc,YAAY,EAAM;CAAhC,UAAA,CACC,kBAAC,GAAD,EAAe,YAAY,EAAM,WAAa,CAAA,GAC9C,kBAAC,EAAgB,SAAjB;EACM;EACL,4BAAyB;EACzB,WAAW,EAAiB;GAAE;GAAM;EAAU,CAAC;EAC/C,uBAAuB,MAAU;GAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;EAC7B;EACA,oBAAoB,MAAU;GAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;EAC1B;EACA,GAAI;EAEH;CACuB,CAAA,CACZ;AAEhB,CAAA,CAAA;AACA,EAAc,cAAc,EAAgB,QAAQ;AAWpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAWhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAI5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAI3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAa,cAAc"}

package/dist/components/dock.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export type DockMode = "overlay" | "push";
+export interface DockProps {
+    /**
+     * Whether the dock occupies its width.
+     */
+    open: boolean;
+    /**
+     * `push` shrinks the main column. `overlay` covers the local region with a non-modal scrim.
+     * @default "push"
+     */
+    mode?: DockMode;
+    /**
+     * Width when open.
+     * @default "clamp(300px, 32.5vw, 546px)"
+     */
+    width?: string;
+    /**
+     * Overlay scrim click. Ignored in push mode.
+     */
+    onDismiss?: () => void;
+    /**
+     * Overlay scrim accessible name.
+     * @default "Dismiss"
+     */
+    dismissLabel?: string;
+    /**
+     * Accessible name.
+     */
+    "aria-label": string;
+    className?: string;
+    children: ReactNode;
+}
+export interface DockBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function DockBody({ className, children }: DockBodyProps): import("react").JSX.Element;
+export declare function Dock({ open, mode, width, onDismiss, dismissLabel, className, children, "aria-label": ariaLabel, }: DockProps): import("react").JSX.Element;

package/dist/components/dock.js

@@ -0,0 +1,97 @@
+"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 { dialogOverlayClass as i } from "./dialog.js";
+import { useEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/dock.tsx
+var l = "button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function u(e) {
+	return e ? [...e.querySelectorAll(l)].filter((e) => {
+		if (e.closest("[inert], [hidden]") || e.tabIndex < 0 || window.getComputedStyle(e).visibility === "hidden") return !1;
+		for (let t = e; t; t = t.parentElement) if (window.getComputedStyle(t).display === "none") return !1;
+		return !0;
+	}) : [];
+}
+function d({ className: t, children: n }) {
+	return /* @__PURE__ */ s("div", {
+		className: e("flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3", t),
+		children: n
+	});
+}
+function f({ open: l, mode: d = "push", width: f = "clamp(300px, 32.5vw, 546px)", onDismiss: p, dismissLabel: m = "Dismiss", className: h, children: g, "aria-label": _ }) {
+	let v = d === "overlay", y = o(null), b = o(null), x = (e) => {
+		y.current = e;
+	}, S = o(!v && l), C = o(null);
+	a(() => {
+		if (l) {
+			if (S.current) return;
+			C.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			let e = window.setTimeout(() => {
+				let e = y.current;
+				(u(e)[0] ?? e)?.focus(), S.current = !0;
+			}, 0);
+			return () => window.clearTimeout(e);
+		}
+		S.current &&= (C.current?.focus?.(), C.current = null, !1);
+	}, [l]), a(() => {
+		if (!v || !l) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				if (e.defaultPrevented || !p) return;
+				e.preventDefault(), p();
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		v,
+		l,
+		p
+	]);
+	let w = e("overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out", v ? e("absolute top-0 right-0 h-full", n) : "sticky top-0 h-screen shrink-0", r, h), T = { width: l ? f : 0 }, E = /* @__PURE__ */ s("div", {
+		className: "flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40",
+		style: { width: f },
+		children: g
+	});
+	return v ? /* @__PURE__ */ c("div", {
+		ref: b,
+		className: e("absolute inset-0", n, !l && "pointer-events-none"),
+		children: [p ? /* @__PURE__ */ s("button", {
+			type: "button",
+			tabIndex: l ? 0 : -1,
+			"aria-label": m,
+			"aria-hidden": !l,
+			"data-state": l ? "open" : "closed",
+			className: e(i("absolute"), !l && "opacity-0"),
+			onClick: l ? p : void 0
+		}) : /* @__PURE__ */ s("div", {
+			"aria-hidden": !0,
+			"data-state": l ? "open" : "closed",
+			className: e(i("absolute"), !l && "opacity-0")
+		}), /* @__PURE__ */ s("div", {
+			ref: x,
+			role: "region",
+			"aria-label": _,
+			className: e(t, w),
+			style: T,
+			"aria-hidden": !l,
+			inert: !l || void 0,
+			tabIndex: l ? -1 : void 0,
+			children: E
+		})]
+	}) : /* @__PURE__ */ s("aside", {
+		ref: x,
+		className: e(t, w),
+		style: T,
+		"aria-label": _,
+		"aria-hidden": !l,
+		inert: !l || void 0,
+		tabIndex: l ? -1 : void 0,
+		children: E
+	});
+}
+//#endregion
+export { f as Dock, d as DockBody };
+
+//# sourceMappingURL=dock.js.map

package/dist/components/dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.js","names":[],"sources":["../../src/components/dock.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { dialogOverlayClass } from \"./dialog\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nconst FOCUSABLE =\n\t'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction tabbables(root: HTMLElement | null) {\n\tif (!root) {\n\t\treturn [];\n\t}\n\treturn [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((node) => {\n\t\tif (node.closest(\"[inert], [hidden]\")) {\n\t\t\treturn false;\n\t\t}\n\t\tif (node.tabIndex < 0) {\n\t\t\treturn false;\n\t\t}\n\t\tif (window.getComputedStyle(node).visibility === \"hidden\") {\n\t\t\treturn false;\n\t\t}\n\t\tfor (let current: HTMLElement | null = node; current; current = current.parentElement) {\n\t\t\tif (window.getComputedStyle(current).display === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t});\n}\n\nexport type DockMode = \"overlay\" | \"push\";\n\nexport interface DockProps {\n\t/**\n\t * Whether the dock occupies its width.\n\t */\n\topen: boolean;\n\t/**\n\t * `push` shrinks the main column. `overlay` covers the local region with a non-modal scrim.\n\t * @default \"push\"\n\t */\n\tmode?: DockMode;\n\t/**\n\t * Width when open.\n\t * @default \"clamp(300px, 32.5vw, 546px)\"\n\t */\n\twidth?: string;\n\t/**\n\t * Overlay scrim click. Ignored in push mode.\n\t */\n\tonDismiss?: () => void;\n\t/**\n\t * Overlay scrim accessible name.\n\t * @default \"Dismiss\"\n\t */\n\tdismissLabel?: string;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport interface DockBodyProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport function DockBody({ className, children }: DockBodyProps) {\n\treturn (\n\t\t<div className={cn(\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3\", className)}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport function Dock({\n\topen,\n\tmode = \"push\",\n\twidth = \"clamp(300px, 32.5vw, 546px)\",\n\tonDismiss,\n\tdismissLabel = \"Dismiss\",\n\tclassName,\n\tchildren,\n\t\"aria-label\": ariaLabel,\n}: DockProps) {\n\tconst overlay = mode === \"overlay\";\n\tconst panelRef = useRef<HTMLElement | null>(null);\n\tconst overlayRootRef = useRef<HTMLDivElement>(null);\n\tconst setPanel = (node: HTMLElement | null) => {\n\t\tpanelRef.current = node;\n\t};\n\tconst wasOpen = useRef(!overlay && open);\n\tconst previousFocus = useRef<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (open) {\n\t\t\tif (wasOpen.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tpreviousFocus.current =\n\t\t\t\tdocument.activeElement instanceof HTMLElement ? document.activeElement : null;\n\t\t\tconst timer = window.setTimeout(() => {\n\t\t\t\tconst root = panelRef.current;\n\t\t\t\tconst nodes = tabbables(root);\n\t\t\t\t(nodes[0] ?? root)?.focus();\n\t\t\t\twasOpen.current = true;\n\t\t\t}, 0);\n\t\t\treturn () => window.clearTimeout(timer);\n\t\t}\n\t\tif (wasOpen.current) {\n\t\t\tpreviousFocus.current?.focus?.();\n\t\t\tpreviousFocus.current = null;\n\t\t\twasOpen.current = false;\n\t\t}\n\t}, [open]);\n\n\tuseEffect(() => {\n\t\tif (!overlay || !open) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (event.defaultPrevented || !onDismiss) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonDismiss();\n\t\t\t}\n\t\t};\n\t\twindow.addEventListener(\"keydown\", onKeyDown);\n\t\treturn () => window.removeEventListener(\"keydown\", onKeyDown);\n\t}, [overlay, open, onDismiss]);\n\tconst panelClass = cn(\n\t\t\"overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out\",\n\t\toverlay ? cn(\"absolute top-0 right-0 h-full\", OVERLAY_LAYER) : \"sticky top-0 h-screen shrink-0\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n\tconst panelStyle = { width: open ? width : 0 };\n\tconst inner = (\n\t\t<div\n\t\t\tclassName=\"flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40\"\n\t\t\tstyle={{ width }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n\n\tif (!overlay) {\n\t\treturn (\n\t\t\t<aside\n\t\t\t\tref={setPanel}\n\t\t\t\tclassName={cn(BASALT_UI_CLASS, panelClass)}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</aside>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={overlayRootRef}\n\t\t\tclassName={cn(\"absolute inset-0\", OVERLAY_LAYER, !open && \"pointer-events-none\")}\n\t\t>\n\t\t\t{onDismiss ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={open ? 0 : -1}\n\t\t\t\t\taria-label={dismissLabel}\n\t\t\t\t\taria-hidden={!open}\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t\tonClick={open ? onDismiss : undefined}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={setPanel}\n\t\t\t\trole=\"region\"\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={cn(BASALT_UI_CLASS, panelClass)}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/dropdown-menu.d.ts

@@ -1,38 +1,252 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as React from "react";
-export type DropdownMenuProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
+type RadixDropdownMenuProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;
+type RadixDropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
+type RadixDropdownMenuGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
+type RadixDropdownMenuPortalProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>;
+type RadixDropdownMenuSubProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>;
+type RadixDropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
+type RadixDropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
+type RadixDropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>;
+export interface DropdownMenuProps extends Omit<RadixDropdownMenuProps, "open" | "defaultOpen" | "onOpenChange" | "dir" | "modal" | "children"> {
     /**
-     * The controlled open state.
+     * Structure elements comprising the dropdown menu, typically trigger and content.
      */
-    open?: boolean;
+    children?: React.ReactNode;
     /**
-     * The uncontrolled initial open state.
+     * The controlled open state of the dropdown menu.
+     */
+    open?: RadixDropdownMenuProps["open"];
+    /**
+     * The uncontrolled initial open state of the dropdown menu.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: RadixDropdownMenuProps["defaultOpen"];
     /**
      * Called when the open state changes.
      */
-    onOpenChange?: (open: boolean) => void;
-};
+    onOpenChange?: RadixDropdownMenuProps["onOpenChange"];
+    /**
+     * The reading direction of the dropdown menu. Inherited from DirectionProvider if present,
+     * or defaults to "ltr".
+     * @default "ltr"
+     */
+    dir?: RadixDropdownMenuProps["dir"];
+    /**
+     * The modality of the dropdown menu. When set to true, interaction with outside elements
+     * will be disabled and only menu content will be visible to screen readers.
+     * @default true
+     */
+    modal?: RadixDropdownMenuProps["modal"];
+}
 export declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export interface DropdownMenuTriggerProps extends Omit<RadixDropdownMenuTriggerProps, "asChild" | "children"> {
+    /**
+     * Trigger element content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * DropdownMenuTrigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixDropdownMenuTriggerProps["asChild"];
+}
 export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DropdownMenuGroupProps extends Omit<RadixDropdownMenuGroupProps, "asChild" | "children"> {
+    /**
+     * Menu items or elements grouped together.
+     */
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * DropdownMenuGroup forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixDropdownMenuGroupProps["asChild"];
+}
 export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuPortalProps extends Omit<RadixDropdownMenuPortalProps, "container" | "forceMount" | "children"> {
+    /**
+     * Content to render into the portal target.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a container element to portal the content into.
+     * Note: Only controls direct portal children; does not override the destination
+     * container of the built-in portal inside DropdownMenuContent.
+     */
+    container?: RadixDropdownMenuPortalProps["container"];
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: RadixDropdownMenuPortalProps["forceMount"];
+}
 export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export interface DropdownMenuSubProps extends Omit<RadixDropdownMenuSubProps, "open" | "defaultOpen" | "onOpenChange" | "children"> {
+    /**
+     * Submenu structure elements.
+     * Note: Basalt does not export styled DropdownMenuSubTrigger or DropdownMenuSubContent components;
+     * compose with underlying Radix primitives when building nested submenus.
+     */
+    children?: React.ReactNode;
+    /**
+     * The controlled open state of the submenu.
+     */
+    open?: RadixDropdownMenuSubProps["open"];
+    /**
+     * The uncontrolled initial open state of the submenu.
+     * @default false
+     */
+    defaultOpen?: RadixDropdownMenuSubProps["defaultOpen"];
+    /**
+     * Event handler called when the open state of the submenu changes.
+     */
+    onOpenChange?: RadixDropdownMenuSubProps["onOpenChange"];
+}
 export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export interface DropdownMenuRadioGroupProps extends Omit<RadixDropdownMenuRadioGroupProps, "value" | "onValueChange" | "asChild" | "children"> {
+    /**
+     * Radio item elements grouped together.
+     * Note: Basalt does not export styled DropdownMenuRadioItem or indicator components;
+     * compose with underlying Radix primitives when building radio selection groups.
+     */
+    children?: React.ReactNode;
+    /**
+     * The value of the currently selected radio item.
+     */
+    value?: RadixDropdownMenuRadioGroupProps["value"];
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: RadixDropdownMenuRadioGroupProps["onValueChange"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * DropdownMenuRadioGroup forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixDropdownMenuRadioGroupProps["asChild"];
+}
 export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type DropdownMenuItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "disabled"> & {
+export interface DropdownMenuContentProps extends Omit<RadixDropdownMenuContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "updatePositionStrategy" | "loop" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "forceMount" | "asChild"> {
     /**
-     * Disable the menu item.
+     * Preferred placement side relative to trigger.
+     * @default "bottom"
+     */
+    side?: RadixDropdownMenuContentProps["side"];
+    /**
+     * Distance in pixels between trigger and floating content panel.
+     * In Basalt, defaults to MENU_GAP (8).
+     * @default 8
+     */
+    sideOffset?: RadixDropdownMenuContentProps["sideOffset"];
+    /**
+     * Preferred alignment along the side axis.
+     * @default "center"
+     */
+    align?: RadixDropdownMenuContentProps["align"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixDropdownMenuContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
+     * @default true
+     */
+    avoidCollisions?: RadixDropdownMenuContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixDropdownMenuContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixDropdownMenuContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixDropdownMenuContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixDropdownMenuContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
      * @default false
      */
-    disabled?: boolean;
-};
-export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "disabled"> & {
+    hideWhenDetached?: RadixDropdownMenuContentProps["hideWhenDetached"];
+    /**
+     * Strategy used to calculate and update popper position.
+     * @default "optimized"
+     */
+    updatePositionStrategy?: RadixDropdownMenuContentProps["updatePositionStrategy"];
+    /**
+     * Whether keyboard navigation should loop around item boundaries.
+     * @default false
+     */
+    loop?: RadixDropdownMenuContentProps["loop"];
+    /**
+     * Callback fired when auto-focusing on close. Can be prevented.
+     */
+    onCloseAutoFocus?: RadixDropdownMenuContentProps["onCloseAutoFocus"];
+    /**
+     * Callback fired when the Escape key is down on the content layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixDropdownMenuContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the content. Can be prevented.
+     */
+    onPointerDownOutside?: RadixDropdownMenuContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the content. Can be prevented.
+     */
+    onFocusOutside?: RadixDropdownMenuContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the content. Can be prevented.
+     */
+    onInteractOutside?: RadixDropdownMenuContentProps["onInteractOutside"];
+    /**
+     * 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?: true;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * DropdownMenuContent forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixDropdownMenuContentProps["asChild"];
+}
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuItemProps extends Omit<RadixDropdownMenuItemProps, "disabled" | "onSelect" | "textValue" | "asChild"> {
     /**
      * Disable the menu item.
      * @default false
      */
-    disabled?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
+    disabled?: RadixDropdownMenuItemProps["disabled"];
+    /**
+     * Event handler called when the menu item is selected (via click or keyboard).
+     * Note that this is a Radix CustomEvent, not native DOM onSelect.
+     */
+    onSelect?: RadixDropdownMenuItemProps["onSelect"];
+    /**
+     * Optional text used for typeahead navigation. By default typeahead uses item text content.
+     */
+    textValue?: RadixDropdownMenuItemProps["textValue"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * DropdownMenuItem forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixDropdownMenuItemProps["asChild"];
+}
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/dropdown-menu.js

@@ -5,12 +5,15 @@ import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu.tsx
-var o = a.Root, s = a.Trigger, c = a.Group, l = a.Portal, u = a.Sub, d = a.RadioGroup, f = r.forwardRef(({ className: t, sideOffset: r = 8, ...o }, s) => /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
-	ref: s,
-	sideOffset: r,
-	className: n(e("min-w-40", t)),
-	...o
-}) }));
+var o = a.Root, s = a.Trigger, c = a.Group, l = a.Portal, u = a.Sub, d = a.RadioGroup, f = r.forwardRef(({ className: t, sideOffset: r = 8, ...o }, s) => /* @__PURE__ */ i(a.Portal, {
+	forceMount: o.forceMount,
+	children: /* @__PURE__ */ i(a.Content, {
+		ref: s,
+		sideOffset: r,
+		className: n(e("min-w-40", t)),
+		...o
+	})
+}));
 f.displayName = a.Content.displayName;
 var p = r.forwardRef(({ className: n, ...r }, o) => /* @__PURE__ */ i(a.Item, {
 	ref: o,