{"version":3,"sources":["../src/Toast/Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { Info, AlertCircle, AlertTriangle, CheckCircle, AlertOctagon } from 'lucide-react';\n\nexport interface ToastProps {\n  /**\n   * The variant of the toast\n   */\n  variant: 'information' | 'danger' | 'warning' | 'success' | 'caution';\n  /**\n   * The message to display\n   */\n  message: string;\n  /**\n   * Callback when close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n}\n\nconst baseToastStyles: React.CSSProperties = {\n  width: '360px',\n  padding: '16px',\n  borderRadius: '8px',\n  border: '1px solid',\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  boxShadow: '0px 4px 12px 0px rgba(32, 32, 32, 0.08)',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst messageStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 600,\n  flex: 1,\n};\n\nconst closeButtonStyles: React.CSSProperties = {\n  width: '24px',\n  height: '24px',\n  borderRadius: '50%',\n  border: 'none',\n  background: 'transparent',\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  transition: 'background-color 0.2s ease-in-out',\n};\n\nconst variantConfig = {\n  information: {\n    backgroundColor: '#f5fbff',\n    borderColor: '#2c8bca',\n    textColor: '#053a61',\n    icon: Info,\n    iconColor: '#2c8bca',\n    closeHoverBg: '#e0f3ff',\n  },\n  danger: {\n    backgroundColor: '#fff5f5',\n    borderColor: '#c93232',\n    textColor: '#610202',\n    icon: AlertCircle,\n    iconColor: '#c93232',\n    closeHoverBg: '#ffe0e0',\n  },\n  warning: {\n    backgroundColor: '#fffaf5',\n    borderColor: '#e4720d',\n    textColor: '#611f00',\n    icon: AlertTriangle,\n    iconColor: '#e4720d',\n    closeHoverBg: '#ffedd5',\n  },\n  success: {\n    backgroundColor: '#f0faf3',\n    borderColor: '#5ec171',\n    textColor: '#024002',\n    icon: CheckCircle,\n    iconColor: '#5ec171',\n    closeHoverBg: '#d9f2df',\n  },\n  caution: {\n    backgroundColor: '#fffdf5',\n    borderColor: '#edae06',\n    textColor: '#613f00',\n    icon: AlertOctagon,\n    iconColor: '#edae06',\n    closeHoverBg: '#fff8d5',\n  },\n};\n\n/**\n * Toast component - Arbor Design System\n *\n * A notification toast with different variants for different message types.\n *\n * IMPORTANT: Toasts are designed to overlay content in the top-right corner.\n * Use absolute/fixed positioning to display them above page content.\n *\n * For inline notifications that flow with page content, use the Banner component instead.\n *\n * Example usage with positioning:\n * ```tsx\n * <div style={{ position: 'fixed', top: '24px', right: '24px', zIndex: 1000 }}>\n *   <Toast variant=\"success\" message=\"Changes saved!\" onClose={() => {}} />\n * </div>\n * ```\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      variant,\n      message,\n      onClose,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [isCloseHovered, setIsCloseHovered] = React.useState(false);\n    const config = variantConfig[variant];\n    const IconComponent = config.icon;\n\n    const toastStyle: React.CSSProperties = {\n      ...baseToastStyles,\n      backgroundColor: config.backgroundColor,\n      borderColor: config.borderColor,\n      ...style,\n    };\n\n    const closeStyle: React.CSSProperties = {\n      ...closeButtonStyles,\n      ...(isCloseHovered && { backgroundColor: config.closeHoverBg }),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-toast', `arbor-toast-${variant}`, className)}\n        style={toastStyle}\n        data-testid={dataTestId}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <IconComponent size={16} color={config.iconColor} style={{ flexShrink: 0 }} />\n        <span style={{ ...messageStyles, color: config.textColor }}>\n          {message}\n        </span>\n        {onClose && (\n          <button\n            onClick={onClose}\n            onMouseEnter={() => setIsCloseHovered(true)}\n            onMouseLeave={() => setIsCloseHovered(false)}\n            style={closeStyle}\n            aria-label=\"Close notification\"\n            type=\"button\"\n          >\n            <span style={{ fontSize: '18px', lineHeight: 1, color: '#595959', fontWeight: 'bold' }}>×</span>\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nToast.displayName = 'Toast';\n"],"mappings":"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","names":[]}