analytica-frontend-lib 1.0.44 → 1.0.46

package/dist/Card/index.js

@@ -0,0 +1,1085 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Card/Card.tsx
+var Card_exports = {};
+__export(Card_exports, {
+  CardActivesResults: () => CardActivesResults,
+  CardPerformance: () => CardPerformance,
+  CardProgress: () => CardProgress,
+  CardQuestions: () => CardQuestions,
+  CardResults: () => CardResults,
+  CardStatus: () => CardStatus,
+  CardTopic: () => CardTopic
+});
+module.exports = __toCommonJS(Card_exports);
+var import_react = require("react");
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  outline: {
+    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  link: {
+    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  }
+};
+var SIZE_CLASSES = {
+  "extra-small": "text-xs px-3.5 py-2",
+  small: "text-sm px-4 py-2.5",
+  medium: "text-md px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+  "extra-large": "text-lg px-7 py-3.5"
+};
+var Button = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "primary",
+  className = "",
+  disabled,
+  type = "button",
+  ...props
+}) => {
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      disabled,
+      type,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/Badge/Badge.tsx
+var import_phosphor_react = require("phosphor-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var VARIANT_ACTION_CLASSES2 = {
+  solid: {
+    error: "bg-error text-error-700 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 focus-visible:outline-none",
+    success: "bg-success text-success-800 focus-visible:outline-none",
+    info: "bg-info text-info-800 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 focus-visible:outline-none"
+  },
+  outlined: {
+    error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
+  },
+  exams: {
+    exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
+  },
+  resultStatus: {
+    negative: "bg-error text-error-800 focus-visible:outline-none",
+    positive: "bg-success text-success-800 focus-visible:outline-none"
+  },
+  notification: "text-primary"
+};
+var SIZE_CLASSES2 = {
+  small: "text-2xs px-2 py-1",
+  medium: "text-xs px-2 py-1",
+  large: "text-sm px-2 py-1"
+};
+var SIZE_CLASSES_ICON = {
+  small: "size-3",
+  medium: "size-3.5",
+  large: "size-4"
+};
+var Badge = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "error",
+  className = "",
+  notificationActive = false,
+  ...props
+}) => {
+  const sizeClasses = SIZE_CLASSES2[size];
+  const sizeClassesIcon = SIZE_CLASSES_ICON[size];
+  const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
+  const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
+  const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
+  const baseClassesIcon = "flex items-center";
+  if (variant === "notification") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-primary-950" }),
+          notificationActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              "data-testid": "notification-dot",
+              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+      ]
+    }
+  );
+};
+var Badge_default = Badge;
+
+// src/components/Text/Text.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SIZE_CLASSES3 = {
+  small: {
+    container: "h-1",
+    // 4px height (h-1 = 4px in Tailwind)
+    bar: "h-1",
+    // 4px height for the fill bar
+    spacing: "gap-2",
+    // 8px gap between label and progress bar
+    layout: "flex-col",
+    // vertical layout for small
+    borderRadius: "rounded-full"
+    // 9999px border radius
+  },
+  medium: {
+    container: "h-2",
+    // 8px height (h-2 = 8px in Tailwind)
+    bar: "h-2",
+    // 8px height for the fill bar
+    spacing: "gap-2",
+    // 8px gap between progress bar and label
+    layout: "flex-row items-center",
+    // horizontal layout for medium
+    borderRadius: "rounded-lg"
+    // 8px border radius
+  }
+};
+var VARIANT_CLASSES = {
+  blue: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-primary-700"
+    // Blue for activity progress (#2271C4)
+  },
+  green: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-success-200"
+    // Green for performance (#84D3A2)
+  }
+};
+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;
+  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_runtime4.jsx)(
+    "div",
+    {
+      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-text-600", children: [
+          " de ",
+          max
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)(
+  "div",
+  {
+    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsxs)(
+  "div",
+  {
+    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    children: [
+      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Text_default,
+          {
+            as: "div",
+            size: "md",
+            weight: "medium",
+            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            children: label
+          }
+        ),
+        renderStackedHitCountDisplay(
+          showHitCount,
+          showPercentage,
+          clampedValue,
+          max,
+          percentage,
+          percentageClassName
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)(
+    "div",
+    {
+      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      children: [
+        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Text_default,
+          {
+            as: "div",
+            size: "sm",
+            weight: "medium",
+            color,
+            className: `leading-4 w-full ${compactClassName}`,
+            children: content
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+    displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.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_runtime4.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_CLASSES3[size];
+  const variantClasses = VARIANT_CLASSES[variant];
+  if (layout === "stacked") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)(
+    DefaultLayout,
+    {
+      className,
+      size,
+      sizeClasses,
+      variantClasses,
+      label,
+      showPercentage,
+      labelClassName,
+      percentageClassName,
+      clampedValue,
+      max,
+      percentage
+    }
+  );
+};
+var ProgressBar_default = ProgressBar;
+
+// src/components/Card/Card.tsx
+var import_phosphor_react2 = require("phosphor-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ACTION_CARD_CLASSES = {
+  warning: "bg-warning-background",
+  success: "bg-success-300",
+  error: "bg-error-100",
+  info: "bg-info-background"
+};
+var ACTION_ICON_CLASSES = {
+  warning: "bg-warning-300 text-text",
+  success: "bg-yellow-300 text-text-950",
+  error: "bg-error-500 text-text",
+  info: "bg-info-500 text-text"
+};
+var ACTION_SUBTITLE_CLASSES = {
+  warning: "text-warning-600",
+  success: "text-success-700",
+  error: "text-error-700",
+  info: "text-info-700"
+};
+var ACTION_HEADER_CLASSES = {
+  warning: "text-warning-300",
+  success: "text-success-300",
+  error: "text-error-300",
+  info: "text-info-300"
+};
+var CardActivesResults = (0, import_react.forwardRef)(
+  ({
+    icon,
+    title,
+    subTitle,
+    header,
+    extended = false,
+    action = "success",
+    description,
+    className,
+    ...props
+  }, ref) => {
+    const actionCardClasses = ACTION_CARD_CLASSES[action];
+    const actionIconClasses = ACTION_ICON_CLASSES[action];
+    const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
+    const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full flex flex-col border border-border-50 bg-background rounded-xl ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: `
+          flex flex-col gap-1 items-center justify-center p-4 
+          ${actionCardClasses}
+          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 font-medium uppercase text-2xs", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-lg font-bold ${actionSubTitleClasses}`, children: subTitle })
+              ]
+            }
+          ),
+          extended && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "p",
+              {
+                className: `text-2xs font-medium uppercase ${actionHeaderClasses}`,
+                children: header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-info-800 text-center", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardQuestions = (0, import_react.forwardRef)(
+  ({
+    header,
+    state = "undone",
+    className,
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const isDone = state === "done";
+    const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
+    const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex flex-row justify-between rounded-xl p-4 gap-4 bg-background border border-border-50
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-bold text-xs text-text-950", children: header }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                Badge_default,
+                {
+                  size: "medium",
+                  variant: "solid",
+                  action: isDone ? "success" : "error",
+                  children: stateLabel
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
+                isDone ? "Nota" : "Sem nota",
+                isDone && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge_default, { size: "medium", action: "success", children: "00" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button_default, { size: "extra-small", onClick: () => onClickButton?.(valueButton), children: buttonLabel })
+        ]
+      }
+    );
+  }
+);
+var CardProgress = (0, import_react.forwardRef)(
+  ({
+    header,
+    subhead,
+    initialDate,
+    endDate,
+    progress = 0,
+    direction = "horizontal",
+    icon,
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    const contentComponent = {
+      horizontal: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+          initialDate && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-600", children: initialDate })
+          ] }),
+          endDate && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-600", children: endDate })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ProgressBar_default,
+          {
+            size: "medium",
+            showPercentage: true,
+            value: progress,
+            "data-testid": "progress-bar"
+          }
+        )
+      ] }),
+      vertical: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-800", children: subhead })
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl
+          ${isHorizontal ? "flex-row h-20" : "flex-col"}
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `
+            flex justify-center items-center [&>svg]:size-8 text-text-950
+            ${isHorizontal ? "w-20 h-full rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+          `,
+              style: {
+                backgroundColor: color
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex flex-col justify-between w-full h-full
+            ${!isHorizontal && "gap-4"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                contentComponent[direction]
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardTopic = (0, import_react.forwardRef)(
+  ({
+    header,
+    subHead,
+    progress,
+    showPercentage = false,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full py-2 px-4 flex flex-col justify-center gap-2 border border-border-50 rounded-xl min-h-20 ${className}`,
+        ...props,
+        children: [
+          subHead && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: text }),
+            index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "\u2022" })
+          ] }, `${text} - ${index}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-text-950 font-bold", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProgressBar_default, { showPercentage, value: progress })
+        ]
+      }
+    );
+  }
+);
+var CardPerformance = (0, import_react.forwardRef)(
+  ({
+    header,
+    progress,
+    description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
+    className = "",
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const hasProgress = progress !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-md font-bold text-text-950", children: header }),
+              hasProgress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                Button_default,
+                {
+                  variant: "outline",
+                  size: "extra-small",
+                  onClick: () => onClickButton?.(valueButton),
+                  children: "Ver Aula"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProgressBar_default, { value: progress, label: `${progress}% corretas` }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-text-600", children: description }) })
+          ] }),
+          !hasProgress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_phosphor_react2.CaretRight,
+            {
+              className: "size-4.5",
+              "data-testid": "caret-icon",
+              onClick: () => onClickButton?.(valueButton)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardResults = (0, import_react.forwardRef)(
+  ({
+    header,
+    correct_answers,
+    incorrect_answers,
+    icon,
+    direction = "col",
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isRow = direction == "row";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `
+              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 h-full rounded-l-xl
+            `,
+              style: {
+                backgroundColor: color
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex justify-between w-full h-full
+            ${isRow ? "flex-row items-center" : "flex-col"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    Badge_default,
+                    {
+                      action: "success",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CheckCircle, {}),
+                      children: [
+                        correct_answers,
+                        " Corretas"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    Badge_default,
+                    {
+                      action: "error",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.XCircle, {}),
+                      children: [
+                        incorrect_answers,
+                        " Incorretas"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6" })
+        ]
+      }
+    );
+  }
+);
+var CardStatus = (0, import_react.forwardRef)(
+  ({ header, className, status, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex justify-between w-full h-full flex-row items-center
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    Badge_default,
+                    {
+                      action: status == "correct" ? "success" : "error",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CheckCircle, {}),
+                      children: status == "correct" ? "Correta" : "Incorreta"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-800", children: "Respondida" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6" })
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardActivesResults,
+  CardPerformance,
+  CardProgress,
+  CardQuestions,
+  CardResults,
+  CardStatus,
+  CardTopic
+});
+//# sourceMappingURL=index.js.map