erp-pro-ui 0.1.4 → 0.1.6

package/dist/chunks/{theme-BceKeYhw.mjs → theme-koPrLKQv.mjs}

@@ -4,6 +4,8 @@ import { jsx } from "react/jsx-runtime";
 var ThemeContext = createContext(null);
 var MODE_STORAGE_KEY = "erp-pro-ui:mode";
 var THEME_STORAGE_KEY = "erp-pro-ui:theme";
+var VARIANT_STORAGE_KEY = "erp-pro-ui:variant";
+var DARK_VARIANT_STORAGE_KEY = "erp-pro-ui:dark-variant";
 function getStoredMode() {
 	if (typeof window === "undefined") return null;
 	const mode = localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem("mode");
@@ -14,31 +16,52 @@ function getStoredTheme() {
 	const theme = localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem("theme");
 	return theme === "purple" || theme === "teal" || theme === "yellow" || theme === "green" ? theme : null;
 }
+function getStoredVariant() {
+	if (typeof window === "undefined") return null;
+	const variant = localStorage.getItem(VARIANT_STORAGE_KEY) ?? localStorage.getItem(DARK_VARIANT_STORAGE_KEY);
+	return variant === "default" || variant === "alt" ? variant : null;
+}
 function ThemeProvider({ children }) {
 	const [mode, setMode] = useState(() => getStoredMode() ?? "dark");
 	const [theme, setTheme] = useState(() => getStoredTheme() ?? "purple");
+	const [variant, setVariant] = useState(() => getStoredVariant() ?? "default");
 	useLayoutEffect(() => {
-		const colorScheme = `${theme}-${mode}`;
+		const colorScheme = variant === "alt" ? `${theme}-${mode}-alt` : `${theme}-${mode}`;
 		document.documentElement.setAttribute("data-brand", theme);
 		document.documentElement.setAttribute("data-mode", mode);
+		document.documentElement.setAttribute("data-variant", variant);
+		document.documentElement.setAttribute("data-dark-variant", variant);
 		document.documentElement.setAttribute("data-theme", colorScheme);
 		document.documentElement.style.colorScheme = mode;
 		localStorage.setItem(MODE_STORAGE_KEY, mode);
 		localStorage.setItem(THEME_STORAGE_KEY, theme);
+		localStorage.setItem(VARIANT_STORAGE_KEY, variant);
+		localStorage.setItem(DARK_VARIANT_STORAGE_KEY, variant);
 		localStorage.setItem("mode", mode);
 		localStorage.setItem("theme", theme);
 		if (mode === "dark") document.documentElement.classList.add("dark");
 		else document.documentElement.classList.remove("dark");
-	}, [mode, theme]);
+	}, [
+		mode,
+		theme,
+		variant
+	]);
 	const toggleMode = () => setMode((previousMode) => previousMode === "light" ? "dark" : "light");
+	const toggleVariant = () => setVariant((previousVariant) => previousVariant === "default" ? "alt" : "default");
 	const value = {
 		mode,
 		theme,
 		brand: theme,
-		colorScheme: `${theme}-${mode}`,
+		variant,
+		darkVariant: variant,
+		colorScheme: variant === "alt" ? `${theme}-${mode}-alt` : `${theme}-${mode}`,
 		setMode,
 		toggleMode,
-		setTheme
+		setTheme,
+		setVariant,
+		toggleVariant,
+		setDarkVariant: setVariant,
+		toggleDarkVariant: toggleVariant
 	};
 	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
 		value,
@@ -53,4 +76,4 @@ function useThemeContext() {
 //#endregion
 export { useThemeContext as n, ThemeProvider as t };
 
-//# sourceMappingURL=theme-BceKeYhw.mjs.map
+//# sourceMappingURL=theme-koPrLKQv.mjs.map

package/dist/chunks/theme-koPrLKQv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-koPrLKQv.mjs","names":[],"sources":["../../src/foundations/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nexport type ThemeModeType = \"light\" | \"dark\";\nexport type ThemeColorType = \"purple\" | \"teal\" | \"yellow\" | \"green\";\nexport type ThemeVariantType = \"default\" | \"alt\";\n/**\n * @deprecated Use ThemeVariantType instead.\n */\nexport type ThemeDarkVariantType = ThemeVariantType;\nexport type ThemeColorSchemeType =\n  | `${ThemeColorType}-light`\n  | `${ThemeColorType}-light-alt`\n  | `${ThemeColorType}-dark`\n  | `${ThemeColorType}-dark-alt`;\n\nexport interface UseThemeType {\n  mode: ThemeModeType;\n  theme: ThemeColorType;\n  brand: ThemeColorType;\n  variant: ThemeVariantType;\n  /**\n   * @deprecated Use `variant` instead.\n   */\n  darkVariant: ThemeVariantType;\n  colorScheme: ThemeColorSchemeType;\n  setMode: (mode: ThemeModeType) => void;\n  toggleMode: () => void;\n  setTheme: (theme: ThemeColorType) => void;\n  setVariant: (variant: ThemeVariantType) => void;\n  toggleVariant: () => void;\n  /**\n   * @deprecated Use `setVariant` instead.\n   */\n  setDarkVariant: (variant: ThemeVariantType) => void;\n  /**\n   * @deprecated Use `toggleVariant` instead.\n   */\n  toggleDarkVariant: () => void;\n}\n\nconst ThemeContext = createContext<UseThemeType | null>(null);\n\nconst MODE_STORAGE_KEY = \"erp-pro-ui:mode\";\nconst THEME_STORAGE_KEY = \"erp-pro-ui:theme\";\nconst VARIANT_STORAGE_KEY = \"erp-pro-ui:variant\";\nconst DARK_VARIANT_STORAGE_KEY = \"erp-pro-ui:dark-variant\";\n\nfunction getStoredMode(): ThemeModeType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const mode =\n    localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem(\"mode\");\n  return mode === \"light\" || mode === \"dark\" ? mode : null;\n}\n\nfunction getStoredTheme(): ThemeColorType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const theme =\n    localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(\"theme\");\n  return theme === \"purple\" ||\n    theme === \"teal\" ||\n    theme === \"yellow\" ||\n    theme === \"green\"\n    ? theme\n    : null;\n}\n\nfunction getStoredVariant(): ThemeVariantType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const variant =\n    localStorage.getItem(VARIANT_STORAGE_KEY) ??\n    localStorage.getItem(DARK_VARIANT_STORAGE_KEY);\n  return variant === \"default\" || variant === \"alt\" ? variant : null;\n}\n\nexport function ThemeProvider({ children }: { children: ReactNode }) {\n  const [mode, setMode] = useState<ThemeModeType>(\n    () => getStoredMode() ?? \"dark\",\n  );\n  const [theme, setTheme] = useState<ThemeColorType>(\n    () => getStoredTheme() ?? \"purple\",\n  );\n  const [variant, setVariant] = useState<ThemeVariantType>(\n    () => getStoredVariant() ?? \"default\",\n  );\n\n  useLayoutEffect(() => {\n    const colorScheme = (\n      variant === \"alt\" ? `${theme}-${mode}-alt` : `${theme}-${mode}`\n    ) as ThemeColorSchemeType;\n\n    document.documentElement.setAttribute(\"data-brand\", theme);\n    document.documentElement.setAttribute(\"data-mode\", mode);\n    document.documentElement.setAttribute(\"data-variant\", variant);\n    // Backward-compatibility attribute for consumers still using darkVariant.\n    document.documentElement.setAttribute(\"data-dark-variant\", variant);\n    document.documentElement.setAttribute(\"data-theme\", colorScheme);\n    document.documentElement.style.colorScheme = mode;\n\n    localStorage.setItem(MODE_STORAGE_KEY, mode);\n    localStorage.setItem(THEME_STORAGE_KEY, theme);\n    localStorage.setItem(VARIANT_STORAGE_KEY, variant);\n    localStorage.setItem(DARK_VARIANT_STORAGE_KEY, variant);\n    localStorage.setItem(\"mode\", mode);\n    localStorage.setItem(\"theme\", theme);\n\n    if (mode === \"dark\") {\n      document.documentElement.classList.add(\"dark\");\n    } else {\n      document.documentElement.classList.remove(\"dark\");\n    }\n  }, [mode, theme, variant]);\n\n  const toggleMode = () =>\n    setMode((previousMode) => (previousMode === \"light\" ? \"dark\" : \"light\"));\n  const toggleVariant = () =>\n    setVariant((previousVariant) =>\n      previousVariant === \"default\" ? \"alt\" : \"default\",\n    );\n\n  const value: UseThemeType = {\n    mode,\n    theme,\n    brand: theme,\n    variant,\n    darkVariant: variant,\n    colorScheme: (variant === \"alt\"\n      ? `${theme}-${mode}-alt`\n      : `${theme}-${mode}`) as ThemeColorSchemeType,\n    setMode,\n    toggleMode,\n    setTheme,\n    setVariant,\n    toggleVariant,\n    setDarkVariant: setVariant,\n    toggleDarkVariant: toggleVariant,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport function useThemeContext() {\n  const context = useContext(ThemeContext);\n\n  if (!context) {\n    throw new Error(\"useThemeContext must be used within a ThemeProvider\");\n  }\n\n  return context;\n}\n"],"mappings":";;;AAyCA,IAAM,eAAe,cAAmC,KAAK;AAE7D,IAAM,mBAAmB;AACzB,IAAM,oBAAoB;AAC1B,IAAM,sBAAsB;AAC5B,IAAM,2BAA2B;AAEjC,SAAS,gBAAsC;AAC7C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,OACJ,aAAa,QAAQ,iBAAiB,IAAI,aAAa,QAAQ,OAAO;AACxE,QAAO,SAAS,WAAW,SAAS,SAAS,OAAO;;AAGtD,SAAS,iBAAwC;AAC/C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,QACJ,aAAa,QAAQ,kBAAkB,IAAI,aAAa,QAAQ,QAAQ;AAC1E,QAAO,UAAU,YACf,UAAU,UACV,UAAU,YACV,UAAU,UACR,QACA;;AAGN,SAAS,mBAA4C;AACnD,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,UACJ,aAAa,QAAQ,oBAAoB,IACzC,aAAa,QAAQ,yBAAyB;AAChD,QAAO,YAAY,aAAa,YAAY,QAAQ,UAAU;;AAGhE,SAAgB,cAAc,EAAE,YAAqC;CACnE,MAAM,CAAC,MAAM,WAAW,eAChB,eAAe,IAAI,OAC1B;CACD,MAAM,CAAC,OAAO,YAAY,eAClB,gBAAgB,IAAI,SAC3B;CACD,MAAM,CAAC,SAAS,cAAc,eACtB,kBAAkB,IAAI,UAC7B;AAED,uBAAsB;EACpB,MAAM,cACJ,YAAY,QAAQ,GAAG,MAAM,GAAG,KAAK,QAAQ,GAAG,MAAM,GAAG;AAG3D,WAAS,gBAAgB,aAAa,cAAc,MAAM;AAC1D,WAAS,gBAAgB,aAAa,aAAa,KAAK;AACxD,WAAS,gBAAgB,aAAa,gBAAgB,QAAQ;AAE9D,WAAS,gBAAgB,aAAa,qBAAqB,QAAQ;AACnE,WAAS,gBAAgB,aAAa,cAAc,YAAY;AAChE,WAAS,gBAAgB,MAAM,cAAc;AAE7C,eAAa,QAAQ,kBAAkB,KAAK;AAC5C,eAAa,QAAQ,mBAAmB,MAAM;AAC9C,eAAa,QAAQ,qBAAqB,QAAQ;AAClD,eAAa,QAAQ,0BAA0B,QAAQ;AACvD,eAAa,QAAQ,QAAQ,KAAK;AAClC,eAAa,QAAQ,SAAS,MAAM;AAEpC,MAAI,SAAS,OACX,UAAS,gBAAgB,UAAU,IAAI,OAAO;MAE9C,UAAS,gBAAgB,UAAU,OAAO,OAAO;IAElD;EAAC;EAAM;EAAO;EAAQ,CAAC;CAE1B,MAAM,mBACJ,SAAS,iBAAkB,iBAAiB,UAAU,SAAS,QAAS;CAC1E,MAAM,sBACJ,YAAY,oBACV,oBAAoB,YAAY,QAAQ,UACzC;CAEH,MAAM,QAAsB;EAC1B;EACA;EACA,OAAO;EACP;EACA,aAAa;EACb,aAAc,YAAY,QACtB,GAAG,MAAM,GAAG,KAAK,QACjB,GAAG,MAAM,GAAG;EAChB;EACA;EACA;EACA;EACA;EACA,gBAAgB;EAChB,mBAAmB;EACpB;AAED,QACE,oBAAC,aAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA;;AAI3E,SAAgB,kBAAkB;CAChC,MAAM,UAAU,WAAW,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}

