erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/dialog-CYFiWN8M.cjs

@@ -0,0 +1,396 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_overlay = require("./overlay-DWNTyQzK.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/overlays/dialog/Dialog.tsx
+var animationVariants = {
+	fade: {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 }
+	},
+	scale: {
+		initial: {
+			opacity: 0,
+			scale: .9,
+			y: 20
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .95,
+			y: 10
+		}
+	},
+	slideUp: {
+		initial: {
+			opacity: 0,
+			y: 100
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: 50
+		}
+	},
+	slideDown: {
+		initial: {
+			opacity: 0,
+			y: -100
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -50
+		}
+	},
+	slideLeft: {
+		initial: {
+			opacity: 0,
+			x: 100
+		},
+		animate: {
+			opacity: 1,
+			x: 0
+		},
+		exit: {
+			opacity: 0,
+			x: 50
+		}
+	},
+	slideRight: {
+		initial: {
+			opacity: 0,
+			x: -100
+		},
+		animate: {
+			opacity: 1,
+			x: 0
+		},
+		exit: {
+			opacity: 0,
+			x: -50
+		}
+	},
+	elastic: {
+		initial: {
+			opacity: 0,
+			scale: .5,
+			y: 50
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .8,
+			y: 20
+		}
+	},
+	bounce: {
+		initial: {
+			opacity: 0,
+			scale: .3,
+			y: -100
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .5,
+			y: -50
+		}
+	},
+	flip: {
+		initial: {
+			opacity: 0,
+			rotateX: -90,
+			scale: .9
+		},
+		animate: {
+			opacity: 1,
+			rotateX: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			rotateX: 90,
+			scale: .9
+		}
+	},
+	zoom: {
+		initial: {
+			opacity: 0,
+			scale: 0,
+			rotate: -10
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			rotate: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .5,
+			rotate: 5
+		}
+	}
+};
+var animationTransitions = {
+	fade: { duration: .2 },
+	scale: {
+		type: "spring",
+		damping: 25,
+		stiffness: 300
+	},
+	slideUp: {
+		type: "spring",
+		damping: 25,
+		stiffness: 300
+	},
+	slideDown: {
+		type: "spring",
+		damping: 25,
+		stiffness: 300
+	},
+	slideLeft: {
+		type: "spring",
+		damping: 25,
+		stiffness: 300
+	},
+	slideRight: {
+		type: "spring",
+		damping: 25,
+		stiffness: 300
+	},
+	elastic: {
+		type: "spring",
+		damping: 10,
+		stiffness: 100
+	},
+	bounce: {
+		type: "spring",
+		damping: 8,
+		stiffness: 200,
+		bounce: .5
+	},
+	flip: {
+		type: "spring",
+		damping: 15,
+		stiffness: 150
+	},
+	zoom: {
+		type: "spring",
+		damping: 20,
+		stiffness: 200
+	}
+};
+var basePanel = `
+  relative w-full max-w-lg rounded-2xl overflow-hidden
+  border border-white/30 dark:border-white/10
+  backdrop-blur-2xl backdrop-saturate-150
+  bg-gradient-to-br from-white/80 via-white/70 to-white/60
+  dark:from-neutral-900/90 dark:via-neutral-900/80 dark:to-neutral-800/70
+  p-6
+  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]
+  dark:shadow-[0_8px_32px_rgba(0,0,0,0.5),0_2px_8px_rgba(0,0,0,0.3)]
+  ring-1 ring-inset ring-white/20 dark:ring-white/5
+`;
+var variantStyles = {
+	default: {
+		icon: "bg-accent-subtle",
+		button: "bg-accent hover:bg-accent-hover text-on-accent",
+		iconColor: "text-accent"
+	},
+	destructive: {
+		icon: "bg-danger-subtle",
+		button: "bg-destructive hover:opacity-90 text-white",
+		iconColor: "text-danger"
+	},
+	success: {
+		icon: "bg-success-subtle",
+		button: "bg-success hover:opacity-90 text-white",
+		iconColor: "text-success"
+	},
+	warning: {
+		icon: "bg-warning-subtle",
+		button: "bg-warning hover:opacity-90 text-neutral-950",
+		iconColor: "text-warning"
+	},
+	info: {
+		icon: "bg-info-subtle",
+		button: "bg-info hover:opacity-90 text-white",
+		iconColor: "text-info"
+	}
+};
+var VariantIcon = ({ variant }) => {
+	return {
+		default: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.QuestionCircleIcon, {
+			className: "w-6 h-6",
+			"aria-hidden": "true"
+		}),
+		destructive: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.AlertTriangleIcon, {
+			className: "w-6 h-6",
+			"aria-hidden": "true"
+		}),
+		success: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckCircleIcon, {
+			className: "w-6 h-6",
+			"aria-hidden": "true"
+		}),
+		warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.AlertCircleIcon, {
+			className: "w-6 h-6",
+			"aria-hidden": "true"
+		}),
+		info: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.InfoCircleIcon, {
+			className: "w-6 h-6",
+			"aria-hidden": "true"
+		})
+	}[variant];
+};
+var Spinner = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.LoaderIcon, {
+	className: "animate-spin w-4 h-4",
+	"aria-hidden": "true"
+});
+var Dialog = ({ open, onOpenChange, title, description, children, footer, closeOnOverlay = true, showClose = true, className = "", widthClassName = "", variant = "default", preset = "custom", confirmLabel = "OK", cancelLabel = "Cancel", onConfirm, onCancel, loading = false, icon, animation = "scale" }) => {
+	const currentAnimation = animationVariants[animation];
+	const currentTransition = animationTransitions[animation];
+	const panelRef = (0, react.useRef)(null);
+	require_overlay.useOverlayEffects(panelRef, open);
+	(0, react.useEffect)(() => {
+		if (!open || typeof window === "undefined") return;
+		const handleKey = (event) => {
+			if (event.key === "Escape") onOpenChange?.(false);
+		};
+		window.addEventListener("keydown", handleKey);
+		return () => window.removeEventListener("keydown", handleKey);
+	}, [open, onOpenChange]);
+	const handleOverlayClick = () => {
+		if (closeOnOverlay) onOpenChange?.(false);
+	};
+	const handleCancel = () => {
+		onCancel?.();
+		onOpenChange?.(false);
+	};
+	const handleConfirm = () => {
+		onConfirm?.();
+		if (!loading) onOpenChange?.(false);
+	};
+	const styles = variantStyles[variant];
+	const showPresetButtons = preset !== "custom" && !footer;
+	const showCancelButton = preset === "confirm";
+	const renderFooter = () => {
+		if (footer) return footer;
+		if (!showPresetButtons) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-3 justify-end w-full",
+			children: [showCancelButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleCancel,
+				disabled: loading,
+				className: "inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-neutral-200 dark:bg-neutral-700\n              border border-neutral-300 dark:border-neutral-600\n              text-neutral-800 dark:text-white\n              shadow-sm hover:bg-neutral-300 dark:hover:bg-neutral-600\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed",
+				children: cancelLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: handleConfirm,
+				disabled: loading,
+				className: `inline-flex items-center justify-center gap-2 cursor-pointer
+            py-2.5 px-4 text-sm font-semibold leading-none
+            rounded-lg transition-all duration-200
+            shadow-md hover:shadow-lg
+            active:scale-95 hover:opacity-90
+            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`,
+				children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, {}), confirmLabel]
+			})]
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center px-4 overlay-backdrop",
+		role: "presentation",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .2 },
+			className: "fixed inset-0 bg-black/30 backdrop-blur-sm",
+			onClick: handleOverlayClick
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			className: `${basePanel} overlay-panel ${className} ${widthClassName}`.trim(),
+			tabIndex: -1,
+			ref: panelRef,
+			onClick: (event) => event.stopPropagation(),
+			initial: currentAnimation.initial,
+			animate: currentAnimation.animate,
+			exit: currentAnimation.exit,
+			transition: currentTransition,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-white/10 via-transparent to-white/5 dark:from-white/5 dark:to-transparent pointer-events-none rounded-2xl" }),
+				showClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-neutral-400 dark:text-neutral-500\n                  hover:text-neutral-600 dark:hover:text-neutral-300\n                  hover:bg-neutral-100/50 dark:hover:bg-white/10",
+					"aria-label": "Close dialog",
+					onClick: () => onOpenChange?.(false),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+						className: "w-4 h-4",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative flex gap-4",
+					children: [preset !== "custom" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: styles.iconColor,
+							children: icon || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VariantIcon, { variant })
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex-1 min-w-0",
+						children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							className: "text-lg font-semibold text-neutral-900 dark:text-white pr-8",
+							children: title
+						}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed",
+							children: description
+						})]
+					})]
+				}),
+				children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-4 space-y-4 relative",
+					children
+				}),
+				(footer || showPresetButtons) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+					className: "mt-6 flex justify-end gap-3 relative",
+					children: renderFooter()
+				})
+			]
+		})]
+	}) });
+};
+//#endregion
+Object.defineProperty(exports, "Dialog", {
+	enumerable: true,
+	get: function() {
+		return Dialog;
+	}
+});
+
+//# sourceMappingURL=dialog-CYFiWN8M.cjs.map

