analytica-frontend-lib 1.0.18 → 1.0.19
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/index.css +109 -0
- package/dist/index.d.mts +75 -32
- package/dist/index.d.ts +75 -32
- package/dist/index.js +221 -129
- package/dist/index.mjs +217 -126
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -206,119 +206,96 @@ var Text = ({
|
|
|
206
206
|
);
|
|
207
207
|
};
|
|
208
208
|
|
|
209
|
-
// src/components/
|
|
210
|
-
import {
|
|
209
|
+
// src/components/Badge/Badge.tsx
|
|
210
|
+
import { Bell } from "phosphor-react";
|
|
211
211
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
212
212
|
var VARIANT_ACTION_CLASSES2 = {
|
|
213
213
|
solid: {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
214
|
+
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
215
|
+
warning: "bg-warning text-warning-800 focus-visible:outline-none",
|
|
216
|
+
success: "bg-success text-success-800 focus-visible:outline-none",
|
|
217
|
+
info: "bg-info text-info-800 focus-visible:outline-none",
|
|
218
|
+
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
|
|
217
219
|
},
|
|
218
220
|
outlined: {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
221
|
+
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
|
|
222
|
+
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
|
|
223
|
+
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
|
|
224
|
+
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
|
|
225
|
+
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
|
|
226
|
+
},
|
|
227
|
+
exams: {
|
|
228
|
+
exam1: "bg-exame-1 text-info-200 focus-visible:outline-none",
|
|
229
|
+
exam2: "bg-exame-2 text-typography-1 focus-visible:outline-none",
|
|
230
|
+
exam3: "bg-exame-3 text-typography-2 focus-visible:outline-none",
|
|
231
|
+
exam4: "bg-exame-4 text-success-700 focus-visible:outline-none"
|
|
232
|
+
},
|
|
233
|
+
resultStatus: {
|
|
234
|
+
negative: "bg-error text-error-800 focus-visible:outline-none",
|
|
235
|
+
positive: "bg-success text-success-800 focus-visible:outline-none"
|
|
236
|
+
},
|
|
237
|
+
notification: "text-primary"
|
|
223
238
|
};
|
|
224
|
-
var
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
239
|
+
var SIZE_CLASSES2 = {
|
|
240
|
+
small: "text-2xs px-2 py-1",
|
|
241
|
+
medium: "text-xs px-2 py-1",
|
|
242
|
+
large: "text-sm px-2 py-1"
|
|
228
243
|
};
|
|
229
|
-
var
|
|
230
|
-
|
|
231
|
-
|
|
244
|
+
var SIZE_CLASSES_ICON = {
|
|
245
|
+
small: "size-3",
|
|
246
|
+
medium: "size-3.5",
|
|
247
|
+
large: "size-4"
|
|
248
|
+
};
|
|
249
|
+
var Badge = ({
|
|
250
|
+
children,
|
|
251
|
+
iconLeft,
|
|
252
|
+
iconRight,
|
|
253
|
+
size = "medium",
|
|
254
|
+
variant = "solid",
|
|
255
|
+
action = "error",
|
|
232
256
|
className = "",
|
|
233
|
-
|
|
234
|
-
title,
|
|
235
|
-
description,
|
|
236
|
-
position = "default",
|
|
257
|
+
notificationActive = false,
|
|
237
258
|
...props
|
|
238
259
|
}) => {
|
|
239
|
-
const
|
|
240
|
-
const
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
260
|
+
const sizeClasses = SIZE_CLASSES2[size];
|
|
261
|
+
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
|
|
262
|
+
const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
|
|
263
|
+
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
|
|
264
|
+
const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
|
|
265
|
+
const baseClassesIcon = "flex items-center";
|
|
266
|
+
if (variant === "notification") {
|
|
267
|
+
return /* @__PURE__ */ jsxs3(
|
|
268
|
+
"div",
|
|
269
|
+
{
|
|
270
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
271
|
+
...props,
|
|
272
|
+
children: [
|
|
273
|
+
/* @__PURE__ */ jsx5(Bell, { size: 24, className: "text-primary-950" }),
|
|
274
|
+
notificationActive && /* @__PURE__ */ jsx5(
|
|
275
|
+
"span",
|
|
276
|
+
{
|
|
277
|
+
"data-testid": "notification-dot",
|
|
278
|
+
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
|
|
279
|
+
}
|
|
280
|
+
)
|
|
281
|
+
]
|
|
282
|
+
}
|
|
283
|
+
);
|
|
284
|
+
}
|
|
251
285
|
return /* @__PURE__ */ jsxs3(
|
|
252
286
|
"div",
|
|
253
287
|
{
|
|
254
|
-
|
|
255
|
-
"aria-live": "assertive",
|
|
256
|
-
"aria-atomic": "true",
|
|
257
|
-
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
|
|
288
|
+
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
258
289
|
...props,
|
|
259
290
|
children: [
|
|
260
|
-
/* @__PURE__ */
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
/* @__PURE__ */ jsx5("p", { className: "font-semibold text-md", children: title }),
|
|
264
|
-
description && /* @__PURE__ */ jsx5("p", { className: "text-md text-text-900", children: description })
|
|
265
|
-
] })
|
|
266
|
-
] }),
|
|
267
|
-
/* @__PURE__ */ jsx5(
|
|
268
|
-
"button",
|
|
269
|
-
{
|
|
270
|
-
onClick: onClose,
|
|
271
|
-
"aria-label": "Dismiss notification",
|
|
272
|
-
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
|
|
273
|
-
children: /* @__PURE__ */ jsx5(X, {})
|
|
274
|
-
}
|
|
275
|
-
)
|
|
291
|
+
iconLeft && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
|
|
292
|
+
children,
|
|
293
|
+
iconRight && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
|
|
276
294
|
]
|
|
277
295
|
}
|
|
278
296
|
);
|
|
279
297
|
};
|
|
280
298
|
|
|
281
|
-
// src/components/Toast/utils/ToastStore.ts
|
|
282
|
-
import { create } from "zustand";
|
|
283
|
-
var useToastStore = create((set) => ({
|
|
284
|
-
toasts: [],
|
|
285
|
-
addToast: (toast) => {
|
|
286
|
-
const id = crypto.randomUUID();
|
|
287
|
-
set((state) => ({
|
|
288
|
-
toasts: [...state.toasts, { id, ...toast }]
|
|
289
|
-
}));
|
|
290
|
-
},
|
|
291
|
-
removeToast: (id) => {
|
|
292
|
-
set((state) => ({
|
|
293
|
-
toasts: state.toasts.filter((t) => t.id !== id)
|
|
294
|
-
}));
|
|
295
|
-
}
|
|
296
|
-
}));
|
|
297
|
-
|
|
298
|
-
// src/components/Toast/utils/Toaster.tsx
|
|
299
|
-
import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
|
|
300
|
-
var Toaster = () => {
|
|
301
|
-
const toasts = useToastStore((state) => state.toasts);
|
|
302
|
-
const removeToast = useToastStore((state) => state.removeToast);
|
|
303
|
-
return /* @__PURE__ */ jsx6(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx6(
|
|
304
|
-
Toast,
|
|
305
|
-
{
|
|
306
|
-
title: toast.title,
|
|
307
|
-
description: toast.description,
|
|
308
|
-
variant: toast.variant,
|
|
309
|
-
action: toast.action,
|
|
310
|
-
position: toast.position,
|
|
311
|
-
onClose: () => removeToast(toast.id)
|
|
312
|
-
},
|
|
313
|
-
toast.id
|
|
314
|
-
)) });
|
|
315
|
-
};
|
|
316
|
-
var useToast = () => {
|
|
317
|
-
const addToast = useToastStore((state) => state.addToast);
|
|
318
|
-
const removeToast = useToastStore((state) => state.removeToast);
|
|
319
|
-
return { addToast, removeToast };
|
|
320
|
-
};
|
|
321
|
-
|
|
322
299
|
// src/components/CheckBox/CheckBox.tsx
|
|
323
300
|
import {
|
|
324
301
|
forwardRef as forwardRef2,
|
|
@@ -326,8 +303,8 @@ import {
|
|
|
326
303
|
useId
|
|
327
304
|
} from "react";
|
|
328
305
|
import { Check, Minus } from "phosphor-react";
|
|
329
|
-
import { jsx as
|
|
330
|
-
var
|
|
306
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
307
|
+
var SIZE_CLASSES3 = {
|
|
331
308
|
small: {
|
|
332
309
|
checkbox: "w-4 h-4",
|
|
333
310
|
// 16px x 16px
|
|
@@ -414,14 +391,14 @@ var CheckBox = forwardRef2(
|
|
|
414
391
|
onChange?.(event);
|
|
415
392
|
};
|
|
416
393
|
const currentState = disabled ? "disabled" : state;
|
|
417
|
-
const sizeClasses =
|
|
394
|
+
const sizeClasses = SIZE_CLASSES3[size];
|
|
418
395
|
const checkVariant = checked || indeterminate ? "checked" : "unchecked";
|
|
419
396
|
const stylingClasses = STATE_CLASSES[currentState][checkVariant];
|
|
420
397
|
const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
|
|
421
398
|
const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
|
|
422
399
|
const renderIcon = () => {
|
|
423
400
|
if (indeterminate) {
|
|
424
|
-
return /* @__PURE__ */
|
|
401
|
+
return /* @__PURE__ */ jsx6(
|
|
425
402
|
Minus,
|
|
426
403
|
{
|
|
427
404
|
size: sizeClasses.iconSize,
|
|
@@ -431,7 +408,7 @@ var CheckBox = forwardRef2(
|
|
|
431
408
|
);
|
|
432
409
|
}
|
|
433
410
|
if (checked) {
|
|
434
|
-
return /* @__PURE__ */
|
|
411
|
+
return /* @__PURE__ */ jsx6(
|
|
435
412
|
Check,
|
|
436
413
|
{
|
|
437
414
|
size: sizeClasses.iconSize,
|
|
@@ -448,7 +425,7 @@ var CheckBox = forwardRef2(
|
|
|
448
425
|
{
|
|
449
426
|
className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
|
|
450
427
|
children: [
|
|
451
|
-
/* @__PURE__ */
|
|
428
|
+
/* @__PURE__ */ jsx6(
|
|
452
429
|
"input",
|
|
453
430
|
{
|
|
454
431
|
ref,
|
|
@@ -461,12 +438,12 @@ var CheckBox = forwardRef2(
|
|
|
461
438
|
...props
|
|
462
439
|
}
|
|
463
440
|
),
|
|
464
|
-
/* @__PURE__ */
|
|
465
|
-
label && /* @__PURE__ */
|
|
441
|
+
/* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
|
|
442
|
+
label && /* @__PURE__ */ jsx6(
|
|
466
443
|
"div",
|
|
467
444
|
{
|
|
468
445
|
className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
|
|
469
|
-
children: /* @__PURE__ */
|
|
446
|
+
children: /* @__PURE__ */ jsx6(
|
|
470
447
|
Text,
|
|
471
448
|
{
|
|
472
449
|
as: "label",
|
|
@@ -483,8 +460,8 @@ var CheckBox = forwardRef2(
|
|
|
483
460
|
]
|
|
484
461
|
}
|
|
485
462
|
),
|
|
486
|
-
errorMessage && /* @__PURE__ */
|
|
487
|
-
helperText && !errorMessage && /* @__PURE__ */
|
|
463
|
+
errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
464
|
+
helperText && !errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
|
|
488
465
|
] });
|
|
489
466
|
}
|
|
490
467
|
);
|
|
@@ -492,23 +469,23 @@ CheckBox.displayName = "CheckBox";
|
|
|
492
469
|
|
|
493
470
|
// src/components/Table/Table.tsx
|
|
494
471
|
import { forwardRef as forwardRef3 } from "react";
|
|
495
|
-
import { jsx as
|
|
472
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
496
473
|
var Table = forwardRef3(
|
|
497
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */
|
|
474
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs5(
|
|
498
475
|
"table",
|
|
499
476
|
{
|
|
500
477
|
ref,
|
|
501
478
|
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
502
479
|
...props,
|
|
503
480
|
children: [
|
|
504
|
-
/* @__PURE__ */
|
|
481
|
+
/* @__PURE__ */ jsx7("caption", { className: "sr-only", children: "My Table" }),
|
|
505
482
|
children
|
|
506
483
|
]
|
|
507
484
|
}
|
|
508
485
|
) })
|
|
509
486
|
);
|
|
510
487
|
Table.displayName = "Table";
|
|
511
|
-
var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
488
|
+
var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
512
489
|
"thead",
|
|
513
490
|
{
|
|
514
491
|
ref,
|
|
@@ -517,7 +494,7 @@ var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
517
494
|
}
|
|
518
495
|
));
|
|
519
496
|
TableHeader.displayName = "TableHeader";
|
|
520
|
-
var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
497
|
+
var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
521
498
|
"tbody",
|
|
522
499
|
{
|
|
523
500
|
ref,
|
|
@@ -526,7 +503,7 @@ var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
526
503
|
}
|
|
527
504
|
));
|
|
528
505
|
TableBody.displayName = "TableBody";
|
|
529
|
-
var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
506
|
+
var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
530
507
|
"tfoot",
|
|
531
508
|
{
|
|
532
509
|
ref,
|
|
@@ -543,7 +520,7 @@ var VARIANT_STATES_ROW = {
|
|
|
543
520
|
};
|
|
544
521
|
var TableRow = forwardRef3(
|
|
545
522
|
({ state = "default", className, ...props }, ref) => {
|
|
546
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ jsx7(
|
|
547
524
|
"tr",
|
|
548
525
|
{
|
|
549
526
|
ref,
|
|
@@ -560,7 +537,7 @@ var TableRow = forwardRef3(
|
|
|
560
537
|
}
|
|
561
538
|
);
|
|
562
539
|
TableRow.displayName = "TableRow";
|
|
563
|
-
var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
540
|
+
var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
564
541
|
"th",
|
|
565
542
|
{
|
|
566
543
|
ref,
|
|
@@ -569,7 +546,7 @@ var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
569
546
|
}
|
|
570
547
|
));
|
|
571
548
|
TableHead.displayName = "TableHead";
|
|
572
|
-
var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
549
|
+
var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
573
550
|
"td",
|
|
574
551
|
{
|
|
575
552
|
ref,
|
|
@@ -578,7 +555,7 @@ var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
578
555
|
}
|
|
579
556
|
));
|
|
580
557
|
TableCell.displayName = "TableCell";
|
|
581
|
-
var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
|
|
558
|
+
var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
|
|
582
559
|
"caption",
|
|
583
560
|
{
|
|
584
561
|
ref,
|
|
@@ -599,7 +576,7 @@ import {
|
|
|
599
576
|
useRef,
|
|
600
577
|
useMemo
|
|
601
578
|
} from "react";
|
|
602
|
-
import { jsx as
|
|
579
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
603
580
|
var DropdownMenuContext = createContext(
|
|
604
581
|
void 0
|
|
605
582
|
);
|
|
@@ -639,14 +616,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
639
616
|
() => ({ open: currentOpen, setOpen }),
|
|
640
617
|
[currentOpen, setOpen]
|
|
641
618
|
);
|
|
642
|
-
return /* @__PURE__ */
|
|
619
|
+
return /* @__PURE__ */ jsx8(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx8("div", { className: "relative", ref: menuRef, children }) });
|
|
643
620
|
};
|
|
644
621
|
var DropdownMenuTrigger = forwardRef4(({ className, children, onClick, ...props }, ref) => {
|
|
645
622
|
const context = useContext(DropdownMenuContext);
|
|
646
623
|
if (!context)
|
|
647
624
|
throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
|
|
648
625
|
const { open, setOpen } = context;
|
|
649
|
-
return /* @__PURE__ */
|
|
626
|
+
return /* @__PURE__ */ jsx8(
|
|
650
627
|
"button",
|
|
651
628
|
{
|
|
652
629
|
ref,
|
|
@@ -678,7 +655,7 @@ var ALIGN_CLASSES = {
|
|
|
678
655
|
center: "left-1/2 -translate-x-1/2",
|
|
679
656
|
end: "right-0"
|
|
680
657
|
};
|
|
681
|
-
var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */
|
|
658
|
+
var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
682
659
|
"fieldset",
|
|
683
660
|
{
|
|
684
661
|
ref,
|
|
@@ -713,7 +690,7 @@ var MenuContent = forwardRef4(
|
|
|
713
690
|
const horizontal = ALIGN_CLASSES[align];
|
|
714
691
|
return `absolute ${vertical} ${horizontal}`;
|
|
715
692
|
};
|
|
716
|
-
return /* @__PURE__ */
|
|
693
|
+
return /* @__PURE__ */ jsx8(
|
|
717
694
|
"div",
|
|
718
695
|
{
|
|
719
696
|
ref,
|
|
@@ -787,7 +764,7 @@ var MenuItem = forwardRef4(
|
|
|
787
764
|
}
|
|
788
765
|
);
|
|
789
766
|
MenuItem.displayName = "MenuItem";
|
|
790
|
-
var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */
|
|
767
|
+
var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
791
768
|
"div",
|
|
792
769
|
{
|
|
793
770
|
ref,
|
|
@@ -799,7 +776,7 @@ MenuSeparator.displayName = "MenuSeparator";
|
|
|
799
776
|
|
|
800
777
|
// src/components/NavButton/NavButton.tsx
|
|
801
778
|
import { forwardRef as forwardRef5 } from "react";
|
|
802
|
-
import { jsx as
|
|
779
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
803
780
|
var NavButton = forwardRef5(
|
|
804
781
|
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
805
782
|
const baseClasses = [
|
|
@@ -837,8 +814,8 @@ var NavButton = forwardRef5(
|
|
|
837
814
|
"aria-pressed": selected,
|
|
838
815
|
...props,
|
|
839
816
|
children: [
|
|
840
|
-
/* @__PURE__ */
|
|
841
|
-
/* @__PURE__ */
|
|
817
|
+
/* @__PURE__ */ jsx9("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
|
|
818
|
+
/* @__PURE__ */ jsx9("span", { className: "whitespace-nowrap", children: label })
|
|
842
819
|
]
|
|
843
820
|
}
|
|
844
821
|
);
|
|
@@ -848,7 +825,7 @@ NavButton.displayName = "NavButton";
|
|
|
848
825
|
|
|
849
826
|
// src/components/IconButton/IconButton.tsx
|
|
850
827
|
import { forwardRef as forwardRef6 } from "react";
|
|
851
|
-
import { jsx as
|
|
828
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
852
829
|
var IconButton = forwardRef6(
|
|
853
830
|
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
|
|
854
831
|
const baseClasses = [
|
|
@@ -881,7 +858,7 @@ var IconButton = forwardRef6(
|
|
|
881
858
|
...activeClasses
|
|
882
859
|
].join(" ");
|
|
883
860
|
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
|
|
884
|
-
return /* @__PURE__ */
|
|
861
|
+
return /* @__PURE__ */ jsx10(
|
|
885
862
|
"button",
|
|
886
863
|
{
|
|
887
864
|
ref,
|
|
@@ -891,13 +868,127 @@ var IconButton = forwardRef6(
|
|
|
891
868
|
"aria-pressed": active,
|
|
892
869
|
"aria-label": ariaLabel,
|
|
893
870
|
...props,
|
|
894
|
-
children: /* @__PURE__ */
|
|
871
|
+
children: /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center", children: icon })
|
|
895
872
|
}
|
|
896
873
|
);
|
|
897
874
|
}
|
|
898
875
|
);
|
|
899
876
|
IconButton.displayName = "IconButton";
|
|
877
|
+
|
|
878
|
+
// src/components/Toast/Toast.tsx
|
|
879
|
+
import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
|
|
880
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
881
|
+
var VARIANT_ACTION_CLASSES3 = {
|
|
882
|
+
solid: {
|
|
883
|
+
warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
|
|
884
|
+
success: "bg-success text-success-800 border-none focus-visible:outline-none",
|
|
885
|
+
info: "bg-info text-info-800 border-none focus-visible:outline-none"
|
|
886
|
+
},
|
|
887
|
+
outlined: {
|
|
888
|
+
warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
|
|
889
|
+
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
|
|
890
|
+
info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
|
|
891
|
+
}
|
|
892
|
+
};
|
|
893
|
+
var iconMap = {
|
|
894
|
+
success: CheckCircle,
|
|
895
|
+
info: Info,
|
|
896
|
+
warning: WarningCircle
|
|
897
|
+
};
|
|
898
|
+
var Toast = ({
|
|
899
|
+
variant = "outlined",
|
|
900
|
+
action = "success",
|
|
901
|
+
className = "",
|
|
902
|
+
onClose,
|
|
903
|
+
title,
|
|
904
|
+
description,
|
|
905
|
+
position = "default",
|
|
906
|
+
...props
|
|
907
|
+
}) => {
|
|
908
|
+
const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
|
|
909
|
+
const positionClasses = {
|
|
910
|
+
"top-left": "fixed top-4 left-4",
|
|
911
|
+
"top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
|
|
912
|
+
"top-right": "fixed top-4 right-4",
|
|
913
|
+
"bottom-left": "fixed bottom-4 left-4",
|
|
914
|
+
"bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
|
|
915
|
+
"bottom-right": "fixed bottom-4 right-4",
|
|
916
|
+
default: ""
|
|
917
|
+
};
|
|
918
|
+
const IconAction = iconMap[action] || iconMap["success"];
|
|
919
|
+
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
|
|
920
|
+
return /* @__PURE__ */ jsxs8(
|
|
921
|
+
"div",
|
|
922
|
+
{
|
|
923
|
+
role: "alert",
|
|
924
|
+
"aria-live": "assertive",
|
|
925
|
+
"aria-atomic": "true",
|
|
926
|
+
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
|
|
927
|
+
...props,
|
|
928
|
+
children: [
|
|
929
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex flex-row items-start gap-3", children: [
|
|
930
|
+
/* @__PURE__ */ jsx11("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx11(IconAction, {}) }),
|
|
931
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start justify-start", children: [
|
|
932
|
+
/* @__PURE__ */ jsx11("p", { className: "font-semibold text-md", children: title }),
|
|
933
|
+
description && /* @__PURE__ */ jsx11("p", { className: "text-md text-text-900", children: description })
|
|
934
|
+
] })
|
|
935
|
+
] }),
|
|
936
|
+
/* @__PURE__ */ jsx11(
|
|
937
|
+
"button",
|
|
938
|
+
{
|
|
939
|
+
onClick: onClose,
|
|
940
|
+
"aria-label": "Dismiss notification",
|
|
941
|
+
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
|
|
942
|
+
children: /* @__PURE__ */ jsx11(X, {})
|
|
943
|
+
}
|
|
944
|
+
)
|
|
945
|
+
]
|
|
946
|
+
}
|
|
947
|
+
);
|
|
948
|
+
};
|
|
949
|
+
|
|
950
|
+
// src/components/Toast/utils/ToastStore.ts
|
|
951
|
+
import { create } from "zustand";
|
|
952
|
+
var useToastStore = create((set) => ({
|
|
953
|
+
toasts: [],
|
|
954
|
+
addToast: (toast) => {
|
|
955
|
+
const id = crypto.randomUUID();
|
|
956
|
+
set((state) => ({
|
|
957
|
+
toasts: [...state.toasts, { id, ...toast }]
|
|
958
|
+
}));
|
|
959
|
+
},
|
|
960
|
+
removeToast: (id) => {
|
|
961
|
+
set((state) => ({
|
|
962
|
+
toasts: state.toasts.filter((t) => t.id !== id)
|
|
963
|
+
}));
|
|
964
|
+
}
|
|
965
|
+
}));
|
|
966
|
+
|
|
967
|
+
// src/components/Toast/utils/Toaster.tsx
|
|
968
|
+
import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
|
|
969
|
+
var Toaster = () => {
|
|
970
|
+
const toasts = useToastStore((state) => state.toasts);
|
|
971
|
+
const removeToast = useToastStore((state) => state.removeToast);
|
|
972
|
+
return /* @__PURE__ */ jsx12(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx12(
|
|
973
|
+
Toast,
|
|
974
|
+
{
|
|
975
|
+
title: toast.title,
|
|
976
|
+
description: toast.description,
|
|
977
|
+
variant: toast.variant,
|
|
978
|
+
action: toast.action,
|
|
979
|
+
position: toast.position,
|
|
980
|
+
onClose: () => removeToast(toast.id)
|
|
981
|
+
},
|
|
982
|
+
toast.id
|
|
983
|
+
)) });
|
|
984
|
+
};
|
|
985
|
+
var useToast = () => {
|
|
986
|
+
const addToast = useToastStore((state) => state.addToast);
|
|
987
|
+
const removeToast = useToastStore((state) => state.removeToast);
|
|
988
|
+
return { addToast, removeToast };
|
|
989
|
+
};
|
|
900
990
|
export {
|
|
991
|
+
Badge,
|
|
901
992
|
Button,
|
|
902
993
|
CheckBox,
|
|
903
994
|
DropdownMenu,
|
package/package.json
CHANGED