analytica-frontend-lib/dist/ProgressBar/index.mjs

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

"use client";

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

// src/components/ProgressBar/ProgressBar.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var SIZE_CLASSES = {
  small: {
    container: "h-1",
    // 4px height (h-1 = 4px in Tailwind)
    bar: "h-1",
    // 4px height for the fill bar
    labelSize: "xs",
    spacing: "gap-2",
    // 8px gap between label and progress bar
    layout: "flex-col",
    // 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
    labelSize: "xs",
    // 12px font size (xs in Tailwind)
    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 ProgressBar = ({
  value,
  max = 100,
  size = "medium",
  variant = "blue",
  label,
  showPercentage = false,
  className = "",
  labelClassName = "",
  percentageClassName = ""
}) => {
  const safeValue = isNaN(value) ? 0 : value;
  const clampedValue = Math.max(0, Math.min(safeValue, max));
  const percentage = max === 0 ? 0 : clampedValue / max * 100;
  const sizeClasses = SIZE_CLASSES[size];
  const variantClasses = VARIANT_CLASSES[variant];
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
      children: [
        size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between w-full", children: [
          label && /* @__PURE__ */ jsx2(
            Text_default,
            {
              as: "div",
              size: sizeClasses.labelSize,
              weight: "medium",
              className: `text-text-950 ${labelClassName}`,
              children: label
            }
          ),
          showPercentage && /* @__PURE__ */ jsxs(
            Text_default,
            {
              size: sizeClasses.labelSize,
              weight: "medium",
              className: `text-text-700 text-center ${percentageClassName}`,
              children: [
                Math.round(percentage),
                "%"
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
            children: [
              /* @__PURE__ */ jsx2(
                "progress",
                {
                  value: clampedValue,
                  max,
                  "aria-label": typeof label === "string" ? label : "Progress",
                  className: "absolute inset-0 w-full h-full opacity-0"
                }
              ),
              /* @__PURE__ */ jsx2(
                "div",
                {
                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
                  style: { width: `${percentage}%` }
                }
              )
            ]
          }
        ),
        size === "medium" && showPercentage && /* @__PURE__ */ jsxs(
          Text_default,
          {
            size: sizeClasses.labelSize,
            weight: "medium",
            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
            children: [
              Math.round(percentage),
              "%"
            ]
          }
        ),
        size === "medium" && label && !showPercentage && /* @__PURE__ */ jsx2(
          Text_default,
          {
            as: "div",
            size: sizeClasses.labelSize,
            weight: "medium",
            className: `text-text-950 flex-none ${labelClassName}`,
            children: label
          }
        )
      ]
    }
  );
};
var ProgressBar_default = ProgressBar;
export {
  ProgressBar_default as default
};
//# sourceMappingURL=index.mjs.map