analytica-frontend-lib 1.0.40 → 1.0.41

package/dist/ProgressBar/index.js

@@ -83,7 +83,6 @@ var SIZE_CLASSES = {
     // 4px height (h-1 = 4px in Tailwind)
     bar: "h-1",
     // 4px height for the fill bar
-    labelSize: "xs",
     spacing: "gap-2",
     // 8px gap between label and progress bar
     layout: "flex-col",
@@ -96,8 +95,6 @@ var SIZE_CLASSES = {
     // 8px height (h-2 = 8px in Tailwind)
     bar: "h-2",
     // 8px height for the fill bar
-    labelSize: "xs",
-    // 12px font size (xs in Tailwind)
     spacing: "gap-2",
     // 8px gap between progress bar and label
     layout: "flex-row items-center",
@@ -139,25 +136,25 @@ var ProgressBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
       children: [
         size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Text_default,
             {
               as: "div",
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-950 ${labelClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
               children: label
             }
           ),
           showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             Text_default,
             {
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-700 text-center ${percentageClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
               children: [
                 Math.round(percentage),
                 "%"
@@ -192,9 +189,9 @@ var ProgressBar = ({
         size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           Text_default,
           {
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
             children: [
               Math.round(percentage),
               "%"
@@ -205,9 +202,9 @@ var ProgressBar = ({
           Text_default,
           {
             as: "div",
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 flex-none ${labelClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
             children: label
           }
         )

package/dist/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ProgressBar/ProgressBar.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n    bar: 'h-1', // 4px height for the fill bar\n    labelSize: 'xs' as const,\n    spacing: 'gap-2', // 8px gap between label and progress bar\n    layout: 'flex-col', // vertical layout for small\n    borderRadius: 'rounded-full', // 9999px border radius\n  },\n  medium: {\n    container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n    bar: 'h-2', // 8px height for the fill bar\n    labelSize: 'xs' as const, // 12px font size (xs in Tailwind)\n    spacing: 'gap-2', // 8px gap between progress bar and label\n    layout: 'flex-row items-center', // horizontal layout for medium\n    borderRadius: 'rounded-lg', // 8px border radius\n  },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n  blue: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n  },\n  green: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-success-200', // Green for performance (#84D3A2)\n  },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n  /** Progress value between 0 and 100 */\n  value: number;\n  /** Maximum value (defaults to 100) */\n  max?: number;\n  /** Size variant of the progress bar */\n  size?: ProgressBarSize;\n  /** Color variant of the progress bar */\n  variant?: ProgressBarVariant;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Show percentage text */\n  showPercentage?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Percentage text CSS classes */\n  percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\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 progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n  value,\n  max = 100,\n  size = 'medium',\n  variant = 'blue',\n  label,\n  showPercentage = false,\n  className = '',\n  labelClassName = '',\n  percentageClassName = '',\n}: ProgressBarProps) => {\n  // Ensure value is within bounds and handle NaN/Infinity\n  const safeValue = isNaN(value) ? 0 : value;\n  const clampedValue = Math.max(0, Math.min(safeValue, max));\n  const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n  // Get size and variant classes\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  return (\n    <div\n      className={`flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`}\n    >\n      {/* For small size: vertical layout with label/percentage on top */}\n      {size === 'small' && (label || showPercentage) && (\n        <div className=\"flex flex-row items-center justify-between w-full\">\n          {/* Label */}\n          {label && (\n            <Text\n              as=\"div\"\n              size={sizeClasses.labelSize}\n              weight=\"medium\"\n              className={`text-text-950 ${labelClassName}`}\n            >\n              {label}\n            </Text>\n          )}\n\n          {/* Percentage */}\n          {showPercentage && (\n            <Text\n              size={sizeClasses.labelSize}\n              weight=\"medium\"\n              className={`text-text-700 text-center ${percentageClassName}`}\n            >\n              {Math.round(percentage)}%\n            </Text>\n          )}\n        </div>\n      )}\n\n      {/* Progress bar container */}\n      <div\n        className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n      >\n        {/* Native progress element for accessibility */}\n        <progress\n          value={clampedValue}\n          max={max}\n          aria-label={typeof label === 'string' ? label : 'Progress'}\n          className=\"absolute inset-0 w-full h-full opacity-0\"\n        />\n\n        {/* Progress bar fill */}\n        <div\n          className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n\n      {/* For medium size: horizontal layout with percentage on the right */}\n      {size === 'medium' && showPercentage && (\n        <Text\n          size={sizeClasses.labelSize}\n          weight=\"medium\"\n          className={`text-text-950 text-center flex-none w-[70px] ${percentageClassName}`}\n        >\n          {Math.round(percentage)}%\n        </Text>\n      )}\n\n      {/* For medium size: label below if provided */}\n      {size === 'medium' && label && !showPercentage && (\n        <Text\n          as=\"div\"\n          size={sizeClasses.labelSize}\n          weight=\"medium\"\n          className={`text-text-950 flex-none ${labelClassName}`}\n        >\n          {label}\n        </Text>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressBar;\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/ProgressBar/ProgressBar.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n    bar: 'h-1', // 4px height for the fill bar\n    spacing: 'gap-2', // 8px gap between label and progress bar\n    layout: 'flex-col', // vertical layout for small\n    borderRadius: 'rounded-full', // 9999px border radius\n  },\n  medium: {\n    container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n    bar: 'h-2', // 8px height for the fill bar\n    spacing: 'gap-2', // 8px gap between progress bar and label\n    layout: 'flex-row items-center', // horizontal layout for medium\n    borderRadius: 'rounded-lg', // 8px border radius\n  },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n  blue: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n  },\n  green: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-success-200', // Green for performance (#84D3A2)\n  },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n  /** Progress value between 0 and 100 */\n  value: number;\n  /** Maximum value (defaults to 100) */\n  max?: number;\n  /** Size variant of the progress bar */\n  size?: ProgressBarSize;\n  /** Color variant of the progress bar */\n  variant?: ProgressBarVariant;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Show percentage text */\n  showPercentage?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Percentage text CSS classes */\n  percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\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 progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n  value,\n  max = 100,\n  size = 'medium',\n  variant = 'blue',\n  label,\n  showPercentage = false,\n  className = '',\n  labelClassName = '',\n  percentageClassName = '',\n}: ProgressBarProps) => {\n  // Ensure value is within bounds and handle NaN/Infinity\n  const safeValue = isNaN(value) ? 0 : value;\n  const clampedValue = Math.max(0, Math.min(safeValue, max));\n  const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n  // Get size and variant classes\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  return (\n    <div\n      className={`flex ${sizeClasses.layout} ${size === 'medium' ? 'gap-2' : sizeClasses.spacing} ${className}`}\n    >\n      {/* For small size: vertical layout with label/percentage on top */}\n      {size === 'small' && (label || showPercentage) && (\n        <div className=\"flex flex-row items-center justify-between w-full\">\n          {/* Label */}\n          {label && (\n            <Text\n              as=\"div\"\n              size=\"xs\"\n              weight=\"medium\"\n              className={`text-text-950 leading-none tracking-normal text-center ${labelClassName}`}\n            >\n              {label}\n            </Text>\n          )}\n\n          {/* Percentage */}\n          {showPercentage && (\n            <Text\n              size=\"xs\"\n              weight=\"medium\"\n              className={`text-text-950 leading-none tracking-normal text-center ${percentageClassName}`}\n            >\n              {Math.round(percentage)}%\n            </Text>\n          )}\n        </div>\n      )}\n\n      {/* Progress bar container */}\n      <div\n        className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n      >\n        {/* Native progress element for accessibility */}\n        <progress\n          value={clampedValue}\n          max={max}\n          aria-label={typeof label === 'string' ? label : 'Progress'}\n          className=\"absolute inset-0 w-full h-full opacity-0\"\n        />\n\n        {/* Progress bar fill */}\n        <div\n          className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n\n      {/* For medium size: horizontal layout with percentage on the right */}\n      {size === 'medium' && showPercentage && (\n        <Text\n          size=\"xs\"\n          weight=\"medium\"\n          className={`text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`}\n        >\n          {Math.round(percentage)}%\n        </Text>\n      )}\n\n      {/* For medium size: label below if provided */}\n      {size === 'medium' && label && !showPercentage && (\n        <Text\n          as=\"div\"\n          size=\"xs\"\n          weight=\"medium\"\n          className={`text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`}\n        >\n          {label}\n        </Text>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressBar;\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/ProgressBar/index.mjs

@@ -57,7 +57,6 @@ var SIZE_CLASSES = {
     // 4px height (h-1 = 4px in Tailwind)
     bar: "h-1",
     // 4px height for the fill bar
-    labelSize: "xs",
     spacing: "gap-2",
     // 8px gap between label and progress bar
     layout: "flex-col",
@@ -70,8 +69,6 @@ var SIZE_CLASSES = {
     // 8px height (h-2 = 8px in Tailwind)
     bar: "h-2",
     // 8px height for the fill bar
-    labelSize: "xs",
-    // 12px font size (xs in Tailwind)
     spacing: "gap-2",
     // 8px gap between progress bar and label
     layout: "flex-row items-center",
@@ -113,25 +110,25 @@ var ProgressBar = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
       children: [
         size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between w-full", children: [
           label && /* @__PURE__ */ jsx2(
             Text_default,
             {
               as: "div",
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-950 ${labelClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
               children: label
             }
           ),
           showPercentage && /* @__PURE__ */ jsxs(
             Text_default,
             {
-              size: sizeClasses.labelSize,
+              size: "xs",
               weight: "medium",
-              className: `text-text-700 text-center ${percentageClassName}`,
+              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
               children: [
                 Math.round(percentage),
                 "%"
@@ -166,9 +163,9 @@ var ProgressBar = ({
         size === "medium" && showPercentage && /* @__PURE__ */ jsxs(
           Text_default,
           {
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
             children: [
               Math.round(percentage),
               "%"
@@ -179,9 +176,9 @@ var ProgressBar = ({
           Text_default,
           {
             as: "div",
-            size: sizeClasses.labelSize,
+            size: "xs",
             weight: "medium",
-            className: `text-text-950 flex-none ${labelClassName}`,
+            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
             children: label
           }
         )

package/dist/ProgressBar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text/Text.tsx","../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["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","import { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n    bar: 'h-1', // 4px height for the fill bar\n    labelSize: 'xs' as const,\n    spacing: 'gap-2', // 8px gap between label and progress bar\n    layout: 'flex-col', // vertical layout for small\n    borderRadius: 'rounded-full', // 9999px border radius\n  },\n  medium: {\n    container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n    bar: 'h-2', // 8px height for the fill bar\n    labelSize: 'xs' as const, // 12px font size (xs in Tailwind)\n    spacing: 'gap-2', // 8px gap between progress bar and label\n    layout: 'flex-row items-center', // horizontal layout for medium\n    borderRadius: 'rounded-lg', // 8px border radius\n  },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n  blue: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n  },\n  green: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-success-200', // Green for performance (#84D3A2)\n  },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n  /** Progress value between 0 and 100 */\n  value: number;\n  /** Maximum value (defaults to 100) */\n  max?: number;\n  /** Size variant of the progress bar */\n  size?: ProgressBarSize;\n  /** Color variant of the progress bar */\n  variant?: ProgressBarVariant;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Show percentage text */\n  showPercentage?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Percentage text CSS classes */\n  percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\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 progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n  value,\n  max = 100,\n  size = 'medium',\n  variant = 'blue',\n  label,\n  showPercentage = false,\n  className = '',\n  labelClassName = '',\n  percentageClassName = '',\n}: ProgressBarProps) => {\n  // Ensure value is within bounds and handle NaN/Infinity\n  const safeValue = isNaN(value) ? 0 : value;\n  const clampedValue = Math.max(0, Math.min(safeValue, max));\n  const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n  // Get size and variant classes\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  return (\n    <div\n      className={`flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`}\n    >\n      {/* For small size: vertical layout with label/percentage on top */}\n      {size === 'small' && (label || showPercentage) && (\n        <div className=\"flex flex-row items-center justify-between w-full\">\n          {/* Label */}\n          {label && (\n            <Text\n              as=\"div\"\n              size={sizeClasses.labelSize}\n              weight=\"medium\"\n              className={`text-text-950 ${labelClassName}`}\n            >\n              {label}\n            </Text>\n          )}\n\n          {/* Percentage */}\n          {showPercentage && (\n            <Text\n              size={sizeClasses.labelSize}\n              weight=\"medium\"\n              className={`text-text-700 text-center ${percentageClassName}`}\n            >\n              {Math.round(percentage)}%\n            </Text>\n          )}\n        </div>\n      )}\n\n      {/* Progress bar container */}\n      <div\n        className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n      >\n        {/* Native progress element for accessibility */}\n        <progress\n          value={clampedValue}\n          max={max}\n          aria-label={typeof label === 'string' ? label : 'Progress'}\n          className=\"absolute inset-0 w-full h-full opacity-0\"\n        />\n\n        {/* Progress bar fill */}\n        <div\n          className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n\n      {/* For medium size: horizontal layout with percentage on the right */}\n      {size === 'medium' && showPercentage && (\n        <Text\n          size={sizeClasses.labelSize}\n          weight=\"medium\"\n          className={`text-text-950 text-center flex-none w-[70px] ${percentageClassName}`}\n        >\n          {Math.round(percentage)}%\n        </Text>\n      )}\n\n      {/* For medium size: label below if provided */}\n      {size === 'medium' && label && !showPercentage && (\n        <Text\n          as=\"div\"\n          size={sizeClasses.labelSize}\n          weight=\"medium\"\n          className={`text-text-950 flex-none ${labelClassName}`}\n        >\n          {label}\n        </Text>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/components/Text/Text.tsx","../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["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","import { ReactNode } from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Progress bar size variants\n */\ntype ProgressBarSize = 'small' | 'medium';\n\n/**\n * Progress bar color variants\n */\ntype ProgressBarVariant = 'blue' | 'green';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    container: 'h-1', // 4px height (h-1 = 4px in Tailwind)\n    bar: 'h-1', // 4px height for the fill bar\n    spacing: 'gap-2', // 8px gap between label and progress bar\n    layout: 'flex-col', // vertical layout for small\n    borderRadius: 'rounded-full', // 9999px border radius\n  },\n  medium: {\n    container: 'h-2', // 8px height (h-2 = 8px in Tailwind)\n    bar: 'h-2', // 8px height for the fill bar\n    spacing: 'gap-2', // 8px gap between progress bar and label\n    layout: 'flex-row items-center', // horizontal layout for medium\n    borderRadius: 'rounded-lg', // 8px border radius\n  },\n} as const;\n\n/**\n * Color configurations using design system colors\n */\nconst VARIANT_CLASSES = {\n  blue: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-primary-700', // Blue for activity progress (#2271C4)\n  },\n  green: {\n    background: 'bg-background-300', // Background track color (#D5D4D4)\n    fill: 'bg-success-200', // Green for performance (#84D3A2)\n  },\n} as const;\n\n/**\n * ProgressBar component props interface\n */\nexport type ProgressBarProps = {\n  /** Progress value between 0 and 100 */\n  value: number;\n  /** Maximum value (defaults to 100) */\n  max?: number;\n  /** Size variant of the progress bar */\n  size?: ProgressBarSize;\n  /** Color variant of the progress bar */\n  variant?: ProgressBarVariant;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Show percentage text */\n  showPercentage?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Percentage text CSS classes */\n  percentageClassName?: string;\n};\n\n/**\n * ProgressBar component for Analytica Ensino platforms\n *\n * A progress bar component with size and color variants designed for tracking\n * activity progress (blue) and performance metrics (green).\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 progress bar\n * <ProgressBar value={65} />\n *\n * // Activity progress (blue)\n * <ProgressBar variant=\"blue\" value={45} label=\"Progress\" showPercentage />\n *\n * // Performance metrics (green)\n * <ProgressBar variant=\"green\" size=\"medium\" value={85} label=\"Performance\" />\n *\n * // Small size with custom max value\n * <ProgressBar size=\"small\" value={3} max={5} showPercentage />\n * ```\n */\nconst ProgressBar = ({\n  value,\n  max = 100,\n  size = 'medium',\n  variant = 'blue',\n  label,\n  showPercentage = false,\n  className = '',\n  labelClassName = '',\n  percentageClassName = '',\n}: ProgressBarProps) => {\n  // Ensure value is within bounds and handle NaN/Infinity\n  const safeValue = isNaN(value) ? 0 : value;\n  const clampedValue = Math.max(0, Math.min(safeValue, max));\n  const percentage = max === 0 ? 0 : (clampedValue / max) * 100;\n\n  // Get size and variant classes\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  return (\n    <div\n      className={`flex ${sizeClasses.layout} ${size === 'medium' ? 'gap-2' : sizeClasses.spacing} ${className}`}\n    >\n      {/* For small size: vertical layout with label/percentage on top */}\n      {size === 'small' && (label || showPercentage) && (\n        <div className=\"flex flex-row items-center justify-between w-full\">\n          {/* Label */}\n          {label && (\n            <Text\n              as=\"div\"\n              size=\"xs\"\n              weight=\"medium\"\n              className={`text-text-950 leading-none tracking-normal text-center ${labelClassName}`}\n            >\n              {label}\n            </Text>\n          )}\n\n          {/* Percentage */}\n          {showPercentage && (\n            <Text\n              size=\"xs\"\n              weight=\"medium\"\n              className={`text-text-950 leading-none tracking-normal text-center ${percentageClassName}`}\n            >\n              {Math.round(percentage)}%\n            </Text>\n          )}\n        </div>\n      )}\n\n      {/* Progress bar container */}\n      <div\n        className={`${size === 'medium' ? 'flex-grow' : 'w-full'} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`}\n      >\n        {/* Native progress element for accessibility */}\n        <progress\n          value={clampedValue}\n          max={max}\n          aria-label={typeof label === 'string' ? label : 'Progress'}\n          className=\"absolute inset-0 w-full h-full opacity-0\"\n        />\n\n        {/* Progress bar fill */}\n        <div\n          className={`${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`}\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n\n      {/* For medium size: horizontal layout with percentage on the right */}\n      {size === 'medium' && showPercentage && (\n        <Text\n          size=\"xs\"\n          weight=\"medium\"\n          className={`text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`}\n        >\n          {Math.round(percentage)}%\n        </Text>\n      )}\n\n      {/* For medium size: label below if provided */}\n      {size === 'medium' && label && !showPercentage && (\n        <Text\n          as=\"div\"\n          size=\"xs\"\n          weight=\"medium\"\n          className={`text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`}\n        >\n          {label}\n        </Text>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"mappings":"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","names":["jsx"]}

package/dist/Radio/index.js

@@ -81,48 +81,34 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var SIZE_CLASSES = {
   small: {
     radio: "w-5 h-5",
-    // 20px x 20px
     textSize: "sm",
     spacing: "gap-1.5",
-    // 6px
     borderWidth: "border-2",
-    dotSize: "w-1.5 h-1.5",
-    // 6px inner dot
+    dotSize: "w-2 h-2",
     labelHeight: "h-5"
   },
   medium: {
     radio: "w-6 h-6",
-    // 24px x 24px
     textSize: "md",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    dotSize: "w-2 h-2",
-    // 8px inner dot
+    dotSize: "w-2.5 h-2.5",
     labelHeight: "h-6"
   },
   large: {
     radio: "w-7 h-7",
-    // 28px x 28px
     textSize: "lg",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-2.5 h-2.5",
-    // 10px inner dot
+    dotSize: "w-3 h-3",
     labelHeight: "h-7"
   },
   extraLarge: {
     radio: "w-8 h-8",
-    // 32px x 32px (larger than large)
     textSize: "xl",
     spacing: "gap-3",
-    // 12px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-3 h-3",
-    // 12px inner dot
+    dotSize: "w-3.5 h-3.5",
     labelHeight: "h-8"
   }
 };
@@ -134,39 +120,27 @@ var STATE_CLASSES = {
   },
   hovered: {
     unchecked: "border-border-500 bg-background",
-    // #8C8D8D hover state for unchecked
     checked: "border-info-700 bg-background"
-    // Adjust checked border for hover
   },
   focused: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   invalid: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   disabled: {
     unchecked: "border-border-400 bg-background cursor-not-allowed",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background cursor-not-allowed"
-    // #124393 for checked radio
   }
 };
 var DOT_CLASSES = {
   default: "bg-primary-950",
   hovered: "bg-info-700",
-  // #1C61B2 hover state for checked dot
   focused: "bg-primary-950",
-  // #124393 for focused checked dot
   invalid: "bg-primary-950",
-  // #124393 for invalid checked dot
   disabled: "bg-primary-950"
-  // #124393 for disabled checked dot
 };
 var Radio = (0, import_react.forwardRef)(
   ({
@@ -252,7 +226,7 @@ var Radio = (0, import_react.forwardRef)(
             label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   Text_default,
                   {
@@ -260,7 +234,7 @@ var Radio = (0, import_react.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
                     color: getTextColor(),
                     children: label
                   }
@@ -275,7 +249,7 @@ var Radio = (0, import_react.forwardRef)(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-error-600",
           children: errorMessage
         }
@@ -285,7 +259,7 @@ var Radio = (0, import_react.forwardRef)(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-text-500",
           children: helperText
         }

package/dist/Radio/index.js.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', // 20px x 20px\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5', // 6px\n    borderWidth: 'border-2',\n    dotSize: 'w-1.5 h-1.5', // 6px inner dot\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6', // 24px x 24px\n    textSize: 'md' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2',\n    dotSize: 'w-2 h-2', // 8px inner dot\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7', // 28px x 28px\n    textSize: 'lg' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-2.5 h-2.5', // 10px inner dot\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8', // 32px x 32px (larger than large)\n    textSize: 'xl' as const,\n    spacing: 'gap-3', // 12px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-3 h-3', // 12px inner dot\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', // #8C8D8D hover state for unchecked\n    checked: 'border-info-700 bg-background', // Adjust checked border for hover\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background cursor-not-allowed', // #124393 for checked radio\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', // #1C61B2 hover state for checked dot\n  focused: 'bg-primary-950', // #124393 for focused checked dot\n  invalid: 'bg-primary-950', // #124393 for invalid checked dot\n  disabled: 'bg-primary-950', // #124393 for disabled checked dot\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'; // Consistent border for all focused radios inside wrapper\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' // #5399EC for focused\n        : 'border-indicator-error'; // #B91C1C for invalid\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'; // #262627 for disabled checked, #737373 for disabled unchecked\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900'; // #262627 for focused (both checked and unchecked)\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600'; // #262627 for checked, #737373 for unchecked\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` // Wrapper apenas para focused/invalid\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}`}\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 ${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\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\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":["import_jsx_runtime"]}
+{"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":["import_jsx_runtime"]}

package/dist/Radio/index.mjs

@@ -61,48 +61,34 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   small: {
     radio: "w-5 h-5",
-    // 20px x 20px
     textSize: "sm",
     spacing: "gap-1.5",
-    // 6px
     borderWidth: "border-2",
-    dotSize: "w-1.5 h-1.5",
-    // 6px inner dot
+    dotSize: "w-2 h-2",
     labelHeight: "h-5"
   },
   medium: {
     radio: "w-6 h-6",
-    // 24px x 24px
     textSize: "md",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    dotSize: "w-2 h-2",
-    // 8px inner dot
+    dotSize: "w-2.5 h-2.5",
     labelHeight: "h-6"
   },
   large: {
     radio: "w-7 h-7",
-    // 28px x 28px
     textSize: "lg",
     spacing: "gap-2",
-    // 8px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-2.5 h-2.5",
-    // 10px inner dot
+    dotSize: "w-3 h-3",
     labelHeight: "h-7"
   },
   extraLarge: {
     radio: "w-8 h-8",
-    // 32px x 32px (larger than large)
     textSize: "xl",
     spacing: "gap-3",
-    // 12px
     borderWidth: "border-2",
-    // 2px border (consistent with others)
-    dotSize: "w-3 h-3",
-    // 12px inner dot
+    dotSize: "w-3.5 h-3.5",
     labelHeight: "h-8"
   }
 };
@@ -114,39 +100,27 @@ var STATE_CLASSES = {
   },
   hovered: {
     unchecked: "border-border-500 bg-background",
-    // #8C8D8D hover state for unchecked
     checked: "border-info-700 bg-background"
-    // Adjust checked border for hover
   },
   focused: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   invalid: {
     unchecked: "border-border-400 bg-background",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background"
-    // #124393 for checked radio
   },
   disabled: {
     unchecked: "border-border-400 bg-background cursor-not-allowed",
-    // #A5A3A3 for unchecked radio
     checked: "border-primary-950 bg-background cursor-not-allowed"
-    // #124393 for checked radio
   }
 };
 var DOT_CLASSES = {
   default: "bg-primary-950",
   hovered: "bg-info-700",
-  // #1C61B2 hover state for checked dot
   focused: "bg-primary-950",
-  // #124393 for focused checked dot
   invalid: "bg-primary-950",
-  // #124393 for invalid checked dot
   disabled: "bg-primary-950"
-  // #124393 for disabled checked dot
 };
 var Radio = forwardRef(
   ({
@@ -232,7 +206,7 @@ var Radio = forwardRef(
             label && /* @__PURE__ */ jsx2(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
                 children: /* @__PURE__ */ jsx2(
                   Text_default,
                   {
@@ -240,7 +214,7 @@ var Radio = forwardRef(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
                     color: getTextColor(),
                     children: label
                   }
@@ -255,7 +229,7 @@ var Radio = forwardRef(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-error-600",
           children: errorMessage
         }
@@ -265,7 +239,7 @@ var Radio = forwardRef(
         {
           size: "sm",
           weight: "normal",
-          className: "mt-1.5",
+          className: "mt-1.5 truncate",
           color: "text-text-500",
           children: helperText
         }