UNPKG

analytica-frontend-lib

Version:

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

1 lines 8.49 kB
{"version":3,"sources":["../../src/components/Alert/Alert.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { CheckCircle, Info, WarningCircle, XCircle } from 'phosphor-react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\ntype AlertProps = {\n title?: string;\n description: string;\n variant?: 'solid' | 'outline';\n action?: 'default' | 'info' | 'success' | 'warning' | 'error';\n className?: string;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n default: 'bg-background-50 border-transparent',\n info: 'bg-info border-transparent',\n success: 'bg-success border-transparent',\n warning: 'bg-warning border-transparent',\n error: 'bg-error border-transparent',\n },\n outline: {\n default: 'bg-background border border-border-100',\n info: 'bg-background border border-border-100',\n success: 'bg-background border border-border-100',\n warning: 'bg-background border border-border-100',\n error: 'bg-background border border-border-100',\n },\n} as const;\n\nconst COLOR_CLASSES = {\n default: 'text-text-950',\n info: 'text-info-800',\n success: 'text-success-800',\n warning: 'text-warning-800',\n error: 'text-error-800',\n} as const;\n\nconst ICONS = {\n default: <CheckCircle size={18} />,\n info: <Info size={18} />,\n success: <CheckCircle size={18} />,\n warning: <WarningCircle size={18} />,\n error: <XCircle size={18} />,\n} as const;\n\nconst Alert = ({\n variant = 'solid',\n title,\n description,\n action = 'default',\n className,\n ...props\n}: AlertProps) => {\n const baseClasses =\n 'alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md';\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n const variantColor = COLOR_CLASSES[action];\n const variantIcon = ICONS[action];\n const hasHeading = Boolean(title);\n\n return (\n <div className={cn(baseClasses, variantClasses, className)} {...props}>\n <span className={cn('mt-0.5', variantColor)}>{variantIcon}</span>\n <div>\n {hasHeading && (\n <Text\n size=\"md\"\n weight=\"medium\"\n color={variantColor}\n className=\"mb-0.5\"\n >\n {title}\n </Text>\n )}\n <Text\n size={hasHeading ? 'sm' : 'md'}\n weight=\"normal\"\n color={!hasHeading ? variantColor : 'text-text-700'}\n >\n {description}\n </Text>\n </div>\n </div>\n );\n};\n\nexport default Alert;\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"]}