analytica-frontend-lib 1.0.22 → 1.0.24
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/chunk-CETSS3RA.mjs +52 -0
- package/dist/chunk-GSEO6POW.mjs +93 -0
- package/dist/chunk-IB4IJ3GF.mjs +60 -0
- package/dist/chunk-IH5TEC64.mjs +35 -0
- package/dist/chunk-JNPCNN67.mjs +86 -0
- package/dist/chunk-KT6HNGRV.mjs +241 -0
- package/dist/chunk-LYOJCBOM.mjs +195 -0
- package/dist/chunk-MI5FIRHM.mjs +75 -0
- package/dist/chunk-NWGRQN6R.mjs +108 -0
- package/dist/chunk-QODEDLAX.mjs +142 -0
- package/dist/chunk-QOFMTSHE.mjs +44 -0
- package/dist/chunk-RPYPJ5O5.mjs +55 -0
- package/dist/chunk-SESX5OEP.mjs +57 -0
- package/dist/chunk-TT3VCQGR.mjs +53 -0
- package/dist/chunk-WIOCQOM7.mjs +20 -0
- package/dist/client-components.d.mts +9 -0
- package/dist/client-components.d.ts +9 -0
- package/dist/client-components.js +755 -0
- package/dist/client-components.mjs +39 -0
- package/dist/components/Alert/Alert.d.mts +13 -0
- package/dist/components/Alert/Alert.d.ts +13 -0
- package/dist/components/Alert/Alert.js +158 -0
- package/dist/components/Alert/Alert.mjs +7 -0
- package/dist/components/Badge/Badge.d.mts +47 -0
- package/dist/components/Badge/Badge.d.ts +47 -0
- package/dist/components/Badge/Badge.js +117 -0
- package/dist/components/Badge/Badge.mjs +6 -0
- package/dist/components/Button/Button.d.mts +46 -0
- package/dist/components/Button/Button.d.ts +46 -0
- package/dist/components/Button/Button.js +84 -0
- package/dist/components/Button/Button.mjs +6 -0
- package/dist/components/CheckBox/CheckBox.d.mts +74 -0
- package/dist/components/CheckBox/CheckBox.d.ts +74 -0
- package/dist/components/CheckBox/CheckBox.js +264 -0
- package/dist/components/CheckBox/CheckBox.mjs +8 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.mts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +29 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +262 -0
- package/dist/components/DropdownMenu/DropdownMenu.mjs +17 -0
- package/dist/components/IconButton/IconButton.d.mts +77 -0
- package/dist/components/IconButton/IconButton.d.ts +77 -0
- package/dist/components/IconButton/IconButton.js +79 -0
- package/dist/components/IconButton/IconButton.mjs +6 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.mts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.d.ts +35 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.js +68 -0
- package/dist/components/IconRoundedButton/IconRoundedButton.mjs +6 -0
- package/dist/components/NavButton/NavButton.d.mts +58 -0
- package/dist/components/NavButton/NavButton.d.ts +58 -0
- package/dist/components/NavButton/NavButton.js +76 -0
- package/dist/components/NavButton/NavButton.mjs +6 -0
- package/dist/components/SelectionButton/SelectionButton.d.mts +58 -0
- package/dist/components/SelectionButton/SelectionButton.d.ts +58 -0
- package/dist/components/SelectionButton/SelectionButton.js +81 -0
- package/dist/components/SelectionButton/SelectionButton.mjs +6 -0
- package/dist/components/Table/Table.d.mts +17 -0
- package/dist/components/Table/Table.d.ts +17 -0
- package/dist/components/Table/Table.js +139 -0
- package/dist/components/Table/Table.mjs +20 -0
- package/dist/components/Text/Text.d.mts +59 -0
- package/dist/components/Text/Text.d.ts +59 -0
- package/dist/components/Text/Text.js +77 -0
- package/dist/components/Text/Text.mjs +6 -0
- package/dist/components/TextArea/TextArea.d.mts +69 -0
- package/dist/components/TextArea/TextArea.d.ts +69 -0
- package/dist/components/TextArea/TextArea.js +211 -0
- package/dist/components/TextArea/TextArea.mjs +8 -0
- package/dist/components/Toast/Toast.d.mts +17 -0
- package/dist/components/Toast/Toast.d.ts +17 -0
- package/dist/components/Toast/Toast.js +100 -0
- package/dist/components/Toast/Toast.mjs +7 -0
- package/dist/components/Toast/utils/ToastStore.d.mts +19 -0
- package/dist/components/Toast/utils/ToastStore.d.ts +19 -0
- package/dist/components/Toast/utils/ToastStore.js +44 -0
- package/dist/components/Toast/utils/ToastStore.mjs +6 -0
- package/dist/components/Toast/utils/Toaster.d.mts +11 -0
- package/dist/components/Toast/utils/Toaster.d.ts +11 -0
- package/dist/components/Toast/utils/Toaster.js +145 -0
- package/dist/components/Toast/utils/Toaster.mjs +11 -0
- package/dist/index.d.mts +168 -355
- package/dist/index.d.ts +168 -355
- package/dist/index.js +341 -936
- package/dist/index.mjs +340 -941
- package/dist/server-components.d.mts +11 -0
- package/dist/server-components.d.ts +11 -0
- package/dist/server-components.js +629 -0
- package/dist/server-components.mjs +52 -0
- package/package.json +76 -3
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
22
|
+
var DropdownMenu_exports = {};
|
|
23
|
+
__export(DropdownMenu_exports, {
|
|
24
|
+
DropdownMenu: () => DropdownMenu,
|
|
25
|
+
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
26
|
+
MenuContent: () => MenuContent,
|
|
27
|
+
MenuItem: () => MenuItem,
|
|
28
|
+
MenuLabel: () => MenuLabel,
|
|
29
|
+
MenuSeparator: () => MenuSeparator
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(DropdownMenu_exports);
|
|
32
|
+
var import_react = require("react");
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var DropdownMenuContext = (0, import_react.createContext)(
|
|
35
|
+
void 0
|
|
36
|
+
);
|
|
37
|
+
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
38
|
+
const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
|
|
39
|
+
const isControlled = open !== void 0;
|
|
40
|
+
const currentOpen = isControlled ? open : internalOpen;
|
|
41
|
+
const setOpen = (0, import_react.useCallback)(
|
|
42
|
+
(newOpen) => {
|
|
43
|
+
if (onOpenChange) onOpenChange(newOpen);
|
|
44
|
+
if (!isControlled) setInternalOpen(newOpen);
|
|
45
|
+
},
|
|
46
|
+
[isControlled, onOpenChange]
|
|
47
|
+
);
|
|
48
|
+
const menuRef = (0, import_react.useRef)(null);
|
|
49
|
+
const handleArrowDownOrArrowUp = (event) => {
|
|
50
|
+
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
51
|
+
if (menuContent) {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
const items = Array.from(
|
|
54
|
+
menuContent.querySelectorAll(
|
|
55
|
+
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
56
|
+
)
|
|
57
|
+
).filter((el) => el instanceof HTMLElement);
|
|
58
|
+
if (items.length === 0) return;
|
|
59
|
+
const focusedItem = document.activeElement;
|
|
60
|
+
const currentIndex = items.findIndex((item) => item === focusedItem);
|
|
61
|
+
let nextIndex;
|
|
62
|
+
if (event.key === "ArrowDown") {
|
|
63
|
+
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
64
|
+
} else {
|
|
65
|
+
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
66
|
+
}
|
|
67
|
+
items[nextIndex]?.focus();
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const handleDownkey = (event) => {
|
|
71
|
+
if (event.key === "Escape") {
|
|
72
|
+
setOpen(false);
|
|
73
|
+
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
74
|
+
handleArrowDownOrArrowUp(event);
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const handleClickOutside = (event) => {
|
|
78
|
+
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
79
|
+
setOpen(false);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
(0, import_react.useEffect)(() => {
|
|
83
|
+
if (currentOpen) {
|
|
84
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
85
|
+
document.addEventListener("keydown", handleDownkey);
|
|
86
|
+
}
|
|
87
|
+
return () => {
|
|
88
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
89
|
+
document.removeEventListener("keydown", handleDownkey);
|
|
90
|
+
};
|
|
91
|
+
}, [currentOpen]);
|
|
92
|
+
const value = (0, import_react.useMemo)(
|
|
93
|
+
() => ({ open: currentOpen, setOpen }),
|
|
94
|
+
[currentOpen, setOpen]
|
|
95
|
+
);
|
|
96
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative", ref: menuRef, children }) });
|
|
97
|
+
};
|
|
98
|
+
var DropdownMenuTrigger = (0, import_react.forwardRef)(({ className, children, onClick, ...props }, ref) => {
|
|
99
|
+
const context = (0, import_react.useContext)(DropdownMenuContext);
|
|
100
|
+
if (!context)
|
|
101
|
+
throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
|
|
102
|
+
const { open, setOpen } = context;
|
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
|
+
"button",
|
|
105
|
+
{
|
|
106
|
+
ref,
|
|
107
|
+
className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
|
|
108
|
+
onClick: (e) => {
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
setOpen(!open);
|
|
111
|
+
if (onClick) onClick(e);
|
|
112
|
+
},
|
|
113
|
+
"aria-expanded": open,
|
|
114
|
+
...props,
|
|
115
|
+
children
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
});
|
|
119
|
+
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
120
|
+
var ITEM_SIZE_CLASSES = {
|
|
121
|
+
small: "text-sm",
|
|
122
|
+
medium: "text-md"
|
|
123
|
+
};
|
|
124
|
+
var SIDE_CLASSES = {
|
|
125
|
+
top: "bottom-full",
|
|
126
|
+
right: "top-full",
|
|
127
|
+
bottom: "top-full",
|
|
128
|
+
left: "top-full"
|
|
129
|
+
};
|
|
130
|
+
var ALIGN_CLASSES = {
|
|
131
|
+
start: "left-0",
|
|
132
|
+
center: "left-1/2 -translate-x-1/2",
|
|
133
|
+
end: "right-0"
|
|
134
|
+
};
|
|
135
|
+
var MenuLabel = (0, import_react.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
136
|
+
"fieldset",
|
|
137
|
+
{
|
|
138
|
+
ref,
|
|
139
|
+
role: "group",
|
|
140
|
+
className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
|
|
141
|
+
...props
|
|
142
|
+
}
|
|
143
|
+
));
|
|
144
|
+
MenuLabel.displayName = "MenuLabel";
|
|
145
|
+
var MenuContent = (0, import_react.forwardRef)(
|
|
146
|
+
({
|
|
147
|
+
className,
|
|
148
|
+
align = "start",
|
|
149
|
+
side = "bottom",
|
|
150
|
+
sideOffset = 4,
|
|
151
|
+
children,
|
|
152
|
+
...props
|
|
153
|
+
}, ref) => {
|
|
154
|
+
const { open } = (0, import_react.useContext)(DropdownMenuContext);
|
|
155
|
+
const [isVisible, setIsVisible] = (0, import_react.useState)(open);
|
|
156
|
+
(0, import_react.useEffect)(() => {
|
|
157
|
+
if (open) {
|
|
158
|
+
setIsVisible(true);
|
|
159
|
+
} else {
|
|
160
|
+
const timer = setTimeout(() => setIsVisible(false), 200);
|
|
161
|
+
return () => clearTimeout(timer);
|
|
162
|
+
}
|
|
163
|
+
}, [open]);
|
|
164
|
+
if (!isVisible) return null;
|
|
165
|
+
const getPositionClasses = () => {
|
|
166
|
+
const vertical = SIDE_CLASSES[side];
|
|
167
|
+
const horizontal = ALIGN_CLASSES[align];
|
|
168
|
+
return `absolute ${vertical} ${horizontal}`;
|
|
169
|
+
};
|
|
170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
|
+
"div",
|
|
172
|
+
{
|
|
173
|
+
ref,
|
|
174
|
+
role: "menu",
|
|
175
|
+
className: `
|
|
176
|
+
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
|
|
177
|
+
${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
|
|
178
|
+
${getPositionClasses()}
|
|
179
|
+
${className}
|
|
180
|
+
`,
|
|
181
|
+
style: {
|
|
182
|
+
marginTop: side === "bottom" ? sideOffset : void 0,
|
|
183
|
+
marginBottom: side === "top" ? sideOffset : void 0,
|
|
184
|
+
marginLeft: side === "right" ? sideOffset : void 0,
|
|
185
|
+
marginRight: side === "left" ? sideOffset : void 0
|
|
186
|
+
},
|
|
187
|
+
...props,
|
|
188
|
+
children
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
MenuContent.displayName = "MenuContent";
|
|
194
|
+
var MenuItem = (0, import_react.forwardRef)(
|
|
195
|
+
({
|
|
196
|
+
className,
|
|
197
|
+
inset,
|
|
198
|
+
size = "small",
|
|
199
|
+
children,
|
|
200
|
+
iconRight,
|
|
201
|
+
iconLeft,
|
|
202
|
+
disabled = false,
|
|
203
|
+
onClick,
|
|
204
|
+
...props
|
|
205
|
+
}, ref) => {
|
|
206
|
+
const sizeClasses = ITEM_SIZE_CLASSES[size];
|
|
207
|
+
const handleClick = (e) => {
|
|
208
|
+
if (disabled) {
|
|
209
|
+
e.preventDefault();
|
|
210
|
+
e.stopPropagation();
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
213
|
+
onClick?.(e);
|
|
214
|
+
};
|
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
216
|
+
"div",
|
|
217
|
+
{
|
|
218
|
+
ref,
|
|
219
|
+
role: "menuitem",
|
|
220
|
+
"aria-disabled": disabled,
|
|
221
|
+
className: `
|
|
222
|
+
focus-visible:bg-background-50
|
|
223
|
+
relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
|
|
224
|
+
${inset && "pl-8"}
|
|
225
|
+
${sizeClasses}
|
|
226
|
+
${className}
|
|
227
|
+
${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
228
|
+
`,
|
|
229
|
+
onClick: handleClick,
|
|
230
|
+
onKeyDown: (e) => {
|
|
231
|
+
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
232
|
+
},
|
|
233
|
+
tabIndex: disabled ? -1 : 0,
|
|
234
|
+
...props,
|
|
235
|
+
children: [
|
|
236
|
+
iconLeft,
|
|
237
|
+
children,
|
|
238
|
+
iconRight
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
);
|
|
244
|
+
MenuItem.displayName = "MenuItem";
|
|
245
|
+
var MenuSeparator = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
246
|
+
"div",
|
|
247
|
+
{
|
|
248
|
+
ref,
|
|
249
|
+
className: `my-1 h-px bg-border-200 ${className}`,
|
|
250
|
+
...props
|
|
251
|
+
}
|
|
252
|
+
));
|
|
253
|
+
MenuSeparator.displayName = "MenuSeparator";
|
|
254
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
255
|
+
0 && (module.exports = {
|
|
256
|
+
DropdownMenu,
|
|
257
|
+
DropdownMenuTrigger,
|
|
258
|
+
MenuContent,
|
|
259
|
+
MenuItem,
|
|
260
|
+
MenuLabel,
|
|
261
|
+
MenuSeparator
|
|
262
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
DropdownMenu,
|
|
4
|
+
DropdownMenuTrigger,
|
|
5
|
+
MenuContent,
|
|
6
|
+
MenuItem,
|
|
7
|
+
MenuLabel,
|
|
8
|
+
MenuSeparator
|
|
9
|
+
} from "../../chunk-KT6HNGRV.mjs";
|
|
10
|
+
export {
|
|
11
|
+
DropdownMenu,
|
|
12
|
+
DropdownMenuTrigger,
|
|
13
|
+
MenuContent,
|
|
14
|
+
MenuItem,
|
|
15
|
+
MenuLabel,
|
|
16
|
+
MenuSeparator
|
|
17
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* IconButton component props interface
|
|
6
|
+
*/
|
|
7
|
+
type IconButtonProps = {
|
|
8
|
+
/** Ícone a ser exibido no botão */
|
|
9
|
+
icon: ReactNode;
|
|
10
|
+
/** Tamanho do botão */
|
|
11
|
+
size?: 'sm' | 'md';
|
|
12
|
+
/** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
|
|
13
|
+
active?: boolean;
|
|
14
|
+
/** Additional CSS classes to apply */
|
|
15
|
+
className?: string;
|
|
16
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
|
+
/**
|
|
18
|
+
* IconButton component for Analytica Ensino platforms
|
|
19
|
+
*
|
|
20
|
+
* Um botão compacto apenas com ícone, ideal para menus dropdown,
|
|
21
|
+
* barras de ferramentas e ações secundárias.
|
|
22
|
+
* Oferece dois tamanhos com estilo consistente.
|
|
23
|
+
* Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
|
|
24
|
+
* Compatível com Next.js 15 e React 19.
|
|
25
|
+
* Suporta forwardRef para acesso programático ao elemento DOM.
|
|
26
|
+
*
|
|
27
|
+
* @param icon - O ícone a ser exibido no botão
|
|
28
|
+
* @param size - Tamanho do botão (sm, md)
|
|
29
|
+
* @param active - Estado ativo/selecionado do botão
|
|
30
|
+
* @param className - Classes CSS adicionais
|
|
31
|
+
* @param props - Todos os outros atributos HTML padrão de button
|
|
32
|
+
* @returns Um elemento button compacto estilizado apenas com ícone
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <IconButton
|
|
37
|
+
* icon={<MoreVerticalIcon />}
|
|
38
|
+
* size="sm"
|
|
39
|
+
* onClick={() => openMenu()}
|
|
40
|
+
* />
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
|
|
46
|
+
* <IconButton
|
|
47
|
+
* icon={<BoldIcon />}
|
|
48
|
+
* active={isBold}
|
|
49
|
+
* onClick={toggleBold}
|
|
50
|
+
* />
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* // Usando ref para controle programático
|
|
56
|
+
* const buttonRef = useRef<HTMLButtonElement>(null);
|
|
57
|
+
*
|
|
58
|
+
* <IconButton
|
|
59
|
+
* ref={buttonRef}
|
|
60
|
+
* icon={<EditIcon />}
|
|
61
|
+
* size="md"
|
|
62
|
+
* onClick={() => startEditing()}
|
|
63
|
+
* />
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
declare const IconButton: react.ForwardRefExoticComponent<{
|
|
67
|
+
/** Ícone a ser exibido no botão */
|
|
68
|
+
icon: ReactNode;
|
|
69
|
+
/** Tamanho do botão */
|
|
70
|
+
size?: "sm" | "md";
|
|
71
|
+
/** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
|
|
72
|
+
active?: boolean;
|
|
73
|
+
/** Additional CSS classes to apply */
|
|
74
|
+
className?: string;
|
|
75
|
+
} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
|
|
77
|
+
export { IconButton, type IconButtonProps };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* IconButton component props interface
|
|
6
|
+
*/
|
|
7
|
+
type IconButtonProps = {
|
|
8
|
+
/** Ícone a ser exibido no botão */
|
|
9
|
+
icon: ReactNode;
|
|
10
|
+
/** Tamanho do botão */
|
|
11
|
+
size?: 'sm' | 'md';
|
|
12
|
+
/** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
|
|
13
|
+
active?: boolean;
|
|
14
|
+
/** Additional CSS classes to apply */
|
|
15
|
+
className?: string;
|
|
16
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
|
+
/**
|
|
18
|
+
* IconButton component for Analytica Ensino platforms
|
|
19
|
+
*
|
|
20
|
+
* Um botão compacto apenas com ícone, ideal para menus dropdown,
|
|
21
|
+
* barras de ferramentas e ações secundárias.
|
|
22
|
+
* Oferece dois tamanhos com estilo consistente.
|
|
23
|
+
* Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
|
|
24
|
+
* Compatível com Next.js 15 e React 19.
|
|
25
|
+
* Suporta forwardRef para acesso programático ao elemento DOM.
|
|
26
|
+
*
|
|
27
|
+
* @param icon - O ícone a ser exibido no botão
|
|
28
|
+
* @param size - Tamanho do botão (sm, md)
|
|
29
|
+
* @param active - Estado ativo/selecionado do botão
|
|
30
|
+
* @param className - Classes CSS adicionais
|
|
31
|
+
* @param props - Todos os outros atributos HTML padrão de button
|
|
32
|
+
* @returns Um elemento button compacto estilizado apenas com ícone
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <IconButton
|
|
37
|
+
* icon={<MoreVerticalIcon />}
|
|
38
|
+
* size="sm"
|
|
39
|
+
* onClick={() => openMenu()}
|
|
40
|
+
* />
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
|
|
46
|
+
* <IconButton
|
|
47
|
+
* icon={<BoldIcon />}
|
|
48
|
+
* active={isBold}
|
|
49
|
+
* onClick={toggleBold}
|
|
50
|
+
* />
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* // Usando ref para controle programático
|
|
56
|
+
* const buttonRef = useRef<HTMLButtonElement>(null);
|
|
57
|
+
*
|
|
58
|
+
* <IconButton
|
|
59
|
+
* ref={buttonRef}
|
|
60
|
+
* icon={<EditIcon />}
|
|
61
|
+
* size="md"
|
|
62
|
+
* onClick={() => startEditing()}
|
|
63
|
+
* />
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
declare const IconButton: react.ForwardRefExoticComponent<{
|
|
67
|
+
/** Ícone a ser exibido no botão */
|
|
68
|
+
icon: ReactNode;
|
|
69
|
+
/** Tamanho do botão */
|
|
70
|
+
size?: "sm" | "md";
|
|
71
|
+
/** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
|
|
72
|
+
active?: boolean;
|
|
73
|
+
/** Additional CSS classes to apply */
|
|
74
|
+
className?: string;
|
|
75
|
+
} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
|
|
77
|
+
export { IconButton, type IconButtonProps };
|
|
@@ -0,0 +1,79 @@
|
|
|
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/IconButton/IconButton.tsx
|
|
21
|
+
var IconButton_exports = {};
|
|
22
|
+
__export(IconButton_exports, {
|
|
23
|
+
IconButton: () => IconButton
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(IconButton_exports);
|
|
26
|
+
var import_react = require("react");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
var IconButton = (0, import_react.forwardRef)(
|
|
29
|
+
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
|
|
30
|
+
const baseClasses = [
|
|
31
|
+
"inline-flex",
|
|
32
|
+
"items-center",
|
|
33
|
+
"justify-center",
|
|
34
|
+
"rounded-lg",
|
|
35
|
+
"font-medium",
|
|
36
|
+
"bg-transparent",
|
|
37
|
+
"text-text-950",
|
|
38
|
+
"cursor-pointer",
|
|
39
|
+
"hover:bg-primary-600",
|
|
40
|
+
"hover:text-text",
|
|
41
|
+
"focus-visible:outline-none",
|
|
42
|
+
"focus-visible:ring-2",
|
|
43
|
+
"focus-visible:ring-offset-0",
|
|
44
|
+
"focus-visible:ring-indicator-info",
|
|
45
|
+
"disabled:opacity-50",
|
|
46
|
+
"disabled:cursor-not-allowed",
|
|
47
|
+
"disabled:pointer-events-none"
|
|
48
|
+
];
|
|
49
|
+
const sizeClasses = {
|
|
50
|
+
sm: ["w-6", "h-6", "text-sm"],
|
|
51
|
+
md: ["w-10", "h-10", "text-base"]
|
|
52
|
+
};
|
|
53
|
+
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
|
|
54
|
+
const allClasses = [
|
|
55
|
+
...baseClasses,
|
|
56
|
+
...sizeClasses[size],
|
|
57
|
+
...activeClasses
|
|
58
|
+
].join(" ");
|
|
59
|
+
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
"button",
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
type: "button",
|
|
65
|
+
className: `${allClasses} ${className}`,
|
|
66
|
+
disabled,
|
|
67
|
+
"aria-pressed": active,
|
|
68
|
+
"aria-label": ariaLabel,
|
|
69
|
+
...props,
|
|
70
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center justify-center", children: icon })
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
IconButton.displayName = "IconButton";
|
|
76
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
77
|
+
0 && (module.exports = {
|
|
78
|
+
IconButton
|
|
79
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* IconRoundedButton component props interface
|
|
6
|
+
*/
|
|
7
|
+
type IconRoundedButtonProps = {
|
|
8
|
+
/** Ícone a ser exibido no botão */
|
|
9
|
+
icon: ReactNode;
|
|
10
|
+
/** Additional CSS classes to apply */
|
|
11
|
+
className?: string;
|
|
12
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
13
|
+
/**
|
|
14
|
+
* IconRoundedButton component for Analytica Ensino platforms
|
|
15
|
+
*
|
|
16
|
+
* Um botão redondo simples que exibe apenas um ícone.
|
|
17
|
+
* Ideal para ações como navegação, fechar, editar, etc.
|
|
18
|
+
* Compatível com Next.js 15 e React 19.
|
|
19
|
+
*
|
|
20
|
+
* @param icon - O ícone a ser exibido no botão
|
|
21
|
+
* @param className - Classes CSS adicionais
|
|
22
|
+
* @param props - Todos os outros atributos HTML padrão de button
|
|
23
|
+
* @returns Um elemento button estilizado e redondo
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <IconRoundedButton
|
|
28
|
+
* icon={<ChevronRightIcon />}
|
|
29
|
+
* onClick={() => console.log('clicked')}
|
|
30
|
+
* />
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { IconRoundedButton };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* IconRoundedButton component props interface
|
|
6
|
+
*/
|
|
7
|
+
type IconRoundedButtonProps = {
|
|
8
|
+
/** Ícone a ser exibido no botão */
|
|
9
|
+
icon: ReactNode;
|
|
10
|
+
/** Additional CSS classes to apply */
|
|
11
|
+
className?: string;
|
|
12
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
13
|
+
/**
|
|
14
|
+
* IconRoundedButton component for Analytica Ensino platforms
|
|
15
|
+
*
|
|
16
|
+
* Um botão redondo simples que exibe apenas um ícone.
|
|
17
|
+
* Ideal para ações como navegação, fechar, editar, etc.
|
|
18
|
+
* Compatível com Next.js 15 e React 19.
|
|
19
|
+
*
|
|
20
|
+
* @param icon - O ícone a ser exibido no botão
|
|
21
|
+
* @param className - Classes CSS adicionais
|
|
22
|
+
* @param props - Todos os outros atributos HTML padrão de button
|
|
23
|
+
* @returns Um elemento button estilizado e redondo
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <IconRoundedButton
|
|
28
|
+
* icon={<ChevronRightIcon />}
|
|
29
|
+
* onClick={() => console.log('clicked')}
|
|
30
|
+
* />
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { IconRoundedButton };
|
|
@@ -0,0 +1,68 @@
|
|
|
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/IconRoundedButton/IconRoundedButton.tsx
|
|
21
|
+
var IconRoundedButton_exports = {};
|
|
22
|
+
__export(IconRoundedButton_exports, {
|
|
23
|
+
IconRoundedButton: () => IconRoundedButton
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(IconRoundedButton_exports);
|
|
26
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
var IconRoundedButton = ({
|
|
28
|
+
icon,
|
|
29
|
+
className = "",
|
|
30
|
+
disabled,
|
|
31
|
+
...props
|
|
32
|
+
}) => {
|
|
33
|
+
const baseClasses = [
|
|
34
|
+
"inline-flex",
|
|
35
|
+
"items-center",
|
|
36
|
+
"justify-center",
|
|
37
|
+
"w-8",
|
|
38
|
+
"h-8",
|
|
39
|
+
"rounded-full",
|
|
40
|
+
"cursor-pointer",
|
|
41
|
+
"border",
|
|
42
|
+
"border-background-200",
|
|
43
|
+
"bg-background",
|
|
44
|
+
"text-text-950",
|
|
45
|
+
"hover:shadow-hard-shadow-1",
|
|
46
|
+
"focus-visible:outline-none",
|
|
47
|
+
"focus-visible:shadow-hard-shadow-1",
|
|
48
|
+
"focus-visible:ring-2",
|
|
49
|
+
"focus-visible:ring-indicator-info",
|
|
50
|
+
"focus-visible:ring-offset-0",
|
|
51
|
+
"disabled:opacity-50",
|
|
52
|
+
"disabled:cursor-not-allowed"
|
|
53
|
+
].join(" ");
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
"button",
|
|
56
|
+
{
|
|
57
|
+
type: "button",
|
|
58
|
+
className: `${baseClasses} ${className}`,
|
|
59
|
+
disabled,
|
|
60
|
+
...props,
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
};
|
|
65
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
66
|
+
0 && (module.exports = {
|
|
67
|
+
IconRoundedButton
|
|
68
|
+
});
|