package/dist/chunks/{toast-CvfP7PUP.mjs → toast-CpX-22n2.mjs}

@@ -1,4 +1,4 @@
-import { _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, n as XCircleIcon, q as CloseIcon, u as InfoCircleIcon } from "./icons-DuumN7z-.mjs";
+import { _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, n as XCircleIcon, q as CloseIcon, u as InfoCircleIcon } from "./icons-bx3nrxNv.mjs";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
@@ -11,34 +11,34 @@ var useToast = () => {
 };
 var typeStyles = {
 	success: {
-		bg: "bg-white dark:bg-neutral-800 border-success-border",
-		icon: "text-success",
-		iconBg: "bg-success-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-success-border",
+		icon: "text-ds-state-success-text",
+		iconBg: "bg-ds-state-success-surface"
 	},
 	error: {
-		bg: "bg-white dark:bg-neutral-800 border-danger-border",
-		icon: "text-danger",
-		iconBg: "bg-danger-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-error-border",
+		icon: "text-ds-state-error-text",
+		iconBg: "bg-ds-state-error-surface"
 	},
 	warning: {
-		bg: "bg-white dark:bg-neutral-800 border-warning-border",
-		icon: "text-warning",
-		iconBg: "bg-warning-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-warning-border",
+		icon: "text-ds-state-warning-text",
+		iconBg: "bg-ds-state-warning-surface"
 	},
 	info: {
-		bg: "bg-white dark:bg-neutral-800 border-info-border",
-		icon: "text-info",
-		iconBg: "bg-info-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-info-border",
+		icon: "text-ds-state-info-text",
+		iconBg: "bg-ds-state-info-surface"
 	},
 	default: {
-		bg: "bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700",
-		icon: "text-neutral-500",
-		iconBg: "bg-neutral-100 dark:bg-neutral-700"
+		bg: "bg-ds-surface-1 border-ds-border-2",
+		icon: "text-ds-2",
+		iconBg: "bg-ds-surface-2"
 	},
 	loading: {
-		bg: "bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700",
-		icon: "text-accent",
-		iconBg: "bg-accent-subtle"
+		bg: "bg-ds-surface-1 border-ds-border-2",
+		icon: "text-ds-1",
+		iconBg: "bg-ds-accent-subtle"
 	}
 };
 var positionStyles = {
@@ -157,9 +157,9 @@ var ToastItem = forwardRef(({ toast, onDismiss, position }, ref) => {
 		"aria-live": "polite",
 		children: [
 			duration && duration > 0 && type !== "loading" && /* @__PURE__ */ jsx("div", {
-				className: "absolute bottom-0 left-0 right-0 h-1 bg-neutral-100 dark:bg-neutral-700",
+				className: "absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2",
 				children: /* @__PURE__ */ jsx(motion.div, {
-					className: `h-full ${type === "success" ? "bg-success" : type === "error" ? "bg-destructive" : type === "warning" ? "bg-warning" : type === "info" ? "bg-info" : "bg-neutral-400"}`,
+					className: `h-full ${type === "success" ? "bg-ds-state-success" : type === "error" ? "bg-ds-state-danger" : type === "warning" ? "bg-ds-state-warning" : type === "info" ? "bg-ds-state-info" : "bg-ds-border-3"}`,
 					style: { width: `${progress}%` },
 					transition: { duration: .05 }
 				})
@@ -172,11 +172,11 @@ var ToastItem = forwardRef(({ toast, onDismiss, position }, ref) => {
 				className: "flex-1 min-w-0",
 				children: [
 					title && /* @__PURE__ */ jsx("p", {
-						className: "font-semibold text-neutral-900 dark:text-white text-sm",
+						className: "text-sm font-semibold text-ds-1",
 						children: title
 					}),
 					description && /* @__PURE__ */ jsx("p", {
-						className: `text-sm text-neutral-600 dark:text-neutral-300 ${title ? "mt-1" : ""}`,
+						className: `text-sm text-ds-2 ${title ? "mt-1" : ""}`,
 						children: description
 					}),
 					action && /* @__PURE__ */ jsx("button", {
@@ -184,7 +184,7 @@ var ToastItem = forwardRef(({ toast, onDismiss, position }, ref) => {
 							action.onClick();
 							onDismiss(toast.id);
 						},
-						className: "mt-2 text-sm font-medium text-accent hover:underline",
+						className: "mt-2 text-sm font-medium text-ds-1 hover:underline",
 						children: action.label
 					})
 				]
@@ -194,7 +194,7 @@ var ToastItem = forwardRef(({ toast, onDismiss, position }, ref) => {
 					toast.onDismiss?.();
 					onDismiss(toast.id);
 				},
-				className: "absolute top-3 right-3 p-1 rounded-full text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors",
+				className: "absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1",
 				"aria-label": "Dismiss",
 				children: /* @__PURE__ */ jsx(CloseIcon, {
 					className: "w-4 h-4",
@@ -336,4 +336,4 @@ var toastStandalone = {
 //#endregion
 export { useToast as a, toastStandalone as i, ToastProvider as n, setGlobalToast as r, ToastItem as t };
 
-//# sourceMappingURL=toast-CvfP7PUP.mjs.map
+//# sourceMappingURL=toast-CpX-22n2.mjs.map

package/dist/chunks/toast-CpX-22n2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-CpX-22n2.mjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\"\n  | \"default\"\n  | \"loading\";\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n  promise?: {\n    loading: string;\n    success: string | ((data: unknown) => string);\n    error: string | ((error: unknown) => string);\n  };\n}\n\nexport interface ToastOptions {\n  type?: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n  toasts: Toast[];\n  toast: (options: ToastOptions | string) => string;\n  success: (options: ToastOptions | string) => string;\n  error: (options: ToastOptions | string) => string;\n  warning: (options: ToastOptions | string) => string;\n  info: (options: ToastOptions | string) => string;\n  loading: (options: ToastOptions | string) => string;\n  promise: <T>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => Promise<T>;\n  dismiss: (id: string) => void;\n  dismissAll: () => void;\n  update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  /** Default position for toasts */\n  position?: ToastPosition;\n  /** Default duration in milliseconds */\n  duration?: number;\n  /** Maximum number of visible toasts */\n  maxToasts?: number;\n  /** Gap between toasts */\n  gap?: number;\n  /** Whether toasts are dismissible by default */\n  dismissible?: boolean;\n  /** Custom className for the toast container */\n  containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n  toast: Toast;\n  onDismiss: (id: string) => void;\n  position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n  ToastType,\n  { bg: string; icon: string; iconBg: string }\n> = {\n  success: {\n    bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n    icon: \"text-ds-state-success-text\",\n    iconBg: \"bg-ds-state-success-surface\",\n  },\n  error: {\n    bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n    icon: \"text-ds-state-error-text\",\n    iconBg: \"bg-ds-state-error-surface\",\n  },\n  warning: {\n    bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n    icon: \"text-ds-state-warning-text\",\n    iconBg: \"bg-ds-state-warning-surface\",\n  },\n  info: {\n    bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n    icon: \"text-ds-state-info-text\",\n    iconBg: \"bg-ds-state-info-surface\",\n  },\n  default: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-2\",\n    iconBg: \"bg-ds-surface-2\",\n  },\n  loading: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-1\",\n    iconBg: \"bg-ds-accent-subtle\",\n  },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n  \"top-left\": \"top-4 left-4\",\n  \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n  \"top-right\": \"top-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n  \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n  const isTop = position.startsWith(\"top\");\n  const isCenter = position.includes(\"center\");\n  const isLeft = position.includes(\"left\");\n\n  return {\n    initial: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      x: isCenter ? 0 : isLeft ? -20 : 20,\n      scale: 0.95,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n      x: 0,\n      scale: 1,\n    },\n    exit: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      scale: 0.95,\n      transition: { duration: 0.15 },\n    },\n  };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n  ({ toast, onDismiss, position }, ref) => {\n    const {\n      type,\n      title,\n      description,\n      icon,\n      action,\n      dismissible = true,\n      duration,\n    } = toast;\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [progress, setProgress] = useState(100);\n    const [isPaused, setIsPaused] = useState(false);\n\n    const defaultIcons: Record<ToastType, React.ReactNode> = {\n      success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      loading: (\n        <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n      ),\n      default: null,\n    };\n\n    // Auto-dismiss timer with progress\n    useEffect(() => {\n      if (duration && duration > 0 && type !== \"loading\") {\n        const startTime = Date.now();\n        const interval = 50;\n\n        const updateProgress = () => {\n          if (isPaused) return;\n\n          const elapsed = Date.now() - startTime;\n          const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n          setProgress(remaining);\n\n          if (remaining <= 0) {\n            toast.onAutoClose?.();\n            onDismiss(toast.id);\n          }\n        };\n\n        timerRef.current = setInterval(updateProgress, interval);\n\n        return () => {\n          if (timerRef.current) {\n            clearInterval(timerRef.current);\n          }\n        };\n      }\n    }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n    const handleMouseEnter = () => setIsPaused(true);\n    const handleMouseLeave = () => setIsPaused(false);\n\n    const styles = typeStyles[type];\n    const displayIcon = icon ?? defaultIcons[type];\n    const variants = getMotionVariants(position);\n\n    return (\n      <motion.div\n        ref={ref}\n        layout\n        initial={variants.initial}\n        animate={variants.animate}\n        exit={variants.exit}\n        transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        className={`\n          relative flex items-start gap-3 p-4 pr-10\n          rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n          overflow-hidden\n          ${styles.bg}\n        `}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {/* Progress bar */}\n        {duration && duration > 0 && type !== \"loading\" && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n            <motion.div\n              className={`h-full ${\n                type === \"success\"\n                  ? \"bg-ds-state-success\"\n                  : type === \"error\"\n                    ? \"bg-ds-state-danger\"\n                    : type === \"warning\"\n                      ? \"bg-ds-state-warning\"\n                      : type === \"info\"\n                        ? \"bg-ds-state-info\"\n                        : \"bg-ds-border-3\"\n              }`}\n              style={{ width: `${progress}%` }}\n              transition={{ duration: 0.05 }}\n            />\n          </div>\n        )}\n\n        {/* Icon */}\n        {displayIcon && (\n          <div\n            className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n          >\n            {displayIcon}\n          </div>\n        )}\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n          {description && (\n            <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n              {description}\n            </p>\n          )}\n          {action && (\n            <button\n              onClick={() => {\n                action.onClick();\n                onDismiss(toast.id);\n              }}\n              className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {/* Dismiss button */}\n        {dismissible && (\n          <button\n            onClick={() => {\n              toast.onDismiss?.();\n              onDismiss(toast.id);\n            }}\n            className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n            aria-label=\"Dismiss\"\n          >\n            <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </motion.div>\n    );\n  },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  position = \"bottom-right\",\n  duration = 5000,\n  maxToasts = 5,\n  gap = 12,\n  dismissible = true,\n  containerClassName = \"\",\n}) => {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const toastIdCounter = useRef(0);\n\n  const generateId = () => {\n    toastIdCounter.current += 1;\n    return `toast-${toastIdCounter.current}-${Date.now()}`;\n  };\n\n  const addToast = useCallback(\n    (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n      const id = generateId();\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n\n      const newToast: Toast = {\n        id,\n        type: toastOptions.type ?? type,\n        title: toastOptions.title,\n        description: toastOptions.description,\n        duration: toastOptions.duration ?? duration,\n        icon: toastOptions.icon,\n        action: toastOptions.action,\n        dismissible: toastOptions.dismissible ?? dismissible,\n        onDismiss: toastOptions.onDismiss,\n        onAutoClose: toastOptions.onAutoClose,\n      };\n\n      setToasts((prev) => {\n        const updated = [...prev, newToast];\n        // Keep only the last maxToasts\n        return updated.slice(-maxToasts);\n      });\n\n      return id;\n    },\n    [duration, dismissible, maxToasts],\n  );\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n    setToasts((prev) =>\n      prev.map((t) =>\n        t.id === id\n          ? {\n              ...t,\n              ...options,\n              type: options.type ?? t.type,\n            }\n          : t,\n      ),\n    );\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"default\"),\n    [addToast],\n  );\n\n  const success = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"success\"),\n    [addToast],\n  );\n\n  const error = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"error\"),\n    [addToast],\n  );\n\n  const warning = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"warning\"),\n    [addToast],\n  );\n\n  const info = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"info\"),\n    [addToast],\n  );\n\n  const loading = useCallback(\n    (options: ToastOptions | string) => {\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n      return addToast(\n        { ...toastOptions, duration: 0, dismissible: false },\n        \"loading\",\n      );\n    },\n    [addToast],\n  );\n\n  const promise = useCallback(\n    async <T,>(\n      promiseToResolve: Promise<T>,\n      options: {\n        loading: string;\n        success: string | ((data: T) => string);\n        error: string | ((error: unknown) => string);\n      },\n    ): Promise<T> => {\n      const id = loading(options.loading);\n\n      try {\n        const result = await promiseToResolve;\n        const successMessage =\n          typeof options.success === \"function\"\n            ? options.success(result)\n            : options.success;\n        update(id, {\n          type: \"success\",\n          description: successMessage,\n          duration,\n          dismissible: true,\n        });\n        return result;\n      } catch (err) {\n        const errorMessage =\n          typeof options.error === \"function\"\n            ? options.error(err)\n            : options.error;\n        update(id, {\n          type: \"error\",\n          description: errorMessage,\n          duration,\n          dismissible: true,\n        });\n        throw err;\n      }\n    },\n    [loading, update, duration],\n  );\n\n  const contextValue: ToastContextValue = {\n    toasts,\n    toast,\n    success,\n    error,\n    warning,\n    info,\n    loading,\n    promise,\n    dismiss,\n    dismissAll,\n    update,\n  };\n\n  const isTop = position.startsWith(\"top\");\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n        style={{ gap: `${gap}px` }}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n            <div key={t.id} className=\"pointer-events-auto\">\n              <ToastItem toast={t} onDismiss={dismiss} position={position} />\n            </div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </ToastContext.Provider>\n  );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n  globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n  show: (options: ToastOptions | string) => globalToast?.toast(options),\n  success: (options: ToastOptions | string) => globalToast?.success(options),\n  error: (options: ToastOptions | string) => globalToast?.error(options),\n  warning: (options: ToastOptions | string) => globalToast?.warning(options),\n  info: (options: ToastOptions | string) => globalToast?.info(options),\n  loading: (options: ToastOptions | string) => globalToast?.loading(options),\n  promise: <T,>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => globalToast?.promise(promise, options),\n  dismiss: (id: string) => globalToast?.dismiss(id),\n  dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}

package/dist/chunks/{toast-Ds7_19Ap.cjs → toast-REa6FRBc.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -12,34 +12,34 @@ var useToast = () => {
 };
 var typeStyles = {
 	success: {
-		bg: "bg-white dark:bg-neutral-800 border-success-border",
-		icon: "text-success",
-		iconBg: "bg-success-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-success-border",
+		icon: "text-ds-state-success-text",
+		iconBg: "bg-ds-state-success-surface"
 	},
 	error: {
-		bg: "bg-white dark:bg-neutral-800 border-danger-border",
-		icon: "text-danger",
-		iconBg: "bg-danger-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-error-border",
+		icon: "text-ds-state-error-text",
+		iconBg: "bg-ds-state-error-surface"
 	},
 	warning: {
-		bg: "bg-white dark:bg-neutral-800 border-warning-border",
-		icon: "text-warning",
-		iconBg: "bg-warning-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-warning-border",
+		icon: "text-ds-state-warning-text",
+		iconBg: "bg-ds-state-warning-surface"
 	},
 	info: {
-		bg: "bg-white dark:bg-neutral-800 border-info-border",
-		icon: "text-info",
-		iconBg: "bg-info-subtle"
+		bg: "bg-ds-surface-1 border-ds-state-info-border",
+		icon: "text-ds-state-info-text",
+		iconBg: "bg-ds-state-info-surface"
 	},
 	default: {
-		bg: "bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700",
-		icon: "text-neutral-500",
-		iconBg: "bg-neutral-100 dark:bg-neutral-700"
+		bg: "bg-ds-surface-1 border-ds-border-2",
+		icon: "text-ds-2",
+		iconBg: "bg-ds-surface-2"
 	},
 	loading: {
-		bg: "bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700",
-		icon: "text-accent",
-		iconBg: "bg-accent-subtle"
+		bg: "bg-ds-surface-1 border-ds-border-2",
+		icon: "text-ds-1",
+		iconBg: "bg-ds-accent-subtle"
 	}
 };
 var positionStyles = {
@@ -158,9 +158,9 @@ var ToastItem = (0, react.forwardRef)(({ toast, onDismiss, position }, ref) => {
 		"aria-live": "polite",
 		children: [
 			duration && duration > 0 && type !== "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute bottom-0 left-0 right-0 h-1 bg-neutral-100 dark:bg-neutral-700",
+				className: "absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-					className: `h-full ${type === "success" ? "bg-success" : type === "error" ? "bg-destructive" : type === "warning" ? "bg-warning" : type === "info" ? "bg-info" : "bg-neutral-400"}`,
+					className: `h-full ${type === "success" ? "bg-ds-state-success" : type === "error" ? "bg-ds-state-danger" : type === "warning" ? "bg-ds-state-warning" : type === "info" ? "bg-ds-state-info" : "bg-ds-border-3"}`,
 					style: { width: `${progress}%` },
 					transition: { duration: .05 }
 				})
@@ -173,11 +173,11 @@ var ToastItem = (0, react.forwardRef)(({ toast, onDismiss, position }, ref) => {
 				className: "flex-1 min-w-0",
 				children: [
 					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "font-semibold text-neutral-900 dark:text-white text-sm",
+						className: "text-sm font-semibold text-ds-1",
 						children: title
 					}),
 					description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: `text-sm text-neutral-600 dark:text-neutral-300 ${title ? "mt-1" : ""}`,
+						className: `text-sm text-ds-2 ${title ? "mt-1" : ""}`,
 						children: description
 					}),
 					action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -185,7 +185,7 @@ var ToastItem = (0, react.forwardRef)(({ toast, onDismiss, position }, ref) => {
 							action.onClick();
 							onDismiss(toast.id);
 						},
-						className: "mt-2 text-sm font-medium text-accent hover:underline",
+						className: "mt-2 text-sm font-medium text-ds-1 hover:underline",
 						children: action.label
 					})
 				]
@@ -195,7 +195,7 @@ var ToastItem = (0, react.forwardRef)(({ toast, onDismiss, position }, ref) => {
 					toast.onDismiss?.();
 					onDismiss(toast.id);
 				},
-				className: "absolute top-3 right-3 p-1 rounded-full text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors",
+				className: "absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1",
 				"aria-label": "Dismiss",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
 					className: "w-4 h-4",
@@ -366,4 +366,4 @@ Object.defineProperty(exports, "useToast", {
 	}
 });
 
-//# sourceMappingURL=toast-Ds7_19Ap.cjs.map
+//# sourceMappingURL=toast-REa6FRBc.cjs.map

package/dist/chunks/toast-REa6FRBc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-REa6FRBc.cjs","names":[],"sources":["../../src/components/overlays/toast/Toast.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  XCircleIcon,\n} from \"../../icons\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ToastType =\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\"\n  | \"default\"\n  | \"loading\";\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n  promise?: {\n    loading: string;\n    success: string | ((data: unknown) => string);\n    error: string | ((error: unknown) => string);\n  };\n}\n\nexport interface ToastOptions {\n  type?: ToastType;\n  title?: string;\n  description?: string;\n  duration?: number;\n  icon?: React.ReactNode;\n  action?: ToastAction;\n  dismissible?: boolean;\n  onDismiss?: () => void;\n  onAutoClose?: () => void;\n}\n\nexport interface ToastContextValue {\n  toasts: Toast[];\n  toast: (options: ToastOptions | string) => string;\n  success: (options: ToastOptions | string) => string;\n  error: (options: ToastOptions | string) => string;\n  warning: (options: ToastOptions | string) => string;\n  info: (options: ToastOptions | string) => string;\n  loading: (options: ToastOptions | string) => string;\n  promise: <T>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => Promise<T>;\n  dismiss: (id: string) => void;\n  dismissAll: () => void;\n  update: (id: string, options: Partial<ToastOptions>) => void;\n}\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  /** Default position for toasts */\n  position?: ToastPosition;\n  /** Default duration in milliseconds */\n  duration?: number;\n  /** Maximum number of visible toasts */\n  maxToasts?: number;\n  /** Gap between toasts */\n  gap?: number;\n  /** Whether toasts are dismissible by default */\n  dismissible?: boolean;\n  /** Custom className for the toast container */\n  containerClassName?: string;\n}\n\nexport interface ToastItemProps {\n  toast: Toast;\n  onDismiss: (id: string) => void;\n  position: ToastPosition;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error(\"useToast must be used within a ToastProvider\");\n  }\n  return context;\n};\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst typeStyles: Record<\n  ToastType,\n  { bg: string; icon: string; iconBg: string }\n> = {\n  success: {\n    bg: \"bg-ds-surface-1 border-ds-state-success-border\",\n    icon: \"text-ds-state-success-text\",\n    iconBg: \"bg-ds-state-success-surface\",\n  },\n  error: {\n    bg: \"bg-ds-surface-1 border-ds-state-error-border\",\n    icon: \"text-ds-state-error-text\",\n    iconBg: \"bg-ds-state-error-surface\",\n  },\n  warning: {\n    bg: \"bg-ds-surface-1 border-ds-state-warning-border\",\n    icon: \"text-ds-state-warning-text\",\n    iconBg: \"bg-ds-state-warning-surface\",\n  },\n  info: {\n    bg: \"bg-ds-surface-1 border-ds-state-info-border\",\n    icon: \"text-ds-state-info-text\",\n    iconBg: \"bg-ds-state-info-surface\",\n  },\n  default: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-2\",\n    iconBg: \"bg-ds-surface-2\",\n  },\n  loading: {\n    bg: \"bg-ds-surface-1 border-ds-border-2\",\n    icon: \"text-ds-1\",\n    iconBg: \"bg-ds-accent-subtle\",\n  },\n};\n\nconst positionStyles: Record<ToastPosition, string> = {\n  \"top-left\": \"top-4 left-4\",\n  \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n  \"top-right\": \"top-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n  \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-4 right-4\",\n};\n\nconst getMotionVariants = (position: ToastPosition) => {\n  const isTop = position.startsWith(\"top\");\n  const isCenter = position.includes(\"center\");\n  const isLeft = position.includes(\"left\");\n\n  return {\n    initial: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      x: isCenter ? 0 : isLeft ? -20 : 20,\n      scale: 0.95,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n      x: 0,\n      scale: 1,\n    },\n    exit: {\n      opacity: 0,\n      y: isTop ? -20 : 20,\n      scale: 0.95,\n      transition: { duration: 0.15 },\n    },\n  };\n};\n\n// ============================================================================\n// Toast Item Component\n// ============================================================================\n\nconst ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(\n  ({ toast, onDismiss, position }, ref) => {\n    const {\n      type,\n      title,\n      description,\n      icon,\n      action,\n      dismissible = true,\n      duration,\n    } = toast;\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [progress, setProgress] = useState(100);\n    const [isPaused, setIsPaused] = useState(false);\n\n    const defaultIcons: Record<ToastType, React.ReactNode> = {\n      success: <CheckCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      error: <XCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      warning: <AlertTriangleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      info: <InfoCircleIcon className=\"w-5 h-5\" aria-hidden=\"true\" />,\n      loading: (\n        <LoaderIcon className=\"w-5 h-5 animate-spin\" aria-hidden=\"true\" />\n      ),\n      default: null,\n    };\n\n    // Auto-dismiss timer with progress\n    useEffect(() => {\n      if (duration && duration > 0 && type !== \"loading\") {\n        const startTime = Date.now();\n        const interval = 50;\n\n        const updateProgress = () => {\n          if (isPaused) return;\n\n          const elapsed = Date.now() - startTime;\n          const remaining = Math.max(0, 100 - (elapsed / duration) * 100);\n          setProgress(remaining);\n\n          if (remaining <= 0) {\n            toast.onAutoClose?.();\n            onDismiss(toast.id);\n          }\n        };\n\n        timerRef.current = setInterval(updateProgress, interval);\n\n        return () => {\n          if (timerRef.current) {\n            clearInterval(timerRef.current);\n          }\n        };\n      }\n    }, [duration, toast.id, type, isPaused, onDismiss, toast]);\n\n    const handleMouseEnter = () => setIsPaused(true);\n    const handleMouseLeave = () => setIsPaused(false);\n\n    const styles = typeStyles[type];\n    const displayIcon = icon ?? defaultIcons[type];\n    const variants = getMotionVariants(position);\n\n    return (\n      <motion.div\n        ref={ref}\n        layout\n        initial={variants.initial}\n        animate={variants.animate}\n        exit={variants.exit}\n        transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        className={`\n          relative flex items-start gap-3 p-4 pr-10\n          rounded-lg shadow-lg border min-w-[320px] max-w-[420px]\n          overflow-hidden\n          ${styles.bg}\n        `}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {/* Progress bar */}\n        {duration && duration > 0 && type !== \"loading\" && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-ds-surface-2\">\n            <motion.div\n              className={`h-full ${\n                type === \"success\"\n                  ? \"bg-ds-state-success\"\n                  : type === \"error\"\n                    ? \"bg-ds-state-danger\"\n                    : type === \"warning\"\n                      ? \"bg-ds-state-warning\"\n                      : type === \"info\"\n                        ? \"bg-ds-state-info\"\n                        : \"bg-ds-border-3\"\n              }`}\n              style={{ width: `${progress}%` }}\n              transition={{ duration: 0.05 }}\n            />\n          </div>\n        )}\n\n        {/* Icon */}\n        {displayIcon && (\n          <div\n            className={`shrink-0 p-1.5 rounded-full ${styles.iconBg} ${styles.icon}`}\n          >\n            {displayIcon}\n          </div>\n        )}\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          {title && <p className=\"text-sm font-semibold text-ds-1\">{title}</p>}\n          {description && (\n            <p className={`text-sm text-ds-2 ${title ? \"mt-1\" : \"\"}`}>\n              {description}\n            </p>\n          )}\n          {action && (\n            <button\n              onClick={() => {\n                action.onClick();\n                onDismiss(toast.id);\n              }}\n              className=\"mt-2 text-sm font-medium text-ds-1 hover:underline\"\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {/* Dismiss button */}\n        {dismissible && (\n          <button\n            onClick={() => {\n              toast.onDismiss?.();\n              onDismiss(toast.id);\n            }}\n            className=\"absolute top-3 right-3 rounded-full p-1 text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\"\n            aria-label=\"Dismiss\"\n          >\n            <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n          </button>\n        )}\n      </motion.div>\n    );\n  },\n);\n\nToastItem.displayName = \"ToastItem\";\n\n// ============================================================================\n// Toast Provider Component\n// ============================================================================\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  position = \"bottom-right\",\n  duration = 5000,\n  maxToasts = 5,\n  gap = 12,\n  dismissible = true,\n  containerClassName = \"\",\n}) => {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const toastIdCounter = useRef(0);\n\n  const generateId = () => {\n    toastIdCounter.current += 1;\n    return `toast-${toastIdCounter.current}-${Date.now()}`;\n  };\n\n  const addToast = useCallback(\n    (options: ToastOptions | string, type: ToastType = \"default\"): string => {\n      const id = generateId();\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n\n      const newToast: Toast = {\n        id,\n        type: toastOptions.type ?? type,\n        title: toastOptions.title,\n        description: toastOptions.description,\n        duration: toastOptions.duration ?? duration,\n        icon: toastOptions.icon,\n        action: toastOptions.action,\n        dismissible: toastOptions.dismissible ?? dismissible,\n        onDismiss: toastOptions.onDismiss,\n        onAutoClose: toastOptions.onAutoClose,\n      };\n\n      setToasts((prev) => {\n        const updated = [...prev, newToast];\n        // Keep only the last maxToasts\n        return updated.slice(-maxToasts);\n      });\n\n      return id;\n    },\n    [duration, dismissible, maxToasts],\n  );\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const update = useCallback((id: string, options: Partial<ToastOptions>) => {\n    setToasts((prev) =>\n      prev.map((t) =>\n        t.id === id\n          ? {\n              ...t,\n              ...options,\n              type: options.type ?? t.type,\n            }\n          : t,\n      ),\n    );\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"default\"),\n    [addToast],\n  );\n\n  const success = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"success\"),\n    [addToast],\n  );\n\n  const error = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"error\"),\n    [addToast],\n  );\n\n  const warning = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"warning\"),\n    [addToast],\n  );\n\n  const info = useCallback(\n    (options: ToastOptions | string) => addToast(options, \"info\"),\n    [addToast],\n  );\n\n  const loading = useCallback(\n    (options: ToastOptions | string) => {\n      const toastOptions: ToastOptions =\n        typeof options === \"string\" ? { description: options } : options;\n      return addToast(\n        { ...toastOptions, duration: 0, dismissible: false },\n        \"loading\",\n      );\n    },\n    [addToast],\n  );\n\n  const promise = useCallback(\n    async <T,>(\n      promiseToResolve: Promise<T>,\n      options: {\n        loading: string;\n        success: string | ((data: T) => string);\n        error: string | ((error: unknown) => string);\n      },\n    ): Promise<T> => {\n      const id = loading(options.loading);\n\n      try {\n        const result = await promiseToResolve;\n        const successMessage =\n          typeof options.success === \"function\"\n            ? options.success(result)\n            : options.success;\n        update(id, {\n          type: \"success\",\n          description: successMessage,\n          duration,\n          dismissible: true,\n        });\n        return result;\n      } catch (err) {\n        const errorMessage =\n          typeof options.error === \"function\"\n            ? options.error(err)\n            : options.error;\n        update(id, {\n          type: \"error\",\n          description: errorMessage,\n          duration,\n          dismissible: true,\n        });\n        throw err;\n      }\n    },\n    [loading, update, duration],\n  );\n\n  const contextValue: ToastContextValue = {\n    toasts,\n    toast,\n    success,\n    error,\n    warning,\n    info,\n    loading,\n    promise,\n    dismiss,\n    dismissAll,\n    update,\n  };\n\n  const isTop = position.startsWith(\"top\");\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={`fixed z-100 flex flex-col pointer-events-none ${positionStyles[position]} ${containerClassName}`}\n        style={{ gap: `${gap}px` }}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {(isTop ? toasts : [...toasts].reverse()).map((t) => (\n            <div key={t.id} className=\"pointer-events-auto\">\n              <ToastItem toast={t} onDismiss={dismiss} position={position} />\n            </div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </ToastContext.Provider>\n  );\n};\n\n// ============================================================================\n// Standalone toast function (for use without hooks)\n// ============================================================================\n\nlet globalToast: ToastContextValue | null = null;\n\nexport const setGlobalToast = (toastContext: ToastContextValue) => {\n  globalToast = toastContext;\n};\n\nexport const toastStandalone = {\n  show: (options: ToastOptions | string) => globalToast?.toast(options),\n  success: (options: ToastOptions | string) => globalToast?.success(options),\n  error: (options: ToastOptions | string) => globalToast?.error(options),\n  warning: (options: ToastOptions | string) => globalToast?.warning(options),\n  info: (options: ToastOptions | string) => globalToast?.info(options),\n  loading: (options: ToastOptions | string) => globalToast?.loading(options),\n  promise: <T,>(\n    promise: Promise<T>,\n    options: {\n      loading: string;\n      success: string | ((data: T) => string);\n      error: string | ((error: unknown) => string);\n    },\n  ) => globalToast?.promise(promise, options),\n  dismiss: (id: string) => globalToast?.dismiss(id),\n  dismissAll: () => globalToast?.dismissAll(),\n};\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport default ToastProvider;\nexport { ToastItem };\n"],"mappings":"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"}

package/dist/chunks/{tooltip-efHETBo1.mjs → tooltip-CASvQiFQ.mjs}

@@ -9,10 +9,10 @@ var positionStyles = {
 	right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
 var arrowStyles = {
-	top: "top-full left-1/2 -translate-x-1/2 border-t-neutral-800 dark:border-t-neutral-700 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0",
-	bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-neutral-800 dark:border-b-neutral-700 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0",
-	left: "left-full top-1/2 -translate-y-1/2 border-l-neutral-800 dark:border-l-neutral-700 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0",
-	right: "right-full top-1/2 -translate-y-1/2 border-r-neutral-800 dark:border-r-neutral-700 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0"
+	top: "top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0",
+	bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0",
+	left: "left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0",
+	right: "right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0"
 };
 var motionVariants = {
 	top: {
@@ -180,8 +180,7 @@ function Tooltip({ content, children, position = "top", trigger = "hover", delay
 			className: `
               absolute z-50 ${positionStyles[position]}
               px-3 py-2 text-sm font-medium
-              bg-neutral-800 dark:bg-neutral-700
-              text-white rounded-lg shadow-lg
+              rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg
               whitespace-normal break-words
               ${className}
             `,
@@ -196,4 +195,4 @@ function Tooltip({ content, children, position = "top", trigger = "hover", delay
 //#endregion
 export { Tooltip as t };
 
-//# sourceMappingURL=tooltip-efHETBo1.mjs.map
+//# sourceMappingURL=tooltip-CASvQiFQ.mjs.map

package/dist/chunks/tooltip-CASvQiFQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-CASvQiFQ.mjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n  /** The content to display in the tooltip */\n  content: React.ReactNode;\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Position of the tooltip relative to the trigger */\n  position?: TooltipPosition;\n  /** How the tooltip is triggered */\n  trigger?: TooltipTrigger;\n  /** Delay before showing tooltip (ms) */\n  delayShow?: number;\n  /** Delay before hiding tooltip (ms) */\n  delayHide?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Custom className for the tooltip */\n  className?: string;\n  /** Whether to show an arrow pointing to the trigger */\n  arrow?: boolean;\n  /** Maximum width of the tooltip */\n  maxWidth?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n  top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n  bottom:\n    \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n  left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n  right:\n    \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n  top: {\n    initial: { opacity: 0, y: 4, scale: 0.95 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: 4, scale: 0.95 },\n  },\n  bottom: {\n    initial: { opacity: 0, y: -4, scale: 0.95 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: -4, scale: 0.95 },\n  },\n  left: {\n    initial: { opacity: 0, x: 4, scale: 0.95 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: 4, scale: 0.95 },\n  },\n  right: {\n    initial: { opacity: 0, x: -4, scale: 0.95 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: -4, scale: 0.95 },\n  },\n} as const;\n\nexport default function Tooltip({\n  content,\n  children,\n  position = \"top\",\n  trigger = \"hover\",\n  delayShow = 200,\n  delayHide = 0,\n  disabled = false,\n  className = \"\",\n  arrow = true,\n  maxWidth = 250,\n  open: controlledOpen,\n  onOpenChange,\n}: TooltipProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (isControlled) {\n        onOpenChange?.(value);\n      } else {\n        setInternalOpen(value);\n      }\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const clearTimeouts = useCallback(() => {\n    if (showTimeoutRef.current) {\n      clearTimeout(showTimeoutRef.current);\n      showTimeoutRef.current = null;\n    }\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n  }, []);\n\n  const showTooltip = useCallback(() => {\n    if (disabled) return;\n    clearTimeouts();\n    if (delayShow > 0) {\n      showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n    } else {\n      setOpen(true);\n    }\n  }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n  const hideTooltip = useCallback(() => {\n    clearTimeouts();\n    if (delayHide > 0) {\n      hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n    } else {\n      setOpen(false);\n    }\n  }, [delayHide, setOpen, clearTimeouts]);\n\n  const toggleTooltip = useCallback(() => {\n    if (disabled) return;\n    setOpen(!isOpen);\n  }, [disabled, isOpen, setOpen]);\n\n  useEffect(() => {\n    return () => clearTimeouts();\n  }, [clearTimeouts]);\n\n  // Close on click outside for click trigger\n  useEffect(() => {\n    if (trigger !== \"click\" || !isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [trigger, isOpen, setOpen]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen, setOpen]);\n\n  const triggerProps = {\n    ...(trigger === \"hover\" && {\n      onMouseEnter: showTooltip,\n      onMouseLeave: hideTooltip,\n    }),\n    ...(trigger === \"click\" && {\n      onClick: toggleTooltip,\n    }),\n    ...(trigger === \"focus\" && {\n      onFocus: showTooltip,\n      onBlur: hideTooltip,\n    }),\n  };\n\n  return (\n    <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n      {children}\n      <AnimatePresence>\n        {isOpen && !disabled && (\n          <motion.div\n            role=\"tooltip\"\n            initial={motionVariants[position].initial}\n            animate={motionVariants[position].animate}\n            exit={motionVariants[position].exit}\n            transition={{ duration: 0.15, ease: \"easeOut\" }}\n            className={`\n              absolute z-50 ${positionStyles[position]}\n              px-3 py-2 text-sm font-medium\n              rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n              whitespace-normal break-words\n              ${className}\n            `}\n            style={{ maxWidth }}\n          >\n            {content}\n            {arrow && (\n              <span\n                className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n                aria-hidden=\"true\"\n              />\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport { Tooltip };\n"],"mappings":"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"}

package/dist/chunks/{tooltip-nkIqViGk.cjs → tooltip-CKF78rni.cjs}

@@ -10,10 +10,10 @@ var positionStyles = {
 	right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
 var arrowStyles = {
-	top: "top-full left-1/2 -translate-x-1/2 border-t-neutral-800 dark:border-t-neutral-700 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0",
-	bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-neutral-800 dark:border-b-neutral-700 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0",
-	left: "left-full top-1/2 -translate-y-1/2 border-l-neutral-800 dark:border-l-neutral-700 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0",
-	right: "right-full top-1/2 -translate-y-1/2 border-r-neutral-800 dark:border-r-neutral-700 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0"
+	top: "top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0",
+	bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0",
+	left: "left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0",
+	right: "right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0"
 };
 var motionVariants = {
 	top: {
@@ -181,8 +181,7 @@ function Tooltip({ content, children, position = "top", trigger = "hover", delay
 			className: `
               absolute z-50 ${positionStyles[position]}
               px-3 py-2 text-sm font-medium
-              bg-neutral-800 dark:bg-neutral-700
-              text-white rounded-lg shadow-lg
+              rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg
               whitespace-normal break-words
               ${className}
             `,
@@ -202,4 +201,4 @@ Object.defineProperty(exports, "Tooltip", {
 	}
 });
 
-//# sourceMappingURL=tooltip-nkIqViGk.cjs.map
+//# sourceMappingURL=tooltip-CKF78rni.cjs.map

package/dist/chunks/tooltip-CKF78rni.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-CKF78rni.cjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n  /** The content to display in the tooltip */\n  content: React.ReactNode;\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Position of the tooltip relative to the trigger */\n  position?: TooltipPosition;\n  /** How the tooltip is triggered */\n  trigger?: TooltipTrigger;\n  /** Delay before showing tooltip (ms) */\n  delayShow?: number;\n  /** Delay before hiding tooltip (ms) */\n  delayHide?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Custom className for the tooltip */\n  className?: string;\n  /** Whether to show an arrow pointing to the trigger */\n  arrow?: boolean;\n  /** Maximum width of the tooltip */\n  maxWidth?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n  top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n  bottom:\n    \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n  left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n  right:\n    \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n  top: {\n    initial: { opacity: 0, y: 4, scale: 0.95 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: 4, scale: 0.95 },\n  },\n  bottom: {\n    initial: { opacity: 0, y: -4, scale: 0.95 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: -4, scale: 0.95 },\n  },\n  left: {\n    initial: { opacity: 0, x: 4, scale: 0.95 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: 4, scale: 0.95 },\n  },\n  right: {\n    initial: { opacity: 0, x: -4, scale: 0.95 },\n    animate: { opacity: 1, x: 0, scale: 1 },\n    exit: { opacity: 0, x: -4, scale: 0.95 },\n  },\n} as const;\n\nexport default function Tooltip({\n  content,\n  children,\n  position = \"top\",\n  trigger = \"hover\",\n  delayShow = 200,\n  delayHide = 0,\n  disabled = false,\n  className = \"\",\n  arrow = true,\n  maxWidth = 250,\n  open: controlledOpen,\n  onOpenChange,\n}: TooltipProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (isControlled) {\n        onOpenChange?.(value);\n      } else {\n        setInternalOpen(value);\n      }\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const clearTimeouts = useCallback(() => {\n    if (showTimeoutRef.current) {\n      clearTimeout(showTimeoutRef.current);\n      showTimeoutRef.current = null;\n    }\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n  }, []);\n\n  const showTooltip = useCallback(() => {\n    if (disabled) return;\n    clearTimeouts();\n    if (delayShow > 0) {\n      showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n    } else {\n      setOpen(true);\n    }\n  }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n  const hideTooltip = useCallback(() => {\n    clearTimeouts();\n    if (delayHide > 0) {\n      hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n    } else {\n      setOpen(false);\n    }\n  }, [delayHide, setOpen, clearTimeouts]);\n\n  const toggleTooltip = useCallback(() => {\n    if (disabled) return;\n    setOpen(!isOpen);\n  }, [disabled, isOpen, setOpen]);\n\n  useEffect(() => {\n    return () => clearTimeouts();\n  }, [clearTimeouts]);\n\n  // Close on click outside for click trigger\n  useEffect(() => {\n    if (trigger !== \"click\" || !isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [trigger, isOpen, setOpen]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen, setOpen]);\n\n  const triggerProps = {\n    ...(trigger === \"hover\" && {\n      onMouseEnter: showTooltip,\n      onMouseLeave: hideTooltip,\n    }),\n    ...(trigger === \"click\" && {\n      onClick: toggleTooltip,\n    }),\n    ...(trigger === \"focus\" && {\n      onFocus: showTooltip,\n      onBlur: hideTooltip,\n    }),\n  };\n\n  return (\n    <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n      {children}\n      <AnimatePresence>\n        {isOpen && !disabled && (\n          <motion.div\n            role=\"tooltip\"\n            initial={motionVariants[position].initial}\n            animate={motionVariants[position].animate}\n            exit={motionVariants[position].exit}\n            transition={{ duration: 0.15, ease: \"easeOut\" }}\n            className={`\n              absolute z-50 ${positionStyles[position]}\n              px-3 py-2 text-sm font-medium\n              rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n              whitespace-normal break-words\n              ${className}\n            `}\n            style={{ maxWidth }}\n          >\n            {content}\n            {arrow && (\n              <span\n                className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n                aria-hidden=\"true\"\n              />\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport { Tooltip };\n"],"mappings":";;;;;AAiCA,IAAM,iBAAkD;CACtD,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AAED,IAAM,cAA+C;CACnD,KAAK;CACL,QACE;CACF,MAAM;CACN,OACE;CACH;AAED,IAAM,iBAAiB;CACrB,KAAK;EACH,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAM;EAC1C,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAM;EACxC;CACD,QAAQ;EACN,SAAS;GAAE,SAAS;GAAG,GAAG;GAAI,OAAO;GAAM;EAC3C,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI,OAAO;GAAM;EACzC;CACD,MAAM;EACJ,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAM;EAC1C,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAM;EACxC;CACD,OAAO;EACL,SAAS;GAAE,SAAS;GAAG,GAAG;GAAI,OAAO;GAAM;EAC3C,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG,OAAO;GAAG;EACvC,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI,OAAO;GAAM;EACzC;CACF;AAED,SAAwB,QAAQ,EAC9B,SACA,UACA,WAAW,OACX,UAAU,SACV,YAAY,KACZ,YAAY,GACZ,WAAW,OACX,YAAY,IACZ,QAAQ,MACR,WAAW,KACX,MAAM,gBACN,gBACe;CACf,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,MAAM;CACvD,MAAM,kBAAA,GAAA,MAAA,QAA8D,KAAK;CACzE,MAAM,kBAAA,GAAA,MAAA,QAA8D,KAAK;CACzE,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,SAAS,eAAe,iBAAiB;CAE/C,MAAM,WAAA,GAAA,MAAA,cACH,UAAmB;AAClB,MAAI,aACF,gBAAe,MAAM;MAErB,iBAAgB,MAAM;IAG1B,CAAC,cAAc,aAAa,CAC7B;CAED,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,MAAI,eAAe,SAAS;AAC1B,gBAAa,eAAe,QAAQ;AACpC,kBAAe,UAAU;;AAE3B,MAAI,eAAe,SAAS;AAC1B,gBAAa,eAAe,QAAQ;AACpC,kBAAe,UAAU;;IAE1B,EAAE,CAAC;CAEN,MAAM,eAAA,GAAA,MAAA,mBAAgC;AACpC,MAAI,SAAU;AACd,iBAAe;AACf,MAAI,YAAY,EACd,gBAAe,UAAU,iBAAiB,QAAQ,KAAK,EAAE,UAAU;MAEnE,SAAQ,KAAK;IAEd;EAAC;EAAU;EAAW;EAAS;EAAc,CAAC;CAEjD,MAAM,eAAA,GAAA,MAAA,mBAAgC;AACpC,iBAAe;AACf,MAAI,YAAY,EACd,gBAAe,UAAU,iBAAiB,QAAQ,MAAM,EAAE,UAAU;MAEpE,SAAQ,MAAM;IAEf;EAAC;EAAW;EAAS;EAAc,CAAC;CAEvC,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,MAAI,SAAU;AACd,UAAQ,CAAC,OAAO;IACf;EAAC;EAAU;EAAQ;EAAQ,CAAC;AAE/B,EAAA,GAAA,MAAA,iBAAgB;AACd,eAAa,eAAe;IAC3B,CAAC,cAAc,CAAC;AAGnB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,YAAY,WAAW,CAAC,OAAQ;EAEpC,MAAM,sBAAsB,UAAsB;AAChD,OACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,CAElD,SAAQ,MAAM;;AAIlB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,eAAa,SAAS,oBAAoB,aAAa,mBAAmB;IACzE;EAAC;EAAS;EAAQ;EAAQ,CAAC;AAG9B,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,OAAQ;EAEb,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,SAChB,SAAQ,MAAM;;AAIlB,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa,SAAS,oBAAoB,WAAW,aAAa;IACjE,CAAC,QAAQ,QAAQ,CAAC;AAgBrB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,KAAK;EAAY,WAAU;EAdhC,GAAI,YAAY,WAAW;GACzB,cAAc;GACd,cAAc;GACf;EACD,GAAI,YAAY,WAAW,EACzB,SAAS,eACV;EACD,GAAI,YAAY,WAAW;GACzB,SAAS;GACT,QAAQ;GACT;YAID,CACG,UACD,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD,EAAA,UACG,UAAU,CAAC,YACV,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;GACE,MAAK;GACL,SAAS,eAAe,UAAU;GAClC,SAAS,eAAe,UAAU;GAClC,MAAM,eAAe,UAAU;GAC/B,YAAY;IAAE,UAAU;IAAM,MAAM;IAAW;GAC/C,WAAW;8BACO,eAAe,UAAU;;;;gBAIvC,UAAU;;GAEd,OAAO,EAAE,UAAU;aAbrB,CAeG,SACA,SACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAW,oBAAoB,YAAY;IAC3C,eAAY;IACZ,CAAA,CAEO;MAEC,CAAA,CACd"}

package/dist/chunks/truncated-text-DTgks5yS.mjs

@@ -0,0 +1,45 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography/truncated-text/TruncatedText.tsx
+function extractTextContent(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) {
+		const parts = node.map((child) => extractTextContent(child)).filter((value) => Boolean(value));
+		return parts.length > 0 ? parts.join("") : void 0;
+	}
+	if (isValidElement(node)) return extractTextContent(node.props.children);
+}
+var TruncatedText = ({ children, as, lines = 1, width, maxWidth, showTitleOnHover = false, className, style, title, ...rest }) => {
+	const Component = as ?? "span";
+	const normalizedLines = Number.isFinite(lines) && lines > 0 ? Math.floor(lines) : 1;
+	const resolvedTitle = showTitleOnHover ? title ?? extractTextContent(children) : title;
+	const truncationStyle = normalizedLines > 1 ? {
+		...style,
+		width,
+		maxWidth,
+		overflow: "hidden",
+		display: style?.display ?? "-webkit-box",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: normalizedLines
+	} : {
+		...style,
+		width,
+		maxWidth,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		display: style?.display ?? "block"
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		...rest,
+		title: resolvedTitle,
+		style: truncationStyle,
+		className: mergeClassNames("min-w-0", className),
+		children
+	});
+};
+//#endregion
+export { TruncatedText as t };
+
+//# sourceMappingURL=truncated-text-DTgks5yS.mjs.map

package/dist/chunks/truncated-text-DTgks5yS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text-DTgks5yS.mjs","names":[],"sources":["../../src/components/typography/truncated-text/TruncatedText.tsx"],"sourcesContent":["import React, { isValidElement, type ElementType, type ReactNode } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nfunction extractTextContent(node: ReactNode): string | undefined {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    const parts = node\n      .map((child) => extractTextContent(child))\n      .filter((value): value is string => Boolean(value));\n\n    return parts.length > 0 ? parts.join(\"\") : undefined;\n  }\n\n  if (isValidElement<{ children?: ReactNode }>(node)) {\n    return extractTextContent(node.props.children);\n  }\n\n  return undefined;\n}\n\nexport interface TruncatedTextProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"children\"\n> {\n  children: ReactNode;\n  as?: ElementType;\n  lines?: number;\n  width?: React.CSSProperties[\"width\"];\n  maxWidth?: React.CSSProperties[\"maxWidth\"];\n  showTitleOnHover?: boolean;\n}\n\nexport const TruncatedText = ({\n  children,\n  as,\n  lines = 1,\n  width,\n  maxWidth,\n  showTitleOnHover = false,\n  className,\n  style,\n  title,\n  ...rest\n}: TruncatedTextProps): React.JSX.Element => {\n  const Component = as ?? \"span\";\n  const normalizedLines =\n    Number.isFinite(lines) && lines > 0 ? Math.floor(lines) : 1;\n  const resolvedTitle = showTitleOnHover\n    ? (title ?? extractTextContent(children))\n    : title;\n\n  const truncationStyle: React.CSSProperties =\n    normalizedLines > 1\n      ? {\n          ...style,\n          width,\n          maxWidth,\n          overflow: \"hidden\",\n          display: style?.display ?? \"-webkit-box\",\n          WebkitBoxOrient: \"vertical\",\n          WebkitLineClamp: normalizedLines,\n        }\n      : {\n          ...style,\n          width,\n          maxWidth,\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          whiteSpace: \"nowrap\",\n          display: style?.display ?? \"block\",\n        };\n\n  return (\n    <Component\n      {...rest}\n      title={resolvedTitle}\n      style={truncationStyle}\n      className={mergeClassNames(\"min-w-0\", className)}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAIA,SAAS,mBAAmB,MAAqC;AAC/D,KAAI,OAAO,SAAS,YAAY,OAAO,SAAS,SAC9C,QAAO,OAAO,KAAK;AAGrB,KAAI,MAAM,QAAQ,KAAK,EAAE;EACvB,MAAM,QAAQ,KACX,KAAK,UAAU,mBAAmB,MAAM,CAAC,CACzC,QAAQ,UAA2B,QAAQ,MAAM,CAAC;AAErD,SAAO,MAAM,SAAS,IAAI,MAAM,KAAK,GAAG,GAAG,KAAA;;AAG7C,KAAI,eAAyC,KAAK,CAChD,QAAO,mBAAmB,KAAK,MAAM,SAAS;;AAkBlD,IAAa,iBAAiB,EAC5B,UACA,IACA,QAAQ,GACR,OACA,UACA,mBAAmB,OACnB,WACA,OACA,OACA,GAAG,WACwC;CAC3C,MAAM,YAAY,MAAM;CACxB,MAAM,kBACJ,OAAO,SAAS,MAAM,IAAI,QAAQ,IAAI,KAAK,MAAM,MAAM,GAAG;CAC5D,MAAM,gBAAgB,mBACjB,SAAS,mBAAmB,SAAS,GACtC;CAEJ,MAAM,kBACJ,kBAAkB,IACd;EACE,GAAG;EACH;EACA;EACA,UAAU;EACV,SAAS,OAAO,WAAW;EAC3B,iBAAiB;EACjB,iBAAiB;EAClB,GACD;EACE,GAAG;EACH;EACA;EACA,UAAU;EACV,cAAc;EACd,YAAY;EACZ,SAAS,OAAO,WAAW;EAC5B;AAEP,QACE,oBAAC,WAAD;EACE,GAAI;EACJ,OAAO;EACP,OAAO;EACP,WAAW,gBAAgB,WAAW,UAAU;EAE/C;EACS,CAAA"}