analytica-frontend-lib 1.0.43 → 1.0.45

package/dist/ProgressBar/index.d.mts

@@ -9,6 +9,10 @@ type ProgressBarSize = 'small' | 'medium';
  * Progress bar color variants
  */
 type ProgressBarVariant = 'blue' | 'green';
+/**
+ * Progress bar layout variants
+ */
+type ProgressBarLayout = 'default' | 'stacked' | 'compact';
 /**
  * ProgressBar component props interface
  */
@@ -21,16 +25,34 @@ type ProgressBarProps = {
     size?: ProgressBarSize;
     /** Color variant of the progress bar */
     variant?: ProgressBarVariant;
+    /** Layout variant of the progress bar */
+    layout?: ProgressBarLayout;
     /** Optional label to display */
     label?: ReactNode;
     /** Show percentage text */
     showPercentage?: boolean;
+    /**
+     * Show hit count (e.g., "28 de 30") instead of percentage
+     *
+     * PRIORITY: When both showHitCount and showPercentage are true,
+     * showHitCount takes precedence (stacked and compact layouts only).
+     * Default layout does not support showHitCount.
+     */
+    showHitCount?: boolean;
     /** Additional CSS classes */
     className?: string;
     /** Label CSS classes */
     labelClassName?: string;
     /** Percentage text CSS classes */
     percentageClassName?: string;
+    /** Custom width for stacked layout (defaults to w-[380px]) */
+    stackedWidth?: string;
+    /** Custom height for stacked layout (defaults to h-[35px]) */
+    stackedHeight?: string;
+    /** Custom width for compact layout (defaults to w-[131px]) */
+    compactWidth?: string;
+    /** Custom height for compact layout (defaults to h-[24px]) */
+    compactHeight?: string;
 };
 /**
  * ProgressBar component for Analytica Ensino platforms
@@ -40,6 +62,13 @@ type ProgressBarProps = {
  * Uses the Analytica Ensino Design System colors from styles.css with automatic
  * light/dark mode support. Includes Text component integration for consistent typography.
  *
+ * CONTENT DISPLAY PRIORITY (Consistent across all layouts):
+ * 1. showHitCount (highest) - "X de Y" format (stacked/compact only)
+ * 2. showPercentage - "X%" format
+ * 3. label (lowest) - Custom label text
+ *
+ * When multiple display options are enabled, higher priority options take precedence.
+ *
  * @example
  * ```tsx
  * // Basic progress bar
@@ -53,8 +82,14 @@ type ProgressBarProps = {
  *
  * // Small size with custom max value
  * <ProgressBar size="small" value={3} max={5} showPercentage />
+ *
+ * // Stacked layout with fixed width and hit count
+ * <ProgressBar layout="stacked" variant="green" value={28} max={30} label="Fáceis" showHitCount />
+ *
+ * // Compact layout for small cards
+ * <ProgressBar layout="compact" variant="blue" value={70} label="Questão 08" />
  * ```
  */
