analytica-frontend-lib 1.0.25 → 1.0.26
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/Badge/Badge.js +2 -2
- package/dist/Badge/Badge.mjs +2 -2
- package/dist/Toast/Toast.js +2 -2
- package/dist/Toast/Toast.mjs +1 -1
- package/dist/Toast/utils/ToastStore.d.mts +1 -1
- package/dist/Toast/utils/ToastStore.d.ts +1 -1
- package/dist/Toast/utils/Toaster.d.mts +8 -3
- package/dist/Toast/utils/Toaster.d.ts +8 -3
- package/dist/Toast/utils/Toaster.js +2 -2
- package/dist/Toast/utils/Toaster.mjs +1 -1
- package/dist/{chunk-MI5FIRHM.mjs → chunk-XYTNJU4A.mjs} +2 -2
- package/dist/index.css +14 -10
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +129 -223
- package/dist/index.mjs +94 -180
- package/package.json +19 -3
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { Minus, Check, Bell, WarningCircle, Info, CheckCircle, X, XCircle } from 'phosphor-react';
|
|
3
|
+
import { forwardRef, useId, useState, createContext, useContext, useEffect, useCallback, useRef, useMemo } from 'react';
|
|
4
|
+
import { create } from 'zustand';
|
|
5
|
+
|
|
1
6
|
// src/components/Text/Text.tsx
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
7
|
var Text = ({
|
|
4
8
|
children,
|
|
5
9
|
size = "md",
|
|
@@ -47,9 +51,6 @@ var Text = ({
|
|
|
47
51
|
}
|
|
48
52
|
);
|
|
49
53
|
};
|
|
50
|
-
|
|
51
|
-
// src/components/Button/Button.tsx
|
|
52
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
53
54
|
var VARIANT_ACTION_CLASSES = {
|
|
54
55
|
solid: {
|
|
55
56
|
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",
|
|
@@ -97,17 +98,13 @@ var Button = ({
|
|
|
97
98
|
type,
|
|
98
99
|
...props,
|
|
99
100
|
children: [
|
|
100
|
-
iconLeft && /* @__PURE__ */
|
|
101
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
101
102
|
children,
|
|
102
|
-
iconRight && /* @__PURE__ */
|
|
103
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
103
104
|
]
|
|
104
105
|
}
|
|
105
106
|
);
|
|
106
107
|
};
|
|
107
|
-
|
|
108
|
-
// src/components/Badge/Badge.tsx
|
|
109
|
-
import { Bell } from "phosphor-react";
|
|
110
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
111
108
|
var VARIANT_ACTION_CLASSES2 = {
|
|
112
109
|
solid: {
|
|
113
110
|
error: "bg-error text-error-700 focus-visible:outline-none",
|
|
@@ -124,7 +121,7 @@ var VARIANT_ACTION_CLASSES2 = {
|
|
|
124
121
|
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
|
|
125
122
|
},
|
|
126
123
|
exams: {
|
|
127
|
-
exam1: "bg-exam-1 text-info-
|
|
124
|
+
exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
|
|
128
125
|
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
|
|
129
126
|
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
|
|
130
127
|
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
|
|
@@ -160,17 +157,17 @@ var Badge = ({
|
|
|
160
157
|
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
|
|
161
158
|
const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
|
|
162
159
|
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
|
|
163
|
-
const baseClasses = "inline-flex items-center justify-center rounded-xs font-
|
|
160
|
+
const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
|
|
164
161
|
const baseClassesIcon = "flex items-center";
|
|
165
162
|
if (variant === "notification") {
|
|
166
|
-
return /* @__PURE__ */
|
|
163
|
+
return /* @__PURE__ */ jsxs(
|
|
167
164
|
"div",
|
|
168
165
|
{
|
|
169
166
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
170
167
|
...props,
|
|
171
168
|
children: [
|
|
172
|
-
/* @__PURE__ */
|
|
173
|
-
notificationActive && /* @__PURE__ */
|
|
169
|
+
/* @__PURE__ */ jsx(Bell, { size: 24, className: "text-primary-950" }),
|
|
170
|
+
notificationActive && /* @__PURE__ */ jsx(
|
|
174
171
|
"span",
|
|
175
172
|
{
|
|
176
173
|
"data-testid": "notification-dot",
|
|
@@ -181,23 +178,19 @@ var Badge = ({
|
|
|
181
178
|
}
|
|
182
179
|
);
|
|
183
180
|
}
|
|
184
|
-
return /* @__PURE__ */
|
|
181
|
+
return /* @__PURE__ */ jsxs(
|
|
185
182
|
"div",
|
|
186
183
|
{
|
|
187
184
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
188
185
|
...props,
|
|
189
186
|
children: [
|
|
190
|
-
iconLeft && /* @__PURE__ */
|
|
187
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
|
|
191
188
|
children,
|
|
192
|
-
iconRight && /* @__PURE__ */
|
|
189
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
|
|
193
190
|
]
|
|
194
191
|
}
|
|
195
192
|
);
|
|
196
193
|
};
|
|
197
|
-
|
|
198
|
-
// src/components/Alert/Alert.tsx
|
|
199
|
-
import { CheckCircle, Info, WarningCircle, XCircle } from "phosphor-react";
|
|
200
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
201
194
|
var VARIANT_ACTION_CLASSES3 = {
|
|
202
195
|
solid: {
|
|
203
196
|
default: "bg-background-50 border-transparent",
|
|
@@ -222,11 +215,11 @@ var COLOR_CLASSES = {
|
|
|
222
215
|
error: "text-error-800"
|
|
223
216
|
};
|
|
224
217
|
var ICONS = {
|
|
225
|
-
default: /* @__PURE__ */
|
|
226
|
-
info: /* @__PURE__ */
|
|
227
|
-
success: /* @__PURE__ */
|
|
228
|
-
warning: /* @__PURE__ */
|
|
229
|
-
error: /* @__PURE__ */
|
|
218
|
+
default: /* @__PURE__ */ jsx(CheckCircle, { size: 18 }),
|
|
219
|
+
info: /* @__PURE__ */ jsx(Info, { size: 18 }),
|
|
220
|
+
success: /* @__PURE__ */ jsx(CheckCircle, { size: 18 }),
|
|
221
|
+
warning: /* @__PURE__ */ jsx(WarningCircle, { size: 18 }),
|
|
222
|
+
error: /* @__PURE__ */ jsx(XCircle, { size: 18 })
|
|
230
223
|
};
|
|
231
224
|
var Alert = ({
|
|
232
225
|
variant = "solid",
|
|
@@ -241,15 +234,15 @@ var Alert = ({
|
|
|
241
234
|
const variantColor = COLOR_CLASSES[action];
|
|
242
235
|
const variantIcon = ICONS[action];
|
|
243
236
|
const hasHeading = Boolean(title);
|
|
244
|
-
return /* @__PURE__ */
|
|
237
|
+
return /* @__PURE__ */ jsxs(
|
|
245
238
|
"div",
|
|
246
239
|
{
|
|
247
240
|
className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
|
|
248
241
|
...props,
|
|
249
242
|
children: [
|
|
250
|
-
/* @__PURE__ */
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
hasHeading && /* @__PURE__ */
|
|
243
|
+
/* @__PURE__ */ jsx("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
|
|
244
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
245
|
+
hasHeading && /* @__PURE__ */ jsx(
|
|
253
246
|
Text,
|
|
254
247
|
{
|
|
255
248
|
size: "md",
|
|
@@ -259,7 +252,7 @@ var Alert = ({
|
|
|
259
252
|
children: title
|
|
260
253
|
}
|
|
261
254
|
),
|
|
262
|
-
/* @__PURE__ */
|
|
255
|
+
/* @__PURE__ */ jsx(
|
|
263
256
|
Text,
|
|
264
257
|
{
|
|
265
258
|
size: hasHeading ? "sm" : "md",
|
|
@@ -273,10 +266,6 @@ var Alert = ({
|
|
|
273
266
|
}
|
|
274
267
|
);
|
|
275
268
|
};
|
|
276
|
-
|
|
277
|
-
// src/components/IconButton/IconButton.tsx
|
|
278
|
-
import { forwardRef } from "react";
|
|
279
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
280
269
|
var IconButton = forwardRef(
|
|
281
270
|
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
|
|
282
271
|
const baseClasses = [
|
|
@@ -309,7 +298,7 @@ var IconButton = forwardRef(
|
|
|
309
298
|
...activeClasses
|
|
310
299
|
].join(" ");
|
|
311
300
|
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
|
|
312
|
-
return /* @__PURE__ */
|
|
301
|
+
return /* @__PURE__ */ jsx(
|
|
313
302
|
"button",
|
|
314
303
|
{
|
|
315
304
|
ref,
|
|
@@ -319,15 +308,12 @@ var IconButton = forwardRef(
|
|
|
319
308
|
"aria-pressed": active,
|
|
320
309
|
"aria-label": ariaLabel,
|
|
321
310
|
...props,
|
|
322
|
-
children: /* @__PURE__ */
|
|
311
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: icon })
|
|
323
312
|
}
|
|
324
313
|
);
|
|
325
314
|
}
|
|
326
315
|
);
|
|
327
316
|
IconButton.displayName = "IconButton";
|
|
328
|
-
|
|
329
|
-
// src/components/IconRoundedButton/IconRoundedButton.tsx
|
|
330
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
331
317
|
var IconRoundedButton = ({
|
|
332
318
|
icon,
|
|
333
319
|
className = "",
|
|
@@ -355,22 +341,18 @@ var IconRoundedButton = ({
|
|
|
355
341
|
"disabled:opacity-50",
|
|
356
342
|
"disabled:cursor-not-allowed"
|
|
357
343
|
].join(" ");
|
|
358
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ jsx(
|
|
359
345
|
"button",
|
|
360
346
|
{
|
|
361
347
|
type: "button",
|
|
362
348
|
className: `${baseClasses} ${className}`,
|
|
363
349
|
disabled,
|
|
364
350
|
...props,
|
|
365
|
-
children: /* @__PURE__ */
|
|
351
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
|
|
366
352
|
}
|
|
367
353
|
);
|
|
368
354
|
};
|
|
369
|
-
|
|
370
|
-
// src/components/NavButton/NavButton.tsx
|
|
371
|
-
import { forwardRef as forwardRef2 } from "react";
|
|
372
|
-
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
373
|
-
var NavButton = forwardRef2(
|
|
355
|
+
var NavButton = forwardRef(
|
|
374
356
|
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
375
357
|
const baseClasses = [
|
|
376
358
|
"flex",
|
|
@@ -397,7 +379,7 @@ var NavButton = forwardRef2(
|
|
|
397
379
|
];
|
|
398
380
|
const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
|
|
399
381
|
const allClasses = [...baseClasses, ...stateClasses].join(" ");
|
|
400
|
-
return /* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ jsxs(
|
|
401
383
|
"button",
|
|
402
384
|
{
|
|
403
385
|
ref,
|
|
@@ -407,19 +389,15 @@ var NavButton = forwardRef2(
|
|
|
407
389
|
"aria-pressed": selected,
|
|
408
390
|
...props,
|
|
409
391
|
children: [
|
|
410
|
-
/* @__PURE__ */
|
|
411
|
-
/* @__PURE__ */
|
|
392
|
+
/* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
|
|
393
|
+
/* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
|
|
412
394
|
]
|
|
413
395
|
}
|
|
414
396
|
);
|
|
415
397
|
}
|
|
416
398
|
);
|
|
417
399
|
NavButton.displayName = "NavButton";
|
|
418
|
-
|
|
419
|
-
// src/components/SelectionButton/SelectionButton.tsx
|
|
420
|
-
import { forwardRef as forwardRef3 } from "react";
|
|
421
|
-
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
422
|
-
var SelectionButton = forwardRef3(
|
|
400
|
+
var SelectionButton = forwardRef(
|
|
423
401
|
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
|
|
424
402
|
const baseClasses = [
|
|
425
403
|
"inline-flex",
|
|
@@ -451,7 +429,7 @@ var SelectionButton = forwardRef3(
|
|
|
451
429
|
];
|
|
452
430
|
const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
|
|
453
431
|
const allClasses = [...baseClasses, ...stateClasses].join(" ");
|
|
454
|
-
return /* @__PURE__ */
|
|
432
|
+
return /* @__PURE__ */ jsxs(
|
|
455
433
|
"button",
|
|
456
434
|
{
|
|
457
435
|
ref,
|
|
@@ -461,34 +439,30 @@ var SelectionButton = forwardRef3(
|
|
|
461
439
|
"aria-pressed": selected,
|
|
462
440
|
...props,
|
|
463
441
|
children: [
|
|
464
|
-
/* @__PURE__ */
|
|
465
|
-
/* @__PURE__ */
|
|
442
|
+
/* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
|
|
443
|
+
/* @__PURE__ */ jsx("span", { children: label })
|
|
466
444
|
]
|
|
467
445
|
}
|
|
468
446
|
);
|
|
469
447
|
}
|
|
470
448
|
);
|
|
471
449
|
SelectionButton.displayName = "SelectionButton";
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
import { forwardRef as forwardRef4 } from "react";
|
|
475
|
-
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
476
|
-
var Table = forwardRef4(
|
|
477
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx9("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
|
|
450
|
+
var Table = forwardRef(
|
|
451
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs(
|
|
478
452
|
"table",
|
|
479
453
|
{
|
|
480
454
|
ref,
|
|
481
455
|
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
482
456
|
...props,
|
|
483
457
|
children: [
|
|
484
|
-
/* @__PURE__ */
|
|
458
|
+
/* @__PURE__ */ jsx("caption", { className: "sr-only", children: "My Table" }),
|
|
485
459
|
children
|
|
486
460
|
]
|
|
487
461
|
}
|
|
488
462
|
) })
|
|
489
463
|
);
|
|
490
464
|
Table.displayName = "Table";
|
|
491
|
-
var TableHeader =
|
|
465
|
+
var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
492
466
|
"thead",
|
|
493
467
|
{
|
|
494
468
|
ref,
|
|
@@ -497,7 +471,7 @@ var TableHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
497
471
|
}
|
|
498
472
|
));
|
|
499
473
|
TableHeader.displayName = "TableHeader";
|
|
500
|
-
var TableBody =
|
|
474
|
+
var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
501
475
|
"tbody",
|
|
502
476
|
{
|
|
503
477
|
ref,
|
|
@@ -506,7 +480,7 @@ var TableBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
506
480
|
}
|
|
507
481
|
));
|
|
508
482
|
TableBody.displayName = "TableBody";
|
|
509
|
-
var TableFooter =
|
|
483
|
+
var TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
510
484
|
"tfoot",
|
|
511
485
|
{
|
|
512
486
|
ref,
|
|
@@ -521,9 +495,9 @@ var VARIANT_STATES_ROW = {
|
|
|
521
495
|
invalid: "border-b-2 border-indicator-error",
|
|
522
496
|
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
|
|
523
497
|
};
|
|
524
|
-
var TableRow =
|
|
498
|
+
var TableRow = forwardRef(
|
|
525
499
|
({ state = "default", className, ...props }, ref) => {
|
|
526
|
-
return /* @__PURE__ */
|
|
500
|
+
return /* @__PURE__ */ jsx(
|
|
527
501
|
"tr",
|
|
528
502
|
{
|
|
529
503
|
ref,
|
|
@@ -540,7 +514,7 @@ var TableRow = forwardRef4(
|
|
|
540
514
|
}
|
|
541
515
|
);
|
|
542
516
|
TableRow.displayName = "TableRow";
|
|
543
|
-
var TableHead =
|
|
517
|
+
var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
544
518
|
"th",
|
|
545
519
|
{
|
|
546
520
|
ref,
|
|
@@ -549,7 +523,7 @@ var TableHead = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
549
523
|
}
|
|
550
524
|
));
|
|
551
525
|
TableHead.displayName = "TableHead";
|
|
552
|
-
var TableCell =
|
|
526
|
+
var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
553
527
|
"td",
|
|
554
528
|
{
|
|
555
529
|
ref,
|
|
@@ -558,7 +532,7 @@ var TableCell = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ js
|
|
|
558
532
|
}
|
|
559
533
|
));
|
|
560
534
|
TableCell.displayName = "TableCell";
|
|
561
|
-
var TableCaption =
|
|
535
|
+
var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
562
536
|
"caption",
|
|
563
537
|
{
|
|
564
538
|
ref,
|
|
@@ -567,15 +541,6 @@ var TableCaption = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
567
541
|
}
|
|
568
542
|
));
|
|
569
543
|
TableCaption.displayName = "TableCaption";
|
|
570
|
-
|
|
571
|
-
// src/components/CheckBox/CheckBox.tsx
|
|
572
|
-
import {
|
|
573
|
-
forwardRef as forwardRef5,
|
|
574
|
-
useState,
|
|
575
|
-
useId
|
|
576
|
-
} from "react";
|
|
577
|
-
import { Check, Minus } from "phosphor-react";
|
|
578
|
-
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
579
544
|
var SIZE_CLASSES3 = {
|
|
580
545
|
small: {
|
|
581
546
|
checkbox: "w-4 h-4",
|
|
@@ -635,7 +600,7 @@ var STATE_CLASSES = {
|
|
|
635
600
|
checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
|
|
636
601
|
}
|
|
637
602
|
};
|
|
638
|
-
var CheckBox =
|
|
603
|
+
var CheckBox = forwardRef(
|
|
639
604
|
({
|
|
640
605
|
label,
|
|
641
606
|
size = "medium",
|
|
@@ -670,7 +635,7 @@ var CheckBox = forwardRef5(
|
|
|
670
635
|
const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
|
|
671
636
|
const renderIcon = () => {
|
|
672
637
|
if (indeterminate) {
|
|
673
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ jsx(
|
|
674
639
|
Minus,
|
|
675
640
|
{
|
|
676
641
|
size: sizeClasses.iconSize,
|
|
@@ -680,7 +645,7 @@ var CheckBox = forwardRef5(
|
|
|
680
645
|
);
|
|
681
646
|
}
|
|
682
647
|
if (checked) {
|
|
683
|
-
return /* @__PURE__ */
|
|
648
|
+
return /* @__PURE__ */ jsx(
|
|
684
649
|
Check,
|
|
685
650
|
{
|
|
686
651
|
size: sizeClasses.iconSize,
|
|
@@ -691,13 +656,13 @@ var CheckBox = forwardRef5(
|
|
|
691
656
|
}
|
|
692
657
|
return null;
|
|
693
658
|
};
|
|
694
|
-
return /* @__PURE__ */
|
|
695
|
-
/* @__PURE__ */
|
|
659
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
660
|
+
/* @__PURE__ */ jsxs(
|
|
696
661
|
"div",
|
|
697
662
|
{
|
|
698
663
|
className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
|
|
699
664
|
children: [
|
|
700
|
-
/* @__PURE__ */
|
|
665
|
+
/* @__PURE__ */ jsx(
|
|
701
666
|
"input",
|
|
702
667
|
{
|
|
703
668
|
ref,
|
|
@@ -710,12 +675,12 @@ var CheckBox = forwardRef5(
|
|
|
710
675
|
...props
|
|
711
676
|
}
|
|
712
677
|
),
|
|
713
|
-
/* @__PURE__ */
|
|
714
|
-
label && /* @__PURE__ */
|
|
678
|
+
/* @__PURE__ */ jsx("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
|
|
679
|
+
label && /* @__PURE__ */ jsx(
|
|
715
680
|
"div",
|
|
716
681
|
{
|
|
717
682
|
className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
|
|
718
|
-
children: /* @__PURE__ */
|
|
683
|
+
children: /* @__PURE__ */ jsx(
|
|
719
684
|
Text,
|
|
720
685
|
{
|
|
721
686
|
as: "label",
|
|
@@ -731,7 +696,7 @@ var CheckBox = forwardRef5(
|
|
|
731
696
|
]
|
|
732
697
|
}
|
|
733
698
|
),
|
|
734
|
-
errorMessage && /* @__PURE__ */
|
|
699
|
+
errorMessage && /* @__PURE__ */ jsx(
|
|
735
700
|
Text,
|
|
736
701
|
{
|
|
737
702
|
size: "sm",
|
|
@@ -741,7 +706,7 @@ var CheckBox = forwardRef5(
|
|
|
741
706
|
children: errorMessage
|
|
742
707
|
}
|
|
743
708
|
),
|
|
744
|
-
helperText && !errorMessage && /* @__PURE__ */
|
|
709
|
+
helperText && !errorMessage && /* @__PURE__ */ jsx(
|
|
745
710
|
Text,
|
|
746
711
|
{
|
|
747
712
|
size: "sm",
|
|
@@ -755,14 +720,6 @@ var CheckBox = forwardRef5(
|
|
|
755
720
|
}
|
|
756
721
|
);
|
|
757
722
|
CheckBox.displayName = "CheckBox";
|
|
758
|
-
|
|
759
|
-
// src/components/TextArea/TextArea.tsx
|
|
760
|
-
import {
|
|
761
|
-
forwardRef as forwardRef6,
|
|
762
|
-
useState as useState2,
|
|
763
|
-
useId as useId2
|
|
764
|
-
} from "react";
|
|
765
|
-
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
766
723
|
var SIZE_CLASSES4 = {
|
|
767
724
|
small: {
|
|
768
725
|
container: "w-72",
|
|
@@ -821,7 +778,7 @@ var STATE_CLASSES2 = {
|
|
|
821
778
|
focus: ""
|
|
822
779
|
}
|
|
823
780
|
};
|
|
824
|
-
var TextArea =
|
|
781
|
+
var TextArea = forwardRef(
|
|
825
782
|
({
|
|
826
783
|
label,
|
|
827
784
|
size = "medium",
|
|
@@ -836,9 +793,9 @@ var TextArea = forwardRef6(
|
|
|
836
793
|
placeholder,
|
|
837
794
|
...props
|
|
838
795
|
}, ref) => {
|
|
839
|
-
const generatedId =
|
|
796
|
+
const generatedId = useId();
|
|
840
797
|
const inputId = id ?? `textarea-${generatedId}`;
|
|
841
|
-
const [isFocused, setIsFocused] =
|
|
798
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
842
799
|
const handleChange = (event) => {
|
|
843
800
|
onChange?.(event);
|
|
844
801
|
};
|
|
@@ -857,8 +814,8 @@ var TextArea = forwardRef6(
|
|
|
857
814
|
const sizeClasses = SIZE_CLASSES4[size];
|
|
858
815
|
const stateClasses = STATE_CLASSES2[currentState];
|
|
859
816
|
const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
|
|
860
|
-
return /* @__PURE__ */
|
|
861
|
-
label && /* @__PURE__ */
|
|
817
|
+
return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
|
|
818
|
+
label && /* @__PURE__ */ jsx(
|
|
862
819
|
Text,
|
|
863
820
|
{
|
|
864
821
|
as: "label",
|
|
@@ -870,7 +827,7 @@ var TextArea = forwardRef6(
|
|
|
870
827
|
children: label
|
|
871
828
|
}
|
|
872
829
|
),
|
|
873
|
-
/* @__PURE__ */
|
|
830
|
+
/* @__PURE__ */ jsx(
|
|
874
831
|
"textarea",
|
|
875
832
|
{
|
|
876
833
|
ref,
|
|
@@ -884,30 +841,17 @@ var TextArea = forwardRef6(
|
|
|
884
841
|
...props
|
|
885
842
|
}
|
|
886
843
|
),
|
|
887
|
-
errorMessage && /* @__PURE__ */
|
|
888
|
-
helperMessage && !errorMessage && /* @__PURE__ */
|
|
844
|
+
errorMessage && /* @__PURE__ */ jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
845
|
+
helperMessage && !errorMessage && /* @__PURE__ */ jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
|
|
889
846
|
] });
|
|
890
847
|
}
|
|
891
848
|
);
|
|
892
849
|
TextArea.displayName = "TextArea";
|
|
893
|
-
|
|
894
|
-
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
895
|
-
import {
|
|
896
|
-
createContext,
|
|
897
|
-
useState as useState3,
|
|
898
|
-
useCallback,
|
|
899
|
-
useContext,
|
|
900
|
-
forwardRef as forwardRef7,
|
|
901
|
-
useEffect,
|
|
902
|
-
useRef,
|
|
903
|
-
useMemo
|
|
904
|
-
} from "react";
|
|
905
|
-
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
906
850
|
var DropdownMenuContext = createContext(
|
|
907
851
|
void 0
|
|
908
852
|
);
|
|
909
853
|
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
910
|
-
const [internalOpen, setInternalOpen] =
|
|
854
|
+
const [internalOpen, setInternalOpen] = useState(false);
|
|
911
855
|
const isControlled = open !== void 0;
|
|
912
856
|
const currentOpen = isControlled ? open : internalOpen;
|
|
913
857
|
const setOpen = useCallback(
|
|
@@ -965,14 +909,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
965
909
|
() => ({ open: currentOpen, setOpen }),
|
|
966
910
|
[currentOpen, setOpen]
|
|
967
911
|
);
|
|
968
|
-
return /* @__PURE__ */
|
|
912
|
+
return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "relative", ref: menuRef, children }) });
|
|
969
913
|
};
|
|
970
|
-
var DropdownMenuTrigger =
|
|
914
|
+
var DropdownMenuTrigger = forwardRef(({ className, children, onClick, ...props }, ref) => {
|
|
971
915
|
const context = useContext(DropdownMenuContext);
|
|
972
916
|
if (!context)
|
|
973
917
|
throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
|
|
974
918
|
const { open, setOpen } = context;
|
|
975
|
-
return /* @__PURE__ */
|
|
919
|
+
return /* @__PURE__ */ jsx(
|
|
976
920
|
"button",
|
|
977
921
|
{
|
|
978
922
|
ref,
|
|
@@ -1004,7 +948,7 @@ var ALIGN_CLASSES = {
|
|
|
1004
948
|
center: "left-1/2 -translate-x-1/2",
|
|
1005
949
|
end: "right-0"
|
|
1006
950
|
};
|
|
1007
|
-
var MenuLabel =
|
|
951
|
+
var MenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1008
952
|
"fieldset",
|
|
1009
953
|
{
|
|
1010
954
|
ref,
|
|
@@ -1014,7 +958,7 @@ var MenuLabel = forwardRef7(({ className, inset, ...props }, ref) => /* @__PURE_
|
|
|
1014
958
|
}
|
|
1015
959
|
));
|
|
1016
960
|
MenuLabel.displayName = "MenuLabel";
|
|
1017
|
-
var MenuContent =
|
|
961
|
+
var MenuContent = forwardRef(
|
|
1018
962
|
({
|
|
1019
963
|
className,
|
|
1020
964
|
align = "start",
|
|
@@ -1024,7 +968,7 @@ var MenuContent = forwardRef7(
|
|
|
1024
968
|
...props
|
|
1025
969
|
}, ref) => {
|
|
1026
970
|
const { open } = useContext(DropdownMenuContext);
|
|
1027
|
-
const [isVisible, setIsVisible] =
|
|
971
|
+
const [isVisible, setIsVisible] = useState(open);
|
|
1028
972
|
useEffect(() => {
|
|
1029
973
|
if (open) {
|
|
1030
974
|
setIsVisible(true);
|
|
@@ -1039,7 +983,7 @@ var MenuContent = forwardRef7(
|
|
|
1039
983
|
const horizontal = ALIGN_CLASSES[align];
|
|
1040
984
|
return `absolute ${vertical} ${horizontal}`;
|
|
1041
985
|
};
|
|
1042
|
-
return /* @__PURE__ */
|
|
986
|
+
return /* @__PURE__ */ jsx(
|
|
1043
987
|
"div",
|
|
1044
988
|
{
|
|
1045
989
|
ref,
|
|
@@ -1063,7 +1007,7 @@ var MenuContent = forwardRef7(
|
|
|
1063
1007
|
}
|
|
1064
1008
|
);
|
|
1065
1009
|
MenuContent.displayName = "MenuContent";
|
|
1066
|
-
var MenuItem =
|
|
1010
|
+
var MenuItem = forwardRef(
|
|
1067
1011
|
({
|
|
1068
1012
|
className,
|
|
1069
1013
|
inset,
|
|
@@ -1084,7 +1028,7 @@ var MenuItem = forwardRef7(
|
|
|
1084
1028
|
}
|
|
1085
1029
|
onClick?.(e);
|
|
1086
1030
|
};
|
|
1087
|
-
return /* @__PURE__ */
|
|
1031
|
+
return /* @__PURE__ */ jsxs(
|
|
1088
1032
|
"div",
|
|
1089
1033
|
{
|
|
1090
1034
|
ref,
|
|
@@ -1114,7 +1058,7 @@ var MenuItem = forwardRef7(
|
|
|
1114
1058
|
}
|
|
1115
1059
|
);
|
|
1116
1060
|
MenuItem.displayName = "MenuItem";
|
|
1117
|
-
var MenuSeparator =
|
|
1061
|
+
var MenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1118
1062
|
"div",
|
|
1119
1063
|
{
|
|
1120
1064
|
ref,
|
|
@@ -1123,10 +1067,6 @@ var MenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
1123
1067
|
}
|
|
1124
1068
|
));
|
|
1125
1069
|
MenuSeparator.displayName = "MenuSeparator";
|
|
1126
|
-
|
|
1127
|
-
// src/components/Toast/Toast.tsx
|
|
1128
|
-
import { CheckCircle as CheckCircle2, WarningCircle as WarningCircle2, Info as Info2, X } from "phosphor-react";
|
|
1129
|
-
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1130
1070
|
var VARIANT_ACTION_CLASSES4 = {
|
|
1131
1071
|
solid: {
|
|
1132
1072
|
warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
|
|
@@ -1134,15 +1074,15 @@ var VARIANT_ACTION_CLASSES4 = {
|
|
|
1134
1074
|
info: "bg-info text-info-800 border-none focus-visible:outline-none"
|
|
1135
1075
|
},
|
|
1136
1076
|
outlined: {
|
|
1137
|
-
warning: "bg-warning text-warning-
|
|
1077
|
+
warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none",
|
|
1138
1078
|
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
|
|
1139
|
-
info: "bg-info text-info-
|
|
1079
|
+
info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none"
|
|
1140
1080
|
}
|
|
1141
1081
|
};
|
|
1142
1082
|
var iconMap = {
|
|
1143
|
-
success:
|
|
1144
|
-
info:
|
|
1145
|
-
warning:
|
|
1083
|
+
success: CheckCircle,
|
|
1084
|
+
info: Info,
|
|
1085
|
+
warning: WarningCircle
|
|
1146
1086
|
};
|
|
1147
1087
|
var Toast = ({
|
|
1148
1088
|
variant = "outlined",
|
|
@@ -1166,7 +1106,7 @@ var Toast = ({
|
|
|
1166
1106
|
};
|
|
1167
1107
|
const IconAction = iconMap[action] || iconMap["success"];
|
|
1168
1108
|
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
|
|
1169
|
-
return /* @__PURE__ */
|
|
1109
|
+
return /* @__PURE__ */ jsxs(
|
|
1170
1110
|
"div",
|
|
1171
1111
|
{
|
|
1172
1112
|
role: "alert",
|
|
@@ -1175,29 +1115,26 @@ var Toast = ({
|
|
|
1175
1115
|
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
|
|
1176
1116
|
...props,
|
|
1177
1117
|
children: [
|
|
1178
|
-
/* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1180
|
-
/* @__PURE__ */
|
|
1181
|
-
/* @__PURE__ */
|
|
1182
|
-
description && /* @__PURE__ */
|
|
1118
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [
|
|
1119
|
+
/* @__PURE__ */ jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx(IconAction, {}) }),
|
|
1120
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-start", children: [
|
|
1121
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: title }),
|
|
1122
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-md text-text-900", children: description })
|
|
1183
1123
|
] })
|
|
1184
1124
|
] }),
|
|
1185
|
-
/* @__PURE__ */
|
|
1125
|
+
/* @__PURE__ */ jsx(
|
|
1186
1126
|
"button",
|
|
1187
1127
|
{
|
|
1188
1128
|
onClick: onClose,
|
|
1189
1129
|
"aria-label": "Dismiss notification",
|
|
1190
1130
|
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
|
|
1191
|
-
children: /* @__PURE__ */
|
|
1131
|
+
children: /* @__PURE__ */ jsx(X, {})
|
|
1192
1132
|
}
|
|
1193
1133
|
)
|
|
1194
1134
|
]
|
|
1195
1135
|
}
|
|
1196
1136
|
);
|
|
1197
1137
|
};
|
|
1198
|
-
|
|
1199
|
-
// src/components/Toast/utils/ToastStore.ts
|
|
1200
|
-
import { create } from "zustand";
|
|
1201
1138
|
var useToastStore = create((set) => ({
|
|
1202
1139
|
toasts: [],
|
|
1203
1140
|
addToast: (toast) => {
|
|
@@ -1212,13 +1149,10 @@ var useToastStore = create((set) => ({
|
|
|
1212
1149
|
}));
|
|
1213
1150
|
}
|
|
1214
1151
|
}));
|
|
1215
|
-
|
|
1216
|
-
// src/components/Toast/utils/Toaster.tsx
|
|
1217
|
-
import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
|
|
1218
1152
|
var Toaster = () => {
|
|
1219
1153
|
const toasts = useToastStore((state) => state.toasts);
|
|
1220
1154
|
const removeToast = useToastStore((state) => state.removeToast);
|
|
1221
|
-
return /* @__PURE__ */
|
|
1155
|
+
return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx(
|
|
1222
1156
|
Toast,
|
|
1223
1157
|
{
|
|
1224
1158
|
title: toast.title,
|
|
@@ -1231,25 +1165,5 @@ var Toaster = () => {
|
|
|
1231
1165
|
toast.id
|
|
1232
1166
|
)) });
|
|
1233
1167
|
};
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
Badge,
|
|
1237
|
-
Button,
|
|
1238
|
-
CheckBox,
|
|
1239
|
-
DropdownMenu,
|
|
1240
|
-
MenuContent as DropdownMenuContent,
|
|
1241
|
-
MenuItem as DropdownMenuItem,
|
|
1242
|
-
MenuLabel as DropdownMenuLabel,
|
|
1243
|
-
MenuSeparator as DropdownMenuSeparator,
|
|
1244
|
-
DropdownMenuTrigger,
|
|
1245
|
-
IconButton,
|
|
1246
|
-
IconRoundedButton,
|
|
1247
|
-
NavButton,
|
|
1248
|
-
SelectionButton,
|
|
1249
|
-
Table,
|
|
1250
|
-
Text,
|
|
1251
|
-
TextArea,
|
|
1252
|
-
Toast,
|
|
1253
|
-
Toaster,
|
|
1254
|
-
useToastStore
|
|
1255
|
-
};
|
|
1168
|
+
|
|
1169
|
+
export { Alert, Badge, Button, CheckBox, DropdownMenu, MenuContent as DropdownMenuContent, MenuItem as DropdownMenuItem, MenuLabel as DropdownMenuLabel, MenuSeparator as DropdownMenuSeparator, DropdownMenuTrigger, IconButton, IconRoundedButton, NavButton, SelectionButton, Table, Text, TextArea, Toast, Toaster, useToastStore };
|