@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.js
CHANGED
|
@@ -206,38 +206,55 @@ function usePortalClassName() {
|
|
|
206
206
|
return usePortalProps().className;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
+
// src/components/Badge/Badge.tsx
|
|
210
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
211
|
+
|
|
212
|
+
// src/components/Badge/Badge.css.ts
|
|
213
|
+
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
214
|
+
var badge = _7a468({ 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: [] });
|
|
215
|
+
var icon = "_1295cfnf";
|
|
216
|
+
|
|
217
|
+
// src/components/Badge/Badge.tsx
|
|
218
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
219
|
+
var Badge = forwardRef2(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
220
|
+
return /* @__PURE__ */ jsxs("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
221
|
+
startIcon && /* @__PURE__ */ jsx2("span", { className: icon, children: startIcon }),
|
|
222
|
+
children
|
|
223
|
+
] });
|
|
224
|
+
});
|
|
225
|
+
|
|
209
226
|
// src/components/Button/Button.tsx
|
|
210
|
-
import { forwardRef as
|
|
227
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
211
228
|
|
|
212
229
|
// src/components/Spinner/Spinner.tsx
|
|
213
230
|
import { LoaderIcon } from "@bestow-ui/icons";
|
|
214
|
-
import { forwardRef as
|
|
231
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
215
232
|
|
|
216
233
|
// src/styles/visuallyHidden.css.ts
|
|
217
234
|
var visuallyHidden = "_1kdtbw10";
|
|
218
235
|
|
|
219
236
|
// src/components/Spinner/Spinner.css.ts
|
|
220
|
-
import { createRuntimeFn as
|
|
221
|
-
var spinner =
|
|
237
|
+
import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
238
|
+
var spinner = _7a4682({ 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: [] });
|
|
222
239
|
|
|
223
240
|
// src/components/Spinner/Spinner.tsx
|
|
224
|
-
import { jsx as
|
|
225
|
-
var Spinner =
|
|
241
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
242
|
+
var Spinner = forwardRef3(function Spinner2({ size, color, label: label3 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
226
243
|
const a11y = label3 ? { role: "status" } : { "aria-hidden": true };
|
|
227
|
-
return /* @__PURE__ */
|
|
228
|
-
/* @__PURE__ */
|
|
229
|
-
label3 && /* @__PURE__ */
|
|
244
|
+
return /* @__PURE__ */ jsxs2("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
245
|
+
/* @__PURE__ */ jsx3(LoaderIcon, { size: "100%" }),
|
|
246
|
+
label3 && /* @__PURE__ */ jsx3("span", { className: visuallyHidden, children: label3 })
|
|
230
247
|
] });
|
|
231
248
|
});
|
|
232
249
|
|
|
233
250
|
// src/components/Button/Button.css.ts
|
|
234
|
-
import { createRuntimeFn as
|
|
235
|
-
var button =
|
|
236
|
-
var
|
|
251
|
+
import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
252
|
+
var button = _7a4683({ 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: [] });
|
|
253
|
+
var icon2 = "xcekdai";
|
|
237
254
|
|
|
238
255
|
// src/components/Button/Button.tsx
|
|
239
|
-
import { jsx as
|
|
240
|
-
var Button =
|
|
256
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
257
|
+
var Button = forwardRef4(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, loading, className, type = "button", onClick, children, ...rest }, ref) {
|
|
241
258
|
const handleClick = (event) => {
|
|
242
259
|
if (loading) {
|
|
243
260
|
event.preventDefault();
|
|
@@ -245,8 +262,8 @@ var Button = forwardRef3(function Button2({ variant, color, size, fullWidth, sta
|
|
|
245
262
|
}
|
|
246
263
|
onClick?.(event);
|
|
247
264
|
};
|
|
248
|
-
const leading = loading ? /* @__PURE__ */
|
|
249
|
-
return /* @__PURE__ */
|
|
265
|
+
const leading = loading ? /* @__PURE__ */ jsx4(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
266
|
+
return /* @__PURE__ */ jsxs3(
|
|
250
267
|
"button",
|
|
251
268
|
{
|
|
252
269
|
ref,
|
|
@@ -257,16 +274,41 @@ var Button = forwardRef3(function Button2({ variant, color, size, fullWidth, sta
|
|
|
257
274
|
onClick: handleClick,
|
|
258
275
|
...rest,
|
|
259
276
|
children: [
|
|
260
|
-
leading && /* @__PURE__ */
|
|
277
|
+
leading && /* @__PURE__ */ jsx4("span", { className: icon2, children: leading }),
|
|
261
278
|
children,
|
|
262
|
-
endIcon && /* @__PURE__ */
|
|
279
|
+
endIcon && /* @__PURE__ */ jsx4("span", { className: icon2, children: endIcon })
|
|
263
280
|
]
|
|
264
281
|
}
|
|
265
282
|
);
|
|
266
283
|
});
|
|
267
284
|
|
|
285
|
+
// src/components/Card/Card.tsx
|
|
286
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
287
|
+
|
|
288
|
+
// src/components/Card/Card.css.ts
|
|
289
|
+
import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
290
|
+
var body = "dnuf1u9";
|
|
291
|
+
var card = _7a4684({ 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: [] });
|
|
292
|
+
var footer = "dnuf1ua";
|
|
293
|
+
var header = "dnuf1u8";
|
|
294
|
+
|
|
295
|
+
// src/components/Card/Card.tsx
|
|
296
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
297
|
+
var Card = forwardRef5(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
298
|
+
return /* @__PURE__ */ jsx5(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
299
|
+
});
|
|
300
|
+
var CardHeader = forwardRef5(function CardHeader2({ className, ...rest }, ref) {
|
|
301
|
+
return /* @__PURE__ */ jsx5("div", { ref, className: cx(header, className), ...rest });
|
|
302
|
+
});
|
|
303
|
+
var CardBody = forwardRef5(function CardBody2({ className, ...rest }, ref) {
|
|
304
|
+
return /* @__PURE__ */ jsx5("div", { ref, className: cx(body, className), ...rest });
|
|
305
|
+
});
|
|
306
|
+
var CardFooter = forwardRef5(function CardFooter2({ className, ...rest }, ref) {
|
|
307
|
+
return /* @__PURE__ */ jsx5("div", { ref, className: cx(footer, className), ...rest });
|
|
308
|
+
});
|
|
309
|
+
|
|
268
310
|
// src/components/Checkbox/Checkbox.tsx
|
|
269
|
-
import { forwardRef as
|
|
311
|
+
import { forwardRef as forwardRef6, useEffect, useRef } from "react";
|
|
270
312
|
|
|
271
313
|
// src/utils/mergeRefs.ts
|
|
272
314
|
function mergeRefs(...refs) {
|
|
@@ -279,23 +321,23 @@ function mergeRefs(...refs) {
|
|
|
279
321
|
}
|
|
280
322
|
|
|
281
323
|
// src/components/Checkbox/Checkbox.css.ts
|
|
282
|
-
import { createRuntimeFn as
|
|
324
|
+
import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
283
325
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
284
|
-
var control =
|
|
326
|
+
var control = _7a4685({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
285
327
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
286
328
|
var input = "_1y7mzsn6";
|
|
287
|
-
var root2 =
|
|
329
|
+
var root2 = _7a4685({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
288
330
|
|
|
289
331
|
// src/components/Checkbox/Checkbox.tsx
|
|
290
|
-
import { jsx as
|
|
291
|
-
var Checkbox =
|
|
332
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
333
|
+
var Checkbox = forwardRef6(function Checkbox2({ label: label3, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
292
334
|
const innerRef = useRef(null);
|
|
293
335
|
useEffect(() => {
|
|
294
336
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
295
337
|
}, [indeterminate]);
|
|
296
|
-
return /* @__PURE__ */
|
|
297
|
-
/* @__PURE__ */
|
|
298
|
-
/* @__PURE__ */
|
|
338
|
+
return /* @__PURE__ */ jsxs4("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
339
|
+
/* @__PURE__ */ jsxs4("span", { className: control({ size }), children: [
|
|
340
|
+
/* @__PURE__ */ jsx6(
|
|
299
341
|
"input",
|
|
300
342
|
{
|
|
301
343
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -306,39 +348,39 @@ var Checkbox = forwardRef4(function Checkbox2({ label: label3, size, indetermina
|
|
|
306
348
|
...rest
|
|
307
349
|
}
|
|
308
350
|
),
|
|
309
|
-
/* @__PURE__ */
|
|
310
|
-
/* @__PURE__ */
|
|
351
|
+
/* @__PURE__ */ jsx6("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
352
|
+
/* @__PURE__ */ jsx6("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx6("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
311
353
|
] }),
|
|
312
354
|
label3
|
|
313
355
|
] });
|
|
314
356
|
});
|
|
315
357
|
|
|
316
358
|
// src/components/Input/Input.tsx
|
|
317
|
-
import { forwardRef as
|
|
359
|
+
import { forwardRef as forwardRef7 } from "react";
|
|
318
360
|
|
|
319
361
|
// src/components/Input/Input.css.ts
|
|
320
|
-
import { createRuntimeFn as
|
|
362
|
+
import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
321
363
|
var adornment = "_19p5zvh6";
|
|
322
364
|
var field = "_19p5zvh7";
|
|
323
365
|
var fieldFullWidth = "_19p5zvh8";
|
|
324
|
-
var helperText =
|
|
366
|
+
var helperText = _7a4686({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
325
367
|
var input2 = "_19p5zvh5";
|
|
326
368
|
var label = "_19p5zvh9";
|
|
327
369
|
var requiredMark = "_19p5zvha";
|
|
328
|
-
var root3 =
|
|
370
|
+
var root3 = _7a4686({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
329
371
|
|
|
330
372
|
// src/components/Input/Input.tsx
|
|
331
|
-
import { jsx as
|
|
332
|
-
var Input =
|
|
333
|
-
return /* @__PURE__ */
|
|
373
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
374
|
+
var Input = forwardRef7(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
375
|
+
return /* @__PURE__ */ jsxs5(
|
|
334
376
|
"div",
|
|
335
377
|
{
|
|
336
378
|
className: cx(root3({ size, fullWidth }), rootClassName),
|
|
337
379
|
"data-invalid": invalid || void 0,
|
|
338
380
|
"data-disabled": disabled || void 0,
|
|
339
381
|
children: [
|
|
340
|
-
startAdornment && /* @__PURE__ */
|
|
341
|
-
/* @__PURE__ */
|
|
382
|
+
startAdornment && /* @__PURE__ */ jsx7("span", { className: adornment, children: startAdornment }),
|
|
383
|
+
/* @__PURE__ */ jsx7(
|
|
342
384
|
"input",
|
|
343
385
|
{
|
|
344
386
|
ref,
|
|
@@ -348,25 +390,25 @@ var Input = forwardRef5(function Input2({ size, invalid, fullWidth, startAdornme
|
|
|
348
390
|
...rest
|
|
349
391
|
}
|
|
350
392
|
),
|
|
351
|
-
endAdornment && /* @__PURE__ */
|
|
393
|
+
endAdornment && /* @__PURE__ */ jsx7("span", { className: adornment, children: endAdornment })
|
|
352
394
|
]
|
|
353
395
|
}
|
|
354
396
|
);
|
|
355
397
|
});
|
|
356
398
|
|
|
357
399
|
// src/components/Input/TextField.tsx
|
|
358
|
-
import { forwardRef as
|
|
359
|
-
import { jsx as
|
|
360
|
-
var TextField =
|
|
400
|
+
import { forwardRef as forwardRef8, useId } from "react";
|
|
401
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
402
|
+
var TextField = forwardRef8(function TextField2({ label: label3, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
361
403
|
const generatedId = useId();
|
|
362
404
|
const inputId = id ?? generatedId;
|
|
363
405
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
364
|
-
return /* @__PURE__ */
|
|
365
|
-
label3 && /* @__PURE__ */
|
|
406
|
+
return /* @__PURE__ */ jsxs6("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
407
|
+
label3 && /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: label, children: [
|
|
366
408
|
label3,
|
|
367
|
-
required && /* @__PURE__ */
|
|
409
|
+
required && /* @__PURE__ */ jsx8("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
368
410
|
] }),
|
|
369
|
-
/* @__PURE__ */
|
|
411
|
+
/* @__PURE__ */ jsx8(
|
|
370
412
|
Input,
|
|
371
413
|
{
|
|
372
414
|
ref,
|
|
@@ -378,7 +420,7 @@ var TextField = forwardRef6(function TextField2({ label: label3, helperText: hel
|
|
|
378
420
|
...rest
|
|
379
421
|
}
|
|
380
422
|
),
|
|
381
|
-
helperText2 && /* @__PURE__ */
|
|
423
|
+
helperText2 && /* @__PURE__ */ jsx8("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
382
424
|
] });
|
|
383
425
|
});
|
|
384
426
|
|
|
@@ -387,19 +429,19 @@ import * as Dialog from "@radix-ui/react-dialog";
|
|
|
387
429
|
import { XIcon } from "@bestow-ui/icons";
|
|
388
430
|
|
|
389
431
|
// src/components/Modal/Modal.css.ts
|
|
390
|
-
import { createRuntimeFn as
|
|
391
|
-
var
|
|
432
|
+
import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
433
|
+
var body2 = "_1pdsmv0a";
|
|
392
434
|
var closeButton = "_1pdsmv09";
|
|
393
|
-
var content =
|
|
435
|
+
var content = _7a4687({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
394
436
|
var description = "_1pdsmv08";
|
|
395
|
-
var
|
|
396
|
-
var
|
|
437
|
+
var footer2 = "_1pdsmv0b";
|
|
438
|
+
var header2 = "_1pdsmv05";
|
|
397
439
|
var headings = "_1pdsmv06";
|
|
398
440
|
var overlay = "_1pdsmv00";
|
|
399
441
|
var title = "_1pdsmv07";
|
|
400
442
|
|
|
401
443
|
// src/components/Modal/Modal.tsx
|
|
402
|
-
import { jsx as
|
|
444
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
403
445
|
function Modal({
|
|
404
446
|
open,
|
|
405
447
|
defaultOpen,
|
|
@@ -408,18 +450,18 @@ function Modal({
|
|
|
408
450
|
title: title3,
|
|
409
451
|
description: description4,
|
|
410
452
|
children,
|
|
411
|
-
footer:
|
|
453
|
+
footer: footer4,
|
|
412
454
|
size,
|
|
413
455
|
hideCloseButton = false,
|
|
414
456
|
closeOnOverlayClick = true,
|
|
415
457
|
className
|
|
416
458
|
}) {
|
|
417
459
|
const portal2 = usePortalProps();
|
|
418
|
-
return /* @__PURE__ */
|
|
419
|
-
trigger2 && /* @__PURE__ */
|
|
420
|
-
/* @__PURE__ */
|
|
421
|
-
/* @__PURE__ */
|
|
422
|
-
/* @__PURE__ */
|
|
460
|
+
return /* @__PURE__ */ jsxs7(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
461
|
+
trigger2 && /* @__PURE__ */ jsx9(Dialog.Trigger, { asChild: true, children: trigger2 }),
|
|
462
|
+
/* @__PURE__ */ jsxs7(Dialog.Portal, { children: [
|
|
463
|
+
/* @__PURE__ */ jsx9(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
464
|
+
/* @__PURE__ */ jsxs7(
|
|
423
465
|
Dialog.Content,
|
|
424
466
|
{
|
|
425
467
|
className: cx(portal2.className, content({ size }), className),
|
|
@@ -427,15 +469,15 @@ function Modal({
|
|
|
427
469
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
428
470
|
...description4 ? {} : { "aria-describedby": void 0 },
|
|
429
471
|
children: [
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
432
|
-
/* @__PURE__ */
|
|
433
|
-
description4 && /* @__PURE__ */
|
|
472
|
+
/* @__PURE__ */ jsxs7("div", { className: header2, children: [
|
|
473
|
+
/* @__PURE__ */ jsxs7("div", { className: headings, children: [
|
|
474
|
+
/* @__PURE__ */ jsx9(Dialog.Title, { className: title, children: title3 }),
|
|
475
|
+
description4 && /* @__PURE__ */ jsx9(Dialog.Description, { className: description, children: description4 })
|
|
434
476
|
] }),
|
|
435
|
-
!hideCloseButton && /* @__PURE__ */
|
|
477
|
+
!hideCloseButton && /* @__PURE__ */ jsx9(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx9(XIcon, { size: 16 }) })
|
|
436
478
|
] }),
|
|
437
|
-
children && /* @__PURE__ */
|
|
438
|
-
|
|
479
|
+
children && /* @__PURE__ */ jsx9("div", { className: body2, children }),
|
|
480
|
+
footer4 && /* @__PURE__ */ jsx9("div", { className: footer2, children: footer4 })
|
|
439
481
|
]
|
|
440
482
|
}
|
|
441
483
|
)
|
|
@@ -446,22 +488,22 @@ var ModalClose = Dialog.Close;
|
|
|
446
488
|
|
|
447
489
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
448
490
|
import * as RadixRadioGroup from "@radix-ui/react-radio-group";
|
|
449
|
-
import { forwardRef as
|
|
491
|
+
import { forwardRef as forwardRef9, useId as useId2 } from "react";
|
|
450
492
|
|
|
451
493
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
452
|
-
import { createRuntimeFn as
|
|
494
|
+
import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
453
495
|
var description2 = "_1w9iwjmd";
|
|
454
496
|
var groupLabel = "_1w9iwjme";
|
|
455
497
|
var indicator = "_1w9iwjma";
|
|
456
|
-
var items =
|
|
498
|
+
var items = _7a4688({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
457
499
|
var labelText = "_1w9iwjmc";
|
|
458
|
-
var option =
|
|
459
|
-
var radio =
|
|
500
|
+
var option = _7a4688({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
501
|
+
var radio = _7a4688({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
460
502
|
var text = "_1w9iwjmb";
|
|
461
503
|
|
|
462
504
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
463
|
-
import { jsx as
|
|
464
|
-
var RadioGroup =
|
|
505
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
506
|
+
var RadioGroup = forwardRef9(function RadioGroup2(props, ref) {
|
|
465
507
|
const {
|
|
466
508
|
options,
|
|
467
509
|
value: value2,
|
|
@@ -484,12 +526,12 @@ var RadioGroup = forwardRef7(function RadioGroup2(props, ref) {
|
|
|
484
526
|
const baseId = id ?? generatedId;
|
|
485
527
|
const labelId = label3 ? `${baseId}-label` : void 0;
|
|
486
528
|
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
487
|
-
return /* @__PURE__ */
|
|
488
|
-
label3 && /* @__PURE__ */
|
|
529
|
+
return /* @__PURE__ */ jsxs8("div", { className: cx(field, className), children: [
|
|
530
|
+
label3 && /* @__PURE__ */ jsxs8("span", { id: labelId, className: cx(label, groupLabel), children: [
|
|
489
531
|
label3,
|
|
490
|
-
required && /* @__PURE__ */
|
|
532
|
+
required && /* @__PURE__ */ jsx10("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
491
533
|
] }),
|
|
492
|
-
/* @__PURE__ */
|
|
534
|
+
/* @__PURE__ */ jsx10(
|
|
493
535
|
RadixRadioGroup.Root,
|
|
494
536
|
{
|
|
495
537
|
ref,
|
|
@@ -510,8 +552,8 @@ var RadioGroup = forwardRef7(function RadioGroup2(props, ref) {
|
|
|
510
552
|
const itemId = `${baseId}-${option2.value}`;
|
|
511
553
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
512
554
|
const itemDisabled = disabled || option2.disabled;
|
|
513
|
-
return /* @__PURE__ */
|
|
514
|
-
/* @__PURE__ */
|
|
555
|
+
return /* @__PURE__ */ jsxs8("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
556
|
+
/* @__PURE__ */ jsx10(
|
|
515
557
|
RadixRadioGroup.Item,
|
|
516
558
|
{
|
|
517
559
|
id: itemId,
|
|
@@ -519,29 +561,29 @@ var RadioGroup = forwardRef7(function RadioGroup2(props, ref) {
|
|
|
519
561
|
disabled: option2.disabled,
|
|
520
562
|
"aria-describedby": descriptionId,
|
|
521
563
|
className: radio({ size }),
|
|
522
|
-
children: /* @__PURE__ */
|
|
564
|
+
children: /* @__PURE__ */ jsx10(RadixRadioGroup.Indicator, { className: indicator })
|
|
523
565
|
}
|
|
524
566
|
),
|
|
525
|
-
/* @__PURE__ */
|
|
526
|
-
/* @__PURE__ */
|
|
527
|
-
option2.description && /* @__PURE__ */
|
|
567
|
+
/* @__PURE__ */ jsxs8("span", { className: text, children: [
|
|
568
|
+
/* @__PURE__ */ jsx10("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
569
|
+
option2.description && /* @__PURE__ */ jsx10("span", { id: descriptionId, className: description2, children: option2.description })
|
|
528
570
|
] })
|
|
529
571
|
] }, option2.value);
|
|
530
572
|
})
|
|
531
573
|
}
|
|
532
574
|
),
|
|
533
|
-
helperText2 && /* @__PURE__ */
|
|
575
|
+
helperText2 && /* @__PURE__ */ jsx10("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
534
576
|
] });
|
|
535
577
|
});
|
|
536
578
|
|
|
537
579
|
// src/components/Select/Select.tsx
|
|
538
580
|
import * as RadixSelect from "@radix-ui/react-select";
|
|
539
|
-
import { forwardRef as
|
|
581
|
+
import { forwardRef as forwardRef10, useId as useId3 } from "react";
|
|
540
582
|
import { CheckIcon, ChevronDownIcon } from "@bestow-ui/icons";
|
|
541
583
|
|
|
542
584
|
// src/components/Select/Select.css.ts
|
|
543
585
|
var content2 = "_1kx81e83";
|
|
544
|
-
var
|
|
586
|
+
var icon3 = "_1kx81e82";
|
|
545
587
|
var item = "_1kx81e85";
|
|
546
588
|
var itemIndicator = "_1kx81e86";
|
|
547
589
|
var trigger = "_1kx81e80";
|
|
@@ -549,8 +591,8 @@ var value = "_1kx81e81";
|
|
|
549
591
|
var viewport = "_1kx81e84";
|
|
550
592
|
|
|
551
593
|
// src/components/Select/Select.tsx
|
|
552
|
-
import { jsx as
|
|
553
|
-
var Select =
|
|
594
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
595
|
+
var Select = forwardRef10(function Select2(props, ref) {
|
|
554
596
|
const {
|
|
555
597
|
options,
|
|
556
598
|
value: value2,
|
|
@@ -574,12 +616,12 @@ var Select = forwardRef8(function Select2(props, ref) {
|
|
|
574
616
|
const triggerId = id ?? generatedId;
|
|
575
617
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
576
618
|
const portal2 = usePortalProps();
|
|
577
|
-
return /* @__PURE__ */
|
|
578
|
-
label3 && /* @__PURE__ */
|
|
619
|
+
return /* @__PURE__ */ jsxs9("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
620
|
+
label3 && /* @__PURE__ */ jsxs9("label", { htmlFor: triggerId, className: label, children: [
|
|
579
621
|
label3,
|
|
580
|
-
required && /* @__PURE__ */
|
|
622
|
+
required && /* @__PURE__ */ jsx11("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
581
623
|
] }),
|
|
582
|
-
/* @__PURE__ */
|
|
624
|
+
/* @__PURE__ */ jsxs9(
|
|
583
625
|
RadixSelect.Root,
|
|
584
626
|
{
|
|
585
627
|
value: isControlled ? value2 ?? "" : void 0,
|
|
@@ -589,7 +631,7 @@ var Select = forwardRef8(function Select2(props, ref) {
|
|
|
589
631
|
required,
|
|
590
632
|
name,
|
|
591
633
|
children: [
|
|
592
|
-
/* @__PURE__ */
|
|
634
|
+
/* @__PURE__ */ jsxs9(
|
|
593
635
|
RadixSelect.Trigger,
|
|
594
636
|
{
|
|
595
637
|
ref,
|
|
@@ -600,12 +642,12 @@ var Select = forwardRef8(function Select2(props, ref) {
|
|
|
600
642
|
"data-invalid": error || void 0,
|
|
601
643
|
className: cx(root3({ size, fullWidth }), trigger, className),
|
|
602
644
|
children: [
|
|
603
|
-
/* @__PURE__ */
|
|
604
|
-
/* @__PURE__ */
|
|
645
|
+
/* @__PURE__ */ jsx11("span", { className: value, children: /* @__PURE__ */ jsx11(RadixSelect.Value, { placeholder }) }),
|
|
646
|
+
/* @__PURE__ */ jsx11(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx11(ChevronDownIcon, { size: 16 }) })
|
|
605
647
|
]
|
|
606
648
|
}
|
|
607
649
|
),
|
|
608
|
-
/* @__PURE__ */
|
|
650
|
+
/* @__PURE__ */ jsx11(RadixSelect.Portal, { children: /* @__PURE__ */ jsx11(
|
|
609
651
|
RadixSelect.Content,
|
|
610
652
|
{
|
|
611
653
|
position: "popper",
|
|
@@ -613,15 +655,15 @@ var Select = forwardRef8(function Select2(props, ref) {
|
|
|
613
655
|
collisionPadding: 8,
|
|
614
656
|
className: cx(portal2.className, content2),
|
|
615
657
|
style: portal2.style,
|
|
616
|
-
children: /* @__PURE__ */
|
|
658
|
+
children: /* @__PURE__ */ jsx11(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs9(
|
|
617
659
|
RadixSelect.Item,
|
|
618
660
|
{
|
|
619
661
|
value: option2.value,
|
|
620
662
|
disabled: option2.disabled,
|
|
621
663
|
className: item,
|
|
622
664
|
children: [
|
|
623
|
-
/* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
665
|
+
/* @__PURE__ */ jsx11(RadixSelect.ItemText, { children: option2.label }),
|
|
666
|
+
/* @__PURE__ */ jsx11(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx11(CheckIcon, { size: 16 }) })
|
|
625
667
|
]
|
|
626
668
|
},
|
|
627
669
|
option2.value
|
|
@@ -631,21 +673,21 @@ var Select = forwardRef8(function Select2(props, ref) {
|
|
|
631
673
|
]
|
|
632
674
|
}
|
|
633
675
|
),
|
|
634
|
-
helperText2 && /* @__PURE__ */
|
|
676
|
+
helperText2 && /* @__PURE__ */ jsx11("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
635
677
|
] });
|
|
636
678
|
});
|
|
637
679
|
|
|
638
680
|
// src/components/Stack/Stack.tsx
|
|
639
|
-
import { forwardRef as
|
|
681
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
640
682
|
|
|
641
683
|
// src/components/Stack/Stack.css.ts
|
|
642
|
-
import { createRuntimeFn as
|
|
643
|
-
var stack =
|
|
684
|
+
import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
685
|
+
var stack = _7a4689({ 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: [] });
|
|
644
686
|
|
|
645
687
|
// src/components/Stack/Stack.tsx
|
|
646
|
-
import { jsx as
|
|
647
|
-
var Stack =
|
|
648
|
-
return /* @__PURE__ */
|
|
688
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
689
|
+
var Stack = forwardRef11(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
690
|
+
return /* @__PURE__ */ jsx12(
|
|
649
691
|
Component,
|
|
650
692
|
{
|
|
651
693
|
ref,
|
|
@@ -657,22 +699,22 @@ var Stack = forwardRef9(function Stack2({ as: Component = "div", direction, gap,
|
|
|
657
699
|
|
|
658
700
|
// src/components/Switch/Switch.tsx
|
|
659
701
|
import * as RadixSwitch from "@radix-ui/react-switch";
|
|
660
|
-
import { forwardRef as
|
|
702
|
+
import { forwardRef as forwardRef12, useId as useId4 } from "react";
|
|
661
703
|
|
|
662
704
|
// src/components/Switch/Switch.css.ts
|
|
663
|
-
import { createRuntimeFn as
|
|
705
|
+
import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
664
706
|
var label2 = "o33ul29";
|
|
665
|
-
var root4 =
|
|
666
|
-
var thumb =
|
|
667
|
-
var track =
|
|
707
|
+
var root4 = _7a46810({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
708
|
+
var thumb = _7a46810({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
709
|
+
var track = _7a46810({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
668
710
|
|
|
669
711
|
// src/components/Switch/Switch.tsx
|
|
670
|
-
import { jsx as
|
|
671
|
-
var Switch =
|
|
712
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
713
|
+
var Switch = forwardRef12(function Switch2({ label: label3, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
672
714
|
const generatedId = useId4();
|
|
673
715
|
const switchId = id ?? generatedId;
|
|
674
|
-
return /* @__PURE__ */
|
|
675
|
-
/* @__PURE__ */
|
|
716
|
+
return /* @__PURE__ */ jsxs10("span", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
717
|
+
/* @__PURE__ */ jsx13(
|
|
676
718
|
RadixSwitch.Root,
|
|
677
719
|
{
|
|
678
720
|
ref,
|
|
@@ -681,16 +723,16 @@ var Switch = forwardRef10(function Switch2({ label: label3, size, id, className,
|
|
|
681
723
|
"aria-label": ariaLabel,
|
|
682
724
|
className: track({ size }),
|
|
683
725
|
...rest,
|
|
684
|
-
children: /* @__PURE__ */
|
|
726
|
+
children: /* @__PURE__ */ jsx13(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
685
727
|
}
|
|
686
728
|
),
|
|
687
|
-
label3 && /* @__PURE__ */
|
|
729
|
+
label3 && /* @__PURE__ */ jsx13("label", { htmlFor: switchId, className: label2, children: label3 })
|
|
688
730
|
] });
|
|
689
731
|
});
|
|
690
732
|
|
|
691
733
|
// src/components/Textarea/Textarea.tsx
|
|
692
734
|
import {
|
|
693
|
-
forwardRef as
|
|
735
|
+
forwardRef as forwardRef13,
|
|
694
736
|
useCallback,
|
|
695
737
|
useEffect as useEffect2,
|
|
696
738
|
useId as useId5,
|
|
@@ -700,17 +742,17 @@ import {
|
|
|
700
742
|
} from "react";
|
|
701
743
|
|
|
702
744
|
// src/components/Textarea/Textarea.css.ts
|
|
703
|
-
import { createRuntimeFn as
|
|
745
|
+
import { createRuntimeFn as _7a46811 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
704
746
|
var count = "_1koawa9";
|
|
705
747
|
var countOver = "_1koawaa";
|
|
706
748
|
var defaultWidth = "_1koawa7";
|
|
707
|
-
var
|
|
708
|
-
var textarea =
|
|
749
|
+
var footer3 = "_1koawa8";
|
|
750
|
+
var textarea = _7a46811({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
709
751
|
|
|
710
752
|
// src/components/Textarea/Textarea.tsx
|
|
711
|
-
import { jsx as
|
|
753
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
712
754
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
|
|
713
|
-
var Textarea =
|
|
755
|
+
var Textarea = forwardRef13(function Textarea2({
|
|
714
756
|
label: label3,
|
|
715
757
|
helperText: helperText2,
|
|
716
758
|
error,
|
|
@@ -750,12 +792,12 @@ var Textarea = forwardRef11(function Textarea2({
|
|
|
750
792
|
fitHeight();
|
|
751
793
|
onChange?.(event);
|
|
752
794
|
};
|
|
753
|
-
return /* @__PURE__ */
|
|
754
|
-
label3 && /* @__PURE__ */
|
|
795
|
+
return /* @__PURE__ */ jsxs11("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
796
|
+
label3 && /* @__PURE__ */ jsxs11("label", { htmlFor: textareaId, className: label, children: [
|
|
755
797
|
label3,
|
|
756
|
-
required && /* @__PURE__ */
|
|
798
|
+
required && /* @__PURE__ */ jsx14("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
757
799
|
] }),
|
|
758
|
-
/* @__PURE__ */
|
|
800
|
+
/* @__PURE__ */ jsx14(
|
|
759
801
|
"textarea",
|
|
760
802
|
{
|
|
761
803
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -777,9 +819,9 @@ var Textarea = forwardRef11(function Textarea2({
|
|
|
777
819
|
...rest
|
|
778
820
|
}
|
|
779
821
|
),
|
|
780
|
-
(helperText2 || showCount) && /* @__PURE__ */
|
|
781
|
-
helperText2 && /* @__PURE__ */
|
|
782
|
-
showCount && /* @__PURE__ */
|
|
822
|
+
(helperText2 || showCount) && /* @__PURE__ */ jsxs11("div", { className: footer3, children: [
|
|
823
|
+
helperText2 && /* @__PURE__ */ jsx14("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
|
|
824
|
+
showCount && /* @__PURE__ */ jsx14("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
783
825
|
] })
|
|
784
826
|
] });
|
|
785
827
|
});
|
|
@@ -790,16 +832,16 @@ import { createContext as createContext2, useCallback as useCallback2, useContex
|
|
|
790
832
|
import { XIcon as XIcon2 } from "@bestow-ui/icons";
|
|
791
833
|
|
|
792
834
|
// src/components/Toast/Toast.css.ts
|
|
793
|
-
import { createRuntimeFn as
|
|
835
|
+
import { createRuntimeFn as _7a46812 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
794
836
|
var action = "_1g11zvx7";
|
|
795
837
|
var close = "_1g11zvx8";
|
|
796
838
|
var description3 = "_1g11zvx6";
|
|
797
839
|
var title2 = "_1g11zvx5";
|
|
798
|
-
var toast =
|
|
840
|
+
var toast = _7a46812({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
799
841
|
var viewport2 = "_1g11zvx0";
|
|
800
842
|
|
|
801
843
|
// src/components/Toast/Toast.tsx
|
|
802
|
-
import { jsx as
|
|
844
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
803
845
|
var REMOVE_DELAY = 500;
|
|
804
846
|
var ToastContext = createContext2(null);
|
|
805
847
|
function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC" }) {
|
|
@@ -817,9 +859,9 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
|
|
|
817
859
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
818
860
|
}, []);
|
|
819
861
|
const value2 = useMemo2(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
820
|
-
return /* @__PURE__ */
|
|
862
|
+
return /* @__PURE__ */ jsx15(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ jsxs12(RadixToast.Provider, { duration, label: label3, swipeDirection: "right", children: [
|
|
821
863
|
children,
|
|
822
|
-
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */
|
|
864
|
+
toasts.map(({ id, open, title: title3, description: description4, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ jsxs12(
|
|
823
865
|
RadixToast.Root,
|
|
824
866
|
{
|
|
825
867
|
open,
|
|
@@ -829,15 +871,15 @@ function ToastProvider({ children, duration = 5e3, label: label3 = "\uC54C\uB9BC
|
|
|
829
871
|
},
|
|
830
872
|
className: toast({ variant }),
|
|
831
873
|
children: [
|
|
832
|
-
/* @__PURE__ */
|
|
833
|
-
description4 && /* @__PURE__ */
|
|
834
|
-
action2 && /* @__PURE__ */
|
|
835
|
-
/* @__PURE__ */
|
|
874
|
+
/* @__PURE__ */ jsx15(RadixToast.Title, { className: title2, children: title3 }),
|
|
875
|
+
description4 && /* @__PURE__ */ jsx15(RadixToast.Description, { className: description3, children: description4 }),
|
|
876
|
+
action2 && /* @__PURE__ */ jsx15(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ jsx15(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
|
|
877
|
+
/* @__PURE__ */ jsx15(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx15(XIcon2, { size: 16 }) })
|
|
836
878
|
]
|
|
837
879
|
},
|
|
838
880
|
id
|
|
839
881
|
)),
|
|
840
|
-
/* @__PURE__ */
|
|
882
|
+
/* @__PURE__ */ jsx15(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
841
883
|
] }) });
|
|
842
884
|
}
|
|
843
885
|
function useToast() {
|
|
@@ -854,7 +896,7 @@ var arrow = "z7rufs1";
|
|
|
854
896
|
var content3 = "z7rufs0";
|
|
855
897
|
|
|
856
898
|
// src/components/Tooltip/Tooltip.tsx
|
|
857
|
-
import { jsx as
|
|
899
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
858
900
|
function Tooltip({
|
|
859
901
|
content: content4,
|
|
860
902
|
children,
|
|
@@ -869,9 +911,9 @@ function Tooltip({
|
|
|
869
911
|
}) {
|
|
870
912
|
const portal2 = usePortalProps();
|
|
871
913
|
if (disabled || content4 == null || content4 === "") return children;
|
|
872
|
-
return /* @__PURE__ */
|
|
873
|
-
/* @__PURE__ */
|
|
874
|
-
/* @__PURE__ */
|
|
914
|
+
return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs13(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
915
|
+
/* @__PURE__ */ jsx16(RadixTooltip.Trigger, { asChild: true, children }),
|
|
916
|
+
/* @__PURE__ */ jsx16(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs13(
|
|
875
917
|
RadixTooltip.Content,
|
|
876
918
|
{
|
|
877
919
|
side,
|
|
@@ -882,7 +924,7 @@ function Tooltip({
|
|
|
882
924
|
style: portal2.style,
|
|
883
925
|
children: [
|
|
884
926
|
content4,
|
|
885
|
-
/* @__PURE__ */
|
|
927
|
+
/* @__PURE__ */ jsx16(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
886
928
|
]
|
|
887
929
|
}
|
|
888
930
|
) })
|
|
@@ -890,14 +932,14 @@ function Tooltip({
|
|
|
890
932
|
}
|
|
891
933
|
|
|
892
934
|
// src/components/Typography/Typography.tsx
|
|
893
|
-
import { forwardRef as
|
|
935
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
894
936
|
|
|
895
937
|
// src/components/Typography/Typography.css.ts
|
|
896
|
-
import { createRuntimeFn as
|
|
897
|
-
var typography =
|
|
938
|
+
import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
939
|
+
var typography = _7a46813({ 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: [] });
|
|
898
940
|
|
|
899
941
|
// src/components/Typography/Typography.tsx
|
|
900
|
-
import { jsx as
|
|
942
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
901
943
|
var defaultElement = {
|
|
902
944
|
display: "h1",
|
|
903
945
|
h1: "h1",
|
|
@@ -909,9 +951,9 @@ var defaultElement = {
|
|
|
909
951
|
"body-sm": "p",
|
|
910
952
|
caption: "span"
|
|
911
953
|
};
|
|
912
|
-
var Typography =
|
|
954
|
+
var Typography = forwardRef14(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
913
955
|
const Component = as ?? defaultElement[variant];
|
|
914
|
-
return /* @__PURE__ */
|
|
956
|
+
return /* @__PURE__ */ jsx17(
|
|
915
957
|
Component,
|
|
916
958
|
{
|
|
917
959
|
ref,
|
|
@@ -921,7 +963,12 @@ var Typography = forwardRef12(function Typography2({ variant = "body", as, color
|
|
|
921
963
|
);
|
|
922
964
|
});
|
|
923
965
|
export {
|
|
966
|
+
Badge,
|
|
924
967
|
Button,
|
|
968
|
+
Card,
|
|
969
|
+
CardBody,
|
|
970
|
+
CardFooter,
|
|
971
|
+
CardHeader,
|
|
925
972
|
Checkbox,
|
|
926
973
|
Input,
|
|
927
974
|
Modal,
|