analytica-frontend-lib 1.0.51 → 1.0.53

package/dist/Radio/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2 h-2',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5`\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <label htmlFor={inputId} className={radioClasses}>\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </label>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${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"]}
+{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5',\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5',\n    borderWidth: 'border-2',\n    dotSize: 'w-2.5 h-2.5',\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6',\n    textSize: 'md' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3 h-3',\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7',\n    textSize: 'lg' as const,\n    spacing: 'gap-2',\n    borderWidth: 'border-2',\n    dotSize: 'w-3.5 h-3.5',\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8',\n    textSize: 'xl' as const,\n    spacing: 'gap-3',\n    borderWidth: 'border-2',\n    dotSize: 'w-4 h-4',\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background',\n    checked: 'border-info-700 bg-background',\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background',\n    checked: 'border-primary-950 bg-background',\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed',\n    checked: 'border-primary-950 bg-background cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700',\n  focused: 'bg-primary-950',\n  invalid: 'bg-primary-950',\n  disabled: 'bg-primary-950',\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2';\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info'\n        : 'border-indicator-error';\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600';\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900';\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600';\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5`\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <label htmlFor={inputId} className={radioClasses}>\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </label>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5 truncate\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${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"]}

package/dist/TextArea/index.js

@@ -24,6 +24,7 @@ __export(TextArea_exports, {
 });
 module.exports = __toCommonJS(TextArea_exports);
 var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
 
 // src/components/Text/Text.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -191,7 +192,11 @@ var TextArea = (0, import_react.forwardRef)(
           ...props
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.WarningCircle, { size: 16 }),
+        " ",
+        errorMessage
+      ] }),
       helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
     ] });
   }

package/dist/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../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 Text from '../Text/Text';\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 = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\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={`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          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\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 { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${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":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../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';\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 = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\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={`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 { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${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":["import_jsx_runtime"]}

package/dist/TextArea/index.mjs

@@ -4,6 +4,7 @@ import {
   useState,
   useId
 } from "react";
+import { WarningCircle } from "phosphor-react";
 
 // src/components/Text/Text.tsx
 import { jsx } from "react/jsx-runtime";
@@ -171,7 +172,11 @@ var TextArea = forwardRef(
           ...props
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      errorMessage && /* @__PURE__ */ jsxs("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
+        /* @__PURE__ */ jsx2(WarningCircle, { size: 16 }),
+        " ",
+        errorMessage
+      ] }),
       helperMessage && !errorMessage && /* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
     ] });
   }

package/dist/TextArea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../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 Text from '../Text/Text';\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 = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\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={`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          <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n            {errorMessage}\n          </Text>\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 { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":";AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;;;ACkHH;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,WAAW,IAAI,WAAW,IAAI,aAAa,IAAI,KAAK,IAAI,SAAS;AAAA,MAC9E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;ADuDT,SAGI,OAAAA,MAHJ;AAlKN,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,WAAW;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,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM,YAAY,WAAW;AAG7C,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,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,GAAG,qBAAqB,IAAI,YAAY,QAAQ,IAAI,aAAa,IAAI,IAAI,aAAa,KAAK,IAAI,aAAa,KAAK,IAAI,SAAS;AAEtJ,WACE,qBAAC,SAAI,WAAW,iBAEb;AAAA,eACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,SAAS;AAAA,UACT,MAAM,YAAY;AAAA,UAClB,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAW,UAAU,cAAc;AAAA,UAElC;AAAA;AAAA,MACH;AAAA,MAIF,gBAAAA;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,gBAAAA,KAAC,gBAAK,MAAK,MAAK,QAAO,UAAS,WAAU,yBACvC,wBACH;AAAA,MAID,iBAAiB,CAAC,gBACjB,gBAAAA,KAAC,gBAAK,MAAK,MAAK,QAAO,UAAS,WAAU,wBACvC,yBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":["jsx"]}
+{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../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';\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 = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\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={`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 { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\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={`${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"]}