analytica-frontend-lib/dist/Toast/Toaster/index.mjs.map

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts","../../../src/components/Toast/Toast.tsx","../../../src/utils/utils.ts","../../../src/components/Toast/utils/Toaster.tsx"],"sourcesContent":["import { create } from 'zustand';\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n  | 'default';\n\ntype ToastData = {\n  id: string;\n  title: string;\n  description?: string;\n  variant?: 'solid' | 'outlined';\n  action?: 'warning' | 'success' | 'info';\n  position?: ToastPosition;\n};\n\ntype ToastStore = {\n  toasts: ToastData[];\n  addToast: (toast: Omit<ToastData, 'id'>) => void;\n  removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n  toasts: [],\n  addToast: (toast) => {\n    const id = crypto.randomUUID();\n\n    set((state) => ({\n      toasts: [...state.toasts, { id, ...toast }],\n    }));\n  },\n  removeToast: (id) => {\n    set((state) => ({\n      toasts: state.toasts.filter((t) => t.id !== id),\n    }));\n  },\n}));\n\nexport default useToastStore;\n","import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n  solid: {\n    warning:\n      'bg-warning text-warning-600 border-none focus-visible:outline-none',\n    success:\n      'bg-success text-success-800 border-none focus-visible:outline-none',\n    info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n  },\n  outlined: {\n    warning:\n      'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n    success:\n      'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n    info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n  },\n} as const;\n\ntype ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n  | 'default';\n\ntype ToastProps = {\n  title: string;\n  description?: string;\n  onClose: () => void;\n  /** Visual variant of the badge */\n  variant?: 'solid' | 'outlined';\n  /** Action type of the badge  */\n  action?: 'warning' | 'success' | 'info';\n  position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n  success: CheckCircle,\n  info: Info,\n  warning: WarningCircle,\n};\n\nconst Toast = ({\n  variant = 'outlined',\n  action = 'success',\n  className = '',\n  onClose,\n  title,\n  description,\n  position = 'default',\n  ...props\n}: ToastProps) => {\n  // Get classes from lookup tables\n  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n  const positionClasses: Record<ToastPosition, string> = {\n    'top-left': 'fixed top-4 left-4',\n    'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n    'top-right': 'fixed top-4 right-4',\n    'bottom-left': 'fixed bottom-4 left-4',\n    'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n    'bottom-right': 'fixed bottom-4 right-4',\n    default: '',\n  };\n\n  const IconAction = iconMap[action] || iconMap['success'];\n\n  const baseClasses =\n    'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n  return (\n    <div\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      className={cn(\n        baseClasses,\n        positionClasses[position],\n        variantClasses,\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-row items-start gap-3\">\n        <span className=\"mt-1\" data-testid={`toast-icon-${action}`}>\n          <IconAction />\n        </span>\n        <div className=\"flex flex-col items-start justify-start\">\n          <p className=\"font-semibold text-md\">{title}</p>\n          {description && (\n            <p className=\"text-md text-text-900\">{description}</p>\n          )}\n        </div>\n      </div>\n      <button\n        onClick={onClose}\n        aria-label=\"Dismiss notification\"\n        className=\"text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n      >\n        <X />\n      </button>\n    </div>\n  );\n};\n\nexport default Toast;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\nexport {\n  getSelectedIdsFromCategories,\n  toggleArrayItem,\n  toggleSingleValue,\n  areFiltersEqual,\n} from './activityFilters';\nexport {\n  mapQuestionTypeToEnum,\n  mapQuestionTypeToEnumRequired,\n} from './questionTypeUtils';\nexport {\n  getStatusBadgeConfig,\n  formatTimeSpent,\n  formatQuestionNumbers,\n  formatDateToBrazilian,\n} from './activityDetailsUtils';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import useToastStore from './ToastStore';\nimport Toast from '../Toast';\n\nconst Toaster = () => {\n  const toasts = useToastStore((state) => state.toasts);\n  const removeToast = useToastStore((state) => state.removeToast);\n\n  return (\n    <>\n      {toasts.map((toast) => (\n        <Toast\n          key={toast.id}\n          title={toast.title}\n          description={toast.description}\n          variant={toast.variant}\n          action={toast.action}\n          position={toast.position}\n          onClose={() => removeToast(toast.id)}\n        />\n      ))}\n    </>\n  );\n};\n\nexport const useToast = () => {\n  const addToast = useToastStore((state) => state.addToast);\n  const removeToast = useToastStore((state) => state.removeToast);\n\n  return { addToast, removeToast };\n};\n\nexport default Toaster;\n"],"mappings":"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","names":["jsx"]}