@bestow-ui/react 0.4.0 → 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 +190 -156
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +118 -57
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +19 -1
- package/dist/index.d.ts +19 -1
- package/dist/index.js +167 -134
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -38,6 +38,7 @@ __export(index_exports, {
|
|
|
38
38
|
ModalClose: () => ModalClose,
|
|
39
39
|
RadioGroup: () => RadioGroup,
|
|
40
40
|
Select: () => Select,
|
|
41
|
+
Spinner: () => Spinner,
|
|
41
42
|
Stack: () => Stack,
|
|
42
43
|
Switch: () => Switch,
|
|
43
44
|
TextField: () => TextField,
|
|
@@ -265,34 +266,66 @@ function usePortalClassName() {
|
|
|
265
266
|
}
|
|
266
267
|
|
|
267
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");
|
|
268
273
|
var import_react2 = require("react");
|
|
269
274
|
|
|
270
|
-
// src/
|
|
275
|
+
// src/styles/visuallyHidden.css.ts
|
|
276
|
+
var visuallyHidden = "_1kdtbw10";
|
|
277
|
+
|
|
278
|
+
// src/components/Spinner/Spinner.css.ts
|
|
271
279
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
272
|
-
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: [] });
|
|
273
295
|
var icon = "xcekdai";
|
|
274
296
|
|
|
275
297
|
// src/components/Button/Button.tsx
|
|
276
|
-
var
|
|
277
|
-
var Button = (0,
|
|
278
|
-
|
|
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)(
|
|
279
309
|
"button",
|
|
280
310
|
{
|
|
281
311
|
ref,
|
|
282
312
|
type,
|
|
283
313
|
className: cx(button({ variant, color, size, fullWidth }), className),
|
|
314
|
+
"aria-busy": loading || void 0,
|
|
315
|
+
"aria-disabled": loading || void 0,
|
|
316
|
+
onClick: handleClick,
|
|
284
317
|
...rest,
|
|
285
318
|
children: [
|
|
286
|
-
|
|
319
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, children: leading }),
|
|
287
320
|
children,
|
|
288
|
-
endIcon && /* @__PURE__ */ (0,
|
|
321
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, children: endIcon })
|
|
289
322
|
]
|
|
290
323
|
}
|
|
291
324
|
);
|
|
292
325
|
});
|
|
293
326
|
|
|
294
327
|
// src/components/Checkbox/Checkbox.tsx
|
|
295
|
-
var
|
|
328
|
+
var import_react4 = require("react");
|
|
296
329
|
|
|
297
330
|
// src/utils/mergeRefs.ts
|
|
298
331
|
function mergeRefs(...refs) {
|
|
@@ -305,23 +338,23 @@ function mergeRefs(...refs) {
|
|
|
305
338
|
}
|
|
306
339
|
|
|
307
340
|
// src/components/Checkbox/Checkbox.css.ts
|
|
308
|
-
var
|
|
341
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
309
342
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
310
|
-
var control = (0,
|
|
343
|
+
var control = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
311
344
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
312
345
|
var input = "_1y7mzsn6";
|
|
313
|
-
var root2 = (0,
|
|
346
|
+
var root2 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
314
347
|
|
|
315
348
|
// src/components/Checkbox/Checkbox.tsx
|
|
316
|
-
var
|
|
317
|
-
var Checkbox = (0,
|
|
318
|
-
const innerRef = (0,
|
|
319
|
-
(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)(() => {
|
|
320
353
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
321
354
|
}, [indeterminate]);
|
|
322
|
-
return /* @__PURE__ */ (0,
|
|
323
|
-
/* @__PURE__ */ (0,
|
|
324
|
-
/* @__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)(
|
|
325
358
|
"input",
|
|
326
359
|
{
|
|
327
360
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -332,39 +365,39 @@ var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label3,
|
|
|
332
365
|
...rest
|
|
333
366
|
}
|
|
334
367
|
),
|
|
335
|
-
/* @__PURE__ */ (0,
|
|
336
|
-
/* @__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" }) })
|
|
337
370
|
] }),
|
|
338
371
|
label3
|
|
339
372
|
] });
|
|
340
373
|
});
|
|
341
374
|
|
|
342
375
|
// src/components/Input/Input.tsx
|
|
343
|
-
var
|
|
376
|
+
var import_react5 = require("react");
|
|
344
377
|
|
|
345
378
|
// src/components/Input/Input.css.ts
|
|
346
|
-
var
|
|
379
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
347
380
|
var adornment = "_19p5zvh6";
|
|
348
381
|
var field = "_19p5zvh7";
|
|
349
382
|
var fieldFullWidth = "_19p5zvh8";
|
|
350
|
-
var helperText = (0,
|
|
383
|
+
var helperText = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
351
384
|
var input2 = "_19p5zvh5";
|
|
352
385
|
var label = "_19p5zvh9";
|
|
353
386
|
var requiredMark = "_19p5zvha";
|
|
354
|
-
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: [] });
|
|
355
388
|
|
|
356
389
|
// src/components/Input/Input.tsx
|
|
357
|
-
var
|
|
358
|
-
var Input = (0,
|
|
359
|
-
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)(
|
|
360
393
|
"div",
|
|
361
394
|
{
|
|
362
395
|
className: cx(root3({ size, fullWidth }), rootClassName),
|
|
363
396
|
"data-invalid": invalid || void 0,
|
|
364
397
|
"data-disabled": disabled || void 0,
|
|
365
398
|
children: [
|
|
366
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
367
|
-
/* @__PURE__ */ (0,
|
|
399
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: adornment, children: startAdornment }),
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
368
401
|
"input",
|
|
369
402
|
{
|
|
370
403
|
ref,
|
|
@@ -374,25 +407,25 @@ var Input = (0, import_react4.forwardRef)(function Input2({ size, invalid, fullW
|
|
|
374
407
|
...rest
|
|
375
408
|
}
|
|
376
409
|
),
|
|
377
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
410
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: adornment, children: endAdornment })
|
|
378
411
|
]
|
|
379
412
|
}
|
|
380
413
|
);
|
|
381
414
|
});
|
|
382
415
|
|
|
383
416
|
// src/components/Input/TextField.tsx
|
|
384
|
-
var
|
|
385
|
-
var
|
|
386
|
-
var TextField = (0,
|
|
387
|
-
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)();
|
|
388
421
|
const inputId = id ?? generatedId;
|
|
389
422
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
390
|
-
return /* @__PURE__ */ (0,
|
|
391
|
-
label3 && /* @__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: [
|
|
392
425
|
label3,
|
|
393
|
-
required && /* @__PURE__ */ (0,
|
|
426
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
394
427
|
] }),
|
|
395
|
-
/* @__PURE__ */ (0,
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
396
429
|
Input,
|
|
397
430
|
{
|
|
398
431
|
ref,
|
|
@@ -404,19 +437,19 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
|
|
|
404
437
|
...rest
|
|
405
438
|
}
|
|
406
439
|
),
|
|
407
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
440
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
408
441
|
] });
|
|
409
442
|
});
|
|
410
443
|
|
|
411
444
|
// src/components/Modal/Modal.tsx
|
|
412
445
|
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
413
|
-
var
|
|
446
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
414
447
|
|
|
415
448
|
// src/components/Modal/Modal.css.ts
|
|
416
|
-
var
|
|
449
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
417
450
|
var body = "_1pdsmv0a";
|
|
418
451
|
var closeButton = "_1pdsmv09";
|
|
419
|
-
var content = (0,
|
|
452
|
+
var content = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
420
453
|
var description = "_1pdsmv08";
|
|
421
454
|
var footer = "_1pdsmv0b";
|
|
422
455
|
var header = "_1pdsmv05";
|
|
@@ -425,7 +458,7 @@ var overlay = "_1pdsmv00";
|
|
|
425
458
|
var title = "_1pdsmv07";
|
|
426
459
|
|
|
427
460
|
// src/components/Modal/Modal.tsx
|
|
428
|
-
var
|
|
461
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
429
462
|
function Modal({
|
|
430
463
|
open,
|
|
431
464
|
defaultOpen,
|
|
@@ -441,11 +474,11 @@ function Modal({
|
|
|
441
474
|
className
|
|
442
475
|
}) {
|
|
443
476
|
const portal2 = usePortalProps();
|
|
444
|
-
return /* @__PURE__ */ (0,
|
|
445
|
-
trigger2 && /* @__PURE__ */ (0,
|
|
446
|
-
/* @__PURE__ */ (0,
|
|
447
|
-
/* @__PURE__ */ (0,
|
|
448
|
-
/* @__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)(
|
|
449
482
|
Dialog.Content,
|
|
450
483
|
{
|
|
451
484
|
className: cx(portal2.className, content({ size }), className),
|
|
@@ -453,15 +486,15 @@ function Modal({
|
|
|
453
486
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
454
487
|
...description4 ? {} : { "aria-describedby": void 0 },
|
|
455
488
|
children: [
|
|
456
|
-
/* @__PURE__ */ (0,
|
|
457
|
-
/* @__PURE__ */ (0,
|
|
458
|
-
/* @__PURE__ */ (0,
|
|
459
|
-
description4 && /* @__PURE__ */ (0,
|
|
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 })
|
|
460
493
|
] }),
|
|
461
|
-
!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 }) })
|
|
462
495
|
] }),
|
|
463
|
-
children && /* @__PURE__ */ (0,
|
|
464
|
-
footer3 && /* @__PURE__ */ (0,
|
|
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 })
|
|
465
498
|
]
|
|
466
499
|
}
|
|
467
500
|
)
|
|
@@ -472,22 +505,22 @@ var ModalClose = Dialog.Close;
|
|
|
472
505
|
|
|
473
506
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
474
507
|
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
475
|
-
var
|
|
508
|
+
var import_react7 = require("react");
|
|
476
509
|
|
|
477
510
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
478
|
-
var
|
|
511
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
479
512
|
var description2 = "_1w9iwjmd";
|
|
480
513
|
var groupLabel = "_1w9iwjme";
|
|
481
514
|
var indicator = "_1w9iwjma";
|
|
482
|
-
var items = (0,
|
|
515
|
+
var items = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
483
516
|
var labelText = "_1w9iwjmc";
|
|
484
|
-
var option = (0,
|
|
485
|
-
var radio = (0,
|
|
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: [] });
|
|
486
519
|
var text = "_1w9iwjmb";
|
|
487
520
|
|
|
488
521
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
489
|
-
var
|
|
490
|
-
var RadioGroup = (0,
|
|
522
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
523
|
+
var RadioGroup = (0, import_react7.forwardRef)(function RadioGroup2(props, ref) {
|
|
491
524
|
const {
|
|
492
525
|
options,
|
|
493
526
|
value: value2,
|
|
@@ -506,16 +539,16 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
506
539
|
className
|
|
507
540
|
} = props;
|
|
508
541
|
const isControlled = "value" in props;
|
|
509
|
-
const generatedId = (0,
|
|
542
|
+
const generatedId = (0, import_react7.useId)();
|
|
510
543
|
const baseId = id ?? generatedId;
|
|
511
544
|
const labelId = label3 ? `${baseId}-label` : void 0;
|
|
512
545
|
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
513
|
-
return /* @__PURE__ */ (0,
|
|
514
|
-
label3 && /* @__PURE__ */ (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: [
|
|
515
548
|
label3,
|
|
516
|
-
required && /* @__PURE__ */ (0,
|
|
549
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
517
550
|
] }),
|
|
518
|
-
/* @__PURE__ */ (0,
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
519
552
|
RadixRadioGroup.Root,
|
|
520
553
|
{
|
|
521
554
|
ref,
|
|
@@ -536,8 +569,8 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
536
569
|
const itemId = `${baseId}-${option2.value}`;
|
|
537
570
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
538
571
|
const itemDisabled = disabled || option2.disabled;
|
|
539
|
-
return /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
541
574
|
RadixRadioGroup.Item,
|
|
542
575
|
{
|
|
543
576
|
id: itemId,
|
|
@@ -545,25 +578,25 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
545
578
|
disabled: option2.disabled,
|
|
546
579
|
"aria-describedby": descriptionId,
|
|
547
580
|
className: radio({ size }),
|
|
548
|
-
children: /* @__PURE__ */ (0,
|
|
581
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixRadioGroup.Indicator, { className: indicator })
|
|
549
582
|
}
|
|
550
583
|
),
|
|
551
|
-
/* @__PURE__ */ (0,
|
|
552
|
-
/* @__PURE__ */ (0,
|
|
553
|
-
option2.description && /* @__PURE__ */ (0,
|
|
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 })
|
|
554
587
|
] })
|
|
555
588
|
] }, option2.value);
|
|
556
589
|
})
|
|
557
590
|
}
|
|
558
591
|
),
|
|
559
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
592
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
560
593
|
] });
|
|
561
594
|
});
|
|
562
595
|
|
|
563
596
|
// src/components/Select/Select.tsx
|
|
564
597
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
565
|
-
var
|
|
566
|
-
var
|
|
598
|
+
var import_react8 = require("react");
|
|
599
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
567
600
|
|
|
568
601
|
// src/components/Select/Select.css.ts
|
|
569
602
|
var content2 = "_1kx81e83";
|
|
@@ -575,8 +608,8 @@ var value = "_1kx81e81";
|
|
|
575
608
|
var viewport = "_1kx81e84";
|
|
576
609
|
|
|
577
610
|
// src/components/Select/Select.tsx
|
|
578
|
-
var
|
|
579
|
-
var Select = (0,
|
|
611
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
612
|
+
var Select = (0, import_react8.forwardRef)(function Select2(props, ref) {
|
|
580
613
|
const {
|
|
581
614
|
options,
|
|
582
615
|
value: value2,
|
|
@@ -596,16 +629,16 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
596
629
|
className
|
|
597
630
|
} = props;
|
|
598
631
|
const isControlled = "value" in props;
|
|
599
|
-
const generatedId = (0,
|
|
632
|
+
const generatedId = (0, import_react8.useId)();
|
|
600
633
|
const triggerId = id ?? generatedId;
|
|
601
634
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
602
635
|
const portal2 = usePortalProps();
|
|
603
|
-
return /* @__PURE__ */ (0,
|
|
604
|
-
label3 && /* @__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: [
|
|
605
638
|
label3,
|
|
606
|
-
required && /* @__PURE__ */ (0,
|
|
639
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
607
640
|
] }),
|
|
608
|
-
/* @__PURE__ */ (0,
|
|
641
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
609
642
|
RadixSelect.Root,
|
|
610
643
|
{
|
|
611
644
|
value: isControlled ? value2 ?? "" : void 0,
|
|
@@ -615,7 +648,7 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
615
648
|
required,
|
|
616
649
|
name,
|
|
617
650
|
children: [
|
|
618
|
-
/* @__PURE__ */ (0,
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
619
652
|
RadixSelect.Trigger,
|
|
620
653
|
{
|
|
621
654
|
ref,
|
|
@@ -626,12 +659,12 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
626
659
|
"data-invalid": error || void 0,
|
|
627
660
|
className: cx(root3({ size, fullWidth }), trigger, className),
|
|
628
661
|
children: [
|
|
629
|
-
/* @__PURE__ */ (0,
|
|
630
|
-
/* @__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 }) })
|
|
631
664
|
]
|
|
632
665
|
}
|
|
633
666
|
),
|
|
634
|
-
/* @__PURE__ */ (0,
|
|
667
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
635
668
|
RadixSelect.Content,
|
|
636
669
|
{
|
|
637
670
|
position: "popper",
|
|
@@ -639,15 +672,15 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
639
672
|
collisionPadding: 8,
|
|
640
673
|
className: cx(portal2.className, content2),
|
|
641
674
|
style: portal2.style,
|
|
642
|
-
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)(
|
|
643
676
|
RadixSelect.Item,
|
|
644
677
|
{
|
|
645
678
|
value: option2.value,
|
|
646
679
|
disabled: option2.disabled,
|
|
647
680
|
className: item,
|
|
648
681
|
children: [
|
|
649
|
-
/* @__PURE__ */ (0,
|
|
650
|
-
/* @__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 }) })
|
|
651
684
|
]
|
|
652
685
|
},
|
|
653
686
|
option2.value
|
|
@@ -657,21 +690,21 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
657
690
|
]
|
|
658
691
|
}
|
|
659
692
|
),
|
|
660
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
693
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
661
694
|
] });
|
|
662
695
|
});
|
|
663
696
|
|
|
664
697
|
// src/components/Stack/Stack.tsx
|
|
665
|
-
var
|
|
698
|
+
var import_react9 = require("react");
|
|
666
699
|
|
|
667
700
|
// src/components/Stack/Stack.css.ts
|
|
668
|
-
var
|
|
669
|
-
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: [] });
|
|
670
703
|
|
|
671
704
|
// src/components/Stack/Stack.tsx
|
|
672
|
-
var
|
|
673
|
-
var Stack = (0,
|
|
674
|
-
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)(
|
|
675
708
|
Component,
|
|
676
709
|
{
|
|
677
710
|
ref,
|
|
@@ -683,22 +716,22 @@ var Stack = (0, import_react8.forwardRef)(function Stack2({ as: Component = "div
|
|
|
683
716
|
|
|
684
717
|
// src/components/Switch/Switch.tsx
|
|
685
718
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
686
|
-
var
|
|
719
|
+
var import_react10 = require("react");
|
|
687
720
|
|
|
688
721
|
// src/components/Switch/Switch.css.ts
|
|
689
|
-
var
|
|
722
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
690
723
|
var label2 = "o33ul29";
|
|
691
|
-
var root4 = (0,
|
|
692
|
-
var thumb = (0,
|
|
693
|
-
var track = (0,
|
|
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: [] });
|
|
694
727
|
|
|
695
728
|
// src/components/Switch/Switch.tsx
|
|
696
|
-
var
|
|
697
|
-
var Switch = (0,
|
|
698
|
-
const generatedId = (0,
|
|
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)();
|
|
699
732
|
const switchId = id ?? generatedId;
|
|
700
|
-
return /* @__PURE__ */ (0,
|
|
701
|
-
/* @__PURE__ */ (0,
|
|
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)(
|
|
702
735
|
RadixSwitch.Root,
|
|
703
736
|
{
|
|
704
737
|
ref,
|
|
@@ -707,28 +740,28 @@ var Switch = (0, import_react9.forwardRef)(function Switch2({ label: label3, siz
|
|
|
707
740
|
"aria-label": ariaLabel,
|
|
708
741
|
className: track({ size }),
|
|
709
742
|
...rest,
|
|
710
|
-
children: /* @__PURE__ */ (0,
|
|
743
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
711
744
|
}
|
|
712
745
|
),
|
|
713
|
-
label3 && /* @__PURE__ */ (0,
|
|
746
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: switchId, className: label2, children: label3 })
|
|
714
747
|
] });
|
|
715
748
|
});
|
|
716
749
|
|
|
717
750
|
// src/components/Textarea/Textarea.tsx
|
|
718
|
-
var
|
|
751
|
+
var import_react11 = require("react");
|
|
719
752
|
|
|
720
753
|
// src/components/Textarea/Textarea.css.ts
|
|
721
|
-
var
|
|
754
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
722
755
|
var count = "_1koawa9";
|
|
723
756
|
var countOver = "_1koawaa";
|
|
724
757
|
var defaultWidth = "_1koawa7";
|
|
725
758
|
var footer2 = "_1koawa8";
|
|
726
|
-
var textarea = (0,
|
|
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: [] });
|
|
727
760
|
|
|
728
761
|
// src/components/Textarea/Textarea.tsx
|
|
729
|
-
var
|
|
730
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
731
|
-
var Textarea = (0,
|
|
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({
|
|
732
765
|
label: label3,
|
|
733
766
|
helperText: helperText2,
|
|
734
767
|
error,
|
|
@@ -749,13 +782,13 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
749
782
|
"aria-describedby": ariaDescribedBy,
|
|
750
783
|
...rest
|
|
751
784
|
}, ref) {
|
|
752
|
-
const generatedId = (0,
|
|
785
|
+
const generatedId = (0, import_react11.useId)();
|
|
753
786
|
const textareaId = id ?? generatedId;
|
|
754
787
|
const helperId = helperText2 ? `${textareaId}-helper` : void 0;
|
|
755
|
-
const innerRef = (0,
|
|
756
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
788
|
+
const innerRef = (0, import_react11.useRef)(null);
|
|
789
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react11.useState)(() => String(defaultValue ?? "").length);
|
|
757
790
|
const length = value2 !== void 0 ? String(value2).length : uncontrolledLength;
|
|
758
|
-
const fitHeight = (0,
|
|
791
|
+
const fitHeight = (0, import_react11.useCallback)(() => {
|
|
759
792
|
const el = innerRef.current;
|
|
760
793
|
if (!autoResize || !el) return;
|
|
761
794
|
el.style.height = "auto";
|
|
@@ -768,12 +801,12 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
768
801
|
fitHeight();
|
|
769
802
|
onChange?.(event);
|
|
770
803
|
};
|
|
771
|
-
return /* @__PURE__ */ (0,
|
|
772
|
-
label3 && /* @__PURE__ */ (0,
|
|
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: [
|
|
773
806
|
label3,
|
|
774
|
-
required && /* @__PURE__ */ (0,
|
|
807
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
775
808
|
] }),
|
|
776
|
-
/* @__PURE__ */ (0,
|
|
809
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
777
810
|
"textarea",
|
|
778
811
|
{
|
|
779
812
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -795,49 +828,49 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
795
828
|
...rest
|
|
796
829
|
}
|
|
797
830
|
),
|
|
798
|
-
(helperText2 || showCount) && /* @__PURE__ */ (0,
|
|
799
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
800
|
-
showCount && /* @__PURE__ */ (0,
|
|
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 })
|
|
801
834
|
] })
|
|
802
835
|
] });
|
|
803
836
|
});
|
|
804
837
|
|
|
805
838
|
// src/components/Toast/Toast.tsx
|
|
806
839
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
807
|
-
var
|
|
808
|
-
var
|
|
840
|
+
var import_react12 = require("react");
|
|
841
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
809
842
|
|
|
810
843
|
// src/components/Toast/Toast.css.ts
|
|
811
|
-
var
|
|
844
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
812
845
|
var action = "_1g11zvx7";
|
|
813
846
|
var close = "_1g11zvx8";
|
|
814
847
|
var description3 = "_1g11zvx6";
|
|
815
848
|
var title2 = "_1g11zvx5";
|
|
816
|
-
var toast = (0,
|
|
849
|
+
var toast = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
817
850
|
var viewport2 = "_1g11zvx0";
|
|
818
851
|
|
|
819
852
|
// src/components/Toast/Toast.tsx
|
|
820
|
-
var
|
|
853
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
821
854
|
var REMOVE_DELAY = 500;
|
|
822
|
-
var ToastContext = (0,
|
|
855
|
+
var ToastContext = (0, import_react12.createContext)(null);
|
|
823
856
|
function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
|
|
824
|
-
const [toasts, setToasts] = (0,
|
|
825
|
-
const nextId = (0,
|
|
857
|
+
const [toasts, setToasts] = (0, import_react12.useState)([]);
|
|
858
|
+
const nextId = (0, import_react12.useRef)(0);
|
|
826
859
|
const portal2 = usePortalProps();
|
|
827
|
-
const toast2 = (0,
|
|
860
|
+
const toast2 = (0, import_react12.useCallback)((options) => {
|
|
828
861
|
const id = nextId.current++;
|
|
829
862
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
830
863
|
return id;
|
|
831
864
|
}, []);
|
|
832
|
-
const dismiss = (0,
|
|
865
|
+
const dismiss = (0, import_react12.useCallback)((id) => {
|
|
833
866
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
834
867
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
835
868
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
836
869
|
}, []);
|
|
837
|
-
const value2 = (0,
|
|
838
|
-
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: [
|
|
839
872
|
children,
|
|
840
|
-
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0,
|
|
873
|
+
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
841
874
|
RadixToast.Root,
|
|
842
875
|
{
|
|
843
876
|
open,
|
|
@@ -847,19 +880,19 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
|
|
|
847
880
|
},
|
|
848
881
|
className: toast({ variant }),
|
|
849
882
|
children: [
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
851
|
-
description4 && /* @__PURE__ */ (0,
|
|
852
|
-
action2 && /* @__PURE__ */ (0,
|
|
853
|
-
/* @__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 }) })
|
|
854
887
|
]
|
|
855
888
|
},
|
|
856
889
|
id
|
|
857
890
|
)),
|
|
858
|
-
/* @__PURE__ */ (0,
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
859
892
|
] }) });
|
|
860
893
|
}
|
|
861
894
|
function useToast() {
|
|
862
|
-
const context = (0,
|
|
895
|
+
const context = (0, import_react12.useContext)(ToastContext);
|
|
863
896
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
864
897
|
return context;
|
|
865
898
|
}
|
|
@@ -872,7 +905,7 @@ var arrow = "z7rufs1";
|
|
|
872
905
|
var content3 = "z7rufs0";
|
|
873
906
|
|
|
874
907
|
// src/components/Tooltip/Tooltip.tsx
|
|
875
|
-
var
|
|
908
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
876
909
|
function Tooltip({
|
|
877
910
|
content: content4,
|
|
878
911
|
children,
|
|
@@ -887,9 +920,9 @@ function Tooltip({
|
|
|
887
920
|
}) {
|
|
888
921
|
const portal2 = usePortalProps();
|
|
889
922
|
if (disabled || content4 == null || content4 === "") return children;
|
|
890
|
-
return /* @__PURE__ */ (0,
|
|
891
|
-
/* @__PURE__ */ (0,
|
|
892
|
-
/* @__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)(
|
|
893
926
|
RadixTooltip.Content,
|
|
894
927
|
{
|
|
895
928
|
side,
|
|
@@ -900,7 +933,7 @@ function Tooltip({
|
|
|
900
933
|
style: portal2.style,
|
|
901
934
|
children: [
|
|
902
935
|
content4,
|
|
903
|
-
/* @__PURE__ */ (0,
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
904
937
|
]
|
|
905
938
|
}
|
|
906
939
|
) })
|
|
@@ -908,14 +941,14 @@ function Tooltip({
|
|
|
908
941
|
}
|
|
909
942
|
|
|
910
943
|
// src/components/Typography/Typography.tsx
|
|
911
|
-
var
|
|
944
|
+
var import_react13 = require("react");
|
|
912
945
|
|
|
913
946
|
// src/components/Typography/Typography.css.ts
|
|
914
|
-
var
|
|
915
|
-
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: [] });
|
|
916
949
|
|
|
917
950
|
// src/components/Typography/Typography.tsx
|
|
918
|
-
var
|
|
951
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
919
952
|
var defaultElement = {
|
|
920
953
|
display: "h1",
|
|
921
954
|
h1: "h1",
|
|
@@ -927,9 +960,9 @@ var defaultElement = {
|
|
|
927
960
|
"body-sm": "p",
|
|
928
961
|
caption: "span"
|
|
929
962
|
};
|
|
930
|
-
var Typography = (0,
|
|
963
|
+
var Typography = (0, import_react13.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
931
964
|
const Component = as ?? defaultElement[variant];
|
|
932
|
-
return /* @__PURE__ */ (0,
|
|
965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
933
966
|
Component,
|
|
934
967
|
{
|
|
935
968
|
ref,
|
|
@@ -947,6 +980,7 @@ var Typography = (0, import_react12.forwardRef)(function Typography2({ variant =
|
|
|
947
980
|
ModalClose,
|
|
948
981
|
RadioGroup,
|
|
949
982
|
Select,
|
|
983
|
+
Spinner,
|
|
950
984
|
Stack,
|
|
951
985
|
Switch,
|
|
952
986
|
TextField,
|