erp-pro-ui 0.1.4 → 0.1.6

package/dist/chunks/{dialog-DUWnV9tN.mjs → dialog-BibwiFLY.mjs}

@@ -1,8 +1,9 @@
-import { _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, o as QuestionCircleIcon, q as CloseIcon, u as InfoCircleIcon, v as AlertCircleIcon } from "./icons-DuumN7z-.mjs";
-import { t as useOverlayEffects } from "./overlay-TycCIFOu.mjs";
+import { _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, o as QuestionCircleIcon, q as CloseIcon, u as InfoCircleIcon, v as AlertCircleIcon } from "./icons-bx3nrxNv.mjs";
+import { t as useOverlayEffects } from "./overlay-C58wXorc.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
+import { createPortal } from "react-dom";
 //#region src/components/overlays/dialog/Dialog.tsx
 var animationVariants = {
 	fade: {
@@ -203,40 +204,38 @@ var animationTransitions = {
 };
 var basePanel = `
   relative w-full max-w-lg rounded-2xl overflow-hidden
-  border border-white/30 dark:border-white/10
+  border border-ds-border-2
   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
+  bg-ds-surface-1/95
   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
+  ring-1 ring-inset ring-ds-border-3/40
 `;
 var variantStyles = {
 	default: {
-		icon: "bg-accent-subtle",
-		button: "bg-accent hover:bg-accent-hover text-on-accent",
-		iconColor: "text-accent"
+		icon: "bg-ds-accent-subtle",
+		button: "bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent",
+		iconColor: "text-ds-1"
 	},
 	destructive: {
-		icon: "bg-danger-subtle",
-		button: "bg-destructive hover:opacity-90 text-white",
-		iconColor: "text-danger"
+		icon: "bg-ds-state-error-surface",
+		button: "bg-ds-state-danger hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-error-text"
 	},
 	success: {
-		icon: "bg-success-subtle",
-		button: "bg-success hover:opacity-90 text-white",
-		iconColor: "text-success"
+		icon: "bg-ds-state-success-surface",
+		button: "bg-ds-state-success hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-success-text"
 	},
 	warning: {
-		icon: "bg-warning-subtle",
-		button: "bg-warning hover:opacity-90 text-neutral-950",
-		iconColor: "text-warning"
+		icon: "bg-ds-state-warning-surface",
+		button: "bg-ds-state-warning hover:opacity-90 text-ds-1",
+		iconColor: "text-ds-state-warning-text"
 	},
 	info: {
-		icon: "bg-info-subtle",
-		button: "bg-info hover:opacity-90 text-white",
-		iconColor: "text-info"
+		icon: "bg-ds-state-info-surface",
+		button: "bg-ds-state-info hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-info-text"
 	}
 };
 var VariantIcon = ({ variant }) => {
@@ -267,6 +266,7 @@ var Spinner = () => /* @__PURE__ */ jsx(LoaderIcon, {
 	className: "animate-spin w-4 h-4",
 	"aria-hidden": "true"
 });
+var DIALOG_ROOT_Z_INDEX = 2147483e3;
 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];
@@ -303,7 +303,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 				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",
+				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-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed",
 				children: cancelLabel
 			}), /* @__PURE__ */ jsxs("button", {
 				type: "button",
@@ -319,8 +319,9 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			})]
 		});
 	};
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center px-4 overlay-backdrop",
+	const dialogNode = /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 flex items-center justify-center px-4 overlay-backdrop",
+		style: { zIndex: DIALOG_ROOT_Z_INDEX },
 		role: "presentation",
 		children: [/* @__PURE__ */ jsx(motion.div, {
 			initial: { opacity: 0 },
@@ -342,10 +343,10 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			exit: currentAnimation.exit,
 			transition: currentTransition,
 			children: [
-				/* @__PURE__ */ 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" }),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4" }),
 				showClose && /* @__PURE__ */ 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",
+					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
 					"aria-label": "Close dialog",
 					onClick: () => onOpenChange?.(false),
 					children: /* @__PURE__ */ jsx(CloseIcon, {
@@ -364,10 +365,10 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex-1 min-w-0",
 						children: [title && /* @__PURE__ */ jsx("h2", {
-							className: "text-lg font-semibold text-neutral-900 dark:text-white pr-8",
+							className: "pr-8 text-lg font-semibold text-ds-1",
 							children: title
 						}), description && /* @__PURE__ */ jsx("p", {
-							className: "mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed",
+							className: "mt-1 text-sm leading-relaxed text-ds-2",
 							children: description
 						})]
 					})]
@@ -383,8 +384,10 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			]
 		})]
 	}) });
