@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/feedback/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sources":["../../../../src/react/core/feedback/ConfirmDialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Confirmation Dialog\n * \n * Convenience wrapper over Dialog for confirm/cancel actions.\n * Provides both a component API and a `useConfirm()` hook for imperative usage.\n * \n * Astro UX Compliance:\n * - Status-based alert colors\n * - Focus trap, escape to close\n * - Primary button on right (Astro convention)\n * \n * @example\n * ```tsx\n * // Hook API (imperative)\n * const confirm = useConfirm();\n * const ok = await confirm({\n *   title: 'Reset Component',\n *   message: 'This will reboot the spacecraft and suspend commands for 120 seconds.',\n *   status: 'caution',\n *   confirmLabel: 'Reset',\n *   destructive: true,\n * });\n * if (ok) doReset();\n * \n * // Component API (declarative)\n * <ConfirmDialog\n *   open={isOpen}\n *   onClose={() => setOpen(false)}\n *   onConfirm={handleReset}\n *   title=\"Delete All Data?\"\n *   message=\"This cannot be undone.\"\n *   status=\"critical\"\n *   destructive\n * />\n * ```\n */\n\nimport React, { memo, useState, useCallback, useRef, useEffect, useId, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ConfirmStatus = 'normal' | 'caution' | 'serious' | 'critical';\n\nexport interface ConfirmOptions {\n  /** Dialog title */\n  title: string;\n  /** Description text (string or React node) */\n  message?: React.ReactNode;\n  /** Status level (determines icon/border color) */\n  status?: ConfirmStatus;\n  /** Confirm button label (default: \"Confirm\") */\n  confirmLabel?: string;\n  /** Cancel button label (default: \"Cancel\") */\n  cancelLabel?: string;\n  /** Destructive action styling (red confirm button) */\n  destructive?: boolean;\n}\n\nexport interface ConfirmDialogProps extends ConfirmOptions {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Confirm handler */\n  onConfirm: () => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const ConfirmDialog = memo(function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  status,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  destructive = false,\n}: ConfirmDialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const messageId = useId();\n  const CONFIRM_DIALOG_Z_INDEX = 2147483200;\n\n  useEffect(() => {\n    if (!open) return;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n\n      if (e.key !== 'Tab') return;\n      const root = dialogRef.current;\n      if (!root) return;\n\n      const focusableElements = root.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute('disabled'));\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    const focusTimer = window.setTimeout(() => {\n      confirmRef.current?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(focusTimer);\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n      previousActiveElement.current?.focus();\n    };\n  }, [open, onClose]);\n\n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n  \n  const statusColors: Record<string, string> = {\n    normal: tokens.colors.status.normal,\n    caution: tokens.colors.status.caution,\n    serious: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n  };\n  \n  const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;\n  const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;\n  \n  // Status icon shapes (Astro UX dual-coded)\n  const statusIcon = status && (() => {\n    const s = 32;\n    const innerIcon = (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={accentColor} strokeWidth=\"2.5\" strokeLinecap=\"round\">\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n    const baseStyle: React.CSSProperties = {\n      width: s,\n      height: s,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    };\n    switch (status) {\n      case 'critical':\n        // Triangle (using clip-path)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',\n            paddingTop: 8,\n          }}>\n            {innerIcon}\n          </div>\n        );\n      case 'serious':\n        // Diamond (rotated square)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            transform: 'rotate(45deg)',\n          }}>\n            <div style={{ transform: 'rotate(-45deg)' }}>{innerIcon}</div>\n          </div>\n        );\n      case 'caution':\n        // Square (rounded)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '4px',\n          }}>\n            {innerIcon}\n          </div>\n        );\n      default:\n        // Circle (normal, standby, off)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '50%',\n          }}>\n            {innerIcon}\n          </div>\n        );\n    }\n  })();\n  \n  return createPortal((\n    <>\n      {/* Backdrop */}\n      <div\n        style={{\n          position: 'fixed',\n          inset: 0,\n          zIndex: CONFIRM_DIALOG_Z_INDEX,\n          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,\n          backdropFilter: 'blur(6px)',\n          WebkitBackdropFilter: 'blur(6px)',\n          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`,\n        }}\n        onClick={onClose}\n      />\n      \n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={message ? messageId : undefined}\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          position: 'fixed',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,\n          width: '100%',\n          maxWidth: 'min(440px, calc(100vw - 32px))',\n          backgroundColor: isTransparentTheme\n            ? 'rgba(15, 12, 30, 0.9)'\n            : tokens.colors.background.surface,\n          border: `1px solid ${tokens.colors.border.default}`,\n          borderRadius: tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          fontFamily: tokens.typography.fontFamily.primary,\n          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,\n          overflow: 'hidden',\n          ...(isTransparentTheme ? {\n            backdropFilter: 'blur(20px)',\n            WebkitBackdropFilter: 'blur(20px)',\n          } : {}),\n        }}\n      >\n        {/* Status accent bar */}\n        {status && (\n          <div style={{\n            height: 3,\n            backgroundColor: accentColor,\n            width: '100%',\n          }} />\n        )}\n        \n        {/* Content */}\n        <div style={{ padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` }}>\n          <div style={{ display: 'flex', gap: tokens.spacing.md, alignItems: 'flex-start' }}>\n            {statusIcon}\n            <div style={{ flex: 1 }}>\n              <div\n                id={titleId}\n                style={{\n                  fontSize: tokens.typography.fontSize.md,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                  lineHeight: tokens.typography.lineHeight.tight,\n                }}\n              >\n                {title}\n              </div>\n              {message && (\n                <div\n                  id={messageId}\n                  style={{\n                    fontSize: tokens.typography.fontSize.sm,\n                    color: tokens.colors.text.secondary,\n                    marginTop: tokens.spacing.sm,\n                    lineHeight: tokens.typography.lineHeight.normal,\n                  }}\n                >\n                  {message}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n        \n        {/* Actions — Astro UX: primary on right */}\n        <div style={{\n          display: 'flex',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.sm,\n          padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,\n          borderTop: tokens.borders.divider,\n        }}>\n          <button\n            onClick={onClose}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.medium,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.primary,\n              backgroundColor: tokens.colors.background.base,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmRef}\n            onClick={() => { onConfirm(); onClose(); }}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.inverse || '#fff',\n              backgroundColor: confirmBg,\n              border: 'none',\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n              boxShadow: `0 2px 8px ${confirmBg}40`,\n            }}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n      \n      <style>{`\n        @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }\n        @keyframes zendir-confirm-enter {\n          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }\n          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n        }\n      `}</style>\n    </>\n  ), document.body);\n});\n\n// ─── useConfirm Hook ─────────────────────────────────────────────────────────\n\ninterface ConfirmState extends ConfirmOptions {\n  resolve: (value: boolean) => void;\n}\n\nconst ConfirmContext = createContext<{\n  requestConfirm: (options: ConfirmOptions) => Promise<boolean>;\n} | null>(null);\n\n/**\n * Imperative confirmation hook.\n * Must be used within `<ConfirmProvider>`.\n * \n * @example\n * ```tsx\n * const confirm = useConfirm();\n * const ok = await confirm({ title: 'Delete?', status: 'critical', destructive: true });\n * ```\n */\nexport function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {\n  const ctx = useContext(ConfirmContext);\n  if (!ctx) throw new Error('useConfirm must be used within <ConfirmProvider>');\n  return ctx.requestConfirm;\n}\n\n/**\n * Provider for the useConfirm() hook.\n * Renders the confirmation dialog as needed.\n */\nexport const ConfirmProvider = memo(function ConfirmProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const [state, setState] = useState<ConfirmState | null>(null);\n  \n  const requestConfirm = useCallback((options: ConfirmOptions): Promise<boolean> => {\n    return new Promise<boolean>((resolve) => {\n      setState({ ...options, resolve });\n    });\n  }, []);\n  \n  const handleClose = useCallback(() => {\n    state?.resolve(false);\n    setState(null);\n  }, [state]);\n  \n  const handleConfirm = useCallback(() => {\n    state?.resolve(true);\n    setState(null);\n  }, [state]);\n  \n  return (\n    <ConfirmContext.Provider value={{ requestConfirm }}>\n      {children}\n      {state && (\n        <ConfirmDialog\n          open={true}\n          onClose={handleClose}\n          onConfirm={handleConfirm}\n          title={state.title}\n          message={state.message}\n          status={state.status}\n          confirmLabel={state.confirmLabel}\n          cancelLabel={state.cancelLabel}\n          destructive={state.destructive}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n});\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","ConfirmProvider"],"mappings":"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"}
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../src/react/core/feedback/ConfirmDialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Confirmation Dialog\n *\n * Convenience wrapper over Dialog for confirm/cancel actions.\n * Provides both a component API and a `useConfirm()` hook for imperative usage.\n *\n * Astro UX Compliance:\n * - Status-based alert colors\n * - Focus trap, escape to close\n * - Primary button on right (Astro convention)\n *\n * @example\n * ```tsx\n * // Hook API (imperative)\n * const confirm = useConfirm();\n * const ok = await confirm({\n *   title: 'Reset Component',\n *   message: 'This will reboot the spacecraft and suspend commands for 120 seconds.',\n *   status: 'caution',\n *   confirmLabel: 'Reset',\n *   destructive: true,\n * });\n * if (ok) doReset();\n *\n * // Component API (declarative)\n * <ConfirmDialog\n *   open={isOpen}\n *   onClose={() => setOpen(false)}\n *   onConfirm={handleReset}\n *   title=\"Delete All Data?\"\n *   message=\"This cannot be undone.\"\n *   status=\"critical\"\n *   destructive\n * />\n * ```\n */\n\nimport React, {\n  memo,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  createContext,\n  useContext,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useTheme } from \"../../theme\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ConfirmStatus = \"normal\" | \"caution\" | \"serious\" | \"critical\";\n\nexport interface ConfirmOptions {\n  /** Dialog title */\n  title: string;\n  /** Description text (string or React node) */\n  message?: React.ReactNode;\n  /** Status level (determines icon/border color) */\n  status?: ConfirmStatus;\n  /** Confirm button label (default: \"Confirm\") */\n  confirmLabel?: string;\n  /** Cancel button label (default: \"Cancel\") */\n  cancelLabel?: string;\n  /** Destructive action styling (red confirm button) */\n  destructive?: boolean;\n}\n\nexport interface ConfirmDialogProps extends ConfirmOptions {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Confirm handler */\n  onConfirm: () => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const ConfirmDialog = memo(function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  status,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  destructive = false,\n}: ConfirmDialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const messageId = useId();\n  const CONFIRM_DIALOG_Z_INDEX = 2147483200;\n\n  useEffect(() => {\n    if (!open) return;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = \"hidden\";\n\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n\n      if (e.key !== \"Tab\") return;\n      const root = dialogRef.current;\n      if (!root) return;\n\n      const focusableElements = root.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      const focusable = Array.from(focusableElements).filter(\n        (el) => !el.hasAttribute(\"disabled\"),\n      );\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const focusTimer = window.setTimeout(() => {\n      confirmRef.current?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(focusTimer);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = \"\";\n      previousActiveElement.current?.focus();\n    };\n  }, [open, onClose]);\n\n  if (!open) return null;\n  if (typeof document === \"undefined\") return null;\n\n  const statusColors: Record<string, string> = {\n    normal: tokens.colors.status.normal,\n    caution: tokens.colors.status.caution,\n    serious: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n  };\n\n  const accentColor = status\n    ? statusColors[status]\n    : tokens.colors.accent.primary;\n  const confirmBg = destructive\n    ? tokens.colors.status.critical\n    : tokens.colors.accent.primary;\n\n  // Status icon shapes (Astro UX dual-coded)\n  const statusIcon =\n    status &&\n    (() => {\n      const s = 32;\n      const innerIcon = (\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke={accentColor}\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        >\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        </svg>\n      );\n      const baseStyle: React.CSSProperties = {\n        width: s,\n        height: s,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        flexShrink: 0,\n      };\n      switch (status) {\n        case \"critical\":\n          // Triangle (using clip-path)\n          return (\n            <div\n              style={{\n                ...baseStyle,\n                backgroundColor: `${accentColor}20`,\n                border: `2px solid ${accentColor}`,\n                clipPath: \"polygon(50% 0%, 0% 100%, 100% 100%)\",\n                paddingTop: 8,\n              }}\n            >\n              {innerIcon}\n            </div>\n          );\n        case \"serious\":\n          // Diamond (rotated square)\n          return (\n            <div\n              style={{\n                ...baseStyle,\n                backgroundColor: `${accentColor}20`,\n                border: `2px solid ${accentColor}`,\n                transform: \"rotate(45deg)\",\n              }}\n            >\n              <div style={{ transform: \"rotate(-45deg)\" }}>{innerIcon}</div>\n            </div>\n          );\n        case \"caution\":\n          // Square (rounded)\n          return (\n            <div\n              style={{\n                ...baseStyle,\n                backgroundColor: `${accentColor}20`,\n                border: `2px solid ${accentColor}`,\n                borderRadius: \"4px\",\n              }}\n            >\n              {innerIcon}\n            </div>\n          );\n        default:\n          // Circle (normal, standby, off)\n          return (\n            <div\n              style={{\n                ...baseStyle,\n                backgroundColor: `${accentColor}20`,\n                border: `2px solid ${accentColor}`,\n                borderRadius: \"50%\",\n              }}\n            >\n              {innerIcon}\n            </div>\n          );\n      }\n    })();\n\n  return createPortal(\n    <>\n      {/* Backdrop */}\n      <div\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: CONFIRM_DIALOG_Z_INDEX,\n          backgroundColor: isTransparentTheme\n            ? `${tokens.colors.background.base}80`\n            : `${tokens.colors.background.base}B3`,\n          backdropFilter: \"blur(6px)\",\n          WebkitBackdropFilter: \"blur(6px)\",\n          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`,\n        }}\n        onClick={onClose}\n      />\n\n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={message ? messageId : undefined}\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          position: \"fixed\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,\n          width: \"100%\",\n          maxWidth: \"min(440px, calc(100vw - 32px))\",\n          backgroundColor: isTransparentTheme\n            ? \"rgba(15, 12, 30, 0.9)\"\n            : tokens.colors.background.surface,\n          border: `1px solid ${tokens.colors.border.default}`,\n          borderRadius: tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          fontFamily: tokens.typography.fontFamily.primary,\n          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,\n          overflow: \"hidden\",\n          ...(isTransparentTheme\n            ? {\n                backdropFilter: \"blur(20px)\",\n                WebkitBackdropFilter: \"blur(20px)\",\n              }\n            : {}),\n        }}\n      >\n        {/* Status accent bar */}\n        {status && (\n          <div\n            style={{\n              height: 3,\n              backgroundColor: accentColor,\n              width: \"100%\",\n            }}\n          />\n        )}\n\n        {/* Content */}\n        <div\n          style={{\n            padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}`,\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              gap: tokens.spacing.md,\n              alignItems: \"flex-start\",\n            }}\n          >\n            {statusIcon}\n            <div style={{ flex: 1 }}>\n              <div\n                id={titleId}\n                style={{\n                  fontSize: tokens.typography.fontSize.md,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                  lineHeight: tokens.typography.lineHeight.tight,\n                }}\n              >\n                {title}\n              </div>\n              {message && (\n                <div\n                  id={messageId}\n                  style={{\n                    fontSize: tokens.typography.fontSize.sm,\n                    color: tokens.colors.text.secondary,\n                    marginTop: tokens.spacing.sm,\n                    lineHeight: tokens.typography.lineHeight.normal,\n                  }}\n                >\n                  {message}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Actions — Astro UX: primary on right */}\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"flex-end\",\n            gap: tokens.spacing.sm,\n            padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,\n            borderTop: tokens.borders.divider,\n          }}\n        >\n          <button\n            onClick={onClose}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.medium,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.primary,\n              backgroundColor: tokens.colors.background.base,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              cursor: \"pointer\",\n              transition: tokens.animation.fast,\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmRef}\n            onClick={() => {\n              onConfirm();\n              onClose();\n            }}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.inverse || \"#fff\",\n              backgroundColor: confirmBg,\n              border: \"none\",\n              borderRadius: tokens.borderRadius.md,\n              cursor: \"pointer\",\n              transition: tokens.animation.fast,\n              boxShadow: `0 2px 8px ${confirmBg}40`,\n            }}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n\n      <style>{`\n        @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }\n        @keyframes zendir-confirm-enter {\n          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }\n          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n        }\n      `}</style>\n    </>,\n    document.body,\n  );\n});\n\n// ─── useConfirm Hook ─────────────────────────────────────────────────────────\n\ninterface ConfirmState extends ConfirmOptions {\n  resolve: (value: boolean) => void;\n}\n\nconst ConfirmContext = createContext<{\n  requestConfirm: (options: ConfirmOptions) => Promise<boolean>;\n} | null>(null);\n\n/**\n * Imperative confirmation hook.\n * Must be used within `<ConfirmProvider>`.\n *\n * @example\n * ```tsx\n * const confirm = useConfirm();\n * const ok = await confirm({ title: 'Delete?', status: 'critical', destructive: true });\n * ```\n */\nexport function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {\n  const ctx = useContext(ConfirmContext);\n  if (!ctx) throw new Error(\"useConfirm must be used within <ConfirmProvider>\");\n  return ctx.requestConfirm;\n}\n\n/**\n * Provider for the useConfirm() hook.\n * Renders the confirmation dialog as needed.\n */\nexport const ConfirmProvider = memo(function ConfirmProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const [state, setState] = useState<ConfirmState | null>(null);\n\n  const requestConfirm = useCallback(\n    (options: ConfirmOptions): Promise<boolean> => {\n      return new Promise<boolean>((resolve) => {\n        setState({ ...options, resolve });\n      });\n    },\n    [],\n  );\n\n  const handleClose = useCallback(() => {\n    state?.resolve(false);\n    setState(null);\n  }, [state]);\n\n  const handleConfirm = useCallback(() => {\n    state?.resolve(true);\n    setState(null);\n  }, [state]);\n\n  return (\n    <ConfirmContext.Provider value={{ requestConfirm }}>\n      {children}\n      {state && (\n        <ConfirmDialog\n          open={true}\n          onClose={handleClose}\n          onConfirm={handleConfirm}\n          title={state.title}\n          message={state.message}\n          status={state.status}\n          confirmLabel={state.confirmLabel}\n          cancelLabel={state.cancelLabel}\n          destructive={state.destructive}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n});\n\nexport default ConfirmDialog;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,IAAa,gBAAgB,KAAK,SAAS,cAAc,EACvD,MACA,SACA,WACA,OACA,SACA,QACA,eAAe,WACf,cAAc,UACd,cAAc,SACkC;CAChD,MAAM,EAAE,QAAQ,UAAU,SAAS;CACnC,MAAM,qBACJ,UAAU,iBACV,UAAU,sBACV,UAAU;CACZ,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,wBAAwB,OAA2B,IAAI;CAC7D,MAAM,UAAU,MAAM;CACtB,MAAM,YAAY,MAAM;CACxB,MAAM,yBAAyB;CAE/B,gBAAgB;EACd,IAAI,CAAC,MAAM;EAEX,sBAAsB,UAAU,SAAS;EACzC,SAAS,KAAK,MAAM,WAAW;EAE/B,MAAM,iBAAiB,MAA2B;GAChD,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,eAAe;IACjB,QAAQ;IACR;GACF;GAEA,IAAI,EAAE,QAAQ,OAAO;GACrB,MAAM,OAAO,UAAU;GACvB,IAAI,CAAC,MAAM;GAEX,MAAM,oBAAoB,KAAK,iBAC7B,4EACF;GACA,MAAM,YAAY,MAAM,KAAK,iBAAiB,CAAC,CAAC,QAC7C,OAAO,CAAC,GAAG,aAAa,UAAU,CACrC;GACA,IAAI,UAAU,WAAW,GAAG;GAE5B,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;GAC1C,MAAM,SAAS,SAAS;GAExB,IAAI,EAAE,YAAY,WAAW,OAAO;IAClC,EAAE,eAAe;IACjB,KAAK,MAAM;GACb,OAAO,IAAI,CAAC,EAAE,YAAY,WAAW,MAAM;IACzC,EAAE,eAAe;IACjB,MAAM,MAAM;GACd;EACF;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,MAAM,aAAa,OAAO,iBAAiB;GACzC,WAAW,SAAS,MAAM;EAC5B,GAAG,CAAC;EAEJ,aAAa;GACX,OAAO,aAAa,UAAU;GAC9B,SAAS,oBAAoB,WAAW,aAAa;GACrD,SAAS,KAAK,MAAM,WAAW;GAC/B,sBAAsB,SAAS,MAAM;EACvC;CACF,GAAG,CAAC,MAAM,OAAO,CAAC;CAElB,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,eAAuC;EAC3C,QAAQ,OAAO,OAAO,OAAO;EAC7B,SAAS,OAAO,OAAO,OAAO;EAC9B,SAAS,OAAO,OAAO,OAAO;EAC9B,UAAU,OAAO,OAAO,OAAO;CACjC;CAEA,MAAM,cAAc,SAChB,aAAa,UACb,OAAO,OAAO,OAAO;CACzB,MAAM,YAAY,cACd,OAAO,OAAO,OAAO,WACrB,OAAO,OAAO,OAAO;CAGzB,MAAM,aACJ,iBACO;EACL,MAAM,IAAI;EACV,MAAM,YACJ,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAQ;GACR,aAAY;GACZ,eAAc;aAPhB,CASE,oBAAC,QAAD,EAAM,GAAE,UAAW,CAAA,GACnB,oBAAC,QAAD,EAAM,GAAE,aAAc,CAAA,CACnB;;EAEP,MAAM,YAAiC;GACrC,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;EACd;EACA,QAAQ,QAAR;GACE,KAAK,YAEH,OACE,oBAAC,OAAD;IACE,OAAO;KACL,GAAG;KACH,iBAAiB,GAAG,YAAY;KAChC,QAAQ,aAAa;KACrB,UAAU;KACV,YAAY;IACd;cAEC;GACE,CAAA;GAET,KAAK,WAEH,OACE,oBAAC,OAAD;IACE,OAAO;KACL,GAAG;KACH,iBAAiB,GAAG,YAAY;KAChC,QAAQ,aAAa;KACrB,WAAW;IACb;cAEA,oBAAC,OAAD;KAAK,OAAO,EAAE,WAAW,iBAAiB;eAAI;IAAe,CAAA;GAC1D,CAAA;GAET,KAAK,WAEH,OACE,oBAAC,OAAD;IACE,OAAO;KACL,GAAG;KACH,iBAAiB,GAAG,YAAY;KAChC,QAAQ,aAAa;KACrB,cAAc;IAChB;cAEC;GACE,CAAA;GAET,SAEE,OACE,oBAAC,OAAD;IACE,OAAO;KACL,GAAG;KACH,iBAAiB,GAAG,YAAY;KAChC,QAAQ,aAAa;KACrB,cAAc;IAChB;cAEC;GACE,CAAA;EAEX;CACF,EAAA,CAAG;CAEL,OAAO,aACL,qBAAA,UAAA,EAAA,UAAA;EAEE,oBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,OAAO;IACP,QAAQ;IACR,iBAAiB,qBACb,GAAG,OAAO,OAAO,WAAW,KAAK,MACjC,GAAG,OAAO,OAAO,WAAW,KAAK;IACrC,gBAAgB;IAChB,sBAAsB;IACtB,WAAW,iCAAiC,OAAO,UAAU,OAAO;GACtE;GACA,SAAS;EACV,CAAA;EAGD,qBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,oBAAkB,UAAU,YAAY,KAAA;GACxC,UAAU,MAAM,EAAE,gBAAgB;GAClC,OAAO;IACL,UAAU;IACV,KAAK;IACL,MAAM;IACN,WAAW;IACX,QAAQ;IACR,OAAO;IACP,UAAU;IACV,iBAAiB,qBACb,0BACA,OAAO,OAAO,WAAW;IAC7B,QAAQ,aAAa,OAAO,OAAO,OAAO;IAC1C,cAAc,OAAO,aAAa;IAClC,WAAW,OAAO,QAAQ;IAC1B,YAAY,OAAO,WAAW,WAAW;IACzC,WAAW,8BAA8B,OAAO,UAAU,OAAO;IACjE,UAAU;IACV,GAAI,qBACA;KACE,gBAAgB;KAChB,sBAAsB;IACxB,IACA,CAAC;GACP;aA9BF;IAiCG,UACC,oBAAC,OAAD,EACE,OAAO;KACL,QAAQ;KACR,iBAAiB;KACjB,OAAO;IACT,EACD,CAAA;IAIH,oBAAC,OAAD;KACE,OAAO,EACL,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ,KACvE;eAEA,qBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,KAAK,OAAO,QAAQ;OACpB,YAAY;MACd;gBALF,CAOG,YACD,qBAAC,OAAD;OAAK,OAAO,EAAE,MAAM,EAAE;iBAAtB,CACE,oBAAC,OAAD;QACE,IAAI;QACJ,OAAO;SACL,UAAU,OAAO,WAAW,SAAS;SACrC,YAAY,OAAO,WAAW,WAAW;SACzC,OAAO,OAAO,OAAO,KAAK;SAC1B,YAAY,OAAO,WAAW,WAAW;QAC3C;kBAEC;OACE,CAAA,GACJ,WACC,oBAAC,OAAD;QACE,IAAI;QACJ,OAAO;SACL,UAAU,OAAO,WAAW,SAAS;SACrC,OAAO,OAAO,OAAO,KAAK;SAC1B,WAAW,OAAO,QAAQ;SAC1B,YAAY,OAAO,WAAW,WAAW;QAC3C;kBAEC;OACE,CAAA,CAEJ;QACF;;IACF,CAAA;IAGL,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,gBAAgB;MAChB,KAAK,OAAO,QAAQ;MACpB,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;MACrE,WAAW,OAAO,QAAQ;KAC5B;eAPF,CASE,oBAAC,UAAD;MACE,SAAS;MACT,OAAO;OACL,SAAS,KAAK,OAAO,QAAQ;OAC7B,WAAW,OAAO,YAAY;OAC9B,UAAU,OAAO,WAAW,SAAS;OACrC,YAAY,OAAO,WAAW,WAAW;OACzC,YAAY,OAAO,WAAW,WAAW;OACzC,OAAO,OAAO,OAAO,KAAK;OAC1B,iBAAiB,OAAO,OAAO,WAAW;OAC1C,QAAQ,aAAa,OAAO,OAAO,OAAO;OAC1C,cAAc,OAAO,aAAa;OAClC,QAAQ;OACR,YAAY,OAAO,UAAU;MAC/B;gBAEC;KACK,CAAA,GACR,oBAAC,UAAD;MACE,KAAK;MACL,eAAe;OACb,UAAU;OACV,QAAQ;MACV;MACA,OAAO;OACL,SAAS,KAAK,OAAO,QAAQ;OAC7B,WAAW,OAAO,YAAY;OAC9B,UAAU,OAAO,WAAW,SAAS;OACrC,YAAY,OAAO,WAAW,WAAW;OACzC,YAAY,OAAO,WAAW,WAAW;OACzC,OAAO,OAAO,OAAO,KAAK,WAAW;OACrC,iBAAiB;OACjB,QAAQ;OACR,cAAc,OAAO,aAAa;OAClC,QAAQ;OACR,YAAY,OAAO,UAAU;OAC7B,WAAW,aAAa,UAAU;MACpC;gBAEC;KACK,CAAA,CACL;;GACF;;EAEL,oBAAC,SAAD,EAAA,UAAQ;;;;;;QAMC,CAAA;CACT,EAAA,CAAA,GACF,SAAS,IACX;AACF,CAAC;AAQD,IAAM,iBAAiB,cAEb,IAAI;;;;;;;;;;;AAYd,SAAgB,aAA4D;CAC1E,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kDAAkD;CAC5E,OAAO,IAAI;AACb;;;;;AAMA,IAAa,kBAAkB,KAAK,SAAS,gBAAgB,EAC3D,YAGqB;CACrB,MAAM,CAAC,OAAO,YAAY,SAA8B,IAAI;CAE5D,MAAM,iBAAiB,aACpB,YAA8C;EAC7C,OAAO,IAAI,SAAkB,YAAY;GACvC,SAAS;IAAE,GAAG;IAAS;GAAQ,CAAC;EAClC,CAAC;CACH,GACA,CAAC,CACH;CAEA,MAAM,cAAc,kBAAkB;EACpC,OAAO,QAAQ,KAAK;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,gBAAgB,kBAAkB;EACtC,OAAO,QAAQ,IAAI;EACnB,SAAS,IAAI;CACf,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,eAAe,UAAhB;EAAyB,OAAO,EAAE,eAAe;YAAjD,CACG,UACA,SACC,oBAAC,eAAD;GACE,MAAM;GACN,SAAS;GACT,WAAW;GACX,OAAO,MAAM;GACb,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,cAAc,MAAM;GACpB,aAAa,MAAM;GACnB,aAAa,MAAM;EACpB,CAAA,CAEoB;;AAE7B,CAAC"}

package/dist/react/core/feedback/Dialog.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
 export interface DialogProps {
     /** Open state */
     open: boolean;
@@ -23,7 +22,7 @@ export interface DialogProps {
 }
 export interface DialogActionsProps {
     children: React.ReactNode;
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
 }
 declare const DialogActions: React.NamedExoticComponent<DialogActionsProps>;
 export declare const Dialog: React.NamedExoticComponent<DialogProps> & {

package/dist/react/core/feedback/Dialog.js

@@ -1,204 +1,196 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useRef, useId, useCallback, useEffect } from "react";
-import { createPortal } from "react-dom";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
-const DialogActions = memo(function DialogActions2({
-  children,
-  align = "right"
-}) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
-        gap: tokens.spacing.sm,
-        marginTop: tokens.spacing.lg,
-        paddingTop: tokens.spacing.md,
-        borderTop: tokens.borders.divider
-      },
-      children
-    }
-  );
+import { memo, useCallback, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/react/core/feedback/Dialog.tsx
+/**
+* @zendir/ui - Dialog/Modal Component
+*
+* Modal dialog following Astro UX Design System.
+*
+* @example
+* ```tsx
+* <Dialog
+*   open={isOpen}
+*   onClose={() => setIsOpen(false)}
+*   title="Confirm Action"
+* >
+*   <p>Are you sure you want to proceed?</p>
+*   <Dialog.Actions>
+*     <Button variant="secondary" onClick={() => setIsOpen(false)}>Cancel</Button>
+*     <Button onClick={handleConfirm}>Confirm</Button>
+*   </Dialog.Actions>
+* </Dialog>
+* ```
+*/
+var DialogActions = memo(function DialogActions({ children, align = "right" }) {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+			gap: tokens.spacing.sm,
+			marginTop: tokens.spacing.lg,
+			paddingTop: tokens.spacing.md,
+			borderTop: tokens.borders.divider
+		},
+		children
+	});
 });
