analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
390 lines (386 loc) • 11.9 kB
JavaScript
;
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/Stepper/Stepper.tsx
var Stepper_exports = {};
__export(Stepper_exports, {
Step: () => Step,
default: () => Stepper_default
});
module.exports = __toCommonJS(Stepper_exports);
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// 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: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/Stepper/Stepper.tsx
var import_phosphor_react = require("phosphor-react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var SIZE_CLASSES = {
small: {
container: "gap-2",
// 8px gap as specified in CSS
stepWidth: "w-[58px]",
// exact 58px from CSS
stepHeight: "h-[38px]",
// exact 38px from CSS
indicator: "w-5 h-5",
// 20px as specified
progressBar: "h-0.5",
// 2px as specified
indicatorTextSize: "2xs",
// 10px as specified
labelTextSize: "xs",
// 12px as specified
iconSize: "w-3 h-3"
// 12px
},
medium: {
container: "gap-3",
// 12px (8px + 4px progression)
stepWidth: "w-[110px]",
// 110px (increased from 90px to fit "Endereço Residencial")
stepHeight: "h-[48px]",
// 48px (increased from 46px for better proportion)
indicator: "w-6 h-6",
// 24px (20px + 4px progression)
progressBar: "h-0.5",
// 2px maintained for consistency
indicatorTextSize: "2xs",
// 10px maintained for readability
labelTextSize: "xs",
// 12px maintained
iconSize: "w-3.5 h-3.5"
// 14px
},
large: {
container: "gap-4",
// 16px (12px + 4px progression)
stepWidth: "w-[160px]",
// 160px (increased from 140px to fit "Endereço Residencial")
stepHeight: "h-[58px]",
// 58px (increased from 54px for better proportion)
indicator: "w-7 h-7",
// 28px (24px + 4px progression)
progressBar: "h-1",
// 4px (increased for better visibility)
indicatorTextSize: "xs",
// 12px (increased for larger size)
labelTextSize: "sm",
// 14px (increased for larger size)
iconSize: "w-4 h-4"
// 16px
},
extraLarge: {
container: "gap-5",
// 20px (16px + 4px progression)
stepWidth: "w-[200px]",
// 200px (increased from 180px to ensure "Endereço Residencial" fits)
stepHeight: "h-[68px]",
// 68px (increased from 62px for better proportion)
indicator: "w-8 h-8",
// 32px (28px + 4px progression)
progressBar: "h-1",
// 4px maintained
indicatorTextSize: "xs",
// 12px maintained for readability
labelTextSize: "sm",
// 14px maintained
iconSize: "w-[18px] h-[18px]"
// 18px
}
};
var STATE_CLASSES = {
pending: {
progressBar: "bg-text-400",
// #A3A3A3
indicator: "bg-text-400",
// #A3A3A3
indicatorText: "text-white",
// Branco para contraste com background cinza
label: "text-text-400"
// #A3A3A3
},
current: {
progressBar: "bg-primary-800",
// #1C61B2 usando classe Tailwind padrão
indicator: "bg-primary-800",
// #1C61B2 usando classe Tailwind padrão
indicatorText: "text-white",
// Branco usando classe Tailwind padrão
label: "text-primary-800"
// #1C61B2 usando classe Tailwind padrão
},
completed: {
progressBar: "bg-primary-400",
// #48A0E8 para barra quando checked (completed)
indicator: "bg-primary-400",
// #48A0E8 para corresponder à barra de progresso
indicatorText: "text-white",
// Branco usando classe Tailwind padrão
label: "text-primary-400"
// #48A0E8 para corresponder à barra de progresso
}
};
var Step = ({
step,
index,
size: _size,
sizeClasses,
stateClasses,
isLast: _isLast,
className = ""
}) => {
const stepNumber = index + 1;
const isCompleted = step.state === "completed";
const getAriaLabel = () => {
let suffix = "";
if (step.state === "completed") {
suffix = " (conclu\xEDdo)";
} else if (step.state === "current") {
suffix = " (atual)";
}
return `${step.label}${suffix}`;
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"div",
{
className: `
flex flex-col justify-center items-center pb-2 gap-2
${sizeClasses.stepWidth} ${sizeClasses.stepHeight}
flex-none flex-grow
${className}
sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none
sm:min-h-[40px] md:min-h-[45px] lg:min-h-none
overflow-visible
`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: `
w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}
rounded-sm flex-none
`
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"div",
{
className: `
flex flex-col sm:flex-row items-center
gap-1 sm:gap-2 w-full sm:w-auto
h-auto sm:h-5 flex-none
overflow-visible
`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: `
${sizeClasses.indicator} ${stateClasses.indicator}
rounded-full flex items-center justify-center relative
flex-none transition-all duration-300 ease-out
w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6
`,
"aria-label": getAriaLabel(),
children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_phosphor_react.Check,
{
weight: "bold",
className: `
${stateClasses.indicatorText}
w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5
`
}
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Text_default,
{
size: sizeClasses.indicatorTextSize,
weight: "medium",
color: "",
className: cn(
stateClasses.indicatorText,
"leading-none text-2xs sm:text-xs"
),
children: stepNumber
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Text_default,
{
size: sizeClasses.labelTextSize,
weight: "medium",
color: "",
className: cn(
stateClasses.label,
"leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal"
),
children: step.label
}
)
]
}
)
]
}
);
};
var calculateStepStates = (steps, currentStep) => {
return steps.map((step, index) => {
let stepState;
if (index < currentStep) {
stepState = "completed";
} else if (index === currentStep) {
stepState = "current";
} else {
stepState = "pending";
}
return {
...step,
state: stepState
};
});
};
var getProgressText = (currentStep, totalSteps, customText) => {
if (customText) return customText;
return `Etapa ${currentStep + 1} de ${totalSteps}`;
};
var Stepper = ({
steps: initialSteps,
size = "medium",
currentStep,
className = "",
stepClassName = "",
showProgress = false,
progressText,
responsive = true
}) => {
const sizeClasses = SIZE_CLASSES[size];
const steps = currentStep !== void 0 ? calculateStepStates(initialSteps, currentStep) : initialSteps;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"fieldset",
{
className: cn(
"flex flex-col gap-4 sm:gap-5 md:gap-6",
className,
"border-0 p-0 m-0"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", children: "Stepper de formul\xE1rio" }),
showProgress && currentStep !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Text_default,
{
size: "sm",
weight: "medium",
className: "text-text-600 text-center sm:text-left text-xs sm:text-sm",
children: getProgressText(currentStep, steps.length, progressText)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: cn(
"flex items-center",
sizeClasses.container,
responsive ? "flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center" : "flex-row justify-center",
"px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4"
),
role: "tablist",
"aria-label": "Progress steps",
children: steps.map((step, index) => {
const stateClasses = STATE_CLASSES[step.state];
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Step,
{
step,
index,
size,
sizeClasses,
stateClasses,
isLast: index === steps.length - 1,
className: stepClassName
},
step.id
);
})
}
)
]
}
);
};
var Stepper_default = Stepper;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Step
});
//# sourceMappingURL=index.js.map