+	if (typeof document === "undefined") return dialogNode;
+	return createPortal(dialogNode, document.body);
 };
 //#endregion
 export { Dialog as t };
 
-//# sourceMappingURL=dialog-DUWnV9tN.mjs.map
+//# sourceMappingURL=dialog-BibwiFLY.mjs.map

package/dist/chunks/dialog-BibwiFLY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-BibwiFLY.mjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\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-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\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-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\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\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\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-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\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  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\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=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\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-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\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=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\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  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}

package/dist/chunks/{dialog-CYFiWN8M.cjs → dialog-I141I0nc.cjs}

@@ -1,9 +1,10 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-BxIzP2jd.cjs");
-const require_overlay = require("./overlay-DWNTyQzK.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+const require_overlay = require("./overlay-DwJgjJuu.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
+let react_dom = require("react-dom");
 //#region src/components/overlays/dialog/Dialog.tsx
 var animationVariants = {
 	fade: {
@@ -204,40 +205,38 @@ var animationTransitions = {
 };
 var basePanel = `
   relative w-full max-w-lg rounded-2xl overflow-hidden
-  border border-white/30 dark:border-white/10
+  border border-ds-border-2
   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
+  bg-ds-surface-1/95
   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
+  ring-1 ring-inset ring-ds-border-3/40
 `;
 var variantStyles = {
 	default: {
-		icon: "bg-accent-subtle",
-		button: "bg-accent hover:bg-accent-hover text-on-accent",
-		iconColor: "text-accent"
+		icon: "bg-ds-accent-subtle",
+		button: "bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent",
+		iconColor: "text-ds-1"
 	},
 	destructive: {
-		icon: "bg-danger-subtle",
-		button: "bg-destructive hover:opacity-90 text-white",
-		iconColor: "text-danger"
+		icon: "bg-ds-state-error-surface",
+		button: "bg-ds-state-danger hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-error-text"
 	},
 	success: {
-		icon: "bg-success-subtle",
-		button: "bg-success hover:opacity-90 text-white",
-		iconColor: "text-success"
+		icon: "bg-ds-state-success-surface",
+		button: "bg-ds-state-success hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-success-text"
 	},
 	warning: {
-		icon: "bg-warning-subtle",
-		button: "bg-warning hover:opacity-90 text-neutral-950",
-		iconColor: "text-warning"
+		icon: "bg-ds-state-warning-surface",
+		button: "bg-ds-state-warning hover:opacity-90 text-ds-1",
+		iconColor: "text-ds-state-warning-text"
 	},
 	info: {
-		icon: "bg-info-subtle",
-		button: "bg-info hover:opacity-90 text-white",
-		iconColor: "text-info"
+		icon: "bg-ds-state-info-surface",
+		button: "bg-ds-state-info hover:opacity-90 text-ds-on-accent",
+		iconColor: "text-ds-state-info-text"
 	}
 };
 var VariantIcon = ({ variant }) => {
@@ -268,6 +267,7 @@ var Spinner = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Loa
 	className: "animate-spin w-4 h-4",
 	"aria-hidden": "true"
 });
+var DIALOG_ROOT_Z_INDEX = 2147483e3;
 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];
@@ -304,7 +304,7 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 				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",
+				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-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\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",
@@ -320,8 +320,9 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			})]
 		});
 	};
