analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,368 lines (1,356 loc) • 236 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/SendActivityModal/SendActivityModal.tsx
var SendActivityModal_exports = {};
__export(SendActivityModal_exports, {
default: () => SendActivityModal_default
});
module.exports = __toCommonJS(SendActivityModal_exports);
var import_react17 = require("react");
var import_react18 = require("@phosphor-icons/react");
// src/components/Modal/Modal.tsx
var import_react = require("react");
var import_phosphor_react = require("phosphor-react");
// 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/Button/Button.tsx
var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/Modal/utils/videoUtils.ts
var isYouTubeUrl = (url) => {
const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
return youtubeRegex.test(url);
};
var isValidYouTubeHost = (host) => {
if (host === "youtu.be") return "youtu.be";
const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
if (isValidYouTubeCom) return "youtube";
const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
if (isValidNoCookie) return "nocookie";
return null;
};
var extractYoutuBeId = (pathname) => {
const firstSeg = pathname.split("/").filter(Boolean)[0];
return firstSeg || null;
};
var extractYouTubeId = (pathname, searchParams) => {
const parts = pathname.split("/").filter(Boolean);
const [first, second] = parts;
if (first === "embed" && second) return second;
if (first === "shorts" && second) return second;
if (first === "live" && second) return second;
const v = searchParams.get("v");
if (v) return v;
return null;
};
var getYouTubeVideoId = (url) => {
try {
const u = new URL(url);
const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
if (!hostType) return null;
if (hostType === "youtu.be") {
return extractYoutuBeId(u.pathname);
}
return extractYouTubeId(u.pathname, u.searchParams);
} catch {
return null;
}
};
var getYouTubeEmbedUrl = (videoId) => {
return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
};
// src/components/Modal/Modal.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var SIZE_CLASSES2 = {
xs: "max-w-[360px]",
sm: "max-w-[420px]",
md: "max-w-[510px]",
lg: "max-w-[640px]",
xl: "max-w-[970px]"
};
var Modal = ({
isOpen,
onClose,
title,
children,
size = "md",
className = "",
closeOnEscape = true,
footer,
hideCloseButton = false,
variant = "default",
description,
image,
imageAlt,
actionLink,
actionLabel,
contentClassName = ""
}) => {
const titleId = (0, import_react.useId)();
(0, import_react.useEffect)(() => {
if (!isOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
onClose();
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [isOpen, closeOnEscape, onClose]);
(0, import_react.useEffect)(() => {
if (!isOpen) return;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const originalOverflow = document.body.style.overflow;
const originalPaddingRight = document.body.style.paddingRight;
document.body.style.overflow = "hidden";
if (scrollbarWidth > 0) {
document.body.style.paddingRight = `${scrollbarWidth}px`;
const overlay = document.createElement("div");
overlay.id = "modal-scrollbar-overlay";
overlay.style.cssText = `
position: fixed;
top: 0;
right: 0;
width: ${scrollbarWidth}px;
height: 100vh;
background-color: rgb(0 0 0 / 0.6);
z-index: 40;
pointer-events: none;
`;
document.body.appendChild(overlay);
}
return () => {
document.body.style.overflow = originalOverflow;
document.body.style.paddingRight = originalPaddingRight;
const overlay = document.getElementById("modal-scrollbar-overlay");
if (overlay) {
overlay.remove();
}
};
}, [isOpen]);
if (!isOpen) return null;
const sizeClasses = SIZE_CLASSES2[size];
const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
const modalClasses = cn(
baseClasses,
sizeClasses,
dialogResetClasses,
className
);
const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
const handleActionClick = () => {
if (actionLink) {
window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
}
};
if (variant === "activity") {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.X, { size: 18 })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"img",
{
src: image,
alt: imageAlt ?? "",
className: "w-[122px] h-[122px] object-contain"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"h2",
{
id: titleId,
className: "text-lg font-semibold text-text-950 text-center",
children: title
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
actionLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full", children: [
(() => {
const normalized = normalizeUrl(actionLink);
const isYT = isYouTubeUrl(normalized);
if (!isYT) return null;
const id = getYouTubeVideoId(normalized);
if (!id) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"iframe",
{
src: getYouTubeEmbedUrl(id),
className: "w-full aspect-video rounded-lg",
allowFullScreen: true,
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
title: "V\xEDdeo YouTube"
}
);
})(),
!isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
)
] })
] })
]
}
) });
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.X, { size: 18 })
}
)
] }),
children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
]
}
) });
};
var Modal_default = Modal;
// src/components/Text/Text.tsx
var import_jsx_runtime3 = 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_runtime3.jsx)(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/Stepper/Stepper.tsx
var import_phosphor_react2 = require("phosphor-react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var SIZE_CLASSES3 = {
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_runtime4.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_runtime4.jsx)(
"div",
{
className: `
w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}
rounded-sm flex-none
`
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
"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__ */ (0, import_jsx_runtime4.jsx)(
import_phosphor_react2.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_runtime4.jsx)(
Text_default,
{
size: sizeClasses.indicatorTextSize,
weight: "medium",
color: "",
className: cn(stateClasses.indicatorText, "leading-none"),
children: stepNumber
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.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 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_CLASSES3[size];
const steps = currentStep !== void 0 ? calculateStepStates(initialSteps, currentStep) : initialSteps;
return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.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",
"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_runtime4.jsx)(
Step,
{
step,
index,
size,
sizeClasses,
stateClasses,
isLast: index === steps.length - 1,
className: stepClassName
},
step.id
);
})
}
)
]
}
);
};
var Stepper_default = Stepper;
// src/components/Chips/Chips.tsx
var import_phosphor_react3 = require("phosphor-react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var STATE_CLASSES2 = {
default: "bg-background text-text-950 border border-border-100 hover:bg-secondary-50 hover:border-border-300",
selected: "bg-info-background text-primary-950 border-2 border-primary-950 hover:bg-secondary-50 focus-visible:border-0"
};
var Chips = ({
children,
selected = false,
className = "",
disabled,
type = "button",
...props
}) => {
const stateClasses = selected ? STATE_CLASSES2.selected : STATE_CLASSES2.default;
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-normal text-sm px-4 py-2 gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-600 disabled:opacity-40 disabled:cursor-not-allowed";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"button",
{
className: cn(baseClasses, stateClasses, className),
disabled,
type,
...props,
children: [
selected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `flex items-center`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react3.Check, { weight: "bold", size: 16 }) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1", children })
]
}
);
};
var Chips_default = Chips;
// src/components/Input/Input.tsx
var import_phosphor_react4 = require("phosphor-react");
var import_react2 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var SIZE_CLASSES4 = {
small: "text-sm",
medium: "text-md",
large: "text-lg",
"extra-large": "text-xl"
};
var STATE_CLASSES3 = {
default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
error: "border-2 border-indicator-error placeholder:text-text-600",
disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
"read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
};
var VARIANT_CLASSES = {
outlined: "border rounded-lg",
underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
rounded: "border rounded-full"
};
var getActualState = (disabled, readOnly, errorMessage, state) => {
if (disabled) return "disabled";
if (readOnly) return "read-only";
if (errorMessage) return "error";
return state || "default";
};
var getIconSize = (size) => {
const iconSizeClasses = {
small: "w-4 h-4",
medium: "w-5 h-5",
large: "w-6 h-6",
"extra-large": "w-7 h-7"
};
return iconSizeClasses[size] || iconSizeClasses.medium;
};
var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
const isPasswordType = type === "password";
const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
let actualIconRight = iconRight;
let ariaLabel;
if (shouldShowPasswordToggle) {
actualIconRight = showPassword ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react4.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react4.Eye, {});
ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
}
return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
};
var getCombinedClasses = (actualState, variant) => {
const stateClasses = STATE_CLASSES3[actualState];
const variantClasses = VARIANT_CLASSES[variant];
if (actualState === "error" && variant === "underlined") {
return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
}
if (actualState === "read-only" && variant === "underlined") {
return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
}
return `${stateClasses} ${variantClasses}`;
};
var Input = (0, import_react2.forwardRef)(
({
label,
helperText,
errorMessage,
size = "medium",
variant = "outlined",
state = "default",
iconLeft,
iconRight,
className = "",
containerClassName = "",
disabled,
readOnly,
required,
id,
type = "text",
...props
}, ref) => {
const [showPassword, setShowPassword] = (0, import_react2.useState)(false);
const isPasswordType = type === "password";
const actualType = isPasswordType && showPassword ? "text" : type;
const actualState = getActualState(disabled, readOnly, errorMessage, state);
const sizeClasses = SIZE_CLASSES4[size];
const combinedClasses = (0, import_react2.useMemo)(
() => getCombinedClasses(actualState, variant),
[actualState, variant]
);
const iconSize = getIconSize(size);
const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
const generatedId = (0, import_react2.useId)();
const inputId = id ?? `input-${generatedId}`;
const togglePasswordVisibility = () => setShowPassword(!showPassword);
const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
type,
disabled,
readOnly,
showPassword,
iconRight
);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${containerClassName}`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"label",
{
htmlFor: inputId,
className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: iconLeft
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"input",
{
ref,
id: inputId,
type: actualType,
className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
disabled,
readOnly,
required,
"aria-invalid": actualState === "error" ? "true" : void 0,
...props
}
),
actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
type: "button",
className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
onClick: togglePasswordVisibility,
"aria-label": ariaLabel,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
children: actualIconRight
}
)
}
) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: actualIconRight
}
) }))
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
helperText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react4.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
}
);
var Input_default = Input;
// src/components/TextArea/TextArea.tsx
var import_react3 = require("react");
var import_phosphor_react5 = require("phosphor-react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var SIZE_CLASSES5 = {
small: {
textarea: "h-24 text-sm",
// 96px height, 14px font
textSize: "sm"
},
medium: {
textarea: "h-24 text-base",
// 96px height, 16px font
textSize: "md"
},
large: {
textarea: "h-24 text-lg",
// 96px height, 18px font
textSize: "lg"
},
extraLarge: {
textarea: "h-24 text-xl",
// 96px height, 20px font
textSize: "xl"
}
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES4 = {
default: {
base: "border-border-300 bg-background text-text-600",
hover: "hover:border-border-400",
focus: "focus:border-border-500"
},
hovered: {
base: "border-border-400 bg-background text-text-600",
hover: "",
focus: "focus:border-border-500"
},
focused: {
base: "border-2 border-primary-950 bg-background text-text-900",
hover: "",
focus: ""
},
invalid: {
base: "border-2 border-red-700 bg-white text-gray-800",
hover: "hover:border-red-700",
focus: "focus:border-red-700"
},
disabled: {
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
hover: "",
focus: ""
}
};
var TextArea = (0, import_react3.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperMessage,
className = "",
labelClassName = "",
disabled,
id,
onChange,
placeholder,
required,
showCharacterCount = false,
maxLength,
value,
...props
}, ref) => {
const generatedId = (0, import_react3.useId)();
const inputId = id ?? `textarea-${generatedId}`;
const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
const currentLength = typeof value === "string" ? value.length : 0;
const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
const handleChange = (event) => {
onChange?.(event);
};
const handleFocus = (event) => {
setIsFocused(true);
props.onFocus?.(event);
};
const handleBlur = (event) => {
setIsFocused(false);
props.onBlur?.(event);
};
let currentState = disabled ? "disabled" : state;
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
currentState = "focused";
}
const sizeClasses = SIZE_CLASSES5[size];
const stateClasses = STATE_CLASSES4[currentState];
const textareaClasses = cn(
BASE_TEXTAREA_CLASSES,
sizeClasses.textarea,
stateClasses.base,
stateClasses.hover,
stateClasses.focus,
className
);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "medium",
color: "text-text-950",
className: cn("mb-1.5", labelClassName),
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"textarea",
{
ref,
id: inputId,
disabled,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
className: textareaClasses,
placeholder,
required,
maxLength,
value,
...props
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react5.WarningCircle, { size: 16 }),
" ",
errorMessage
] }),
!errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
Text_default,
{
size: "sm",
weight: "normal",
className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
children: [
currentLength,
"/",
maxLength,
" caracteres"
]
}
),
!errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
] });
}
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;
// src/components/Radio/Radio.tsx
var import_react4 = require("react");
var import_zustand = require("zustand");
var import_jsx_runtime8 = require("react/jsx-runtime");
var SIZE_CLASSES6 = {
small: {
radio: "w-5 h-5",
textSize: "sm",
spacing: "gap-1.5",
borderWidth: "border-2",
dotSize: "w-2.5 h-2.5",
labelHeight: "h-5"
},
medium: {
radio: "w-6 h-6",
textSize: "md",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3 h-3",
labelHeight: "h-6"
},
large: {
radio: "w-7 h-7",
textSize: "lg",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3.5 h-3.5",
labelHeight: "h-7"
},
extraLarge: {
radio: "w-8 h-8",
textSize: "xl",
spacing: "gap-3",
borderWidth: "border-2",
dotSize: "w-4 h-4",
labelHeight: "h-8"
}
};
var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES5 = {
default: {
unchecked: "border-border-400 bg-background hover:border-border-500",
checked: "border-primary-950 bg-background hover:border-primary-800"
},
hovered: {
unchecked: "border-border-500 bg-background",
checked: "border-info-700 bg-background"
},
focused: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
invalid: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed",
checked: "border-primary-950 bg-background cursor-not-allowed"
}
};
var DOT_CLASSES = {
default: "bg-primary-950",
hovered: "bg-info-700",
focused: "bg-primary-950",
invalid: "bg-primary-950",
disabled: "bg-primary-950"
};
var Radio = (0, import_react4.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
defaultChecked = false,
disabled,
id,
name,
value,
onChange,
...props
}, ref) => {
const generatedId = (0, import_react4.useId)();
const inputId = id ?? `radio-${generatedId}`;
const inputRef = (0, import_react4.useRef)(null);
const [internalChecked, setInternalChecked] = (0, import_react4.useState)(defaultChecked);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
const newChecked = event.target.checked;
if (!isControlled) {
setInternalChecked(newChecked);
}
if (event.target) {
event.target.blur();
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES6[size];
const actualRadioSize = sizeClasses.radio;
const actualDotSize = sizeClasses.dotSize;
const radioVariant = checked ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES5[currentState][radioVariant];
const getBorderWidth = () => {
if (currentState === "focused") {
return "border-2";
}
return sizeClasses.borderWidth;
};
const borderWidthClass = getBorderWidth();
const radioClasses = cn(
BASE_RADIO_CLASSES,
actualRadioSize,
borderWidthClass,
stylingClasses,
className
);
const dotClasses = cn(
actualDotSize,
"rounded-full",
DOT_CLASSES[currentState],
"transition-all duration-200"
);
const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
const getTextColor = () => {
if (currentState === "disabled") {
return checked ? "text-text-900" : "text-text-600";
}
if (currentState === "focused") {
return "text-text-900";
}
return checked ? "text-text-900" : "text-text-600";
};
const getCursorClass = () => {
return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
};
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
className: cn(
"flex flex-row items-center",
isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
disabled ? "opacity-40" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"input",
{
ref: (node) => {
inputRef.current = node;
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
type: "radio",
id: inputId,
checked,
disabled,
name,
value,
onChange: handleChange,
className: "sr-only",
style: {
position: "absolute",
left: "-9999px",
visibility: "hidden"
},
...props
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
type: "button",
className: radioClasses,
disabled,
"aria-pressed": checked,
onClick: (e) => {
e.preventDefault();
if (!disabled) {
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
onKeyDown: (e) => {
if ((e.key === "Enter" || e.key === " ") && !disabled) {
e.preventDefault();
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: dotClasses })
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.labelHeight,
"flex-1 min-w-0"
),
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: cn(
getCursorClass(),
"select-none leading-normal flex items-center font-roboto truncate",
labelClassName
),
color: getTextColor(),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-text-500",
children: helperText
}
)
] });
}
);
Radio.displayName = "Radio";
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => (0, import_zustand.create)((set, get) => ({
value: defaultValue,
setValue: (value) => {
if (!get().disabled) {
set({ value });
get().onValueChange?.(value);
}
},
onValueChange,
disabled,
name
}));
var useRadioGroupStore = (externalStore) => {
if (!externalStore) {
throw new Error("RadioGroupItem must be used within a RadioGroup");
}
return externalStore;
};
var injectStore = (children, store) => import_react4.Children.map(children, (child) => {
if (!(0, import_react4.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === RadioGroupItem;
return (0, import_react4.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
});
});
var RadioGroup = (0, import_react4.forwardRef)(
({
value: propValue,
defaultValue = "",
onValueChange,
name: propName,
disabled = false,
className = "",
children,
...props
}, ref) => {
const generatedId = (0, import_react4.useId)();
const name = propName || `radio-group-${generatedId}`;
const storeRef = (0, import_react4.useRef)(null);
storeRef.current ??= createRadioGroupStore(
name,
defaultValue,
disabled,
onValueChange
);
const store = storeRef.current;
const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
(0, import_react4.useEffect)(() => {
const currentValue = store.getSta