-const Dialog = memo(function Dialog2({
-  open,
-  onClose,
-  title,
-  size = "medium",
-  showCloseButton = true,
-  closeOnBackdropClick = true,
-  closeOnEscape = true,
-  children,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const dialogRef = useRef(null);
-  const previousActiveElement = useRef(null);
-  const titleId = useId();
-  const DIALOG_Z_INDEX = 2147483e3;
-  const sizeConfig = {
-    small: { width: "min(360px, calc(100vw - 32px))", maxHeight: "80vh" },
-    medium: { width: "min(540px, calc(100vw - 32px))", maxHeight: "80vh" },
-    large: { width: "min(800px, calc(100vw - 32px))", maxHeight: "90vh" },
-    fullscreen: { width: "100vw", maxHeight: "100vh" }
-  };
-  const config = sizeConfig[size];
-  const handleKeyDown = useCallback((e) => {
-    if (closeOnEscape && e.key === "Escape") {
-      onClose();
-    }
-  }, [closeOnEscape, onClose]);
-  const handleKeyDownRef = useRef(handleKeyDown);
-  handleKeyDownRef.current = handleKeyDown;
-  useEffect(() => {
-    if (!open) return void 0;
-    previousActiveElement.current = document.activeElement;
-    document.body.style.overflow = "hidden";
-    const onKeyDown = (e) => handleKeyDownRef.current(e);
-    document.addEventListener("keydown", onKeyDown);
-    const focusTimer = setTimeout(() => {
-      var _a, _b;
-      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(document.activeElement)) return;
-      const focusable = (_b = dialogRef.current) == null ? void 0 : _b.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      focusable == null ? void 0 : focusable.focus();
-    }, 0);
-    return () => {
-      var _a;
-      clearTimeout(focusTimer);
-      document.body.style.overflow = "";
-      document.removeEventListener("keydown", onKeyDown);
-      (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
-    };
-  }, [open]);
-  if (!open) return null;
-  if (typeof document === "undefined") return null;
-  return createPortal(/* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-dialog-backdrop", className),
-      onClick: closeOnBackdropClick ? onClose : void 0,
-      style: {
-        position: "fixed",
-        inset: 0,
-        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,
-        backdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
-        display: "flex",
-        alignItems: size === "fullscreen" ? "stretch" : "center",
-        justifyContent: "center",
-        zIndex: DIALOG_Z_INDEX,
-        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: dialogRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": title ? titleId : void 0,
-            className: "zendir-dialog",
-            onClick: (e) => e.stopPropagation(),
-            style: {
-              width: config.width,
-              maxWidth: size === "fullscreen" ? "100vw" : "calc(100vw - 32px)",
-              maxHeight: config.maxHeight,
-              backgroundColor: isTransparentTheme ? "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface,
-              ...isTransparentTheme && { backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(139, 92, 246, 0.2)" },
-              borderRadius: size === "fullscreen" ? 0 : tokens.borderRadius.lg,
-              boxShadow: tokens.shadows.xl,
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-              animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
-            },
-            children: [
-              (title || showCloseButton) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
-                    borderBottom: tokens.borders.divider
-                  },
-                  children: [
-                    title && /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        id: titleId,
-                        style: {
-                          margin: 0,
-                          fontSize: tokens.typography.fontSize.lg,
-                          fontWeight: tokens.typography.fontWeight.semibold,
-                          color: tokens.colors.text.primary
-                        },
-                        children: title
-                      }
-                    ),
-                    showCloseButton && /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: onClose,
-                        "aria-label": "Close dialog",
-                        style: {
-                          padding: tokens.spacing.sm,
-                          minWidth: 44,
-                          minHeight: 44,
-                          backgroundColor: "transparent",
-                          border: "none",
-                          borderRadius: tokens.borderRadius.sm,
-                          cursor: "pointer",
-                          color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          transition: `color ${tokens.animation.fast}`
-                        },
-                        onMouseEnter: (e) => {
-                          e.currentTarget.style.color = tokens.colors.text.primary;
-                        },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;
-                        },
-                        children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    flex: 1,
-                    padding: tokens.spacing.lg,
-                    overflow: "auto"
-                  },
-                  children
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
+var Dialog = memo(function Dialog({ open, onClose, title, size = "medium", showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, children, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const dialogRef = useRef(null);
+	const previousActiveElement = useRef(null);
+	const titleId = useId();
+	const DIALOG_Z_INDEX = 2147483e3;
+	const config = {
+		small: {
+			width: "min(360px, calc(100vw - 32px))",
+			maxHeight: "80vh"
+		},
+		medium: {
+			width: "min(540px, calc(100vw - 32px))",
+			maxHeight: "80vh"
+		},
+		large: {
+			width: "min(800px, calc(100vw - 32px))",
+			maxHeight: "90vh"
+		},
+		fullscreen: {
+			width: "100vw",
+			maxHeight: "100vh"
+		}
+	}[size];
+	const handleKeyDown = useCallback((e) => {
+		if (closeOnEscape && e.key === "Escape") onClose();
+	}, [closeOnEscape, onClose]);
+	const handleKeyDownRef = useRef(handleKeyDown);
+	handleKeyDownRef.current = handleKeyDown;
+	useEffect(() => {
+		if (!open) return void 0;
+		previousActiveElement.current = document.activeElement;
+		document.body.style.overflow = "hidden";
+		const onKeyDown = (e) => handleKeyDownRef.current(e);
+		document.addEventListener("keydown", onKeyDown);
+		const focusTimer = setTimeout(() => {
+			if (dialogRef.current?.contains(document.activeElement)) return;
+			(dialogRef.current?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+		}, 0);
+		return () => {
+			clearTimeout(focusTimer);
+			document.body.style.overflow = "";
+			document.removeEventListener("keydown", onKeyDown);
+			previousActiveElement.current?.focus();
+		};
+	}, [open]);
+	if (!open) return null;
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-dialog-backdrop", className),
+		onClick: closeOnBackdropClick ? onClose : void 0,
+		style: {
+			position: "fixed",
+			inset: 0,
+			backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,
+			backdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
+			display: "flex",
+			alignItems: size === "fullscreen" ? "stretch" : "center",
+			justifyContent: "center",
+			zIndex: DIALOG_Z_INDEX,
+			animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": title ? titleId : void 0,
+			className: "zendir-dialog",
+			onClick: (e) => e.stopPropagation(),
+			style: {
+				width: config.width,
+				maxWidth: size === "fullscreen" ? "100vw" : "calc(100vw - 32px)",
+				maxHeight: config.maxHeight,
+				backgroundColor: isTransparentTheme ? `${tokens.colors.accent.primary}14` : tokens.colors.background.surface,
+				...isTransparentTheme && {
+					backdropFilter: "blur(16px)",
+					WebkitBackdropFilter: "blur(16px)",
+					border: `1px solid ${tokens.colors.accent.primary}33`
+				},
+				borderRadius: size === "fullscreen" ? 0 : tokens.borderRadius.lg,
+				boxShadow: tokens.shadows.xl,
+				display: "flex",
+				flexDirection: "column",
+				overflow: "hidden",
+				animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
+			},
+			children: [(title || showCloseButton) && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
+					borderBottom: tokens.borders.divider
+				},
+				children: [title && /* @__PURE__ */ jsx("h2", {
+					id: titleId,
+					style: {
+						margin: 0,
+						fontSize: tokens.typography.fontSize.lg,
+						fontWeight: tokens.typography.fontWeight.semibold,
+						color: tokens.colors.text.primary
+					},
+					children: title
+				}), showCloseButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": "Close dialog",
+					style: {
+						padding: tokens.spacing.sm,
+						minWidth: 44,
+						minHeight: 44,
+						backgroundColor: "transparent",
+						border: "none",
+						borderRadius: tokens.borderRadius.sm,
+						cursor: "pointer",
+						color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						transition: `color ${tokens.animation.fast}`
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.color = tokens.colors.text.primary;
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						width: "24",
+						height: "24",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					padding: tokens.spacing.lg,
+					overflow: "auto"
+				},
+				children
+			})]
+		}), /* @__PURE__ */ jsx("style", { children: `
           @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }
           @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-        ` })
