analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,307 lines (1,291 loc) • 258 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/RecommendedLessonsHistory/index.ts
var RecommendedLessonsHistory_exports = {};
__export(RecommendedLessonsHistory_exports, {
RecommendedLessonsHistory: () => RecommendedLessonsHistory,
default: () => RecommendedLessonsHistory_default
});
module.exports = __toCommonJS(RecommendedLessonsHistory_exports);
// src/components/RecommendedLessonsHistory/RecommendedLessonsHistory.tsx
var import_react20 = require("react");
var import_phosphor_react14 = 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/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/Button/Button.tsx
var import_jsx_runtime2 = 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_runtime2.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/IconButton/IconButton.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var IconButton = (0, import_react.forwardRef)(
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
const baseClasses = [
"inline-flex",
"items-center",
"justify-center",
"rounded-lg",
"font-medium",
"bg-transparent",
"text-text-950",
"cursor-pointer",
"hover:bg-primary-600",
"hover:text-text",
"focus-visible:outline-none",
"focus-visible:ring-2",
"focus-visible:ring-offset-0",
"focus-visible:ring-indicator-info",
"disabled:opacity-50",
"disabled:cursor-not-allowed",
"disabled:pointer-events-none"
];
const sizeClasses = {
sm: ["w-6", "h-6", "text-sm"],
md: ["w-10", "h-10", "text-base"]
};
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
const allClasses = [
...baseClasses,
...sizeClasses[size],
...activeClasses
].join(" ");
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": active,
"aria-label": ariaLabel,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center", children: icon })
}
);
}
);
IconButton.displayName = "IconButton";
var IconButton_default = IconButton;
// src/components/Badge/Badge.tsx
var import_phosphor_react = require("phosphor-react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES2 = {
solid: {
error: "bg-error-background text-error-700 focus-visible:outline-none",
warning: "bg-warning text-warning-800 focus-visible:outline-none",
success: "bg-success text-success-800 focus-visible:outline-none",
info: "bg-info text-info-800 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
},
outlined: {
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
},
exams: {
exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
},
examsOutlined: {
exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
},
resultStatus: {
negative: "bg-error text-error-800 focus-visible:outline-none",
positive: "bg-success text-success-800 focus-visible:outline-none"
},
notification: "text-primary"
};
var SIZE_CLASSES2 = {
small: "text-2xs px-2 py-1",
medium: "text-xs px-2 py-1",
large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
small: "size-3",
medium: "size-3.5",
large: "size-4"
};
var Badge = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "error",
className = "",
notificationActive = false,
...props
}) => {
const sizeClasses = SIZE_CLASSES2[size];
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
const baseClassesIcon = "flex items-center";
if (variant === "notification") {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
"data-testid": "notification-dot",
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
}
)
]
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/EmptyState/EmptyState.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var EmptyState = ({
image,
title,
description,
buttonText,
buttonIcon,
onButtonClick,
buttonVariant = "solid",
buttonAction = "primary"
}) => {
const displayTitle = title || "Nenhum dado dispon\xEDvel";
const displayDescription = description || "N\xE3o h\xE1 dados para exibir no momento.";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6", children: [
image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Text_default,
{
as: "h2",
className: "text-text-950 font-semibold text-3xl leading-[35px] text-center",
children: displayTitle
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription })
] }),
buttonText && onButtonClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Button_default,
{
variant: buttonVariant,
action: buttonAction,
size: "large",
onClick: onButtonClick,
iconLeft: buttonIcon,
className: "rounded-full px-5 py-2.5",
children: buttonText
}
)
] });
};
var EmptyState_default = EmptyState;
// src/components/Menu/Menu.tsx
var import_zustand = require("zustand");
var import_react2 = require("react");
var import_phosphor_react2 = require("phosphor-react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var createMenuStore = (onValueChange) => (0, import_zustand.create)((set) => ({
value: "",
setValue: (value) => {
set({ value });
onValueChange?.(value);
},
onValueChange
}));
var useMenuStore = (externalStore) => {
if (!externalStore) throw new Error("MenuItem must be inside Menu");
return externalStore;
};
var VARIANT_CLASSES = {
menu: "bg-background shadow-soft-shadow-1 px-6",
menu2: "",
"menu-overflow": "",
breadcrumb: "bg-transparent shadow-none !px-0"
};
var Menu = (0, import_react2.forwardRef)(
({
className,
children,
defaultValue,
value: propValue,
variant = "menu",
onValueChange,
...props
}, ref) => {
const storeRef = (0, import_react2.useRef)(null);
storeRef.current ??= createMenuStore(onValueChange);
const store = storeRef.current;
const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
(0, import_react2.useEffect)(() => {
setValue(propValue ?? defaultValue);
}, [defaultValue, propValue, setValue]);
const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
const variantClasses = VARIANT_CLASSES[variant];
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
ref,
className: `
${baseClasses}
${variantClasses}
${className ?? ""}
`,
...props,
children: injectStore(children, store)
}
);
}
);
Menu.displayName = "Menu";
var MenuContent = (0, import_react2.forwardRef)(
({ className, children, variant = "menu", ...props }, ref) => {
const baseClasses = "w-full flex flex-row items-center gap-2";
const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"ul",
{
ref,
className: `
${baseClasses}
${variantClasses}
${variant == "breadcrumb" ? "flex-wrap" : ""}
${className ?? ""}
`,
style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
...props,
children
}
);
}
);
MenuContent.displayName = "MenuContent";
var MenuItem = (0, import_react2.forwardRef)(
({
className,
children,
value,
disabled = false,
store: externalStore,
variant = "menu",
separator = false,
...props
}, ref) => {
const store = useMenuStore(externalStore);
const { value: selectedValue, setValue } = (0, import_zustand.useStore)(store, (s) => s);
const handleClick = (e) => {
if (!disabled) {
setValue(value);
}
props.onClick?.(e);
};
const commonProps = {
role: "menuitem",
"aria-disabled": disabled,
ref,
onClick: handleClick,
onKeyDown: (e) => {
if (["Enter", " "].includes(e.key)) handleClick(e);
},
tabIndex: disabled ? -1 : 0,
onMouseDown: (e) => {
e.preventDefault();
},
...props
};
const variants = {
menu: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"li",
{
"data-variant": "menu",
className: `
w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
[&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
${className ?? ""}
`,
...commonProps,
children
}
),
menu2: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"li",
{
"data-variant": "menu2",
className: `
w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "" : "pb-4"}
`,
...commonProps,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: cn(
"flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
className
),
children
}
),
selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
]
}
),
"menu-overflow": /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"li",
{
"data-variant": "menu-overflow",
className: `
w-fit flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "" : "pb-4"}
`,
...commonProps,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: cn(
"flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
className
),
children
}
),
selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
]
}
),
breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"li",
{
"data-variant": "breadcrumb",
className: `
flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
focus:outline-none focus:border-indicator-info focus:border-2
${selectedValue === value ? "text-text-950" : "text-text-600"}
${className ?? ""}
`,
...commonProps,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"span",
{
className: cn(
"border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"
),
children
}
),
separator && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_phosphor_react2.CaretRight,
{
size: 16,
className: "text-text-600",
"data-testid": "separator"
}
)
]
}
)
};
return variants[variant] ?? variants["menu"];
}
);
MenuItem.displayName = "MenuItem";
var injectStore = (children, store) => import_react2.Children.map(children, (child) => {
if (!(0, import_react2.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === MenuItem;
return (0, import_react2.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
});
});
// src/components/TableProvider/TableProvider.tsx
var import_react19 = require("react");
// src/components/Table/Table.tsx
var import_react4 = require("react");
var import_phosphor_react4 = require("phosphor-react");
// src/components/NoSearchResult/NoSearchResult.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var NoSearchResult = ({ image, title, description }) => {
const displayTitle = title || "Nenhum resultado encontrado";
const displayDescription = description || "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.";
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-row justify-center items-center gap-8 w-full max-w-4xl min-h-96", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-72 h-72 flex-shrink-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"img",
{
src: image,
alt: "No search results",
className: "w-full h-full object-contain"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-start w-full max-w-md", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-row justify-between items-end px-6 pt-6 pb-4 w-full rounded-t-xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Text_default,
{
as: "h2",
className: "text-text-950 font-semibold text-3xl leading-tight w-full flex items-center",
children: displayTitle
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-row justify-center items-center px-6 gap-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { className: "text-text-600 font-normal text-lg leading-relaxed w-full text-justify", children: displayDescription }) })
] })
] });
};
var NoSearchResult_default = NoSearchResult;
// src/components/Skeleton/Skeleton.tsx
var import_react3 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var SKELETON_ANIMATION_CLASSES = {
pulse: "animate-pulse",
none: ""
};
var SKELETON_VARIANT_CLASSES = {
text: "h-4 bg-background-200 rounded",
circular: "bg-background-200 rounded-full",
rectangular: "bg-background-200",
rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
none: "",
small: "space-y-1",
medium: "space-y-2",
large: "space-y-3"
};
var Skeleton = (0, import_react3.forwardRef)(
({
variant = "text",
width,
height,
animation = "pulse",
lines = 1,
spacing = "none",
className = "",
children,
...props
}, ref) => {
const animationClass = SKELETON_ANIMATION_CLASSES[animation];
const variantClass = SKELETON_VARIANT_CLASSES[variant];
const spacingClass = SPACING_CLASSES[spacing];
const style = {
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height
};
if (variant === "text" && lines > 1) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
ref,
className: cn("flex flex-col", spacingClass, className),
...props,
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
className: cn(variantClass, animationClass),
style: index === lines - 1 ? { width: "60%" } : void 0
},
index
))
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
ref,
className: cn(variantClass, animationClass, className),
style,
...props,
children
}
);
}
);
var SkeletonText = (0, import_react3.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = (0, import_react3.forwardRef)(
({
showAvatar = true,
showTitle = true,
showDescription = true,
showActions = true,
lines = 2,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
ref,
className: cn(
"w-full p-4 bg-background border border-border-200 rounded-lg",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start space-x-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonCircle, { width: 40, height: 40 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { width: "60%", height: 20 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }),
showActions && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonRectangle, { width: 80, height: 32 })
] })
]
}
);
}
);
var SkeletonList = (0, import_react3.forwardRef)(
({
items = 3,
showAvatar = true,
showTitle = true,
showDescription = true,
lines = 1,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonCircle, { width: 32, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { width: "40%", height: 16 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }, index)) });
}
);
var SkeletonTable = (0, import_react3.forwardRef)(
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 20
},
index
)) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 16
},
colIndex
)) }, rowIndex)) })
] });
}
);
// src/components/Table/TablePagination.tsx
var import_phosphor_react3 = require("phosphor-react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var TablePagination = ({
totalItems,
currentPage,
totalPages,
itemsPerPage,
itemsPerPageOptions = [10, 20, 50, 100],
onPageChange,
onItemsPerPageChange,
itemLabel = "itens",
className,
...props
}) => {
const startItem = (currentPage - 1) * itemsPerPage + 1;
const handlePrevious = () => {
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
onPageChange(currentPage + 1);
}
};
const handleItemsPerPageChange = (e) => {
if (onItemsPerPageChange) {
onItemsPerPageChange(Number(e.target.value));
}
};
const isFirstPage = currentPage === 1;
const isLastPage = currentPage === totalPages;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"div",
{
className: cn(
"flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
"sm:justify-between",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
startItem,
" de ",
totalItems,
" ",
itemLabel
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"select",
{
value: itemsPerPage,
onChange: handleItemsPerPageChange,
className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
"aria-label": "Items por p\xE1gina",
children: itemsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("option", { value: option, children: [
option,
" itens"
] }, option))
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_phosphor_react3.CaretDown,
{
size: 14,
weight: "regular",
className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
"P\xE1gina ",
currentPage,
" de ",
totalPages
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"button",
{
onClick: handlePrevious,
disabled: isFirstPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "P\xE1gina anterior",
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react3.CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"button",
{
onClick: handleNext,
disabled: isLastPage,
className: cn(
"flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
),
"aria-label": "Pr\xF3xima p\xE1gina",
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react3.CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
]
}
)
] })
]
}
);
};
TablePagination.displayName = "TablePagination";
var TablePagination_default = TablePagination;
// src/components/Table/Table.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
function useTableSort(data, options = {}) {
const { syncWithUrl = false } = options;
const getInitialState = () => {
if (!syncWithUrl || globalThis.window === void 0) {
return { column: null, direction: null };
}
const params = new URLSearchParams(globalThis.location.search);
const sortBy = params.get("sortBy");
const sort = params.get("sort");
if (sortBy && sort && (sort === "ASC" || sort === "DESC")) {
return {
column: sortBy,
direction: sort.toLowerCase()
};
}
return { column: null, direction: null };
};
const initialState = getInitialState();
const [sortColumn, setSortColumn] = (0, import_react4.useState)(
initialState.column
);
const [sortDirection, setSortDirection] = (0, import_react4.useState)(
initialState.direction
);
(0, import_react4.useEffect)(() => {
if (!syncWithUrl || globalThis.window === void 0) return;
const url = new URL(globalThis.location.href);
const params = url.searchParams;
if (sortColumn && sortDirection) {
params.set("sortBy", sortColumn);
params.set("sort", sortDirection.toUpperCase());
} else {
params.delete("sortBy");
params.delete("sort");
}
globalThis.history.replaceState({}, "", url.toString());
}, [sortColumn, sortDirection, syncWithUrl]);
const handleSort = (column) => {
if (sortColumn === column) {
if (sortDirection === "asc") {
setSortDirection("desc");
} else if (sortDirection === "desc") {
setSortColumn(null);
setSortDirection(null);
}
} else {
setSortColumn(column);
setSortDirection("asc");
}
};
const sortedData = (0, import_react4.useMemo)(() => {
if (!sortColumn || !sortDirection) {
return data;
}
return [...data].sort((a, b) => {
const aValue = a[sortColumn];
const bValue = b[sortColumn];
if (typeof aValue === "string" && typeof bValue === "string") {
const comparison = aValue.localeCompare(bValue);
return sortDirection === "asc" ? comparison : -comparison;
}
if (typeof aValue === "number" && typeof bValue === "number") {
return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
}
return 0;
});
}, [data, sortColumn, sortDirection]);
return { sortedData, sortColumn, sortDirection, handleSort };
}
var renderHeaderElements = (children) => {
return import_react4.Children.map(children, (child) => {
if ((0, import_react4.isValidElement)(child) && (child.type === TableCaption || child.type === TableHeader)) {
return child;
}
return null;
});
};
var getNoSearchResultContent = (config, defaultTitle, defaultDescription) => {
if (config.component) {
return config.component;
}
if (config.image) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
NoSearchResult_default,
{
image: config.image,
title: config.title || defaultTitle,
description: config.description || defaultDescription
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: config.title || defaultTitle }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text-500 text-sm", children: config.description || defaultDescription })
] });
};
var getEmptyStateContent = (config, defaultTitle, defaultDescription) => {
if (config?.component) {
return config.component;
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
EmptyState_default,
{
image: config?.image,
title: config?.title || defaultTitle,
description: config?.description || defaultDescription,
buttonText: config?.buttonText,
buttonIcon: config?.buttonIcon,
onButtonClick: config?.onButtonClick,
buttonVariant: config?.buttonVariant,
buttonAction: config?.buttonAction
}
);
};
var renderTableWrapper = (variant, tableRef, className, children, stateContent, tableProps) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"div",
{
className: cn(
"relative w-full overflow-x-auto",
variant === "default" && "border border-border-200 rounded-xl"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"table",
{
ref: tableRef,
className: cn(
"analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
className
),
...tableProps,
children: renderHeaderElements(children)
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-8 flex justify-center", children: stateContent })
]
}
);
};
var Table = (0, import_react4.forwardRef)(
({
variant = "default",
className,
children,
showLoading = false,
loadingState,
showNoSearchResult = false,
noSearchResultState,
showEmpty = false,
emptyState,
...props
}, ref) => {
const defaultNoSearchResultState = {
title: "Nenhum resultado encontrado",
description: "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave."
};
const defaultEmptyState = {
title: "Nenhum dado dispon\xEDvel",
description: "N\xE3o h\xE1 dados para exibir no momento."
};
const finalNoSearchResultState = noSearchResultState || defaultNoSearchResultState;
const finalEmptyState = emptyState || defaultEmptyState;
if (showLoading) {
const loadingContent = loadingState?.component || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonTable, { rows: 5, columns: 4, showHeader: false });
return renderTableWrapper(
variant,
ref,
className,
children,
loadingContent,
props
);
}
if (showNoSearchResult) {
const noSearchContent = getNoSearchResultContent(
finalNoSearchResultState,
defaultNoSearchResultState.title || "",
defaultNoSearchResultState.description || ""
);
return renderTableWrapper(
variant,
ref,
className,
children,
noSearchContent,
props
);
}
if (showEmpty) {
const emptyContent = getEmptyStateContent(
finalEmptyState,
defaultEmptyState.title || "Nenhum dado dispon\xEDvel",
defaultEmptyState.description || "N\xE3o h\xE1 dados para exibir no momento."
);
return renderTableWrapper(
variant,
ref,
className,
children,
emptyContent,
props
);
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"div",
{
className: cn(
"relative w-full overflow-x-auto",
variant === "default" && "border border-border-200 rounded-xl"
),
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"table",
{
ref,
className: cn(
variant === "default" && "analytica-table",
variant === "default" && "border-separate border-spacing-0",
"w-full caption-bottom text-sm",
className
),
...props,
children: [
!import_react4.Children.toArray(children).some(
(child) => (0, import_react4.isValidElement)(child) && child.type === TableCaption
) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("caption", { className: "sr-only", children: "My Table" }),
children
]
}
)
}
);
}
);
Table.displayName = "Table";
var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"thead",
{
ref,
className: cn("[&_tr:first-child]:border-0", className),
...props
}
));
TableHeader.displayName = "TableHeader";
var TableBody = (0, import_react4.forwardRef)(
({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"tbody",
{
ref,
className: cn(
"[&_tr:last-child]:border-border-200",
variant === "default" && "border-t border-border-200",
className
),
...props
}
)
);
TableBody.displayName = "TableBody";
var TableFooter = (0, import_react4.forwardRef)(
({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"tfoot",
{
ref,
className: cn(
"bg-background-50 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
variant === "default" && "border-t border-border-200",
className
),
...props
}
)
);
TableFooter.displayName = "TableFooter";
var VARIANT_STATES_ROW = {
default: {
default: "border border-border-200",
defaultBorderless: "border-b border-border-200",
borderless: ""
},
selected: {
default: "border-b-2 border-indicator-primary",
defaultBorderless: "border-b border-indicator-primary",
borderless: "bg-indicator-primary/10"
},
invalid: {
default: "border-b-2 border-indicator-error",
defaultBorderless: "border-b border-indicator-error",
borderless: "bg-indicator-error/10"
},
disabled: {
default: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
defaultBorderless: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
borderless: "bg-background-50 opacity-50 cursor-not-allowed"
}
};
var TableRow = (0, import_react4.forwardRef)(
({
variant = "default",
state = "default",
clickable = false,
className,
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"tr",
{
ref,
className: cn(
"transition-colors",
state === "disabled" ? "" : "hover:bg-muted/50",
state === "disabled" || !clickable ? "" : "cursor-pointer",
VARIANT_STATES_ROW[state][variant],
className
),
"aria-disabled": state === "disabled",
...props
}
);
}
);
TableRow.displayName = "TableRow";
var TableHead = (0, import_react4.forwardRef)(
({
className,
sortable = true,
sortDirection = null,
onSort,
children,
...props
}, ref) => {
const handleClick = () => {
if (sortable && onSort) {
onSort();
}
};
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"th",
{
ref,
className: cn(
"h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap",
sortable && "cursor-pointer select-none hover:bg-muted/30",
className
),
onClick: handleClick,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
children,
sortable && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react4.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react4.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
] })
] })
}
);
}
);
TableHead.displayName = "TableHead";
var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"td",
{
ref,
className: cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap",
className
),
...props
}
));
TableCell.displayName = "TableCell";
var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"caption",
{
ref,
className: cn(
"border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
className
),
...props
}
));
TableCaption.displayName = "TableCaption";
var Table_default = Table;
// src/components/Filter/useTableFilter.ts
var import_react5 = require("react");
var useTableFilter = (initialConfigs, options = {}) => {
const { syncWithUrl = false } = options;
const getInitialState = (0, import_react5.useCallback)(() => {
if (!syncWithUrl || globalThis.window === void 0) {
return initialConfigs;
}
const params = new URLSearchParams(globalThis.window.location.search);
const configsWithUrlState = initialConfigs.map((config) => ({
...config,
categories: config.categories.map((category) => {
const urlValue = params.get(`filter_${category.key}`);
const selectedIds = urlValue ? urlValue.split(",").filter(Boolean) : [];
return {
...category,
selectedIds
};
})
}));
return configsWithUrlState;
}, [initialConfigs, syncWithUrl]);
const [filterConfigs, setFilterConfigs] = (0, import_react5.useState)(getInitialState);
const activeFilters = (0, import_react5.useMemo)(() => {
const filters = {};
for (const config of filterConfigs) {
for (const category of config.categories) {
if (category.selectedIds && category.selectedIds.length > 0) {
filters[category.key] = category.selectedIds;
}
}
}
return filters;
}, [filterConfigs]);
const hasActiveFilters = Object.keys(activeFi