-	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",
+	const dialogNode = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "fixed inset-0 flex items-center justify-center px-4 overlay-backdrop",
+		style: { zIndex: DIALOG_ROOT_Z_INDEX },
 		role: "presentation",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 			initial: { opacity: 0 },
@@ -343,10 +344,10 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			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" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4" }),
 				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",
+					className: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2",
 					"aria-label": "Close dialog",
 					onClick: () => onOpenChange?.(false),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
@@ -365,10 +366,10 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 					}), /* @__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",
+							className: "pr-8 text-lg font-semibold text-ds-1",
 							children: title
 						}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed",
+							className: "mt-1 text-sm leading-relaxed text-ds-2",
 							children: description
 						})]
 					})]
@@ -384,6 +385,8 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 			]
 		})]
 	}) });
+	if (typeof document === "undefined") return dialogNode;
+	return (0, react_dom.createPortal)(dialogNode, document.body);
 };
 //#endregion
 Object.defineProperty(exports, "Dialog", {
@@ -393,4 +396,4 @@ Object.defineProperty(exports, "Dialog", {
 	}
 });
 
-//# sourceMappingURL=dialog-CYFiWN8M.cjs.map
+//# sourceMappingURL=dialog-I141I0nc.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-I141I0nc.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\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-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\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-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\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\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\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-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\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  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\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=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\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-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\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=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\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  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}

package/dist/chunks/{drawer-D82Jz6KO.mjs → drawer-DsE8Pb8e.mjs}

@@ -1,9 +1,9 @@
-import { t as useOverlayEffects } from "./overlay-TycCIFOu.mjs";
+import { t as useOverlayEffects } from "./overlay-C58wXorc.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
 //#region src/components/overlays/drawer/Drawer.tsx
-var basePanel = "relative flex flex-col overflow-hidden rounded-2xl border border-white/30 bg-gradient-to-br from-white/80 via-white/68 to-white/52 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-white/25 backdrop-blur-2xl backdrop-saturate-150 dark:border-white/10 dark:from-neutral-950/84 dark:via-neutral-950/72 dark:to-neutral-900/58 dark:shadow-[0_28px_90px_rgba(0,0,0,0.52),0_10px_30px_rgba(0,0,0,0.3)] dark:ring-white/10";
+var basePanel = "relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150";
 var positionClasses = {
 	right: "h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border",
 	left: "h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border",
@@ -50,7 +50,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
 			transition: { duration: .3 },
-			className: "fixed inset-0 bg-slate-950/24 backdrop-blur-[3px] dark:bg-black/44",
+			className: "fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]",
 			onClick: () => onOpenChange?.(false)
 		}), /* @__PURE__ */ jsxs(motion.div, {
 			role: "dialog",
@@ -72,19 +72,19 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute inset-0 bg-linear-to-b from-white/30 via-white/10 to-transparent dark:from-white/10 dark:via-white/[0.03] dark:to-transparent"
+					className: "pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent"
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-white/40 to-transparent dark:from-white/12"
+					className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent"
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-white/35 blur-3xl dark:bg-sky-200/10"
+					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/35 bg-white/45 text-lg font-light text-foreground shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-white/72 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10",
+					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
 					"aria-label": "Close drawer",
 					onClick: () => onOpenChange?.(false),
 					children: "×"
@@ -95,10 +95,10 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 						(title || description) && /* @__PURE__ */ jsxs("header", {
 							className: "space-y-1 pr-10",
 							children: [title && /* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-semibold tracking-tight text-foreground",
+								className: "text-lg font-semibold tracking-tight text-ds-1",
 								children: title
 							}), description && /* @__PURE__ */ jsx("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-ds-2",
 								children: description
 							})]
 						}),
@@ -107,7 +107,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 							children
 						}),
 						footer && /* @__PURE__ */ jsx("footer", {
-							className: "mt-6 border-t border-white/20 pt-4 dark:border-white/10",
+							className: "mt-6 border-t border-ds-border-2 pt-4",
 							children: footer
 						})
 					]
