analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
309 lines (301 loc) • 9.62 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/Stepper/Stepper.tsx
var _Check = require('@phosphor-icons/react/dist/csr/Check');
var _jsxruntime = 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__ */ _jsxruntime.jsxs.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: `
w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}
rounded-sm flex-none
`
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: `
${sizeClasses.indicator} ${stateClasses.indicator}
rounded-full flex items-center justify-center relative
flex-none transition-all duration-300 ease-out
`,
"aria-label": getAriaLabel(),
children: isCompleted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_Check.CheckIcon,
{
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__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: sizeClasses.indicatorTextSize,
weight: "medium",
color: "",
className: _chunkTN3AYOMVjs.cn.call(void 0, stateClasses.indicatorText, "leading-none"),
children: stepNumber
}
)
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: sizeClasses.labelTextSize,
weight: "medium",
color: "",
className: _chunkTN3AYOMVjs.cn.call(void 0,
stateClasses.label,
"leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full 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__ */ _jsxruntime.jsxs.call(void 0,
"fieldset",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-col gap-4 sm:gap-5 md:gap-6",
className,
"border-0 p-0 m-0"
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.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__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"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",
"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__ */ _jsxruntime.jsx.call(void 0,
Step,
{
step,
index,
size,
sizeClasses,
stateClasses,
isLast: index === steps.length - 1,
className: stepClassName
},
step.id
);
})
}
)
]
}
);
};
var Stepper_default = Stepper;
exports.Step = Step; exports.Stepper_default = Stepper_default;
//# sourceMappingURL=chunk-HOVTCEHK.js.map