analytica-frontend-lib 1.2.22 → 1.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlertManager/index.css +20 -0
- package/dist/AlertManager/index.css.map +1 -1
- package/dist/AlertManagerView/index.js +149 -114
- package/dist/AlertManagerView/index.js.map +1 -1
- package/dist/AlertManagerView/index.mjs +149 -114
- package/dist/AlertManagerView/index.mjs.map +1 -1
- package/dist/EmptyState/index.d.mts +65 -0
- package/dist/EmptyState/index.d.ts +65 -0
- package/dist/EmptyState/index.js +185 -0
- package/dist/EmptyState/index.js.map +1 -0
- package/dist/EmptyState/index.mjs +162 -0
- package/dist/EmptyState/index.mjs.map +1 -0
- package/dist/Table/index.d.mts +1 -1
- package/dist/Table/index.d.ts +1 -1
- package/dist/Table/index.js +124 -89
- package/dist/Table/index.js.map +1 -1
- package/dist/Table/index.mjs +124 -89
- package/dist/Table/index.mjs.map +1 -1
- package/dist/TableProvider/index.css +20 -0
- package/dist/TableProvider/index.css.map +1 -1
- package/dist/TableProvider/index.d.mts +1 -1
- package/dist/TableProvider/index.d.ts +1 -1
- package/dist/TableProvider/index.js +484 -449
- package/dist/TableProvider/index.js.map +1 -1
- package/dist/TableProvider/index.mjs +484 -449
- package/dist/TableProvider/index.mjs.map +1 -1
- package/dist/{TableProvider-DyhwEkPT.d.mts → TableProvider-BnAnv3OV.d.mts} +12 -4
- package/dist/{TableProvider-48a6wb7j.d.ts → TableProvider-GfPlLqzg.d.ts} +12 -4
- package/dist/index.css +20 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1041 -1004
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1040 -1004
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +20 -0
- package/dist/styles.css.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
21
|
+
var EmptyState_exports = {};
|
|
22
|
+
__export(EmptyState_exports, {
|
|
23
|
+
default: () => EmptyState_default
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(EmptyState_exports);
|
|
26
|
+
|
|
27
|
+
// src/utils/utils.ts
|
|
28
|
+
var import_clsx = require("clsx");
|
|
29
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
30
|
+
function cn(...inputs) {
|
|
31
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// src/components/Text/Text.tsx
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var Text = ({
|
|
37
|
+
children,
|
|
38
|
+
size = "md",
|
|
39
|
+
weight = "normal",
|
|
40
|
+
color = "text-text-950",
|
|
41
|
+
as,
|
|
42
|
+
className = "",
|
|
43
|
+
...props
|
|
44
|
+
}) => {
|
|
45
|
+
let sizeClasses = "";
|
|
46
|
+
let weightClasses = "";
|
|
47
|
+
const sizeClassMap = {
|
|
48
|
+
"2xs": "text-2xs",
|
|
49
|
+
xs: "text-xs",
|
|
50
|
+
sm: "text-sm",
|
|
51
|
+
md: "text-md",
|
|
52
|
+
lg: "text-lg",
|
|
53
|
+
xl: "text-xl",
|
|
54
|
+
"2xl": "text-2xl",
|
|
55
|
+
"3xl": "text-3xl",
|
|
56
|
+
"4xl": "text-4xl",
|
|
57
|
+
"5xl": "text-5xl",
|
|
58
|
+
"6xl": "text-6xl"
|
|
59
|
+
};
|
|
60
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
61
|
+
const weightClassMap = {
|
|
62
|
+
hairline: "font-hairline",
|
|
63
|
+
light: "font-light",
|
|
64
|
+
normal: "font-normal",
|
|
65
|
+
medium: "font-medium",
|
|
66
|
+
semibold: "font-semibold",
|
|
67
|
+
bold: "font-bold",
|
|
68
|
+
extrabold: "font-extrabold",
|
|
69
|
+
black: "font-black"
|
|
70
|
+
};
|
|
71
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
72
|
+
const baseClasses = "font-primary";
|
|
73
|
+
const Component = as ?? "p";
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
75
|
+
Component,
|
|
76
|
+
{
|
|
77
|
+
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
|
|
78
|
+
...props,
|
|
79
|
+
children
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
var Text_default = Text;
|
|
84
|
+
|
|
85
|
+
// src/components/Button/Button.tsx
|
|
86
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
87
|
+
var VARIANT_ACTION_CLASSES = {
|
|
88
|
+
solid: {
|
|
89
|
+
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",
|
|
90
|
+
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",
|
|
91
|
+
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"
|
|
92
|
+
},
|
|
93
|
+
outline: {
|
|
94
|
+
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",
|
|
95
|
+
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",
|
|
96
|
+
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"
|
|
97
|
+
},
|
|
98
|
+
link: {
|
|
99
|
+
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",
|
|
100
|
+
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",
|
|
101
|
+
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"
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
var SIZE_CLASSES = {
|
|
105
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
106
|
+
small: "text-sm px-4 py-2.5",
|
|
107
|
+
medium: "text-md px-5 py-2.5",
|
|
108
|
+
large: "text-lg px-6 py-3",
|
|
109
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
110
|
+
};
|
|
111
|
+
var Button = ({
|
|
112
|
+
children,
|
|
113
|
+
iconLeft,
|
|
114
|
+
iconRight,
|
|
115
|
+
size = "medium",
|
|
116
|
+
variant = "solid",
|
|
117
|
+
action = "primary",
|
|
118
|
+
className = "",
|
|
119
|
+
disabled,
|
|
120
|
+
type = "button",
|
|
121
|
+
...props
|
|
122
|
+
}) => {
|
|
123
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
124
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
125
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
127
|
+
"button",
|
|
128
|
+
{
|
|
129
|
+
className: cn(baseClasses, variantClasses, sizeClasses, className),
|
|
130
|
+
disabled,
|
|
131
|
+
type,
|
|
132
|
+
...props,
|
|
133
|
+
children: [
|
|
134
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
135
|
+
children,
|
|
136
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
};
|
|
141
|
+
var Button_default = Button;
|
|
142
|
+
|
|
143
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
144
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
145
|
+
var EmptyState = ({
|
|
146
|
+
image,
|
|
147
|
+
title,
|
|
148
|
+
description,
|
|
149
|
+
buttonText,
|
|
150
|
+
buttonIcon,
|
|
151
|
+
onButtonClick,
|
|
152
|
+
buttonVariant = "solid",
|
|
153
|
+
buttonAction = "primary"
|
|
154
|
+
}) => {
|
|
155
|
+
const displayTitle = title || "Nenhum dado dispon\xEDvel";
|
|
156
|
+
const displayDescription = description || "N\xE3o h\xE1 dados para exibir no momento.";
|
|
157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6", children: [
|
|
158
|
+
image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }),
|
|
159
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [
|
|
160
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
161
|
+
Text_default,
|
|
162
|
+
{
|
|
163
|
+
as: "h2",
|
|
164
|
+
className: "text-text-950 font-semibold text-3xl leading-[35px] text-center",
|
|
165
|
+
children: displayTitle
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription })
|
|
169
|
+
] }),
|
|
170
|
+
buttonText && onButtonClick && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
171
|
+
Button_default,
|
|
172
|
+
{
|
|
173
|
+
variant: buttonVariant,
|
|
174
|
+
action: buttonAction,
|
|
175
|
+
size: "large",
|
|
176
|
+
onClick: onButtonClick,
|
|
177
|
+
iconLeft: buttonIcon,
|
|
178
|
+
className: "rounded-full px-5 py-2.5",
|
|
179
|
+
children: buttonText
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] });
|
|
183
|
+
};
|
|
184
|
+
var EmptyState_default = EmptyState;
|
|
185
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/EmptyState/EmptyState.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport Text from '../Text/Text';\nimport Button from '../Button/Button';\n\nexport interface EmptyStateProps {\n /**\n * Image source for the illustration (optional)\n */\n image?: string;\n /**\n * Title text to display\n * @default \"Nenhum dado disponível\"\n */\n title?: string;\n /**\n * Description text to display below the title\n * @default \"Não há dados para exibir no momento.\"\n */\n description?: string;\n /**\n * Button text (optional - if not provided, button won't be displayed)\n */\n buttonText?: string;\n /**\n * Icon to display on the left side of the button\n */\n buttonIcon?: ReactNode;\n /**\n * Callback function when button is clicked\n */\n onButtonClick?: () => void;\n /**\n * Button variant\n * @default \"solid\"\n */\n buttonVariant?: 'solid' | 'outline' | 'link';\n /**\n * Button action color\n * @default \"primary\"\n */\n buttonAction?: 'primary' | 'positive' | 'negative';\n}\n\n/**\n * Component displayed when there is no data to show (empty state)\n * Shows an illustration with customizable title, description, and optional button in horizontal layout\n *\n * @example\n * ```tsx\n * import { EmptyState } from 'analytica-frontend-lib';\n * import activityImage from './assets/activity.png';\n * import { Plus } from 'phosphor-react';\n *\n * <EmptyState\n * image={activityImage}\n * title=\"Incentive sua turma ao aprendizado\"\n * description=\"Crie uma nova atividade e ajude seus alunos a colocarem o conteúdo em prática!\"\n * buttonText=\"Criar atividade\"\n * buttonIcon={<Plus size={18} />}\n * buttonVariant=\"outline\"\n * onButtonClick={handleCreateActivity}\n * />\n * ```\n */\nconst EmptyState = ({\n image,\n title,\n description,\n buttonText,\n buttonIcon,\n onButtonClick,\n buttonVariant = 'solid',\n buttonAction = 'primary',\n}: EmptyStateProps) => {\n const displayTitle = title || 'Nenhum dado disponível';\n const displayDescription =\n description || 'Não há dados para exibir no momento.';\n\n return (\n <div className=\"flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6\">\n {/* Illustration */}\n {image && (\n <img src={image} alt={displayTitle} className=\"w-[170px] h-[150px]\" />\n )}\n\n {/* Text Content Container */}\n <div className=\"flex flex-col items-center gap-4 w-full max-w-[600px] px-6\">\n {/* Title */}\n <Text\n as=\"h2\"\n className=\"text-text-950 font-semibold text-3xl leading-[35px] text-center\"\n >\n {displayTitle}\n </Text>\n\n {/* Description */}\n <Text className=\"text-text-600 font-normal text-[18px] leading-[27px] text-center\">\n {displayDescription}\n </Text>\n </div>\n\n {/* Button */}\n {buttonText && onButtonClick && (\n <Button\n variant={buttonVariant}\n action={buttonAction}\n size=\"large\"\n onClick={onButtonClick}\n iconLeft={buttonIcon}\n className=\"rounded-full px-5 py-2.5\"\n >\n {buttonText}\n </Button>\n )}\n </div>\n );\n};\n\nexport default EmptyState;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n","import { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n outline: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n link: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n} as const;\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n 'extra-small': 'text-xs px-3.5 py-2',\n small: 'text-sm px-4 py-2.5',\n medium: 'text-md px-5 py-2.5',\n large: 'text-lg px-6 py-3',\n 'extra-large': 'text-lg px-7 py-3.5',\n} as const;\n\n/**\n * Button component props interface\n */\ntype ButtonProps = {\n /** Content to be displayed inside the button */\n children: ReactNode;\n /** Ícone à esquerda do texto */\n iconLeft?: ReactNode;\n /** Ícone à direita do texto */\n iconRight?: ReactNode;\n /** Size of the button */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n /** Visual variant of the button */\n variant?: 'solid' | 'outline' | 'link';\n /** Action type of the button */\n action?: 'primary' | 'positive' | 'negative';\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Button component for Analytica Ensino platforms\n *\n * A flexible button component with multiple variants, sizes and actions.\n *\n * @param children - The content to display inside the button\n * @param size - The size variant (extra-small, small, medium, large, extra-large)\n * @param variant - The visual style variant (solid, outline, link)\n * @param action - The action type (primary, positive, negative)\n * @param className - Additional CSS classes\n * @param props - All other standard button HTML attributes\n * @returns A styled button element\n *\n * @example\n * ```tsx\n * <Button variant=\"solid\" action=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n * Click me\n * </Button>\n * ```\n */\nconst Button = ({\n children,\n iconLeft,\n iconRight,\n size = 'medium',\n variant = 'solid',\n action = 'primary',\n className = '',\n disabled,\n type = 'button',\n ...props\n}: ButtonProps) => {\n // Get classes from lookup tables\n const sizeClasses = SIZE_CLASSES[size];\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const baseClasses =\n 'inline-flex items-center justify-center rounded-full cursor-pointer font-medium';\n\n return (\n <button\n className={cn(baseClasses, variantClasses, sizeClasses, className)}\n disabled={disabled}\n type={type}\n {...props}\n >\n {iconLeft && <span className=\"mr-2 flex items-center\">{iconLeft}</span>}\n {children}\n {iconRight && <span className=\"ml-2 flex items-center\">{iconRight}</span>}\n </button>\n );\n};\n\nexport default Button;\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
// src/utils/utils.ts
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
function cn(...inputs) {
|
|
5
|
+
return twMerge(clsx(inputs));
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// src/components/Text/Text.tsx
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var Text = ({
|
|
11
|
+
children,
|
|
12
|
+
size = "md",
|
|
13
|
+
weight = "normal",
|
|
14
|
+
color = "text-text-950",
|
|
15
|
+
as,
|
|
16
|
+
className = "",
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
let sizeClasses = "";
|
|
20
|
+
let weightClasses = "";
|
|
21
|
+
const sizeClassMap = {
|
|
22
|
+
"2xs": "text-2xs",
|
|
23
|
+
xs: "text-xs",
|
|
24
|
+
sm: "text-sm",
|
|
25
|
+
md: "text-md",
|
|
26
|
+
lg: "text-lg",
|
|
27
|
+
xl: "text-xl",
|
|
28
|
+
"2xl": "text-2xl",
|
|
29
|
+
"3xl": "text-3xl",
|
|
30
|
+
"4xl": "text-4xl",
|
|
31
|
+
"5xl": "text-5xl",
|
|
32
|
+
"6xl": "text-6xl"
|
|
33
|
+
};
|
|
34
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
35
|
+
const weightClassMap = {
|
|
36
|
+
hairline: "font-hairline",
|
|
37
|
+
light: "font-light",
|
|
38
|
+
normal: "font-normal",
|
|
39
|
+
medium: "font-medium",
|
|
40
|
+
semibold: "font-semibold",
|
|
41
|
+
bold: "font-bold",
|
|
42
|
+
extrabold: "font-extrabold",
|
|
43
|
+
black: "font-black"
|
|
44
|
+
};
|
|
45
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
46
|
+
const baseClasses = "font-primary";
|
|
47
|
+
const Component = as ?? "p";
|
|
48
|
+
return /* @__PURE__ */ jsx(
|
|
49
|
+
Component,
|
|
50
|
+
{
|
|
51
|
+
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
|
|
52
|
+
...props,
|
|
53
|
+
children
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
var Text_default = Text;
|
|
58
|
+
|
|
59
|
+
// src/components/Button/Button.tsx
|
|
60
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
61
|
+
var VARIANT_ACTION_CLASSES = {
|
|
62
|
+
solid: {
|
|
63
|
+
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",
|
|
64
|
+
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",
|
|
65
|
+
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"
|
|
66
|
+
},
|
|
67
|
+
outline: {
|
|
68
|
+
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",
|
|
69
|
+
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",
|
|
70
|
+
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"
|
|
71
|
+
},
|
|
72
|
+
link: {
|
|
73
|
+
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",
|
|
74
|
+
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",
|
|
75
|
+
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"
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
var SIZE_CLASSES = {
|
|
79
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
80
|
+
small: "text-sm px-4 py-2.5",
|
|
81
|
+
medium: "text-md px-5 py-2.5",
|
|
82
|
+
large: "text-lg px-6 py-3",
|
|
83
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
84
|
+
};
|
|
85
|
+
var Button = ({
|
|
86
|
+
children,
|
|
87
|
+
iconLeft,
|
|
88
|
+
iconRight,
|
|
89
|
+
size = "medium",
|
|
90
|
+
variant = "solid",
|
|
91
|
+
action = "primary",
|
|
92
|
+
className = "",
|
|
93
|
+
disabled,
|
|
94
|
+
type = "button",
|
|
95
|
+
...props
|
|
96
|
+
}) => {
|
|
97
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
98
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
99
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
100
|
+
return /* @__PURE__ */ jsxs(
|
|
101
|
+
"button",
|
|
102
|
+
{
|
|
103
|
+
className: cn(baseClasses, variantClasses, sizeClasses, className),
|
|
104
|
+
disabled,
|
|
105
|
+
type,
|
|
106
|
+
...props,
|
|
107
|
+
children: [
|
|
108
|
+
iconLeft && /* @__PURE__ */ jsx2("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
109
|
+
children,
|
|
110
|
+
iconRight && /* @__PURE__ */ jsx2("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
};
|
|
115
|
+
var Button_default = Button;
|
|
116
|
+
|
|
117
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
118
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
119
|
+
var EmptyState = ({
|
|
120
|
+
image,
|
|
121
|
+
title,
|
|
122
|
+
description,
|
|
123
|
+
buttonText,
|
|
124
|
+
buttonIcon,
|
|
125
|
+
onButtonClick,
|
|
126
|
+
buttonVariant = "solid",
|
|
127
|
+
buttonAction = "primary"
|
|
128
|
+
}) => {
|
|
129
|
+
const displayTitle = title || "Nenhum dado dispon\xEDvel";
|
|
130
|
+
const displayDescription = description || "N\xE3o h\xE1 dados para exibir no momento.";
|
|
131
|
+
return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6", children: [
|
|
132
|
+
image && /* @__PURE__ */ jsx3("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }),
|
|
133
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [
|
|
134
|
+
/* @__PURE__ */ jsx3(
|
|
135
|
+
Text_default,
|
|
136
|
+
{
|
|
137
|
+
as: "h2",
|
|
138
|
+
className: "text-text-950 font-semibold text-3xl leading-[35px] text-center",
|
|
139
|
+
children: displayTitle
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
/* @__PURE__ */ jsx3(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription })
|
|
143
|
+
] }),
|
|
144
|
+
buttonText && onButtonClick && /* @__PURE__ */ jsx3(
|
|
145
|
+
Button_default,
|
|
146
|
+
{
|
|
147
|
+
variant: buttonVariant,
|
|
148
|
+
action: buttonAction,
|
|
149
|
+
size: "large",
|
|
150
|
+
onClick: onButtonClick,
|
|
151
|
+
iconLeft: buttonIcon,
|
|
152
|
+
className: "rounded-full px-5 py-2.5",
|
|
153
|
+
children: buttonText
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
] });
|
|
157
|
+
};
|
|
158
|
+
var EmptyState_default = EmptyState;
|
|
159
|
+
export {
|
|
160
|
+
EmptyState_default as default
|
|
161
|
+
};
|
|
162
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Button/Button.tsx","../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n","import { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n outline: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n link: {\n primary:\n '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',\n positive:\n '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',\n negative:\n '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',\n },\n} as const;\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n 'extra-small': 'text-xs px-3.5 py-2',\n small: 'text-sm px-4 py-2.5',\n medium: 'text-md px-5 py-2.5',\n large: 'text-lg px-6 py-3',\n 'extra-large': 'text-lg px-7 py-3.5',\n} as const;\n\n/**\n * Button component props interface\n */\ntype ButtonProps = {\n /** Content to be displayed inside the button */\n children: ReactNode;\n /** Ícone à esquerda do texto */\n iconLeft?: ReactNode;\n /** Ícone à direita do texto */\n iconRight?: ReactNode;\n /** Size of the button */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n /** Visual variant of the button */\n variant?: 'solid' | 'outline' | 'link';\n /** Action type of the button */\n action?: 'primary' | 'positive' | 'negative';\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Button component for Analytica Ensino platforms\n *\n * A flexible button component with multiple variants, sizes and actions.\n *\n * @param children - The content to display inside the button\n * @param size - The size variant (extra-small, small, medium, large, extra-large)\n * @param variant - The visual style variant (solid, outline, link)\n * @param action - The action type (primary, positive, negative)\n * @param className - Additional CSS classes\n * @param props - All other standard button HTML attributes\n * @returns A styled button element\n *\n * @example\n * ```tsx\n * <Button variant=\"solid\" action=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n * Click me\n * </Button>\n * ```\n */\nconst Button = ({\n children,\n iconLeft,\n iconRight,\n size = 'medium',\n variant = 'solid',\n action = 'primary',\n className = '',\n disabled,\n type = 'button',\n ...props\n}: ButtonProps) => {\n // Get classes from lookup tables\n const sizeClasses = SIZE_CLASSES[size];\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const baseClasses =\n 'inline-flex items-center justify-center rounded-full cursor-pointer font-medium';\n\n return (\n <button\n className={cn(baseClasses, variantClasses, sizeClasses, className)}\n disabled={disabled}\n type={type}\n {...props}\n >\n {iconLeft && <span className=\"mr-2 flex items-center\">{iconLeft}</span>}\n {children}\n {iconRight && <span className=\"ml-2 flex items-center\">{iconRight}</span>}\n </button>\n );\n};\n\nexport default Button;\n","import { type ReactNode } from 'react';\nimport Text from '../Text/Text';\nimport Button from '../Button/Button';\n\nexport interface EmptyStateProps {\n /**\n * Image source for the illustration (optional)\n */\n image?: string;\n /**\n * Title text to display\n * @default \"Nenhum dado disponível\"\n */\n title?: string;\n /**\n * Description text to display below the title\n * @default \"Não há dados para exibir no momento.\"\n */\n description?: string;\n /**\n * Button text (optional - if not provided, button won't be displayed)\n */\n buttonText?: string;\n /**\n * Icon to display on the left side of the button\n */\n buttonIcon?: ReactNode;\n /**\n * Callback function when button is clicked\n */\n onButtonClick?: () => void;\n /**\n * Button variant\n * @default \"solid\"\n */\n buttonVariant?: 'solid' | 'outline' | 'link';\n /**\n * Button action color\n * @default \"primary\"\n */\n buttonAction?: 'primary' | 'positive' | 'negative';\n}\n\n/**\n * Component displayed when there is no data to show (empty state)\n * Shows an illustration with customizable title, description, and optional button in horizontal layout\n *\n * @example\n * ```tsx\n * import { EmptyState } from 'analytica-frontend-lib';\n * import activityImage from './assets/activity.png';\n * import { Plus } from 'phosphor-react';\n *\n * <EmptyState\n * image={activityImage}\n * title=\"Incentive sua turma ao aprendizado\"\n * description=\"Crie uma nova atividade e ajude seus alunos a colocarem o conteúdo em prática!\"\n * buttonText=\"Criar atividade\"\n * buttonIcon={<Plus size={18} />}\n * buttonVariant=\"outline\"\n * onButtonClick={handleCreateActivity}\n * />\n * ```\n */\nconst EmptyState = ({\n image,\n title,\n description,\n buttonText,\n buttonIcon,\n onButtonClick,\n buttonVariant = 'solid',\n buttonAction = 'primary',\n}: EmptyStateProps) => {\n const displayTitle = title || 'Nenhum dado disponível';\n const displayDescription =\n description || 'Não há dados para exibir no momento.';\n\n return (\n <div className=\"flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6\">\n {/* Illustration */}\n {image && (\n <img src={image} alt={displayTitle} className=\"w-[170px] h-[150px]\" />\n )}\n\n {/* Text Content Container */}\n <div className=\"flex flex-col items-center gap-4 w-full max-w-[600px] px-6\">\n {/* Title */}\n <Text\n as=\"h2\"\n className=\"text-text-950 font-semibold text-3xl leading-[35px] text-center\"\n >\n {displayTitle}\n </Text>\n\n {/* Description */}\n <Text className=\"text-text-600 font-normal text-[18px] leading-[27px] text-center\">\n {displayDescription}\n </Text>\n </div>\n\n {/* Button */}\n {buttonText && onButtonClick && (\n <Button\n variant={buttonVariant}\n action={buttonAction}\n size=\"large\"\n onClick={onButtonClick}\n iconLeft={buttonIcon}\n className=\"rounded-full px-5 py-2.5\"\n >\n {buttonText}\n </Button>\n )}\n </div>\n );\n};\n\nexport default EmptyState;\n"],"mappings":"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","names":["jsx","jsx","jsxs"]}
|
package/dist/Table/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import react__default, { HTMLAttributes, ThHTMLAttributes } from 'react';
|
|
2
|
-
import { L as LoadingStateConfig, N as NoSearchResultConfig, E as EmptyStateConfig } from '../TableProvider-
|
|
2
|
+
import { L as LoadingStateConfig, N as NoSearchResultConfig, E as EmptyStateConfig } from '../TableProvider-BnAnv3OV.mjs';
|
|
3
3
|
export { default as TablePagination, TablePaginationProps } from './TablePagination/index.mjs';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '../CheckBoxGroup-9n5C0OH4.mjs';
|
package/dist/Table/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import react__default, { HTMLAttributes, ThHTMLAttributes } from 'react';
|
|
2
|
-
import { L as LoadingStateConfig, N as NoSearchResultConfig, E as EmptyStateConfig } from '../TableProvider-
|
|
2
|
+
import { L as LoadingStateConfig, N as NoSearchResultConfig, E as EmptyStateConfig } from '../TableProvider-GfPlLqzg.js';
|
|
3
3
|
export { default as TablePagination, TablePaginationProps } from './TablePagination/index.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '../CheckBoxGroup-9n5C0OH4.js';
|