@@ -119,4 +119,4 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 //#endregion
 export { Drawer as t };
 
-//# sourceMappingURL=drawer-D82Jz6KO.mjs.map
+//# sourceMappingURL=drawer-DsE8Pb8e.mjs.map

package/dist/chunks/drawer-DsE8Pb8e.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-DsE8Pb8e.mjs","names":[],"sources":["../../src/components/overlays/drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport type { DrawerProps, DrawerPosition } from \"./types\";\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\nconst basePanel =\n  \"relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150\";\n\nconst positionClasses: Record<DrawerPosition, string> = {\n  right: \"h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border\",\n  left: \"h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border\",\n  top: \"w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border\",\n  bottom: \"w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border\",\n};\n\nconst getVariants = (position: DrawerPosition) => {\n  switch (position) {\n    case \"left\":\n      return { hidden: { x: \"-100%\" }, visible: { x: 0 } };\n    case \"right\":\n      return { hidden: { x: \"100%\" }, visible: { x: 0 } };\n    case \"top\":\n      return { hidden: { y: \"-100%\" }, visible: { y: 0 } };\n    case \"bottom\":\n      return { hidden: { y: \"100%\" }, visible: { y: 0 } };\n  }\n};\n\nexport const Drawer = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  position = \"right\",\n  children,\n  footer,\n}: DrawerProps) => {\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 variants = getVariants(position);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-40 flex overlay-backdrop\"\n          role=\"presentation\"\n        >\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]\"\n            onClick={() => onOpenChange?.(false)}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} ${positionClasses[position]}`}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            transition={{ type: \"spring\", damping: 25, stiffness: 200 }}\n          >\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl\"\n            />\n            <button\n              type=\"button\"\n              className=\"absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3\"\n              aria-label=\"Close drawer\"\n              onClick={() => onOpenChange?.(false)}\n            >\n              ×\n            </button>\n            <div className=\"relative z-10 flex h-full flex-col\">\n              {(title || description) && (\n                <header className=\"space-y-1 pr-10\">\n                  {title && (\n                    <h2 className=\"text-lg font-semibold tracking-tight text-ds-1\">\n                      {title}\n                    </h2>\n                  )}\n                  {description && (\n                    <p className=\"text-sm text-ds-2\">{description}</p>\n                  )}\n                </header>\n              )}\n              {children && (\n                <div className=\"mt-4 flex-1 overflow-auto space-y-4 pr-1\">\n                  {children}\n                </div>\n              )}\n              {footer && (\n                <footer className=\"mt-6 border-t border-ds-border-2 pt-4\">\n                  {footer}\n                </footer>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAM,YACJ;AAEF,IAAM,kBAAkD;CACtD,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,eAAe,aAA6B;AAChD,SAAQ,UAAR;EACE,KAAK,OACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,QACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACrD,KAAK,MACH,QAAO;GAAE,QAAQ,EAAE,GAAG,SAAS;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;EACtD,KAAK,SACH,QAAO;GAAE,QAAQ,EAAE,GAAG,QAAQ;GAAE,SAAS,EAAE,GAAG,GAAG;GAAE;;;AAIzD,IAAa,UAAU,EACrB,MACA,cACA,OACA,aACA,WAAW,SACX,UACA,aACiB;CACjB,MAAM,WAAW,OAA8B,KAAK;AACpD,mBAAkB,UAAU,KAAK;AAEjC,iBAAgB;AACd,MAAI,CAAC,QAAQ,OAAO,WAAW,YAAa;EAC5C,MAAM,aAAa,UAAyB;AAC1C,OAAI,MAAM,QAAQ,SAChB,gBAAe,MAAM;;AAGzB,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa,OAAO,oBAAoB,WAAW,UAAU;IAC5D,CAAC,MAAM,aAAa,CAAC;CAExB,MAAM,WAAW,YAAY,SAAS;AAEtC,QACE,oBAAC,iBAAD,EAAA,UACG,QACC,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;YAFP,CAIE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAU;GACV,eAAe,eAAe,MAAM;GACpC,CAAA,EACF,qBAAC,OAAO,KAAR;GACE,MAAK;GACL,cAAW;GACX,cAAY;GACZ,WAAW,GAAG,UAAU,GAAG,gBAAgB;GAC3C,UAAU;GACV,KAAK;GACL,UAAU,UAAU,MAAM,iBAAiB;GAC3C,SAAQ;GACR,SAAQ;GACR,MAAK;GACK;GACV,YAAY;IAAE,MAAM;IAAU,SAAS;IAAI,WAAW;IAAK;aAZ7D;IAcE,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACV,CAAA;IACF,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,cAAW;KACX,eAAe,eAAe,MAAM;eACrC;KAEQ,CAAA;IACT,qBAAC,OAAD;KAAK,WAAU;eAAf;OACI,SAAS,gBACT,qBAAC,UAAD;OAAQ,WAAU;iBAAlB,CACG,SACC,oBAAC,MAAD;QAAI,WAAU;kBACX;QACE,CAAA,EAEN,eACC,oBAAC,KAAD;QAAG,WAAU;kBAAqB;QAAgB,CAAA,CAE7C;;MAEV,YACC,oBAAC,OAAD;OAAK,WAAU;OACZ;OACG,CAAA;MAEP,UACC,oBAAC,UAAD;OAAQ,WAAU;iBACf;OACM,CAAA;MAEP;;IACK;KACT;KAEQ,CAAA"}

