analytica-frontend-lib 1.0.43 → 1.0.45

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    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"]}
+{"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 * Progress bar layout variants\n */\ntype ProgressBarLayout = 'default' | 'stacked' | 'compact';\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 * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for variant classes\n */\ntype VariantClassType = (typeof VARIANT_CLASSES)[keyof typeof VARIANT_CLASSES];\n\n/**\n * Common props shared across all layout components\n */\ninterface BaseLayoutProps {\n  className: string;\n  label: ReactNode;\n  showPercentage: boolean;\n  showHitCount: boolean;\n  labelClassName: string;\n  percentageClassName: string;\n  clampedValue: number;\n  max: number;\n  percentage: number;\n  variantClasses: VariantClassType;\n}\n\n/**\n * Dimensions configuration for layouts\n */\ninterface LayoutDimensions {\n  width: string;\n  height: string;\n}\n\n/**\n * Props for StackedLayout component\n */\ninterface StackedLayoutProps extends BaseLayoutProps {\n  dimensions: LayoutDimensions;\n}\n\n/**\n * Props for CompactLayout component\n */\ninterface CompactLayoutProps extends BaseLayoutProps {\n  dimensions: LayoutDimensions;\n}\n\n/**\n * Props for DefaultLayout component\n */\ninterface DefaultLayoutProps {\n  className: string;\n  size: ProgressBarSize;\n  sizeClasses: SizeClassType;\n  variantClasses: VariantClassType;\n  label: ReactNode;\n  showPercentage: boolean;\n  labelClassName: string;\n  percentageClassName: string;\n  clampedValue: number;\n  max: number;\n  percentage: number;\n}\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  /** Layout variant of the progress bar */\n  layout?: ProgressBarLayout;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Show percentage text */\n  showPercentage?: boolean;\n  /**\n   * Show hit count (e.g., \"28 de 30\") instead of percentage\n   *\n   * PRIORITY: When both showHitCount and showPercentage are true,\n   * showHitCount takes precedence (stacked and compact layouts only).\n   * Default layout does not support showHitCount.\n   */\n  showHitCount?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Percentage text CSS classes */\n  percentageClassName?: string;\n  /** Custom width for stacked layout (defaults to w-[380px]) */\n  stackedWidth?: string;\n  /** Custom height for stacked layout (defaults to h-[35px]) */\n  stackedHeight?: string;\n  /** Custom width for compact layout (defaults to w-[131px]) */\n  compactWidth?: string;\n  /** Custom height for compact layout (defaults to h-[24px]) */\n  compactHeight?: string;\n};\n\n/**\n * Helper function to calculate safe progress values\n */\nconst calculateProgressValues = (value: number, max: number) => {\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  return { clampedValue, percentage };\n};\n\n/**\n * Helper function to determine if header content should be shown\n */\nconst shouldShowHeader = (\n  label: ReactNode,\n  showPercentage: boolean,\n  showHitCount: boolean\n): boolean => {\n  return !!(label || showPercentage || showHitCount);\n};\n\n/**\n * Centralized function to determine display priority and content\n *\n * PRIORITY ORDER (consistent across all layouts):\n * 1. showHitCount (highest priority) - displays \"X de Y\" format\n * 2. showPercentage - displays \"X%\" format\n * 3. label (lowest priority) - displays custom label\n *\n * @param showHitCount - Whether to show hit count format\n * @param showPercentage - Whether to show percentage format\n * @param label - Custom label to display\n * @param clampedValue - Current progress value\n * @param max - Maximum progress value\n * @param percentage - Calculated percentage value\n * @returns Object with content type and formatted content\n */\nconst getDisplayPriority = (\n  showHitCount: boolean,\n  showPercentage: boolean,\n  label: ReactNode,\n  clampedValue: number,\n  max: number,\n  percentage: number\n) => {\n  if (showHitCount) {\n    return {\n      type: 'hitCount' as const,\n      content: `${Math.round(clampedValue)} de ${max}`,\n      hasMetrics: true,\n    };\n  }\n\n  if (showPercentage) {\n    return {\n      type: 'percentage' as const,\n      content: `${Math.round(percentage)}%`,\n      hasMetrics: true,\n    };\n  }\n\n  return {\n    type: 'label' as const,\n    content: label,\n    hasMetrics: false,\n  };\n};\n\n/**\n * Parameters for compact layout configuration\n */\ninterface CompactLayoutConfigParams {\n  showPercentage: boolean;\n  showHitCount: boolean;\n  percentage: number;\n  clampedValue: number;\n  max: number;\n  label: ReactNode;\n  percentageClassName: string;\n  labelClassName: string;\n}\n\n/**\n * Helper function to get compact layout configuration\n *\n * PRIORITY ORDER (consistent across all layouts):\n * 1. showHitCount (highest priority) - displays \"X de Y\" format\n * 2. showPercentage - displays \"X%\" format\n * 3. label (lowest priority) - displays custom label\n *\n * When both showHitCount and showPercentage are true, showHitCount takes precedence.\n */\nconst getCompactLayoutConfig = ({\n  showPercentage,\n  showHitCount,\n  percentage,\n  clampedValue,\n  max,\n  label,\n  percentageClassName,\n  labelClassName,\n}: CompactLayoutConfigParams) => {\n  // Use centralized priority logic for consistency\n  const displayPriority = getDisplayPriority(\n    showHitCount,\n    showPercentage,\n    label,\n    clampedValue,\n    max,\n    percentage\n  );\n\n  return {\n    color: displayPriority.hasMetrics ? 'text-primary-600' : 'text-primary-700',\n    className: displayPriority.hasMetrics\n      ? percentageClassName\n      : labelClassName,\n    content: displayPriority.content,\n  };\n};\n\n/**\n * Helper function to get default layout display configuration\n *\n * PRIORITY ORDER for default layout (showHitCount is not supported):\n * 1. showPercentage (when enabled, takes precedence over label)\n * 2. label (shown only when showPercentage is false)\n *\n * Note: Default layout does not support showHitCount feature.\n */\nconst getDefaultLayoutDisplayConfig = (\n  size: ProgressBarSize,\n  label: ReactNode,\n  showPercentage: boolean\n) => ({\n  showHeader: size === 'small' && !!(label || showPercentage),\n  showPercentage: size === 'medium' && showPercentage,\n  showLabel: size === 'medium' && !!label && !showPercentage, // Only show label when percentage is not shown\n});\n\n/**\n * Helper function to render hit count or percentage display for stacked layout\n *\n * PRIORITY ORDER (consistent across all layouts):\n * 1. showHitCount (highest priority) - displays \"X de Y\" format\n * 2. showPercentage - displays \"X%\" format\n *\n * When both showHitCount and showPercentage are true, showHitCount takes precedence.\n */\nconst renderStackedHitCountDisplay = (\n  showHitCount: boolean,\n  showPercentage: boolean,\n  clampedValue: number,\n  max: number,\n  percentage: number,\n  percentageClassName: string\n): ReactNode => {\n  if (!showHitCount && !showPercentage) return null;\n\n  // Use centralized priority logic for consistency\n  const displayPriority = getDisplayPriority(\n    showHitCount,\n    showPercentage,\n    null, // label is not relevant for stacked layout metrics display\n    clampedValue,\n    max,\n    percentage\n  );\n\n  return (\n    <div\n      className={`text-xs font-medium leading-[14px] text-right ${percentageClassName}`}\n    >\n      {displayPriority.type === 'hitCount' ? (\n        <>\n          <span className=\"text-success-200\">{Math.round(clampedValue)}</span>\n          <span className=\"text-text-600\"> de {max}</span>\n        </>\n      ) : (\n        <Text size=\"xs\" weight=\"medium\" className=\"text-success-200\">\n          {Math.round(percentage)}%\n        </Text>\n      )}\n    </div>\n  );\n};\n\n/**\n * Base progress bar component with common rendering logic\n */\nconst ProgressBarBase = ({\n  clampedValue,\n  max,\n  percentage,\n  label,\n  variantClasses,\n  containerClassName,\n  fillClassName,\n}: {\n  clampedValue: number;\n  max: number;\n  percentage: number;\n  label: ReactNode;\n  variantClasses: VariantClassType;\n  containerClassName: string;\n  fillClassName: string;\n}) => (\n  <div\n    className={`${containerClassName} ${variantClasses.background} overflow-hidden relative`}\n  >\n    <progress\n      value={clampedValue}\n      max={max}\n      aria-label={\n        typeof label === 'string'\n          ? `${label}: ${Math.round(percentage)}% complete`\n          : `Progress: ${Math.round(percentage)}% of ${max}`\n      }\n      className=\"absolute inset-0 w-full h-full opacity-0\"\n    />\n    <div\n      className={`${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`}\n      style={{ width: `${percentage}%` }}\n    />\n  </div>\n);\n\n/**\n * Stacked layout component\n */\nconst StackedLayout = ({\n  className,\n  label,\n  showPercentage,\n  showHitCount,\n  labelClassName,\n  percentageClassName,\n  clampedValue,\n  max,\n  percentage,\n  variantClasses,\n  dimensions,\n}: StackedLayoutProps) => (\n  <div\n    className={`flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`}\n  >\n    {shouldShowHeader(label, showPercentage, showHitCount) && (\n      <div className=\"flex flex-row justify-between items-center w-full h-[19px]\">\n        {label && (\n          <Text\n            as=\"div\"\n            size=\"md\"\n            weight=\"medium\"\n            className={`text-text-600 leading-[19px] ${labelClassName}`}\n          >\n            {label}\n          </Text>\n        )}\n\n        {renderStackedHitCountDisplay(\n          showHitCount,\n          showPercentage,\n          clampedValue,\n          max,\n          percentage,\n          percentageClassName\n        )}\n      </div>\n    )}\n\n    <ProgressBarBase\n      clampedValue={clampedValue}\n      max={max}\n      percentage={percentage}\n      label={label}\n      variantClasses={variantClasses}\n      containerClassName=\"w-full h-2 rounded-lg\"\n      fillClassName=\"h-2 rounded-lg shadow-hard-shadow-3\"\n    />\n  </div>\n);\n\n/**\n * Compact layout component\n */\nconst CompactLayout = ({\n  className,\n  label,\n  showPercentage,\n  showHitCount,\n  labelClassName,\n  percentageClassName,\n  clampedValue,\n  max,\n  percentage,\n  variantClasses,\n  dimensions,\n}: CompactLayoutProps) => {\n  const {\n    color,\n    className: compactClassName,\n    content,\n  } = getCompactLayoutConfig({\n    showPercentage,\n    showHitCount,\n    percentage,\n    clampedValue,\n    max,\n    label,\n    percentageClassName,\n    labelClassName,\n  });\n\n  return (\n    <div\n      className={`flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`}\n    >\n      {shouldShowHeader(label, showPercentage, showHitCount) && (\n        <Text\n          as=\"div\"\n          size=\"sm\"\n          weight=\"medium\"\n          color={color}\n          className={`leading-4 w-full ${compactClassName}`}\n        >\n          {content}\n        </Text>\n      )}\n\n      <ProgressBarBase\n        clampedValue={clampedValue}\n        max={max}\n        percentage={percentage}\n        label={label}\n        variantClasses={variantClasses}\n        containerClassName=\"w-full h-1 rounded-full\"\n        fillClassName=\"h-1 rounded-full\"\n      />\n    </div>\n  );\n};\n\n/**\n * Default layout component\n */\nconst DefaultLayout = ({\n  className,\n  size,\n  sizeClasses,\n  variantClasses,\n  label,\n  showPercentage,\n  labelClassName,\n  percentageClassName,\n  clampedValue,\n  max,\n  percentage,\n}: DefaultLayoutProps) => {\n  const gapClass = size === 'medium' ? 'gap-2' : sizeClasses.spacing;\n  const progressBarClass = size === 'medium' ? 'flex-grow' : 'w-full';\n  const displayConfig = getDefaultLayoutDisplayConfig(\n    size,\n    label,\n    showPercentage\n  );\n\n  return (\n    <div className={`flex ${sizeClasses.layout} ${gapClass} ${className}`}>\n      {displayConfig.showHeader && (\n        <div className=\"flex flex-row items-center justify-between w-full\">\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          {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      <ProgressBarBase\n        clampedValue={clampedValue}\n        max={max}\n        percentage={percentage}\n        label={label}\n        variantClasses={variantClasses}\n        containerClassName={`${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`}\n        fillClassName={`${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`}\n      />\n\n      {displayConfig.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      {displayConfig.showLabel && (\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\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 * CONTENT DISPLAY PRIORITY (Consistent across all layouts):\n * 1. showHitCount (highest) - \"X de Y\" format (stacked/compact only)\n * 2. showPercentage - \"X%\" format\n * 3. label (lowest) - Custom label text\n *\n * When multiple display options are enabled, higher priority options take precedence.\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 * // Stacked layout with fixed width and hit count\n * <ProgressBar layout=\"stacked\" variant=\"green\" value={28} max={30} label=\"Fáceis\" showHitCount />\n *\n * // Compact layout for small cards\n * <ProgressBar layout=\"compact\" variant=\"blue\" value={70} label=\"Questão 08\" />\n * ```\n */\nconst ProgressBar = ({\n  value,\n  max = 100,\n  size = 'medium',\n  variant = 'blue',\n  layout = 'default',\n  label,\n  showPercentage = false,\n  showHitCount = false,\n  className = '',\n  labelClassName = '',\n  percentageClassName = '',\n  stackedWidth,\n  stackedHeight,\n  compactWidth,\n  compactHeight,\n}: ProgressBarProps) => {\n  const { clampedValue, percentage } = calculateProgressValues(value, max);\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  if (layout === 'stacked') {\n    return (\n      <StackedLayout\n        className={className}\n        label={label}\n        showPercentage={showPercentage}\n        showHitCount={showHitCount}\n        labelClassName={labelClassName}\n        percentageClassName={percentageClassName}\n        clampedValue={clampedValue}\n        max={max}\n        percentage={percentage}\n        variantClasses={variantClasses}\n        dimensions={{\n          width: stackedWidth ?? 'w-[380px]',\n          height: stackedHeight ?? 'h-[35px]',\n        }}\n      />\n    );\n  }\n\n  if (layout === 'compact') {\n    return (\n      <CompactLayout\n        className={className}\n        label={label}\n        showPercentage={showPercentage}\n        showHitCount={showHitCount}\n        labelClassName={labelClassName}\n        percentageClassName={percentageClassName}\n        clampedValue={clampedValue}\n        max={max}\n        percentage={percentage}\n        variantClasses={variantClasses}\n        dimensions={{\n          width: compactWidth ?? 'w-[131px]',\n          height: compactHeight ?? 'h-[24px]',\n        }}\n      />\n    );\n  }\n\n  return (\n    <DefaultLayout\n      className={className}\n      size={size}\n      sizeClasses={sizeClasses}\n      variantClasses={variantClasses}\n      label={label}\n      showPercentage={showPercentage}\n      labelClassName={labelClassName}\n      percentageClassName={percentageClassName}\n      clampedValue={clampedValue}\n      max={max}\n      percentage={percentage}\n    />\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

@@ -50,7 +50,7 @@ var Text = ({
 var Text_default = Text;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   small: {
     container: "h-1",
@@ -91,101 +91,397 @@ var VARIANT_CLASSES = {
     // Green for performance (#84D3A2)
   }
 };
-var ProgressBar = ({
-  value,
-  max = 100,
-  size = "medium",
-  variant = "blue",
-  label,
-  showPercentage = false,
-  className = "",
-  labelClassName = "",
-  percentageClassName = ""
-}) => {
+var calculateProgressValues = (value, max) => {
   const safeValue = isNaN(value) ? 0 : value;
   const clampedValue = Math.max(0, Math.min(safeValue, max));
   const percentage = max === 0 ? 0 : clampedValue / max * 100;
-  const sizeClasses = SIZE_CLASSES[size];
-  const variantClasses = VARIANT_CLASSES[variant];
-  return /* @__PURE__ */ jsxs(
+  return { clampedValue, percentage };
+};
+var shouldShowHeader = (label, showPercentage, showHitCount) => {
+  return !!(label || showPercentage || showHitCount);
+};
+var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
+  if (showHitCount) {
+    return {
+      type: "hitCount",
+      content: `${Math.round(clampedValue)} de ${max}`,
+      hasMetrics: true
+    };
+  }
+  if (showPercentage) {
+    return {
+      type: "percentage",
+      content: `${Math.round(percentage)}%`,
+      hasMetrics: true
+    };
+  }
+  return {
+    type: "label",
+    content: label,
+    hasMetrics: false
+  };
+};
+var getCompactLayoutConfig = ({
+  showPercentage,
+  showHitCount,
+  percentage,
+  clampedValue,
+  max,
+  label,
+  percentageClassName,
+  labelClassName
+}) => {
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    label,
+    clampedValue,
+    max,
+    percentage
+  );
+  return {
+    color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
+    className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
+    content: displayPriority.content
+  };
+};
+var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
+  showHeader: size === "small" && !!(label || showPercentage),
+  showPercentage: size === "medium" && showPercentage,
+  showLabel: size === "medium" && !!label && !showPercentage
+  // Only show label when percentage is not shown
+});
+var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
+  if (!showHitCount && !showPercentage) return null;
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    null,
+    // label is not relevant for stacked layout metrics display
+    clampedValue,
+    max,
+    percentage
+  );
+  return /* @__PURE__ */ jsx2(
     "div",
     {
-      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: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
-              children: label
-            }
-          ),
-          showPercentage && /* @__PURE__ */ jsxs(
-            Text_default,
-            {
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
-              children: [
-                Math.round(percentage),
-                "%"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
-            children: [
-              /* @__PURE__ */ jsx2(
-                "progress",
-                {
-                  value: clampedValue,
-                  max,
-                  "aria-label": typeof label === "string" ? label : "Progress",
-                  className: "absolute inset-0 w-full h-full opacity-0"
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
-                  style: { width: `${percentage}%` }
-                }
-              )
-            ]
-          }
-        ),
-        size === "medium" && showPercentage && /* @__PURE__ */ jsxs(
+      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-success-200", children: Math.round(clampedValue) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-text-600", children: [
+          " de ",
+          max
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    }
+  );
+};
+var ProgressBarBase = ({
+  clampedValue,
+  max,
+  percentage,
+  label,
+  variantClasses,
+  containerClassName,
+  fillClassName
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    children: [
+      /* @__PURE__ */ jsx2(
+        "progress",
+        {
+          value: clampedValue,
+          max,
+          "aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
+          className: "absolute inset-0 w-full h-full opacity-0"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: `${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`,
+          style: { width: `${percentage}%` }
+        }
+      )
+    ]
+  }
+);
+var StackedLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    children: [
+      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
+        label && /* @__PURE__ */ jsx2(
           Text_default,
           {
-            size: "xs",
+            as: "div",
+            size: "md",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
-            children: [
-              Math.round(percentage),
-              "%"
-            ]
+            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            children: label
           }
         ),
-        size === "medium" && label && !showPercentage && /* @__PURE__ */ jsx2(
+        renderStackedHitCountDisplay(
+          showHitCount,
+          showPercentage,
+          clampedValue,
+          max,
+          percentage,
+          percentageClassName
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        ProgressBarBase,
+        {
+          clampedValue,
+          max,
+          percentage,
+          label,
+          variantClasses,
+          containerClassName: "w-full h-2 rounded-lg",
+          fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
+        }
+      )
+    ]
+  }
+);
+var CompactLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => {
+  const {
+    color,
+    className: compactClassName,
+    content
+  } = getCompactLayoutConfig({
+    showPercentage,
+    showHitCount,
+    percentage,
+    clampedValue,
+    max,
+    label,
+    percentageClassName,
+    labelClassName
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      children: [
+        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsx2(
           Text_default,
           {
             as: "div",
-            size: "xs",
+            size: "sm",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
-            children: label
+            color,
+            className: `leading-4 w-full ${compactClassName}`,
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ProgressBarBase,
+          {
+            clampedValue,
+            max,
+            percentage,
+            label,
+            variantClasses,
+            containerClassName: "w-full h-1 rounded-full",
+            fillClassName: "h-1 rounded-full"
           }
         )
       ]
     }
   );
 };
+var DefaultLayout = ({
+  className,
+  size,
+  sizeClasses,
+  variantClasses,
+  label,
+  showPercentage,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage
+}) => {
+  const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
+  const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
+  const displayConfig = getDefaultLayoutDisplayConfig(
+    size,
+    label,
+    showPercentage
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+    displayConfig.showHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between w-full", children: [
+      label && /* @__PURE__ */ jsx2(
+        Text_default,
+        {
+          as: "div",
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          children: label
+        }
+      ),
+      showPercentage && /* @__PURE__ */ jsxs(
+        Text_default,
+        {
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          children: [
+            Math.round(percentage),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(
+      ProgressBarBase,
+      {
+        clampedValue,
+        max,
+        percentage,
+        label,
+        variantClasses,
+        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
+        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+      }
+    ),
+    displayConfig.showPercentage && /* @__PURE__ */ jsxs(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
+        children: [
+          Math.round(percentage),
+          "%"
+        ]
+      }
+    ),
+    displayConfig.showLabel && /* @__PURE__ */ jsx2(
+      Text_default,
+      {
+        as: "div",
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
+        children: label
+      }
+    )
+  ] });
+};
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "medium",
+  variant = "blue",
+  layout = "default",
+  label,
+  showPercentage = false,
+  showHitCount = false,
+  className = "",
+  labelClassName = "",
+  percentageClassName = "",
+  stackedWidth,
+  stackedHeight,
+  compactWidth,
+  compactHeight
+}) => {
+  const { clampedValue, percentage } = calculateProgressValues(value, max);
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_CLASSES[variant];
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsx2(
+      StackedLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: stackedWidth ?? "w-[380px]",
+          height: stackedHeight ?? "h-[35px]"
+        }
+      }
+    );
+  }
+  if (layout === "compact") {
+    return /* @__PURE__ */ jsx2(
+      CompactLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: compactWidth ?? "w-[131px]",
+          height: compactHeight ?? "h-[24px]"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    DefaultLayout,
+    {
+      className,
+      size,
+      sizeClasses,
+      variantClasses,
+      label,
+      showPercentage,
+      labelClassName,
+      percentageClassName,
+      clampedValue,
+      max,
+      percentage
+    }
+  );
+};
 var ProgressBar_default = ProgressBar;
 export {
   ProgressBar_default as default