UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

1,907 lines 63 kB
// src/components/Card/Card.tsx
import {
  forwardRef,
  Fragment as Fragment2,
  useState,
  useRef
} from "react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Button/Button.tsx
import { jsx, jsxs } from "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__ */ jsxs(
    "button",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/Badge/Badge.tsx
import { Bell } from "phosphor-react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES2 = {
  solid: {
    error: "bg-error-background 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"
  },
  examsOutlined: {
    exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
    exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
    exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
    exam4: "bg-exam-4 text-success-700 border border-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__ */ jsxs2(
      "div",
      {
        className: cn(baseClasses, variantClasses, sizeClasses, className),
        ...props,
        children: [
          /* @__PURE__ */ jsx2(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
          notificationActive && /* @__PURE__ */ jsx2(
            "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__ */ jsxs2(
    "div",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx2("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx2("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
      ]
    }
  );
};
var Badge_default = Badge;

// src/components/Text/Text.tsx
import { jsx as jsx3 } from "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__ */ jsx3(
    Component,
    {
      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
      ...props,
      children
    }
  );
};
var Text_default = Text;

// src/components/ProgressBar/ProgressBar.tsx
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "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__ */ jsx4(
    "div",
    {
      className: cn(
        "text-xs font-medium leading-[14px] text-right",
        percentageClassName
      ),
      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
        /* @__PURE__ */ jsx4("span", { className: "text-success-200", children: Math.round(clampedValue) }),
        /* @__PURE__ */ jsxs3("span", { className: "text-text-600", children: [
          " de ",
          max
        ] })
      ] }) : /* @__PURE__ */ jsxs3(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
        Math.round(percentage),
        "%"
      ] })
    }
  );
};
var ProgressBarBase = ({
  clampedValue,
  max,
  percentage,
  label,
  variantClasses,
  containerClassName,
  fillClassName
}) => /* @__PURE__ */ jsxs3(
  "div",
  {
    className: cn(
      containerClassName,
      variantClasses.background,
      "overflow-hidden relative"
    ),
    children: [
      /* @__PURE__ */ jsx4(
        "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__ */ jsx4(
        "div",
        {
          className: cn(
            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__ */ jsxs3(
  "div",
  {
    className: cn(
      "flex flex-col items-start gap-2",
      dimensions.width,
      dimensions.height,
      className
    ),
    children: [
      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
        label && /* @__PURE__ */ jsx4(
          Text_default,
          {
            as: "div",
            size: "md",
            weight: "medium",
            className: cn("text-text-600 leading-[19px]", labelClassName),
            children: label
          }
        ),
        renderStackedHitCountDisplay(
          showHitCount,
          showPercentage,
          clampedValue,
          max,
          percentage,
          percentageClassName
        )
      ] }),
      /* @__PURE__ */ jsx4(
        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__ */ jsxs3(
    "div",
    {
      className: cn(
        "flex flex-col items-start gap-1",
        dimensions.width,
        dimensions.height,
        className
      ),
      children: [
        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsx4(
          Text_default,
          {
            as: "div",
            size: "sm",
            weight: "medium",
            color,
            className: cn("leading-4 w-full", compactClassName),
            children: content
          }
        ),
        /* @__PURE__ */ jsx4(
          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__ */ jsxs3("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
    displayConfig.showHeader && /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-center justify-between w-full", children: [
      label && /* @__PURE__ */ jsx4(
        Text_default,
        {
          as: "div",
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            labelClassName
          ),
          children: label
        }
      ),
      showPercentage && /* @__PURE__ */ jsxs3(
        Text_default,
        {
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            percentageClassName
          ),
          children: [
            Math.round(percentage),
            "%"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx4(
      ProgressBarBase,
      {
        clampedValue,
        max,
        percentage,
        label,
        variantClasses,
        containerClassName: cn(
          progressBarClass,
          sizeClasses.container,
          sizeClasses.borderRadius
        ),
        fillClassName: cn(
          sizeClasses.bar,
          sizeClasses.borderRadius,
          "shadow-hard-shadow-3"
        )
      }
    ),
    displayConfig.showPercentage && /* @__PURE__ */ jsxs3(
      Text_default,
      {
        size: "xs",
        weight: "medium",
        className: cn(
          "text-text-950 leading-none tracking-normal text-center flex-none",
          percentageClassName
        ),
        children: [
          Math.round(percentage),
          "%"
        ]
      }
    ),
    displayConfig.showLabel && /* @__PURE__ */ jsx4(
      Text_default,
      {
        as: "div",
        size: "xs",
        weight: "medium",
        className: cn(
          "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__ */ jsx4(
      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__ */ jsx4(
      CompactLayout,
      {
        className,
        label,
        showPercentage,
        showHitCount,
        labelClassName,
        percentageClassName,
        clampedValue,
        max,
        percentage,
        variantClasses,
        dimensions: {
          width: compactWidth ?? "w-[131px]",
          height: compactHeight ?? "h-[24px]"
        }
      }
    );
  }
  return /* @__PURE__ */ jsx4(
    DefaultLayout,
    {
      className,
      size,
      sizeClasses,
      variantClasses,
      label,
      showPercentage,
      labelClassName,
      percentageClassName,
      clampedValue,
      max,
      percentage
    }
  );
};
var ProgressBar_default = ProgressBar;

// src/components/Card/Card.tsx
import {
  CaretRight,
  ChatCircleText,
  CheckCircle,
  Clock,
  DotsThreeVertical,
  Play,
  SpeakerHigh,
  SpeakerLow,
  SpeakerSimpleX,
  XCircle
} from "phosphor-react";
import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var CARD_BASE_CLASSES = {
  default: "w-full bg-background border border-border-50 rounded-xl",
  compact: "w-full bg-background border border-border-50 rounded-lg",
  minimal: "w-full bg-background border border-border-100 rounded-md"
};
var CARD_PADDING_CLASSES = {
  none: "",
  small: "p-2",
  medium: "p-4",
  large: "p-6"
};
var CARD_MIN_HEIGHT_CLASSES = {
  none: "",
  small: "min-h-16",
  medium: "min-h-20",
  large: "min-h-24"
};
var CARD_LAYOUT_CLASSES = {
  horizontal: "flex flex-row",
  vertical: "flex flex-col"
};
var CARD_CURSOR_CLASSES = {
  default: "",
  pointer: "cursor-pointer"
};
var CardBase = forwardRef(
  ({
    children,
    variant = "default",
    layout = "horizontal",
    padding = "medium",
    minHeight = "medium",
    cursor = "default",
    className = "",
    ...props
  }, ref) => {
    const baseClasses = CARD_BASE_CLASSES[variant];
    const paddingClasses = CARD_PADDING_CLASSES[padding];
    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
    const layoutClasses = CARD_LAYOUT_CLASSES[layout];
    const cursorClasses = CARD_CURSOR_CLASSES[cursor];
    const combinedClasses = [
      baseClasses,
      paddingClasses,
      minHeightClasses,
      layoutClasses,
      cursorClasses,
      className
    ].filter(Boolean).join(" ");
    return /* @__PURE__ */ jsx5("div", { ref, className: combinedClasses, ...props, children });
  }
);
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 CardActivitiesResults = 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__ */ jsxs4(
      "div",
      {
        ref,
        className: cn(
          "w-full flex flex-col border border-border-50  bg-background rounded-xl",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs4(
            "div",
            {
              className: cn(
                "flex flex-col gap-1 items-center justify-center p-4",
                actionCardClasses,
                extended ? "rounded-t-xl" : "rounded-xl"
              ),
              children: [
                /* @__PURE__ */ jsx5(
                  "span",
                  {
                    className: cn(
                      "size-7.5 rounded-full flex items-center justify-center",
                      actionIconClasses
                    ),
                    children: icon
                  }
                ),
                /* @__PURE__ */ jsx5(
                  Text_default,
                  {
                    size: "2xs",
                    weight: "medium",
                    className: "text-text-800 uppercase truncate",
                    children: title
                  }
                ),
                /* @__PURE__ */ jsx5(
                  "p",
                  {
                    className: cn("text-lg font-bold truncate", actionSubTitleClasses),
                    children: subTitle
                  }
                )
              ]
            }
          ),
          extended && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
            /* @__PURE__ */ jsx5(
              "p",
              {
                className: cn(
                  "text-2xs font-medium uppercase truncate",
                  actionHeaderClasses
                ),
                children: header
              }
            ),
            /* @__PURE__ */ jsx5(Badge_default, { size: "large", action: "info", children: description })
          ] })
        ]
      }
    );
  }
);
var CardQuestions = 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__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "medium",
        className: cn("justify-between gap-4", className),
        ...props,
        children: [
          /* @__PURE__ */ jsxs4("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
            /* @__PURE__ */ jsx5("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
            /* @__PURE__ */ jsxs4("div", { className: "flex flex-row gap-6 items-center", children: [
              /* @__PURE__ */ jsx5(
                Badge_default,
                {
                  size: "medium",
                  variant: "solid",
                  action: isDone ? "success" : "error",
                  children: stateLabel
                }
              ),
              /* @__PURE__ */ jsxs4("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
                isDone ? "Nota" : "Sem nota",
                isDone && /* @__PURE__ */ jsx5(Badge_default, { size: "medium", action: "success", children: "00" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsx5("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx5(
            Button_default,
            {
              size: "extra-small",
              onClick: () => onClickButton?.(valueButton),
              className: "min-w-fit",
              children: buttonLabel
            }
          ) })
        ]
      }
    );
  }
);
var CardProgress = forwardRef(
  ({
    header,
    subhead,
    initialDate,
    endDate,
    progress = 0,
    direction = "horizontal",
    icon,
    color = "#B7DFFF",
    progressVariant = "blue",
    showDates = true,
    className,
    ...props
  }, ref) => {
    const isHorizontal = direction === "horizontal";
    const contentComponent = {
      horizontal: /* @__PURE__ */ jsxs4(Fragment3, { children: [
        showDates && /* @__PURE__ */ jsxs4("div", { className: "flex flex-row gap-6 items-center", children: [
          initialDate && /* @__PURE__ */ jsxs4("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
            /* @__PURE__ */ jsx5("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
            /* @__PURE__ */ jsx5("p", { className: "text-text-600", children: initialDate })
          ] }),
          endDate && /* @__PURE__ */ jsxs4("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
            /* @__PURE__ */ jsx5("p", { className: "text-text-800 font-semibold", children: "Fim" }),
            /* @__PURE__ */ jsx5("p", { className: "text-text-600", children: endDate })
          ] })
        ] }),
        /* @__PURE__ */ jsxs4("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
          /* @__PURE__ */ jsx5(
            ProgressBar_default,
            {
              size: "small",
              value: progress,
              variant: progressVariant,
              "data-testid": "progress-bar"
            }
          ),
          /* @__PURE__ */ jsxs4(
            Text_default,
            {
              size: "xs",
              weight: "medium",
              className: cn(
                "text-text-950 leading-none tracking-normal text-center flex-none"
              ),
              children: [
                Math.round(progress),
                "%"
              ]
            }
          )
        ] })
      ] }),
      vertical: /* @__PURE__ */ jsx5("p", { className: "text-sm text-text-800", children: subhead })
    };
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: isHorizontal ? "horizontal" : "vertical",
        padding: "none",
        minHeight: "medium",
        cursor: "pointer",
        className: cn(isHorizontal ? "h-20" : "", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx5(
            "div",
            {
              className: cn(
                "flex justify-center items-center [&>svg]:size-6 text-text-950",
                isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl",
                !color.startsWith("#") ? `bg-${color}` : ""
              ),
              style: color.startsWith("#") ? { backgroundColor: color } : void 0,
              "data-testid": "icon-container",
              children: icon
            }
          ),
          /* @__PURE__ */ jsxs4(
            "div",
            {
              className: cn(
                "p-4 flex flex-col justify-between w-full h-full",
                !isHorizontal && "gap-4"
              ),
              children: [
                /* @__PURE__ */ jsx5(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
                contentComponent[direction]
              ]
            }
          )
        ]
      }
    );
  }
);
var CardTopic = forwardRef(
  ({
    header,
    subHead,
    progress,
    showPercentage = false,
    progressVariant = "blue",
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "vertical",
        padding: "small",
        minHeight: "medium",
        cursor: "pointer",
        className: cn("justify-center gap-2  py-2 px-4", className),
        ...props,
        children: [
          subHead && /* @__PURE__ */ jsx5("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
            /* @__PURE__ */ jsx5("p", { children: text }),
            index < subHead.length - 1 && /* @__PURE__ */ jsx5("p", { children: "\u2022" })
          ] }, `${text} - ${index}`)) }),
          /* @__PURE__ */ jsx5("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
          /* @__PURE__ */ jsxs4("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
            /* @__PURE__ */ jsx5(
              ProgressBar_default,
              {
                size: "small",
                value: progress,
                variant: progressVariant,
                "data-testid": "progress-bar"
              }
            ),
            showPercentage && /* @__PURE__ */ jsxs4(
              Text_default,
              {
                size: "xs",
                weight: "medium",
                className: cn(
                  "text-text-950 leading-none tracking-normal text-center flex-none"
                ),
                children: [
                  Math.round(progress),
                  "%"
                ]
              }
            )
          ] })
        ]
      }
    );
  }
);
var CardPerformance = forwardRef(
  ({
    header,
    progress,
    description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
    actionVariant = "button",
    progressVariant = "blue",
    labelProgress = "",
    className = "",
    onClickButton,
    valueButton,
    ...props
  }, ref) => {
    const hasProgress = progress !== void 0;
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "none",
        className: cn(
          actionVariant == "caret" ? "cursor-pointer" : "",
          className
        ),
        onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
        ...props,
        children: [
          /* @__PURE__ */ jsxs4("div", { className: "w-full flex flex-col justify-between gap-2", children: [
            /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-between items-center gap-2", children: [
              /* @__PURE__ */ jsx5("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
              actionVariant === "button" && /* @__PURE__ */ jsx5(
                Button_default,
                {
                  variant: "outline",
                  size: "extra-small",
                  onClick: () => onClickButton?.(valueButton),
                  className: "min-w-fit flex-shrink-0",
                  children: "Ver Aula"
                }
              )
            ] }),
            /* @__PURE__ */ jsx5("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ jsx5(
              ProgressBar_default,
              {
                value: progress,
                label: `${progress}% ${labelProgress}`,
                variant: progressVariant
              }
            ) : /* @__PURE__ */ jsx5("p", { className: "text-xs text-text-600 truncate", children: description }) })
          ] }),
          actionVariant == "caret" && /* @__PURE__ */ jsx5(
            CaretRight,
            {
              className: "size-4.5 text-text-800 cursor-pointer",
              "data-testid": "caret-icon"
            }
          )
        ]
      }
    );
  }
);
var CardResults = forwardRef(
  ({
    header,
    correct_answers,
    incorrect_answers,
    icon,
    direction = "col",
    color = "#B7DFFF",
    className,
    ...props
  }, ref) => {
    const isRow = direction == "row";
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "none",
        minHeight: "medium",
        className: cn("items-center cursor-pointer pr-4", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx5(
            "div",
            {
              className: cn(
                "flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl"
              ),
              style: {
                backgroundColor: color
              },
              children: icon
            }
          ),
          /* @__PURE__ */ jsxs4(
            "div",
            {
              className: cn(
                "p-4 flex justify-between w-full h-full",
                isRow ? "flex-row items-center gap-2" : "flex-col"
              ),
              children: [
                /* @__PURE__ */ jsx5("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
                /* @__PURE__ */ jsxs4("span", { className: "flex flex-row gap-1 items-center", children: [
                  /* @__PURE__ */ jsxs4(
                    Badge_default,
                    {
                      action: "success",
                      variant: "solid",
                      size: "large",
                      iconLeft: /* @__PURE__ */ jsx5(CheckCircle, {}),
                      children: [
                        correct_answers,
                        " Corretas"
                      ]
                    }
                  ),
                  /* @__PURE__ */ jsxs4(
                    Badge_default,
                    {
                      action: "error",
                      variant: "solid",
                      size: "large",
                      iconLeft: /* @__PURE__ */ jsx5(XCircle, {}),
                      children: [
                        incorrect_answers,
                        " Incorretas"
                      ]
                    }
                  )
                ] })
              ]
            }
          ),
          /* @__PURE__ */ jsx5(CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
        ]
      }
    );
  }
);
var CardStatus = forwardRef(
  ({ header, className, status, label, ...props }, ref) => {
    return /* @__PURE__ */ jsx5(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "medium",
        className: cn("items-center cursor-pointer", className),
        ...props,
        children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
          /* @__PURE__ */ jsx5("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
          /* @__PURE__ */ jsxs4("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
            status && /* @__PURE__ */ jsx5(
              Badge_default,
              {
                action: status == "correct" ? "success" : "error",
                variant: "solid",
                size: "medium",
                iconLeft: /* @__PURE__ */ jsx5(CheckCircle, {}),
                children: status == "correct" ? "Correta" : "Incorreta"
              }
            ),
            label && /* @__PURE__ */ jsx5("p", { className: "text-sm text-text-800", children: label })
          ] }),
          /* @__PURE__ */ jsx5(CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
        ] })
      }
    );
  }
);
var CardSettings = forwardRef(
  ({ header, className, icon, ...props }, ref) => {
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "small",
        minHeight: "none",
        className: cn(
          "border-none items-center gap-2 text-text-700",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsx5("span", { className: "[&>svg]:size-6", children: icon }),
          /* @__PURE__ */ jsx5("p", { className: "w-full text-sm truncate", children: header }),
          /* @__PURE__ */ jsx5(CaretRight, { size: 24, className: "cursor-pointer" })
        ]
      }
    );
  }
);
var CardSupport = forwardRef(
  ({ header, className, direction = "col", children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "none",
        className: cn(
          "border-none items-center gap-2 text-text-700",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs4(
            "div",
            {
              className: cn(
                "w-full flex",
                direction == "col" ? "flex-col" : "flex-row items-center"
              ),
              children: [
                /* @__PURE__ */ jsx5("span", { className: "w-full min-w-0", children: /* @__PURE__ */ jsx5("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
                /* @__PURE__ */ jsx5("span", { className: "flex flex-row gap-1", children })
              ]
            }
          ),
          /* @__PURE__ */ jsx5(CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
        ]
      }
    );
  }
);
var CardForum = forwardRef(
  ({
    title,
    content,
    comments,
    onClickComments,
    valueComments,
    onClickProfile,
    valueProfile,
    className = "",
    date,
    hour,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "none",
        variant: "minimal",
        className: cn("w-auto h-auto gap-3", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx5(
            "button",
            {
              type: "button",
              "aria-label": "Ver perfil",
              onClick: () => onClickProfile?.(valueProfile),
              className: "min-w-8 h-8 rounded-full bg-background-950"
            }
          ),
          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
            /* @__PURE__ */ jsxs4("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
              /* @__PURE__ */ jsx5("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
              /* @__PURE__ */ jsxs4("p", { className: "text-xs text-text-600", children: [
                "\u2022 ",
                date,
                " \u2022 ",
                hour
              ] })
            ] }),
            /* @__PURE__ */ jsx5("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
            /* @__PURE__ */ jsxs4(
              "button",
              {
                type: "button",
                "aria-label": "Ver coment\xE1rios",
                onClick: () => onClickComments?.(valueComments),
                className: "text-text-600 flex flex-row gap-2 items-center",
                children: [
                  /* @__PURE__ */ jsx5(ChatCircleText, { "aria-hidden": "true", size: 16 }),
                  /* @__PURE__ */ jsxs4("p", { className: "text-xs", children: [
                    comments,
                    " respostas"
                  ] })
                ]
              }
            )
          ] })
        ]
      }
    );
  }
);
var CardAudio = forwardRef(
  ({
    src,
    title,
    onPlay,
    onPause,
    onEnded,
    onAudioTimeUpdate,
    loop = false,
    preload = "metadata",
    tracks,
    className,
    ...props
  }, ref) => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [currentTime, setCurrentTime] = useState(0);
    const [duration, setDuration] = useState(0);
    const [volume, setVolume] = useState(1);
    const [showVolumeControl, setShowVolumeControl] = useState(false);
    const audioRef = useRef(null);
    const formatTime = (time) => {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
    };
    const handlePlayPause = () => {
      if (isPlaying) {
        audioRef.current?.pause();
        setIsPlaying(false);
        onPause?.();
      } else {
        audioRef.current?.play();
        setIsPlaying(true);
        onPlay?.();
      }
    };
    const handleTimeUpdate = () => {
      const current = audioRef.current?.currentTime ?? 0;
      const total = audioRef.current?.duration ?? 0;
      setCurrentTime(current);
      setDuration(total);
      onAudioTimeUpdate?.(current, total);
    };
    const handleLoadedMetadata = () => {
      setDuration(audioRef.current?.duration ?? 0);
    };
    const handleEnded = () => {
      setIsPlaying(false);
      setCurrentTime(0);
      onEnded?.();
    };
    const handleProgressClick = (e) => {
      const rect = e.currentTarget.getBoundingClientRect();
      const clickX = e.clientX - rect.left;
      const width = rect.width;
      const percentage = clickX / width;
      const newTime = percentage * duration;
      if (audioRef.current) {
        audioRef.current.currentTime = newTime;
      }
      setCurrentTime(newTime);
    };
    const handleVolumeChange = (e) => {
      const newVolume = parseFloat(e.target.value);
      setVolume(newVolume);
      if (audioRef.current) {
        audioRef.current.volume = newVolume;
      }
    };
    const toggleVolumeControl = () => {
      setShowVolumeControl(!showVolumeControl);
    };
    const getVolumeIcon = () => {
      if (volume === 0) {
        return /* @__PURE__ */ jsx5(SpeakerSimpleX, {});
      }
      if (volume < 0.5) {
        return /* @__PURE__ */ jsx5(SpeakerLow, {});
      }
      return /* @__PURE__ */ jsx5(SpeakerHigh, {});
    };
    return /* @__PURE__ */ jsxs4(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "none",
        className: cn("w-auto h-14 items-center gap-2", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx5(
            "audio",
            {
              ref: audioRef,
              src,
              loop,
              preload,
              onTimeUpdate: handleTimeUpdate,
              onLoadedMetadata: handleLoadedMetadata,
              onEnded: handleEnded,
              "data-testid": "audio-element",
              "aria-label": title,
              children: tracks ? tracks.map((track) => /* @__PURE__ */ jsx5(
                "track",
                {
                  kind: track.kind,
                  src: track.src,
                  srcLang: track.srcLang,
                  label: track.label,
                  default: track.default
                },
                track.src
              )) : /* @__PURE__ */ jsx5(
                "track",
                {
                  kind: "captions",
                  src: "data:text/vtt;base64,",
                  srcLang: "pt",
                  label: "Sem legendas dispon\xEDveis"
                }
              )
            }
          ),
          /* @__PURE__ */ jsx5(
            "button",
            {
              type: "button",
              onClick: handlePlayPause,
              disabled: !src,
              className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
              "aria-label": isPlaying ? "Pausar" : "Reproduzir",
              children: isPlaying ? /* @__PURE__ */ jsx5("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs4("div", { className: "flex gap-0.5", children: [
                /* @__PURE__ */ jsx5("div", { className: "w-1 h-4 bg-current rounded-sm" }),
                /* @__PURE__ */ jsx5("div", { className: "w-1 h-4 bg-current rounded-sm" })
              ] }) }) : /* @__PURE__ */ jsx5(Play, { size: 24 })
            }
          ),
          /* @__PURE__ */ jsx5("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
          /* @__PURE__ */ jsx5("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ jsx5(
            "button",
            {
              type: "button",
              className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
              onClick: handleProgressClick,
              onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  handleProgressClick(
                    e
                  );
                }
              },
              "aria-label": "Barra de progresso do \xE1udio",
              children: /* @__PURE__ */ jsx5(
                "div",
                {
                  className: "h-full bg-primary-600 rounded-full transition-all duration-100",
                  style: {
                    width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
                  }
                }
              )
            }
          ) }),
          /* @__PURE__ */ jsx5("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
          /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
            /* @__PURE__ */ jsx5(
              "button",
              {
                type: "button",
                onClick: toggleVolumeControl,
                className: "cursor-pointer text-text-950 hover:text-primary-600",
                "aria-label": "Controle de volume",
                children: /* @__PURE__ */ jsx5("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
              }
            ),
            showVolumeControl && /* @__PURE__ */ jsx5(
              "button",
              {
                type: "button",
                className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
                onKeyDown: (e) => {
                  if (e.key === "Escape") {
                    setShowVolumeControl(false);
                  }
                },
                children: /* @__PURE__ */ jsx5(
                  "input",
                  {
                    type: "range",
                    min: "0",
                    max: "1",
                    step: "0.1",
                    value: volume,
                    onChange: handleVolumeChange,
                    onKeyDown: (e) => {
                      if (e.key === "ArrowUp" || e.key === "ArrowRight") {
                        e.preventDefault();
                        const newVolume = Math.min(
                          1,
                          Math.round((volume + 0.1) * 10) / 10
                        );
                        setVolume(newVolume);
                        if (audioRef.current) audioRef.current.volume = newVolume;
                      } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
                        e.preventDefault();
                        const newVolume = Math.max(
                          0,
                          Math.round((volume - 0.1) * 10) / 10
                        );
                        setVolume(newVolume);
                        if (audioRef.current) audioRef.current.volume = newVolume;
                      }
                    },
                    className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
                    style: {
                      background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
                    },
                    "aria-label": "Volume",
                    "aria-valuenow": Math.round(volume * 100),
                    "aria-valuemin": 0,
                    "aria-valuemax": 100
                  }
                )
              }
            )
          ] }),
          /* @__PURE__ */ jsx5(
            DotsThreeVertical,
            {
              size: 24,
              className: "text-text-950 cursor-pointer hover:text-primary-600"
            }
          )
        ]
      }
    );
  }
);
var SIMULADO_BACKGROUND_CLASSES = {
  enem: "bg-exam-1",
  prova: "bg-exam-2",
  simuladao: "bg-exam-3",
  vestibular: "bg-exam-4"
};
var CardSimulado = forwardRef(
  ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
    const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
    return /* @__PURE__ */ jsx5(
      CardBase,
      {
        ref,
        layout: "horizontal",
        padding: "medium",
        minHeight: "none",
        cursor: "pointer",
        className: cn(
          `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200`,
          className
        ),
        ...props,
        children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center w-full gap-4", children: [
          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
            /* @__PURE__ */ jsx5(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-4 text-text-700", children: [
              duration && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
                /* @__PURE__ */ jsx5(Clock, { size: 16, className: "flex-shrink-0" }),
                /* @__PURE__ */ jsx5(Text_default, { size: "sm", children: duration })
              ] }),
              /* @__PURE__ */ jsx5(Text_default, { size: "sm", className: "truncate", children: info })
            ] })
          ] }),
          /* @__PURE__ */ jsx5(
            CaretRight,
            {
              size: 24,
              className: "text-text-800 flex-shrink-0",
              "data-testid": "caret-icon"
            }
          )
        ] })
      }
    );
  }
);
var CardTest = forwardRef(
  ({
    title,
    duration,
    questionsCount,
    additionalInfo,
    selected = false,
    onSelect,
    className = "",
    ...props
  }, ref) => {
    const handleClick = () => {
      if (onSelect) {
        onSelect(!selected);
      }
    };
    const handleKeyDown = (event) => {
      if ((event.key === "Enter" || event.key === " ") && onSelect) {
        event.preventDefault();
        onSelect(!selected);
      }
    };
    const isSelectable = !!onSelect;
    const getQuestionsText = (count) => {
      const singular = count === 1 ? "quest\xE3o" : "quest\xF5es";
      return `${count} ${singular}`;
    };
    const displayInfo = questionsCount ? getQuestionsText(questionsCount) : additionalInfo || "";
    const baseClasses = "flex flex-row items-center p-4 gap-2 w-full max-w-full bg-background shadow-soft-shadow-1 rounded-xl isolate border-0 text-left";
    const interactiveClasses = isSelectable ? "cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2" : "";
    const selectedClasses = selected ? "ring-2 ring-primary-950 ring-offset-2" : "";
    if (isSelectable) {
      return /* @__PURE__ */ jsx5(
        "button",
        {
          ref,
          type: "button",
          className: cn(
            `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
          ),
          onClick: handleClick,
          onKeyDown: handleKeyDown,
          "aria-pressed": selected,
          ...props,
          children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
            /* @__PURE__ */ jsx5(
              Text_default,
              {
                size: "md",
                weight: "bold",
                className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
                children: title
              }
            ),
            /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
              duration && /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
                /* @__PURE__ */ jsx5(Clock, { size: 16, className: "text-text-700" }),
                /* @__PURE__ */ jsx5(
                  Text_default,
                  {
                    size: "sm",
                    className: "text-text-700 leading-[21px] whitespace-nowrap",
                    children: duration
                  }
                )
              ] }),
              /* @__PURE__ */ jsx5(
                Text_default,
                {
                  size: "sm",
                  className: "text-text-700 leading-[21px] flex-grow truncate",
                  children: displayInfo
                }
              )
            ] })
          ] })
        }
      );
    }
    return /* @__PURE__ */ jsx5(
      "div",
      {
        ref,
        className: cn(`${baseClasses} ${className}`.trim()),
        ...props,
        children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
          /* @__PURE__ */ jsx5(
            Text_default,
            {
              size: "md",
              weight: "bold",
              className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
              children: title
            }
          ),
          /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
            duration && /* @__PURE__ */ jsxs4("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
              /* @__PURE__ */ jsx5(Clock, { size: 16, className: "text-text-700" }),
              /* @__PURE__ */ jsx5(
                Text_default,
                {
                  size: "sm",
                  className: "text-text-700 leading-[21px] whitespace-nowrap",
                  children: duration
                }
              )
            ] }),
            /* @__PURE__ */ jsx5(
              Text_default,
              {
                size: "sm",
                className: "text-text-700 leading-[21px] flex-grow truncate min-w-0",
                children: displayInfo
              }
            )
          ] })
        ] })
      }
    );
  }
);
var SIMULATION_TYPE_STYLES = {
  enem: {
    background: "bg-exam-1",
    badge: "exam1",
    text: "Enem"
  },
  prova: {
    background: "bg-exam-2",
    badge: "exam2",
    text: "Prova"
  },
  simulado: {
    background: "bg-exam-3",
    badge: "exam3",
    text: "Simulado"
  },
  vestibular: {
    background: "bg-exam-4",
    badge: "exam4",
    text: "Vestibular"
  }
};
var CardSimulationHistory = forwardRef(({ data, onSimulationClick, className, ...props }, ref) => {
  return /* @__PURE__ */ jsx5(
    "div",
    {
      ref,
      className: cn("w-full max-w-[992px] h-auto", className),
      ...props,
      children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0", children: [
        data.map((section, sectionIndex) => /* @__PURE__ */ jsx5("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxs4(
          "div",
          {
            className: cn(
              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white",
              sectionIndex === 0 ? "rounded-t-3xl" : ""
            ),
            children: [
              /* @__PURE__ */ jsx5(
                Text_default,
                {
                  size: "xs",
                  weight: "bold",
                  className: "text-text-800 w-11 flex-shrink-0",
                  children: section.date
                }
              ),
              /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-2 flex-1", children: section.simulations.map((simulation) => {
                const typeStyles = SIMULATION_TYPE_STYLES[simulation.type];
                return /* @__PURE__ */ jsx5(
                  CardBase,
                  {
                    layout: "horizontal",
                    padding: "medium",
                    minHeight: "none",
                    cursor: "pointer",
                    className: cn(
                      `${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2 
                          transition-shadow duration-200 h-auto min-h-[61px]`
                    ),
                    onClick: () => onSimulationClick?.(simulation),
                    children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center w-full gap-2", children: [
                      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
                        /* @__PURE__ */ jsx5(
                          Text_default,
                          {
                            size: "lg",
                            weight: "bold",
                            className: "text-text-950 truncate",
                            children: simulation.title
                          }
                        ),
                        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
                          /* @__PURE__ */ jsx5(
                            Badge_default,
                            {
                              variant: "examsOutlined",
                              action: typeStyles.badge,
                              size: "medium",
                              children: typeStyles.text
                            }
                          ),
                          /* @__PURE__ */ jsx5(Text_default, { size: "sm", className: "text-text-800 truncate", children: simulation.info })
                        ] })
                      ] }),
                      /* @__PURE__ */ jsx5(
                        CaretRight,
                        {
                          size: 24,
                          className: "text-text-800 flex-shrink-0",
                          "data-testid": "caret-icon"
                        }
                      )
                    ] })
                  },
                  simulation.id
                );
              }) })
            ]
          }
        ) }, section.date)),
        data.length > 0 && /* @__PURE__ */ jsx5("div", { className: "w-full h-6 bg-white rounded-b-3xl" })
      ] })
    }
  );
});
export {
  CardActivitiesResults,
  CardAudio,
  CardBase,
  CardForum,
  CardPerformance,
  CardProgress,
  CardQuestions,
  CardResults,
  CardSettings,
  CardSimulado,
  CardSimulationHistory,
  CardStatus,
  CardSupport,
  CardTest,
  CardTopic
};
//# sourceMappingURL=index.mjs.map