package/dist/chunks/{drawer-CLjsYdxN.cjs → drawer-EC9eopGX.cjs}

@@ -1,10 +1,10 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_overlay = require("./overlay-DWNTyQzK.cjs");
+const require_overlay = require("./overlay-DwJgjJuu.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 //#region src/components/overlays/drawer/Drawer.tsx
-var basePanel = "relative flex flex-col overflow-hidden rounded-2xl border border-white/30 bg-gradient-to-br from-white/80 via-white/68 to-white/52 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-white/25 backdrop-blur-2xl backdrop-saturate-150 dark:border-white/10 dark:from-neutral-950/84 dark:via-neutral-950/72 dark:to-neutral-900/58 dark:shadow-[0_28px_90px_rgba(0,0,0,0.52),0_10px_30px_rgba(0,0,0,0.3)] dark:ring-white/10";
+var basePanel = "relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150";
 var positionClasses = {
 	right: "h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border",
 	left: "h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border",
@@ -51,7 +51,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
 			transition: { duration: .3 },
-			className: "fixed inset-0 bg-slate-950/24 backdrop-blur-[3px] dark:bg-black/44",
+			className: "fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]",
 			onClick: () => onOpenChange?.(false)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
 			role: "dialog",
@@ -73,19 +73,19 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute inset-0 bg-linear-to-b from-white/30 via-white/10 to-transparent dark:from-white/10 dark:via-white/[0.03] dark:to-transparent"
+					className: "pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-white/40 to-transparent dark:from-white/12"
+					className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"aria-hidden": "true",
-					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-white/35 blur-3xl dark:bg-sky-200/10"
+					className: "pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl"
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/35 bg-white/45 text-lg font-light text-foreground shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-white/72 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10",
+					className: "absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3",
 					"aria-label": "Close drawer",
 					onClick: () => onOpenChange?.(false),
 					children: "×"
@@ -96,10 +96,10 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 						(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 							className: "space-y-1 pr-10",
 							children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-								className: "text-lg font-semibold tracking-tight text-foreground",
+								className: "text-lg font-semibold tracking-tight text-ds-1",
 								children: title
 							}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-ds-2",
 								children: description
 							})]
 						}),
@@ -108,7 +108,7 @@ var Drawer = ({ open, onOpenChange, title, description, position = "right", chil
 							children
 						}),
 						footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-							className: "mt-6 border-t border-white/20 pt-4 dark:border-white/10",
