@bestow-ui/react 0.4.0 → 0.6.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 +250 -164
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +238 -57
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +50 -2
- package/dist/index.d.ts +50 -2
- package/dist/index.js +222 -142
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -31,13 +31,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
// src/index.ts
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
|
+
Badge: () => Badge,
|
|
34
35
|
Button: () => Button,
|
|
36
|
+
Card: () => Card,
|
|
37
|
+
CardBody: () => CardBody,
|
|
38
|
+
CardFooter: () => CardFooter,
|
|
39
|
+
CardHeader: () => CardHeader,
|
|
35
40
|
Checkbox: () => Checkbox,
|
|
36
41
|
Input: () => Input,
|
|
37
42
|
Modal: () => Modal,
|
|
38
43
|
ModalClose: () => ModalClose,
|
|
39
44
|
RadioGroup: () => RadioGroup,
|
|
40
45
|
Select: () => Select,
|
|
46
|
+
Spinner: () => Spinner,
|
|
41
47
|
Stack: () => Stack,
|
|
42
48
|
Switch: () => Switch,
|
|
43
49
|
TextField: () => TextField,
|
|
@@ -264,35 +270,109 @@ function usePortalClassName() {
|
|
|
264
270
|
return usePortalProps().className;
|
|
265
271
|
}
|
|
266
272
|
|
|
267
|
-
// src/components/
|
|
273
|
+
// src/components/Badge/Badge.tsx
|
|
268
274
|
var import_react2 = require("react");
|
|
269
275
|
|
|
270
|
-
// src/components/
|
|
276
|
+
// src/components/Badge/Badge.css.ts
|
|
271
277
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
272
|
-
var
|
|
273
|
-
var icon = "
|
|
278
|
+
var badge = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb" }, size: { sm: "_1295cfnc", md: "_1295cfnd", lg: "_1295cfne" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
279
|
+
var icon = "_1295cfnf";
|
|
274
280
|
|
|
275
|
-
// src/components/
|
|
281
|
+
// src/components/Badge/Badge.tsx
|
|
276
282
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
277
|
-
var
|
|
278
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
283
|
+
var Badge = (0, import_react2.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
285
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: icon, children: startIcon }),
|
|
286
|
+
children
|
|
287
|
+
] });
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
// src/components/Button/Button.tsx
|
|
291
|
+
var import_react4 = require("react");
|
|
292
|
+
|
|
293
|
+
// src/components/Spinner/Spinner.tsx
|
|
294
|
+
var import_icons = require("@bestow-ui/icons");
|
|
295
|
+
var import_react3 = require("react");
|
|
296
|
+
|
|
297
|
+
// src/styles/visuallyHidden.css.ts
|
|
298
|
+
var visuallyHidden = "_1kdtbw10";
|
|
299
|
+
|
|
300
|
+
// src/components/Spinner/Spinner.css.ts
|
|
301
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
302
|
+
var spinner = (0, import_createRuntimeFn2.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: [] });
|
|
303
|
+
|
|
304
|
+
// src/components/Spinner/Spinner.tsx
|
|
305
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
306
|
+
var Spinner = (0, import_react3.forwardRef)(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
307
|
+
const a11y = label3 ? { role: "status" } : { "aria-hidden": true };
|
|
308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
309
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.LoaderIcon, { size: "100%" }),
|
|
310
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: visuallyHidden, children: label3 })
|
|
311
|
+
] });
|
|
312
|
+
});
|
|
313
|
+
|
|
314
|
+
// src/components/Button/Button.css.ts
|
|
315
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
316
|
+
var button = (0, import_createRuntimeFn3.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: [] });
|
|
317
|
+
var icon2 = "xcekdai";
|
|
318
|
+
|
|
319
|
+
// src/components/Button/Button.tsx
|
|
320
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
321
|
+
var Button = (0, import_react4.forwardRef)(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
|
|
322
|
+
const handleClick = (event) => {
|
|
323
|
+
if (loading) {
|
|
324
|
+
event.preventDefault();
|
|
325
|
+
return;
|
|
326
|
+
}
|
|
327
|
+
onClick?.(event);
|
|
328
|
+
};
|
|
329
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
279
331
|
"button",
|
|
280
332
|
{
|
|
281
333
|
ref,
|
|
282
334
|
type,
|
|
283
335
|
className: cx(button({ variant, color, size, fullWidth }), className),
|
|
336
|
+
"aria-busy": loading || void 0,
|
|
337
|
+
"aria-disabled": loading || void 0,
|
|
338
|
+
onClick: handleClick,
|
|
284
339
|
...rest,
|
|
285
340
|
children: [
|
|
286
|
-
|
|
341
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: icon2, children: leading }),
|
|
287
342
|
children,
|
|
288
|
-
endIcon && /* @__PURE__ */ (0,
|
|
343
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: icon2, children: endIcon })
|
|
289
344
|
]
|
|
290
345
|
}
|
|
291
346
|
);
|
|
292
347
|
});
|
|
293
348
|
|
|
349
|
+
// src/components/Card/Card.tsx
|
|
350
|
+
var import_react5 = require("react");
|
|
351
|
+
|
|
352
|
+
// src/components/Card/Card.css.ts
|
|
353
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
354
|
+
var body = "dnuf1u9";
|
|
355
|
+
var card = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "dnuf1u0", variantClassNames: { variant: { outline: "dnuf1u1", elevated: "dnuf1u2", soft: "dnuf1u3" }, padding: { none: "dnuf1u4", sm: "dnuf1u5", md: "dnuf1u6", lg: "dnuf1u7" } }, defaultVariants: { variant: "outline", padding: "md" }, compoundVariants: [] });
|
|
356
|
+
var footer = "dnuf1ua";
|
|
357
|
+
var header = "dnuf1u8";
|
|
358
|
+
|
|
359
|
+
// src/components/Card/Card.tsx
|
|
360
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
361
|
+
var Card = (0, import_react5.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
363
|
+
});
|
|
364
|
+
var CardHeader = (0, import_react5.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cx(header, className), ...rest });
|
|
366
|
+
});
|
|
367
|
+
var CardBody = (0, import_react5.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
369
|
+
});
|
|
370
|
+
var CardFooter = (0, import_react5.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
372
|
+
});
|
|
373
|
+
|
|
294
374
|
// src/components/Checkbox/Checkbox.tsx
|
|
295
|
-
var
|
|
375
|
+
var import_react6 = require("react");
|
|
296
376
|
|
|
297
377
|
// src/utils/mergeRefs.ts
|
|
298
378
|
function mergeRefs(...refs) {
|
|
@@ -305,23 +385,23 @@ function mergeRefs(...refs) {
|
|
|
305
385
|
}
|
|
306
386
|
|
|
307
387
|
// src/components/Checkbox/Checkbox.css.ts
|
|
308
|
-
var
|
|
388
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
309
389
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
310
|
-
var control = (0,
|
|
390
|
+
var control = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
311
391
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
312
392
|
var input = "_1y7mzsn6";
|
|
313
|
-
var root2 = (0,
|
|
393
|
+
var root2 = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
314
394
|
|
|
315
395
|
// src/components/Checkbox/Checkbox.tsx
|
|
316
|
-
var
|
|
317
|
-
var Checkbox = (0,
|
|
318
|
-
const innerRef = (0,
|
|
319
|
-
(0,
|
|
396
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
397
|
+
var Checkbox = (0, import_react6.forwardRef)(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
398
|
+
const innerRef = (0, import_react6.useRef)(null);
|
|
399
|
+
(0, import_react6.useEffect)(() => {
|
|
320
400
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
321
401
|
}, [indeterminate]);
|
|
322
|
-
return /* @__PURE__ */ (0,
|
|
323
|
-
/* @__PURE__ */ (0,
|
|
324
|
-
/* @__PURE__ */ (0,
|
|
402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
403
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: control({ size }), children: [
|
|
404
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
325
405
|
"input",
|
|
326
406
|
{
|
|
327
407
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -332,39 +412,39 @@ var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label3,
|
|
|
332
412
|
...rest
|
|
333
413
|
}
|
|
334
414
|
),
|
|
335
|
-
/* @__PURE__ */ (0,
|
|
336
|
-
/* @__PURE__ */ (0,
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
416
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
337
417
|
] }),
|
|
338
418
|
label3
|
|
339
419
|
] });
|
|
340
420
|
});
|
|
341
421
|
|
|
342
422
|
// src/components/Input/Input.tsx
|
|
343
|
-
var
|
|
423
|
+
var import_react7 = require("react");
|
|
344
424
|
|
|
345
425
|
// src/components/Input/Input.css.ts
|
|
346
|
-
var
|
|
426
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
347
427
|
var adornment = "_19p5zvh6";
|
|
348
428
|
var field = "_19p5zvh7";
|
|
349
429
|
var fieldFullWidth = "_19p5zvh8";
|
|
350
|
-
var helperText = (0,
|
|
430
|
+
var helperText = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
351
431
|
var input2 = "_19p5zvh5";
|
|
352
432
|
var label = "_19p5zvh9";
|
|
353
433
|
var requiredMark = "_19p5zvha";
|
|
354
|
-
var root3 = (0,
|
|
434
|
+
var root3 = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
355
435
|
|
|
356
436
|
// src/components/Input/Input.tsx
|
|
357
|
-
var
|
|
358
|
-
var Input = (0,
|
|
359
|
-
return /* @__PURE__ */ (0,
|
|
437
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
438
|
+
var Input = (0, import_react7.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
360
440
|
"div",
|
|
361
441
|
{
|
|
362
442
|
className: cx(root3({ size, fullWidth }), rootClassName),
|
|
363
443
|
"data-invalid": invalid || void 0,
|
|
364
444
|
"data-disabled": disabled || void 0,
|
|
365
445
|
children: [
|
|
366
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
367
|
-
/* @__PURE__ */ (0,
|
|
446
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: adornment, children: startAdornment }),
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
368
448
|
"input",
|
|
369
449
|
{
|
|
370
450
|
ref,
|
|
@@ -374,25 +454,25 @@ var Input = (0, import_react4.forwardRef)(function Input2({ size, invalid, fullW
|
|
|
374
454
|
...rest
|
|
375
455
|
}
|
|
376
456
|
),
|
|
377
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
457
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: adornment, children: endAdornment })
|
|
378
458
|
]
|
|
379
459
|
}
|
|
380
460
|
);
|
|
381
461
|
});
|
|
382
462
|
|
|
383
463
|
// src/components/Input/TextField.tsx
|
|
384
|
-
var
|
|
385
|
-
var
|
|
386
|
-
var TextField = (0,
|
|
387
|
-
const generatedId = (0,
|
|
464
|
+
var import_react8 = require("react");
|
|
465
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
466
|
+
var TextField = (0, import_react8.forwardRef)(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
467
|
+
const generatedId = (0, import_react8.useId)();
|
|
388
468
|
const inputId = id ?? generatedId;
|
|
389
469
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
390
|
-
return /* @__PURE__ */ (0,
|
|
391
|
-
label3 && /* @__PURE__ */ (0,
|
|
470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
471
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: inputId, className: label, children: [
|
|
392
472
|
label3,
|
|
393
|
-
required && /* @__PURE__ */ (0,
|
|
473
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
394
474
|
] }),
|
|
395
|
-
/* @__PURE__ */ (0,
|
|
475
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
396
476
|
Input,
|
|
397
477
|
{
|
|
398
478
|
ref,
|
|
@@ -404,28 +484,28 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
|
|
|
404
484
|
...rest
|
|
405
485
|
}
|
|
406
486
|
),
|
|
407
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
487
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
408
488
|
] });
|
|
409
489
|
});
|
|
410
490
|
|
|
411
491
|
// src/components/Modal/Modal.tsx
|
|
412
492
|
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
413
|
-
var
|
|
493
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
414
494
|
|
|
415
495
|
// src/components/Modal/Modal.css.ts
|
|
416
|
-
var
|
|
417
|
-
var
|
|
496
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
497
|
+
var body2 = "_1pdsmv0a";
|
|
418
498
|
var closeButton = "_1pdsmv09";
|
|
419
|
-
var content = (0,
|
|
499
|
+
var content = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
420
500
|
var description = "_1pdsmv08";
|
|
421
|
-
var
|
|
422
|
-
var
|
|
501
|
+
var footer2 = "_1pdsmv0b";
|
|
502
|
+
var header2 = "_1pdsmv05";
|
|
423
503
|
var headings = "_1pdsmv06";
|
|
424
504
|
var overlay = "_1pdsmv00";
|
|
425
505
|
var title = "_1pdsmv07";
|
|
426
506
|
|
|
427
507
|
// src/components/Modal/Modal.tsx
|
|
428
|
-
var
|
|
508
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
429
509
|
function Modal({
|
|
430
510
|
open,
|
|
431
511
|
defaultOpen,
|
|
@@ -434,18 +514,18 @@ function Modal({
|
|
|
434
514
|
title: title3,
|
|
435
515
|
description: description4,
|
|
436
516
|
children,
|
|
437
|
-
footer:
|
|
517
|
+
footer: footer4,
|
|
438
518
|
size,
|
|
439
519
|
hideCloseButton = false,
|
|
440
520
|
closeOnOverlayClick = true,
|
|
441
521
|
className
|
|
442
522
|
}) {
|
|
443
523
|
const portal2 = usePortalProps();
|
|
444
|
-
return /* @__PURE__ */ (0,
|
|
445
|
-
trigger2 && /* @__PURE__ */ (0,
|
|
446
|
-
/* @__PURE__ */ (0,
|
|
447
|
-
/* @__PURE__ */ (0,
|
|
448
|
-
/* @__PURE__ */ (0,
|
|
524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
525
|
+
trigger2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
|
|
526
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog.Portal, { children: [
|
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
528
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
449
529
|
Dialog.Content,
|
|
450
530
|
{
|
|
451
531
|
className: cx(portal2.className, content({ size }), className),
|
|
@@ -453,15 +533,15 @@ function Modal({
|
|
|
453
533
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
454
534
|
...description4 ? {} : { "aria-describedby": void 0 },
|
|
455
535
|
children: [
|
|
456
|
-
/* @__PURE__ */ (0,
|
|
457
|
-
/* @__PURE__ */ (0,
|
|
458
|
-
/* @__PURE__ */ (0,
|
|
459
|
-
description4 && /* @__PURE__ */ (0,
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: header2, children: [
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: headings, children: [
|
|
538
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Title, { className: title, children: title3 }),
|
|
539
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Description, { className: description, children: description4 })
|
|
460
540
|
] }),
|
|
461
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
541
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.XIcon, { size: 16 }) })
|
|
462
542
|
] }),
|
|
463
|
-
children && /* @__PURE__ */ (0,
|
|
464
|
-
|
|
543
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: body2, children }),
|
|
544
|
+
footer4 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: footer2, children: footer4 })
|
|
465
545
|
]
|
|
466
546
|
}
|
|
467
547
|
)
|
|
@@ -472,22 +552,22 @@ var ModalClose = Dialog.Close;
|
|
|
472
552
|
|
|
473
553
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
474
554
|
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
475
|
-
var
|
|
555
|
+
var import_react9 = require("react");
|
|
476
556
|
|
|
477
557
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
478
|
-
var
|
|
558
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
479
559
|
var description2 = "_1w9iwjmd";
|
|
480
560
|
var groupLabel = "_1w9iwjme";
|
|
481
561
|
var indicator = "_1w9iwjma";
|
|
482
|
-
var items = (0,
|
|
562
|
+
var items = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
483
563
|
var labelText = "_1w9iwjmc";
|
|
484
|
-
var option = (0,
|
|
485
|
-
var radio = (0,
|
|
564
|
+
var option = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
565
|
+
var radio = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
486
566
|
var text = "_1w9iwjmb";
|
|
487
567
|
|
|
488
568
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
489
|
-
var
|
|
490
|
-
var RadioGroup = (0,
|
|
569
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
570
|
+
var RadioGroup = (0, import_react9.forwardRef)(function RadioGroup2(props, ref) {
|
|
491
571
|
const {
|
|
492
572
|
options,
|
|
493
573
|
value: value2,
|
|
@@ -506,16 +586,16 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
506
586
|
className
|
|
507
587
|
} = props;
|
|
508
588
|
const isControlled = "value" in props;
|
|
509
|
-
const generatedId = (0,
|
|
589
|
+
const generatedId = (0, import_react9.useId)();
|
|
510
590
|
const baseId = id ?? generatedId;
|
|
511
591
|
const labelId = label3 ? `${baseId}-label` : void 0;
|
|
512
592
|
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
513
|
-
return /* @__PURE__ */ (0,
|
|
514
|
-
label3 && /* @__PURE__ */ (0,
|
|
593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx(field, className), children: [
|
|
594
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { id: labelId, className: cx(label, groupLabel), children: [
|
|
515
595
|
label3,
|
|
516
|
-
required && /* @__PURE__ */ (0,
|
|
596
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
517
597
|
] }),
|
|
518
|
-
/* @__PURE__ */ (0,
|
|
598
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
519
599
|
RadixRadioGroup.Root,
|
|
520
600
|
{
|
|
521
601
|
ref,
|
|
@@ -536,8 +616,8 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
536
616
|
const itemId = `${baseId}-${option2.value}`;
|
|
537
617
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
538
618
|
const itemDisabled = disabled || option2.disabled;
|
|
539
|
-
return /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
620
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
541
621
|
RadixRadioGroup.Item,
|
|
542
622
|
{
|
|
543
623
|
id: itemId,
|
|
@@ -545,29 +625,29 @@ var RadioGroup = (0, import_react6.forwardRef)(function RadioGroup2(props, ref)
|
|
|
545
625
|
disabled: option2.disabled,
|
|
546
626
|
"aria-describedby": descriptionId,
|
|
547
627
|
className: radio({ size }),
|
|
548
|
-
children: /* @__PURE__ */ (0,
|
|
628
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixRadioGroup.Indicator, { className: indicator })
|
|
549
629
|
}
|
|
550
630
|
),
|
|
551
|
-
/* @__PURE__ */ (0,
|
|
552
|
-
/* @__PURE__ */ (0,
|
|
553
|
-
option2.description && /* @__PURE__ */ (0,
|
|
631
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: text, children: [
|
|
632
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
633
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { id: descriptionId, className: description2, children: option2.description })
|
|
554
634
|
] })
|
|
555
635
|
] }, option2.value);
|
|
556
636
|
})
|
|
557
637
|
}
|
|
558
638
|
),
|
|
559
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
639
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
560
640
|
] });
|
|
561
641
|
});
|
|
562
642
|
|
|
563
643
|
// src/components/Select/Select.tsx
|
|
564
644
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
565
|
-
var
|
|
566
|
-
var
|
|
645
|
+
var import_react10 = require("react");
|
|
646
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
567
647
|
|
|
568
648
|
// src/components/Select/Select.css.ts
|
|
569
649
|
var content2 = "_1kx81e83";
|
|
570
|
-
var
|
|
650
|
+
var icon3 = "_1kx81e82";
|
|
571
651
|
var item = "_1kx81e85";
|
|
572
652
|
var itemIndicator = "_1kx81e86";
|
|
573
653
|
var trigger = "_1kx81e80";
|
|
@@ -575,8 +655,8 @@ var value = "_1kx81e81";
|
|
|
575
655
|
var viewport = "_1kx81e84";
|
|
576
656
|
|
|
577
657
|
// src/components/Select/Select.tsx
|
|
578
|
-
var
|
|
579
|
-
var Select = (0,
|
|
658
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
659
|
+
var Select = (0, import_react10.forwardRef)(function Select2(props, ref) {
|
|
580
660
|
const {
|
|
581
661
|
options,
|
|
582
662
|
value: value2,
|
|
@@ -596,16 +676,16 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
596
676
|
className
|
|
597
677
|
} = props;
|
|
598
678
|
const isControlled = "value" in props;
|
|
599
|
-
const generatedId = (0,
|
|
679
|
+
const generatedId = (0, import_react10.useId)();
|
|
600
680
|
const triggerId = id ?? generatedId;
|
|
601
681
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
602
682
|
const portal2 = usePortalProps();
|
|
603
|
-
return /* @__PURE__ */ (0,
|
|
604
|
-
label3 && /* @__PURE__ */ (0,
|
|
683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
684
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { htmlFor: triggerId, className: label, children: [
|
|
605
685
|
label3,
|
|
606
|
-
required && /* @__PURE__ */ (0,
|
|
686
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
607
687
|
] }),
|
|
608
|
-
/* @__PURE__ */ (0,
|
|
688
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
609
689
|
RadixSelect.Root,
|
|
610
690
|
{
|
|
611
691
|
value: isControlled ? value2 ?? "" : void 0,
|
|
@@ -615,7 +695,7 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
615
695
|
required,
|
|
616
696
|
name,
|
|
617
697
|
children: [
|
|
618
|
-
/* @__PURE__ */ (0,
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
619
699
|
RadixSelect.Trigger,
|
|
620
700
|
{
|
|
621
701
|
ref,
|
|
@@ -626,12 +706,12 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
626
706
|
"data-invalid": error || void 0,
|
|
627
707
|
className: cx(root3({ size, fullWidth }), trigger, className),
|
|
628
708
|
children: [
|
|
629
|
-
/* @__PURE__ */ (0,
|
|
630
|
-
/* @__PURE__ */ (0,
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
710
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.ChevronDownIcon, { size: 16 }) })
|
|
631
711
|
]
|
|
632
712
|
}
|
|
633
713
|
),
|
|
634
|
-
/* @__PURE__ */ (0,
|
|
714
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
635
715
|
RadixSelect.Content,
|
|
636
716
|
{
|
|
637
717
|
position: "popper",
|
|
@@ -639,15 +719,15 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
639
719
|
collisionPadding: 8,
|
|
640
720
|
className: cx(portal2.className, content2),
|
|
641
721
|
style: portal2.style,
|
|
642
|
-
children: /* @__PURE__ */ (0,
|
|
722
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
643
723
|
RadixSelect.Item,
|
|
644
724
|
{
|
|
645
725
|
value: option2.value,
|
|
646
726
|
disabled: option2.disabled,
|
|
647
727
|
className: item,
|
|
648
728
|
children: [
|
|
649
|
-
/* @__PURE__ */ (0,
|
|
650
|
-
/* @__PURE__ */ (0,
|
|
729
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
730
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.CheckIcon, { size: 16 }) })
|
|
651
731
|
]
|
|
652
732
|
},
|
|
653
733
|
option2.value
|
|
@@ -657,21 +737,21 @@ var Select = (0, import_react7.forwardRef)(function Select2(props, ref) {
|
|
|
657
737
|
]
|
|
658
738
|
}
|
|
659
739
|
),
|
|
660
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
740
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
661
741
|
] });
|
|
662
742
|
});
|
|
663
743
|
|
|
664
744
|
// src/components/Stack/Stack.tsx
|
|
665
|
-
var
|
|
745
|
+
var import_react11 = require("react");
|
|
666
746
|
|
|
667
747
|
// src/components/Stack/Stack.css.ts
|
|
668
|
-
var
|
|
669
|
-
var stack = (0,
|
|
748
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
749
|
+
var stack = (0, import_createRuntimeFn9.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
750
|
|
|
671
751
|
// src/components/Stack/Stack.tsx
|
|
672
|
-
var
|
|
673
|
-
var Stack = (0,
|
|
674
|
-
return /* @__PURE__ */ (0,
|
|
752
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
753
|
+
var Stack = (0, import_react11.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
675
755
|
Component,
|
|
676
756
|
{
|
|
677
757
|
ref,
|
|
@@ -683,22 +763,22 @@ var Stack = (0, import_react8.forwardRef)(function Stack2({ as: Component = "div
|
|
|
683
763
|
|
|
684
764
|
// src/components/Switch/Switch.tsx
|
|
685
765
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
686
|
-
var
|
|
766
|
+
var import_react12 = require("react");
|
|
687
767
|
|
|
688
768
|
// src/components/Switch/Switch.css.ts
|
|
689
|
-
var
|
|
769
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
690
770
|
var label2 = "o33ul29";
|
|
691
|
-
var root4 = (0,
|
|
692
|
-
var thumb = (0,
|
|
693
|
-
var track = (0,
|
|
771
|
+
var root4 = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
772
|
+
var thumb = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
773
|
+
var track = (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
694
774
|
|
|
695
775
|
// src/components/Switch/Switch.tsx
|
|
696
|
-
var
|
|
697
|
-
var Switch = (0,
|
|
698
|
-
const generatedId = (0,
|
|
776
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
777
|
+
var Switch = (0, import_react12.forwardRef)(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
778
|
+
const generatedId = (0, import_react12.useId)();
|
|
699
779
|
const switchId = id ?? generatedId;
|
|
700
|
-
return /* @__PURE__ */ (0,
|
|
701
|
-
/* @__PURE__ */ (0,
|
|
780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
781
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
702
782
|
RadixSwitch.Root,
|
|
703
783
|
{
|
|
704
784
|
ref,
|
|
@@ -707,28 +787,28 @@ var Switch = (0, import_react9.forwardRef)(function Switch2({ label: label3, siz
|
|
|
707
787
|
"aria-label": ariaLabel,
|
|
708
788
|
className: track({ size }),
|
|
709
789
|
...rest,
|
|
710
|
-
children: /* @__PURE__ */ (0,
|
|
790
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
711
791
|
}
|
|
712
792
|
),
|
|
713
|
-
label3 && /* @__PURE__ */ (0,
|
|
793
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: switchId, className: label2, children: label3 })
|
|
714
794
|
] });
|
|
715
795
|
});
|
|
716
796
|
|
|
717
797
|
// src/components/Textarea/Textarea.tsx
|
|
718
|
-
var
|
|
798
|
+
var import_react13 = require("react");
|
|
719
799
|
|
|
720
800
|
// src/components/Textarea/Textarea.css.ts
|
|
721
|
-
var
|
|
801
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
722
802
|
var count = "_1koawa9";
|
|
723
803
|
var countOver = "_1koawaa";
|
|
724
804
|
var defaultWidth = "_1koawa7";
|
|
725
|
-
var
|
|
726
|
-
var textarea = (0,
|
|
805
|
+
var footer3 = "_1koawa8";
|
|
806
|
+
var textarea = (0, import_createRuntimeFn11.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
807
|
|
|
728
808
|
// src/components/Textarea/Textarea.tsx
|
|
729
|
-
var
|
|
730
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
731
|
-
var Textarea = (0,
|
|
809
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
810
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react13.useLayoutEffect : import_react13.useEffect;
|
|
811
|
+
var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
732
812
|
label: label3,
|
|
733
813
|
helperText: helperText2,
|
|
734
814
|
error,
|
|
@@ -749,13 +829,13 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
749
829
|
"aria-describedby": ariaDescribedBy,
|
|
750
830
|
...rest
|
|
751
831
|
}, ref) {
|
|
752
|
-
const generatedId = (0,
|
|
832
|
+
const generatedId = (0, import_react13.useId)();
|
|
753
833
|
const textareaId = id ?? generatedId;
|
|
754
834
|
const helperId = helperText2 ? `${textareaId}-helper` : void 0;
|
|
755
|
-
const innerRef = (0,
|
|
756
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
835
|
+
const innerRef = (0, import_react13.useRef)(null);
|
|
836
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react13.useState)(() => String(defaultValue ?? "").length);
|
|
757
837
|
const length = value2 !== void 0 ? String(value2).length : uncontrolledLength;
|
|
758
|
-
const fitHeight = (0,
|
|
838
|
+
const fitHeight = (0, import_react13.useCallback)(() => {
|
|
759
839
|
const el = innerRef.current;
|
|
760
840
|
if (!autoResize || !el) return;
|
|
761
841
|
el.style.height = "auto";
|
|
@@ -768,12 +848,12 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
768
848
|
fitHeight();
|
|
769
849
|
onChange?.(event);
|
|
770
850
|
};
|
|
771
|
-
return /* @__PURE__ */ (0,
|
|
772
|
-
label3 && /* @__PURE__ */ (0,
|
|
851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
852
|
+
label3 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: textareaId, className: label, children: [
|
|
773
853
|
label3,
|
|
774
|
-
required && /* @__PURE__ */ (0,
|
|
854
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
775
855
|
] }),
|
|
776
|
-
/* @__PURE__ */ (0,
|
|
856
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
777
857
|
"textarea",
|
|
778
858
|
{
|
|
779
859
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -795,49 +875,49 @@ var Textarea = (0, import_react10.forwardRef)(function Textarea2({
|
|
|
795
875
|
...rest
|
|
796
876
|
}
|
|
797
877
|
),
|
|
798
|
-
(helperText2 || showCount) && /* @__PURE__ */ (0,
|
|
799
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
800
|
-
showCount && /* @__PURE__ */ (0,
|
|
878
|
+
(helperText2 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: footer3, children: [
|
|
879
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
|
|
880
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
801
881
|
] })
|
|
802
882
|
] });
|
|
803
883
|
});
|
|
804
884
|
|
|
805
885
|
// src/components/Toast/Toast.tsx
|
|
806
886
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
807
|
-
var
|
|
808
|
-
var
|
|
887
|
+
var import_react14 = require("react");
|
|
888
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
809
889
|
|
|
810
890
|
// src/components/Toast/Toast.css.ts
|
|
811
|
-
var
|
|
891
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
812
892
|
var action = "_1g11zvx7";
|
|
813
893
|
var close = "_1g11zvx8";
|
|
814
894
|
var description3 = "_1g11zvx6";
|
|
815
895
|
var title2 = "_1g11zvx5";
|
|
816
|
-
var toast = (0,
|
|
896
|
+
var toast = (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
817
897
|
var viewport2 = "_1g11zvx0";
|
|
818
898
|
|
|
819
899
|
// src/components/Toast/Toast.tsx
|
|
820
|
-
var
|
|
900
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
821
901
|
var REMOVE_DELAY = 500;
|
|
822
|
-
var ToastContext = (0,
|
|
902
|
+
var ToastContext = (0, import_react14.createContext)(null);
|
|
823
903
|
function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
|
|
824
|
-
const [toasts, setToasts] = (0,
|
|
825
|
-
const nextId = (0,
|
|
904
|
+
const [toasts, setToasts] = (0, import_react14.useState)([]);
|
|
905
|
+
const nextId = (0, import_react14.useRef)(0);
|
|
826
906
|
const portal2 = usePortalProps();
|
|
827
|
-
const toast2 = (0,
|
|
907
|
+
const toast2 = (0, import_react14.useCallback)((options) => {
|
|
828
908
|
const id = nextId.current++;
|
|
829
909
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
830
910
|
return id;
|
|
831
911
|
}, []);
|
|
832
|
-
const dismiss = (0,
|
|
912
|
+
const dismiss = (0, import_react14.useCallback)((id) => {
|
|
833
913
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
834
914
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
835
915
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
836
916
|
}, []);
|
|
837
|
-
const value2 = (0,
|
|
838
|
-
return /* @__PURE__ */ (0,
|
|
917
|
+
const value2 = (0, import_react14.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
|
|
839
919
|
children,
|
|
840
|
-
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0,
|
|
920
|
+
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
841
921
|
RadixToast.Root,
|
|
842
922
|
{
|
|
843
923
|
open,
|
|
@@ -847,19 +927,19 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
|
|
|
847
927
|
},
|
|
848
928
|
className: toast({ variant }),
|
|
849
929
|
children: [
|
|
850
|
-
/* @__PURE__ */ (0,
|
|
851
|
-
description4 && /* @__PURE__ */ (0,
|
|
852
|
-
action2 && /* @__PURE__ */ (0,
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
930
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixToast.Title, { className: title2, children: title3 }),
|
|
931
|
+
description4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixToast.Description, { className: description3, children: description4 }),
|
|
932
|
+
action2 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
|
|
933
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons4.XIcon, { size: 16 }) })
|
|
854
934
|
]
|
|
855
935
|
},
|
|
856
936
|
id
|
|
857
937
|
)),
|
|
858
|
-
/* @__PURE__ */ (0,
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
859
939
|
] }) });
|
|
860
940
|
}
|
|
861
941
|
function useToast() {
|
|
862
|
-
const context = (0,
|
|
942
|
+
const context = (0, import_react14.useContext)(ToastContext);
|
|
863
943
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
864
944
|
return context;
|
|
865
945
|
}
|
|
@@ -872,7 +952,7 @@ var arrow = "z7rufs1";
|
|
|
872
952
|
var content3 = "z7rufs0";
|
|
873
953
|
|
|
874
954
|
// src/components/Tooltip/Tooltip.tsx
|
|
875
|
-
var
|
|
955
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
876
956
|
function Tooltip({
|
|
877
957
|
content: content4,
|
|
878
958
|
children,
|
|
@@ -887,9 +967,9 @@ function Tooltip({
|
|
|
887
967
|
}) {
|
|
888
968
|
const portal2 = usePortalProps();
|
|
889
969
|
if (disabled || content4 == null || content4 === "") return children;
|
|
890
|
-
return /* @__PURE__ */ (0,
|
|
891
|
-
/* @__PURE__ */ (0,
|
|
892
|
-
/* @__PURE__ */ (0,
|
|
970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
971
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
972
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
893
973
|
RadixTooltip.Content,
|
|
894
974
|
{
|
|
895
975
|
side,
|
|
@@ -900,7 +980,7 @@ function Tooltip({
|
|
|
900
980
|
style: portal2.style,
|
|
901
981
|
children: [
|
|
902
982
|
content4,
|
|
903
|
-
/* @__PURE__ */ (0,
|
|
983
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
904
984
|
]
|
|
905
985
|
}
|
|
906
986
|
) })
|
|
@@ -908,14 +988,14 @@ function Tooltip({
|
|
|
908
988
|
}
|
|
909
989
|
|
|
910
990
|
// src/components/Typography/Typography.tsx
|
|
911
|
-
var
|
|
991
|
+
var import_react15 = require("react");
|
|
912
992
|
|
|
913
993
|
// src/components/Typography/Typography.css.ts
|
|
914
|
-
var
|
|
915
|
-
var typography = (0,
|
|
994
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
995
|
+
var typography = (0, import_createRuntimeFn13.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
996
|
|
|
917
997
|
// src/components/Typography/Typography.tsx
|
|
918
|
-
var
|
|
998
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
919
999
|
var defaultElement = {
|
|
920
1000
|
display: "h1",
|
|
921
1001
|
h1: "h1",
|
|
@@ -927,9 +1007,9 @@ var defaultElement = {
|
|
|
927
1007
|
"body-sm": "p",
|
|
928
1008
|
caption: "span"
|
|
929
1009
|
};
|
|
930
|
-
var Typography = (0,
|
|
1010
|
+
var Typography = (0, import_react15.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
931
1011
|
const Component = as ?? defaultElement[variant];
|
|
932
|
-
return /* @__PURE__ */ (0,
|
|
1012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
933
1013
|
Component,
|
|
934
1014
|
{
|
|
935
1015
|
ref,
|
|
@@ -940,13 +1020,19 @@ var Typography = (0, import_react12.forwardRef)(function Typography2({ variant =
|
|
|
940
1020
|
});
|
|
941
1021
|
// Annotate the CommonJS export names for ESM import in node:
|
|
942
1022
|
0 && (module.exports = {
|
|
1023
|
+
Badge,
|
|
943
1024
|
Button,
|
|
1025
|
+
Card,
|
|
1026
|
+
CardBody,
|
|
1027
|
+
CardFooter,
|
|
1028
|
+
CardHeader,
|
|
944
1029
|
Checkbox,
|
|
945
1030
|
Input,
|
|
946
1031
|
Modal,
|
|
947
1032
|
ModalClose,
|
|
948
1033
|
RadioGroup,
|
|
949
1034
|
Select,
|
|
1035
|
+
Spinner,
|
|
950
1036
|
Stack,
|
|
951
1037
|
Switch,
|
|
952
1038
|
TextField,
|