analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
220 lines (217 loc) • 6.86 kB
JavaScript
;
"use client";
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/ProgressBar/ProgressBar.tsx
var ProgressBar_exports = {};
__export(ProgressBar_exports, {
default: () => ProgressBar_default
});
module.exports = __toCommonJS(ProgressBar_exports);
// src/components/Text/Text.tsx
var import_jsx_runtime = 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_runtime.jsx)(
Component,
{
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
...props,
children
}
);
};
var Text_default = Text;
// src/components/ProgressBar/ProgressBar.tsx
var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
"div",
{
className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
children: [
size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Text_default,
{
as: "div",
size: sizeClasses.labelSize,
weight: "medium",
className: `text-text-950 ${labelClassName}`,
children: label
}
),
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
Text_default,
{
size: sizeClasses.labelSize,
weight: "medium",
className: `text-text-700 text-center ${percentageClassName}`,
children: [
Math.round(percentage),
"%"
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"div",
{
className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"progress",
{
value: clampedValue,
max,
"aria-label": typeof label === "string" ? label : "Progress",
className: "absolute inset-0 w-full h-full opacity-0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
style: { width: `${percentage}%` }
}
)
]
}
),
size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
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__ */ (0, import_jsx_runtime2.jsx)(
Text_default,
{
as: "div",
size: sizeClasses.labelSize,
weight: "medium",
className: `text-text-950 flex-none ${labelClassName}`,
children: label
}
)
]
}
);
};
var ProgressBar_default = ProgressBar;
//# sourceMappingURL=index.js.map