@bestow-ui/react 0.8.3 → 0.10.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/README.md +6 -6
- package/dist/index.cjs +1156 -398
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1067 -245
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +315 -18
- package/dist/index.d.ts +315 -18
- package/dist/index.js +1150 -396
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
package/dist/index.cjs
CHANGED
|
@@ -33,15 +33,20 @@ var index_exports = {};
|
|
|
33
33
|
__export(index_exports, {
|
|
34
34
|
Accordion: () => Accordion,
|
|
35
35
|
AccordionItem: () => AccordionItem,
|
|
36
|
+
Alert: () => Alert,
|
|
36
37
|
Avatar: () => Avatar,
|
|
37
38
|
Badge: () => Badge,
|
|
39
|
+
Breadcrumb: () => Breadcrumb,
|
|
38
40
|
Button: () => Button,
|
|
39
41
|
Card: () => Card,
|
|
40
42
|
CardBody: () => CardBody,
|
|
41
43
|
CardFooter: () => CardFooter,
|
|
42
44
|
CardHeader: () => CardHeader,
|
|
43
45
|
Checkbox: () => Checkbox,
|
|
46
|
+
Combobox: () => Combobox,
|
|
44
47
|
Divider: () => Divider,
|
|
48
|
+
Drawer: () => Drawer,
|
|
49
|
+
DrawerClose: () => DrawerClose,
|
|
45
50
|
DropdownMenu: () => DropdownMenu,
|
|
46
51
|
DropdownMenuContent: () => DropdownMenuContent,
|
|
47
52
|
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
@@ -49,18 +54,29 @@ __export(index_exports, {
|
|
|
49
54
|
DropdownMenuLabel: () => DropdownMenuLabel,
|
|
50
55
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
51
56
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
57
|
+
IconButton: () => IconButton,
|
|
52
58
|
Input: () => Input,
|
|
59
|
+
Link: () => Link,
|
|
53
60
|
Modal: () => Modal,
|
|
54
61
|
ModalClose: () => ModalClose,
|
|
55
62
|
Pagination: () => Pagination,
|
|
56
|
-
Popover: () =>
|
|
63
|
+
Popover: () => Popover2,
|
|
57
64
|
PopoverClose: () => PopoverClose,
|
|
65
|
+
Progress: () => Progress,
|
|
58
66
|
RadioGroup: () => RadioGroup,
|
|
59
67
|
Select: () => Select,
|
|
60
68
|
Skeleton: () => Skeleton,
|
|
69
|
+
Slider: () => Slider,
|
|
61
70
|
Spinner: () => Spinner,
|
|
62
71
|
Stack: () => Stack,
|
|
63
72
|
Switch: () => Switch,
|
|
73
|
+
Table: () => Table,
|
|
74
|
+
TableBody: () => TableBody,
|
|
75
|
+
TableCell: () => TableCell,
|
|
76
|
+
TableFooter: () => TableFooter,
|
|
77
|
+
TableHead: () => TableHead,
|
|
78
|
+
TableHeader: () => TableHeader,
|
|
79
|
+
TableRow: () => TableRow,
|
|
64
80
|
Tabs: () => Tabs,
|
|
65
81
|
TabsContent: () => TabsContent,
|
|
66
82
|
TabsList: () => TabsList,
|
|
@@ -85,7 +101,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
85
101
|
|
|
86
102
|
// src/theme/contract.css.ts
|
|
87
103
|
var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
|
|
88
|
-
var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } },
|
|
104
|
+
var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { dropdown: "var(--bestow-z-index-dropdown)", overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" }, warning: { solid: "var(--bestow-color-warning-solid)", solidHover: "var(--bestow-color-warning-solid-hover)", contrast: "var(--bestow-color-warning-contrast)", subtle: "var(--bestow-color-warning-subtle)", subtleHover: "var(--bestow-color-warning-subtle-hover)", text: "var(--bestow-color-warning-text)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" } };
|
|
89
105
|
|
|
90
106
|
// src/theme/color.ts
|
|
91
107
|
var import_tokens = require("@bestow-ui/tokens");
|
|
@@ -161,6 +177,11 @@ function findReadable(base, startL, step, backgrounds) {
|
|
|
161
177
|
}
|
|
162
178
|
return step < 0 ? import_tokens.palette.black : import_tokens.palette.white;
|
|
163
179
|
}
|
|
180
|
+
function hoverFor(base, delta, contrast) {
|
|
181
|
+
const preferred = withL(base, Math.min(1, Math.max(0, base.l + delta)));
|
|
182
|
+
if (contrastRatio(contrast, preferred) >= 4.5) return preferred;
|
|
183
|
+
return withL(base, Math.min(1, Math.max(0, base.l - delta)));
|
|
184
|
+
}
|
|
164
185
|
function pickContrast(solid) {
|
|
165
186
|
const white = import_tokens.palette.white;
|
|
166
187
|
const dark = import_tokens.palette.gray[900];
|
|
@@ -176,10 +197,11 @@ function createIntentColors(intent, color) {
|
|
|
176
197
|
const base = rgbToOklch(parseHex(solid));
|
|
177
198
|
const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
|
|
178
199
|
const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
|
|
200
|
+
const lightContrast = pickContrast(solid);
|
|
179
201
|
const light = {
|
|
180
202
|
solid,
|
|
181
|
-
solidHover:
|
|
182
|
-
contrast:
|
|
203
|
+
solidHover: hoverFor(base, -0.06, lightContrast),
|
|
204
|
+
contrast: lightContrast,
|
|
183
205
|
subtle: lightSubtle,
|
|
184
206
|
subtleHover: lightSubtleHover,
|
|
185
207
|
text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
|
|
@@ -189,15 +211,19 @@ function createIntentColors(intent, color) {
|
|
|
189
211
|
const darkBase = rgbToOklch(parseHex(darkSolid));
|
|
190
212
|
const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
|
|
191
213
|
const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
|
|
214
|
+
const darkContrast = pickContrast(darkSolid);
|
|
192
215
|
const dark = {
|
|
193
216
|
solid: darkSolid,
|
|
194
|
-
solidHover:
|
|
195
|
-
contrast:
|
|
217
|
+
solidHover: hoverFor(darkBase, 0.06, darkContrast),
|
|
218
|
+
contrast: darkContrast,
|
|
196
219
|
subtle: rgba(darkSolid, 0.16),
|
|
197
220
|
subtleHover: rgba(darkSolid, 0.26),
|
|
198
221
|
text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
|
|
199
222
|
};
|
|
200
|
-
const focus = intent === "primary" ? {
|
|
223
|
+
const focus = intent === "primary" ? {
|
|
224
|
+
light: { border: { focus: light.solid } },
|
|
225
|
+
dark: { border: { focus: withL(darkBase, Math.min(1, darkBase.l + 0.06)) } }
|
|
226
|
+
} : void 0;
|
|
201
227
|
return {
|
|
202
228
|
light: { color: { [intent]: light, ...focus?.light } },
|
|
203
229
|
dark: { color: { [intent]: dark, ...focus?.dark } }
|
|
@@ -209,10 +235,10 @@ var import_dynamic = require("@vanilla-extract/dynamic");
|
|
|
209
235
|
function deepMerge(target, source) {
|
|
210
236
|
if (!source) return target;
|
|
211
237
|
const out = { ...target };
|
|
212
|
-
for (const [key,
|
|
213
|
-
if (
|
|
238
|
+
for (const [key, value4] of Object.entries(source)) {
|
|
239
|
+
if (value4 === void 0) continue;
|
|
214
240
|
const prev = out[key];
|
|
215
|
-
out[key] = typeof
|
|
241
|
+
out[key] = typeof value4 === "object" && typeof prev === "object" ? deepMerge(prev, value4) : value4;
|
|
216
242
|
}
|
|
217
243
|
return out;
|
|
218
244
|
}
|
|
@@ -231,11 +257,11 @@ function mergeThemes(a, b) {
|
|
|
231
257
|
return createTheme(a, b);
|
|
232
258
|
}
|
|
233
259
|
function flatten(partial, contract, out) {
|
|
234
|
-
for (const [key,
|
|
260
|
+
for (const [key, value4] of Object.entries(partial)) {
|
|
235
261
|
const target = contract[key];
|
|
236
262
|
if (target === void 0) continue;
|
|
237
|
-
if (typeof target === "string" && typeof
|
|
238
|
-
else if (typeof target === "object" && typeof
|
|
263
|
+
if (typeof target === "string" && typeof value4 === "string") out[target] = value4;
|
|
264
|
+
else if (typeof target === "object" && typeof value4 === "object") flatten(value4, target, out);
|
|
239
265
|
}
|
|
240
266
|
return out;
|
|
241
267
|
}
|
|
@@ -264,17 +290,17 @@ var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeP
|
|
|
264
290
|
const parent = (0, import_react.useContext)(ThemeContext);
|
|
265
291
|
const theme = themeProp ?? parent.theme;
|
|
266
292
|
const merged = (0, import_react.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
267
|
-
const
|
|
293
|
+
const value4 = (0, import_react.useMemo)(
|
|
268
294
|
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
269
295
|
[theme, merged]
|
|
270
296
|
);
|
|
271
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value:
|
|
297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
272
298
|
"div",
|
|
273
299
|
{
|
|
274
300
|
ref,
|
|
275
301
|
"data-theme": theme,
|
|
276
302
|
className: cx(themeClass[theme], root, className),
|
|
277
|
-
style:
|
|
303
|
+
style: value4.style ? { ...value4.style, ...style } : style,
|
|
278
304
|
...rest,
|
|
279
305
|
children
|
|
280
306
|
}
|
|
@@ -313,94 +339,207 @@ var Accordion = /* @__PURE__ */ (0, import_react2.forwardRef)(function Accordion
|
|
|
313
339
|
const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
|
|
314
340
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAccordion.Root, { ref, className: cx(root2, className), ...rootProps });
|
|
315
341
|
});
|
|
316
|
-
var AccordionItem = /* @__PURE__ */ (0, import_react2.forwardRef)(function AccordionItem2({ title:
|
|
342
|
+
var AccordionItem = /* @__PURE__ */ (0, import_react2.forwardRef)(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
|
|
317
343
|
const Heading = `h${headingLevel}`;
|
|
318
344
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
|
|
319
345
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading, { className: header, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(RadixAccordion.Trigger, { className: trigger, children: [
|
|
320
|
-
|
|
346
|
+
title6,
|
|
321
347
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { size: 18, className: chevron })
|
|
322
348
|
] }) }) }),
|
|
323
349
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: contentInner, children }) })
|
|
324
350
|
] });
|
|
325
351
|
});
|
|
326
352
|
|
|
353
|
+
// src/components/Alert/Alert.tsx
|
|
354
|
+
var import_react3 = require("react");
|
|
355
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
356
|
+
|
|
357
|
+
// src/components/Alert/Alert.css.ts
|
|
358
|
+
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
359
|
+
var action = "bsmpc0j";
|
|
360
|
+
var alert = /* @__PURE__ */ (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
|
|
361
|
+
var closeButton = "bsmpc0k";
|
|
362
|
+
var content2 = "bsmpc0g";
|
|
363
|
+
var description = "bsmpc0i";
|
|
364
|
+
var icon = "bsmpc0f";
|
|
365
|
+
var title = "bsmpc0h";
|
|
366
|
+
|
|
367
|
+
// src/components/Alert/Alert.tsx
|
|
368
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
369
|
+
var defaultIcons = {
|
|
370
|
+
primary: import_icons2.InfoIcon,
|
|
371
|
+
neutral: import_icons2.InfoIcon,
|
|
372
|
+
success: import_icons2.CircleCheckIcon,
|
|
373
|
+
warning: import_icons2.TriangleAlertIcon,
|
|
374
|
+
danger: import_icons2.CircleAlertIcon
|
|
375
|
+
};
|
|
376
|
+
var Alert = /* @__PURE__ */ (0, import_react3.forwardRef)(function Alert2({ variant, color = "primary", title: title6, icon: icon6, action: action3, onClose, closeLabel = "\uB2EB\uAE30", className, children, ...rest }, ref) {
|
|
377
|
+
const DefaultIcon = defaultIcons[color];
|
|
378
|
+
const iconNode = icon6 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultIcon, { size: 18 }) : icon6;
|
|
379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
|
|
380
|
+
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, "aria-hidden": true, children: iconNode }),
|
|
381
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: content2, children: [
|
|
382
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: title, children: title6 }),
|
|
383
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: description, children })
|
|
384
|
+
] }),
|
|
385
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: action, children: action3 }),
|
|
386
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: closeButton, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.XIcon, { size: 16 }) })
|
|
387
|
+
] });
|
|
388
|
+
});
|
|
389
|
+
|
|
327
390
|
// src/components/Avatar/Avatar.tsx
|
|
328
391
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
329
|
-
var
|
|
330
|
-
var
|
|
392
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
393
|
+
var import_react4 = require("react");
|
|
331
394
|
|
|
332
395
|
// src/components/Avatar/Avatar.css.ts
|
|
333
|
-
var
|
|
396
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
334
397
|
var fallback = "_1fd2kp27";
|
|
335
398
|
var image = "_1fd2kp26";
|
|
336
|
-
var root3 = (0,
|
|
399
|
+
var root3 = /* @__PURE__ */ (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
|
|
337
400
|
|
|
338
401
|
// src/components/Avatar/Avatar.tsx
|
|
339
|
-
var
|
|
402
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
340
403
|
function getInitials(name) {
|
|
341
404
|
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
342
405
|
const first = (word) => Array.from(word)[0] ?? "";
|
|
343
406
|
return (first(a) + first(b)).toUpperCase();
|
|
344
407
|
}
|
|
345
|
-
var Avatar = /* @__PURE__ */ (0,
|
|
346
|
-
const
|
|
347
|
-
const a11y =
|
|
408
|
+
var Avatar = /* @__PURE__ */ (0, import_react4.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
|
|
409
|
+
const label6 = alt ?? name;
|
|
410
|
+
const a11y = label6 ? { role: "img", "aria-label": label6 } : { "aria-hidden": true };
|
|
348
411
|
const initials = name ? getInitials(name) : "";
|
|
349
|
-
return /* @__PURE__ */ (0,
|
|
350
|
-
src && /* @__PURE__ */ (0,
|
|
351
|
-
/* @__PURE__ */ (0,
|
|
412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(RadixAvatar.Root, { ref, className: cx(root3({ size, shape }), className), ...a11y, ...rest, children: [
|
|
413
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixAvatar.Image, { src, alt: "", className: image }),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.UserIcon, { size: "60%" })) })
|
|
352
415
|
] });
|
|
353
416
|
});
|
|
354
417
|
|
|
355
418
|
// src/components/Badge/Badge.tsx
|
|
356
|
-
var
|
|
419
|
+
var import_react5 = require("react");
|
|
357
420
|
|
|
358
421
|
// src/components/Badge/Badge.css.ts
|
|
359
|
-
var
|
|
360
|
-
var badge = (0,
|
|
361
|
-
var
|
|
422
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
423
|
+
var badge = /* @__PURE__ */ (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1295cfn4", variantClassNames: { variant: { solid: "_1295cfn5", soft: "_1295cfn6", outline: "_1295cfn7" }, color: { primary: "_1295cfn8", neutral: "_1295cfn9", danger: "_1295cfna", success: "_1295cfnb", warning: "_1295cfnc" }, size: { sm: "_1295cfnd", md: "_1295cfne", lg: "_1295cfnf" } }, defaultVariants: { variant: "soft", color: "neutral", size: "md" }, compoundVariants: [] });
|
|
424
|
+
var icon2 = "_1295cfng";
|
|
362
425
|
|
|
363
426
|
// src/components/Badge/Badge.tsx
|
|
364
|
-
var
|
|
365
|
-
var Badge = /* @__PURE__ */ (0,
|
|
366
|
-
return /* @__PURE__ */ (0,
|
|
367
|
-
startIcon && /* @__PURE__ */ (0,
|
|
427
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
428
|
+
var Badge = /* @__PURE__ */ (0, import_react5.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
430
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: icon2, children: startIcon }),
|
|
368
431
|
children
|
|
369
432
|
] });
|
|
370
433
|
});
|
|
371
434
|
|
|
372
|
-
// src/components/
|
|
373
|
-
var
|
|
435
|
+
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
436
|
+
var import_react7 = require("react");
|
|
437
|
+
var import_icons5 = require("@bestow-ui/icons");
|
|
374
438
|
|
|
375
|
-
// src/components/
|
|
376
|
-
var
|
|
377
|
-
var
|
|
439
|
+
// src/components/Link/Link.tsx
|
|
440
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
441
|
+
var import_react6 = require("react");
|
|
442
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
378
443
|
|
|
379
444
|
// src/styles/visuallyHidden.css.ts
|
|
380
445
|
var visuallyHidden = "_1kdtbw10";
|
|
381
446
|
|
|
447
|
+
// src/components/Link/Link.css.ts
|
|
448
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
449
|
+
var externalIcon = "_1t4hlp6";
|
|
450
|
+
var link = /* @__PURE__ */ (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
|
|
451
|
+
|
|
452
|
+
// src/components/Link/Link.tsx
|
|
453
|
+
var import_jsx_runtime6 = (
|
|
454
|
+
// Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
|
|
455
|
+
require("react/jsx-runtime")
|
|
456
|
+
);
|
|
457
|
+
var Link = /* @__PURE__ */ (0, import_react6.forwardRef)(function Link2({
|
|
458
|
+
as: Component = "a",
|
|
459
|
+
asChild,
|
|
460
|
+
color,
|
|
461
|
+
underline,
|
|
462
|
+
external,
|
|
463
|
+
externalLabel = "(\uC0C8 \uCC3D)",
|
|
464
|
+
target,
|
|
465
|
+
rel,
|
|
466
|
+
className,
|
|
467
|
+
children,
|
|
468
|
+
...rest
|
|
469
|
+
}, ref) {
|
|
470
|
+
const linkClassName = cx(link({ color, underline }), className);
|
|
471
|
+
if (asChild) {
|
|
472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children });
|
|
473
|
+
}
|
|
474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
475
|
+
Component,
|
|
476
|
+
{
|
|
477
|
+
ref,
|
|
478
|
+
className: linkClassName,
|
|
479
|
+
target: external ? target ?? "_blank" : target,
|
|
480
|
+
rel: external ? rel ?? "noopener noreferrer" : rel,
|
|
481
|
+
...rest,
|
|
482
|
+
children: [
|
|
483
|
+
children,
|
|
484
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
485
|
+
" ",
|
|
486
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.ExternalLinkIcon, { className: externalIcon }),
|
|
487
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: visuallyHidden, children: externalLabel })
|
|
488
|
+
] })
|
|
489
|
+
]
|
|
490
|
+
}
|
|
491
|
+
);
|
|
492
|
+
});
|
|
493
|
+
|
|
494
|
+
// src/components/Breadcrumb/Breadcrumb.css.ts
|
|
495
|
+
var current = "_18t8ztt3";
|
|
496
|
+
var item2 = "_18t8ztt1";
|
|
497
|
+
var link2 = "_18t8ztt2";
|
|
498
|
+
var list = "_18t8ztt0";
|
|
499
|
+
var separator = "_18t8ztt4";
|
|
500
|
+
|
|
501
|
+
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
502
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
503
|
+
var Breadcrumb = /* @__PURE__ */ (0, import_react7.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabel = "\uC774\uB3D9 \uACBD\uB85C", className, ...rest }, ref) {
|
|
504
|
+
const sep = separator3 ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons5.ChevronRightIcon, { size: 14 });
|
|
505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", { className: list, children: items2.map((item6, index) => {
|
|
506
|
+
const isCurrent = index === items2.length - 1;
|
|
507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: item2, children: [
|
|
508
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: separator, "aria-hidden": true, children: sep }),
|
|
509
|
+
isCurrent || item6.href === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item6.label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Link, { as: linkAs, href: item6.href, color: "neutral", underline: "hover", className: link2, children: item6.label })
|
|
510
|
+
] }, index);
|
|
511
|
+
}) }) });
|
|
512
|
+
});
|
|
513
|
+
|
|
514
|
+
// src/components/Button/Button.tsx
|
|
515
|
+
var import_react9 = require("react");
|
|
516
|
+
|
|
517
|
+
// src/components/Spinner/Spinner.tsx
|
|
518
|
+
var import_icons6 = require("@bestow-ui/icons");
|
|
519
|
+
var import_react8 = require("react");
|
|
520
|
+
|
|
382
521
|
// src/components/Spinner/Spinner.css.ts
|
|
383
|
-
var
|
|
384
|
-
var spinner = (0,
|
|
522
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
523
|
+
var spinner = /* @__PURE__ */ (0, import_createRuntimeFn5.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: [] });
|
|
385
524
|
|
|
386
525
|
// src/components/Spinner/Spinner.tsx
|
|
387
|
-
var
|
|
388
|
-
var Spinner = /* @__PURE__ */ (0,
|
|
389
|
-
const a11y =
|
|
390
|
-
return /* @__PURE__ */ (0,
|
|
391
|
-
/* @__PURE__ */ (0,
|
|
392
|
-
|
|
526
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
527
|
+
var Spinner = /* @__PURE__ */ (0, import_react8.forwardRef)(function Spinner2({ size, color, label: label6 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
528
|
+
const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
|
|
529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
530
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons6.LoaderIcon, { size: "100%" }),
|
|
531
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: visuallyHidden, children: label6 })
|
|
393
532
|
] });
|
|
394
533
|
});
|
|
395
534
|
|
|
396
535
|
// src/components/Button/Button.css.ts
|
|
397
|
-
var
|
|
398
|
-
var button = (0,
|
|
399
|
-
var
|
|
536
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
537
|
+
var button = /* @__PURE__ */ (0, import_createRuntimeFn6.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: [] });
|
|
538
|
+
var icon3 = "xcekdai";
|
|
400
539
|
|
|
401
540
|
// src/components/Button/Button.tsx
|
|
402
|
-
var
|
|
403
|
-
var Button = /* @__PURE__ */ (0,
|
|
541
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
542
|
+
var Button = /* @__PURE__ */ (0, import_react9.forwardRef)(function Button2({
|
|
404
543
|
variant,
|
|
405
544
|
color,
|
|
406
545
|
size,
|
|
@@ -421,8 +560,8 @@ var Button = /* @__PURE__ */ (0, import_react6.forwardRef)(function Button2({
|
|
|
421
560
|
}
|
|
422
561
|
onClick?.(event);
|
|
423
562
|
};
|
|
424
|
-
const leading = loading ? /* @__PURE__ */ (0,
|
|
425
|
-
return /* @__PURE__ */ (0,
|
|
563
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
426
565
|
"button",
|
|
427
566
|
{
|
|
428
567
|
ref,
|
|
@@ -433,70 +572,70 @@ var Button = /* @__PURE__ */ (0, import_react6.forwardRef)(function Button2({
|
|
|
433
572
|
onClick: handleClick,
|
|
434
573
|
...rest,
|
|
435
574
|
children: [
|
|
436
|
-
leading && /* @__PURE__ */ (0,
|
|
575
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: icon3, children: leading }),
|
|
437
576
|
children,
|
|
438
|
-
endIcon && /* @__PURE__ */ (0,
|
|
577
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: icon3, children: endIcon })
|
|
439
578
|
]
|
|
440
579
|
}
|
|
441
580
|
);
|
|
442
581
|
});
|
|
443
582
|
|
|
444
583
|
// src/components/Card/Card.tsx
|
|
445
|
-
var
|
|
584
|
+
var import_react10 = require("react");
|
|
446
585
|
|
|
447
586
|
// src/components/Card/Card.css.ts
|
|
448
|
-
var
|
|
587
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
449
588
|
var body = "dnuf1u9";
|
|
450
|
-
var card = (0,
|
|
589
|
+
var card = /* @__PURE__ */ (0, import_createRuntimeFn7.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: [] });
|
|
451
590
|
var footer = "dnuf1ua";
|
|
452
591
|
var header2 = "dnuf1u8";
|
|
453
592
|
|
|
454
593
|
// src/components/Card/Card.tsx
|
|
455
|
-
var
|
|
456
|
-
var Card = /* @__PURE__ */ (0,
|
|
457
|
-
return /* @__PURE__ */ (0,
|
|
594
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
595
|
+
var Card = /* @__PURE__ */ (0, import_react10.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
458
597
|
});
|
|
459
|
-
var CardHeader = /* @__PURE__ */ (0,
|
|
460
|
-
return /* @__PURE__ */ (0,
|
|
598
|
+
var CardHeader = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(header2, className), ...rest });
|
|
461
600
|
});
|
|
462
|
-
var CardBody = /* @__PURE__ */ (0,
|
|
463
|
-
return /* @__PURE__ */ (0,
|
|
601
|
+
var CardBody = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
602
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
464
603
|
});
|
|
465
|
-
var CardFooter = /* @__PURE__ */ (0,
|
|
466
|
-
return /* @__PURE__ */ (0,
|
|
604
|
+
var CardFooter = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
467
606
|
});
|
|
468
607
|
|
|
469
608
|
// src/components/Checkbox/Checkbox.tsx
|
|
470
|
-
var
|
|
609
|
+
var import_react11 = require("react");
|
|
471
610
|
|
|
472
611
|
// src/utils/mergeRefs.ts
|
|
473
612
|
function mergeRefs(...refs) {
|
|
474
|
-
return (
|
|
613
|
+
return (value4) => {
|
|
475
614
|
for (const ref of refs) {
|
|
476
|
-
if (typeof ref === "function") ref(
|
|
477
|
-
else if (ref) ref.current =
|
|
615
|
+
if (typeof ref === "function") ref(value4);
|
|
616
|
+
else if (ref) ref.current = value4;
|
|
478
617
|
}
|
|
479
618
|
};
|
|
480
619
|
}
|
|
481
620
|
|
|
482
621
|
// src/components/Checkbox/Checkbox.css.ts
|
|
483
|
-
var
|
|
622
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
484
623
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
485
|
-
var control = (0,
|
|
624
|
+
var control = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
486
625
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
487
626
|
var input = "_1y7mzsn6";
|
|
488
|
-
var root4 = (0,
|
|
627
|
+
var root4 = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
489
628
|
|
|
490
629
|
// src/components/Checkbox/Checkbox.tsx
|
|
491
|
-
var
|
|
492
|
-
var Checkbox = /* @__PURE__ */ (0,
|
|
493
|
-
const innerRef = (0,
|
|
494
|
-
(0,
|
|
630
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
631
|
+
var Checkbox = /* @__PURE__ */ (0, import_react11.forwardRef)(function Checkbox2({ label: label6, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
632
|
+
const innerRef = (0, import_react11.useRef)(null);
|
|
633
|
+
(0, import_react11.useEffect)(() => {
|
|
495
634
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
496
635
|
}, [indeterminate]);
|
|
497
|
-
return /* @__PURE__ */ (0,
|
|
498
|
-
/* @__PURE__ */ (0,
|
|
499
|
-
/* @__PURE__ */ (0,
|
|
636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
637
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: control({ size }), children: [
|
|
638
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
500
639
|
"input",
|
|
501
640
|
{
|
|
502
641
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -507,7 +646,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react8.forwardRef)(function Checkbox2(
|
|
|
507
646
|
...rest
|
|
508
647
|
}
|
|
509
648
|
),
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
511
650
|
"path",
|
|
512
651
|
{
|
|
513
652
|
d: "M5 10.5l3.2 3L15 7",
|
|
@@ -517,57 +656,410 @@ var Checkbox = /* @__PURE__ */ (0, import_react8.forwardRef)(function Checkbox2(
|
|
|
517
656
|
strokeLinejoin: "round"
|
|
518
657
|
}
|
|
519
658
|
) }),
|
|
520
|
-
/* @__PURE__ */ (0,
|
|
659
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
521
660
|
] }),
|
|
522
|
-
|
|
661
|
+
label6
|
|
662
|
+
] });
|
|
663
|
+
});
|
|
664
|
+
|
|
665
|
+
// src/components/Combobox/Combobox.tsx
|
|
666
|
+
var Popover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
667
|
+
var import_react12 = require("react");
|
|
668
|
+
var import_icons7 = require("@bestow-ui/icons");
|
|
669
|
+
|
|
670
|
+
// src/components/Input/Input.css.ts
|
|
671
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
672
|
+
var adornment = "_19p5zvh6";
|
|
673
|
+
var field = "_19p5zvh7";
|
|
674
|
+
var fieldFullWidth = "_19p5zvh8";
|
|
675
|
+
var helperText = /* @__PURE__ */ (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
676
|
+
var input2 = "_19p5zvh5";
|
|
677
|
+
var label = "_19p5zvh9";
|
|
678
|
+
var requiredMark = "_19p5zvha";
|
|
679
|
+
var root5 = /* @__PURE__ */ (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
680
|
+
|
|
681
|
+
// src/components/Select/Select.css.ts
|
|
682
|
+
var content3 = "_1kx81e83";
|
|
683
|
+
var icon4 = "_1kx81e82";
|
|
684
|
+
var item3 = "_1kx81e85";
|
|
685
|
+
var itemIndicator = "_1kx81e86";
|
|
686
|
+
var trigger2 = "_1kx81e80";
|
|
687
|
+
var value = "_1kx81e81";
|
|
688
|
+
var viewport = "_1kx81e84";
|
|
689
|
+
|
|
690
|
+
// src/components/Combobox/Combobox.css.ts
|
|
691
|
+
var content4 = "c2pbq71";
|
|
692
|
+
var empty = "c2pbq72";
|
|
693
|
+
var toggle = "c2pbq70";
|
|
694
|
+
|
|
695
|
+
// src/components/Combobox/Combobox.tsx
|
|
696
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
697
|
+
var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
|
|
698
|
+
var Combobox = /* @__PURE__ */ (0, import_react12.forwardRef)(function Combobox2(props, ref) {
|
|
699
|
+
const {
|
|
700
|
+
options,
|
|
701
|
+
value: value4,
|
|
702
|
+
defaultValue,
|
|
703
|
+
onValueChange,
|
|
704
|
+
filter = defaultFilter,
|
|
705
|
+
emptyMessage = "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694",
|
|
706
|
+
placeholder,
|
|
707
|
+
label: label6,
|
|
708
|
+
helperText: helperText3,
|
|
709
|
+
error,
|
|
710
|
+
size,
|
|
711
|
+
fullWidth,
|
|
712
|
+
disabled,
|
|
713
|
+
required,
|
|
714
|
+
name,
|
|
715
|
+
id,
|
|
716
|
+
"aria-label": ariaLabel,
|
|
717
|
+
toggleLabel = "\uBAA9\uB85D \uC5F4\uAE30",
|
|
718
|
+
className
|
|
719
|
+
} = props;
|
|
720
|
+
const generatedId = (0, import_react12.useId)();
|
|
721
|
+
const inputId = id ?? generatedId;
|
|
722
|
+
const labelId = `${inputId}-label`;
|
|
723
|
+
const listId = `${inputId}-listbox`;
|
|
724
|
+
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
725
|
+
const optionId = (index) => `${inputId}-option-${index}`;
|
|
726
|
+
const portal2 = usePortalProps();
|
|
727
|
+
const inputRef = (0, import_react12.useRef)(null);
|
|
728
|
+
const anchorRef = (0, import_react12.useRef)(null);
|
|
729
|
+
const isControlled = "value" in props;
|
|
730
|
+
const [innerValue, setInnerValue] = (0, import_react12.useState)(defaultValue);
|
|
731
|
+
const selectedValue = isControlled ? value4 : innerValue;
|
|
732
|
+
const selectedOption = options.find((o) => o.value === selectedValue);
|
|
733
|
+
const [open, setOpen] = (0, import_react12.useState)(false);
|
|
734
|
+
const [query, setQuery] = (0, import_react12.useState)(null);
|
|
735
|
+
const [activeIndex, setActiveIndex] = (0, import_react12.useState)(-1);
|
|
736
|
+
const filtered = (0, import_react12.useMemo)(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
|
|
737
|
+
const inputText = query ?? selectedOption?.label ?? "";
|
|
738
|
+
const firstEnabled = (list4, from = 0, step = 1) => {
|
|
739
|
+
for (let i = from; i >= 0 && i < list4.length; i += step) if (!list4[i].disabled) return i;
|
|
740
|
+
return -1;
|
|
741
|
+
};
|
|
742
|
+
const openList = (list4 = filtered, preferLast = false) => {
|
|
743
|
+
setOpen(true);
|
|
744
|
+
const selectedIndex = list4.findIndex((o) => o.value === selectedValue);
|
|
745
|
+
setActiveIndex(
|
|
746
|
+
selectedIndex >= 0 && !list4[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list4, list4.length - 1, -1) : firstEnabled(list4)
|
|
747
|
+
);
|
|
748
|
+
};
|
|
749
|
+
const close2 = () => {
|
|
750
|
+
setOpen(false);
|
|
751
|
+
setQuery(null);
|
|
752
|
+
setActiveIndex(-1);
|
|
753
|
+
};
|
|
754
|
+
const select = (option2) => {
|
|
755
|
+
if (option2.disabled) return;
|
|
756
|
+
if (!isControlled) setInnerValue(option2.value);
|
|
757
|
+
if (option2.value !== selectedValue) onValueChange?.(option2.value);
|
|
758
|
+
close2();
|
|
759
|
+
};
|
|
760
|
+
const move = (step) => {
|
|
761
|
+
const start = activeIndex < 0 ? step === 1 ? 0 : filtered.length - 1 : activeIndex + step;
|
|
762
|
+
const next = firstEnabled(filtered, start, step);
|
|
763
|
+
if (next >= 0) setActiveIndex(next);
|
|
764
|
+
};
|
|
765
|
+
const handleChange = (event) => {
|
|
766
|
+
const nextQuery = event.target.value;
|
|
767
|
+
const nextList = nextQuery ? options.filter((o) => filter(o, nextQuery)) : options;
|
|
768
|
+
setQuery(nextQuery);
|
|
769
|
+
setOpen(true);
|
|
770
|
+
setActiveIndex(firstEnabled(nextList));
|
|
771
|
+
};
|
|
772
|
+
const handleKeyDown = (event) => {
|
|
773
|
+
switch (event.key) {
|
|
774
|
+
case "ArrowDown":
|
|
775
|
+
event.preventDefault();
|
|
776
|
+
if (!open) openList();
|
|
777
|
+
else move(1);
|
|
778
|
+
break;
|
|
779
|
+
case "ArrowUp":
|
|
780
|
+
event.preventDefault();
|
|
781
|
+
if (!open) openList(filtered, true);
|
|
782
|
+
else move(-1);
|
|
783
|
+
break;
|
|
784
|
+
case "Enter":
|
|
785
|
+
if (open) {
|
|
786
|
+
event.preventDefault();
|
|
787
|
+
const option2 = filtered[activeIndex];
|
|
788
|
+
if (option2) select(option2);
|
|
789
|
+
}
|
|
790
|
+
break;
|
|
791
|
+
case "Escape":
|
|
792
|
+
if (open) {
|
|
793
|
+
event.preventDefault();
|
|
794
|
+
close2();
|
|
795
|
+
}
|
|
796
|
+
break;
|
|
797
|
+
case "Tab":
|
|
798
|
+
if (open) close2();
|
|
799
|
+
break;
|
|
800
|
+
}
|
|
801
|
+
};
|
|
802
|
+
(0, import_react12.useEffect)(() => {
|
|
803
|
+
if (!open || activeIndex < 0) return;
|
|
804
|
+
document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
|
|
805
|
+
}, [open, activeIndex]);
|
|
806
|
+
const hasOptions = filtered.length > 0;
|
|
807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
808
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { id: labelId, htmlFor: inputId, className: label, children: [
|
|
809
|
+
label6,
|
|
810
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
811
|
+
] }),
|
|
812
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
|
|
813
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
814
|
+
"div",
|
|
815
|
+
{
|
|
816
|
+
ref: anchorRef,
|
|
817
|
+
className: cx(root5({ size, fullWidth }), className),
|
|
818
|
+
"data-invalid": error || void 0,
|
|
819
|
+
"data-disabled": disabled || void 0,
|
|
820
|
+
children: [
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
822
|
+
"input",
|
|
823
|
+
{
|
|
824
|
+
ref: mergeRefs(ref, inputRef),
|
|
825
|
+
id: inputId,
|
|
826
|
+
type: "text",
|
|
827
|
+
role: "combobox",
|
|
828
|
+
"aria-expanded": open,
|
|
829
|
+
"aria-controls": open && hasOptions ? listId : void 0,
|
|
830
|
+
"aria-autocomplete": "list",
|
|
831
|
+
"aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
|
|
832
|
+
"aria-label": label6 ? void 0 : ariaLabel,
|
|
833
|
+
"aria-invalid": error || void 0,
|
|
834
|
+
"aria-required": required || void 0,
|
|
835
|
+
"aria-describedby": helperId,
|
|
836
|
+
autoComplete: "off",
|
|
837
|
+
placeholder,
|
|
838
|
+
disabled,
|
|
839
|
+
value: inputText,
|
|
840
|
+
onChange: handleChange,
|
|
841
|
+
onKeyDown: handleKeyDown,
|
|
842
|
+
onBlur: () => {
|
|
843
|
+
if (open) close2();
|
|
844
|
+
},
|
|
845
|
+
className: input2
|
|
846
|
+
}
|
|
847
|
+
),
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
849
|
+
"button",
|
|
850
|
+
{
|
|
851
|
+
type: "button",
|
|
852
|
+
tabIndex: -1,
|
|
853
|
+
"aria-label": toggleLabel,
|
|
854
|
+
"aria-expanded": open,
|
|
855
|
+
disabled,
|
|
856
|
+
className: toggle,
|
|
857
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
858
|
+
onClick: () => {
|
|
859
|
+
if (open) close2();
|
|
860
|
+
else openList(options);
|
|
861
|
+
inputRef.current?.focus();
|
|
862
|
+
},
|
|
863
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ChevronDownIcon, { size: 16 })
|
|
864
|
+
}
|
|
865
|
+
)
|
|
866
|
+
]
|
|
867
|
+
}
|
|
868
|
+
) }),
|
|
869
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
870
|
+
Popover.Content,
|
|
871
|
+
{
|
|
872
|
+
role: "presentation",
|
|
873
|
+
align: "start",
|
|
874
|
+
sideOffset: 4,
|
|
875
|
+
collisionPadding: 8,
|
|
876
|
+
className: cx(portal2.className, content4),
|
|
877
|
+
style: portal2.style,
|
|
878
|
+
onOpenAutoFocus: (event) => event.preventDefault(),
|
|
879
|
+
onCloseAutoFocus: (event) => event.preventDefault(),
|
|
880
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
881
|
+
onInteractOutside: (event) => {
|
|
882
|
+
if (anchorRef.current?.contains(event.target)) event.preventDefault();
|
|
883
|
+
},
|
|
884
|
+
children: hasOptions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
885
|
+
"div",
|
|
886
|
+
{
|
|
887
|
+
id: listId,
|
|
888
|
+
role: "listbox",
|
|
889
|
+
"aria-labelledby": label6 ? labelId : void 0,
|
|
890
|
+
"aria-label": label6 ? void 0 : ariaLabel,
|
|
891
|
+
children: filtered.map((option2, index) => {
|
|
892
|
+
const isSelected = option2.value === selectedValue;
|
|
893
|
+
return (
|
|
894
|
+
// aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
|
|
895
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
|
|
896
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
897
|
+
"div",
|
|
898
|
+
{
|
|
899
|
+
id: optionId(index),
|
|
900
|
+
role: "option",
|
|
901
|
+
"aria-selected": isSelected,
|
|
902
|
+
"aria-disabled": option2.disabled || void 0,
|
|
903
|
+
"data-highlighted": index === activeIndex ? "" : void 0,
|
|
904
|
+
"data-state": isSelected ? "checked" : "unchecked",
|
|
905
|
+
"data-disabled": option2.disabled ? "" : void 0,
|
|
906
|
+
className: item3,
|
|
907
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
908
|
+
onMouseMove: () => !option2.disabled && setActiveIndex(index),
|
|
909
|
+
onClick: () => select(option2),
|
|
910
|
+
children: [
|
|
911
|
+
option2.label,
|
|
912
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CheckIcon, { size: 16 }) })
|
|
913
|
+
]
|
|
914
|
+
},
|
|
915
|
+
option2.value
|
|
916
|
+
)
|
|
917
|
+
);
|
|
918
|
+
})
|
|
919
|
+
}
|
|
920
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: empty, role: "status", children: emptyMessage })
|
|
921
|
+
}
|
|
922
|
+
) })
|
|
923
|
+
] }),
|
|
924
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name, value: selectedValue ?? "" }),
|
|
925
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
523
926
|
] });
|
|
524
927
|
});
|
|
525
928
|
|
|
526
929
|
// src/components/Divider/Divider.tsx
|
|
527
|
-
var
|
|
930
|
+
var import_react13 = require("react");
|
|
528
931
|
|
|
529
932
|
// src/components/Divider/Divider.css.ts
|
|
530
|
-
var
|
|
531
|
-
var divider = (0,
|
|
933
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
934
|
+
var divider = /* @__PURE__ */ (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
532
935
|
var labeled = "_1t3gq8v3";
|
|
533
936
|
var line = "_1t3gq8v4";
|
|
534
937
|
|
|
535
938
|
// src/components/Divider/Divider.tsx
|
|
536
|
-
var
|
|
537
|
-
var Divider = /* @__PURE__ */ (0,
|
|
939
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
940
|
+
var Divider = /* @__PURE__ */ (0, import_react13.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
538
941
|
if (children && orientation === "horizontal") {
|
|
539
|
-
return /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
943
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: line, "aria-hidden": true }),
|
|
541
944
|
children,
|
|
542
|
-
/* @__PURE__ */ (0,
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: line, "aria-hidden": true })
|
|
543
946
|
] });
|
|
544
947
|
}
|
|
545
948
|
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
546
|
-
return /* @__PURE__ */ (0,
|
|
949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
950
|
+
});
|
|
951
|
+
|
|
952
|
+
// src/components/Drawer/Drawer.tsx
|
|
953
|
+
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
954
|
+
var import_icons8 = require("@bestow-ui/icons");
|
|
955
|
+
|
|
956
|
+
// src/components/IconButton/IconButton.tsx
|
|
957
|
+
var import_react14 = require("react");
|
|
958
|
+
|
|
959
|
+
// src/components/IconButton/IconButton.css.ts
|
|
960
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
961
|
+
var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn11.createRuntimeFn)({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
962
|
+
|
|
963
|
+
// src/components/IconButton/IconButton.tsx
|
|
964
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
965
|
+
var IconButton = /* @__PURE__ */ (0, import_react14.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading, className, children, ...rest }, ref) {
|
|
966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
967
|
+
Button,
|
|
968
|
+
{
|
|
969
|
+
ref,
|
|
970
|
+
variant,
|
|
971
|
+
color,
|
|
972
|
+
size,
|
|
973
|
+
loading,
|
|
974
|
+
className: cx(iconButton({ size }), className),
|
|
975
|
+
...rest,
|
|
976
|
+
children: !loading && children
|
|
977
|
+
}
|
|
978
|
+
);
|
|
547
979
|
});
|
|
548
980
|
|
|
981
|
+
// src/components/Drawer/Drawer.css.ts
|
|
982
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
983
|
+
var body2 = "nmobyvy";
|
|
984
|
+
var closeButton2 = "nmobyvx";
|
|
985
|
+
var content5 = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "nmobyv9", variantClassNames: { side: { right: "nmobyva", left: "nmobyvb", top: "nmobyvc", bottom: "nmobyvd" }, size: { sm: "nmobyve", md: "nmobyvf", lg: "nmobyvg" } }, defaultVariants: { side: "right", size: "md" }, compoundVariants: [[{ side: "right", size: "sm" }, "nmobyvh"], [{ side: "right", size: "md" }, "nmobyvi"], [{ side: "right", size: "lg" }, "nmobyvj"], [{ side: "left", size: "sm" }, "nmobyvk"], [{ side: "left", size: "md" }, "nmobyvl"], [{ side: "left", size: "lg" }, "nmobyvm"], [{ side: "top", size: "sm" }, "nmobyvn"], [{ side: "top", size: "md" }, "nmobyvo"], [{ side: "top", size: "lg" }, "nmobyvp"], [{ side: "bottom", size: "sm" }, "nmobyvq"], [{ side: "bottom", size: "md" }, "nmobyvr"], [{ side: "bottom", size: "lg" }, "nmobyvs"]] });
|
|
986
|
+
var description2 = "nmobyvw";
|
|
987
|
+
var footer2 = "nmobyvz";
|
|
988
|
+
var header3 = "nmobyvt";
|
|
989
|
+
var headings = "nmobyvu";
|
|
990
|
+
var overlay = "nmobyv0";
|
|
991
|
+
var title2 = "nmobyvv";
|
|
992
|
+
|
|
993
|
+
// src/components/Drawer/Drawer.tsx
|
|
994
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
995
|
+
function Drawer({
|
|
996
|
+
open,
|
|
997
|
+
defaultOpen,
|
|
998
|
+
onOpenChange,
|
|
999
|
+
trigger: trigger4,
|
|
1000
|
+
title: title6,
|
|
1001
|
+
description: description6,
|
|
1002
|
+
children,
|
|
1003
|
+
footer: footer6,
|
|
1004
|
+
side,
|
|
1005
|
+
size,
|
|
1006
|
+
hideCloseButton = false,
|
|
1007
|
+
closeOnOverlayClick = true,
|
|
1008
|
+
className
|
|
1009
|
+
}) {
|
|
1010
|
+
const portal2 = usePortalProps();
|
|
1011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1012
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Trigger, { asChild: true, children: trigger4 }),
|
|
1013
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Portal, { children: [
|
|
1014
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
1015
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1016
|
+
Dialog.Content,
|
|
1017
|
+
{
|
|
1018
|
+
className: cx(portal2.className, content5({ side, size }), className),
|
|
1019
|
+
style: portal2.style,
|
|
1020
|
+
"data-side": side ?? "right",
|
|
1021
|
+
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
1022
|
+
...description6 ? {} : { "aria-describedby": void 0 },
|
|
1023
|
+
children: [
|
|
1024
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: header3, children: [
|
|
1025
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: headings, children: [
|
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: title2, children: title6 }),
|
|
1027
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Description, { className: description2, children: description6 })
|
|
1028
|
+
] }),
|
|
1029
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { "aria-label": "\uB2EB\uAE30", size: "sm", className: closeButton2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.XIcon, {}) }) })
|
|
1030
|
+
] }),
|
|
1031
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: body2, children }),
|
|
1032
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: footer2, children: footer6 })
|
|
1033
|
+
]
|
|
1034
|
+
}
|
|
1035
|
+
)
|
|
1036
|
+
] })
|
|
1037
|
+
] });
|
|
1038
|
+
}
|
|
1039
|
+
var DrawerClose = Dialog.Close;
|
|
1040
|
+
|
|
549
1041
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
550
1042
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
551
|
-
var
|
|
1043
|
+
var import_react15 = require("react");
|
|
552
1044
|
|
|
553
1045
|
// src/components/DropdownMenu/DropdownMenu.css.ts
|
|
554
|
-
var
|
|
1046
|
+
var content6 = "_1d7ahux0";
|
|
555
1047
|
var danger = "_1d7ahux2";
|
|
556
|
-
var
|
|
557
|
-
var
|
|
558
|
-
var
|
|
559
|
-
var
|
|
1048
|
+
var icon5 = "_1d7ahux3";
|
|
1049
|
+
var item4 = "_1d7ahux1";
|
|
1050
|
+
var label2 = "_1d7ahux5";
|
|
1051
|
+
var separator2 = "_1d7ahux6";
|
|
560
1052
|
var shortcut = "_1d7ahux4";
|
|
561
1053
|
|
|
562
1054
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
563
|
-
var
|
|
1055
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
564
1056
|
var DropdownMenu = RadixMenu.Root;
|
|
565
1057
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
566
1058
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
567
|
-
var DropdownMenuContent = /* @__PURE__ */ (0,
|
|
1059
|
+
var DropdownMenuContent = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
568
1060
|
function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
|
|
569
1061
|
const portal2 = usePortalProps();
|
|
570
|
-
return /* @__PURE__ */ (0,
|
|
1062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
571
1063
|
RadixMenu.Content,
|
|
572
1064
|
{
|
|
573
1065
|
ref,
|
|
@@ -575,59 +1067,46 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react10.forwardRef)(
|
|
|
575
1067
|
align,
|
|
576
1068
|
sideOffset,
|
|
577
1069
|
collisionPadding,
|
|
578
|
-
className: cx(portal2.className,
|
|
1070
|
+
className: cx(portal2.className, content6, className),
|
|
579
1071
|
style: { ...portal2.style, ...style },
|
|
580
1072
|
...rest
|
|
581
1073
|
}
|
|
582
1074
|
) });
|
|
583
1075
|
}
|
|
584
1076
|
);
|
|
585
|
-
var DropdownMenuItem = /* @__PURE__ */ (0,
|
|
586
|
-
function DropdownMenuItem2({ icon:
|
|
587
|
-
return /* @__PURE__ */ (0,
|
|
588
|
-
|
|
1077
|
+
var DropdownMenuItem = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
1078
|
+
function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "default", className, children, ...rest }, ref) {
|
|
1079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(RadixMenu.Item, { ref, className: cx(item4, color === "danger" && danger, className), ...rest, children: [
|
|
1080
|
+
icon6 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: icon5, "aria-hidden": true, children: icon6 }),
|
|
589
1081
|
children,
|
|
590
|
-
shortcut2 && /* @__PURE__ */ (0,
|
|
1082
|
+
shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
|
|
591
1083
|
] });
|
|
592
1084
|
}
|
|
593
1085
|
);
|
|
594
|
-
var DropdownMenuLabel = /* @__PURE__ */ (0,
|
|
1086
|
+
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
595
1087
|
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
596
|
-
return /* @__PURE__ */ (0,
|
|
1088
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
|
|
597
1089
|
}
|
|
598
1090
|
);
|
|
599
|
-
var DropdownMenuSeparator = /* @__PURE__ */ (0,
|
|
1091
|
+
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react15.forwardRef)(
|
|
600
1092
|
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
601
|
-
return /* @__PURE__ */ (0,
|
|
1093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
602
1094
|
}
|
|
603
1095
|
);
|
|
604
1096
|
|
|
605
1097
|
// src/components/Input/Input.tsx
|
|
606
|
-
var
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
var adornment = "_19p5zvh6";
|
|
611
|
-
var field = "_19p5zvh7";
|
|
612
|
-
var fieldFullWidth = "_19p5zvh8";
|
|
613
|
-
var helperText = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
614
|
-
var input2 = "_19p5zvh5";
|
|
615
|
-
var label2 = "_19p5zvh9";
|
|
616
|
-
var requiredMark = "_19p5zvha";
|
|
617
|
-
var root5 = (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
618
|
-
|
|
619
|
-
// src/components/Input/Input.tsx
|
|
620
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
621
|
-
var Input = /* @__PURE__ */ (0, import_react11.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
622
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1098
|
+
var import_react16 = require("react");
|
|
1099
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1100
|
+
var Input = /* @__PURE__ */ (0, import_react16.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
1101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
623
1102
|
"div",
|
|
624
1103
|
{
|
|
625
1104
|
className: cx(root5({ size, fullWidth }), rootClassName),
|
|
626
1105
|
"data-invalid": invalid || void 0,
|
|
627
1106
|
"data-disabled": disabled || void 0,
|
|
628
1107
|
children: [
|
|
629
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
630
|
-
/* @__PURE__ */ (0,
|
|
1108
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: adornment, children: startAdornment }),
|
|
1109
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
631
1110
|
"input",
|
|
632
1111
|
{
|
|
633
1112
|
ref,
|
|
@@ -637,25 +1116,25 @@ var Input = /* @__PURE__ */ (0, import_react11.forwardRef)(function Input2({ siz
|
|
|
637
1116
|
...rest
|
|
638
1117
|
}
|
|
639
1118
|
),
|
|
640
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
1119
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: adornment, children: endAdornment })
|
|
641
1120
|
]
|
|
642
1121
|
}
|
|
643
1122
|
);
|
|
644
1123
|
});
|
|
645
1124
|
|
|
646
1125
|
// src/components/Input/TextField.tsx
|
|
647
|
-
var
|
|
648
|
-
var
|
|
649
|
-
var TextField = /* @__PURE__ */ (0,
|
|
650
|
-
const generatedId = (0,
|
|
1126
|
+
var import_react17 = require("react");
|
|
1127
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1128
|
+
var TextField = /* @__PURE__ */ (0, import_react17.forwardRef)(function TextField2({ label: label6, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
1129
|
+
const generatedId = (0, import_react17.useId)();
|
|
651
1130
|
const inputId = id ?? generatedId;
|
|
652
|
-
const helperId =
|
|
653
|
-
return /* @__PURE__ */ (0,
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
required && /* @__PURE__ */ (0,
|
|
1131
|
+
const helperId = helperText3 ? `${inputId}-helper` : void 0;
|
|
1132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
1133
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { htmlFor: inputId, className: label, children: [
|
|
1134
|
+
label6,
|
|
1135
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
657
1136
|
] }),
|
|
658
|
-
/* @__PURE__ */ (0,
|
|
1137
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
659
1138
|
Input,
|
|
660
1139
|
{
|
|
661
1140
|
ref,
|
|
@@ -667,75 +1146,75 @@ var TextField = /* @__PURE__ */ (0, import_react12.forwardRef)(function TextFiel
|
|
|
667
1146
|
...rest
|
|
668
1147
|
}
|
|
669
1148
|
),
|
|
670
|
-
|
|
1149
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
671
1150
|
] });
|
|
672
1151
|
});
|
|
673
1152
|
|
|
674
1153
|
// src/components/Modal/Modal.tsx
|
|
675
|
-
var
|
|
676
|
-
var
|
|
1154
|
+
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
1155
|
+
var import_icons9 = require("@bestow-ui/icons");
|
|
677
1156
|
|
|
678
1157
|
// src/components/Modal/Modal.css.ts
|
|
679
|
-
var
|
|
680
|
-
var
|
|
681
|
-
var
|
|
682
|
-
var
|
|
683
|
-
var
|
|
684
|
-
var
|
|
685
|
-
var
|
|
686
|
-
var
|
|
687
|
-
var
|
|
688
|
-
var
|
|
1158
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1159
|
+
var body3 = "_1pdsmv0a";
|
|
1160
|
+
var closeButton3 = "_1pdsmv09";
|
|
1161
|
+
var content7 = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1162
|
+
var description3 = "_1pdsmv08";
|
|
1163
|
+
var footer3 = "_1pdsmv0b";
|
|
1164
|
+
var header4 = "_1pdsmv05";
|
|
1165
|
+
var headings2 = "_1pdsmv06";
|
|
1166
|
+
var overlay2 = "_1pdsmv00";
|
|
1167
|
+
var title3 = "_1pdsmv07";
|
|
689
1168
|
|
|
690
1169
|
// src/components/Modal/Modal.tsx
|
|
691
|
-
var
|
|
1170
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
692
1171
|
function Modal({
|
|
693
1172
|
open,
|
|
694
1173
|
defaultOpen,
|
|
695
1174
|
onOpenChange,
|
|
696
1175
|
trigger: trigger4,
|
|
697
|
-
title:
|
|
698
|
-
description:
|
|
1176
|
+
title: title6,
|
|
1177
|
+
description: description6,
|
|
699
1178
|
children,
|
|
700
|
-
footer:
|
|
1179
|
+
footer: footer6,
|
|
701
1180
|
size,
|
|
702
1181
|
hideCloseButton = false,
|
|
703
1182
|
closeOnOverlayClick = true,
|
|
704
1183
|
className
|
|
705
1184
|
}) {
|
|
706
1185
|
const portal2 = usePortalProps();
|
|
707
|
-
return /* @__PURE__ */ (0,
|
|
708
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
/* @__PURE__ */ (0,
|
|
711
|
-
/* @__PURE__ */ (0,
|
|
712
|
-
|
|
1186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1187
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
|
|
1188
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog2.Portal, { children: [
|
|
1189
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
|
|
1190
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1191
|
+
Dialog2.Content,
|
|
713
1192
|
{
|
|
714
|
-
className: cx(portal2.className,
|
|
1193
|
+
className: cx(portal2.className, content7({ size }), className),
|
|
715
1194
|
style: portal2.style,
|
|
716
1195
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
717
|
-
...
|
|
1196
|
+
...description6 ? {} : { "aria-describedby": void 0 },
|
|
718
1197
|
children: [
|
|
719
|
-
/* @__PURE__ */ (0,
|
|
720
|
-
/* @__PURE__ */ (0,
|
|
721
|
-
/* @__PURE__ */ (0,
|
|
722
|
-
|
|
1198
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: header4, children: [
|
|
1199
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: headings2, children: [
|
|
1200
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Title, { className: title3, children: title6 }),
|
|
1201
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Description, { className: description3, children: description6 })
|
|
723
1202
|
] }),
|
|
724
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
1203
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Close, { className: closeButton3, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.XIcon, { size: 16 }) })
|
|
725
1204
|
] }),
|
|
726
|
-
children && /* @__PURE__ */ (0,
|
|
727
|
-
|
|
1205
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: body3, children }),
|
|
1206
|
+
footer6 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: footer3, children: footer6 })
|
|
728
1207
|
]
|
|
729
1208
|
}
|
|
730
1209
|
)
|
|
731
1210
|
] })
|
|
732
1211
|
] });
|
|
733
1212
|
}
|
|
734
|
-
var ModalClose =
|
|
1213
|
+
var ModalClose = Dialog2.Close;
|
|
735
1214
|
|
|
736
1215
|
// src/components/Pagination/Pagination.tsx
|
|
737
|
-
var
|
|
738
|
-
var
|
|
1216
|
+
var import_icons10 = require("@bestow-ui/icons");
|
|
1217
|
+
var import_react18 = require("react");
|
|
739
1218
|
|
|
740
1219
|
// src/components/Pagination/getPaginationItems.ts
|
|
741
1220
|
var range = (start, end) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
@@ -762,15 +1241,15 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
|
|
|
762
1241
|
}
|
|
763
1242
|
|
|
764
1243
|
// src/components/Pagination/Pagination.css.ts
|
|
765
|
-
var
|
|
1244
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
766
1245
|
var ellipsis = "_1iraoak4";
|
|
767
|
-
var
|
|
768
|
-
var
|
|
1246
|
+
var item5 = /* @__PURE__ */ (0, import_createRuntimeFn14.createRuntimeFn)({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1247
|
+
var list2 = "_1iraoak0";
|
|
769
1248
|
|
|
770
1249
|
// src/components/Pagination/Pagination.tsx
|
|
771
|
-
var
|
|
1250
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
772
1251
|
var defaultItemLabel = (type, page) => type === "previous" ? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? "\uB2E4\uC74C \uD398\uC774\uC9C0" : `${page} \uD398\uC774\uC9C0`;
|
|
773
|
-
var Pagination = /* @__PURE__ */ (0,
|
|
1252
|
+
var Pagination = /* @__PURE__ */ (0, import_react18.forwardRef)(function Pagination2({
|
|
774
1253
|
totalPages,
|
|
775
1254
|
page: pageProp,
|
|
776
1255
|
defaultPage = 1,
|
|
@@ -783,7 +1262,7 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
783
1262
|
"aria-label": ariaLabel = "\uD398\uC774\uC9C0 \uD0D0\uC0C9",
|
|
784
1263
|
...rest
|
|
785
1264
|
}, ref) {
|
|
786
|
-
const [uncontrolledPage, setUncontrolledPage] = (0,
|
|
1265
|
+
const [uncontrolledPage, setUncontrolledPage] = (0, import_react18.useState)(defaultPage);
|
|
787
1266
|
if (totalPages < 1) return null;
|
|
788
1267
|
const page = Math.min(Math.max(pageProp ?? uncontrolledPage, 1), totalPages);
|
|
789
1268
|
const goTo = (next) => {
|
|
@@ -791,9 +1270,9 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
791
1270
|
if (pageProp === void 0) setUncontrolledPage(next);
|
|
792
1271
|
onPageChange?.(next);
|
|
793
1272
|
};
|
|
794
|
-
const itemClass =
|
|
795
|
-
return /* @__PURE__ */ (0,
|
|
796
|
-
/* @__PURE__ */ (0,
|
|
1273
|
+
const itemClass = item5({ size });
|
|
1274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { className: list2, children: [
|
|
1275
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
797
1276
|
"button",
|
|
798
1277
|
{
|
|
799
1278
|
type: "button",
|
|
@@ -801,23 +1280,23 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
801
1280
|
"aria-label": getItemLabel("previous", page - 1),
|
|
802
1281
|
disabled: page <= 1,
|
|
803
1282
|
onClick: () => goTo(page - 1),
|
|
804
|
-
children: /* @__PURE__ */ (0,
|
|
1283
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.ChevronLeftIcon, { size: 16 })
|
|
805
1284
|
}
|
|
806
1285
|
) }),
|
|
807
1286
|
getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
|
|
808
|
-
(
|
|
1287
|
+
(item6) => typeof item6 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
809
1288
|
"button",
|
|
810
1289
|
{
|
|
811
1290
|
type: "button",
|
|
812
1291
|
className: itemClass,
|
|
813
|
-
"aria-label": getItemLabel("page",
|
|
814
|
-
"aria-current":
|
|
815
|
-
onClick: () => goTo(
|
|
816
|
-
children:
|
|
1292
|
+
"aria-label": getItemLabel("page", item6),
|
|
1293
|
+
"aria-current": item6 === page ? "page" : void 0,
|
|
1294
|
+
onClick: () => goTo(item6),
|
|
1295
|
+
children: item6
|
|
817
1296
|
}
|
|
818
|
-
) },
|
|
1297
|
+
) }, item6) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item6)
|
|
819
1298
|
),
|
|
820
|
-
/* @__PURE__ */ (0,
|
|
1299
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
821
1300
|
"button",
|
|
822
1301
|
{
|
|
823
1302
|
type: "button",
|
|
@@ -825,7 +1304,7 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
825
1304
|
"aria-label": getItemLabel("next", page + 1),
|
|
826
1305
|
disabled: page >= totalPages,
|
|
827
1306
|
onClick: () => goTo(page + 1),
|
|
828
|
-
children: /* @__PURE__ */ (0,
|
|
1307
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.ChevronRightIcon, { size: 16 })
|
|
829
1308
|
}
|
|
830
1309
|
) })
|
|
831
1310
|
] }) });
|
|
@@ -833,22 +1312,22 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
833
1312
|
|
|
834
1313
|
// src/components/Popover/Popover.tsx
|
|
835
1314
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
836
|
-
var
|
|
837
|
-
var
|
|
1315
|
+
var import_icons11 = require("@bestow-ui/icons");
|
|
1316
|
+
var import_react19 = require("react");
|
|
838
1317
|
|
|
839
1318
|
// src/components/Popover/Popover.css.ts
|
|
840
1319
|
var arrow = "_1j99p8x4";
|
|
841
|
-
var
|
|
842
|
-
var
|
|
843
|
-
var
|
|
844
|
-
var
|
|
1320
|
+
var closeButton4 = "_1j99p8x3";
|
|
1321
|
+
var content8 = "_1j99p8x0";
|
|
1322
|
+
var header5 = "_1j99p8x1";
|
|
1323
|
+
var title4 = "_1j99p8x2";
|
|
845
1324
|
|
|
846
1325
|
// src/components/Popover/Popover.tsx
|
|
847
|
-
var
|
|
848
|
-
function
|
|
849
|
-
content:
|
|
1326
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1327
|
+
function Popover2({
|
|
1328
|
+
content: content11,
|
|
850
1329
|
children,
|
|
851
|
-
title:
|
|
1330
|
+
title: title6,
|
|
852
1331
|
"aria-label": ariaLabel,
|
|
853
1332
|
showClose = false,
|
|
854
1333
|
showArrow = false,
|
|
@@ -862,27 +1341,27 @@ function Popover({
|
|
|
862
1341
|
style
|
|
863
1342
|
}) {
|
|
864
1343
|
const portal2 = usePortalProps();
|
|
865
|
-
const titleId = (0,
|
|
866
|
-
return /* @__PURE__ */ (0,
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
1344
|
+
const titleId = (0, import_react19.useId)();
|
|
1345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixPopover.Trigger, { asChild: true, children }),
|
|
1347
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
869
1348
|
RadixPopover.Content,
|
|
870
1349
|
{
|
|
871
1350
|
side,
|
|
872
1351
|
align,
|
|
873
1352
|
sideOffset: 6,
|
|
874
1353
|
collisionPadding: 8,
|
|
875
|
-
"aria-labelledby":
|
|
876
|
-
"aria-label":
|
|
877
|
-
className: cx(portal2.className,
|
|
1354
|
+
"aria-labelledby": title6 ? titleId : void 0,
|
|
1355
|
+
"aria-label": title6 ? void 0 : ariaLabel,
|
|
1356
|
+
className: cx(portal2.className, content8, className),
|
|
878
1357
|
style: { ...portal2.style, ...style },
|
|
879
1358
|
children: [
|
|
880
|
-
(
|
|
881
|
-
|
|
882
|
-
showClose && /* @__PURE__ */ (0,
|
|
1359
|
+
(title6 || showClose) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: header5, children: [
|
|
1360
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: titleId, className: title4, children: title6 }),
|
|
1361
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixPopover.Close, { className: closeButton4, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.XIcon, { size: 16 }) })
|
|
883
1362
|
] }),
|
|
884
|
-
|
|
885
|
-
showArrow && /* @__PURE__ */ (0,
|
|
1363
|
+
content11,
|
|
1364
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
|
|
886
1365
|
]
|
|
887
1366
|
}
|
|
888
1367
|
) })
|
|
@@ -890,31 +1369,92 @@ function Popover({
|
|
|
890
1369
|
}
|
|
891
1370
|
var PopoverClose = RadixPopover.Close;
|
|
892
1371
|
|
|
1372
|
+
// src/components/Progress/Progress.tsx
|
|
1373
|
+
var import_react20 = require("react");
|
|
1374
|
+
|
|
1375
|
+
// src/components/Progress/Progress.css.ts
|
|
1376
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1377
|
+
var header6 = "_1tvkq001";
|
|
1378
|
+
var indicator = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
|
|
1379
|
+
var label3 = "_1tvkq002";
|
|
1380
|
+
var root6 = "_1tvkq000";
|
|
1381
|
+
var track = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1382
|
+
var value2 = "_1tvkq003";
|
|
1383
|
+
|
|
1384
|
+
// src/components/Progress/Progress.tsx
|
|
1385
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1386
|
+
var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
|
|
1387
|
+
var Progress = /* @__PURE__ */ (0, import_react20.forwardRef)(function Progress2({
|
|
1388
|
+
value: value4,
|
|
1389
|
+
max = 100,
|
|
1390
|
+
label: label6,
|
|
1391
|
+
"aria-label": ariaLabel,
|
|
1392
|
+
showValue,
|
|
1393
|
+
formatValue = defaultFormat,
|
|
1394
|
+
size,
|
|
1395
|
+
color,
|
|
1396
|
+
className,
|
|
1397
|
+
...rest
|
|
1398
|
+
}, ref) {
|
|
1399
|
+
const labelId = (0, import_react20.useId)();
|
|
1400
|
+
const isIndeterminate = value4 === void 0 || value4 === null;
|
|
1401
|
+
const safeMax = max > 0 ? max : 100;
|
|
1402
|
+
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
|
|
1403
|
+
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
1404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref, className: cx(root6, className), ...rest, children: [
|
|
1405
|
+
(label6 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: header6, children: [
|
|
1406
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: labelId, className: label3, children: label6 }),
|
|
1407
|
+
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: value2, "aria-hidden": true, children: valueText })
|
|
1408
|
+
] }),
|
|
1409
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1410
|
+
"div",
|
|
1411
|
+
{
|
|
1412
|
+
role: "progressbar",
|
|
1413
|
+
"aria-labelledby": label6 ? labelId : void 0,
|
|
1414
|
+
"aria-label": label6 ? void 0 : ariaLabel,
|
|
1415
|
+
"aria-valuemin": 0,
|
|
1416
|
+
"aria-valuemax": safeMax,
|
|
1417
|
+
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
1418
|
+
"aria-valuetext": valueText,
|
|
1419
|
+
className: track({ size }),
|
|
1420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1421
|
+
"div",
|
|
1422
|
+
{
|
|
1423
|
+
className: indicator({ color }),
|
|
1424
|
+
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
1425
|
+
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
1426
|
+
}
|
|
1427
|
+
)
|
|
1428
|
+
}
|
|
1429
|
+
)
|
|
1430
|
+
] });
|
|
1431
|
+
});
|
|
1432
|
+
|
|
893
1433
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
894
1434
|
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
895
|
-
var
|
|
1435
|
+
var import_react21 = require("react");
|
|
896
1436
|
|
|
897
1437
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
898
|
-
var
|
|
899
|
-
var
|
|
1438
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1439
|
+
var description4 = "_1w9iwjmd";
|
|
900
1440
|
var groupLabel = "_1w9iwjme";
|
|
901
|
-
var
|
|
902
|
-
var items = (0,
|
|
1441
|
+
var indicator2 = "_1w9iwjma";
|
|
1442
|
+
var items = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
903
1443
|
var labelText = "_1w9iwjmc";
|
|
904
|
-
var option = (0,
|
|
905
|
-
var radio = (0,
|
|
1444
|
+
var option = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1445
|
+
var radio = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
906
1446
|
var text = "_1w9iwjmb";
|
|
907
1447
|
|
|
908
1448
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
909
|
-
var
|
|
910
|
-
var RadioGroup = /* @__PURE__ */ (0,
|
|
1449
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1450
|
+
var RadioGroup = /* @__PURE__ */ (0, import_react21.forwardRef)(function RadioGroup2(props, ref) {
|
|
911
1451
|
const {
|
|
912
1452
|
options,
|
|
913
|
-
value:
|
|
1453
|
+
value: value4,
|
|
914
1454
|
defaultValue,
|
|
915
1455
|
onValueChange,
|
|
916
|
-
label:
|
|
917
|
-
helperText:
|
|
1456
|
+
label: label6,
|
|
1457
|
+
helperText: helperText3,
|
|
918
1458
|
error,
|
|
919
1459
|
orientation = "vertical",
|
|
920
1460
|
size,
|
|
@@ -926,21 +1466,21 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
926
1466
|
className
|
|
927
1467
|
} = props;
|
|
928
1468
|
const isControlled = "value" in props;
|
|
929
|
-
const generatedId = (0,
|
|
1469
|
+
const generatedId = (0, import_react21.useId)();
|
|
930
1470
|
const baseId = id ?? generatedId;
|
|
931
|
-
const labelId =
|
|
932
|
-
const helperId =
|
|
933
|
-
return /* @__PURE__ */ (0,
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
required && /* @__PURE__ */ (0,
|
|
1471
|
+
const labelId = label6 ? `${baseId}-label` : void 0;
|
|
1472
|
+
const helperId = helperText3 ? `${baseId}-helper` : void 0;
|
|
1473
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx(field, className), children: [
|
|
1474
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { id: labelId, className: cx(label, groupLabel), children: [
|
|
1475
|
+
label6,
|
|
1476
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
937
1477
|
] }),
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
939
1479
|
RadixRadioGroup.Root,
|
|
940
1480
|
{
|
|
941
1481
|
ref,
|
|
942
1482
|
id: baseId,
|
|
943
|
-
value: isControlled ?
|
|
1483
|
+
value: isControlled ? value4 ?? "" : void 0,
|
|
944
1484
|
defaultValue,
|
|
945
1485
|
onValueChange,
|
|
946
1486
|
orientation,
|
|
@@ -956,8 +1496,8 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
956
1496
|
const itemId = `${baseId}-${option2.value}`;
|
|
957
1497
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
958
1498
|
const itemDisabled = disabled || option2.disabled;
|
|
959
|
-
return /* @__PURE__ */ (0,
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
1499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
961
1501
|
RadixRadioGroup.Item,
|
|
962
1502
|
{
|
|
963
1503
|
id: itemId,
|
|
@@ -965,46 +1505,35 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
965
1505
|
disabled: option2.disabled,
|
|
966
1506
|
"aria-describedby": descriptionId,
|
|
967
1507
|
className: radio({ size }),
|
|
968
|
-
children: /* @__PURE__ */ (0,
|
|
1508
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixRadioGroup.Indicator, { className: indicator2 })
|
|
969
1509
|
}
|
|
970
1510
|
),
|
|
971
|
-
/* @__PURE__ */ (0,
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
973
|
-
option2.description && /* @__PURE__ */ (0,
|
|
1511
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: text, children: [
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
1513
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: descriptionId, className: description4, children: option2.description })
|
|
974
1514
|
] })
|
|
975
1515
|
] }, option2.value);
|
|
976
1516
|
})
|
|
977
1517
|
}
|
|
978
1518
|
),
|
|
979
|
-
|
|
1519
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
980
1520
|
] });
|
|
981
1521
|
});
|
|
982
1522
|
|
|
983
1523
|
// src/components/Select/Select.tsx
|
|
984
1524
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
985
|
-
var
|
|
986
|
-
var
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
var content5 = "_1kx81e83";
|
|
990
|
-
var icon4 = "_1kx81e82";
|
|
991
|
-
var item4 = "_1kx81e85";
|
|
992
|
-
var itemIndicator = "_1kx81e86";
|
|
993
|
-
var trigger2 = "_1kx81e80";
|
|
994
|
-
var value = "_1kx81e81";
|
|
995
|
-
var viewport = "_1kx81e84";
|
|
996
|
-
|
|
997
|
-
// src/components/Select/Select.tsx
|
|
998
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
999
|
-
var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(props, ref) {
|
|
1525
|
+
var import_react22 = require("react");
|
|
1526
|
+
var import_icons12 = require("@bestow-ui/icons");
|
|
1527
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1528
|
+
var Select = /* @__PURE__ */ (0, import_react22.forwardRef)(function Select2(props, ref) {
|
|
1000
1529
|
const {
|
|
1001
1530
|
options,
|
|
1002
|
-
value:
|
|
1531
|
+
value: value4,
|
|
1003
1532
|
defaultValue,
|
|
1004
1533
|
onValueChange,
|
|
1005
1534
|
placeholder,
|
|
1006
|
-
label:
|
|
1007
|
-
helperText:
|
|
1535
|
+
label: label6,
|
|
1536
|
+
helperText: helperText3,
|
|
1008
1537
|
error,
|
|
1009
1538
|
size,
|
|
1010
1539
|
fullWidth,
|
|
@@ -1016,26 +1545,26 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1016
1545
|
className
|
|
1017
1546
|
} = props;
|
|
1018
1547
|
const isControlled = "value" in props;
|
|
1019
|
-
const generatedId = (0,
|
|
1548
|
+
const generatedId = (0, import_react22.useId)();
|
|
1020
1549
|
const triggerId = id ?? generatedId;
|
|
1021
|
-
const helperId =
|
|
1550
|
+
const helperId = helperText3 ? `${triggerId}-helper` : void 0;
|
|
1022
1551
|
const portal2 = usePortalProps();
|
|
1023
|
-
return /* @__PURE__ */ (0,
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
required && /* @__PURE__ */ (0,
|
|
1552
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
1553
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: triggerId, className: label, children: [
|
|
1554
|
+
label6,
|
|
1555
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1027
1556
|
] }),
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1557
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1029
1558
|
RadixSelect.Root,
|
|
1030
1559
|
{
|
|
1031
|
-
value: isControlled ?
|
|
1560
|
+
value: isControlled ? value4 ?? "" : void 0,
|
|
1032
1561
|
defaultValue,
|
|
1033
1562
|
onValueChange,
|
|
1034
1563
|
disabled,
|
|
1035
1564
|
required,
|
|
1036
1565
|
name,
|
|
1037
1566
|
children: [
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1567
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1039
1568
|
RadixSelect.Trigger,
|
|
1040
1569
|
{
|
|
1041
1570
|
ref,
|
|
@@ -1046,28 +1575,28 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1046
1575
|
"data-invalid": error || void 0,
|
|
1047
1576
|
className: cx(root5({ size, fullWidth }), trigger2, className),
|
|
1048
1577
|
children: [
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
1579
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons12.ChevronDownIcon, { size: 16 }) })
|
|
1051
1580
|
]
|
|
1052
1581
|
}
|
|
1053
1582
|
),
|
|
1054
|
-
/* @__PURE__ */ (0,
|
|
1583
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1055
1584
|
RadixSelect.Content,
|
|
1056
1585
|
{
|
|
1057
1586
|
position: "popper",
|
|
1058
1587
|
sideOffset: 4,
|
|
1059
1588
|
collisionPadding: 8,
|
|
1060
|
-
className: cx(portal2.className,
|
|
1589
|
+
className: cx(portal2.className, content3),
|
|
1061
1590
|
style: portal2.style,
|
|
1062
|
-
children: /* @__PURE__ */ (0,
|
|
1591
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1063
1592
|
RadixSelect.Item,
|
|
1064
1593
|
{
|
|
1065
1594
|
value: option2.value,
|
|
1066
1595
|
disabled: option2.disabled,
|
|
1067
|
-
className:
|
|
1596
|
+
className: item3,
|
|
1068
1597
|
children: [
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
1599
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons12.CheckIcon, { size: 16 }) })
|
|
1071
1600
|
]
|
|
1072
1601
|
},
|
|
1073
1602
|
option2.value
|
|
@@ -1077,29 +1606,29 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1077
1606
|
]
|
|
1078
1607
|
}
|
|
1079
1608
|
),
|
|
1080
|
-
|
|
1609
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 })
|
|
1081
1610
|
] });
|
|
1082
1611
|
});
|
|
1083
1612
|
|
|
1084
1613
|
// src/components/Skeleton/Skeleton.tsx
|
|
1085
1614
|
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
1086
|
-
var
|
|
1615
|
+
var import_react23 = require("react");
|
|
1087
1616
|
|
|
1088
1617
|
// src/components/Skeleton/Skeleton.css.ts
|
|
1089
|
-
var
|
|
1618
|
+
var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1090
1619
|
var height = "var(--_1s8datd1)";
|
|
1091
1620
|
var lines = "_1s8datd6";
|
|
1092
|
-
var skeleton = (0,
|
|
1621
|
+
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn17.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
1093
1622
|
var width = "var(--_1s8datd0)";
|
|
1094
1623
|
|
|
1095
1624
|
// src/components/Skeleton/Skeleton.tsx
|
|
1096
|
-
var
|
|
1097
|
-
var toCss = (
|
|
1098
|
-
var Skeleton = /* @__PURE__ */ (0,
|
|
1625
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1626
|
+
var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
|
|
1627
|
+
var Skeleton = /* @__PURE__ */ (0, import_react23.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
1099
1628
|
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
1100
1629
|
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
1101
1630
|
if (variant === "text" && lines2 > 1) {
|
|
1102
|
-
return /* @__PURE__ */ (0,
|
|
1631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1103
1632
|
"span",
|
|
1104
1633
|
{
|
|
1105
1634
|
ref,
|
|
@@ -1107,7 +1636,7 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1107
1636
|
className: cx(lines, className),
|
|
1108
1637
|
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
1109
1638
|
...rest,
|
|
1110
|
-
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0,
|
|
1639
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1111
1640
|
"span",
|
|
1112
1641
|
{
|
|
1113
1642
|
className: skeleton({ variant }),
|
|
@@ -1118,7 +1647,7 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1118
1647
|
}
|
|
1119
1648
|
);
|
|
1120
1649
|
}
|
|
1121
|
-
return /* @__PURE__ */ (0,
|
|
1650
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1122
1651
|
"span",
|
|
1123
1652
|
{
|
|
1124
1653
|
ref,
|
|
@@ -1130,98 +1659,311 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1130
1659
|
);
|
|
1131
1660
|
});
|
|
1132
1661
|
|
|
1662
|
+
// src/components/Slider/Slider.tsx
|
|
1663
|
+
var RadixSlider = __toESM(require("@radix-ui/react-slider"), 1);
|
|
1664
|
+
var import_react24 = require("react");
|
|
1665
|
+
|
|
1666
|
+
// src/components/Slider/Slider.css.ts
|
|
1667
|
+
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1668
|
+
var field2 = "_126mzjm0";
|
|
1669
|
+
var header7 = "_126mzjm1";
|
|
1670
|
+
var helperText2 = "_126mzjm4";
|
|
1671
|
+
var label4 = "_126mzjm2";
|
|
1672
|
+
var range2 = "_126mzjmb";
|
|
1673
|
+
var root7 = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1674
|
+
var thumb = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1675
|
+
var track2 = /* @__PURE__ */ (0, import_createRuntimeFn18.createRuntimeFn)({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1676
|
+
var value3 = "_126mzjm3";
|
|
1677
|
+
|
|
1678
|
+
// src/components/Slider/Slider.tsx
|
|
1679
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1680
|
+
var Slider = /* @__PURE__ */ (0, import_react24.forwardRef)(function Slider2(props, ref) {
|
|
1681
|
+
const {
|
|
1682
|
+
value: value4,
|
|
1683
|
+
defaultValue,
|
|
1684
|
+
onValueChange,
|
|
1685
|
+
min = 0,
|
|
1686
|
+
max = 100,
|
|
1687
|
+
label: label6,
|
|
1688
|
+
"aria-label": ariaLabel,
|
|
1689
|
+
helperText: helperText3,
|
|
1690
|
+
showValue,
|
|
1691
|
+
formatValue = String,
|
|
1692
|
+
thumbLabels = ["\uCD5C\uC18C", "\uCD5C\uB300"],
|
|
1693
|
+
size,
|
|
1694
|
+
id,
|
|
1695
|
+
className,
|
|
1696
|
+
disabled,
|
|
1697
|
+
...rest
|
|
1698
|
+
} = props;
|
|
1699
|
+
const generatedId = (0, import_react24.useId)();
|
|
1700
|
+
const baseId = id ?? generatedId;
|
|
1701
|
+
const labelId = `${baseId}-label`;
|
|
1702
|
+
const helperId = `${baseId}-helper`;
|
|
1703
|
+
const isControlled = "value" in props;
|
|
1704
|
+
const [innerValue, setInnerValue] = (0, import_react24.useState)(defaultValue ?? [min]);
|
|
1705
|
+
const current2 = isControlled ? value4 ?? [min] : innerValue;
|
|
1706
|
+
const isRange = current2.length > 1;
|
|
1707
|
+
const handleChange = (next) => {
|
|
1708
|
+
if (!isControlled) setInnerValue(next);
|
|
1709
|
+
onValueChange?.(next);
|
|
1710
|
+
};
|
|
1711
|
+
const valueText = current2.map(formatValue).join(" \u2013 ");
|
|
1712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cx(field2, className), children: [
|
|
1713
|
+
(label6 || showValue) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: header7, children: [
|
|
1714
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: labelId, className: label4, children: label6 }),
|
|
1715
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: value3, "aria-hidden": true, children: valueText })
|
|
1716
|
+
] }),
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1718
|
+
RadixSlider.Root,
|
|
1719
|
+
{
|
|
1720
|
+
ref,
|
|
1721
|
+
id: baseId,
|
|
1722
|
+
min,
|
|
1723
|
+
max,
|
|
1724
|
+
disabled,
|
|
1725
|
+
value: current2,
|
|
1726
|
+
onValueChange: handleChange,
|
|
1727
|
+
className: root7({ size }),
|
|
1728
|
+
...rest,
|
|
1729
|
+
children: [
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadixSlider.Range, { className: range2 }) }),
|
|
1731
|
+
current2.map((thumbValue, index) => {
|
|
1732
|
+
const thumbLabelId = `${baseId}-thumb-${index}`;
|
|
1733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1734
|
+
RadixSlider.Thumb,
|
|
1735
|
+
{
|
|
1736
|
+
className: thumb({ size }),
|
|
1737
|
+
"aria-labelledby": label6 ? isRange ? `${labelId} ${thumbLabelId}` : labelId : isRange ? thumbLabelId : void 0,
|
|
1738
|
+
"aria-label": label6 ? void 0 : isRange ? void 0 : ariaLabel,
|
|
1739
|
+
"aria-valuetext": formatValue(thumbValue),
|
|
1740
|
+
"aria-describedby": helperText3 ? helperId : void 0
|
|
1741
|
+
},
|
|
1742
|
+
index
|
|
1743
|
+
);
|
|
1744
|
+
})
|
|
1745
|
+
]
|
|
1746
|
+
}
|
|
1747
|
+
),
|
|
1748
|
+
isRange && current2.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
|
|
1749
|
+
label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
|
|
1750
|
+
thumbLabels[index] ?? `${index + 1}`
|
|
1751
|
+
] }, index)),
|
|
1752
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: helperId, className: helperText2, children: helperText3 })
|
|
1753
|
+
] });
|
|
1754
|
+
});
|
|
1755
|
+
|
|
1133
1756
|
// src/components/Stack/Stack.tsx
|
|
1134
|
-
var
|
|
1757
|
+
var import_react25 = require("react");
|
|
1135
1758
|
|
|
1136
1759
|
// src/components/Stack/Stack.css.ts
|
|
1137
|
-
var
|
|
1138
|
-
var stack = (0,
|
|
1760
|
+
var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1761
|
+
var stack = /* @__PURE__ */ (0, import_createRuntimeFn19.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: [] });
|
|
1139
1762
|
|
|
1140
1763
|
// src/components/Stack/Stack.tsx
|
|
1141
|
-
var
|
|
1142
|
-
var Stack = /* @__PURE__ */ (0,
|
|
1143
|
-
return /* @__PURE__ */ (0,
|
|
1764
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1765
|
+
var Stack = /* @__PURE__ */ (0, import_react25.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
1766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
|
|
1144
1767
|
});
|
|
1145
1768
|
|
|
1146
1769
|
// src/components/Switch/Switch.tsx
|
|
1147
1770
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1148
|
-
var
|
|
1771
|
+
var import_react26 = require("react");
|
|
1149
1772
|
|
|
1150
1773
|
// src/components/Switch/Switch.css.ts
|
|
1151
|
-
var
|
|
1152
|
-
var
|
|
1153
|
-
var
|
|
1154
|
-
var
|
|
1155
|
-
var
|
|
1774
|
+
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1775
|
+
var label5 = "o33ul29";
|
|
1776
|
+
var root8 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1777
|
+
var thumb2 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1778
|
+
var track3 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1156
1779
|
|
|
1157
1780
|
// src/components/Switch/Switch.tsx
|
|
1158
|
-
var
|
|
1159
|
-
var Switch = /* @__PURE__ */ (0,
|
|
1160
|
-
const generatedId = (0,
|
|
1781
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1782
|
+
var Switch = /* @__PURE__ */ (0, import_react26.forwardRef)(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
1783
|
+
const generatedId = (0, import_react26.useId)();
|
|
1161
1784
|
const switchId = id ?? generatedId;
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
-
/* @__PURE__ */ (0,
|
|
1785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: cx(root8({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
1786
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1164
1787
|
RadixSwitch.Root,
|
|
1165
1788
|
{
|
|
1166
1789
|
ref,
|
|
1167
1790
|
id: switchId,
|
|
1168
1791
|
disabled,
|
|
1169
1792
|
"aria-label": ariaLabel,
|
|
1170
|
-
className:
|
|
1793
|
+
className: track3({ size }),
|
|
1171
1794
|
...rest,
|
|
1172
|
-
children: /* @__PURE__ */ (0,
|
|
1795
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixSwitch.Thumb, { className: thumb2({ size }) })
|
|
1173
1796
|
}
|
|
1174
1797
|
),
|
|
1175
|
-
|
|
1798
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: switchId, className: label5, children: label6 })
|
|
1176
1799
|
] });
|
|
1177
1800
|
});
|
|
1178
1801
|
|
|
1802
|
+
// src/components/Table/Table.tsx
|
|
1803
|
+
var import_react27 = require("react");
|
|
1804
|
+
var import_icons13 = require("@bestow-ui/icons");
|
|
1805
|
+
|
|
1806
|
+
// src/components/Table/Table.css.ts
|
|
1807
|
+
var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1808
|
+
var body4 = "l3ploy5";
|
|
1809
|
+
var caption = "l3ploy2";
|
|
1810
|
+
var cell = /* @__PURE__ */ (0, import_createRuntimeFn21.createRuntimeFn)({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
|
|
1811
|
+
var container = "l3ploy0";
|
|
1812
|
+
var footer4 = "l3ploy7";
|
|
1813
|
+
var footerCell = "l3ployg";
|
|
1814
|
+
var head = "l3ployf";
|
|
1815
|
+
var header8 = "l3ploy3";
|
|
1816
|
+
var row = "l3ploy8";
|
|
1817
|
+
var sortButton = "l3ployh";
|
|
1818
|
+
var sortIcon = "l3ployi";
|
|
1819
|
+
var stickyHeader = "l3ploy4";
|
|
1820
|
+
var striped = "l3ploy6";
|
|
1821
|
+
var table = "l3ploy1";
|
|
1822
|
+
|
|
1823
|
+
// src/components/Table/Table.tsx
|
|
1824
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1825
|
+
var TableSizeContext = /* @__PURE__ */ (0, import_react27.createContext)("md");
|
|
1826
|
+
var TableSectionContext = /* @__PURE__ */ (0, import_react27.createContext)("body");
|
|
1827
|
+
var Table = /* @__PURE__ */ (0, import_react27.forwardRef)(function Table2({
|
|
1828
|
+
size = "md",
|
|
1829
|
+
striped: striped2,
|
|
1830
|
+
stickyHeader: stickyHeader2,
|
|
1831
|
+
caption: caption2,
|
|
1832
|
+
"aria-label": ariaLabel,
|
|
1833
|
+
containerClassName,
|
|
1834
|
+
containerStyle,
|
|
1835
|
+
className,
|
|
1836
|
+
children,
|
|
1837
|
+
...rest
|
|
1838
|
+
}, ref) {
|
|
1839
|
+
const captionId = (0, import_react27.useId)();
|
|
1840
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1841
|
+
"div",
|
|
1842
|
+
{
|
|
1843
|
+
className: cx(container, containerClassName),
|
|
1844
|
+
style: containerStyle,
|
|
1845
|
+
tabIndex: 0,
|
|
1846
|
+
role: "region",
|
|
1847
|
+
"aria-labelledby": caption2 ? captionId : void 0,
|
|
1848
|
+
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
1849
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1850
|
+
"table",
|
|
1851
|
+
{
|
|
1852
|
+
ref,
|
|
1853
|
+
className: cx(table, striped2 && striped, stickyHeader2 && stickyHeader, className),
|
|
1854
|
+
"aria-label": caption2 ? void 0 : ariaLabel,
|
|
1855
|
+
...rest,
|
|
1856
|
+
children: [
|
|
1857
|
+
caption2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("caption", { id: captionId, className: caption, children: caption2 }),
|
|
1858
|
+
children
|
|
1859
|
+
]
|
|
1860
|
+
}
|
|
1861
|
+
)
|
|
1862
|
+
}
|
|
1863
|
+
) });
|
|
1864
|
+
});
|
|
1865
|
+
var TableHeader = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
1866
|
+
function TableHeader2({ className, ...rest }, ref) {
|
|
1867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { ref, className: cx(header8, className), ...rest }) });
|
|
1868
|
+
}
|
|
1869
|
+
);
|
|
1870
|
+
var TableBody = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
1871
|
+
function TableBody2({ className, ...rest }, ref) {
|
|
1872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { ref, className: cx(body4, className), ...rest }) });
|
|
1873
|
+
}
|
|
1874
|
+
);
|
|
1875
|
+
var TableFooter = /* @__PURE__ */ (0, import_react27.forwardRef)(
|
|
1876
|
+
function TableFooter2({ className, ...rest }, ref) {
|
|
1877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tfoot", { ref, className: cx(footer4, className), ...rest }) });
|
|
1878
|
+
}
|
|
1879
|
+
);
|
|
1880
|
+
var TableRow = /* @__PURE__ */ (0, import_react27.forwardRef)(function TableRow2({ selected, className, ...rest }, ref) {
|
|
1881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { ref, className: cx(row, className), "data-state": selected ? "selected" : void 0, ...rest });
|
|
1882
|
+
});
|
|
1883
|
+
var TableHead = /* @__PURE__ */ (0, import_react27.forwardRef)(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
|
|
1884
|
+
const size = (0, import_react27.useContext)(TableSizeContext);
|
|
1885
|
+
const section = (0, import_react27.useContext)(TableSectionContext);
|
|
1886
|
+
const sortable = onSort !== void 0;
|
|
1887
|
+
const direction = sortDirection ?? "none";
|
|
1888
|
+
const SortIcon = direction === "descending" ? import_icons13.ArrowDownIcon : import_icons13.ArrowUpIcon;
|
|
1889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1890
|
+
"th",
|
|
1891
|
+
{
|
|
1892
|
+
ref,
|
|
1893
|
+
scope: scope ?? (section === "header" ? "col" : "row"),
|
|
1894
|
+
"aria-sort": sortable && direction !== "none" ? direction : void 0,
|
|
1895
|
+
className: cx(
|
|
1896
|
+
cell({ size, align }),
|
|
1897
|
+
section === "header" ? head : section === "footer" ? footerCell : void 0,
|
|
1898
|
+
className
|
|
1899
|
+
),
|
|
1900
|
+
...rest,
|
|
1901
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("button", { type: "button", className: sortButton, onClick: onSort, children: [
|
|
1902
|
+
children,
|
|
1903
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
|
|
1904
|
+
] }) : children
|
|
1905
|
+
}
|
|
1906
|
+
);
|
|
1907
|
+
});
|
|
1908
|
+
var TableCell = /* @__PURE__ */ (0, import_react27.forwardRef)(function TableCell2({ align, className, ...rest }, ref) {
|
|
1909
|
+
const size = (0, import_react27.useContext)(TableSizeContext);
|
|
1910
|
+
const section = (0, import_react27.useContext)(TableSectionContext);
|
|
1911
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1912
|
+
"td",
|
|
1913
|
+
{
|
|
1914
|
+
ref,
|
|
1915
|
+
className: cx(cell({ size, align }), section === "footer" && footerCell, className),
|
|
1916
|
+
...rest
|
|
1917
|
+
}
|
|
1918
|
+
);
|
|
1919
|
+
});
|
|
1920
|
+
|
|
1179
1921
|
// src/components/Tabs/Tabs.tsx
|
|
1180
1922
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
1181
|
-
var
|
|
1923
|
+
var import_react28 = require("react");
|
|
1182
1924
|
|
|
1183
1925
|
// src/components/Tabs/Tabs.css.ts
|
|
1184
|
-
var
|
|
1185
|
-
var
|
|
1186
|
-
var
|
|
1187
|
-
var trigger3 = (0,
|
|
1926
|
+
var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1927
|
+
var content9 = "fvhbtda";
|
|
1928
|
+
var list3 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "fvhbtd0", variantClassNames: { variant: { line: "fvhbtd1", soft: "fvhbtd2" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
|
|
1929
|
+
var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "fvhbtd3", variantClassNames: { variant: { line: "fvhbtd4", soft: "fvhbtd5" }, size: { sm: "fvhbtd6", md: "fvhbtd7" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd8"], [{ variant: "soft", size: "md" }, "fvhbtd9"]] });
|
|
1188
1930
|
|
|
1189
1931
|
// src/components/Tabs/Tabs.tsx
|
|
1190
|
-
var
|
|
1191
|
-
var TabsStyleContext = /* @__PURE__ */ (0,
|
|
1192
|
-
var Tabs = /* @__PURE__ */ (0,
|
|
1932
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1933
|
+
var TabsStyleContext = /* @__PURE__ */ (0, import_react28.createContext)({ variant: "line", size: "md" });
|
|
1934
|
+
var Tabs = /* @__PURE__ */ (0, import_react28.forwardRef)(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
|
|
1193
1935
|
const controlled = "value" in props ? { value: props.value ?? "" } : {};
|
|
1194
|
-
return /* @__PURE__ */ (0,
|
|
1936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTabs.Root, { ref, ...props, ...controlled }) });
|
|
1195
1937
|
});
|
|
1196
|
-
var TabsList = /* @__PURE__ */ (0,
|
|
1197
|
-
const { variant } = (0,
|
|
1198
|
-
return /* @__PURE__ */ (0,
|
|
1938
|
+
var TabsList = /* @__PURE__ */ (0, import_react28.forwardRef)(function TabsList2({ className, ...rest }, ref) {
|
|
1939
|
+
const { variant } = (0, import_react28.useContext)(TabsStyleContext);
|
|
1940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTabs.List, { ref, className: cx(list3({ variant }), className), ...rest });
|
|
1199
1941
|
});
|
|
1200
|
-
var TabsTrigger = /* @__PURE__ */ (0,
|
|
1201
|
-
const { variant, size } = (0,
|
|
1202
|
-
return /* @__PURE__ */ (0,
|
|
1942
|
+
var TabsTrigger = /* @__PURE__ */ (0, import_react28.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
|
|
1943
|
+
const { variant, size } = (0, import_react28.useContext)(TabsStyleContext);
|
|
1944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
|
|
1203
1945
|
});
|
|
1204
|
-
var TabsContent = /* @__PURE__ */ (0,
|
|
1205
|
-
return /* @__PURE__ */ (0,
|
|
1946
|
+
var TabsContent = /* @__PURE__ */ (0, import_react28.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
|
|
1947
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTabs.Content, { ref, className: cx(content9, className), ...rest });
|
|
1206
1948
|
});
|
|
1207
1949
|
|
|
1208
1950
|
// src/components/Textarea/Textarea.tsx
|
|
1209
|
-
var
|
|
1951
|
+
var import_react29 = require("react");
|
|
1210
1952
|
|
|
1211
1953
|
// src/components/Textarea/Textarea.css.ts
|
|
1212
|
-
var
|
|
1954
|
+
var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1213
1955
|
var count = "_1koawa9";
|
|
1214
1956
|
var countOver = "_1koawaa";
|
|
1215
1957
|
var defaultWidth = "_1koawa7";
|
|
1216
|
-
var
|
|
1217
|
-
var textarea = (0,
|
|
1958
|
+
var footer5 = "_1koawa8";
|
|
1959
|
+
var textarea = /* @__PURE__ */ (0, import_createRuntimeFn23.createRuntimeFn)({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
|
|
1218
1960
|
|
|
1219
1961
|
// src/components/Textarea/Textarea.tsx
|
|
1220
|
-
var
|
|
1221
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1222
|
-
var Textarea = /* @__PURE__ */ (0,
|
|
1223
|
-
label:
|
|
1224
|
-
helperText:
|
|
1962
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1963
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react29.useLayoutEffect : import_react29.useEffect;
|
|
1964
|
+
var Textarea = /* @__PURE__ */ (0, import_react29.forwardRef)(function Textarea2({
|
|
1965
|
+
label: label6,
|
|
1966
|
+
helperText: helperText3,
|
|
1225
1967
|
error,
|
|
1226
1968
|
size,
|
|
1227
1969
|
fullWidth,
|
|
@@ -1231,7 +1973,7 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1231
1973
|
required,
|
|
1232
1974
|
id,
|
|
1233
1975
|
rows = 3,
|
|
1234
|
-
value:
|
|
1976
|
+
value: value4,
|
|
1235
1977
|
defaultValue,
|
|
1236
1978
|
onChange,
|
|
1237
1979
|
maxLength,
|
|
@@ -1240,37 +1982,37 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1240
1982
|
"aria-describedby": ariaDescribedBy,
|
|
1241
1983
|
...rest
|
|
1242
1984
|
}, ref) {
|
|
1243
|
-
const generatedId = (0,
|
|
1985
|
+
const generatedId = (0, import_react29.useId)();
|
|
1244
1986
|
const textareaId = id ?? generatedId;
|
|
1245
|
-
const helperId =
|
|
1246
|
-
const innerRef = (0,
|
|
1247
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
1248
|
-
const length =
|
|
1249
|
-
const fitHeight = (0,
|
|
1987
|
+
const helperId = helperText3 ? `${textareaId}-helper` : void 0;
|
|
1988
|
+
const innerRef = (0, import_react29.useRef)(null);
|
|
1989
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react29.useState)(() => String(defaultValue ?? "").length);
|
|
1990
|
+
const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
|
|
1991
|
+
const fitHeight = (0, import_react29.useCallback)(() => {
|
|
1250
1992
|
const el = innerRef.current;
|
|
1251
1993
|
if (!autoResize || !el) return;
|
|
1252
1994
|
el.style.height = "auto";
|
|
1253
1995
|
const borders = el.offsetHeight - el.clientHeight;
|
|
1254
1996
|
el.style.height = `${el.scrollHeight + borders}px`;
|
|
1255
1997
|
}, [autoResize]);
|
|
1256
|
-
useIsomorphicLayoutEffect(fitHeight, [fitHeight,
|
|
1998
|
+
useIsomorphicLayoutEffect(fitHeight, [fitHeight, value4]);
|
|
1257
1999
|
const handleChange = (event) => {
|
|
1258
|
-
if (
|
|
2000
|
+
if (value4 === void 0) setUncontrolledLength(event.target.value.length);
|
|
1259
2001
|
fitHeight();
|
|
1260
2002
|
onChange?.(event);
|
|
1261
2003
|
};
|
|
1262
|
-
return /* @__PURE__ */ (0,
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
required && /* @__PURE__ */ (0,
|
|
2004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
2005
|
+
label6 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: textareaId, className: label, children: [
|
|
2006
|
+
label6,
|
|
2007
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1266
2008
|
] }),
|
|
1267
|
-
/* @__PURE__ */ (0,
|
|
2009
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1268
2010
|
"textarea",
|
|
1269
2011
|
{
|
|
1270
2012
|
ref: mergeRefs(innerRef, ref),
|
|
1271
2013
|
id: textareaId,
|
|
1272
2014
|
rows,
|
|
1273
|
-
value:
|
|
2015
|
+
value: value4,
|
|
1274
2016
|
defaultValue,
|
|
1275
2017
|
onChange: handleChange,
|
|
1276
2018
|
maxLength,
|
|
@@ -1286,49 +2028,49 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1286
2028
|
...rest
|
|
1287
2029
|
}
|
|
1288
2030
|
),
|
|
1289
|
-
(
|
|
1290
|
-
|
|
1291
|
-
showCount && /* @__PURE__ */ (0,
|
|
2031
|
+
(helperText3 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: footer5, children: [
|
|
2032
|
+
helperText3 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
|
|
2033
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
1292
2034
|
] })
|
|
1293
2035
|
] });
|
|
1294
2036
|
});
|
|
1295
2037
|
|
|
1296
2038
|
// src/components/Toast/Toast.tsx
|
|
1297
2039
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
1298
|
-
var
|
|
1299
|
-
var
|
|
2040
|
+
var import_react30 = require("react");
|
|
2041
|
+
var import_icons14 = require("@bestow-ui/icons");
|
|
1300
2042
|
|
|
1301
2043
|
// src/components/Toast/Toast.css.ts
|
|
1302
|
-
var
|
|
1303
|
-
var
|
|
1304
|
-
var close = "
|
|
1305
|
-
var
|
|
1306
|
-
var
|
|
1307
|
-
var toast = (0,
|
|
2044
|
+
var import_createRuntimeFn24 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2045
|
+
var action2 = "_1g11zvx8";
|
|
2046
|
+
var close = "_1g11zvx9";
|
|
2047
|
+
var description5 = "_1g11zvx7";
|
|
2048
|
+
var title5 = "_1g11zvx6";
|
|
2049
|
+
var toast = /* @__PURE__ */ (0, import_createRuntimeFn24.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", warning: "_1g11zvx4", danger: "_1g11zvx5" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
1308
2050
|
var viewport2 = "_1g11zvx0";
|
|
1309
2051
|
|
|
1310
2052
|
// src/components/Toast/Toast.tsx
|
|
1311
|
-
var
|
|
2053
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1312
2054
|
var REMOVE_DELAY = 500;
|
|
1313
|
-
var ToastContext = /* @__PURE__ */ (0,
|
|
1314
|
-
function ToastProvider({ children, duration = 5e3, label:
|
|
1315
|
-
const [toasts, setToasts] = (0,
|
|
1316
|
-
const nextId = (0,
|
|
2055
|
+
var ToastContext = /* @__PURE__ */ (0, import_react30.createContext)(null);
|
|
2056
|
+
function ToastProvider({ children, duration = 5e3, label: label6 = "\uC54C\uB9BC" }) {
|
|
2057
|
+
const [toasts, setToasts] = (0, import_react30.useState)([]);
|
|
2058
|
+
const nextId = (0, import_react30.useRef)(0);
|
|
1317
2059
|
const portal2 = usePortalProps();
|
|
1318
|
-
const toast2 = (0,
|
|
2060
|
+
const toast2 = (0, import_react30.useCallback)((options) => {
|
|
1319
2061
|
const id = nextId.current++;
|
|
1320
2062
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
1321
2063
|
return id;
|
|
1322
2064
|
}, []);
|
|
1323
|
-
const dismiss = (0,
|
|
2065
|
+
const dismiss = (0, import_react30.useCallback)((id) => {
|
|
1324
2066
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
1325
2067
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
1326
2068
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
1327
2069
|
}, []);
|
|
1328
|
-
const
|
|
1329
|
-
return /* @__PURE__ */ (0,
|
|
2070
|
+
const value4 = (0, import_react30.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
2071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
|
|
1330
2072
|
children,
|
|
1331
|
-
toasts.map(({ id, open, title:
|
|
2073
|
+
toasts.map(({ id, open, title: title6, description: description6, variant, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1332
2074
|
RadixToast.Root,
|
|
1333
2075
|
{
|
|
1334
2076
|
open,
|
|
@@ -1338,19 +2080,19 @@ function ToastProvider({ children, duration = 5e3, label: label4 = "\uC54C\uB9BC
|
|
|
1338
2080
|
},
|
|
1339
2081
|
className: toast({ variant }),
|
|
1340
2082
|
children: [
|
|
1341
|
-
/* @__PURE__ */ (0,
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
/* @__PURE__ */ (0,
|
|
2083
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixToast.Title, { className: title5, children: title6 }),
|
|
2084
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixToast.Description, { className: description5, children: description6 }),
|
|
2085
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
|
|
2086
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons14.XIcon, { size: 16 }) })
|
|
1345
2087
|
]
|
|
1346
2088
|
},
|
|
1347
2089
|
id
|
|
1348
2090
|
)),
|
|
1349
|
-
/* @__PURE__ */ (0,
|
|
2091
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
1350
2092
|
] }) });
|
|
1351
2093
|
}
|
|
1352
2094
|
function useToast() {
|
|
1353
|
-
const context = (0,
|
|
2095
|
+
const context = (0, import_react30.useContext)(ToastContext);
|
|
1354
2096
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
1355
2097
|
return context;
|
|
1356
2098
|
}
|
|
@@ -1360,12 +2102,12 @@ var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
|
1360
2102
|
|
|
1361
2103
|
// src/components/Tooltip/Tooltip.css.ts
|
|
1362
2104
|
var arrow2 = "z7rufs1";
|
|
1363
|
-
var
|
|
2105
|
+
var content10 = "z7rufs0";
|
|
1364
2106
|
|
|
1365
2107
|
// src/components/Tooltip/Tooltip.tsx
|
|
1366
|
-
var
|
|
2108
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1367
2109
|
function Tooltip({
|
|
1368
|
-
content:
|
|
2110
|
+
content: content11,
|
|
1369
2111
|
children,
|
|
1370
2112
|
side = "top",
|
|
1371
2113
|
align = "center",
|
|
@@ -1377,21 +2119,21 @@ function Tooltip({
|
|
|
1377
2119
|
className
|
|
1378
2120
|
}) {
|
|
1379
2121
|
const portal2 = usePortalProps();
|
|
1380
|
-
if (disabled ||
|
|
1381
|
-
return /* @__PURE__ */ (0,
|
|
1382
|
-
/* @__PURE__ */ (0,
|
|
1383
|
-
/* @__PURE__ */ (0,
|
|
2122
|
+
if (disabled || content11 == null || content11 === "") return children;
|
|
2123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
2124
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
2125
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1384
2126
|
RadixTooltip.Content,
|
|
1385
2127
|
{
|
|
1386
2128
|
side,
|
|
1387
2129
|
align,
|
|
1388
2130
|
sideOffset: 6,
|
|
1389
2131
|
collisionPadding: 8,
|
|
1390
|
-
className: cx(portal2.className,
|
|
2132
|
+
className: cx(portal2.className, content10, className),
|
|
1391
2133
|
style: portal2.style,
|
|
1392
2134
|
children: [
|
|
1393
|
-
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
2135
|
+
content11,
|
|
2136
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
|
|
1395
2137
|
]
|
|
1396
2138
|
}
|
|
1397
2139
|
) })
|
|
@@ -1399,14 +2141,14 @@ function Tooltip({
|
|
|
1399
2141
|
}
|
|
1400
2142
|
|
|
1401
2143
|
// src/components/Typography/Typography.tsx
|
|
1402
|
-
var
|
|
2144
|
+
var import_react31 = require("react");
|
|
1403
2145
|
|
|
1404
2146
|
// src/components/Typography/Typography.css.ts
|
|
1405
|
-
var
|
|
1406
|
-
var typography = (0,
|
|
2147
|
+
var import_createRuntimeFn25 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
2148
|
+
var typography = /* @__PURE__ */ (0, import_createRuntimeFn25.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", warning: "kioliog", inherit: "kiolioh" }, weight: { regular: "kiolioi", medium: "kiolioj", semibold: "kioliok", bold: "kioliol" }, align: { start: "kioliom", center: "kiolion", end: "kiolioo" }, truncate: { true: "kioliop" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
1407
2149
|
|
|
1408
2150
|
// src/components/Typography/Typography.tsx
|
|
1409
|
-
var
|
|
2151
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1410
2152
|
var defaultElement = {
|
|
1411
2153
|
display: "h1",
|
|
1412
2154
|
h1: "h1",
|
|
@@ -1418,9 +2160,9 @@ var defaultElement = {
|
|
|
1418
2160
|
"body-sm": "p",
|
|
1419
2161
|
caption: "span"
|
|
1420
2162
|
};
|
|
1421
|
-
var Typography = /* @__PURE__ */ (0,
|
|
2163
|
+
var Typography = /* @__PURE__ */ (0, import_react31.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
1422
2164
|
const Component = as ?? defaultElement[variant];
|
|
1423
|
-
return /* @__PURE__ */ (0,
|
|
2165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1424
2166
|
Component,
|
|
1425
2167
|
{
|
|
1426
2168
|
ref,
|
|
@@ -1433,15 +2175,20 @@ var Typography = /* @__PURE__ */ (0, import_react23.forwardRef)(function Typogra
|
|
|
1433
2175
|
0 && (module.exports = {
|
|
1434
2176
|
Accordion,
|
|
1435
2177
|
AccordionItem,
|
|
2178
|
+
Alert,
|
|
1436
2179
|
Avatar,
|
|
1437
2180
|
Badge,
|
|
2181
|
+
Breadcrumb,
|
|
1438
2182
|
Button,
|
|
1439
2183
|
Card,
|
|
1440
2184
|
CardBody,
|
|
1441
2185
|
CardFooter,
|
|
1442
2186
|
CardHeader,
|
|
1443
2187
|
Checkbox,
|
|
2188
|
+
Combobox,
|
|
1444
2189
|
Divider,
|
|
2190
|
+
Drawer,
|
|
2191
|
+
DrawerClose,
|
|
1445
2192
|
DropdownMenu,
|
|
1446
2193
|
DropdownMenuContent,
|
|
1447
2194
|
DropdownMenuGroup,
|
|
@@ -1449,18 +2196,29 @@ var Typography = /* @__PURE__ */ (0, import_react23.forwardRef)(function Typogra
|
|
|
1449
2196
|
DropdownMenuLabel,
|
|
1450
2197
|
DropdownMenuSeparator,
|
|
1451
2198
|
DropdownMenuTrigger,
|
|
2199
|
+
IconButton,
|
|
1452
2200
|
Input,
|
|
2201
|
+
Link,
|
|
1453
2202
|
Modal,
|
|
1454
2203
|
ModalClose,
|
|
1455
2204
|
Pagination,
|
|
1456
2205
|
Popover,
|
|
1457
2206
|
PopoverClose,
|
|
2207
|
+
Progress,
|
|
1458
2208
|
RadioGroup,
|
|
1459
2209
|
Select,
|
|
1460
2210
|
Skeleton,
|
|
2211
|
+
Slider,
|
|
1461
2212
|
Spinner,
|
|
1462
2213
|
Stack,
|
|
1463
2214
|
Switch,
|
|
2215
|
+
Table,
|
|
2216
|
+
TableBody,
|
|
2217
|
+
TableCell,
|
|
2218
|
+
TableFooter,
|
|
2219
|
+
TableHead,
|
|
2220
|
+
TableHeader,
|
|
2221
|
+
TableRow,
|
|
1464
2222
|
Tabs,
|
|
1465
2223
|
TabsContent,
|
|
1466
2224
|
TabsList,
|