@ucdjs-internal/shared-ui 0.1.6 → 0.1.7

package/dist/ui/command.mjs

@@ -1,13 +1,52 @@
 import { cn } from "../lib/utils.mjs";
 import { InputGroup, InputGroupAddon } from "./input-group.mjs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.mjs";
-import { pkg } from "../vendor/cmdk/index.mjs";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { CheckIcon, SearchIcon } from "lucide-react";
-
+import { SearchIcon } from "lucide-react";
+import { Command as Command$1, createCommandPalette, useCommandActions, useCommandShortcutDefault } from "@cmdi/base-ui";
 //#region src/ui/command.tsx
-function Command(t0) {
+const commandRootClassName = "bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden";
+const commandDialogOverlayClassName = "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50";
+const commandDialogContentClassName = "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/3 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 translate-y-0 gap-4 overflow-hidden rounded-xl p-0 text-sm ring-1 duration-100 outline-none sm:max-w-sm";
+const commandItemClassName = "data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const commandActionsClassName = [
+	"**:[[cmd-item]]:data-selected:bg-muted",
+	"**:[[cmd-item]]:data-selected:text-foreground",
+	"**:[[cmd-item]]:relative",
+	"**:[[cmd-item]]:flex",
+	"**:[[cmd-item]]:cursor-default",
+	"**:[[cmd-item]]:items-center",
+	"**:[[cmd-item]]:gap-2",
+	"**:[[cmd-item]]:rounded-sm",
+	"**:[[cmd-item]]:px-2",
+	"**:[[cmd-item]]:py-1.5",
+	"**:[[cmd-item]]:text-sm",
+	"**:[[cmd-item]]:outline-hidden",
+	"**:[[cmd-item]]:select-none",
+	"**:[[cmd-item]]:data-[disabled=true]:pointer-events-none",
+	"**:[[cmd-item]]:data-[disabled=true]:opacity-50",
+	"**:[[cmd-item]]:[&_svg:not([class*='size-'])]:size-4",
+	"**:[[cmd-item]]:[&_svg]:pointer-events-none",
+	"**:[[cmd-item]]:[&_svg]:shrink-0",
+	"**:[[cmd-item]>[data-slot='shortcut']]:text-muted-foreground",
+	"**:[[cmd-item]>[data-slot='shortcut']]:ml-auto",
+	"**:[[cmd-item]>[data-slot='shortcut']]:text-xs",
+	"**:[[cmd-item]>[data-slot='shortcut']]:tracking-widest"
+].join(" ");
+function usePaletteId(palette) {
+	const $ = c(2);
+	const t0 = React.useId();
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0.replaceAll(":", "");
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return palette ?? `command-${t1}`;
+}
+function CommandRoot(t0) {
 	const $ = c(8);
 	let className;
 	let props;
@@ -22,13 +61,13 @@ function Command(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className);
+		t1 = cn(commandRootClassName, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg, {
+		t2 = /* @__PURE__ */ jsx(Command$1, {
 			"data-slot": "command",
 			className: t1,
 			...props
@@ -39,86 +78,216 @@ function Command(t0) {
 	} else t2 = $[7];
 	return t2;
 }
+function CommandDialogRoot(t0) {
+	const $ = c(26);
+	const { children, open, onOpenChange, defaultOpen, className, overlayClassName, contentClassName, palette, value, defaultValue, filter, shouldFilter, loop, onValueChange, label } = t0;
+	let t1;
+	if ($[0] !== overlayClassName) {
+		t1 = cn(commandDialogOverlayClassName, overlayClassName);
+		$[0] = overlayClassName;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== contentClassName) {
+		t2 = cn(commandDialogContentClassName, contentClassName);
+		$[2] = contentClassName;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = usePaletteId(palette);
+	let t4;
+	if ($[4] !== className) {
+		t4 = cn(commandRootClassName, className);
+		$[4] = className;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== children || $[7] !== defaultValue || $[8] !== filter || $[9] !== label || $[10] !== loop || $[11] !== onValueChange || $[12] !== shouldFilter || $[13] !== t3 || $[14] !== t4 || $[15] !== value) {
+		t5 = /* @__PURE__ */ jsx(Command$1, {
+			"data-slot": "command-dialog",
+			palette: t3,
+			value,
+			defaultValue,
+			filter,
+			shouldFilter,
+			loop,
+			onValueChange,
+			label,
+			className: t4,
+			children
+		});
+		$[6] = children;
+		$[7] = defaultValue;
+		$[8] = filter;
+		$[9] = label;
+		$[10] = loop;
+		$[11] = onValueChange;
+		$[12] = shouldFilter;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = value;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t1 || $[18] !== t2 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(DialogContent, {
+			overlayClassName: t1,
+			className: t2,
+			showCloseButton: false,
+			children: t5
+		});
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== defaultOpen || $[22] !== onOpenChange || $[23] !== open || $[24] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			defaultOpen,
+			children: t6
+		});
+		$[21] = defaultOpen;
+		$[22] = onOpenChange;
+		$[23] = open;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	return t7;
+}
 function CommandDialog(t0) {
-	const $ = c(24);
+	const $ = c(43);
 	let children;
 	let className;
+	let contentClassName;
+	let overlayClassName;
+	let palette;
 	let props;
 	let t1;
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		({title: t1, description: t2, children, className, showCloseButton: t3, ...props} = t0);
+		({title: t1, description: t2, children, className, overlayClassName, contentClassName, palette, showCloseButton: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
+		$[3] = contentClassName;
+		$[4] = overlayClassName;
+		$[5] = palette;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
 	} else {
 		children = $[1];
 		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
+		contentClassName = $[3];
+		overlayClassName = $[4];
+		palette = $[5];
+		props = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
 	}
 	const title = t1 === void 0 ? "Command Palette" : t1;
-	const description = t2 === void 0 ? "Search for a command to run..." : t2;
+	const _description = t2 === void 0 ? "Search for a command to run..." : t2;
 	const showCloseButton = t3 === void 0 ? false : t3;
-	let t4;
-	if ($[7] !== title) {
-		t4 = /* @__PURE__ */ jsx(DialogTitle, { children: title });
-		$[7] = title;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== description) {
-		t5 = /* @__PURE__ */ jsx(DialogDescription, { children: description });
-		$[9] = description;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== t4 || $[12] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(DialogHeader, {
-			className: "sr-only",
-			children: [t4, t5]
-		});
-		$[11] = t4;
-		$[12] = t5;
-		$[13] = t6;
-	} else t6 = $[13];
+	const t4 = props.open;
+	const t5 = props.onOpenChange;
+	const t6 = props.defaultOpen;
 	let t7;
-	if ($[14] !== className) {
-		t7 = cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className);
-		$[14] = className;
-		$[15] = t7;
-	} else t7 = $[15];
+	if ($[10] !== title) {
+		t7 = /* @__PURE__ */ jsx(DialogTitle, { children: title });
+		$[10] = title;
+		$[11] = t7;
+	} else t7 = $[11];
 	let t8;
-	if ($[16] !== children || $[17] !== showCloseButton || $[18] !== t7) {
-		t8 = /* @__PURE__ */ jsx(DialogContent, {
-			className: t7,
-			showCloseButton,
+	if ($[12] !== _description) {
+		t8 = /* @__PURE__ */ jsx(DialogDescription, { children: _description });
+		$[12] = _description;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t7 || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [t7, t8]
+		});
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== overlayClassName) {
+		t10 = cn(commandDialogOverlayClassName, overlayClassName);
+		$[17] = overlayClassName;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== className || $[20] !== contentClassName) {
+		t11 = cn(commandDialogContentClassName, contentClassName, className);
+		$[19] = className;
+		$[20] = contentClassName;
+		$[21] = t11;
+	} else t11 = $[21];
+	const t12 = usePaletteId(palette);
+	let t13;
+	if ($[22] !== children || $[23] !== props.defaultValue || $[24] !== props.filter || $[25] !== props.loop || $[26] !== props.onValueChange || $[27] !== props.shouldFilter || $[28] !== props.value || $[29] !== t12 || $[30] !== title) {
+		t13 = /* @__PURE__ */ jsx(Command$1, {
+			"data-slot": "command-dialog",
+			palette: t12,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			filter: props.filter,
+			shouldFilter: props.shouldFilter,
+			loop: props.loop,
+			onValueChange: props.onValueChange,
+			label: title,
+			className: commandRootClassName,
 			children
 		});
-		$[16] = children;
-		$[17] = showCloseButton;
-		$[18] = t7;
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== props || $[21] !== t6 || $[22] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Dialog, {
-			...props,
-			children: [t6, t8]
+		$[22] = children;
+		$[23] = props.defaultValue;
+		$[24] = props.filter;
+		$[25] = props.loop;
+		$[26] = props.onValueChange;
+		$[27] = props.shouldFilter;
+		$[28] = props.value;
+		$[29] = t12;
+		$[30] = title;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== showCloseButton || $[33] !== t10 || $[34] !== t11 || $[35] !== t13) {
+		t14 = /* @__PURE__ */ jsx(DialogContent, {
+			overlayClassName: t10,
+			className: t11,
+			showCloseButton,
+			children: t13
+		});
+		$[32] = showCloseButton;
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t13;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== props.defaultOpen || $[38] !== props.onOpenChange || $[39] !== props.open || $[40] !== t14 || $[41] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(Dialog, {
+			open: t4,
+			onOpenChange: t5,
+			defaultOpen: t6,
+			children: [t9, t14]
 		});
-		$[20] = props;
-		$[21] = t6;
-		$[22] = t8;
-		$[23] = t9;
-	} else t9 = $[23];
-	return t9;
+		$[37] = props.defaultOpen;
+		$[38] = props.onOpenChange;
+		$[39] = props.open;
+		$[40] = t14;
+		$[41] = t9;
+		$[42] = t15;
+	} else t15 = $[42];
+	return t15;
 }
 function CommandInput(t0) {
 	const $ = c(11);
@@ -141,7 +310,7 @@ function CommandInput(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg.Input, {
+		t2 = /* @__PURE__ */ jsx(Command$1.Input, {
 			"data-slot": "command-input",
 			className: t1,
 			...props
@@ -185,13 +354,13 @@ function CommandList(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className);
+		t1 = cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg.List, {
+		t2 = /* @__PURE__ */ jsx(Command$1.List, {
 			"data-slot": "command-list",
 			className: t1,
 			...props
@@ -223,7 +392,7 @@ function CommandEmpty(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg.Empty, {
+		t2 = /* @__PURE__ */ jsx(Command$1.Empty, {
 			"data-slot": "command-empty",
 			className: t1,
 			...props
@@ -249,13 +418,13 @@ function CommandGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium", className);
+		t1 = cn("text-foreground **:[[cmd-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmd-group-heading]]:px-2 **:[[cmd-group-heading]]:py-1.5 **:[[cmd-group-heading]]:text-xs **:[[cmd-group-heading]]:font-medium", className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg.Group, {
+		t2 = /* @__PURE__ */ jsx(Command$1.Group, {
 			"data-slot": "command-group",
 			className: t1,
 			...props
@@ -287,7 +456,7 @@ function CommandSeparator(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(pkg.Separator, {
+		t2 = /* @__PURE__ */ jsx(Command$1.Separator, {
 			"data-slot": "command-separator",
 			className: t1,
 			...props
@@ -299,7 +468,7 @@ function CommandSeparator(t0) {
 	return t2;
 }
 function CommandItem(t0) {
-	const $ = c(11);
+	const $ = c(10);
 	let children;
 	let className;
 	let props;
@@ -316,29 +485,88 @@ function CommandItem(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className);
+		t1 = cn(commandItemClassName, className);
 		$[4] = className;
 		$[5] = t1;
 	} else t1 = $[5];
 	let t2;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" });
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
-		t3 = /* @__PURE__ */ jsxs(pkg.Item, {
+	if ($[6] !== children || $[7] !== props || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Command$1.Item, {
 			"data-slot": "command-item",
 			className: t1,
 			...props,
-			children: [children, t2]
+			children
 		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
+		$[6] = children;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+}
+function CommandLoading(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("py-6 text-center text-sm", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Command$1.Loading, {
+			"data-slot": "command-loading",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function CommandActions(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn(commandActionsClassName, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Command$1.Actions, {
+			"data-slot": "command-actions",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 function CommandShortcut(t0) {
 	const $ = c(8);
@@ -372,6 +600,16 @@ function CommandShortcut(t0) {
 	} else t2 = $[7];
 	return t2;
 }
-
+const Command = Object.assign(CommandRoot, {
+	Dialog: CommandDialogRoot,
+	Input: CommandInput,
+	List: CommandList,
+	Empty: CommandEmpty,
+	Group: CommandGroup,
+	Separator: CommandSeparator,
+	Item: CommandItem,
+	Loading: CommandLoading,
+	Actions: CommandActions
+});
 //#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandActions, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, createCommandPalette, useCommandActions, useCommandShortcutDefault };

package/dist/ui/context-menu.mjs

@@ -1,9 +1,9 @@
 import { cn } from "../lib/utils.mjs";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
-
 //#region src/ui/context-menu.tsx
 function ContextMenu(t0) {
 	const $ = c(4);
@@ -514,6 +514,5 @@ function ContextMenuShortcut(t0) {
 	} else t2 = $[7];
 	return t2;
 }
-
 //#endregion
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/ui/dialog.d.mts

@@ -21,10 +21,12 @@ declare function DialogOverlay({
 }: Dialog$1.Backdrop.Props): react_jsx_runtime0.JSX.Element;
 declare function DialogContent({
   className,
+  overlayClassName,
   children,
   showCloseButton,
   ...props
 }: Dialog$1.Popup.Props & {
+  overlayClassName?: string;
   showCloseButton?: boolean;
 }): react_jsx_runtime0.JSX.Element;
 declare function DialogHeader({

package/dist/ui/dialog.mjs

@@ -1,10 +1,10 @@
 import { cn } from "../lib/utils.mjs";
 import { Button } from "./button.mjs";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-
 //#region src/ui/dialog.tsx
 function Dialog(t0) {
 	const $ = c(4);
@@ -115,38 +115,42 @@ function DialogOverlay(t0) {
 	return t2;
 }
 function DialogContent(t0) {
-	const $ = c(15);
+	const $ = c(20);
 	let children;
 	let className;
+	let overlayClassName;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({className, children, showCloseButton: t1, ...props} = t0);
+		({className, overlayClassName, children, showCloseButton: t1, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
+		$[3] = overlayClassName;
+		$[4] = props;
+		$[5] = t1;
 	} else {
 		children = $[1];
 		className = $[2];
-		props = $[3];
-		t1 = $[4];
+		overlayClassName = $[3];
+		props = $[4];
+		t1 = $[5];
 	}
 	const showCloseButton = t1 === void 0 ? true : t1;
 	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(DialogOverlay, {});
-		$[5] = t2;
-	} else t2 = $[5];
+	if ($[6] !== overlayClassName) {
+		t2 = /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName });
+		$[6] = overlayClassName;
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[6] !== className) {
+	if ($[8] !== className) {
 		t3 = cn("bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", className);
-		$[6] = className;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[8] = className;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[8] !== showCloseButton) {
+	if ($[10] !== showCloseButton) {
 		t4 = showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			render: /* @__PURE__ */ jsx(Button, {
@@ -159,24 +163,31 @@ function DialogContent(t0) {
 				children: "Close"
 			})]
 		});
-		$[8] = showCloseButton;
-		$[9] = t4;
-	} else t4 = $[9];
+		$[10] = showCloseButton;
+		$[11] = t4;
+	} else t4 = $[11];
 	let t5;
-	if ($[10] !== children || $[11] !== props || $[12] !== t3 || $[13] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t2, /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+	if ($[12] !== children || $[13] !== props || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Dialog$1.Popup, {
 			"data-slot": "dialog-content",
 			className: t3,
 			...props,
 			children: [children, t4]
-		})] });
-		$[10] = children;
-		$[11] = props;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	return t5;
+		});
+		$[12] = children;
+		$[13] = props;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t2 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t2, t5] });
+		$[17] = t2;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 }
 function DialogHeader(t0) {
 	const $ = c(8);
@@ -325,6 +336,5 @@ function DialogDescription(t0) {
 	} else t2 = $[7];
 	return t2;
 }
-
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };