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