@bestow-ui/react 0.3.1 → 0.5.0
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.cjs +371 -120
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +374 -57
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +103 -2
- package/dist/index.d.ts +103 -2
- package/dist/index.js +366 -111
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
package/dist/index.cjs
CHANGED
|
@@ -36,9 +36,13 @@ __export(index_exports, {
|
|
|
36
36
|
Input: () => Input,
|
|
37
37
|
Modal: () => Modal,
|
|
38
38
|
ModalClose: () => ModalClose,
|
|
39
|
+
RadioGroup: () => RadioGroup,
|
|
39
40
|
Select: () => Select,
|
|
41
|
+
Spinner: () => Spinner,
|
|
40
42
|
Stack: () => Stack,
|
|
43
|
+
Switch: () => Switch,
|
|
41
44
|
TextField: () => TextField,
|
|
45
|
+
Textarea: () => Textarea,
|
|
42
46
|
ThemeProvider: () => ThemeProvider,
|
|
43
47
|
ToastProvider: () => ToastProvider,
|
|
44
48
|
Tooltip: () => Tooltip,
|
|
@@ -262,34 +266,66 @@ function usePortalClassName() {
|
|
|
262
266
|
}
|
|
263
267
|
|
|
264
268
|
// src/components/Button/Button.tsx
|
|
269
|
+
var import_react3 = require("react");
|
|
270
|
+
|
|
271
|
+
// src/components/Spinner/Spinner.tsx
|
|
272
|
+
var import_icons = require("@bestow-ui/icons");
|
|
265
273
|
var import_react2 = require("react");
|
|
266
274
|
|
|
267
|
-
// src/
|
|
275
|
+
// src/styles/visuallyHidden.css.ts
|
|
276
|
+
var visuallyHidden = "_1kdtbw10";
|
|
277
|
+
|
|
278
|
+
// src/components/Spinner/Spinner.css.ts
|
|
268
279
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
269
|
-
var
|
|
280
|
+
var spinner = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_4b5tg40", variantClassNames: { color: { current: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "current", size: "md" }, compoundVariants: [] });
|
|
281
|
+
|
|
282
|
+
// src/components/Spinner/Spinner.tsx
|
|
283
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
284
|
+
var Spinner = (0, import_react2.forwardRef)(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
285
|
+
const a11y = label3 ? { role: "status" } : { "aria-hidden": true };
|
|
286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
287
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.LoaderIcon, { size: "100%" }),
|
|
288
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: visuallyHidden, children: label3 })
|
|
289
|
+
] });
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
// src/components/Button/Button.css.ts
|
|
293
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
294
|
+
var button = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "xcekda6", variantClassNames: { variant: { solid: "xcekda7", soft: "xcekda8", outline: "xcekda9", ghost: "xcekdaa" }, color: { primary: "xcekdab", neutral: "xcekdac", danger: "xcekdad" }, size: { sm: "xcekdae", md: "xcekdaf", lg: "xcekdag" }, fullWidth: { true: "xcekdah" } }, defaultVariants: { variant: "solid", color: "primary", size: "md" }, compoundVariants: [] });
|
|
270
295
|
var icon = "xcekdai";
|
|
271
296
|
|
|
272
297
|
// src/components/Button/Button.tsx
|
|
273
|
-
var
|
|
274
|
-
var Button = (0,
|
|
275
|
-
|
|
298
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
299
|
+
var Button = (0, import_react3.forwardRef)(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
|
|
300
|
+
const handleClick = (event) => {
|
|
301
|
+
if (loading) {
|
|
302
|
+
event.preventDefault();
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
305
|
+
onClick?.(event);
|
|
306
|
+
};
|
|
307
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
276
309
|
"button",
|
|
277
310
|
{
|
|
278
311
|
ref,
|
|
279
312
|
type,
|
|
280
313
|
className: cx(button({ variant, color, size, fullWidth }), className),
|
|
314
|
+
"aria-busy": loading || void 0,
|
|
315
|
+
"aria-disabled": loading || void 0,
|
|
316
|
+
onClick: handleClick,
|
|
281
317
|
...rest,
|
|
282
318
|
children: [
|
|
283
|
-
|
|
319
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, children: leading }),
|
|
284
320
|
children,
|
|
285
|
-
endIcon && /* @__PURE__ */ (0,
|
|
321
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, children: endIcon })
|
|
286
322
|
]
|
|
287
323
|
}
|
|
288
324
|
);
|
|
289
325
|
});
|
|
290
326
|
|
|
291
327
|
// src/components/Checkbox/Checkbox.tsx
|
|
292
|
-
var
|
|
328
|
+
var import_react4 = require("react");
|
|
293
329
|
|
|
294
330
|
// src/utils/mergeRefs.ts
|
|
295
331
|
function mergeRefs(...refs) {
|
|
@@ -302,23 +338,23 @@ function mergeRefs(...refs) {
|
|
|
302
338
|
}
|
|
303
339
|
|
|
304
340
|
// src/components/Checkbox/Checkbox.css.ts
|
|
305
|
-
var
|
|
341
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
306
342
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
307
|
-
var control = (0,
|
|
343
|
+
var control = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
308
344
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
309
345
|
var input = "_1y7mzsn6";
|
|
310
|
-
var root2 = (0,
|
|
346
|
+
var root2 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
311
347
|
|
|
312
348
|
// src/components/Checkbox/Checkbox.tsx
|
|
313
|
-
var
|
|
314
|
-
var Checkbox = (0,
|
|
315
|
-
const innerRef = (0,
|
|
316
|
-
(0,
|
|
349
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
350
|
+
var Checkbox = (0, import_react4.forwardRef)(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
351
|
+
const innerRef = (0, import_react4.useRef)(null);
|
|
352
|
+
(0, import_react4.useEffect)(() => {
|
|
317
353
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
318
354
|
}, [indeterminate]);
|
|
319
|
-
return /* @__PURE__ */ (0,
|
|
320
|
-
/* @__PURE__ */ (0,
|
|
321
|
-
/* @__PURE__ */ (0,
|
|
355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
356
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: control({ size }), children: [
|
|
357
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
322
358
|
"input",
|
|
323
359
|
{
|
|
324
360
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -329,39 +365,39 @@ var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label2,
|
|
|
329
365
|
...rest
|
|
330
366
|
}
|
|
331
367
|
),
|
|
332
|
-
/* @__PURE__ */ (0,
|
|
333
|
-
/* @__PURE__ */ (0,
|
|
368
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
369
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
334
370
|
] }),
|
|
335
|
-
|
|
371
|
+
label3
|
|
336
372
|
] });
|
|
337
373
|
});
|
|
338
374
|
|
|
339
375
|
// src/components/Input/Input.tsx
|
|
340
|
-
var
|
|
376
|
+
var import_react5 = require("react");
|
|
341
377
|
|
|
342
378
|
// src/components/Input/Input.css.ts
|
|
343
|
-
var
|
|
379
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
344
380
|
var adornment = "_19p5zvh6";
|
|
345
381
|
var field = "_19p5zvh7";
|
|
346
382
|
var fieldFullWidth = "_19p5zvh8";
|
|
347
|
-
var helperText = (0,
|
|
383
|
+
var helperText = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
348
384
|
var input2 = "_19p5zvh5";
|
|
349
385
|
var label = "_19p5zvh9";
|
|
350
386
|
var requiredMark = "_19p5zvha";
|
|
351
|
-
var root3 = (0,
|
|
387
|
+
var root3 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
352
388
|
|
|
353
389
|
// src/components/Input/Input.tsx
|
|
354
|
-
var
|
|
355
|
-
var Input = (0,
|
|
356
|
-
return /* @__PURE__ */ (0,
|
|
390
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
391
|
+
var Input = (0, import_react5.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
357
393
|
"div",
|
|
358
394
|
{
|
|
359
395
|
className: cx(root3({ size, fullWidth }), rootClassName),
|
|
360
396
|
"data-invalid": invalid || void 0,
|
|
361
397
|
"data-disabled": disabled || void 0,
|
|
362
398
|
children: [
|
|
363
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
364
|
-
/* @__PURE__ */ (0,
|
|
399
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: adornment, children: startAdornment }),
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
365
401
|
"input",
|
|
366
402
|
{
|
|
367
403
|
ref,
|
|
@@ -371,25 +407,25 @@ var Input = (0, import_react4.forwardRef)(function Input2({ size, invalid, fullW
|
|
|
371
407
|
...rest
|
|
372
408
|
}
|
|
373
409
|
),
|
|
374
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
410
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: adornment, children: endAdornment })
|
|
375
411
|
]
|
|
376
412
|
}
|
|
377
413
|
);
|
|
378
414
|
});
|
|
379
415
|
|
|
380
416
|
// src/components/Input/TextField.tsx
|
|
381
|
-
var
|
|
382
|
-
var
|
|
383
|
-
var TextField = (0,
|
|
384
|
-
const generatedId = (0,
|
|
417
|
+
var import_react6 = require("react");
|
|
418
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
419
|
+
var TextField = (0, import_react6.forwardRef)(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
420
|
+
const generatedId = (0, import_react6.useId)();
|
|
385
421
|
const inputId = id ?? generatedId;
|
|
386
422
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
387
|
-
return /* @__PURE__ */ (0,
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
required && /* @__PURE__ */ (0,
|
|
423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
424
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor: inputId, className: label, children: [
|
|
425
|
+
label3,
|
|
426
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
391
427
|
] }),
|
|
392
|
-
/* @__PURE__ */ (0,
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
393
429
|
Input,
|
|
394
430
|
{
|
|
395
431
|
ref,
|
|
@@ -401,19 +437,19 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
|
|
|
401
437
|
...rest
|
|
402
438
|
}
|
|
403
439
|
),
|
|
404
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
440
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
405
441
|
] });
|
|
406
442
|
});
|
|
407
443
|
|
|
408
444
|
// src/components/Modal/Modal.tsx
|
|
409
445
|
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
410
|
-
var
|
|
446
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
411
447
|
|
|
412
448
|
// src/components/Modal/Modal.css.ts
|
|
413
|
-
var
|
|
449
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
414
450
|
var body = "_1pdsmv0a";
|
|
415
451
|
var closeButton = "_1pdsmv09";
|
|
416
|
-
var content = (0,
|
|
452
|
+
var content = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
417
453
|
var description = "_1pdsmv08";
|
|
418
454
|
var footer = "_1pdsmv0b";
|
|
419
455
|
var header = "_1pdsmv05";
|
|
@@ -422,43 +458,43 @@ var overlay = "_1pdsmv00";
|
|
|
422
458
|
var title = "_1pdsmv07";
|
|
423
459
|
|
|
424
460
|
// src/components/Modal/Modal.tsx
|
|
425
|
-
var
|
|
461
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
426
462
|
function Modal({
|
|
427
463
|
open,
|
|
428
464
|
defaultOpen,
|
|
429
465
|
onOpenChange,
|
|
430
466
|
trigger: trigger2,
|
|
431
467
|
title: title3,
|
|
432
|
-
description:
|
|
468
|
+
description: description4,
|
|
433
469
|
children,
|
|
434
|
-
footer:
|
|
470
|
+
footer: footer3,
|
|
435
471
|
size,
|
|
436
472
|
hideCloseButton = false,
|
|
437
473
|
closeOnOverlayClick = true,
|
|
438
474
|
className
|
|
439
475
|
}) {
|
|
440
476
|
const portal2 = usePortalProps();
|
|
441
|
-
return /* @__PURE__ */ (0,
|
|
442
|
-
trigger2 && /* @__PURE__ */ (0,
|
|
443
|
-
/* @__PURE__ */ (0,
|
|
444
|
-
/* @__PURE__ */ (0,
|
|
445
|
-
/* @__PURE__ */ (0,
|
|
477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
478
|
+
trigger2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
|
|
479
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Dialog.Portal, { children: [
|
|
480
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
446
482
|
Dialog.Content,
|
|
447
483
|
{
|
|
448
484
|
className: cx(portal2.className, content({ size }), className),
|
|
449
485
|
style: portal2.style,
|
|
450
486
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
451
|
-
...
|
|
487
|
+
...description4 ? {} : { "aria-describedby": void 0 },
|
|
452
488
|
children: [
|
|
453
|
-
/* @__PURE__ */ (0,
|
|
454
|
-
/* @__PURE__ */ (0,
|
|
455
|
-
/* @__PURE__ */ (0,
|
|
456
|
-
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: header, children: [
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: headings, children: [
|
|
491
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Title, { className: title, children: title3 }),
|
|
492
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Description, { className: description, children: description4 })
|
|
457
493
|
] }),
|
|
458
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
494
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.XIcon, { size: 16 }) })
|
|
459
495
|
] }),
|
|
460
|
-
children && /* @__PURE__ */ (0,
|
|
461
|
-
|
|
496
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: body, children }),
|
|
497
|
+
footer3 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: footer, children: footer3 })
|
|
462
498
|
]
|
|
463
499
|
}
|
|
464
500
|
)
|
|
@@ -467,10 +503,100 @@ function Modal({
|
|
|
467
503
|
}
|
|
468
504
|
var ModalClose = Dialog.Close;
|
|
469
505
|
|
|
506
|
+
// src/components/RadioGroup/RadioGroup.tsx
|
|
507
|
+
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
508
|
+
var import_react7 = require("react");
|
|
509
|
+
|
|
510
|
+
// src/components/RadioGroup/RadioGroup.css.ts
|
|
511
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
512
|
+
var description2 = "_1w9iwjmd";
|
|
513
|
+
var groupLabel = "_1w9iwjme";
|
|
514
|
+
var indicator = "_1w9iwjma";
|
|
515
|
+
var items = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
516
|
+
var labelText = "_1w9iwjmc";
|
|
517
|
+
var option = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
518
|
+
var radio = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
519
|
+
var text = "_1w9iwjmb";
|
|
520
|
+
|
|
521
|
+
// src/components/RadioGroup/RadioGroup.tsx
|
|
522
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
523
|
+
var RadioGroup = (0, import_react7.forwardRef)(function RadioGroup2(props, ref) {
|
|
524
|
+
const {
|
|
525
|
+
options,
|
|
526
|
+
value: value2,
|
|
527
|
+
defaultValue,
|
|
528
|
+
onValueChange,
|
|
529
|
+
label: label3,
|
|
530
|
+
helperText: helperText2,
|
|
531
|
+
error,
|
|
532
|
+
orientation = "vertical",
|
|
533
|
+
size,
|
|
534
|
+
disabled,
|
|
535
|
+
required,
|
|
536
|
+
name,
|
|
537
|
+
id,
|
|
538
|
+
"aria-label": ariaLabel,
|
|
539
|
+
className
|
|
540
|
+
} = props;
|
|
541
|
+
const isControlled = "value" in props;
|
|
542
|
+
const generatedId = (0, import_react7.useId)();
|
|
543
|
+
const baseId = id ?? generatedId;
|
|
544
|
+
const labelId = label3 ? `${baseId}-label` : void 0;
|
|
545
|
+
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
546
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx(field, className), children: [
|
|
547
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { id: labelId, className: cx(label, groupLabel), children: [
|
|
548
|
+
label3,
|
|
549
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
550
|
+
] }),
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
552
|
+
RadixRadioGroup.Root,
|
|
553
|
+
{
|
|
554
|
+
ref,
|
|
555
|
+
id: baseId,
|
|
556
|
+
value: isControlled ? value2 ?? "" : void 0,
|
|
557
|
+
defaultValue,
|
|
558
|
+
onValueChange,
|
|
559
|
+
orientation,
|
|
560
|
+
disabled,
|
|
561
|
+
required,
|
|
562
|
+
name,
|
|
563
|
+
"aria-label": ariaLabel,
|
|
564
|
+
"aria-labelledby": labelId,
|
|
565
|
+
"aria-describedby": helperId,
|
|
566
|
+
"aria-invalid": error || void 0,
|
|
567
|
+
className: items({ orientation }),
|
|
568
|
+
children: options.map((option2) => {
|
|
569
|
+
const itemId = `${baseId}-${option2.value}`;
|
|
570
|
+
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
571
|
+
const itemDisabled = disabled || option2.disabled;
|
|
572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
573
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
574
|
+
RadixRadioGroup.Item,
|
|
575
|
+
{
|
|
576
|
+
id: itemId,
|
|
577
|
+
value: option2.value,
|
|
578
|
+
disabled: option2.disabled,
|
|
579
|
+
"aria-describedby": descriptionId,
|
|
580
|
+
className: radio({ size }),
|
|
581
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixRadioGroup.Indicator, { className: indicator })
|
|
582
|
+
}
|
|
583
|
+
),
|
|
584
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: text, children: [
|
|
585
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
586
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { id: descriptionId, className: description2, children: option2.description })
|
|
587
|
+
] })
|
|
588
|
+
] }, option2.value);
|
|
589
|
+
})
|
|
590
|
+
}
|
|
591
|
+
),
|
|
592
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
593
|
+
] });
|
|
594
|
+
});
|
|
595
|
+
|
|
470
596
|
// src/components/Select/Select.tsx
|
|
471
597
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
472
|
-
var
|
|
473
|
-
var
|
|
598
|
+
var import_react8 = require("react");
|
|
599
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
474
600
|
|
|
475
601
|
// src/components/Select/Select.css.ts
|
|
476
602
|
var content2 = "_1kx81e83";
|
|
@@ -482,15 +608,15 @@ var value = "_1kx81e81";
|
|
|
482
608
|
var viewport = "_1kx81e84";
|
|
483
609
|
|
|
484
610
|
// src/components/Select/Select.tsx
|
|
485
|
-
var
|
|
486
|
-
var Select = (0,
|
|
611
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
612
|
+
var Select = (0, import_react8.forwardRef)(function Select2(props, ref) {
|
|
487
613
|
const {
|
|
488
614
|
options,
|
|
489
615
|
value: value2,
|
|
490
616
|
defaultValue,
|
|
491
617
|
onValueChange,
|
|
492
618
|
placeholder,
|
|
493
|
-
label:
|
|
619
|
+
label: label3,
|
|
494
620
|
helperText: helperText2,
|
|
495
621
|
error,
|
|
496
622
|
size,
|
|
@@ -503,16 +629,16 @@ var Select = (0, import_react6.forwardRef)(function Select2(props, ref) {
|
|
|
503
629
|
className
|
|
504
630
|
} = props;
|
|
505
631
|
const isControlled = "value" in props;
|
|
506
|
-
const generatedId = (0,
|
|
632
|
+
const generatedId = (0, import_react8.useId)();
|
|
507
633
|
const triggerId = id ?? generatedId;
|
|
508
634
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
509
635
|
const portal2 = usePortalProps();
|
|
510
|
-
return /* @__PURE__ */ (0,
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
required && /* @__PURE__ */ (0,
|
|
636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
637
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: triggerId, className: label, children: [
|
|
638
|
+
label3,
|
|
639
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
514
640
|
] }),
|
|
515
|
-
/* @__PURE__ */ (0,
|
|
641
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
516
642
|
RadixSelect.Root,
|
|
517
643
|
{
|
|
518
644
|
value: isControlled ? value2 ?? "" : void 0,
|
|
@@ -522,7 +648,7 @@ var Select = (0, import_react6.forwardRef)(function Select2(props, ref) {
|
|
|
522
648
|
required,
|
|
523
649
|
name,
|
|
524
650
|
children: [
|
|
525
|
-
/* @__PURE__ */ (0,
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
526
652
|
RadixSelect.Trigger,
|
|
527
653
|
{
|
|
528
654
|
ref,
|
|
@@ -533,12 +659,12 @@ var Select = (0, import_react6.forwardRef)(function Select2(props, ref) {
|
|
|
533
659
|
"data-invalid": error || void 0,
|
|
534
660
|
className: cx(root3({ size, fullWidth }), trigger, className),
|
|
535
661
|
children: [
|
|
536
|
-
/* @__PURE__ */ (0,
|
|
537
|
-
/* @__PURE__ */ (0,
|
|
662
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
663
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.ChevronDownIcon, { size: 16 }) })
|
|
538
664
|
]
|
|
539
665
|
}
|
|
540
666
|
),
|
|
541
|
-
/* @__PURE__ */ (0,
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
542
668
|
RadixSelect.Content,
|
|
543
669
|
{
|
|
544
670
|
position: "popper",
|
|
@@ -546,39 +672,39 @@ var Select = (0, import_react6.forwardRef)(function Select2(props, ref) {
|
|
|
546
672
|
collisionPadding: 8,
|
|
547
673
|
className: cx(portal2.className, content2),
|
|
548
674
|
style: portal2.style,
|
|
549
|
-
children: /* @__PURE__ */ (0,
|
|
675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
550
676
|
RadixSelect.Item,
|
|
551
677
|
{
|
|
552
|
-
value:
|
|
553
|
-
disabled:
|
|
678
|
+
value: option2.value,
|
|
679
|
+
disabled: option2.disabled,
|
|
554
680
|
className: item,
|
|
555
681
|
children: [
|
|
556
|
-
/* @__PURE__ */ (0,
|
|
557
|
-
/* @__PURE__ */ (0,
|
|
682
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.CheckIcon, { size: 16 }) })
|
|
558
684
|
]
|
|
559
685
|
},
|
|
560
|
-
|
|
686
|
+
option2.value
|
|
561
687
|
)) })
|
|
562
688
|
}
|
|
563
689
|
) })
|
|
564
690
|
]
|
|
565
691
|
}
|
|
566
692
|
),
|
|
567
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
693
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
568
694
|
] });
|
|
569
695
|
});
|
|
570
696
|
|
|
571
697
|
// src/components/Stack/Stack.tsx
|
|
572
|
-
var
|
|
698
|
+
var import_react9 = require("react");
|
|
573
699
|
|
|
574
700
|
// src/components/Stack/Stack.css.ts
|
|
575
|
-
var
|
|
576
|
-
var stack = (0,
|
|
701
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
702
|
+
var stack = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
|
|
577
703
|
|
|
578
704
|
// src/components/Stack/Stack.tsx
|
|
579
|
-
var
|
|
580
|
-
var Stack = (0,
|
|
581
|
-
return /* @__PURE__ */ (0,
|
|
705
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
706
|
+
var Stack = (0, import_react9.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
582
708
|
Component,
|
|
583
709
|
{
|
|
584
710
|
ref,
|
|
@@ -588,42 +714,163 @@ var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div
|
|
|
588
714
|
);
|
|
589
715
|
});
|
|
590
716
|
|
|
717
|
+
// src/components/Switch/Switch.tsx
|
|
718
|
+
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
719
|
+
var import_react10 = require("react");
|
|
720
|
+
|
|
721
|
+
// src/components/Switch/Switch.css.ts
|
|
722
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
723
|
+
var label2 = "o33ul29";
|
|
724
|
+
var root4 = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
725
|
+
var thumb = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
726
|
+
var track = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
727
|
+
|
|
728
|
+
// src/components/Switch/Switch.tsx
|
|
729
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
730
|
+
var Switch = (0, import_react10.forwardRef)(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
731
|
+
const generatedId = (0, import_react10.useId)();
|
|
732
|
+
const switchId = id ?? generatedId;
|
|
733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
735
|
+
RadixSwitch.Root,
|
|
736
|
+
{
|
|
737
|
+
ref,
|
|
738
|
+
id: switchId,
|
|
739
|
+
disabled,
|
|
740
|
+
"aria-label": ariaLabel,
|
|
741
|
+
className: track({ size }),
|
|
742
|
+
...rest,
|
|
743
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
744
|
+
}
|
|
745
|
+
),
|
|
746
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: switchId, className: label2, children: label3 })
|
|
747
|
+
] });
|
|
748
|
+
});
|
|
749
|
+
|
|
750
|
+
// src/components/Textarea/Textarea.tsx
|
|
751
|
+
var import_react11 = require("react");
|
|
752
|
+
|
|
753
|
+
// src/components/Textarea/Textarea.css.ts
|
|
754
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
755
|
+
var count = "_1koawa9";
|
|
756
|
+
var countOver = "_1koawaa";
|
|
757
|
+
var defaultWidth = "_1koawa7";
|
|
758
|
+
var footer2 = "_1koawa8";
|
|
759
|
+
var textarea = (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
760
|
+
|
|
761
|
+
// src/components/Textarea/Textarea.tsx
|
|
762
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
763
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react11.useLayoutEffect : import_react11.useEffect;
|
|
764
|
+
var Textarea = (0, import_react11.forwardRef)(function Textarea2({
|
|
765
|
+
label: label3,
|
|
766
|
+
helperText: helperText2,
|
|
767
|
+
error,
|
|
768
|
+
size,
|
|
769
|
+
fullWidth,
|
|
770
|
+
resize,
|
|
771
|
+
autoResize,
|
|
772
|
+
showCount,
|
|
773
|
+
required,
|
|
774
|
+
id,
|
|
775
|
+
rows = 3,
|
|
776
|
+
value: value2,
|
|
777
|
+
defaultValue,
|
|
778
|
+
onChange,
|
|
779
|
+
maxLength,
|
|
780
|
+
className,
|
|
781
|
+
style,
|
|
782
|
+
"aria-describedby": ariaDescribedBy,
|
|
783
|
+
...rest
|
|
784
|
+
}, ref) {
|
|
785
|
+
const generatedId = (0, import_react11.useId)();
|
|
786
|
+
const textareaId = id ?? generatedId;
|
|
787
|
+
const helperId = helperText2 ? `${textareaId}-helper` : void 0;
|
|
788
|
+
const innerRef = (0, import_react11.useRef)(null);
|
|
789
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react11.useState)(() => String(defaultValue ?? "").length);
|
|
790
|
+
const length = value2 !== void 0 ? String(value2).length : uncontrolledLength;
|
|
791
|
+
const fitHeight = (0, import_react11.useCallback)(() => {
|
|
792
|
+
const el = innerRef.current;
|
|
793
|
+
if (!autoResize || !el) return;
|
|
794
|
+
el.style.height = "auto";
|
|
795
|
+
const borders = el.offsetHeight - el.clientHeight;
|
|
796
|
+
el.style.height = `${el.scrollHeight + borders}px`;
|
|
797
|
+
}, [autoResize]);
|
|
798
|
+
useIsomorphicLayoutEffect(fitHeight, [fitHeight, value2]);
|
|
799
|
+
const handleChange = (event) => {
|
|
800
|
+
if (value2 === void 0) setUncontrolledLength(event.target.value.length);
|
|
801
|
+
fitHeight();
|
|
802
|
+
onChange?.(event);
|
|
803
|
+
};
|
|
804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
805
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { htmlFor: textareaId, className: label, children: [
|
|
806
|
+
label3,
|
|
807
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
808
|
+
] }),
|
|
809
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
810
|
+
"textarea",
|
|
811
|
+
{
|
|
812
|
+
ref: mergeRefs(innerRef, ref),
|
|
813
|
+
id: textareaId,
|
|
814
|
+
rows,
|
|
815
|
+
value: value2,
|
|
816
|
+
defaultValue,
|
|
817
|
+
onChange: handleChange,
|
|
818
|
+
maxLength,
|
|
819
|
+
required,
|
|
820
|
+
"aria-invalid": error || void 0,
|
|
821
|
+
"aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
|
|
822
|
+
className: cx(
|
|
823
|
+
textarea({ size, resize: autoResize ? "none" : resize }),
|
|
824
|
+
!fullWidth && defaultWidth,
|
|
825
|
+
className
|
|
826
|
+
),
|
|
827
|
+
style: autoResize ? { overflowY: "auto", ...style } : style,
|
|
828
|
+
...rest
|
|
829
|
+
}
|
|
830
|
+
),
|
|
831
|
+
(helperText2 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: footer2, children: [
|
|
832
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
|
|
833
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
834
|
+
] })
|
|
835
|
+
] });
|
|
836
|
+
});
|
|
837
|
+
|
|
591
838
|
// src/components/Toast/Toast.tsx
|
|
592
839
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
593
|
-
var
|
|
594
|
-
var
|
|
840
|
+
var import_react12 = require("react");
|
|
841
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
595
842
|
|
|
596
843
|
// src/components/Toast/Toast.css.ts
|
|
597
|
-
var
|
|
844
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
598
845
|
var action = "_1g11zvx7";
|
|
599
846
|
var close = "_1g11zvx8";
|
|
600
|
-
var
|
|
847
|
+
var description3 = "_1g11zvx6";
|
|
601
848
|
var title2 = "_1g11zvx5";
|
|
602
|
-
var toast = (0,
|
|
849
|
+
var toast = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
603
850
|
var viewport2 = "_1g11zvx0";
|
|
604
851
|
|
|
605
852
|
// src/components/Toast/Toast.tsx
|
|
606
|
-
var
|
|
853
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
607
854
|
var REMOVE_DELAY = 500;
|
|
608
|
-
var ToastContext = (0,
|
|
609
|
-
function ToastProvider({ children, duration = 5e3, label:
|
|
610
|
-
const [toasts, setToasts] = (0,
|
|
611
|
-
const nextId = (0,
|
|
855
|
+
var ToastContext = (0, import_react12.createContext)(null);
|
|
856
|
+
function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
|
|
857
|
+
const [toasts, setToasts] = (0, import_react12.useState)([]);
|
|
858
|
+
const nextId = (0, import_react12.useRef)(0);
|
|
612
859
|
const portal2 = usePortalProps();
|
|
613
|
-
const toast2 = (0,
|
|
860
|
+
const toast2 = (0, import_react12.useCallback)((options) => {
|
|
614
861
|
const id = nextId.current++;
|
|
615
862
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
616
863
|
return id;
|
|
617
864
|
}, []);
|
|
618
|
-
const dismiss = (0,
|
|
865
|
+
const dismiss = (0, import_react12.useCallback)((id) => {
|
|
619
866
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
620
867
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
621
868
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
622
869
|
}, []);
|
|
623
|
-
const value2 = (0,
|
|
624
|
-
return /* @__PURE__ */ (0,
|
|
870
|
+
const value2 = (0, import_react12.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
|
|
625
872
|
children,
|
|
626
|
-
toasts.map(({ id, open, title: title3, description:
|
|
873
|
+
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
627
874
|
RadixToast.Root,
|
|
628
875
|
{
|
|
629
876
|
open,
|
|
@@ -633,19 +880,19 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
|
|
|
633
880
|
},
|
|
634
881
|
className: toast({ variant }),
|
|
635
882
|
children: [
|
|
636
|
-
/* @__PURE__ */ (0,
|
|
637
|
-
|
|
638
|
-
action2 && /* @__PURE__ */ (0,
|
|
639
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Title, { className: title2, children: title3 }),
|
|
884
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Description, { className: description3, children: description4 }),
|
|
885
|
+
action2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
|
|
886
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons4.XIcon, { size: 16 }) })
|
|
640
887
|
]
|
|
641
888
|
},
|
|
642
889
|
id
|
|
643
890
|
)),
|
|
644
|
-
/* @__PURE__ */ (0,
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
645
892
|
] }) });
|
|
646
893
|
}
|
|
647
894
|
function useToast() {
|
|
648
|
-
const context = (0,
|
|
895
|
+
const context = (0, import_react12.useContext)(ToastContext);
|
|
649
896
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
650
897
|
return context;
|
|
651
898
|
}
|
|
@@ -658,7 +905,7 @@ var arrow = "z7rufs1";
|
|
|
658
905
|
var content3 = "z7rufs0";
|
|
659
906
|
|
|
660
907
|
// src/components/Tooltip/Tooltip.tsx
|
|
661
|
-
var
|
|
908
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
662
909
|
function Tooltip({
|
|
663
910
|
content: content4,
|
|
664
911
|
children,
|
|
@@ -673,9 +920,9 @@ function Tooltip({
|
|
|
673
920
|
}) {
|
|
674
921
|
const portal2 = usePortalProps();
|
|
675
922
|
if (disabled || content4 == null || content4 === "") return children;
|
|
676
|
-
return /* @__PURE__ */ (0,
|
|
677
|
-
/* @__PURE__ */ (0,
|
|
678
|
-
/* @__PURE__ */ (0,
|
|
923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
924
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
925
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
679
926
|
RadixTooltip.Content,
|
|
680
927
|
{
|
|
681
928
|
side,
|
|
@@ -686,7 +933,7 @@ function Tooltip({
|
|
|
686
933
|
style: portal2.style,
|
|
687
934
|
children: [
|
|
688
935
|
content4,
|
|
689
|
-
/* @__PURE__ */ (0,
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
690
937
|
]
|
|
691
938
|
}
|
|
692
939
|
) })
|
|
@@ -694,14 +941,14 @@ function Tooltip({
|
|
|
694
941
|
}
|
|
695
942
|
|
|
696
943
|
// src/components/Typography/Typography.tsx
|
|
697
|
-
var
|
|
944
|
+
var import_react13 = require("react");
|
|
698
945
|
|
|
699
946
|
// src/components/Typography/Typography.css.ts
|
|
700
|
-
var
|
|
701
|
-
var typography = (0,
|
|
947
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
948
|
+
var typography = (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", inherit: "kioliog" }, weight: { regular: "kiolioh", medium: "kiolioi", semibold: "kiolioj", bold: "kioliok" }, align: { start: "kioliol", center: "kioliom", end: "kiolion" }, truncate: { true: "kiolioo" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
702
949
|
|
|
703
950
|
// src/components/Typography/Typography.tsx
|
|
704
|
-
var
|
|
951
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
705
952
|
var defaultElement = {
|
|
706
953
|
display: "h1",
|
|
707
954
|
h1: "h1",
|
|
@@ -713,9 +960,9 @@ var defaultElement = {
|
|
|
713
960
|
"body-sm": "p",
|
|
714
961
|
caption: "span"
|
|
715
962
|
};
|
|
716
|
-
var Typography = (0,
|
|
963
|
+
var Typography = (0, import_react13.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
717
964
|
const Component = as ?? defaultElement[variant];
|
|
718
|
-
return /* @__PURE__ */ (0,
|
|
965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
719
966
|
Component,
|
|
720
967
|
{
|
|
721
968
|
ref,
|
|
@@ -731,9 +978,13 @@ var Typography = (0, import_react9.forwardRef)(function Typography2({ variant =
|
|
|
731
978
|
Input,
|
|
732
979
|
Modal,
|
|
733
980
|
ModalClose,
|
|
981
|
+
RadioGroup,
|
|
734
982
|
Select,
|
|
983
|
+
Spinner,
|
|
735
984
|
Stack,
|
|
985
|
+
Switch,
|
|
736
986
|
TextField,
|
|
987
|
+
Textarea,
|
|
737
988
|
ThemeProvider,
|
|
738
989
|
ToastProvider,
|
|
739
990
|
Tooltip,
|