+							className: "mt-6 border-t border-ds-border-2 pt-4",
 							children: footer
 						})
 					]
@@ -125,4 +125,4 @@ Object.defineProperty(exports, "Drawer", {
 	}
 });
 
-//# sourceMappingURL=drawer-CLjsYdxN.cjs.map
+//# sourceMappingURL=drawer-EC9eopGX.cjs.map

package/dist/chunks/drawer-EC9eopGX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-EC9eopGX.cjs","names":[],"sources":["../../src/components/overlays/drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport type { DrawerProps, DrawerPosition } from \"./types\";\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\nconst basePanel =\n  \"relative flex flex-col overflow-hidden rounded-2xl border border-ds-border-2 bg-ds-surface-1/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.22),0_8px_28px_rgba(15,23,42,0.14)] ring-1 ring-inset ring-ds-border-3/35 backdrop-blur-2xl backdrop-saturate-150\";\n\nconst positionClasses: Record<DrawerPosition, string> = {\n  right: \"h-[calc(100%-8px)] my-1 mr-1 w-full max-w-md ml-auto border\",\n  left: \"h-[calc(100%-8px)] my-1 ml-1 w-full max-w-md mr-auto border\",\n  top: \"w-[calc(100%-8px)] mx-1 mt-1 max-h-[80vh] border\",\n  bottom: \"w-[calc(100%-8px)] mx-1 mb-1 max-h-[80vh] mt-auto border\",\n};\n\nconst getVariants = (position: DrawerPosition) => {\n  switch (position) {\n    case \"left\":\n      return { hidden: { x: \"-100%\" }, visible: { x: 0 } };\n    case \"right\":\n      return { hidden: { x: \"100%\" }, visible: { x: 0 } };\n    case \"top\":\n      return { hidden: { y: \"-100%\" }, visible: { y: 0 } };\n    case \"bottom\":\n      return { hidden: { y: \"100%\" }, visible: { y: 0 } };\n  }\n};\n\nexport const Drawer = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  position = \"right\",\n  children,\n  footer,\n}: DrawerProps) => {\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 variants = getVariants(position);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 z-40 flex overlay-backdrop\"\n          role=\"presentation\"\n        >\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"fixed inset-0 bg-ds-canvas/55 backdrop-blur-[3px]\"\n            onClick={() => onOpenChange?.(false)}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} ${positionClasses[position]}`}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            variants={variants}\n            transition={{ type: \"spring\", damping: 25, stiffness: 200 }}\n          >\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-b from-ds-accent/10 via-transparent to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-x-0 top-0 h-24 bg-linear-to-b from-ds-accent/16 to-transparent\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute -right-10 top-[-72px] h-40 w-40 rounded-full bg-ds-accent/18 blur-3xl\"\n            />\n            <button\n              type=\"button\"\n              className=\"absolute right-4 top-4 z-20 inline-flex h-9 w-9 items-center justify-center rounded-full border border-ds-border-2 bg-ds-surface-2 text-lg font-light text-ds-1 shadow-sm backdrop-blur-md transition-all duration-200 hover:bg-ds-surface-3\"\n              aria-label=\"Close drawer\"\n              onClick={() => onOpenChange?.(false)}\n            >\n              ×\n            </button>\n            <div className=\"relative z-10 flex h-full flex-col\">\n              {(title || description) && (\n                <header className=\"space-y-1 pr-10\">\n                  {title && (\n                    <h2 className=\"text-lg font-semibold tracking-tight text-ds-1\">\n                      {title}\n                    </h2>\n                  )}\n                  {description && (\n                    <p className=\"text-sm text-ds-2\">{description}</p>\n                  )}\n                </header>\n              )}\n              {children && (\n                <div className=\"mt-4 flex-1 overflow-auto space-y-4 pr-1\">\n                  {children}\n                </div>\n              )}\n              {footer && (\n                <footer className=\"mt-6 border-t border-ds-border-2 pt-4\">\n                  {footer}\n                </footer>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"mappings":"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"}