analytica-frontend-lib/dist/ActivityPreview/index.mjs.map

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

{"version":3,"sources":["../../src/components/ActivityPreview/ActivityPreview.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Button/Button.tsx","../../src/components/Badge/Badge.tsx","../../src/components/LatexRenderer/LatexRenderer.tsx","../../src/components/IconButton/IconButton.tsx","../../src/components/CheckBox/CheckBox.tsx","../../src/components/CheckBox/CheckboxList.tsx","../../src/components/Radio/Radio.tsx","../../src/components/ProgressBar/ProgressBar.tsx","../../src/components/Alternative/Alternative.tsx","../../src/components/Accordation/Accordation.tsx","../../src/components/Card/Card.tsx","../../src/components/IconRender/IconRender.tsx","../../src/assets/icons/subjects/ChatPT.tsx","../../src/assets/icons/subjects/ChatEN.tsx","../../src/assets/icons/subjects/ChatES.tsx","../../src/types/questionTypes.ts","../../src/components/MultipleChoice/MultipleChoice.tsx","../../src/utils/questionRenderer.ts","../../src/components/ActivityCardQuestionPreview/ActivityCardQuestionPreview.tsx","../../src/components/QuestionsPdfGenerator/QuestionsPdfGenerator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { File, DownloadSimple, Trash } from 'phosphor-react';\nimport { Button, IconButton, Text } from '../../index';\nimport { ActivityCardQuestionPreview } from '../ActivityCardQuestionPreview/ActivityCardQuestionPreview';\nimport { QUESTION_TYPE } from '../Quiz/useQuizStore';\nimport { cn } from '../../utils/utils';\nimport {\n  useQuestionsPdfPrint,\n  QuestionsPdfContent,\n} from '../QuestionsPdfGenerator';\n\ntype PreviewQuestion = {\n  id: string;\n  subjectName?: string;\n  subjectColor?: string;\n  iconName?: string;\n  questionType?: QUESTION_TYPE;\n  questionTypeLabel?: string;\n  enunciado?: string;\n  question?: {\n    options: { id: string; option: string }[];\n    correctOptionIds?: string[];\n  };\n  position?: number;\n};\n\ninterface ActivityPreviewProps {\n  title?: string;\n  questions?: PreviewQuestion[];\n  onDownloadPdf?: () => void;\n  onRemoveAll?: () => void;\n  onRemoveQuestion?: (questionId: string) => void;\n  className?: string;\n  onReorder?: (orderedQuestions: PreviewQuestion[]) => void;\n  /**\n   * Emits the current ordered list (with positions) whenever it changes.\n   */\n  onPositionsChange?: (orderedQuestions: PreviewQuestion[]) => void;\n  isDark?: boolean;\n}\n\nexport const ActivityPreview = ({\n  title = 'Prévia da atividade',\n  questions = [],\n  onDownloadPdf,\n  onRemoveAll,\n  onRemoveQuestion,\n  className,\n  onReorder,\n  onPositionsChange,\n  isDark = false,\n}: ActivityPreviewProps) => {\n  const onPositionsChangeRef = useRef(onPositionsChange);\n  onPositionsChangeRef.current = onPositionsChange;\n\n  const normalizeWithPositions = useMemo(\n    () => (items: PreviewQuestion[]) =>\n      items.map((item, index) => ({\n        ...item,\n        position: index + 1,\n      })),\n    []\n  );\n\n  const [orderedQuestions, setOrderedQuestions] = useState<PreviewQuestion[]>(\n    () => normalizeWithPositions(questions)\n  );\n\n  // Sync when external questions change (e.g., reset from parent)\n  useEffect(() => {\n    const normalized = normalizeWithPositions(questions);\n    setOrderedQuestions(normalized);\n    onPositionsChangeRef.current?.(normalized);\n  }, [questions, normalizeWithPositions]);\n\n  const total = orderedQuestions.length;\n  const totalLabel =\n    total === 1 ? '1 questão adicionada' : `${total} questões adicionadas`;\n\n  const { contentRef, handlePrint } = useQuestionsPdfPrint(\n    orderedQuestions,\n    onDownloadPdf\n  );\n\n  const handleDownloadPdf = () => {\n    // Chama o callback opcional antes de imprimir\n    onDownloadPdf?.();\n\n    // Pequeno delay para garantir que o DOM está atualizado\n    // e que o callback foi executado\n    setTimeout(() => {\n      if (!contentRef.current) {\n        console.error('Elemento de PDF não encontrado no DOM');\n        return;\n      }\n\n      // Verifica se handlePrint é uma função antes de chamar\n      if (typeof handlePrint === 'function') {\n        handlePrint();\n      } else {\n        console.error('handlePrint não é uma função:', handlePrint);\n      }\n    }, 100);\n  };\n\n  const handleReorder = (fromId: string, toId: string) => {\n    if (fromId === toId) return;\n    const current = [...orderedQuestions];\n    const fromIndex = current.findIndex((q) => q.id === fromId);\n    const toIndex = current.findIndex((q) => q.id === toId);\n    if (fromIndex === -1 || toIndex === -1) return;\n\n    const [moved] = current.splice(fromIndex, 1);\n    current.splice(toIndex, 0, moved);\n    const normalized = normalizeWithPositions(current);\n    setOrderedQuestions(normalized);\n    onReorder?.(normalized);\n    onPositionsChange?.(normalized);\n  };\n\n  return (\n    <div\n      className={cn(\n        'w-full flex-shrink-0 p-4 rounded-lg bg-background flex flex-col gap-4',\n        className\n      )}\n    >\n      <section className=\"flex flex-row items-center gap-2 text-text-950\">\n        <File size={24} />\n        <Text size=\"lg\" weight=\"bold\">\n          {title}\n        </Text>\n      </section>\n\n      <section className=\"flex flex-row justify-between items-center\">\n        <Text size=\"sm\" className=\"text-text-800\">\n          {totalLabel}\n        </Text>\n        <Button\n          size=\"small\"\n          variant=\"outline\"\n          iconLeft={<DownloadSimple />}\n          onClick={handleDownloadPdf}\n        >\n          Baixar pdf\n        </Button>\n      </section>\n\n      <section className=\"flex flex-col gap-3\">\n        {orderedQuestions.map(\n          (\n            {\n              id,\n              subjectName = 'Assunto não informado',\n              subjectColor = '#000000',\n              iconName = 'BookOpen',\n              questionType,\n              questionTypeLabel,\n              enunciado,\n              question,\n              position,\n            },\n            index\n          ) => (\n            <div\n              key={id}\n              draggable\n              data-draggable=\"true\"\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Mover questão ${enunciado ?? id}`}\n              onDragStart={(e) => {\n                e.dataTransfer.setData('text/plain', id);\n                if (e.currentTarget instanceof HTMLElement) {\n                  const preview = e.currentTarget.querySelector(\n                    '[data-drag-preview=\"true\"]'\n                  );\n                  if (preview) {\n                    e.dataTransfer.setDragImage(preview, 8, 8);\n                  } else {\n                    e.dataTransfer.setDragImage(e.currentTarget, 8, 8);\n                  }\n                }\n              }}\n              onDragOver={(e) => {\n                e.preventDefault();\n              }}\n              onDrop={(e) => {\n                e.preventDefault();\n                const fromId = e.dataTransfer.getData('text/plain');\n                handleReorder(fromId, id);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'ArrowUp' && index > 0) {\n                  e.preventDefault();\n                  const targetId = orderedQuestions[index - 1].id;\n                  handleReorder(id, targetId);\n                } else if (\n                  e.key === 'ArrowDown' &&\n                  index < orderedQuestions.length - 1\n                ) {\n                  e.preventDefault();\n                  const targetId = orderedQuestions[index + 1].id;\n                  handleReorder(id, targetId);\n                } else if (e.key === 'Enter' || e.key === ' ') {\n                  // Keyboard grab/drop noop; prevent scroll on space\n                  e.preventDefault();\n                }\n              }}\n              className=\"rounded-lg border border-border-200 bg-background relative group\"\n            >\n              {onRemoveQuestion && (\n                <div className=\"absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity\">\n                  <IconButton\n                    size=\"sm\"\n                    icon={<Trash size={16} />}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemoveQuestion(id);\n                    }}\n                    aria-label={`Remover questão ${position ?? index + 1}`}\n                  />\n                </div>\n              )}\n              <ActivityCardQuestionPreview\n                subjectName={subjectName}\n                subjectColor={subjectColor}\n                iconName={iconName}\n                isDark={isDark}\n                questionType={questionType}\n                questionTypeLabel={questionTypeLabel}\n                enunciado={enunciado}\n                defaultExpanded={false}\n                question={question}\n                value={id}\n                position={position}\n              ></ActivityCardQuestionPreview>\n            </div>\n          )\n        )}\n      </section>\n\n      <Button variant=\"outline\" onClick={onRemoveAll}>\n        Remover tudo\n      </Button>\n\n      <QuestionsPdfContent ref={contentRef} questions={orderedQuestions} />\n    </div>\n  );\n};\n\nexport type { ActivityPreviewProps, PreviewQuestion };\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 { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n","import { ButtonHTMLAttributes, ReactNode } from '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    primary:\n      'bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n  outline: {\n    primary:\n      'bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n  link: {\n    primary:\n      'bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  'extra-small': 'text-xs px-3.5 py-2',\n  small: 'text-sm px-4 py-2.5',\n  medium: 'text-md px-5 py-2.5',\n  large: 'text-lg px-6 py-3',\n  'extra-large': 'text-lg px-7 py-3.5',\n} as const;\n\n/**\n * Button component props interface\n */\ntype ButtonProps = {\n  /** Content to be displayed inside the button */\n  children: ReactNode;\n  /** Ícone à esquerda do texto */\n  iconLeft?: ReactNode;\n  /** Ícone à direita do texto */\n  iconRight?: ReactNode;\n  /** Size of the button */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n  /** Visual variant of the button */\n  variant?: 'solid' | 'outline' | 'link';\n  /** Action type of the button */\n  action?: 'primary' | 'positive' | 'negative';\n  /** Additional CSS classes to apply */\n  className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Button component for Analytica Ensino platforms\n *\n * A flexible button component with multiple variants, sizes and actions.\n *\n * @param children - The content to display inside the button\n * @param size - The size variant (extra-small, small, medium, large, extra-large)\n * @param variant - The visual style variant (solid, outline, link)\n * @param action - The action type (primary, positive, negative)\n * @param className - Additional CSS classes\n * @param props - All other standard button HTML attributes\n * @returns A styled button element\n *\n * @example\n * ```tsx\n * <Button variant=\"solid\" action=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n *   Click me\n * </Button>\n * ```\n */\nconst Button = ({\n  children,\n  iconLeft,\n  iconRight,\n  size = 'medium',\n  variant = 'solid',\n  action = 'primary',\n  className = '',\n  disabled,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  // Get classes from lookup tables\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n  const baseClasses =\n    'inline-flex items-center justify-center rounded-full cursor-pointer font-medium';\n\n  return (\n    <button\n      className={cn(baseClasses, variantClasses, sizeClasses, className)}\n      disabled={disabled}\n      type={type}\n      {...props}\n    >\n      {iconLeft && <span className=\"mr-2 flex items-center\">{iconLeft}</span>}\n      {children}\n      {iconRight && <span className=\"ml-2 flex items-center\">{iconRight}</span>}\n    </button>\n  );\n};\n\nexport default Button;\n","import { HTMLAttributes, ReactNode } from 'react';\nimport { Bell } 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    error: 'bg-error-background text-error-700 focus-visible:outline-none',\n    warning: 'bg-warning text-warning-800 focus-visible:outline-none',\n    success: 'bg-success text-success-800 focus-visible:outline-none',\n    info: 'bg-info text-info-800 focus-visible:outline-none',\n    muted: 'bg-background-muted text-background-800 focus-visible:outline-none',\n  },\n  outlined: {\n    error:\n      'bg-error text-error-700 border border-error-300 focus-visible:outline-none',\n    warning:\n      'bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none',\n    success:\n      'bg-success text-success-800 border border-success-300 focus-visible:outline-none',\n    info: 'bg-info text-info-800 border border-info-300 focus-visible:outline-none',\n    muted:\n      'bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none',\n  },\n  exams: {\n    exam1: 'bg-exam-1 text-info-700 focus-visible:outline-none',\n    exam2: 'bg-exam-2 text-typography-1 focus-visible:outline-none',\n    exam3: 'bg-exam-3 text-typography-2 focus-visible:outline-none',\n    exam4: 'bg-exam-4 text-success-700 focus-visible:outline-none',\n  },\n  examsOutlined: {\n    exam1:\n      'bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none',\n    exam2:\n      'bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none',\n    exam3:\n      'bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none',\n    exam4:\n      'bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none',\n  },\n  resultStatus: {\n    negative: 'bg-error text-error-800 focus-visible:outline-none',\n    positive: 'bg-success text-success-800 focus-visible:outline-none',\n  },\n  notification: 'text-primary',\n} as const;\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  small: 'text-2xs px-2 py-1',\n  medium: 'text-xs px-2 py-1',\n  large: 'text-sm px-2 py-1',\n} as const;\n\nconst SIZE_CLASSES_ICON = {\n  small: 'size-3',\n  medium: 'size-3.5',\n  large: 'size-4',\n} as const;\n\n/**\n * Badge component props interface\n */\ntype BadgeProps = {\n  /** Content to be displayed inside the badge */\n  children?: ReactNode;\n  /** Ícone à direita do texto */\n  iconRight?: ReactNode;\n  /** Ícone à esquerda do texto */\n  iconLeft?: ReactNode;\n  /** Size of the badge */\n  size?: 'small' | 'medium' | 'large';\n  /** Visual variant of the badge */\n  variant?:\n    | 'solid'\n    | 'outlined'\n    | 'exams'\n    | 'examsOutlined'\n    | 'resultStatus'\n    | 'notification';\n  /** Action type of the badge  */\n  action?:\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'muted'\n    | 'exam1'\n    | 'exam2'\n    | 'exam3'\n    | 'exam4'\n    | 'positive'\n    | 'negative';\n  /** Additional CSS classes to apply */\n  className?: string;\n  notificationActive?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * Badge component for Analytica Ensino platforms\n *\n * A flexible button component with multiple variants, sizes and actions.\n *\n * @param children - The content to display inside the badge\n * @param size - The size variant (extra-small, small, medium, large, extra-large)\n * @param variant - The visual style variant (solid, outline, link)\n * @param action - The action type (primary, positive, negative)\n * @param className - Additional CSS classes\n * @param props - All other standard div HTML attributes\n * @returns A styled badge element\n *\n * @example\n * ```tsx\n * <Badge variant=\"solid\" action=\"info\" size=\"medium\">\n *   Information\n * </Badge>\n * ```\n */\nconst Badge = ({\n  children,\n  iconLeft,\n  iconRight,\n  size = 'medium',\n  variant = 'solid',\n  action = 'error',\n  className = '',\n  notificationActive = false,\n  ...props\n}: BadgeProps) => {\n  // Get classes from lookup tables\n  const sizeClasses = SIZE_CLASSES[size];\n  const sizeClassesIcon = SIZE_CLASSES_ICON[size];\n  const variantActionMap = VARIANT_ACTION_CLASSES[variant] || {};\n  const variantClasses =\n    typeof variantActionMap === 'string'\n      ? variantActionMap\n      : ((variantActionMap as Record<string, string>)[action] ??\n        (variantActionMap as Record<string, string>).muted ??\n        '');\n\n  const baseClasses =\n    'inline-flex items-center justify-center rounded-xs font-normal gap-1 relative';\n\n  const baseClassesIcon = 'flex items-center';\n  if (variant === 'notification') {\n    return (\n      <div\n        className={cn(baseClasses, variantClasses, sizeClasses, className)}\n        {...props}\n      >\n        <Bell size={24} className=\"text-current\" aria-hidden=\"true\" />\n\n        {notificationActive && (\n          <span\n            data-testid=\"notification-dot\"\n            className=\"absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white\"\n          />\n        )}\n      </div>\n    );\n  }\n  return (\n    <div\n      className={cn(baseClasses, variantClasses, sizeClasses, className)}\n      {...props}\n    >\n      {iconLeft && (\n        <span className={cn(baseClassesIcon, sizeClassesIcon)}>{iconLeft}</span>\n      )}\n      {children}\n      {iconRight && (\n        <span className={cn(baseClassesIcon, sizeClassesIcon)}>\n          {iconRight}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Badge;\n","import { CSSProperties, ReactNode } from 'react';\nimport 'katex/dist/katex.min.css';\nimport { InlineMath, BlockMath } from 'react-katex';\nimport DOMPurify from 'dompurify';\nimport parse, {\n  DOMNode,\n  Element,\n  HTMLReactParserOptions,\n} from 'html-react-parser';\nimport { cn } from '../../utils/utils';\n\n/**\n * Props for the LatexRenderer component\n */\nexport interface LatexRendererProps {\n  /** HTML content containing LaTeX expressions to render */\n  content: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Inline styles to apply */\n  style?: CSSProperties;\n  /** Custom error renderer for invalid LaTeX expressions */\n  onError?: (latex: string) => ReactNode;\n}\n\n/**\n * Helper function to sanitize HTML content to prevent XSS attacks\n */\nconst sanitizeHtml = (value: string): string => {\n  return DOMPurify.sanitize(value, {\n    ADD_ATTR: ['data-latex', 'data-display-mode', 'data-math', 'data-math-id'],\n  });\n};\n\n/**\n * Helper function to decode HTML entities\n * Converts entities like &amp;, &lt;, &gt; back to their actual characters\n */\nconst decodeHtmlEntities = (str: string): string => {\n  const textarea = document.createElement('textarea');\n  textarea.innerHTML = str;\n  return textarea.value;\n};\n\n/**\n * Helper function to clean latex from invisible characters\n */\nconst cleanLatex = (str: string): string => {\n  // Remove zero-width characters, invisible characters, and other problematic Unicode\n  return str.replaceAll(/[\\u200B-\\u200D\\uFEFF]/g, '').trim();\n};\n\n/**\n * Type for math parts used in rendering\n */\ninterface MathPart {\n  id: number;\n  type: 'inline' | 'block';\n  latex: string;\n}\n\n/**\n * Creates a replace function for html-react-parser that replaces math placeholders\n * with KaTeX components\n */\nconst createMathReplacer = (\n  mathParts: MathPart[],\n  errorRenderer: (latex: string) => ReactNode\n) => {\n  return (domNode: DOMNode) => {\n    if (\n      domNode instanceof Element &&\n      domNode.name === 'span' &&\n      domNode.attribs['data-math-id']\n    ) {\n      const mathId = Number.parseInt(domNode.attribs['data-math-id'], 10);\n      const mathPart = mathParts[mathId];\n\n      if (!mathPart) return domNode;\n\n      if (mathPart.type === 'inline') {\n        return (\n          <InlineMath\n            key={`math-${mathId}`}\n            math={mathPart.latex}\n            renderError={() => errorRenderer(mathPart.latex)}\n          />\n        );\n      } else {\n        return (\n          <div key={`math-${mathId}`} className=\"my-2.5 text-center\">\n            <BlockMath\n              math={mathPart.latex}\n              renderError={() => errorRenderer(mathPart.latex)}\n            />\n          </div>\n        );\n      }\n    }\n    return domNode;\n  };\n};\n\n/**\n * LatexRenderer component for Analytica Ensino platforms\n *\n * Renders HTML content with embedded LaTeX/KaTeX mathematical expressions.\n * Supports multiple LaTeX formats:\n * - Inline math: `$...$` or `<latex>...</latex>`\n * - Block math: `$$...$$`\n * - LaTeX environments: `\\begin{equation}...\\end{equation}`, etc.\n * - Editor format: `<span class=\"math-formula\" data-latex=\"...\">...</span>`\n *\n * @param content - HTML content with LaTeX expressions\n * @param className - Additional CSS classes\n * @param style - Inline styles\n * @param onError - Custom error renderer\n * @returns Rendered content with mathematical expressions\n *\n * @example\n * ```tsx\n * <LatexRenderer content=\"The formula is $E = mc^2$\" />\n *\n * <LatexRenderer\n *   content=\"Block equation: $$\\sum_{i=1}^{n} x_i$$\"\n *   className=\"my-custom-class\"\n * />\n *\n * <LatexRenderer\n *   content=\"<p>Matrix: \\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}</p>\"\n *   onError={(latex) => <span>Invalid: {latex}</span>}\n * />\n * ```\n */\nconst LatexRenderer = ({\n  content,\n  className,\n  style,\n  onError,\n}: LatexRendererProps) => {\n  const renderContentWithMath = (htmlContent: string) => {\n    if (!htmlContent) return null;\n\n    let processedContent = htmlContent;\n    const mathParts: MathPart[] = [];\n\n    // Step 1: Handle math-formula spans (from the editor)\n    const mathFormulaPattern =\n      /<span[^>]*class=\"math-formula\"[^>]*data-latex=\"([^\"]*)\"[^>]*>[\\s\\S]*?<\\/span>/g;\n    processedContent = processedContent.replaceAll(\n      mathFormulaPattern,\n      (match, latex) => {\n        const isDisplayMode = match.includes('data-display-mode=\"true\"');\n        const id = mathParts.length;\n        mathParts.push({\n          id,\n          type: isDisplayMode ? 'block' : 'inline',\n          latex: cleanLatex(decodeHtmlEntities(latex)),\n        });\n        return `<span data-math-id=\"${id}\"></span>`;\n      }\n    );\n\n    // Step 2: Handle wrapped math expressions (from math modal - legacy)\n    const wrappedMathPattern =\n      /<span[^>]*class=\"math-expression\"[^>]*data-math=\"([^\"]*)\"[^>]*>.*?<\\/span>/g;\n    processedContent = processedContent.replaceAll(\n      wrappedMathPattern,\n      (match, latex) => {\n        const id = mathParts.length;\n        mathParts.push({\n          id,\n          type: 'inline',\n          latex: cleanLatex(decodeHtmlEntities(latex)),\n        });\n        return `<span data-math-id=\"${id}\"></span>`;\n      }\n    );\n\n    // Step 3: Handle raw $$...$$ expressions (manual input or saved content) - BEFORE single $\n    const doubleDollarPattern = /(?<!\\\\)\\$\\$([\\s\\S]+?)\\$\\$/g;\n    processedContent = processedContent.replaceAll(\n      doubleDollarPattern,\n      (match, latex) => {\n        const id = mathParts.length;\n        mathParts.push({\n          id,\n          type: 'block',\n          latex: cleanLatex(latex),\n        });\n        return `<span data-math-id=\"${id}\"></span>`;\n      }\n    );\n\n    // Step 4: Handle single $...$ expressions for inline math\n    const singleDollarPattern = /(?<!\\\\)\\$([\\s\\S]+?)\\$/g;\n    processedContent = processedContent.replaceAll(\n      singleDollarPattern,\n      (match, latex) => {\n        const id = mathParts.length;\n        mathParts.push({\n          id,\n          type: 'inline',\n          latex: cleanLatex(latex),\n        });\n        return `<span data-math-id=\"${id}\"></span>`;\n      }\n    );\n\n    // Step 5: Handle <latex>...</latex> tags for inline math\n    const latexTagPattern =\n      /(?:<latex>|&lt;latex&gt;)([\\s\\S]*?)(?:<\\/latex>|&lt;\\/latex&gt;)/g;\n    processedContent = processedContent.replaceAll(\n      latexTagPattern,\n      (match, latex) => {\n        const id = mathParts.length;\n        mathParts.push({\n          id,\n          type: 'inline',\n          latex: cleanLatex(latex),\n        });\n        return `<span data-math-id=\"${id}\"></span>`;\n      }\n    );\n\n    // Step 6: Handle standalone LaTeX environments (align, equation, pmatrix, etc.) for block math\n    const latexEnvPattern = /\\\\begin\\{([^}]+)\\}([\\s\\S]*?)\\\\end\\{\\1\\}/g;\n    processedContent = processedContent.replaceAll(latexEnvPattern, (match) => {\n      const id = mathParts.length;\n      mathParts.push({\n        id,\n        type: 'block',\n        latex: cleanLatex(match),\n      });\n      return `<span data-math-id=\"${id}\"></span>`;\n    });\n\n    // Sanitize the HTML with placeholders\n    const sanitizedContent = sanitizeHtml(processedContent);\n\n    // Default error renderer\n    const defaultErrorRenderer = (latex: string) => (\n      <span className=\"text-red-600\">Math Error: {latex}</span>\n    );\n\n    const errorRenderer = onError || defaultErrorRenderer;\n\n    // Parse HTML and replace math placeholders with React components\n    const options: HTMLReactParserOptions = {\n      replace: createMathReplacer(mathParts, errorRenderer),\n    };\n\n    return <>{parse(sanitizedContent, options)}</>;\n  };\n\n  return (\n    <div\n      className={cn('whitespace-pre-wrap leading-relaxed', className)}\n      style={style}\n    >\n      {renderContentWithMath(content)}\n    </div>\n  );\n};\n\nexport default LatexRenderer;\n","import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * IconButton component props interface\n */\nexport type IconButtonProps = {\n  /** Ícone a ser exibido no botão */\n  icon: ReactNode;\n  /** Tamanho do botão */\n  size?: 'sm' | 'md';\n  /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */\n  active?: boolean;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconButton component for Analytica Ensino platforms\n *\n * Um botão compacto apenas com ícone, ideal para menus dropdown,\n * barras de ferramentas e ações secundárias.\n * Oferece dois tamanhos com estilo consistente.\n * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param size - Tamanho do botão (sm, md)\n * @param active - Estado ativo/selecionado do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button compacto estilizado apenas com ícone\n *\n * @example\n * ```tsx\n * <IconButton\n *   icon={<MoreVerticalIcon />}\n *   size=\"sm\"\n *   onClick={() => openMenu()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique\n * <IconButton\n *   icon={<BoldIcon />}\n *   active={isBold}\n *   onClick={toggleBold}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para controle programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * <IconButton\n *   ref={buttonRef}\n *   icon={<EditIcon />}\n *   size=\"md\"\n *   onClick={() => startEditing()}\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { icon, size = 'md', active = false, className = '', disabled, ...props },\n    ref\n  ) => {\n    // Classes base para todos os estados\n    const baseClasses = [\n      'inline-flex',\n      'items-center',\n      'justify-center',\n      'rounded-lg',\n      'font-medium',\n      'bg-transparent',\n      'text-text-950',\n      'cursor-pointer',\n      'hover:bg-primary-600',\n      'hover:text-text',\n      'focus-visible:outline-none',\n      'focus-visible:ring-2',\n      'focus-visible:ring-offset-0',\n      'focus-visible:ring-indicator-info',\n      'disabled:opacity-50',\n      'disabled:cursor-not-allowed',\n      'disabled:pointer-events-none',\n    ];\n\n    // Classes de tamanho\n    const sizeClasses = {\n      sm: ['w-6', 'h-6', 'text-sm'],\n      md: ['w-10', 'h-10', 'text-base'],\n    };\n\n    // Classes de estado ativo\n    const activeClasses = active\n      ? ['!bg-primary-50', '!text-primary-950', 'hover:!bg-primary-100']\n      : [];\n\n    const allClasses = [\n      ...baseClasses,\n      ...sizeClasses[size],\n      ...activeClasses,\n    ].join(' ');\n\n    // Garantir acessibilidade com aria-label padrão\n    const ariaLabel = props['aria-label'] ?? 'Botão de ação';\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(allClasses, className)}\n        disabled={disabled}\n        aria-pressed={active}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        <span className=\"flex items-center justify-center\">{icon}</span>\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n","import {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\nimport { Check, Minus } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * CheckBox size variants\n */\ntype CheckBoxSize = 'small' | 'medium' | 'large';\n\n/**\n * CheckBox visual state\n */\ntype CheckBoxState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    checkbox: 'w-4 h-4', // 16px x 16px\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5', // 6px\n    borderWidth: 'border-2',\n    iconSize: 14, // pixels for Phosphor icons\n    labelHeight: 'h-[21px]',\n  },\n  medium: {\n    checkbox: 'w-5 h-5', // 20px x 20px\n    textSize: 'md' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2',\n    iconSize: 16, // pixels for Phosphor icons\n    labelHeight: 'h-6',\n  },\n  large: {\n    checkbox: 'w-6 h-6', // 24px x 24px\n    textSize: 'lg' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-[3px]', // 3px border\n    iconSize: 20, // pixels for Phosphor icons\n    labelHeight: 'h-[27px]',\n  },\n} as const;\n\n/**\n * Base checkbox styling classes using design system colors\n */\nconst BASE_CHECKBOX_CLASSES =\n  'rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked:\n      'border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-primary-800 bg-primary-800 text-text',\n  },\n  focused: {\n    unchecked:\n      'border-indicator-info bg-background ring-2 ring-indicator-info/20',\n    checked:\n      'border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20',\n  },\n  invalid: {\n    unchecked: 'border-error-700 bg-background hover:border-error-600',\n    checked: 'border-error-700 bg-primary-950 text-text',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed opacity-40',\n    checked:\n      'border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40',\n  },\n} as const;\n\n/**\n * CheckBox component props interface\n */\nexport type CheckBoxProps = {\n  /** Label text to display next to the checkbox */\n  label?: ReactNode;\n  /** Size variant of the checkbox */\n  size?: CheckBoxSize;\n  /** Visual state of the checkbox */\n  state?: CheckBoxState;\n  /** Indeterminate state for partial selections */\n  indeterminate?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;\n\n/**\n * CheckBox component for Analytica Ensino platforms\n *\n * A checkbox component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic checkbox\n * <CheckBox label=\"Option\" />\n *\n * // Small size\n * <CheckBox size=\"small\" label=\"Small option\" />\n *\n * // Invalid state\n * <CheckBox state=\"invalid\" label=\"Required field\" />\n *\n * // Disabled state\n * <CheckBox disabled label=\"Disabled option\" />\n * ```\n */\nconst CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      indeterminate = false,\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      disabled,\n      id,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `checkbox-${generatedId}`;\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(false);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalChecked(event.target.checked);\n      }\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Determine checkbox visual variant\n    const checkVariant = checked || indeterminate ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][checkVariant];\n\n    // Special border width handling for focused/hovered states and large size\n    const borderWidthClass =\n      state === 'focused' || (state === 'hovered' && size === 'large')\n        ? 'border-[3px]'\n        : sizeClasses.borderWidth;\n\n    // Get final checkbox classes\n    const checkboxClasses = cn(\n      BASE_CHECKBOX_CLASSES,\n      sizeClasses.checkbox,\n      borderWidthClass,\n      stylingClasses,\n      className\n    );\n\n    // Render appropriate icon based on state\n    const renderIcon = () => {\n      if (indeterminate) {\n        return (\n          <Minus\n            size={sizeClasses.iconSize}\n            weight=\"bold\"\n            color=\"currentColor\"\n          />\n        );\n      }\n\n      if (checked) {\n        return (\n          <Check\n            size={sizeClasses.iconSize}\n            weight=\"bold\"\n            color=\"currentColor\"\n          />\n        );\n      }\n\n      return null;\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={cn(\n            'flex flex-row items-center',\n            sizeClasses.spacing,\n            disabled ? 'opacity-40' : ''\n          )}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n\n          {/* Custom styled checkbox */}\n          <label htmlFor={inputId} className={checkboxClasses}>\n            {/* Show appropriate icon based on state */}\n            {renderIcon()}\n          </label>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={cn(\n                'flex flex-row items-center',\n                sizeClasses.labelHeight\n              )}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={cn(\n                  'cursor-pointer select-none leading-[150%] flex items-center font-roboto',\n                  labelClassName\n                )}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckBox.displayName = 'CheckBox';\n\nexport default CheckBox;\n","import {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useEffect,\n  useRef,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n} from 'react';\nimport { create, StoreApi, useStore } from 'zustand';\nimport CheckBox from './CheckBox';\nimport { cn } from '../../utils/utils';\n\n/**\n * CheckboxList size variants\n */\ntype CheckboxListSize = 'small' | 'medium' | 'large';\n\n/**\n * CheckboxList visual state\n */\ntype CheckboxListState =\n  | 'default'\n  | 'hovered'\n  | 'focused'\n  | 'invalid'\n  | 'disabled';\n\n/**\n * CheckboxList store interface\n */\ninterface CheckboxListStore {\n  values: string[];\n  setValues: (values: string[]) => void;\n  toggleValue: (value: string) => void;\n  onValuesChange?: (values: string[]) => void;\n  disabled: boolean;\n  name: string;\n}\n\ntype CheckboxListStoreApi = StoreApi<CheckboxListStore>;\n\n/**\n * Create a new CheckboxList store\n */\nconst createCheckboxListStore = (\n  name: string,\n  defaultValues: string[],\n  disabled: boolean,\n  onValuesChange?: (values: string[]) => void\n): CheckboxListStoreApi =>\n  create<CheckboxListStore>((set, get) => ({\n    values: defaultValues,\n    setValues: (values) => {\n      if (!get().disabled) {\n        set({ values });\n        get().onValuesChange?.(values);\n      }\n    },\n    toggleValue: (value) => {\n      if (!get().disabled) {\n        const currentValues = get().values;\n        const newValues = currentValues.includes(value)\n          ? currentValues.filter((v) => v !== value)\n          : [...currentValues, value];\n        set({ values: newValues });\n        get().onValuesChange?.(newValues);\n      }\n    },\n    onValuesChange,\n    disabled,\n    name,\n  }));\n\n/**\n * Hook to access CheckboxList store\n */\nexport const useCheckboxListStore = (externalStore?: CheckboxListStoreApi) => {\n  if (!externalStore) {\n    throw new Error('CheckboxListItem must be used within a CheckboxList');\n  }\n  return externalStore;\n};\n\n/**\n * Inject store into CheckboxListItem children\n */\nconst injectStore = (\n  children: ReactNode,\n  store: CheckboxListStoreApi\n): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    const typedChild = child as ReactElement<CheckboxListItemProps>;\n    const shouldInject = typedChild.type === CheckboxListItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\n/**\n * CheckboxList component props interface\n */\nexport type CheckboxListProps = {\n  /** Current selected values */\n  values?: string[];\n  /** Default selected values for uncontrolled usage */\n  defaultValues?: string[];\n  /** Callback when selection changes */\n  onValuesChange?: (values: string[]) => void;\n  /** Group name for all checkboxes */\n  name?: string;\n  /** Disabled state for the entire group */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Children components */\n  children: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValues'>;\n\n/**\n * CheckboxList component for flexible checkbox group composition\n *\n * Uses Zustand for state man