package/dist/chunks/dialog-CYFiWN8M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-CYFiWN8M.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-white/30 dark:border-white/10\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-gradient-to-br from-white/80 via-white/70 to-white/60\n  dark:from-neutral-900/90 dark:via-neutral-900/80 dark:to-neutral-800/70\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  dark:shadow-[0_8px_32px_rgba(0,0,0,0.5),0_2px_8px_rgba(0,0,0,0.3)]\n  ring-1 ring-inset ring-white/20 dark:ring-white/5\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-accent-subtle\",\n    button: \"bg-accent hover:bg-accent-hover text-on-accent\",\n    iconColor: \"text-accent\",\n  },\n  destructive: {\n    icon: \"bg-danger-subtle\",\n    button: \"bg-destructive hover:opacity-90 text-white\",\n    iconColor: \"text-danger\",\n  },\n  success: {\n    icon: \"bg-success-subtle\",\n    button: \"bg-success hover:opacity-90 text-white\",\n    iconColor: \"text-success\",\n  },\n  warning: {\n    icon: \"bg-warning-subtle\",\n    button: \"bg-warning hover:opacity-90 text-neutral-950\",\n    iconColor: \"text-warning\",\n  },\n  info: {\n    icon: \"bg-info-subtle\",\n    button: \"bg-info hover:opacity-90 text-white\",\n    iconColor: \"text-info\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-neutral-200 dark:bg-neutral-700\n              border border-neutral-300 dark:border-neutral-600\n              text-neutral-800 dark:text-white\n              shadow-sm hover:bg-neutral-300 dark:hover:bg-neutral-600\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center px-4 overlay-backdrop\"\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"absolute inset-0 bg-linear-to-tr from-white/10 via-transparent to-white/5 dark:from-white/5 dark:to-transparent pointer-events-none rounded-2xl\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-neutral-400 dark:text-neutral-500\n                  hover:text-neutral-600 dark:hover:text-neutral-300\n                  hover:bg-neutral-100/50 dark:hover:bg-white/10\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"text-lg font-semibold text-neutral-900 dark:text-white pr-8\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":"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"}