-      ]
-    }
-  ), document.body);
+        ` })]
+	}), document.body);
 });
 Dialog.Actions = DialogActions;
-export {
-  Dialog
-};
-//# sourceMappingURL=Dialog.js.map
+//#endregion
+export { Dialog, Dialog as default };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/react/core/feedback/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/react/core/feedback/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n * \n * Modal dialog following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = 'right',\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = 'medium',\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = '',\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n  \n  const sizeConfig = {\n    small: { width: 'min(360px, calc(100vw - 32px))', maxHeight: '80vh' },\n    medium: { width: 'min(540px, calc(100vw - 32px))', maxHeight: '80vh' },\n    large: { width: 'min(800px, calc(100vw - 32px))', maxHeight: '90vh' },\n    fullscreen: { width: '100vw', maxHeight: '100vh' },\n  };\n  const config = sizeConfig[size];\n  \n  // Handle escape key. Kept in a ref so the focus-trap effect below can\n  // depend on `open` ALONE: if the effect re-ran whenever `onClose` changed\n  // identity (e.g. a parent passing an inline arrow that re-renders on a\n  // status poll), it would re-fire the focus() call on every render and pull\n  // focus out of whatever the user was typing — making inputs untypable.\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  const handleKeyDownRef = useRef(handleKeyDown);\n  handleKeyDownRef.current = handleKeyDown;\n\n  // Focus trap and escape key — runs only on open/close transitions.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n    const onKeyDown = (e: KeyboardEvent) => handleKeyDownRef.current(e);\n    document.addEventListener('keydown', onKeyDown);\n\n    // Move focus into the dialog once — but honour a child that already\n    // grabbed it (e.g. an Input with autoFocus). Without this guard we'd\n    // override the intended initial focus and land on the first focusable,\n    // which is usually the close button.\n    const focusTimer = setTimeout(() => {\n      if (dialogRef.current?.contains(document.activeElement)) return;\n      const focusable = dialogRef.current?.querySelector<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      focusable?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(focusTimer);\n      document.body.style.overflow = '';\n      document.removeEventListener('keydown', onKeyDown);\n      previousActiveElement.current?.focus();\n    };\n  }, [open]);\n  \n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n\n  return createPortal((\n    <div\n      className={classNames('zendir-dialog-backdrop', className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        display: 'flex',\n        alignItems: size === 'fullscreen' ? 'stretch' : 'center',\n        justifyContent: 'center',\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.08)' : tokens.colors.background.surface,\n          ...(isTransparentTheme && { backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', border: '1px solid rgba(139, 92, 246, 0.2)' }),\n          borderRadius: size === 'fullscreen' ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: 'pointer',\n                  color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        \n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: 'auto',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n      \n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>\n  ), document.body);\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"names":["DialogActions","Dialog"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../../src/react/core/feedback/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n *\n * Modal dialog following Astro UX Design System.\n *\n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\n\nexport type DialogSize = \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = \"right\",\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent:\n          align === \"left\"\n            ? \"flex-start\"\n            : align === \"right\"\n              ? \"flex-end\"\n              : \"center\",\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = \"medium\",\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = \"\",\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n\n  const sizeConfig = {\n    small: { width: \"min(360px, calc(100vw - 32px))\", maxHeight: \"80vh\" },\n    medium: { width: \"min(540px, calc(100vw - 32px))\", maxHeight: \"80vh\" },\n    large: { width: \"min(800px, calc(100vw - 32px))\", maxHeight: \"90vh\" },\n    fullscreen: { width: \"100vw\", maxHeight: \"100vh\" },\n  };\n  const config = sizeConfig[size];\n\n  // Handle escape key. Kept in a ref so the focus-trap effect below can\n  // depend on `open` ALONE: if the effect re-ran whenever `onClose` changed\n  // identity (e.g. a parent passing an inline arrow that re-renders on a\n  // status poll), it would re-fire the focus() call on every render and pull\n  // focus out of whatever the user was typing — making inputs untypable.\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (closeOnEscape && e.key === \"Escape\") {\n        onClose();\n      }\n    },\n    [closeOnEscape, onClose],\n  );\n  const handleKeyDownRef = useRef(handleKeyDown);\n  handleKeyDownRef.current = handleKeyDown;\n\n  // Focus trap and escape key — runs only on open/close transitions.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = \"hidden\";\n    const onKeyDown = (e: KeyboardEvent) => handleKeyDownRef.current(e);\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    // Move focus into the dialog once — but honour a child that already\n    // grabbed it (e.g. an Input with autoFocus). Without this guard we'd\n    // override the intended initial focus and land on the first focusable,\n    // which is usually the close button.\n    const focusTimer = setTimeout(() => {\n      if (dialogRef.current?.contains(document.activeElement)) return;\n      const focusable = dialogRef.current?.querySelector<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      focusable?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(focusTimer);\n      document.body.style.overflow = \"\";\n      document.removeEventListener(\"keydown\", onKeyDown);\n      previousActiveElement.current?.focus();\n    };\n  }, [open]);\n\n  if (!open) return null;\n  if (typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      className={classNames(\"zendir-dialog-backdrop\", className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        backgroundColor: isTransparentTheme\n          ? `${tokens.colors.background.base}66`\n          : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? \"blur(4px)\" : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? \"blur(4px)\" : undefined,\n        display: \"flex\",\n        alignItems: size === \"fullscreen\" ? \"stretch\" : \"center\",\n        justifyContent: \"center\",\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === \"fullscreen\" ? \"100vw\" : \"calc(100vw - 32px)\",\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme\n            ? `${tokens.colors.accent.primary}14`\n            : tokens.colors.background.surface,\n          ...(isTransparentTheme && {\n            backdropFilter: \"blur(16px)\",\n            WebkitBackdropFilter: \"blur(16px)\",\n            border: `1px solid ${tokens.colors.accent.primary}33`,\n          }),\n          borderRadius: size === \"fullscreen\" ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: \"flex\",\n          flexDirection: \"column\",\n          overflow: \"hidden\",\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: \"transparent\",\n                  border: \"none\",\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: \"pointer\",\n                  color:\n                    tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color =\n                    tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                >\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n\n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: \"auto\",\n          }}\n        >\n          {children}\n        </div>\n      </div>\n\n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>,\n    document.body,\n  );\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"mappings":"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"}

package/dist/react/core/feedback/Toast.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-
-export type ToastStatus = 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';
-export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+export type ToastStatus = "normal" | "standby" | "caution" | "serious" | "critical" | "off";
+export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
 export interface ToastOptions {
     /** Status level (determines color) */
     status?: ToastStatus;