analytica-frontend-lib 1.0.86 → 1.0.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordation/index.js +0 -1
- package/dist/Accordation/index.mjs +0 -1
- package/dist/Alert/index.js +0 -1
- package/dist/Alert/index.mjs +0 -1
- package/dist/AlertDialog/index.js +0 -1
- package/dist/AlertDialog/index.mjs +0 -1
- package/dist/Alternative/index.js +0 -1
- package/dist/Alternative/index.mjs +0 -1
- package/dist/Auth/AuthProvider/index.js +0 -1
- package/dist/Auth/AuthProvider/index.mjs +0 -1
- package/dist/Auth/ProtectedRoute/index.js +0 -1
- package/dist/Auth/ProtectedRoute/index.mjs +0 -1
- package/dist/Auth/PublicRoute/index.js +0 -1
- package/dist/Auth/PublicRoute/index.mjs +0 -1
- package/dist/Auth/getRootDomain/index.js +0 -1
- package/dist/Auth/getRootDomain/index.mjs +0 -1
- package/dist/Auth/index.js +0 -1
- package/dist/Auth/index.mjs +0 -1
- package/dist/Auth/useApiConfig/index.js +0 -1
- package/dist/Auth/useApiConfig/index.mjs +0 -1
- package/dist/Auth/useAuth/index.js +0 -1
- package/dist/Auth/useAuth/index.mjs +0 -1
- package/dist/Auth/useAuthGuard/index.js +0 -1
- package/dist/Auth/useAuthGuard/index.mjs +0 -1
- package/dist/Auth/useRouteAuth/index.js +0 -1
- package/dist/Auth/useRouteAuth/index.mjs +0 -1
- package/dist/Auth/useUrlAuthentication/index.js +0 -1
- package/dist/Auth/useUrlAuthentication/index.mjs +0 -1
- package/dist/Auth/withAuth/index.js +0 -1
- package/dist/Auth/withAuth/index.mjs +0 -1
- package/dist/Auth/zustandAuthAdapter/index.js +0 -1
- package/dist/Auth/zustandAuthAdapter/index.mjs +0 -1
- package/dist/Badge/index.js +0 -1
- package/dist/Badge/index.mjs +0 -1
- package/dist/Button/index.js +0 -1
- package/dist/Button/index.mjs +0 -1
- package/dist/Calendar/index.js +0 -1
- package/dist/Calendar/index.mjs +0 -1
- package/dist/Card/index.js +0 -1
- package/dist/Card/index.mjs +0 -1
- package/dist/CheckBox/index.js +0 -1
- package/dist/CheckBox/index.mjs +0 -1
- package/dist/Chips/index.js +0 -1
- package/dist/Chips/index.mjs +0 -1
- package/dist/Divider/index.js +0 -1
- package/dist/Divider/index.mjs +0 -1
- package/dist/DropdownMenu/index.js +0 -1
- package/dist/DropdownMenu/index.mjs +0 -1
- package/dist/IconButton/index.js +0 -1
- package/dist/IconButton/index.mjs +0 -1
- package/dist/IconRoundedButton/index.js +0 -1
- package/dist/IconRoundedButton/index.mjs +0 -1
- package/dist/Input/index.js +0 -1
- package/dist/Input/index.mjs +0 -1
- package/dist/Menu/index.js +0 -1
- package/dist/Menu/index.mjs +0 -1
- package/dist/Modal/index.js +0 -1
- package/dist/Modal/index.mjs +0 -1
- package/dist/MultipleChoice/index.js +660 -0
- package/dist/MultipleChoice/index.mjs +647 -0
- package/dist/NavButton/index.js +0 -1
- package/dist/NavButton/index.mjs +0 -1
- package/dist/NotFound/index.js +0 -1
- package/dist/NotFound/index.mjs +0 -1
- package/dist/ProgressBar/index.js +0 -1
- package/dist/ProgressBar/index.mjs +0 -1
- package/dist/ProgressCircle/index.js +0 -1
- package/dist/ProgressCircle/index.mjs +0 -1
- package/dist/Quiz/index.js +955 -296
- package/dist/Quiz/index.mjs +972 -295
- package/dist/Quiz/useQuizStore/index.js +79 -35
- package/dist/Quiz/useQuizStore/index.mjs +79 -35
- package/dist/Radio/index.js +0 -1
- package/dist/Radio/index.mjs +0 -1
- package/dist/Select/index.js +0 -1
- package/dist/Select/index.mjs +0 -1
- package/dist/SelectionButton/index.js +0 -1
- package/dist/SelectionButton/index.mjs +0 -1
- package/dist/Skeleton/index.js +0 -1
- package/dist/Skeleton/index.mjs +0 -1
- package/dist/Stepper/index.js +0 -1
- package/dist/Stepper/index.mjs +0 -1
- package/dist/Table/index.js +0 -1
- package/dist/Table/index.mjs +0 -1
- package/dist/Text/index.js +0 -1
- package/dist/Text/index.mjs +0 -1
- package/dist/TextArea/index.js +0 -1
- package/dist/TextArea/index.mjs +0 -1
- package/dist/Toast/ToastStore/index.js +0 -1
- package/dist/Toast/ToastStore/index.mjs +0 -1
- package/dist/Toast/Toaster/index.js +0 -1
- package/dist/Toast/Toaster/index.mjs +0 -1
- package/dist/Toast/index.js +0 -1
- package/dist/Toast/index.mjs +0 -1
- package/dist/index.css +42 -1
- package/dist/index.js +1397 -935
- package/dist/index.mjs +1338 -866
- package/dist/styles.css +42 -1
- package/package.json +4 -2
- package/dist/Accordation/index.d.mts +0 -12
- package/dist/Accordation/index.d.ts +0 -12
- package/dist/Accordation/index.js.map +0 -1
- package/dist/Accordation/index.mjs.map +0 -1
- package/dist/Alert/index.d.mts +0 -13
- package/dist/Alert/index.d.ts +0 -13
- package/dist/Alert/index.js.map +0 -1
- package/dist/Alert/index.mjs.map +0 -1
- package/dist/AlertDialog/index.d.mts +0 -36
- package/dist/AlertDialog/index.d.ts +0 -36
- package/dist/AlertDialog/index.js.map +0 -1
- package/dist/AlertDialog/index.mjs.map +0 -1
- package/dist/Alternative/index.d.mts +0 -81
- package/dist/Alternative/index.d.ts +0 -81
- package/dist/Alternative/index.js.map +0 -1
- package/dist/Alternative/index.mjs.map +0 -1
- package/dist/Auth/AuthProvider/index.d.mts +0 -3
- package/dist/Auth/AuthProvider/index.d.ts +0 -3
- package/dist/Auth/AuthProvider/index.js.map +0 -1
- package/dist/Auth/AuthProvider/index.mjs.map +0 -1
- package/dist/Auth/ProtectedRoute/index.d.mts +0 -3
- package/dist/Auth/ProtectedRoute/index.d.ts +0 -3
- package/dist/Auth/ProtectedRoute/index.js.map +0 -1
- package/dist/Auth/ProtectedRoute/index.mjs.map +0 -1
- package/dist/Auth/PublicRoute/index.d.mts +0 -3
- package/dist/Auth/PublicRoute/index.d.ts +0 -3
- package/dist/Auth/PublicRoute/index.js.map +0 -1
- package/dist/Auth/PublicRoute/index.mjs.map +0 -1
- package/dist/Auth/getRootDomain/index.d.mts +0 -3
- package/dist/Auth/getRootDomain/index.d.ts +0 -3
- package/dist/Auth/getRootDomain/index.js.map +0 -1
- package/dist/Auth/getRootDomain/index.mjs.map +0 -1
- package/dist/Auth/index.d.mts +0 -312
- package/dist/Auth/index.d.ts +0 -312
- package/dist/Auth/index.js.map +0 -1
- package/dist/Auth/index.mjs.map +0 -1
- package/dist/Auth/useApiConfig/index.d.mts +0 -43
- package/dist/Auth/useApiConfig/index.d.ts +0 -43
- package/dist/Auth/useApiConfig/index.js.map +0 -1
- package/dist/Auth/useApiConfig/index.mjs.map +0 -1
- package/dist/Auth/useAuth/index.d.mts +0 -3
- package/dist/Auth/useAuth/index.d.ts +0 -3
- package/dist/Auth/useAuth/index.js.map +0 -1
- package/dist/Auth/useAuth/index.mjs.map +0 -1
- package/dist/Auth/useAuthGuard/index.d.mts +0 -3
- package/dist/Auth/useAuthGuard/index.d.ts +0 -3
- package/dist/Auth/useAuthGuard/index.js.map +0 -1
- package/dist/Auth/useAuthGuard/index.mjs.map +0 -1
- package/dist/Auth/useRouteAuth/index.d.mts +0 -3
- package/dist/Auth/useRouteAuth/index.d.ts +0 -3
- package/dist/Auth/useRouteAuth/index.js.map +0 -1
- package/dist/Auth/useRouteAuth/index.mjs.map +0 -1
- package/dist/Auth/useUrlAuthentication/index.d.mts +0 -58
- package/dist/Auth/useUrlAuthentication/index.d.ts +0 -58
- package/dist/Auth/useUrlAuthentication/index.js.map +0 -1
- package/dist/Auth/useUrlAuthentication/index.mjs.map +0 -1
- package/dist/Auth/withAuth/index.d.mts +0 -3
- package/dist/Auth/withAuth/index.d.ts +0 -3
- package/dist/Auth/withAuth/index.js.map +0 -1
- package/dist/Auth/withAuth/index.mjs.map +0 -1
- package/dist/Auth/zustandAuthAdapter/index.d.mts +0 -75
- package/dist/Auth/zustandAuthAdapter/index.d.ts +0 -75
- package/dist/Auth/zustandAuthAdapter/index.js.map +0 -1
- package/dist/Auth/zustandAuthAdapter/index.mjs.map +0 -1
- package/dist/Badge/index.d.mts +0 -46
- package/dist/Badge/index.d.ts +0 -46
- package/dist/Badge/index.js.map +0 -1
- package/dist/Badge/index.mjs.map +0 -1
- package/dist/Button/index.d.mts +0 -45
- package/dist/Button/index.d.ts +0 -45
- package/dist/Button/index.js.map +0 -1
- package/dist/Button/index.mjs.map +0 -1
- package/dist/Calendar/index.d.mts +0 -60
- package/dist/Calendar/index.d.ts +0 -60
- package/dist/Calendar/index.js.map +0 -1
- package/dist/Calendar/index.mjs.map +0 -1
- package/dist/Card/index.d.mts +0 -150
- package/dist/Card/index.d.ts +0 -150
- package/dist/Card/index.js.map +0 -1
- package/dist/Card/index.mjs.map +0 -1
- package/dist/CheckBox/index.d.mts +0 -74
- package/dist/CheckBox/index.d.ts +0 -74
- package/dist/CheckBox/index.js.map +0 -1
- package/dist/CheckBox/index.mjs.map +0 -1
- package/dist/Chips/index.d.mts +0 -41
- package/dist/Chips/index.d.ts +0 -41
- package/dist/Chips/index.js.map +0 -1
- package/dist/Chips/index.mjs.map +0 -1
- package/dist/Divider/index.d.mts +0 -32
- package/dist/Divider/index.d.ts +0 -32
- package/dist/Divider/index.js.map +0 -1
- package/dist/Divider/index.mjs.map +0 -1
- package/dist/DropdownMenu/index.d.mts +0 -68
- package/dist/DropdownMenu/index.d.ts +0 -68
- package/dist/DropdownMenu/index.js.map +0 -1
- package/dist/DropdownMenu/index.mjs.map +0 -1
- package/dist/IconButton/index.d.mts +0 -76
- package/dist/IconButton/index.d.ts +0 -76
- package/dist/IconButton/index.js.map +0 -1
- package/dist/IconButton/index.mjs.map +0 -1
- package/dist/IconRoundedButton/index.d.mts +0 -34
- package/dist/IconRoundedButton/index.d.ts +0 -34
- package/dist/IconRoundedButton/index.js.map +0 -1
- package/dist/IconRoundedButton/index.mjs.map +0 -1
- package/dist/Input/index.d.mts +0 -27
- package/dist/Input/index.d.ts +0 -27
- package/dist/Input/index.js.map +0 -1
- package/dist/Input/index.mjs.map +0 -1
- package/dist/Menu/index.d.mts +0 -48
- package/dist/Menu/index.d.ts +0 -48
- package/dist/Menu/index.js.map +0 -1
- package/dist/Menu/index.mjs.map +0 -1
- package/dist/Modal/index.d.mts +0 -66
- package/dist/Modal/index.d.ts +0 -66
- package/dist/Modal/index.js.map +0 -1
- package/dist/Modal/index.mjs.map +0 -1
- package/dist/NavButton/index.d.mts +0 -57
- package/dist/NavButton/index.d.ts +0 -57
- package/dist/NavButton/index.js.map +0 -1
- package/dist/NavButton/index.mjs.map +0 -1
- package/dist/NotFound/index.d.mts +0 -58
- package/dist/NotFound/index.d.ts +0 -58
- package/dist/NotFound/index.js.map +0 -1
- package/dist/NotFound/index.mjs.map +0 -1
- package/dist/ProgressBar/index.d.mts +0 -95
- package/dist/ProgressBar/index.d.ts +0 -95
- package/dist/ProgressBar/index.js.map +0 -1
- package/dist/ProgressBar/index.mjs.map +0 -1
- package/dist/ProgressCircle/index.d.mts +0 -60
- package/dist/ProgressCircle/index.d.ts +0 -60
- package/dist/ProgressCircle/index.js.map +0 -1
- package/dist/ProgressCircle/index.mjs.map +0 -1
- package/dist/Quiz/index.d.mts +0 -52
- package/dist/Quiz/index.d.ts +0 -52
- package/dist/Quiz/index.js.map +0 -1
- package/dist/Quiz/index.mjs.map +0 -1
- package/dist/Quiz/useQuizStore/index.d.mts +0 -140
- package/dist/Quiz/useQuizStore/index.d.ts +0 -140
- package/dist/Quiz/useQuizStore/index.js.map +0 -1
- package/dist/Quiz/useQuizStore/index.mjs.map +0 -1
- package/dist/Radio/index.d.mts +0 -203
- package/dist/Radio/index.d.ts +0 -203
- package/dist/Radio/index.js.map +0 -1
- package/dist/Radio/index.mjs.map +0 -1
- package/dist/Select/index.d.mts +0 -58
- package/dist/Select/index.d.ts +0 -58
- package/dist/Select/index.js.map +0 -1
- package/dist/Select/index.mjs.map +0 -1
- package/dist/SelectionButton/index.d.mts +0 -57
- package/dist/SelectionButton/index.d.ts +0 -57
- package/dist/SelectionButton/index.js.map +0 -1
- package/dist/SelectionButton/index.mjs.map +0 -1
- package/dist/Skeleton/index.d.mts +0 -40
- package/dist/Skeleton/index.d.ts +0 -40
- package/dist/Skeleton/index.js.map +0 -1
- package/dist/Skeleton/index.mjs.map +0 -1
- package/dist/Stepper/index.d.mts +0 -169
- package/dist/Stepper/index.d.ts +0 -169
- package/dist/Stepper/index.js.map +0 -1
- package/dist/Stepper/index.mjs.map +0 -1
- package/dist/Table/index.d.mts +0 -17
- package/dist/Table/index.d.ts +0 -17
- package/dist/Table/index.js.map +0 -1
- package/dist/Table/index.mjs.map +0 -1
- package/dist/Text/index.d.mts +0 -58
- package/dist/Text/index.d.ts +0 -58
- package/dist/Text/index.js.map +0 -1
- package/dist/Text/index.mjs.map +0 -1
- package/dist/TextArea/index.d.mts +0 -70
- package/dist/TextArea/index.d.ts +0 -70
- package/dist/TextArea/index.js.map +0 -1
- package/dist/TextArea/index.mjs.map +0 -1
- package/dist/Toast/ToastStore/index.d.mts +0 -19
- package/dist/Toast/ToastStore/index.d.ts +0 -19
- package/dist/Toast/ToastStore/index.js.map +0 -1
- package/dist/Toast/ToastStore/index.mjs.map +0 -1
- package/dist/Toast/Toaster/index.d.mts +0 -16
- package/dist/Toast/Toaster/index.d.ts +0 -16
- package/dist/Toast/Toaster/index.js.map +0 -1
- package/dist/Toast/Toaster/index.mjs.map +0 -1
- package/dist/Toast/index.d.mts +0 -17
- package/dist/Toast/index.d.ts +0 -17
- package/dist/Toast/index.js.map +0 -1
- package/dist/Toast/index.mjs.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/index.d.mts +0 -41
- package/dist/index.d.ts +0 -41
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/styles.css.map +0 -1
- package/dist/styles.d.mts +0 -2
- package/dist/styles.d.ts +0 -2
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\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 Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n /** Unique identifier for the step */\n id: string;\n /** Label text for the step */\n label: string;\n /** Current state of the step */\n state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'gap-2', // 8px gap as specified in CSS\n stepWidth: 'w-[58px]', // exact 58px from CSS\n stepHeight: 'h-[38px]', // exact 38px from CSS\n indicator: 'w-5 h-5', // 20px as specified\n progressBar: 'h-0.5', // 2px as specified\n indicatorTextSize: '2xs', // 10px as specified\n labelTextSize: 'xs', // 12px as specified\n iconSize: 'w-3 h-3', // 12px\n },\n medium: {\n container: 'gap-3', // 12px (8px + 4px progression)\n stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n progressBar: 'h-0.5', // 2px maintained for consistency\n indicatorTextSize: '2xs', // 10px maintained for readability\n labelTextSize: 'xs', // 12px maintained\n iconSize: 'w-3.5 h-3.5', // 14px\n },\n large: {\n container: 'gap-4', // 16px (12px + 4px progression)\n stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n progressBar: 'h-1', // 4px (increased for better visibility)\n indicatorTextSize: 'xs', // 12px (increased for larger size)\n labelTextSize: 'sm', // 14px (increased for larger size)\n iconSize: 'w-4 h-4', // 16px\n },\n extraLarge: {\n container: 'gap-5', // 20px (16px + 4px progression)\n stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n progressBar: 'h-1', // 4px maintained\n indicatorTextSize: 'xs', // 12px maintained for readability\n labelTextSize: 'sm', // 14px maintained\n iconSize: 'w-[18px] h-[18px]', // 18px\n },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n pending: {\n progressBar: 'bg-text-400', // #A3A3A3\n indicator: 'bg-text-400', // #A3A3A3\n indicatorText: 'text-white', // Branco para contraste com background cinza\n label: 'text-text-400', // #A3A3A3\n },\n current: {\n progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n },\n completed: {\n progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n step: StepData;\n index: number;\n size: StepperSize;\n sizeClasses: SizeClassType;\n stateClasses: StateClassType;\n isLast: boolean;\n className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n step,\n index,\n size: _size,\n sizeClasses,\n stateClasses,\n isLast: _isLast,\n className = '',\n}: StepProps) => {\n const stepNumber = index + 1;\n const isCompleted = step.state === 'completed';\n\n // Generate accessible aria-label based on step state\n const getAriaLabel = () => {\n let suffix = '';\n if (step.state === 'completed') {\n suffix = ' (concluído)';\n } else if (step.state === 'current') {\n suffix = ' (atual)';\n }\n return `${step.label}${suffix}`;\n };\n\n return (\n <div\n className={`\n flex flex-col justify-center items-center pb-2 gap-2\n ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n flex-none flex-grow\n ${className}\n sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n overflow-visible\n `}\n >\n {/* Progress Bar - Full width at top with responsive scaling */}\n <div\n className={`\n w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n rounded-sm flex-none\n `}\n />\n\n {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n <div\n className={`\n flex flex-col sm:flex-row items-center\n gap-1 sm:gap-2 w-full sm:w-auto\n h-auto sm:h-5 flex-none\n overflow-visible\n `}\n >\n {/* Step Indicator Circle with responsive sizing */}\n <div\n className={`\n ${sizeClasses.indicator} ${stateClasses.indicator}\n rounded-full flex items-center justify-center relative\n flex-none transition-all duration-300 ease-out\n w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n `}\n aria-label={getAriaLabel()}\n >\n {isCompleted ? (\n <Check\n weight=\"bold\"\n className={`\n ${stateClasses.indicatorText}\n w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n `}\n />\n ) : (\n <Text\n size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.indicatorText,\n 'leading-none text-2xs sm:text-xs'\n )}\n >\n {stepNumber}\n </Text>\n )}\n </div>\n\n {/* Step Label with full responsive text sizing, no vertical overflow */}\n <Text\n size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.label,\n 'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n )}\n >\n {step.label}\n </Text>\n </div>\n </div>\n );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n /** Array of step data */\n steps: StepData[];\n /** Size variant of the stepper */\n size?: StepperSize;\n /** Current active step index */\n currentStep?: number;\n /** Additional CSS classes */\n className?: string;\n /** Step container CSS classes */\n stepClassName?: string;\n /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n showProgress?: boolean;\n /** Custom progress text */\n progressText?: string;\n /** Make stepper responsive (vertical on mobile) */\n responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n steps: StepData[],\n currentStep: number\n): StepData[] => {\n return steps.map((step, index) => {\n let stepState: StepState;\n\n if (index < currentStep) {\n stepState = 'completed';\n } else if (index === currentStep) {\n stepState = 'current';\n } else {\n stepState = 'pending';\n }\n\n return {\n ...step,\n state: stepState,\n };\n });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n currentStep: number,\n totalSteps: number,\n customText?: string\n): string => {\n if (customText) return customText;\n return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n steps: initialSteps,\n size = 'medium',\n currentStep,\n className = '',\n stepClassName = '',\n showProgress = false,\n progressText,\n responsive = true,\n}: StepperProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n // Calculate steps with states if currentStep is provided\n const steps =\n currentStep !== undefined\n ? calculateStepStates(initialSteps, currentStep)\n : initialSteps;\n\n return (\n <fieldset\n className={cn(\n 'flex flex-col gap-4 sm:gap-5 md:gap-6',\n className,\n 'border-0 p-0 m-0'\n )}\n >\n <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n Stepper de formulário\n </legend>\n {/* Progress indicator with responsive text */}\n {showProgress && currentStep !== undefined && (\n <Text\n size=\"sm\"\n weight=\"medium\"\n className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n >\n {getProgressText(currentStep, steps.length, progressText)}\n </Text>\n )}\n\n {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n <div\n className={cn(\n 'flex items-center',\n sizeClasses.container,\n responsive\n ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n : 'flex-row justify-center',\n 'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n )}\n role=\"tablist\"\n aria-label=\"Progress steps\"\n >\n {steps.map((step, index) => {\n const stateClasses = STATE_CLASSES[step.state];\n\n return (\n <Step\n key={step.id}\n step={step}\n index={index}\n size={size}\n sizeClasses={sizeClasses}\n stateClasses={stateClasses}\n isLast={index === steps.length - 1}\n className={stepClassName}\n />\n );\n })}\n </div>\n </fieldset>\n );\n};\n\nexport default Stepper;\n"],"mappings":"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","names":["jsx"]}
|
package/dist/Table/index.d.mts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { HTMLAttributes, TdHTMLAttributes } from 'react';
|
|
3
|
-
|
|
4
|
-
type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
|
|
5
|
-
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
6
|
-
state?: TableRowState;
|
|
7
|
-
}
|
|
8
|
-
declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
|
|
9
|
-
declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
10
|
-
declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
11
|
-
declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
12
|
-
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
13
|
-
declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
14
|
-
declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
15
|
-
declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
16
|
-
|
|
17
|
-
export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default };
|
package/dist/Table/index.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { HTMLAttributes, TdHTMLAttributes } from 'react';
|
|
3
|
-
|
|
4
|
-
type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
|
|
5
|
-
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
6
|
-
state?: TableRowState;
|
|
7
|
-
}
|
|
8
|
-
declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
|
|
9
|
-
declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
10
|
-
declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
11
|
-
declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
12
|
-
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
13
|
-
declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
14
|
-
declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
15
|
-
declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
16
|
-
|
|
17
|
-
export { TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Table as default };
|
package/dist/Table/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Table/Table.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, TdHTMLAttributes } from 'react';\nimport { cn } from '../../utils/utils';\n\ntype TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n ({ className, children, ...props }, ref) => (\n <div className=\"border border-border-200 rounded-xl relative w-full overflow-hidden\">\n <table\n ref={ref}\n className={cn('w-full caption-bottom text-sm', className)}\n {...props}\n >\n {/* Fix Sonnar */}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={cn('[&_tr:first-child]:border-0', className)}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-0 border-t border-border-200',\n className\n )}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: 'border-b border-border-200',\n selected: 'border-b-2 border-indicator-primary',\n invalid: 'border-b-2 border-indicator-error',\n disabled:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n} as const;\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ state = 'default', className, ...props }, ref) => {\n return (\n <tr\n ref={ref}\n className={cn(\n 'transition-colors',\n state !== 'disabled' ? 'hover:bg-muted/50' : '',\n VARIANT_STATES_ROW[state],\n className\n )}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n className\n )}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn(\n 'border-t border-border-200 text-sm text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6D;;;ACA7D,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADOM;AAHN,IAAM,YAAQ;AAAA,EACZ,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,4CAAC,SAAI,WAAU,uEACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA,MAGJ;AAAA,oDAAC,aAAQ,WAAU,WAAU,sBAAQ;AAAA,QACpC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAM,kBAAc,yBAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,kBAAc,yBAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UACE;AACJ;AAEA,IAAM,eAAW;AAAA,EACf,CAAC,EAAE,QAAQ,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,UAAU,aAAa,sBAAsB;AAAA,UAC7C,mBAAmB,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,QACA,iBAAe,UAAU;AAAA,QACxB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAEvB,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,mBAAe,yBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;AAE3B,IAAO,gBAAQ;","names":[]}
|
package/dist/Table/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Table/Table.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, TdHTMLAttributes } from 'react';\nimport { cn } from '../../utils/utils';\n\ntype TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n ({ className, children, ...props }, ref) => (\n <div className=\"border border-border-200 rounded-xl relative w-full overflow-hidden\">\n <table\n ref={ref}\n className={cn('w-full caption-bottom text-sm', className)}\n {...props}\n >\n {/* Fix Sonnar */}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={cn('[&_tr:first-child]:border-0', className)}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-0 border-t border-border-200',\n className\n )}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: 'border-b border-border-200',\n selected: 'border-b-2 border-indicator-primary',\n invalid: 'border-b-2 border-indicator-error',\n disabled:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n} as const;\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ state = 'default', className, ...props }, ref) => {\n return (\n <tr\n ref={ref}\n className={cn(\n 'transition-colors',\n state !== 'disabled' ? 'hover:bg-muted/50' : '',\n VARIANT_STATES_ROW[state],\n className\n )}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn(\n 'h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n className\n )}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={cn(\n 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn(\n 'border-t border-border-200 text-sm text-text-800 px-6 py-3.5',\n className\n )}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\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"],"mappings":";AAAA,SAAS,kBAAoD;;;ACA7D,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADOM,SAME,KANF;AAHN,IAAM,QAAQ;AAAA,EACZ,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,oBAAC,SAAI,WAAU,uEACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA,MAGJ;AAAA,4BAAC,aAAQ,WAAU,WAAU,sBAAQ;AAAA,QACpC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAM,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UACE;AACJ;AAEA,IAAM,WAAW;AAAA,EACf,CAAC,EAAE,QAAQ,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,UAAU,aAAa,sBAAsB;AAAA,UAC7C,mBAAmB,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,QACA,iBAAe,UAAU;AAAA,QACxB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAEvB,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,eAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;AAE3B,IAAO,gBAAQ;","names":[]}
|
package/dist/Text/index.d.mts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Base text component props
|
|
6
|
-
*/
|
|
7
|
-
type BaseTextProps = {
|
|
8
|
-
/** Content to be displayed */
|
|
9
|
-
children?: ReactNode;
|
|
10
|
-
/** Text size variant */
|
|
11
|
-
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
12
|
-
/** Font weight variant */
|
|
13
|
-
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
14
|
-
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
15
|
-
color?: string;
|
|
16
|
-
/** Additional CSS classes to apply */
|
|
17
|
-
className?: string;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
21
|
-
*/
|
|
22
|
-
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
23
|
-
/** HTML tag to render */
|
|
24
|
-
as?: T;
|
|
25
|
-
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
26
|
-
/**
|
|
27
|
-
* Text component for Analytica Ensino platforms
|
|
28
|
-
*
|
|
29
|
-
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
30
|
-
* Automatically adapts to dark and light themes with full type safety.
|
|
31
|
-
*
|
|
32
|
-
* @param children - The content to display
|
|
33
|
-
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
34
|
-
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
35
|
-
* @param color - The color variant - adapts to theme
|
|
36
|
-
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
37
|
-
* @param className - Additional CSS classes
|
|
38
|
-
* @param props - HTML attributes valid for the chosen tag only
|
|
39
|
-
* @returns A styled text element with type-safe attributes
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```tsx
|
|
43
|
-
* <Text size="lg" weight="bold" color="text-info-800">
|
|
44
|
-
* This is a large, bold text
|
|
45
|
-
* </Text>
|
|
46
|
-
*
|
|
47
|
-
* <Text as="a" href="/link" target="_blank">
|
|
48
|
-
* Link with type-safe anchor attributes
|
|
49
|
-
* </Text>
|
|
50
|
-
*
|
|
51
|
-
* <Text as="button" onClick={handleClick} disabled>
|
|
52
|
-
* Button with type-safe button attributes
|
|
53
|
-
* </Text>
|
|
54
|
-
* ```
|
|
55
|
-
*/
|
|
56
|
-
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
57
|
-
|
|
58
|
-
export { Text as default };
|
package/dist/Text/index.d.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Base text component props
|
|
6
|
-
*/
|
|
7
|
-
type BaseTextProps = {
|
|
8
|
-
/** Content to be displayed */
|
|
9
|
-
children?: ReactNode;
|
|
10
|
-
/** Text size variant */
|
|
11
|
-
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
12
|
-
/** Font weight variant */
|
|
13
|
-
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
14
|
-
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
15
|
-
color?: string;
|
|
16
|
-
/** Additional CSS classes to apply */
|
|
17
|
-
className?: string;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
21
|
-
*/
|
|
22
|
-
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
23
|
-
/** HTML tag to render */
|
|
24
|
-
as?: T;
|
|
25
|
-
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
26
|
-
/**
|
|
27
|
-
* Text component for Analytica Ensino platforms
|
|
28
|
-
*
|
|
29
|
-
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
30
|
-
* Automatically adapts to dark and light themes with full type safety.
|
|
31
|
-
*
|
|
32
|
-
* @param children - The content to display
|
|
33
|
-
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
34
|
-
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
35
|
-
* @param color - The color variant - adapts to theme
|
|
36
|
-
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
37
|
-
* @param className - Additional CSS classes
|
|
38
|
-
* @param props - HTML attributes valid for the chosen tag only
|
|
39
|
-
* @returns A styled text element with type-safe attributes
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```tsx
|
|
43
|
-
* <Text size="lg" weight="bold" color="text-info-800">
|
|
44
|
-
* This is a large, bold text
|
|
45
|
-
* </Text>
|
|
46
|
-
*
|
|
47
|
-
* <Text as="a" href="/link" target="_blank">
|
|
48
|
-
* Link with type-safe anchor attributes
|
|
49
|
-
* </Text>
|
|
50
|
-
*
|
|
51
|
-
* <Text as="button" onClick={handleClick} disabled>
|
|
52
|
-
* Button with type-safe button attributes
|
|
53
|
-
* </Text>
|
|
54
|
-
* ```
|
|
55
|
-
*/
|
|
56
|
-
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
57
|
-
|
|
58
|
-
export { Text as default };
|
package/dist/Text/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Text/Text.tsx","../../src/utils/utils.ts"],"sourcesContent":["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 { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
|
package/dist/Text/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\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"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode, TextareaHTMLAttributes } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* TextArea size variants
|
|
6
|
-
*/
|
|
7
|
-
type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
|
|
8
|
-
/**
|
|
9
|
-
* TextArea visual state
|
|
10
|
-
*/
|
|
11
|
-
type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
|
|
12
|
-
/**
|
|
13
|
-
* TextArea component props interface
|
|
14
|
-
*/
|
|
15
|
-
type TextAreaProps = {
|
|
16
|
-
/** Label text to display above the textarea */
|
|
17
|
-
label?: ReactNode;
|
|
18
|
-
/** Size variant of the textarea */
|
|
19
|
-
size?: TextAreaSize;
|
|
20
|
-
/** Visual state of the textarea */
|
|
21
|
-
state?: TextAreaState;
|
|
22
|
-
/** Error message to display */
|
|
23
|
-
errorMessage?: string;
|
|
24
|
-
/** Helper text to display */
|
|
25
|
-
helperMessage?: string;
|
|
26
|
-
/** Additional CSS classes */
|
|
27
|
-
className?: string;
|
|
28
|
-
/** Label CSS classes */
|
|
29
|
-
labelClassName?: string;
|
|
30
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
|
|
31
|
-
/**
|
|
32
|
-
* TextArea component for Analytica Ensino platforms
|
|
33
|
-
*
|
|
34
|
-
* A textarea component with essential states, sizes and themes.
|
|
35
|
-
* Uses exact design specifications with 288px width, 96px height, and specific
|
|
36
|
-
* color values. Includes Text component integration for consistent typography.
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* // Basic textarea
|
|
41
|
-
* <TextArea label="Description" placeholder="Enter description..." />
|
|
42
|
-
*
|
|
43
|
-
* // Small size
|
|
44
|
-
* <TextArea size="small" label="Comment" />
|
|
45
|
-
*
|
|
46
|
-
* // Invalid state
|
|
47
|
-
* <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
|
|
48
|
-
*
|
|
49
|
-
* // Disabled state
|
|
50
|
-
* <TextArea disabled label="Read-only field" />
|
|
51
|
-
* ```
|
|
52
|
-
*/
|
|
53
|
-
declare const TextArea: react.ForwardRefExoticComponent<{
|
|
54
|
-
/** Label text to display above the textarea */
|
|
55
|
-
label?: ReactNode;
|
|
56
|
-
/** Size variant of the textarea */
|
|
57
|
-
size?: TextAreaSize;
|
|
58
|
-
/** Visual state of the textarea */
|
|
59
|
-
state?: TextAreaState;
|
|
60
|
-
/** Error message to display */
|
|
61
|
-
errorMessage?: string;
|
|
62
|
-
/** Helper text to display */
|
|
63
|
-
helperMessage?: string;
|
|
64
|
-
/** Additional CSS classes */
|
|
65
|
-
className?: string;
|
|
66
|
-
/** Label CSS classes */
|
|
67
|
-
labelClassName?: string;
|
|
68
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
69
|
-
|
|
70
|
-
export { type TextAreaProps, TextArea as default };
|
package/dist/TextArea/index.d.ts
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode, TextareaHTMLAttributes } from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* TextArea size variants
|
|
6
|
-
*/
|
|
7
|
-
type TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';
|
|
8
|
-
/**
|
|
9
|
-
* TextArea visual state
|
|
10
|
-
*/
|
|
11
|
-
type TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
|
|
12
|
-
/**
|
|
13
|
-
* TextArea component props interface
|
|
14
|
-
*/
|
|
15
|
-
type TextAreaProps = {
|
|
16
|
-
/** Label text to display above the textarea */
|
|
17
|
-
label?: ReactNode;
|
|
18
|
-
/** Size variant of the textarea */
|
|
19
|
-
size?: TextAreaSize;
|
|
20
|
-
/** Visual state of the textarea */
|
|
21
|
-
state?: TextAreaState;
|
|
22
|
-
/** Error message to display */
|
|
23
|
-
errorMessage?: string;
|
|
24
|
-
/** Helper text to display */
|
|
25
|
-
helperMessage?: string;
|
|
26
|
-
/** Additional CSS classes */
|
|
27
|
-
className?: string;
|
|
28
|
-
/** Label CSS classes */
|
|
29
|
-
labelClassName?: string;
|
|
30
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
|
|
31
|
-
/**
|
|
32
|
-
* TextArea component for Analytica Ensino platforms
|
|
33
|
-
*
|
|
34
|
-
* A textarea component with essential states, sizes and themes.
|
|
35
|
-
* Uses exact design specifications with 288px width, 96px height, and specific
|
|
36
|
-
* color values. Includes Text component integration for consistent typography.
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* // Basic textarea
|
|
41
|
-
* <TextArea label="Description" placeholder="Enter description..." />
|
|
42
|
-
*
|
|
43
|
-
* // Small size
|
|
44
|
-
* <TextArea size="small" label="Comment" />
|
|
45
|
-
*
|
|
46
|
-
* // Invalid state
|
|
47
|
-
* <TextArea state="invalid" label="Required field" errorMessage="This field is required" />
|
|
48
|
-
*
|
|
49
|
-
* // Disabled state
|
|
50
|
-
* <TextArea disabled label="Read-only field" />
|
|
51
|
-
* ```
|
|
52
|
-
*/
|
|
53
|
-
declare const TextArea: react.ForwardRefExoticComponent<{
|
|
54
|
-
/** Label text to display above the textarea */
|
|
55
|
-
label?: ReactNode;
|
|
56
|
-
/** Size variant of the textarea */
|
|
57
|
-
size?: TextAreaSize;
|
|
58
|
-
/** Visual state of the textarea */
|
|
59
|
-
state?: TextAreaState;
|
|
60
|
-
/** Error message to display */
|
|
61
|
-
errorMessage?: string;
|
|
62
|
-
/** Helper text to display */
|
|
63
|
-
helperMessage?: string;
|
|
64
|
-
/** Additional CSS classes */
|
|
65
|
-
className?: string;
|
|
66
|
-
/** Label CSS classes */
|
|
67
|
-
labelClassName?: string;
|
|
68
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
69
|
-
|
|
70
|
-
export { type TextAreaProps, TextArea as default };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n TextareaHTMLAttributes,\n ReactNode,\n forwardRef,\n useState,\n useId,\n ChangeEvent,\n FocusEvent,\n} from 'react';\nimport { WarningCircle } from 'phosphor-react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n small: {\n textarea: 'h-24 text-sm', // 96px height, 14px font\n textSize: 'sm' as const,\n },\n medium: {\n textarea: 'h-24 text-base', // 96px height, 16px font\n textSize: 'md' as const,\n },\n large: {\n textarea: 'h-24 text-lg', // 96px height, 18px font\n textSize: 'lg' as const,\n },\n extraLarge: {\n textarea: 'h-24 text-xl', // 96px height, 20px font\n textSize: 'xl' as const,\n },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n 'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n default: {\n base: 'border-border-300 bg-background text-text-600',\n hover: 'hover:border-border-400',\n focus: 'focus:border-border-500',\n },\n hovered: {\n base: 'border-border-400 bg-background text-text-600',\n hover: '',\n focus: 'focus:border-border-500',\n },\n focused: {\n base: 'border-2 border-primary-950 bg-background text-text-900',\n hover: '',\n focus: '',\n },\n invalid: {\n base: 'border-2 border-red-700 bg-white text-gray-800',\n hover: 'hover:border-red-700',\n focus: 'focus:border-red-700',\n },\n disabled: {\n base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n hover: '',\n focus: '',\n },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n /** Label text to display above the textarea */\n label?: ReactNode;\n /** Size variant of the textarea */\n size?: TextAreaSize;\n /** Visual state of the textarea */\n state?: TextAreaState;\n /** Error message to display */\n errorMessage?: string;\n /** Helper text to display */\n helperMessage?: string;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n size = 'medium',\n state = 'default',\n errorMessage,\n helperMessage,\n className = '',\n labelClassName = '',\n disabled,\n id,\n onChange,\n placeholder,\n ...props\n },\n ref\n ) => {\n // Generate unique ID if not provided\n const generatedId = useId();\n const inputId = id ?? `textarea-${generatedId}`;\n\n // Internal state for focus tracking\n const [isFocused, setIsFocused] = useState(false);\n\n // Handle change events\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n };\n\n // Handle focus events\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(true);\n props.onFocus?.(event);\n };\n\n // Handle blur events\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(false);\n props.onBlur?.(event);\n };\n\n // Determine current state based on props and focus\n let currentState = disabled ? 'disabled' : state;\n\n // Override state based on focus\n if (\n isFocused &&\n currentState !== 'invalid' &&\n currentState !== 'disabled'\n ) {\n currentState = 'focused';\n }\n\n // Get size classes\n const sizeClasses = SIZE_CLASSES[size];\n\n // Get styling classes\n const stateClasses = STATE_CLASSES[currentState];\n\n // Get final textarea classes\n const textareaClasses = cn(\n BASE_TEXTAREA_CLASSES,\n sizeClasses.textarea,\n stateClasses.base,\n stateClasses.hover,\n stateClasses.focus,\n className\n );\n\n return (\n <div className={`flex flex-col`}>\n {/* Label */}\n {label && (\n <Text\n as=\"label\"\n htmlFor={inputId}\n size={sizeClasses.textSize}\n weight=\"medium\"\n color=\"text-text-950\"\n className={cn('mb-1.5', labelClassName)}\n >\n {label}\n </Text>\n )}\n\n {/* Textarea */}\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={textareaClasses}\n placeholder={placeholder}\n {...props}\n />\n\n {/* Error message */}\n {errorMessage && (\n <p className=\"flex gap-1 items-center text-sm text-indicator-error mt-1.5\">\n <WarningCircle size={16} /> {errorMessage}\n </p>\n )}\n\n {/* Helper text */}\n {helperMessage && !errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n {helperMessage}\n </Text>\n )}\n </div>\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQO;AACP,4BAA8B;;;ACT9B,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACsHI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,aAAa,eAAe,OAAO,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AFkEL,IAAAA,sBAAA;AA5KV,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,UAAU;AAAA;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA;AAAA,IACV,UAAU;AAAA,EACZ;AACF;AAKA,IAAM,wBACJ;AAKF,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AA4CA,IAAM,eAAW;AAAA,EACf,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,kBAAc,oBAAM;AAC1B,UAAM,UAAU,MAAM,YAAY,WAAW;AAG7C,UAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAGhD,UAAM,eAAe,CAAC,UAA4C;AAChE,iBAAW,KAAK;AAAA,IAClB;AAGA,UAAM,cAAc,CAAC,UAA2C;AAC9D,mBAAa,IAAI;AACjB,YAAM,UAAU,KAAK;AAAA,IACvB;AAGA,UAAM,aAAa,CAAC,UAA2C;AAC7D,mBAAa,KAAK;AAClB,YAAM,SAAS,KAAK;AAAA,IACtB;AAGA,QAAI,eAAe,WAAW,aAAa;AAG3C,QACE,aACA,iBAAiB,aACjB,iBAAiB,YACjB;AACA,qBAAe;AAAA,IACjB;AAGA,UAAM,cAAc,aAAa,IAAI;AAGrC,UAAM,eAAe,cAAc,YAAY;AAG/C,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb;AAAA,IACF;AAEA,WACE,8CAAC,SAAI,WAAW,iBAEb;AAAA,eACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,SAAS;AAAA,UACT,MAAM,YAAY;AAAA,UAClB,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAW,GAAG,UAAU,cAAc;AAAA,UAErC;AAAA;AAAA,MACH;AAAA,MAIF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA,UAAU;AAAA,UACV,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAGC,gBACC,8CAAC,OAAE,WAAU,+DACX;AAAA,qDAAC,uCAAc,MAAM,IAAI;AAAA,QAAE;AAAA,QAAE;AAAA,SAC/B;AAAA,MAID,iBAAiB,CAAC,gBACjB,6CAAC,gBAAK,MAAK,MAAK,QAAO,UAAS,WAAU,wBACvC,yBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":["import_jsx_runtime"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n TextareaHTMLAttributes,\n ReactNode,\n forwardRef,\n useState,\n useId,\n ChangeEvent,\n FocusEvent,\n} from 'react';\nimport { WarningCircle } from 'phosphor-react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n small: {\n textarea: 'h-24 text-sm', // 96px height, 14px font\n textSize: 'sm' as const,\n },\n medium: {\n textarea: 'h-24 text-base', // 96px height, 16px font\n textSize: 'md' as const,\n },\n large: {\n textarea: 'h-24 text-lg', // 96px height, 18px font\n textSize: 'lg' as const,\n },\n extraLarge: {\n textarea: 'h-24 text-xl', // 96px height, 20px font\n textSize: 'xl' as const,\n },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n 'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n default: {\n base: 'border-border-300 bg-background text-text-600',\n hover: 'hover:border-border-400',\n focus: 'focus:border-border-500',\n },\n hovered: {\n base: 'border-border-400 bg-background text-text-600',\n hover: '',\n focus: 'focus:border-border-500',\n },\n focused: {\n base: 'border-2 border-primary-950 bg-background text-text-900',\n hover: '',\n focus: '',\n },\n invalid: {\n base: 'border-2 border-red-700 bg-white text-gray-800',\n hover: 'hover:border-red-700',\n focus: 'focus:border-red-700',\n },\n disabled: {\n base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n hover: '',\n focus: '',\n },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n /** Label text to display above the textarea */\n label?: ReactNode;\n /** Size variant of the textarea */\n size?: TextAreaSize;\n /** Visual state of the textarea */\n state?: TextAreaState;\n /** Error message to display */\n errorMessage?: string;\n /** Helper text to display */\n helperMessage?: string;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n size = 'medium',\n state = 'default',\n errorMessage,\n helperMessage,\n className = '',\n labelClassName = '',\n disabled,\n id,\n onChange,\n placeholder,\n ...props\n },\n ref\n ) => {\n // Generate unique ID if not provided\n const generatedId = useId();\n const inputId = id ?? `textarea-${generatedId}`;\n\n // Internal state for focus tracking\n const [isFocused, setIsFocused] = useState(false);\n\n // Handle change events\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n };\n\n // Handle focus events\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(true);\n props.onFocus?.(event);\n };\n\n // Handle blur events\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(false);\n props.onBlur?.(event);\n };\n\n // Determine current state based on props and focus\n let currentState = disabled ? 'disabled' : state;\n\n // Override state based on focus\n if (\n isFocused &&\n currentState !== 'invalid' &&\n currentState !== 'disabled'\n ) {\n currentState = 'focused';\n }\n\n // Get size classes\n const sizeClasses = SIZE_CLASSES[size];\n\n // Get styling classes\n const stateClasses = STATE_CLASSES[currentState];\n\n // Get final textarea classes\n const textareaClasses = cn(\n BASE_TEXTAREA_CLASSES,\n sizeClasses.textarea,\n stateClasses.base,\n stateClasses.hover,\n stateClasses.focus,\n className\n );\n\n return (\n <div className={`flex flex-col`}>\n {/* Label */}\n {label && (\n <Text\n as=\"label\"\n htmlFor={inputId}\n size={sizeClasses.textSize}\n weight=\"medium\"\n color=\"text-text-950\"\n className={cn('mb-1.5', labelClassName)}\n >\n {label}\n </Text>\n )}\n\n {/* Textarea */}\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={textareaClasses}\n placeholder={placeholder}\n {...props}\n />\n\n {/* Error message */}\n {errorMessage && (\n <p className=\"flex gap-1 items-center text-sm text-indicator-error mt-1.5\">\n <WarningCircle size={16} /> {errorMessage}\n </p>\n )}\n\n {/* Helper text */}\n {helperMessage && !errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n {helperMessage}\n </Text>\n )}\n </div>\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\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","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"],"mappings":"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","names":["jsx"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as zustand from 'zustand';
|
|
2
|
-
|
|
3
|
-
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
|
|
4
|
-
type ToastData = {
|
|
5
|
-
id: string;
|
|
6
|
-
title: string;
|
|
7
|
-
description?: string;
|
|
8
|
-
variant?: 'solid' | 'outlined';
|
|
9
|
-
action?: 'warning' | 'success' | 'info';
|
|
10
|
-
position?: ToastPosition;
|
|
11
|
-
};
|
|
12
|
-
type ToastStore = {
|
|
13
|
-
toasts: ToastData[];
|
|
14
|
-
addToast: (toast: Omit<ToastData, 'id'>) => void;
|
|
15
|
-
removeToast: (id: string) => void;
|
|
16
|
-
};
|
|
17
|
-
declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
|
|
18
|
-
|
|
19
|
-
export { useToastStore as default };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as zustand from 'zustand';
|
|
2
|
-
|
|
3
|
-
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
|
|
4
|
-
type ToastData = {
|
|
5
|
-
id: string;
|
|
6
|
-
title: string;
|
|
7
|
-
description?: string;
|
|
8
|
-
variant?: 'solid' | 'outlined';
|
|
9
|
-
action?: 'warning' | 'success' | 'info';
|
|
10
|
-
position?: ToastPosition;
|
|
11
|
-
};
|
|
12
|
-
type ToastStore = {
|
|
13
|
-
toasts: ToastData[];
|
|
14
|
-
addToast: (toast: Omit<ToastData, 'id'>) => void;
|
|
15
|
-
removeToast: (id: string) => void;
|
|
16
|
-
};
|
|
17
|
-
declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
|
|
18
|
-
|
|
19
|
-
export { useToastStore as default };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuB;AA0BvB,IAAM,oBAAgB,uBAAmB,CAAC,SAAS;AAAA,EACjD,QAAQ,CAAC;AAAA,EACT,UAAU,CAAC,UAAU;AACnB,UAAM,KAAK,OAAO,WAAW;AAE7B,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,CAAC,GAAG,MAAM,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;AAAA,IAC5C,EAAE;AAAA,EACJ;AAAA,EACA,aAAa,CAAC,OAAO;AACnB,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IAChD,EAAE;AAAA,EACJ;AACF,EAAE;AAEF,IAAO,qBAAQ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts"],"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"],"mappings":";AAAA,SAAS,cAAc;AA0BvB,IAAM,gBAAgB,OAAmB,CAAC,SAAS;AAAA,EACjD,QAAQ,CAAC;AAAA,EACT,UAAU,CAAC,UAAU;AACnB,UAAM,KAAK,OAAO,WAAW;AAE7B,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,CAAC,GAAG,MAAM,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;AAAA,IAC5C,EAAE;AAAA,EACJ;AAAA,EACA,aAAa,CAAC,OAAO;AACnB,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IAChD,EAAE;AAAA,EACJ;AACF,EAAE;AAEF,IAAO,qBAAQ;","names":[]}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
declare const Toaster: () => react_jsx_runtime.JSX.Element;
|
|
4
|
-
declare const useToast: () => {
|
|
5
|
-
addToast: (toast: Omit<{
|
|
6
|
-
id: string;
|
|
7
|
-
title: string;
|
|
8
|
-
description?: string;
|
|
9
|
-
variant?: "solid" | "outlined";
|
|
10
|
-
action?: "warning" | "success" | "info";
|
|
11
|
-
position?: "default" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
12
|
-
}, "id">) => void;
|
|
13
|
-
removeToast: (id: string) => void;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { Toaster as default, useToast };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
declare const Toaster: () => react_jsx_runtime.JSX.Element;
|
|
4
|
-
declare const useToast: () => {
|
|
5
|
-
addToast: (toast: Omit<{
|
|
6
|
-
id: string;
|
|
7
|
-
title: string;
|
|
8
|
-
description?: string;
|
|
9
|
-
variant?: "solid" | "outlined";
|
|
10
|
-
action?: "warning" | "success" | "info";
|
|
11
|
-
position?: "default" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
12
|
-
}, "id">) => void;
|
|
13
|
-
removeToast: (id: string) => void;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { Toaster as default, useToast };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toast/utils/Toaster.tsx","../../../src/components/Toast/utils/ToastStore.ts","../../../src/components/Toast/Toast.tsx","../../../src/utils/utils.ts"],"sourcesContent":["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","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"],"mappings":"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","names":["import_jsx_runtime"]}
|