-declare const ProgressBar: ({ value, max, size, variant, label, showPercentage, className, labelClassName, percentageClassName, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ value, max, size, variant, layout, label, showPercentage, showHitCount, className, labelClassName, percentageClassName, stackedWidth, stackedHeight, compactWidth, compactHeight, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
 
 export { type ProgressBarProps, ProgressBar as default };

package/dist/ProgressBar/index.d.ts

@@ -9,6 +9,10 @@ type ProgressBarSize = 'small' | 'medium';
  * Progress bar color variants
  */
 type ProgressBarVariant = 'blue' | 'green';
+/**
+ * Progress bar layout variants
+ */
+type ProgressBarLayout = 'default' | 'stacked' | 'compact';
 /**
  * ProgressBar component props interface
  */
@@ -21,16 +25,34 @@ type ProgressBarProps = {
     size?: ProgressBarSize;
     /** Color variant of the progress bar */
     variant?: ProgressBarVariant;
+    /** Layout variant of the progress bar */
+    layout?: ProgressBarLayout;
     /** Optional label to display */
     label?: ReactNode;
     /** Show percentage text */
     showPercentage?: boolean;
+    /**
+     * Show hit count (e.g., "28 de 30") instead of percentage
+     *
+     * PRIORITY: When both showHitCount and showPercentage are true,
+     * showHitCount takes precedence (stacked and compact layouts only).
+     * Default layout does not support showHitCount.
+     */
+    showHitCount?: boolean;
     /** Additional CSS classes */
     className?: string;
     /** Label CSS classes */
     labelClassName?: string;
     /** Percentage text CSS classes */
     percentageClassName?: string;
+    /** Custom width for stacked layout (defaults to w-[380px]) */
+    stackedWidth?: string;
+    /** Custom height for stacked layout (defaults to h-[35px]) */
+    stackedHeight?: string;
+    /** Custom width for compact layout (defaults to w-[131px]) */
+    compactWidth?: string;
+    /** Custom height for compact layout (defaults to h-[24px]) */
+    compactHeight?: string;
 };
 /**
  * ProgressBar component for Analytica Ensino platforms
@@ -40,6 +62,13 @@ type ProgressBarProps = {
  * Uses the Analytica Ensino Design System colors from styles.css with automatic
  * light/dark mode support. Includes Text component integration for consistent typography.
  *
+ * CONTENT DISPLAY PRIORITY (Consistent across all layouts):
+ * 1. showHitCount (highest) - "X de Y" format (stacked/compact only)
+ * 2. showPercentage - "X%" format
+ * 3. label (lowest) - Custom label text
+ *
+ * When multiple display options are enabled, higher priority options take precedence.
+ *
  * @example
  * ```tsx
  * // Basic progress bar
@@ -53,8 +82,14 @@ type ProgressBarProps = {
  *
  * // Small size with custom max value
  * <ProgressBar size="small" value={3} max={5} showPercentage />
+ *
+ * // Stacked layout with fixed width and hit count
+ * <ProgressBar layout="stacked" variant="green" value={28} max={30} label="Fáceis" showHitCount />
+ *
+ * // Compact layout for small cards
+ * <ProgressBar layout="compact" variant="blue" value={70} label="Questão 08" />
  * ```
  */
-declare const ProgressBar: ({ value, max, size, variant, label, showPercentage, className, labelClassName, percentageClassName, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ value, max, size, variant, layout, label, showPercentage, showHitCount, className, labelClassName, percentageClassName, stackedWidth, stackedHeight, compactWidth, compactHeight, }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
 
 export { type ProgressBarProps, ProgressBar as default };

package/dist/ProgressBar/index.js

@@ -117,100 +117,396 @@ 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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
-      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: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
-              children: label
-            }
-          ),
-          showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            Text_default,
-            {
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
-              children: [
-                Math.round(percentage),
-                "%"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "progress",
-                {
-                  value: clampedValue,
-                  max,
-                  "aria-label": typeof label === "string" ? label : "Progress",
-                  className: "absolute inset-0 w-full h-full opacity-0"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "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__ */ (0, import_jsx_runtime2.jsxs)(
+      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-text-600", children: [
+          " de ",
+          max
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)(
+  "div",
+  {
+    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "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__ */ (0, import_jsx_runtime2.jsx)(
+        "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__ */ (0, import_jsx_runtime2.jsxs)(
+  "div",
+  {
+    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    children: [
+      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           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__ */ (0, import_jsx_runtime2.jsx)(
+        renderStackedHitCountDisplay(
+          showHitCount,
+          showPercentage,
+          clampedValue,
+          max,
+          percentage,
+          percentageClassName
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      children: [
+        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           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__ */ (0, import_jsx_runtime2.jsx)(
+          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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+    displayConfig.showHeader && /* @__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: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          children: label
+        }
+      ),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        Text_default,
+        {
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          children: [
+            Math.round(percentage),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ProgressBarBase,
+      {
+        clampedValue,
+        max,
+        percentage,
+        label,
+        variantClasses,
+        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
+        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+      }
+    ),
+    displayConfig.showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
+      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__ */ (0, import_jsx_runtime2.jsx)(
+      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__ */ (0, import_jsx_runtime2.jsx)(
+      CompactLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: compactWidth ?? "w-[131px]",
+          height: compactHeight ?? "h-[24px]"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DefaultLayout,
+    {
+      className,
+      size,
+      sizeClasses,
+      variantClasses,
+      label,
+      showPercentage,
+      labelClassName,
+      percentageClassName,
+      clampedValue,
+      max,
+      percentage
+    }
+  );
+};
 var ProgressBar_default = ProgressBar;
 //# sourceMappingURL=index.js.map