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