@bestow-ui/react 0.8.3 → 0.9.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 +4 -4
- package/dist/index.cjs +658 -371
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +601 -36
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +179 -18
- package/dist/index.d.ts +179 -18
- package/dist/index.js +630 -350
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -33,8 +33,10 @@ 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,
|
|
@@ -42,6 +44,8 @@ __export(index_exports, {
|
|
|
42
44
|
CardHeader: () => CardHeader,
|
|
43
45
|
Checkbox: () => Checkbox,
|
|
44
46
|
Divider: () => Divider,
|
|
47
|
+
Drawer: () => Drawer,
|
|
48
|
+
DrawerClose: () => DrawerClose,
|
|
45
49
|
DropdownMenu: () => DropdownMenu,
|
|
46
50
|
DropdownMenuContent: () => DropdownMenuContent,
|
|
47
51
|
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
@@ -49,12 +53,15 @@ __export(index_exports, {
|
|
|
49
53
|
DropdownMenuLabel: () => DropdownMenuLabel,
|
|
50
54
|
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
51
55
|
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
56
|
+
IconButton: () => IconButton,
|
|
52
57
|
Input: () => Input,
|
|
58
|
+
Link: () => Link,
|
|
53
59
|
Modal: () => Modal,
|
|
54
60
|
ModalClose: () => ModalClose,
|
|
55
61
|
Pagination: () => Pagination,
|
|
56
62
|
Popover: () => Popover,
|
|
57
63
|
PopoverClose: () => PopoverClose,
|
|
64
|
+
Progress: () => Progress,
|
|
58
65
|
RadioGroup: () => RadioGroup,
|
|
59
66
|
Select: () => Select,
|
|
60
67
|
Skeleton: () => Skeleton,
|
|
@@ -85,7 +92,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
85
92
|
|
|
86
93
|
// src/theme/contract.css.ts
|
|
87
94
|
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)" } },
|
|
95
|
+
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
96
|
|
|
90
97
|
// src/theme/color.ts
|
|
91
98
|
var import_tokens = require("@bestow-ui/tokens");
|
|
@@ -161,6 +168,11 @@ function findReadable(base, startL, step, backgrounds) {
|
|
|
161
168
|
}
|
|
162
169
|
return step < 0 ? import_tokens.palette.black : import_tokens.palette.white;
|
|
163
170
|
}
|
|
171
|
+
function hoverFor(base, delta, contrast) {
|
|
172
|
+
const preferred = withL(base, Math.min(1, Math.max(0, base.l + delta)));
|
|
173
|
+
if (contrastRatio(contrast, preferred) >= 4.5) return preferred;
|
|
174
|
+
return withL(base, Math.min(1, Math.max(0, base.l - delta)));
|
|
175
|
+
}
|
|
164
176
|
function pickContrast(solid) {
|
|
165
177
|
const white = import_tokens.palette.white;
|
|
166
178
|
const dark = import_tokens.palette.gray[900];
|
|
@@ -176,10 +188,11 @@ function createIntentColors(intent, color) {
|
|
|
176
188
|
const base = rgbToOklch(parseHex(solid));
|
|
177
189
|
const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
|
|
178
190
|
const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
|
|
191
|
+
const lightContrast = pickContrast(solid);
|
|
179
192
|
const light = {
|
|
180
193
|
solid,
|
|
181
|
-
solidHover:
|
|
182
|
-
contrast:
|
|
194
|
+
solidHover: hoverFor(base, -0.06, lightContrast),
|
|
195
|
+
contrast: lightContrast,
|
|
183
196
|
subtle: lightSubtle,
|
|
184
197
|
subtleHover: lightSubtleHover,
|
|
185
198
|
text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
|
|
@@ -189,15 +202,19 @@ function createIntentColors(intent, color) {
|
|
|
189
202
|
const darkBase = rgbToOklch(parseHex(darkSolid));
|
|
190
203
|
const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
|
|
191
204
|
const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
|
|
205
|
+
const darkContrast = pickContrast(darkSolid);
|
|
192
206
|
const dark = {
|
|
193
207
|
solid: darkSolid,
|
|
194
|
-
solidHover:
|
|
195
|
-
contrast:
|
|
208
|
+
solidHover: hoverFor(darkBase, 0.06, darkContrast),
|
|
209
|
+
contrast: darkContrast,
|
|
196
210
|
subtle: rgba(darkSolid, 0.16),
|
|
197
211
|
subtleHover: rgba(darkSolid, 0.26),
|
|
198
212
|
text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
|
|
199
213
|
};
|
|
200
|
-
const focus = intent === "primary" ? {
|
|
214
|
+
const focus = intent === "primary" ? {
|
|
215
|
+
light: { border: { focus: light.solid } },
|
|
216
|
+
dark: { border: { focus: withL(darkBase, Math.min(1, darkBase.l + 0.06)) } }
|
|
217
|
+
} : void 0;
|
|
201
218
|
return {
|
|
202
219
|
light: { color: { [intent]: light, ...focus?.light } },
|
|
203
220
|
dark: { color: { [intent]: dark, ...focus?.dark } }
|
|
@@ -209,10 +226,10 @@ var import_dynamic = require("@vanilla-extract/dynamic");
|
|
|
209
226
|
function deepMerge(target, source) {
|
|
210
227
|
if (!source) return target;
|
|
211
228
|
const out = { ...target };
|
|
212
|
-
for (const [key,
|
|
213
|
-
if (
|
|
229
|
+
for (const [key, value3] of Object.entries(source)) {
|
|
230
|
+
if (value3 === void 0) continue;
|
|
214
231
|
const prev = out[key];
|
|
215
|
-
out[key] = typeof
|
|
232
|
+
out[key] = typeof value3 === "object" && typeof prev === "object" ? deepMerge(prev, value3) : value3;
|
|
216
233
|
}
|
|
217
234
|
return out;
|
|
218
235
|
}
|
|
@@ -231,11 +248,11 @@ function mergeThemes(a, b) {
|
|
|
231
248
|
return createTheme(a, b);
|
|
232
249
|
}
|
|
233
250
|
function flatten(partial, contract, out) {
|
|
234
|
-
for (const [key,
|
|
251
|
+
for (const [key, value3] of Object.entries(partial)) {
|
|
235
252
|
const target = contract[key];
|
|
236
253
|
if (target === void 0) continue;
|
|
237
|
-
if (typeof target === "string" && typeof
|
|
238
|
-
else if (typeof target === "object" && typeof
|
|
254
|
+
if (typeof target === "string" && typeof value3 === "string") out[target] = value3;
|
|
255
|
+
else if (typeof target === "object" && typeof value3 === "object") flatten(value3, target, out);
|
|
239
256
|
}
|
|
240
257
|
return out;
|
|
241
258
|
}
|
|
@@ -264,17 +281,17 @@ var ThemeProvider = /* @__PURE__ */ (0, import_react.forwardRef)(function ThemeP
|
|
|
264
281
|
const parent = (0, import_react.useContext)(ThemeContext);
|
|
265
282
|
const theme = themeProp ?? parent.theme;
|
|
266
283
|
const merged = (0, import_react.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
267
|
-
const
|
|
284
|
+
const value3 = (0, import_react.useMemo)(
|
|
268
285
|
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
269
286
|
[theme, merged]
|
|
270
287
|
);
|
|
271
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value:
|
|
288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: value3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
272
289
|
"div",
|
|
273
290
|
{
|
|
274
291
|
ref,
|
|
275
292
|
"data-theme": theme,
|
|
276
293
|
className: cx(themeClass[theme], root, className),
|
|
277
|
-
style:
|
|
294
|
+
style: value3.style ? { ...value3.style, ...style } : style,
|
|
278
295
|
...rest,
|
|
279
296
|
children
|
|
280
297
|
}
|
|
@@ -313,94 +330,207 @@ var Accordion = /* @__PURE__ */ (0, import_react2.forwardRef)(function Accordion
|
|
|
313
330
|
const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
|
|
314
331
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAccordion.Root, { ref, className: cx(root2, className), ...rootProps });
|
|
315
332
|
});
|
|
316
|
-
var AccordionItem = /* @__PURE__ */ (0, import_react2.forwardRef)(function AccordionItem2({ title:
|
|
333
|
+
var AccordionItem = /* @__PURE__ */ (0, import_react2.forwardRef)(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
|
|
317
334
|
const Heading = `h${headingLevel}`;
|
|
318
335
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
|
|
319
336
|
/* @__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
|
-
|
|
337
|
+
title6,
|
|
321
338
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.ChevronDownIcon, { size: 18, className: chevron })
|
|
322
339
|
] }) }) }),
|
|
323
340
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: contentInner, children }) })
|
|
324
341
|
] });
|
|
325
342
|
});
|
|
326
343
|
|
|
344
|
+
// src/components/Alert/Alert.tsx
|
|
345
|
+
var import_react3 = require("react");
|
|
346
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
347
|
+
|
|
348
|
+
// src/components/Alert/Alert.css.ts
|
|
349
|
+
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
350
|
+
var action = "bsmpc0j";
|
|
351
|
+
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: [] });
|
|
352
|
+
var closeButton = "bsmpc0k";
|
|
353
|
+
var content2 = "bsmpc0g";
|
|
354
|
+
var description = "bsmpc0i";
|
|
355
|
+
var icon = "bsmpc0f";
|
|
356
|
+
var title = "bsmpc0h";
|
|
357
|
+
|
|
358
|
+
// src/components/Alert/Alert.tsx
|
|
359
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
360
|
+
var defaultIcons = {
|
|
361
|
+
primary: import_icons2.InfoIcon,
|
|
362
|
+
neutral: import_icons2.InfoIcon,
|
|
363
|
+
success: import_icons2.CircleCheckIcon,
|
|
364
|
+
warning: import_icons2.TriangleAlertIcon,
|
|
365
|
+
danger: import_icons2.CircleAlertIcon
|
|
366
|
+
};
|
|
367
|
+
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) {
|
|
368
|
+
const DefaultIcon = defaultIcons[color];
|
|
369
|
+
const iconNode = icon6 === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultIcon, { size: 18 }) : icon6;
|
|
370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
|
|
371
|
+
iconNode !== false && iconNode !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: icon, "aria-hidden": true, children: iconNode }),
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: content2, children: [
|
|
373
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: title, children: title6 }),
|
|
374
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: description, children })
|
|
375
|
+
] }),
|
|
376
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: action, children: action3 }),
|
|
377
|
+
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 }) })
|
|
378
|
+
] });
|
|
379
|
+
});
|
|
380
|
+
|
|
327
381
|
// src/components/Avatar/Avatar.tsx
|
|
328
382
|
var RadixAvatar = __toESM(require("@radix-ui/react-avatar"), 1);
|
|
329
|
-
var
|
|
330
|
-
var
|
|
383
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
384
|
+
var import_react4 = require("react");
|
|
331
385
|
|
|
332
386
|
// src/components/Avatar/Avatar.css.ts
|
|
333
|
-
var
|
|
387
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
334
388
|
var fallback = "_1fd2kp27";
|
|
335
389
|
var image = "_1fd2kp26";
|
|
336
|
-
var root3 = (0,
|
|
390
|
+
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
391
|
|
|
338
392
|
// src/components/Avatar/Avatar.tsx
|
|
339
|
-
var
|
|
393
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
340
394
|
function getInitials(name) {
|
|
341
395
|
const [a = "", b = ""] = name.trim().split(/\s+/);
|
|
342
396
|
const first = (word) => Array.from(word)[0] ?? "";
|
|
343
397
|
return (first(a) + first(b)).toUpperCase();
|
|
344
398
|
}
|
|
345
|
-
var Avatar = /* @__PURE__ */ (0,
|
|
346
|
-
const
|
|
347
|
-
const a11y =
|
|
399
|
+
var Avatar = /* @__PURE__ */ (0, import_react4.forwardRef)(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
|
|
400
|
+
const label5 = alt ?? name;
|
|
401
|
+
const a11y = label5 ? { role: "img", "aria-label": label5 } : { "aria-hidden": true };
|
|
348
402
|
const initials = name ? getInitials(name) : "";
|
|
349
|
-
return /* @__PURE__ */ (0,
|
|
350
|
-
src && /* @__PURE__ */ (0,
|
|
351
|
-
/* @__PURE__ */ (0,
|
|
403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(RadixAvatar.Root, { ref, className: cx(root3({ size, shape }), className), ...a11y, ...rest, children: [
|
|
404
|
+
src && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixAvatar.Image, { src, alt: "", className: image }),
|
|
405
|
+
/* @__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
406
|
] });
|
|
353
407
|
});
|
|
354
408
|
|
|
355
409
|
// src/components/Badge/Badge.tsx
|
|
356
|
-
var
|
|
410
|
+
var import_react5 = require("react");
|
|
357
411
|
|
|
358
412
|
// src/components/Badge/Badge.css.ts
|
|
359
|
-
var
|
|
360
|
-
var badge = (0,
|
|
361
|
-
var
|
|
413
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
414
|
+
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: [] });
|
|
415
|
+
var icon2 = "_1295cfng";
|
|
362
416
|
|
|
363
417
|
// src/components/Badge/Badge.tsx
|
|
364
|
-
var
|
|
365
|
-
var Badge = /* @__PURE__ */ (0,
|
|
366
|
-
return /* @__PURE__ */ (0,
|
|
367
|
-
startIcon && /* @__PURE__ */ (0,
|
|
418
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
419
|
+
var Badge = /* @__PURE__ */ (0, import_react5.forwardRef)(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
|
|
420
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
|
|
421
|
+
startIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: icon2, children: startIcon }),
|
|
368
422
|
children
|
|
369
423
|
] });
|
|
370
424
|
});
|
|
371
425
|
|
|
372
|
-
// src/components/
|
|
373
|
-
var
|
|
426
|
+
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
427
|
+
var import_react7 = require("react");
|
|
428
|
+
var import_icons5 = require("@bestow-ui/icons");
|
|
374
429
|
|
|
375
|
-
// src/components/
|
|
376
|
-
var
|
|
377
|
-
var
|
|
430
|
+
// src/components/Link/Link.tsx
|
|
431
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
432
|
+
var import_react6 = require("react");
|
|
433
|
+
var import_icons4 = require("@bestow-ui/icons");
|
|
378
434
|
|
|
379
435
|
// src/styles/visuallyHidden.css.ts
|
|
380
436
|
var visuallyHidden = "_1kdtbw10";
|
|
381
437
|
|
|
438
|
+
// src/components/Link/Link.css.ts
|
|
439
|
+
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
440
|
+
var externalIcon = "_1t4hlp6";
|
|
441
|
+
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: [] });
|
|
442
|
+
|
|
443
|
+
// src/components/Link/Link.tsx
|
|
444
|
+
var import_jsx_runtime6 = (
|
|
445
|
+
// Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
|
|
446
|
+
require("react/jsx-runtime")
|
|
447
|
+
);
|
|
448
|
+
var Link = /* @__PURE__ */ (0, import_react6.forwardRef)(function Link2({
|
|
449
|
+
as: Component = "a",
|
|
450
|
+
asChild,
|
|
451
|
+
color,
|
|
452
|
+
underline,
|
|
453
|
+
external,
|
|
454
|
+
externalLabel = "(\uC0C8 \uCC3D)",
|
|
455
|
+
target,
|
|
456
|
+
rel,
|
|
457
|
+
className,
|
|
458
|
+
children,
|
|
459
|
+
...rest
|
|
460
|
+
}, ref) {
|
|
461
|
+
const linkClassName = cx(link({ color, underline }), className);
|
|
462
|
+
if (asChild) {
|
|
463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children });
|
|
464
|
+
}
|
|
465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
466
|
+
Component,
|
|
467
|
+
{
|
|
468
|
+
ref,
|
|
469
|
+
className: linkClassName,
|
|
470
|
+
target: external ? target ?? "_blank" : target,
|
|
471
|
+
rel: external ? rel ?? "noopener noreferrer" : rel,
|
|
472
|
+
...rest,
|
|
473
|
+
children: [
|
|
474
|
+
children,
|
|
475
|
+
external && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
476
|
+
" ",
|
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.ExternalLinkIcon, { className: externalIcon }),
|
|
478
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: visuallyHidden, children: externalLabel })
|
|
479
|
+
] })
|
|
480
|
+
]
|
|
481
|
+
}
|
|
482
|
+
);
|
|
483
|
+
});
|
|
484
|
+
|
|
485
|
+
// src/components/Breadcrumb/Breadcrumb.css.ts
|
|
486
|
+
var current = "_18t8ztt3";
|
|
487
|
+
var item2 = "_18t8ztt1";
|
|
488
|
+
var link2 = "_18t8ztt2";
|
|
489
|
+
var list = "_18t8ztt0";
|
|
490
|
+
var separator = "_18t8ztt4";
|
|
491
|
+
|
|
492
|
+
// src/components/Breadcrumb/Breadcrumb.tsx
|
|
493
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
494
|
+
var Breadcrumb = /* @__PURE__ */ (0, import_react7.forwardRef)(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabel = "\uC774\uB3D9 \uACBD\uB85C", className, ...rest }, ref) {
|
|
495
|
+
const sep = separator3 ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons5.ChevronRightIcon, { size: 14 });
|
|
496
|
+
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) => {
|
|
497
|
+
const isCurrent = index === items2.length - 1;
|
|
498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: item2, children: [
|
|
499
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: separator, "aria-hidden": true, children: sep }),
|
|
500
|
+
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 })
|
|
501
|
+
] }, index);
|
|
502
|
+
}) }) });
|
|
503
|
+
});
|
|
504
|
+
|
|
505
|
+
// src/components/Button/Button.tsx
|
|
506
|
+
var import_react9 = require("react");
|
|
507
|
+
|
|
508
|
+
// src/components/Spinner/Spinner.tsx
|
|
509
|
+
var import_icons6 = require("@bestow-ui/icons");
|
|
510
|
+
var import_react8 = require("react");
|
|
511
|
+
|
|
382
512
|
// src/components/Spinner/Spinner.css.ts
|
|
383
|
-
var
|
|
384
|
-
var spinner = (0,
|
|
513
|
+
var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
514
|
+
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
515
|
|
|
386
516
|
// src/components/Spinner/Spinner.tsx
|
|
387
|
-
var
|
|
388
|
-
var Spinner = /* @__PURE__ */ (0,
|
|
389
|
-
const a11y =
|
|
390
|
-
return /* @__PURE__ */ (0,
|
|
391
|
-
/* @__PURE__ */ (0,
|
|
392
|
-
|
|
517
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
518
|
+
var Spinner = /* @__PURE__ */ (0, import_react8.forwardRef)(function Spinner2({ size, color, label: label5 = "\uB85C\uB529 \uC911", className, ...rest }, ref) {
|
|
519
|
+
const a11y = label5 ? { role: "status" } : { "aria-hidden": true };
|
|
520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
|
|
521
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons6.LoaderIcon, { size: "100%" }),
|
|
522
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: visuallyHidden, children: label5 })
|
|
393
523
|
] });
|
|
394
524
|
});
|
|
395
525
|
|
|
396
526
|
// src/components/Button/Button.css.ts
|
|
397
|
-
var
|
|
398
|
-
var button = (0,
|
|
399
|
-
var
|
|
527
|
+
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
528
|
+
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: [] });
|
|
529
|
+
var icon3 = "xcekdai";
|
|
400
530
|
|
|
401
531
|
// src/components/Button/Button.tsx
|
|
402
|
-
var
|
|
403
|
-
var Button = /* @__PURE__ */ (0,
|
|
532
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
533
|
+
var Button = /* @__PURE__ */ (0, import_react9.forwardRef)(function Button2({
|
|
404
534
|
variant,
|
|
405
535
|
color,
|
|
406
536
|
size,
|
|
@@ -421,8 +551,8 @@ var Button = /* @__PURE__ */ (0, import_react6.forwardRef)(function Button2({
|
|
|
421
551
|
}
|
|
422
552
|
onClick?.(event);
|
|
423
553
|
};
|
|
424
|
-
const leading = loading ? /* @__PURE__ */ (0,
|
|
425
|
-
return /* @__PURE__ */ (0,
|
|
554
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { size: "sm", label: "" }) : startIcon;
|
|
555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
426
556
|
"button",
|
|
427
557
|
{
|
|
428
558
|
ref,
|
|
@@ -433,70 +563,70 @@ var Button = /* @__PURE__ */ (0, import_react6.forwardRef)(function Button2({
|
|
|
433
563
|
onClick: handleClick,
|
|
434
564
|
...rest,
|
|
435
565
|
children: [
|
|
436
|
-
leading && /* @__PURE__ */ (0,
|
|
566
|
+
leading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: icon3, children: leading }),
|
|
437
567
|
children,
|
|
438
|
-
endIcon && /* @__PURE__ */ (0,
|
|
568
|
+
endIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: icon3, children: endIcon })
|
|
439
569
|
]
|
|
440
570
|
}
|
|
441
571
|
);
|
|
442
572
|
});
|
|
443
573
|
|
|
444
574
|
// src/components/Card/Card.tsx
|
|
445
|
-
var
|
|
575
|
+
var import_react10 = require("react");
|
|
446
576
|
|
|
447
577
|
// src/components/Card/Card.css.ts
|
|
448
|
-
var
|
|
578
|
+
var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
449
579
|
var body = "dnuf1u9";
|
|
450
|
-
var card = (0,
|
|
580
|
+
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
581
|
var footer = "dnuf1ua";
|
|
452
582
|
var header2 = "dnuf1u8";
|
|
453
583
|
|
|
454
584
|
// src/components/Card/Card.tsx
|
|
455
|
-
var
|
|
456
|
-
var Card = /* @__PURE__ */ (0,
|
|
457
|
-
return /* @__PURE__ */ (0,
|
|
585
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
586
|
+
var Card = /* @__PURE__ */ (0, import_react10.forwardRef)(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
|
|
587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
|
|
458
588
|
});
|
|
459
|
-
var CardHeader = /* @__PURE__ */ (0,
|
|
460
|
-
return /* @__PURE__ */ (0,
|
|
589
|
+
var CardHeader = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardHeader2({ className, ...rest }, ref) {
|
|
590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(header2, className), ...rest });
|
|
461
591
|
});
|
|
462
|
-
var CardBody = /* @__PURE__ */ (0,
|
|
463
|
-
return /* @__PURE__ */ (0,
|
|
592
|
+
var CardBody = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardBody2({ className, ...rest }, ref) {
|
|
593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(body, className), ...rest });
|
|
464
594
|
});
|
|
465
|
-
var CardFooter = /* @__PURE__ */ (0,
|
|
466
|
-
return /* @__PURE__ */ (0,
|
|
595
|
+
var CardFooter = /* @__PURE__ */ (0, import_react10.forwardRef)(function CardFooter2({ className, ...rest }, ref) {
|
|
596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cx(footer, className), ...rest });
|
|
467
597
|
});
|
|
468
598
|
|
|
469
599
|
// src/components/Checkbox/Checkbox.tsx
|
|
470
|
-
var
|
|
600
|
+
var import_react11 = require("react");
|
|
471
601
|
|
|
472
602
|
// src/utils/mergeRefs.ts
|
|
473
603
|
function mergeRefs(...refs) {
|
|
474
|
-
return (
|
|
604
|
+
return (value3) => {
|
|
475
605
|
for (const ref of refs) {
|
|
476
|
-
if (typeof ref === "function") ref(
|
|
477
|
-
else if (ref) ref.current =
|
|
606
|
+
if (typeof ref === "function") ref(value3);
|
|
607
|
+
else if (ref) ref.current = value3;
|
|
478
608
|
}
|
|
479
609
|
};
|
|
480
610
|
}
|
|
481
611
|
|
|
482
612
|
// src/components/Checkbox/Checkbox.css.ts
|
|
483
|
-
var
|
|
613
|
+
var import_createRuntimeFn8 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
484
614
|
var checkIcon = "_1y7mzsn8 _1y7mzsn7";
|
|
485
|
-
var control = (0,
|
|
615
|
+
var control = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
486
616
|
var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
|
|
487
617
|
var input = "_1y7mzsn6";
|
|
488
|
-
var root4 = (0,
|
|
618
|
+
var root4 = /* @__PURE__ */ (0, import_createRuntimeFn8.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
489
619
|
|
|
490
620
|
// src/components/Checkbox/Checkbox.tsx
|
|
491
|
-
var
|
|
492
|
-
var Checkbox = /* @__PURE__ */ (0,
|
|
493
|
-
const innerRef = (0,
|
|
494
|
-
(0,
|
|
621
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
622
|
+
var Checkbox = /* @__PURE__ */ (0, import_react11.forwardRef)(function Checkbox2({ label: label5, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
|
|
623
|
+
const innerRef = (0, import_react11.useRef)(null);
|
|
624
|
+
(0, import_react11.useEffect)(() => {
|
|
495
625
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
496
626
|
}, [indeterminate]);
|
|
497
|
-
return /* @__PURE__ */ (0,
|
|
498
|
-
/* @__PURE__ */ (0,
|
|
499
|
-
/* @__PURE__ */ (0,
|
|
627
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
628
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: control({ size }), children: [
|
|
629
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
500
630
|
"input",
|
|
501
631
|
{
|
|
502
632
|
ref: mergeRefs(innerRef, ref),
|
|
@@ -507,7 +637,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react8.forwardRef)(function Checkbox2(
|
|
|
507
637
|
...rest
|
|
508
638
|
}
|
|
509
639
|
),
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
640
|
+
/* @__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
641
|
"path",
|
|
512
642
|
{
|
|
513
643
|
d: "M5 10.5l3.2 3L15 7",
|
|
@@ -517,57 +647,146 @@ var Checkbox = /* @__PURE__ */ (0, import_react8.forwardRef)(function Checkbox2(
|
|
|
517
647
|
strokeLinejoin: "round"
|
|
518
648
|
}
|
|
519
649
|
) }),
|
|
520
|
-
/* @__PURE__ */ (0,
|
|
650
|
+
/* @__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
651
|
] }),
|
|
522
|
-
|
|
652
|
+
label5
|
|
523
653
|
] });
|
|
524
654
|
});
|
|
525
655
|
|
|
526
656
|
// src/components/Divider/Divider.tsx
|
|
527
|
-
var
|
|
657
|
+
var import_react12 = require("react");
|
|
528
658
|
|
|
529
659
|
// src/components/Divider/Divider.css.ts
|
|
530
|
-
var
|
|
531
|
-
var divider = (0,
|
|
660
|
+
var import_createRuntimeFn9 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
661
|
+
var divider = /* @__PURE__ */ (0, import_createRuntimeFn9.createRuntimeFn)({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
|
|
532
662
|
var labeled = "_1t3gq8v3";
|
|
533
663
|
var line = "_1t3gq8v4";
|
|
534
664
|
|
|
535
665
|
// src/components/Divider/Divider.tsx
|
|
536
|
-
var
|
|
537
|
-
var Divider = /* @__PURE__ */ (0,
|
|
666
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
667
|
+
var Divider = /* @__PURE__ */ (0, import_react12.forwardRef)(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
|
|
538
668
|
if (children && orientation === "horizontal") {
|
|
539
|
-
return /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: cx(labeled, className), ...rest, children: [
|
|
670
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: line, "aria-hidden": true }),
|
|
541
671
|
children,
|
|
542
|
-
/* @__PURE__ */ (0,
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: line, "aria-hidden": true })
|
|
543
673
|
] });
|
|
544
674
|
}
|
|
545
675
|
const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
|
|
546
|
-
return /* @__PURE__ */ (0,
|
|
676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
|
|
547
677
|
});
|
|
548
678
|
|
|
679
|
+
// src/components/Drawer/Drawer.tsx
|
|
680
|
+
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
681
|
+
var import_icons7 = require("@bestow-ui/icons");
|
|
682
|
+
|
|
683
|
+
// src/components/IconButton/IconButton.tsx
|
|
684
|
+
var import_react13 = require("react");
|
|
685
|
+
|
|
686
|
+
// src/components/IconButton/IconButton.css.ts
|
|
687
|
+
var import_createRuntimeFn10 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
688
|
+
var iconButton = /* @__PURE__ */ (0, import_createRuntimeFn10.createRuntimeFn)({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
689
|
+
|
|
690
|
+
// src/components/IconButton/IconButton.tsx
|
|
691
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
692
|
+
var IconButton = /* @__PURE__ */ (0, import_react13.forwardRef)(function IconButton2({ variant = "ghost", color = "neutral", size, loading, className, children, ...rest }, ref) {
|
|
693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
694
|
+
Button,
|
|
695
|
+
{
|
|
696
|
+
ref,
|
|
697
|
+
variant,
|
|
698
|
+
color,
|
|
699
|
+
size,
|
|
700
|
+
loading,
|
|
701
|
+
className: cx(iconButton({ size }), className),
|
|
702
|
+
...rest,
|
|
703
|
+
children: !loading && children
|
|
704
|
+
}
|
|
705
|
+
);
|
|
706
|
+
});
|
|
707
|
+
|
|
708
|
+
// src/components/Drawer/Drawer.css.ts
|
|
709
|
+
var import_createRuntimeFn11 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
710
|
+
var body2 = "nmobyvy";
|
|
711
|
+
var closeButton2 = "nmobyvx";
|
|
712
|
+
var content3 = /* @__PURE__ */ (0, import_createRuntimeFn11.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"]] });
|
|
713
|
+
var description2 = "nmobyvw";
|
|
714
|
+
var footer2 = "nmobyvz";
|
|
715
|
+
var header3 = "nmobyvt";
|
|
716
|
+
var headings = "nmobyvu";
|
|
717
|
+
var overlay = "nmobyv0";
|
|
718
|
+
var title2 = "nmobyvv";
|
|
719
|
+
|
|
720
|
+
// src/components/Drawer/Drawer.tsx
|
|
721
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
722
|
+
function Drawer({
|
|
723
|
+
open,
|
|
724
|
+
defaultOpen,
|
|
725
|
+
onOpenChange,
|
|
726
|
+
trigger: trigger4,
|
|
727
|
+
title: title6,
|
|
728
|
+
description: description6,
|
|
729
|
+
children,
|
|
730
|
+
footer: footer5,
|
|
731
|
+
side,
|
|
732
|
+
size,
|
|
733
|
+
hideCloseButton = false,
|
|
734
|
+
closeOnOverlayClick = true,
|
|
735
|
+
className
|
|
736
|
+
}) {
|
|
737
|
+
const portal2 = usePortalProps();
|
|
738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
739
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Trigger, { asChild: true, children: trigger4 }),
|
|
740
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Dialog.Portal, { children: [
|
|
741
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
742
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
743
|
+
Dialog.Content,
|
|
744
|
+
{
|
|
745
|
+
className: cx(portal2.className, content3({ side, size }), className),
|
|
746
|
+
style: portal2.style,
|
|
747
|
+
"data-side": side ?? "right",
|
|
748
|
+
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
749
|
+
...description6 ? {} : { "aria-describedby": void 0 },
|
|
750
|
+
children: [
|
|
751
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: header3, children: [
|
|
752
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: headings, children: [
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Title, { className: title2, children: title6 }),
|
|
754
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Description, { className: description2, children: description6 })
|
|
755
|
+
] }),
|
|
756
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { "aria-label": "\uB2EB\uAE30", size: "sm", className: closeButton2, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons7.XIcon, {}) }) })
|
|
757
|
+
] }),
|
|
758
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: body2, children }),
|
|
759
|
+
footer5 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: footer2, children: footer5 })
|
|
760
|
+
]
|
|
761
|
+
}
|
|
762
|
+
)
|
|
763
|
+
] })
|
|
764
|
+
] });
|
|
765
|
+
}
|
|
766
|
+
var DrawerClose = Dialog.Close;
|
|
767
|
+
|
|
549
768
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
550
769
|
var RadixMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
|
|
551
|
-
var
|
|
770
|
+
var import_react14 = require("react");
|
|
552
771
|
|
|
553
772
|
// src/components/DropdownMenu/DropdownMenu.css.ts
|
|
554
|
-
var
|
|
773
|
+
var content4 = "_1d7ahux0";
|
|
555
774
|
var danger = "_1d7ahux2";
|
|
556
|
-
var
|
|
557
|
-
var
|
|
775
|
+
var icon4 = "_1d7ahux3";
|
|
776
|
+
var item3 = "_1d7ahux1";
|
|
558
777
|
var label = "_1d7ahux5";
|
|
559
|
-
var
|
|
778
|
+
var separator2 = "_1d7ahux6";
|
|
560
779
|
var shortcut = "_1d7ahux4";
|
|
561
780
|
|
|
562
781
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
563
|
-
var
|
|
782
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
564
783
|
var DropdownMenu = RadixMenu.Root;
|
|
565
784
|
var DropdownMenuTrigger = RadixMenu.Trigger;
|
|
566
785
|
var DropdownMenuGroup = RadixMenu.Group;
|
|
567
|
-
var DropdownMenuContent = /* @__PURE__ */ (0,
|
|
786
|
+
var DropdownMenuContent = /* @__PURE__ */ (0, import_react14.forwardRef)(
|
|
568
787
|
function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
|
|
569
788
|
const portal2 = usePortalProps();
|
|
570
|
-
return /* @__PURE__ */ (0,
|
|
789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
571
790
|
RadixMenu.Content,
|
|
572
791
|
{
|
|
573
792
|
ref,
|
|
@@ -575,59 +794,59 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react10.forwardRef)(
|
|
|
575
794
|
align,
|
|
576
795
|
sideOffset,
|
|
577
796
|
collisionPadding,
|
|
578
|
-
className: cx(portal2.className,
|
|
797
|
+
className: cx(portal2.className, content4, className),
|
|
579
798
|
style: { ...portal2.style, ...style },
|
|
580
799
|
...rest
|
|
581
800
|
}
|
|
582
801
|
) });
|
|
583
802
|
}
|
|
584
803
|
);
|
|
585
|
-
var DropdownMenuItem = /* @__PURE__ */ (0,
|
|
586
|
-
function DropdownMenuItem2({ icon:
|
|
587
|
-
return /* @__PURE__ */ (0,
|
|
588
|
-
|
|
804
|
+
var DropdownMenuItem = /* @__PURE__ */ (0, import_react14.forwardRef)(
|
|
805
|
+
function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "default", className, children, ...rest }, ref) {
|
|
806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(RadixMenu.Item, { ref, className: cx(item3, color === "danger" && danger, className), ...rest, children: [
|
|
807
|
+
icon6 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: icon4, "aria-hidden": true, children: icon6 }),
|
|
589
808
|
children,
|
|
590
|
-
shortcut2 && /* @__PURE__ */ (0,
|
|
809
|
+
shortcut2 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
|
|
591
810
|
] });
|
|
592
811
|
}
|
|
593
812
|
);
|
|
594
|
-
var DropdownMenuLabel = /* @__PURE__ */ (0,
|
|
813
|
+
var DropdownMenuLabel = /* @__PURE__ */ (0, import_react14.forwardRef)(
|
|
595
814
|
function DropdownMenuLabel2({ className, ...rest }, ref) {
|
|
596
|
-
return /* @__PURE__ */ (0,
|
|
815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixMenu.Label, { ref, className: cx(label, className), ...rest });
|
|
597
816
|
}
|
|
598
817
|
);
|
|
599
|
-
var DropdownMenuSeparator = /* @__PURE__ */ (0,
|
|
818
|
+
var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react14.forwardRef)(
|
|
600
819
|
function DropdownMenuSeparator2({ className, ...rest }, ref) {
|
|
601
|
-
return /* @__PURE__ */ (0,
|
|
820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
|
|
602
821
|
}
|
|
603
822
|
);
|
|
604
823
|
|
|
605
824
|
// src/components/Input/Input.tsx
|
|
606
|
-
var
|
|
825
|
+
var import_react15 = require("react");
|
|
607
826
|
|
|
608
827
|
// src/components/Input/Input.css.ts
|
|
609
|
-
var
|
|
828
|
+
var import_createRuntimeFn12 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
610
829
|
var adornment = "_19p5zvh6";
|
|
611
830
|
var field = "_19p5zvh7";
|
|
612
831
|
var fieldFullWidth = "_19p5zvh8";
|
|
613
|
-
var helperText = (0,
|
|
832
|
+
var helperText = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
|
|
614
833
|
var input2 = "_19p5zvh5";
|
|
615
834
|
var label2 = "_19p5zvh9";
|
|
616
835
|
var requiredMark = "_19p5zvha";
|
|
617
|
-
var root5 = (0,
|
|
836
|
+
var root5 = /* @__PURE__ */ (0, import_createRuntimeFn12.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
618
837
|
|
|
619
838
|
// src/components/Input/Input.tsx
|
|
620
|
-
var
|
|
621
|
-
var Input = /* @__PURE__ */ (0,
|
|
622
|
-
return /* @__PURE__ */ (0,
|
|
839
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
840
|
+
var Input = /* @__PURE__ */ (0, import_react15.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
|
|
841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
623
842
|
"div",
|
|
624
843
|
{
|
|
625
844
|
className: cx(root5({ size, fullWidth }), rootClassName),
|
|
626
845
|
"data-invalid": invalid || void 0,
|
|
627
846
|
"data-disabled": disabled || void 0,
|
|
628
847
|
children: [
|
|
629
|
-
startAdornment && /* @__PURE__ */ (0,
|
|
630
|
-
/* @__PURE__ */ (0,
|
|
848
|
+
startAdornment && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: adornment, children: startAdornment }),
|
|
849
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
631
850
|
"input",
|
|
632
851
|
{
|
|
633
852
|
ref,
|
|
@@ -637,25 +856,25 @@ var Input = /* @__PURE__ */ (0, import_react11.forwardRef)(function Input2({ siz
|
|
|
637
856
|
...rest
|
|
638
857
|
}
|
|
639
858
|
),
|
|
640
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
859
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: adornment, children: endAdornment })
|
|
641
860
|
]
|
|
642
861
|
}
|
|
643
862
|
);
|
|
644
863
|
});
|
|
645
864
|
|
|
646
865
|
// src/components/Input/TextField.tsx
|
|
647
|
-
var
|
|
648
|
-
var
|
|
649
|
-
var TextField = /* @__PURE__ */ (0,
|
|
650
|
-
const generatedId = (0,
|
|
866
|
+
var import_react16 = require("react");
|
|
867
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
868
|
+
var TextField = /* @__PURE__ */ (0, import_react16.forwardRef)(function TextField2({ label: label5, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
|
|
869
|
+
const generatedId = (0, import_react16.useId)();
|
|
651
870
|
const inputId = id ?? generatedId;
|
|
652
871
|
const helperId = helperText2 ? `${inputId}-helper` : void 0;
|
|
653
|
-
return /* @__PURE__ */ (0,
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
required && /* @__PURE__ */ (0,
|
|
872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
873
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { htmlFor: inputId, className: label2, children: [
|
|
874
|
+
label5,
|
|
875
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
657
876
|
] }),
|
|
658
|
-
/* @__PURE__ */ (0,
|
|
877
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
659
878
|
Input,
|
|
660
879
|
{
|
|
661
880
|
ref,
|
|
@@ -667,75 +886,75 @@ var TextField = /* @__PURE__ */ (0, import_react12.forwardRef)(function TextFiel
|
|
|
667
886
|
...rest
|
|
668
887
|
}
|
|
669
888
|
),
|
|
670
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
889
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
671
890
|
] });
|
|
672
891
|
});
|
|
673
892
|
|
|
674
893
|
// src/components/Modal/Modal.tsx
|
|
675
|
-
var
|
|
676
|
-
var
|
|
894
|
+
var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
895
|
+
var import_icons8 = require("@bestow-ui/icons");
|
|
677
896
|
|
|
678
897
|
// 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
|
|
898
|
+
var import_createRuntimeFn13 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
899
|
+
var body3 = "_1pdsmv0a";
|
|
900
|
+
var closeButton3 = "_1pdsmv09";
|
|
901
|
+
var content5 = /* @__PURE__ */ (0, import_createRuntimeFn13.createRuntimeFn)({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
902
|
+
var description3 = "_1pdsmv08";
|
|
903
|
+
var footer3 = "_1pdsmv0b";
|
|
904
|
+
var header4 = "_1pdsmv05";
|
|
905
|
+
var headings2 = "_1pdsmv06";
|
|
906
|
+
var overlay2 = "_1pdsmv00";
|
|
907
|
+
var title3 = "_1pdsmv07";
|
|
689
908
|
|
|
690
909
|
// src/components/Modal/Modal.tsx
|
|
691
|
-
var
|
|
910
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
692
911
|
function Modal({
|
|
693
912
|
open,
|
|
694
913
|
defaultOpen,
|
|
695
914
|
onOpenChange,
|
|
696
915
|
trigger: trigger4,
|
|
697
|
-
title:
|
|
698
|
-
description:
|
|
916
|
+
title: title6,
|
|
917
|
+
description: description6,
|
|
699
918
|
children,
|
|
700
|
-
footer:
|
|
919
|
+
footer: footer5,
|
|
701
920
|
size,
|
|
702
921
|
hideCloseButton = false,
|
|
703
922
|
closeOnOverlayClick = true,
|
|
704
923
|
className
|
|
705
924
|
}) {
|
|
706
925
|
const portal2 = usePortalProps();
|
|
707
|
-
return /* @__PURE__ */ (0,
|
|
708
|
-
trigger4 && /* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
/* @__PURE__ */ (0,
|
|
711
|
-
/* @__PURE__ */ (0,
|
|
712
|
-
|
|
926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
|
|
927
|
+
trigger4 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Trigger, { asChild: true, children: trigger4 }),
|
|
928
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog2.Portal, { children: [
|
|
929
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
|
|
930
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
931
|
+
Dialog2.Content,
|
|
713
932
|
{
|
|
714
|
-
className: cx(portal2.className,
|
|
933
|
+
className: cx(portal2.className, content5({ size }), className),
|
|
715
934
|
style: portal2.style,
|
|
716
935
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
717
|
-
...
|
|
936
|
+
...description6 ? {} : { "aria-describedby": void 0 },
|
|
718
937
|
children: [
|
|
719
|
-
/* @__PURE__ */ (0,
|
|
720
|
-
/* @__PURE__ */ (0,
|
|
721
|
-
/* @__PURE__ */ (0,
|
|
722
|
-
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: header4, children: [
|
|
939
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: headings2, children: [
|
|
940
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Title, { className: title3, children: title6 }),
|
|
941
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Description, { className: description3, children: description6 })
|
|
723
942
|
] }),
|
|
724
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
943
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Close, { className: closeButton3, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons8.XIcon, { size: 16 }) })
|
|
725
944
|
] }),
|
|
726
|
-
children && /* @__PURE__ */ (0,
|
|
727
|
-
|
|
945
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: body3, children }),
|
|
946
|
+
footer5 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: footer3, children: footer5 })
|
|
728
947
|
]
|
|
729
948
|
}
|
|
730
949
|
)
|
|
731
950
|
] })
|
|
732
951
|
] });
|
|
733
952
|
}
|
|
734
|
-
var ModalClose =
|
|
953
|
+
var ModalClose = Dialog2.Close;
|
|
735
954
|
|
|
736
955
|
// src/components/Pagination/Pagination.tsx
|
|
737
|
-
var
|
|
738
|
-
var
|
|
956
|
+
var import_icons9 = require("@bestow-ui/icons");
|
|
957
|
+
var import_react17 = require("react");
|
|
739
958
|
|
|
740
959
|
// src/components/Pagination/getPaginationItems.ts
|
|
741
960
|
var range = (start, end) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
@@ -762,15 +981,15 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
|
|
|
762
981
|
}
|
|
763
982
|
|
|
764
983
|
// src/components/Pagination/Pagination.css.ts
|
|
765
|
-
var
|
|
984
|
+
var import_createRuntimeFn14 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
766
985
|
var ellipsis = "_1iraoak4";
|
|
767
|
-
var
|
|
768
|
-
var
|
|
986
|
+
var item4 = /* @__PURE__ */ (0, import_createRuntimeFn14.createRuntimeFn)({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
987
|
+
var list2 = "_1iraoak0";
|
|
769
988
|
|
|
770
989
|
// src/components/Pagination/Pagination.tsx
|
|
771
|
-
var
|
|
990
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
772
991
|
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,
|
|
992
|
+
var Pagination = /* @__PURE__ */ (0, import_react17.forwardRef)(function Pagination2({
|
|
774
993
|
totalPages,
|
|
775
994
|
page: pageProp,
|
|
776
995
|
defaultPage = 1,
|
|
@@ -783,7 +1002,7 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
783
1002
|
"aria-label": ariaLabel = "\uD398\uC774\uC9C0 \uD0D0\uC0C9",
|
|
784
1003
|
...rest
|
|
785
1004
|
}, ref) {
|
|
786
|
-
const [uncontrolledPage, setUncontrolledPage] = (0,
|
|
1005
|
+
const [uncontrolledPage, setUncontrolledPage] = (0, import_react17.useState)(defaultPage);
|
|
787
1006
|
if (totalPages < 1) return null;
|
|
788
1007
|
const page = Math.min(Math.max(pageProp ?? uncontrolledPage, 1), totalPages);
|
|
789
1008
|
const goTo = (next) => {
|
|
@@ -791,9 +1010,9 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
791
1010
|
if (pageProp === void 0) setUncontrolledPage(next);
|
|
792
1011
|
onPageChange?.(next);
|
|
793
1012
|
};
|
|
794
|
-
const itemClass =
|
|
795
|
-
return /* @__PURE__ */ (0,
|
|
796
|
-
/* @__PURE__ */ (0,
|
|
1013
|
+
const itemClass = item4({ size });
|
|
1014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("ul", { className: list2, children: [
|
|
1015
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
797
1016
|
"button",
|
|
798
1017
|
{
|
|
799
1018
|
type: "button",
|
|
@@ -801,23 +1020,23 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
801
1020
|
"aria-label": getItemLabel("previous", page - 1),
|
|
802
1021
|
disabled: page <= 1,
|
|
803
1022
|
onClick: () => goTo(page - 1),
|
|
804
|
-
children: /* @__PURE__ */ (0,
|
|
1023
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.ChevronLeftIcon, { size: 16 })
|
|
805
1024
|
}
|
|
806
1025
|
) }),
|
|
807
1026
|
getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
|
|
808
|
-
(
|
|
1027
|
+
(item6) => typeof item6 === "number" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
809
1028
|
"button",
|
|
810
1029
|
{
|
|
811
1030
|
type: "button",
|
|
812
1031
|
className: itemClass,
|
|
813
|
-
"aria-label": getItemLabel("page",
|
|
814
|
-
"aria-current":
|
|
815
|
-
onClick: () => goTo(
|
|
816
|
-
children:
|
|
1032
|
+
"aria-label": getItemLabel("page", item6),
|
|
1033
|
+
"aria-current": item6 === page ? "page" : void 0,
|
|
1034
|
+
onClick: () => goTo(item6),
|
|
1035
|
+
children: item6
|
|
817
1036
|
}
|
|
818
|
-
) },
|
|
1037
|
+
) }, item6) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item6)
|
|
819
1038
|
),
|
|
820
|
-
/* @__PURE__ */ (0,
|
|
1039
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
821
1040
|
"button",
|
|
822
1041
|
{
|
|
823
1042
|
type: "button",
|
|
@@ -825,7 +1044,7 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
825
1044
|
"aria-label": getItemLabel("next", page + 1),
|
|
826
1045
|
disabled: page >= totalPages,
|
|
827
1046
|
onClick: () => goTo(page + 1),
|
|
828
|
-
children: /* @__PURE__ */ (0,
|
|
1047
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.ChevronRightIcon, { size: 16 })
|
|
829
1048
|
}
|
|
830
1049
|
) })
|
|
831
1050
|
] }) });
|
|
@@ -833,22 +1052,22 @@ var Pagination = /* @__PURE__ */ (0, import_react13.forwardRef)(function Paginat
|
|
|
833
1052
|
|
|
834
1053
|
// src/components/Popover/Popover.tsx
|
|
835
1054
|
var RadixPopover = __toESM(require("@radix-ui/react-popover"), 1);
|
|
836
|
-
var
|
|
837
|
-
var
|
|
1055
|
+
var import_icons10 = require("@bestow-ui/icons");
|
|
1056
|
+
var import_react18 = require("react");
|
|
838
1057
|
|
|
839
1058
|
// src/components/Popover/Popover.css.ts
|
|
840
1059
|
var arrow = "_1j99p8x4";
|
|
841
|
-
var
|
|
842
|
-
var
|
|
843
|
-
var
|
|
844
|
-
var
|
|
1060
|
+
var closeButton4 = "_1j99p8x3";
|
|
1061
|
+
var content6 = "_1j99p8x0";
|
|
1062
|
+
var header5 = "_1j99p8x1";
|
|
1063
|
+
var title4 = "_1j99p8x2";
|
|
845
1064
|
|
|
846
1065
|
// src/components/Popover/Popover.tsx
|
|
847
|
-
var
|
|
1066
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
848
1067
|
function Popover({
|
|
849
|
-
content:
|
|
1068
|
+
content: content10,
|
|
850
1069
|
children,
|
|
851
|
-
title:
|
|
1070
|
+
title: title6,
|
|
852
1071
|
"aria-label": ariaLabel,
|
|
853
1072
|
showClose = false,
|
|
854
1073
|
showArrow = false,
|
|
@@ -862,27 +1081,27 @@ function Popover({
|
|
|
862
1081
|
style
|
|
863
1082
|
}) {
|
|
864
1083
|
const portal2 = usePortalProps();
|
|
865
|
-
const titleId = (0,
|
|
866
|
-
return /* @__PURE__ */ (0,
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
1084
|
+
const titleId = (0, import_react18.useId)();
|
|
1085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixPopover.Trigger, { asChild: true, children }),
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixPopover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
869
1088
|
RadixPopover.Content,
|
|
870
1089
|
{
|
|
871
1090
|
side,
|
|
872
1091
|
align,
|
|
873
1092
|
sideOffset: 6,
|
|
874
1093
|
collisionPadding: 8,
|
|
875
|
-
"aria-labelledby":
|
|
876
|
-
"aria-label":
|
|
877
|
-
className: cx(portal2.className,
|
|
1094
|
+
"aria-labelledby": title6 ? titleId : void 0,
|
|
1095
|
+
"aria-label": title6 ? void 0 : ariaLabel,
|
|
1096
|
+
className: cx(portal2.className, content6, className),
|
|
878
1097
|
style: { ...portal2.style, ...style },
|
|
879
1098
|
children: [
|
|
880
|
-
(
|
|
881
|
-
|
|
882
|
-
showClose && /* @__PURE__ */ (0,
|
|
1099
|
+
(title6 || showClose) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: header5, children: [
|
|
1100
|
+
title6 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { id: titleId, className: title4, children: title6 }),
|
|
1101
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixPopover.Close, { className: closeButton4, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.XIcon, { size: 16 }) })
|
|
883
1102
|
] }),
|
|
884
|
-
|
|
885
|
-
showArrow && /* @__PURE__ */ (0,
|
|
1103
|
+
content10,
|
|
1104
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
|
|
886
1105
|
]
|
|
887
1106
|
}
|
|
888
1107
|
) })
|
|
@@ -890,30 +1109,91 @@ function Popover({
|
|
|
890
1109
|
}
|
|
891
1110
|
var PopoverClose = RadixPopover.Close;
|
|
892
1111
|
|
|
1112
|
+
// src/components/Progress/Progress.tsx
|
|
1113
|
+
var import_react19 = require("react");
|
|
1114
|
+
|
|
1115
|
+
// src/components/Progress/Progress.css.ts
|
|
1116
|
+
var import_createRuntimeFn15 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1117
|
+
var header6 = "_1tvkq001";
|
|
1118
|
+
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: [] });
|
|
1119
|
+
var label3 = "_1tvkq002";
|
|
1120
|
+
var root6 = "_1tvkq000";
|
|
1121
|
+
var track = /* @__PURE__ */ (0, import_createRuntimeFn15.createRuntimeFn)({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1122
|
+
var value = "_1tvkq003";
|
|
1123
|
+
|
|
1124
|
+
// src/components/Progress/Progress.tsx
|
|
1125
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1126
|
+
var defaultFormat = (value3, max) => `${Math.round(value3 / max * 100)}%`;
|
|
1127
|
+
var Progress = /* @__PURE__ */ (0, import_react19.forwardRef)(function Progress2({
|
|
1128
|
+
value: value3,
|
|
1129
|
+
max = 100,
|
|
1130
|
+
label: label5,
|
|
1131
|
+
"aria-label": ariaLabel,
|
|
1132
|
+
showValue,
|
|
1133
|
+
formatValue = defaultFormat,
|
|
1134
|
+
size,
|
|
1135
|
+
color,
|
|
1136
|
+
className,
|
|
1137
|
+
...rest
|
|
1138
|
+
}, ref) {
|
|
1139
|
+
const labelId = (0, import_react19.useId)();
|
|
1140
|
+
const isIndeterminate = value3 === void 0 || value3 === null;
|
|
1141
|
+
const safeMax = max > 0 ? max : 100;
|
|
1142
|
+
const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value3));
|
|
1143
|
+
const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
|
|
1144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: cx(root6, className), ...rest, children: [
|
|
1145
|
+
(label5 || showValue && valueText) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: header6, children: [
|
|
1146
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: labelId, className: label3, children: label5 }),
|
|
1147
|
+
showValue && valueText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: value, "aria-hidden": true, children: valueText })
|
|
1148
|
+
] }),
|
|
1149
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1150
|
+
"div",
|
|
1151
|
+
{
|
|
1152
|
+
role: "progressbar",
|
|
1153
|
+
"aria-labelledby": label5 ? labelId : void 0,
|
|
1154
|
+
"aria-label": label5 ? void 0 : ariaLabel,
|
|
1155
|
+
"aria-valuemin": 0,
|
|
1156
|
+
"aria-valuemax": safeMax,
|
|
1157
|
+
"aria-valuenow": isIndeterminate ? void 0 : clamped,
|
|
1158
|
+
"aria-valuetext": valueText,
|
|
1159
|
+
className: track({ size }),
|
|
1160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1161
|
+
"div",
|
|
1162
|
+
{
|
|
1163
|
+
className: indicator({ color }),
|
|
1164
|
+
"data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
|
|
1165
|
+
style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
|
|
1166
|
+
}
|
|
1167
|
+
)
|
|
1168
|
+
}
|
|
1169
|
+
)
|
|
1170
|
+
] });
|
|
1171
|
+
});
|
|
1172
|
+
|
|
893
1173
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
894
1174
|
var RadixRadioGroup = __toESM(require("@radix-ui/react-radio-group"), 1);
|
|
895
|
-
var
|
|
1175
|
+
var import_react20 = require("react");
|
|
896
1176
|
|
|
897
1177
|
// src/components/RadioGroup/RadioGroup.css.ts
|
|
898
|
-
var
|
|
899
|
-
var
|
|
1178
|
+
var import_createRuntimeFn16 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1179
|
+
var description4 = "_1w9iwjmd";
|
|
900
1180
|
var groupLabel = "_1w9iwjme";
|
|
901
|
-
var
|
|
902
|
-
var items = (0,
|
|
1181
|
+
var indicator2 = "_1w9iwjma";
|
|
1182
|
+
var items = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
|
|
903
1183
|
var labelText = "_1w9iwjmc";
|
|
904
|
-
var option = (0,
|
|
905
|
-
var radio = (0,
|
|
1184
|
+
var option = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1185
|
+
var radio = /* @__PURE__ */ (0, import_createRuntimeFn16.createRuntimeFn)({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
906
1186
|
var text = "_1w9iwjmb";
|
|
907
1187
|
|
|
908
1188
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
909
|
-
var
|
|
910
|
-
var RadioGroup = /* @__PURE__ */ (0,
|
|
1189
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1190
|
+
var RadioGroup = /* @__PURE__ */ (0, import_react20.forwardRef)(function RadioGroup2(props, ref) {
|
|
911
1191
|
const {
|
|
912
1192
|
options,
|
|
913
|
-
value:
|
|
1193
|
+
value: value3,
|
|
914
1194
|
defaultValue,
|
|
915
1195
|
onValueChange,
|
|
916
|
-
label:
|
|
1196
|
+
label: label5,
|
|
917
1197
|
helperText: helperText2,
|
|
918
1198
|
error,
|
|
919
1199
|
orientation = "vertical",
|
|
@@ -926,21 +1206,21 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
926
1206
|
className
|
|
927
1207
|
} = props;
|
|
928
1208
|
const isControlled = "value" in props;
|
|
929
|
-
const generatedId = (0,
|
|
1209
|
+
const generatedId = (0, import_react20.useId)();
|
|
930
1210
|
const baseId = id ?? generatedId;
|
|
931
|
-
const labelId =
|
|
1211
|
+
const labelId = label5 ? `${baseId}-label` : void 0;
|
|
932
1212
|
const helperId = helperText2 ? `${baseId}-helper` : void 0;
|
|
933
|
-
return /* @__PURE__ */ (0,
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
required && /* @__PURE__ */ (0,
|
|
1213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx(field, className), children: [
|
|
1214
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { id: labelId, className: cx(label2, groupLabel), children: [
|
|
1215
|
+
label5,
|
|
1216
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
937
1217
|
] }),
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
1218
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
939
1219
|
RadixRadioGroup.Root,
|
|
940
1220
|
{
|
|
941
1221
|
ref,
|
|
942
1222
|
id: baseId,
|
|
943
|
-
value: isControlled ?
|
|
1223
|
+
value: isControlled ? value3 ?? "" : void 0,
|
|
944
1224
|
defaultValue,
|
|
945
1225
|
onValueChange,
|
|
946
1226
|
orientation,
|
|
@@ -956,8 +1236,8 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
956
1236
|
const itemId = `${baseId}-${option2.value}`;
|
|
957
1237
|
const descriptionId = option2.description ? `${itemId}-description` : void 0;
|
|
958
1238
|
const itemDisabled = disabled || option2.disabled;
|
|
959
|
-
return /* @__PURE__ */ (0,
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
961
1241
|
RadixRadioGroup.Item,
|
|
962
1242
|
{
|
|
963
1243
|
id: itemId,
|
|
@@ -965,45 +1245,45 @@ var RadioGroup = /* @__PURE__ */ (0, import_react15.forwardRef)(function RadioGr
|
|
|
965
1245
|
disabled: option2.disabled,
|
|
966
1246
|
"aria-describedby": descriptionId,
|
|
967
1247
|
className: radio({ size }),
|
|
968
|
-
children: /* @__PURE__ */ (0,
|
|
1248
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RadixRadioGroup.Indicator, { className: indicator2 })
|
|
969
1249
|
}
|
|
970
1250
|
),
|
|
971
|
-
/* @__PURE__ */ (0,
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
973
|
-
option2.description && /* @__PURE__ */ (0,
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: text, children: [
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: itemId, className: labelText, children: option2.label }),
|
|
1253
|
+
option2.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: descriptionId, className: description4, children: option2.description })
|
|
974
1254
|
] })
|
|
975
1255
|
] }, option2.value);
|
|
976
1256
|
})
|
|
977
1257
|
}
|
|
978
1258
|
),
|
|
979
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
1259
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
980
1260
|
] });
|
|
981
1261
|
});
|
|
982
1262
|
|
|
983
1263
|
// src/components/Select/Select.tsx
|
|
984
1264
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
985
|
-
var
|
|
986
|
-
var
|
|
1265
|
+
var import_react21 = require("react");
|
|
1266
|
+
var import_icons11 = require("@bestow-ui/icons");
|
|
987
1267
|
|
|
988
1268
|
// src/components/Select/Select.css.ts
|
|
989
|
-
var
|
|
990
|
-
var
|
|
991
|
-
var
|
|
1269
|
+
var content7 = "_1kx81e83";
|
|
1270
|
+
var icon5 = "_1kx81e82";
|
|
1271
|
+
var item5 = "_1kx81e85";
|
|
992
1272
|
var itemIndicator = "_1kx81e86";
|
|
993
1273
|
var trigger2 = "_1kx81e80";
|
|
994
|
-
var
|
|
1274
|
+
var value2 = "_1kx81e81";
|
|
995
1275
|
var viewport = "_1kx81e84";
|
|
996
1276
|
|
|
997
1277
|
// src/components/Select/Select.tsx
|
|
998
|
-
var
|
|
999
|
-
var Select = /* @__PURE__ */ (0,
|
|
1278
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1279
|
+
var Select = /* @__PURE__ */ (0, import_react21.forwardRef)(function Select2(props, ref) {
|
|
1000
1280
|
const {
|
|
1001
1281
|
options,
|
|
1002
|
-
value:
|
|
1282
|
+
value: value3,
|
|
1003
1283
|
defaultValue,
|
|
1004
1284
|
onValueChange,
|
|
1005
1285
|
placeholder,
|
|
1006
|
-
label:
|
|
1286
|
+
label: label5,
|
|
1007
1287
|
helperText: helperText2,
|
|
1008
1288
|
error,
|
|
1009
1289
|
size,
|
|
@@ -1016,26 +1296,26 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1016
1296
|
className
|
|
1017
1297
|
} = props;
|
|
1018
1298
|
const isControlled = "value" in props;
|
|
1019
|
-
const generatedId = (0,
|
|
1299
|
+
const generatedId = (0, import_react21.useId)();
|
|
1020
1300
|
const triggerId = id ?? generatedId;
|
|
1021
1301
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
1022
1302
|
const portal2 = usePortalProps();
|
|
1023
|
-
return /* @__PURE__ */ (0,
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
required && /* @__PURE__ */ (0,
|
|
1303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
1304
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { htmlFor: triggerId, className: label2, children: [
|
|
1305
|
+
label5,
|
|
1306
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1027
1307
|
] }),
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1029
1309
|
RadixSelect.Root,
|
|
1030
1310
|
{
|
|
1031
|
-
value: isControlled ?
|
|
1311
|
+
value: isControlled ? value3 ?? "" : void 0,
|
|
1032
1312
|
defaultValue,
|
|
1033
1313
|
onValueChange,
|
|
1034
1314
|
disabled,
|
|
1035
1315
|
required,
|
|
1036
1316
|
name,
|
|
1037
1317
|
children: [
|
|
1038
|
-
/* @__PURE__ */ (0,
|
|
1318
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1039
1319
|
RadixSelect.Trigger,
|
|
1040
1320
|
{
|
|
1041
1321
|
ref,
|
|
@@ -1046,28 +1326,28 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1046
1326
|
"data-invalid": error || void 0,
|
|
1047
1327
|
className: cx(root5({ size, fullWidth }), trigger2, className),
|
|
1048
1328
|
children: [
|
|
1049
|
-
/* @__PURE__ */ (0,
|
|
1050
|
-
/* @__PURE__ */ (0,
|
|
1329
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: value2, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.Icon, { className: icon5, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.ChevronDownIcon, { size: 16 }) })
|
|
1051
1331
|
]
|
|
1052
1332
|
}
|
|
1053
1333
|
),
|
|
1054
|
-
/* @__PURE__ */ (0,
|
|
1334
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1055
1335
|
RadixSelect.Content,
|
|
1056
1336
|
{
|
|
1057
1337
|
position: "popper",
|
|
1058
1338
|
sideOffset: 4,
|
|
1059
1339
|
collisionPadding: 8,
|
|
1060
|
-
className: cx(portal2.className,
|
|
1340
|
+
className: cx(portal2.className, content7),
|
|
1061
1341
|
style: portal2.style,
|
|
1062
|
-
children: /* @__PURE__ */ (0,
|
|
1342
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1063
1343
|
RadixSelect.Item,
|
|
1064
1344
|
{
|
|
1065
1345
|
value: option2.value,
|
|
1066
1346
|
disabled: option2.disabled,
|
|
1067
|
-
className:
|
|
1347
|
+
className: item5,
|
|
1068
1348
|
children: [
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.ItemText, { children: option2.label }),
|
|
1350
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.CheckIcon, { size: 16 }) })
|
|
1071
1351
|
]
|
|
1072
1352
|
},
|
|
1073
1353
|
option2.value
|
|
@@ -1077,29 +1357,29 @@ var Select = /* @__PURE__ */ (0, import_react16.forwardRef)(function Select2(pro
|
|
|
1077
1357
|
]
|
|
1078
1358
|
}
|
|
1079
1359
|
),
|
|
1080
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
1360
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
1081
1361
|
] });
|
|
1082
1362
|
});
|
|
1083
1363
|
|
|
1084
1364
|
// src/components/Skeleton/Skeleton.tsx
|
|
1085
1365
|
var import_dynamic2 = require("@vanilla-extract/dynamic");
|
|
1086
|
-
var
|
|
1366
|
+
var import_react22 = require("react");
|
|
1087
1367
|
|
|
1088
1368
|
// src/components/Skeleton/Skeleton.css.ts
|
|
1089
|
-
var
|
|
1369
|
+
var import_createRuntimeFn17 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1090
1370
|
var height = "var(--_1s8datd1)";
|
|
1091
1371
|
var lines = "_1s8datd6";
|
|
1092
|
-
var skeleton = (0,
|
|
1372
|
+
var skeleton = /* @__PURE__ */ (0, import_createRuntimeFn17.createRuntimeFn)({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
|
|
1093
1373
|
var width = "var(--_1s8datd0)";
|
|
1094
1374
|
|
|
1095
1375
|
// src/components/Skeleton/Skeleton.tsx
|
|
1096
|
-
var
|
|
1097
|
-
var toCss = (
|
|
1098
|
-
var Skeleton = /* @__PURE__ */ (0,
|
|
1376
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1377
|
+
var toCss = (value3) => typeof value3 === "number" ? `${value3}px` : value3;
|
|
1378
|
+
var Skeleton = /* @__PURE__ */ (0, import_react22.forwardRef)(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
|
|
1099
1379
|
const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
|
|
1100
1380
|
const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
|
|
1101
1381
|
if (variant === "text" && lines2 > 1) {
|
|
1102
|
-
return /* @__PURE__ */ (0,
|
|
1382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1103
1383
|
"span",
|
|
1104
1384
|
{
|
|
1105
1385
|
ref,
|
|
@@ -1107,7 +1387,7 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1107
1387
|
className: cx(lines, className),
|
|
1108
1388
|
style: { ...(0, import_dynamic2.assignInlineVars)({ [width]: w }), ...style },
|
|
1109
1389
|
...rest,
|
|
1110
|
-
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0,
|
|
1390
|
+
children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1111
1391
|
"span",
|
|
1112
1392
|
{
|
|
1113
1393
|
className: skeleton({ variant }),
|
|
@@ -1118,7 +1398,7 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1118
1398
|
}
|
|
1119
1399
|
);
|
|
1120
1400
|
}
|
|
1121
|
-
return /* @__PURE__ */ (0,
|
|
1401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1122
1402
|
"span",
|
|
1123
1403
|
{
|
|
1124
1404
|
ref,
|
|
@@ -1131,96 +1411,96 @@ var Skeleton = /* @__PURE__ */ (0, import_react17.forwardRef)(function Skeleton2
|
|
|
1131
1411
|
});
|
|
1132
1412
|
|
|
1133
1413
|
// src/components/Stack/Stack.tsx
|
|
1134
|
-
var
|
|
1414
|
+
var import_react23 = require("react");
|
|
1135
1415
|
|
|
1136
1416
|
// src/components/Stack/Stack.css.ts
|
|
1137
|
-
var
|
|
1138
|
-
var stack = (0,
|
|
1417
|
+
var import_createRuntimeFn18 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1418
|
+
var stack = /* @__PURE__ */ (0, import_createRuntimeFn18.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
1419
|
|
|
1140
1420
|
// src/components/Stack/Stack.tsx
|
|
1141
|
-
var
|
|
1142
|
-
var Stack = /* @__PURE__ */ (0,
|
|
1143
|
-
return /* @__PURE__ */ (0,
|
|
1421
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1422
|
+
var Stack = /* @__PURE__ */ (0, import_react23.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
1423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
|
|
1144
1424
|
});
|
|
1145
1425
|
|
|
1146
1426
|
// src/components/Switch/Switch.tsx
|
|
1147
1427
|
var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
|
|
1148
|
-
var
|
|
1428
|
+
var import_react24 = require("react");
|
|
1149
1429
|
|
|
1150
1430
|
// src/components/Switch/Switch.css.ts
|
|
1151
|
-
var
|
|
1152
|
-
var
|
|
1153
|
-
var
|
|
1154
|
-
var thumb = (0,
|
|
1155
|
-
var
|
|
1431
|
+
var import_createRuntimeFn19 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1432
|
+
var label4 = "o33ul29";
|
|
1433
|
+
var root7 = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1434
|
+
var thumb = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1435
|
+
var track2 = /* @__PURE__ */ (0, import_createRuntimeFn19.createRuntimeFn)({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
|
|
1156
1436
|
|
|
1157
1437
|
// src/components/Switch/Switch.tsx
|
|
1158
|
-
var
|
|
1159
|
-
var Switch = /* @__PURE__ */ (0,
|
|
1160
|
-
const generatedId = (0,
|
|
1438
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1439
|
+
var Switch = /* @__PURE__ */ (0, import_react24.forwardRef)(function Switch2({ label: label5, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
|
|
1440
|
+
const generatedId = (0, import_react24.useId)();
|
|
1161
1441
|
const switchId = id ?? generatedId;
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
-
/* @__PURE__ */ (0,
|
|
1442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: cx(root7({ size }), className), "data-disabled": disabled || void 0, children: [
|
|
1443
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1164
1444
|
RadixSwitch.Root,
|
|
1165
1445
|
{
|
|
1166
1446
|
ref,
|
|
1167
1447
|
id: switchId,
|
|
1168
1448
|
disabled,
|
|
1169
1449
|
"aria-label": ariaLabel,
|
|
1170
|
-
className:
|
|
1450
|
+
className: track2({ size }),
|
|
1171
1451
|
...rest,
|
|
1172
|
-
children: /* @__PURE__ */ (0,
|
|
1452
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadixSwitch.Thumb, { className: thumb({ size }) })
|
|
1173
1453
|
}
|
|
1174
1454
|
),
|
|
1175
|
-
|
|
1455
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: switchId, className: label4, children: label5 })
|
|
1176
1456
|
] });
|
|
1177
1457
|
});
|
|
1178
1458
|
|
|
1179
1459
|
// src/components/Tabs/Tabs.tsx
|
|
1180
1460
|
var RadixTabs = __toESM(require("@radix-ui/react-tabs"), 1);
|
|
1181
|
-
var
|
|
1461
|
+
var import_react25 = require("react");
|
|
1182
1462
|
|
|
1183
1463
|
// src/components/Tabs/Tabs.css.ts
|
|
1184
|
-
var
|
|
1185
|
-
var
|
|
1186
|
-
var
|
|
1187
|
-
var trigger3 = (0,
|
|
1464
|
+
var import_createRuntimeFn20 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1465
|
+
var content8 = "fvhbtda";
|
|
1466
|
+
var list3 = /* @__PURE__ */ (0, import_createRuntimeFn20.createRuntimeFn)({ defaultClassName: "fvhbtd0", variantClassNames: { variant: { line: "fvhbtd1", soft: "fvhbtd2" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
|
|
1467
|
+
var trigger3 = /* @__PURE__ */ (0, import_createRuntimeFn20.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
1468
|
|
|
1189
1469
|
// src/components/Tabs/Tabs.tsx
|
|
1190
|
-
var
|
|
1191
|
-
var TabsStyleContext = /* @__PURE__ */ (0,
|
|
1192
|
-
var Tabs = /* @__PURE__ */ (0,
|
|
1470
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1471
|
+
var TabsStyleContext = /* @__PURE__ */ (0, import_react25.createContext)({ variant: "line", size: "md" });
|
|
1472
|
+
var Tabs = /* @__PURE__ */ (0, import_react25.forwardRef)(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
|
|
1193
1473
|
const controlled = "value" in props ? { value: props.value ?? "" } : {};
|
|
1194
|
-
return /* @__PURE__ */ (0,
|
|
1474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixTabs.Root, { ref, ...props, ...controlled }) });
|
|
1195
1475
|
});
|
|
1196
|
-
var TabsList = /* @__PURE__ */ (0,
|
|
1197
|
-
const { variant } = (0,
|
|
1198
|
-
return /* @__PURE__ */ (0,
|
|
1476
|
+
var TabsList = /* @__PURE__ */ (0, import_react25.forwardRef)(function TabsList2({ className, ...rest }, ref) {
|
|
1477
|
+
const { variant } = (0, import_react25.useContext)(TabsStyleContext);
|
|
1478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixTabs.List, { ref, className: cx(list3({ variant }), className), ...rest });
|
|
1199
1479
|
});
|
|
1200
|
-
var TabsTrigger = /* @__PURE__ */ (0,
|
|
1201
|
-
const { variant, size } = (0,
|
|
1202
|
-
return /* @__PURE__ */ (0,
|
|
1480
|
+
var TabsTrigger = /* @__PURE__ */ (0, import_react25.forwardRef)(function TabsTrigger2({ className, ...rest }, ref) {
|
|
1481
|
+
const { variant, size } = (0, import_react25.useContext)(TabsStyleContext);
|
|
1482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
|
|
1203
1483
|
});
|
|
1204
|
-
var TabsContent = /* @__PURE__ */ (0,
|
|
1205
|
-
return /* @__PURE__ */ (0,
|
|
1484
|
+
var TabsContent = /* @__PURE__ */ (0, import_react25.forwardRef)(function TabsContent2({ className, ...rest }, ref) {
|
|
1485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadixTabs.Content, { ref, className: cx(content8, className), ...rest });
|
|
1206
1486
|
});
|
|
1207
1487
|
|
|
1208
1488
|
// src/components/Textarea/Textarea.tsx
|
|
1209
|
-
var
|
|
1489
|
+
var import_react26 = require("react");
|
|
1210
1490
|
|
|
1211
1491
|
// src/components/Textarea/Textarea.css.ts
|
|
1212
|
-
var
|
|
1492
|
+
var import_createRuntimeFn21 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1213
1493
|
var count = "_1koawa9";
|
|
1214
1494
|
var countOver = "_1koawaa";
|
|
1215
1495
|
var defaultWidth = "_1koawa7";
|
|
1216
|
-
var
|
|
1217
|
-
var textarea = (0,
|
|
1496
|
+
var footer4 = "_1koawa8";
|
|
1497
|
+
var textarea = /* @__PURE__ */ (0, import_createRuntimeFn21.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
1498
|
|
|
1219
1499
|
// src/components/Textarea/Textarea.tsx
|
|
1220
|
-
var
|
|
1221
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1222
|
-
var Textarea = /* @__PURE__ */ (0,
|
|
1223
|
-
label:
|
|
1500
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1501
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react26.useLayoutEffect : import_react26.useEffect;
|
|
1502
|
+
var Textarea = /* @__PURE__ */ (0, import_react26.forwardRef)(function Textarea2({
|
|
1503
|
+
label: label5,
|
|
1224
1504
|
helperText: helperText2,
|
|
1225
1505
|
error,
|
|
1226
1506
|
size,
|
|
@@ -1231,7 +1511,7 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1231
1511
|
required,
|
|
1232
1512
|
id,
|
|
1233
1513
|
rows = 3,
|
|
1234
|
-
value:
|
|
1514
|
+
value: value3,
|
|
1235
1515
|
defaultValue,
|
|
1236
1516
|
onChange,
|
|
1237
1517
|
maxLength,
|
|
@@ -1240,37 +1520,37 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1240
1520
|
"aria-describedby": ariaDescribedBy,
|
|
1241
1521
|
...rest
|
|
1242
1522
|
}, ref) {
|
|
1243
|
-
const generatedId = (0,
|
|
1523
|
+
const generatedId = (0, import_react26.useId)();
|
|
1244
1524
|
const textareaId = id ?? generatedId;
|
|
1245
1525
|
const helperId = helperText2 ? `${textareaId}-helper` : void 0;
|
|
1246
|
-
const innerRef = (0,
|
|
1247
|
-
const [uncontrolledLength, setUncontrolledLength] = (0,
|
|
1248
|
-
const length =
|
|
1249
|
-
const fitHeight = (0,
|
|
1526
|
+
const innerRef = (0, import_react26.useRef)(null);
|
|
1527
|
+
const [uncontrolledLength, setUncontrolledLength] = (0, import_react26.useState)(() => String(defaultValue ?? "").length);
|
|
1528
|
+
const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
|
|
1529
|
+
const fitHeight = (0, import_react26.useCallback)(() => {
|
|
1250
1530
|
const el = innerRef.current;
|
|
1251
1531
|
if (!autoResize || !el) return;
|
|
1252
1532
|
el.style.height = "auto";
|
|
1253
1533
|
const borders = el.offsetHeight - el.clientHeight;
|
|
1254
1534
|
el.style.height = `${el.scrollHeight + borders}px`;
|
|
1255
1535
|
}, [autoResize]);
|
|
1256
|
-
useIsomorphicLayoutEffect(fitHeight, [fitHeight,
|
|
1536
|
+
useIsomorphicLayoutEffect(fitHeight, [fitHeight, value3]);
|
|
1257
1537
|
const handleChange = (event) => {
|
|
1258
|
-
if (
|
|
1538
|
+
if (value3 === void 0) setUncontrolledLength(event.target.value.length);
|
|
1259
1539
|
fitHeight();
|
|
1260
1540
|
onChange?.(event);
|
|
1261
1541
|
};
|
|
1262
|
-
return /* @__PURE__ */ (0,
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
required && /* @__PURE__ */ (0,
|
|
1542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
1543
|
+
label5 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: textareaId, className: label2, children: [
|
|
1544
|
+
label5,
|
|
1545
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
1266
1546
|
] }),
|
|
1267
|
-
/* @__PURE__ */ (0,
|
|
1547
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1268
1548
|
"textarea",
|
|
1269
1549
|
{
|
|
1270
1550
|
ref: mergeRefs(innerRef, ref),
|
|
1271
1551
|
id: textareaId,
|
|
1272
1552
|
rows,
|
|
1273
|
-
value:
|
|
1553
|
+
value: value3,
|
|
1274
1554
|
defaultValue,
|
|
1275
1555
|
onChange: handleChange,
|
|
1276
1556
|
maxLength,
|
|
@@ -1286,49 +1566,49 @@ var Textarea = /* @__PURE__ */ (0, import_react21.forwardRef)(function Textarea2
|
|
|
1286
1566
|
...rest
|
|
1287
1567
|
}
|
|
1288
1568
|
),
|
|
1289
|
-
(helperText2 || showCount) && /* @__PURE__ */ (0,
|
|
1290
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
1291
|
-
showCount && /* @__PURE__ */ (0,
|
|
1569
|
+
(helperText2 || showCount) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: footer4, children: [
|
|
1570
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 }),
|
|
1571
|
+
showCount && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
|
|
1292
1572
|
] })
|
|
1293
1573
|
] });
|
|
1294
1574
|
});
|
|
1295
1575
|
|
|
1296
1576
|
// src/components/Toast/Toast.tsx
|
|
1297
1577
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
1298
|
-
var
|
|
1299
|
-
var
|
|
1578
|
+
var import_react27 = require("react");
|
|
1579
|
+
var import_icons12 = require("@bestow-ui/icons");
|
|
1300
1580
|
|
|
1301
1581
|
// src/components/Toast/Toast.css.ts
|
|
1302
|
-
var
|
|
1303
|
-
var
|
|
1304
|
-
var close = "
|
|
1305
|
-
var
|
|
1306
|
-
var
|
|
1307
|
-
var toast = (0,
|
|
1582
|
+
var import_createRuntimeFn22 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1583
|
+
var action2 = "_1g11zvx8";
|
|
1584
|
+
var close = "_1g11zvx9";
|
|
1585
|
+
var description5 = "_1g11zvx7";
|
|
1586
|
+
var title5 = "_1g11zvx6";
|
|
1587
|
+
var toast = /* @__PURE__ */ (0, import_createRuntimeFn22.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", warning: "_1g11zvx4", danger: "_1g11zvx5" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
|
|
1308
1588
|
var viewport2 = "_1g11zvx0";
|
|
1309
1589
|
|
|
1310
1590
|
// src/components/Toast/Toast.tsx
|
|
1311
|
-
var
|
|
1591
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1312
1592
|
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,
|
|
1593
|
+
var ToastContext = /* @__PURE__ */ (0, import_react27.createContext)(null);
|
|
1594
|
+
function ToastProvider({ children, duration = 5e3, label: label5 = "\uC54C\uB9BC" }) {
|
|
1595
|
+
const [toasts, setToasts] = (0, import_react27.useState)([]);
|
|
1596
|
+
const nextId = (0, import_react27.useRef)(0);
|
|
1317
1597
|
const portal2 = usePortalProps();
|
|
1318
|
-
const toast2 = (0,
|
|
1598
|
+
const toast2 = (0, import_react27.useCallback)((options) => {
|
|
1319
1599
|
const id = nextId.current++;
|
|
1320
1600
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
1321
1601
|
return id;
|
|
1322
1602
|
}, []);
|
|
1323
|
-
const dismiss = (0,
|
|
1603
|
+
const dismiss = (0, import_react27.useCallback)((id) => {
|
|
1324
1604
|
const isTarget = (t) => id === void 0 || t.id === id;
|
|
1325
1605
|
setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
|
|
1326
1606
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
1327
1607
|
}, []);
|
|
1328
|
-
const
|
|
1329
|
-
return /* @__PURE__ */ (0,
|
|
1608
|
+
const value3 = (0, import_react27.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
1609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(RadixToast.Provider, { duration, label: label5, swipeDirection: "right", children: [
|
|
1330
1610
|
children,
|
|
1331
|
-
toasts.map(({ id, open, title:
|
|
1611
|
+
toasts.map(({ id, open, title: title6, description: description6, variant, duration: itemDuration, action: action3 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1332
1612
|
RadixToast.Root,
|
|
1333
1613
|
{
|
|
1334
1614
|
open,
|
|
@@ -1338,19 +1618,19 @@ function ToastProvider({ children, duration = 5e3, label: label4 = "\uC54C\uB9BC
|
|
|
1338
1618
|
},
|
|
1339
1619
|
className: toast({ variant }),
|
|
1340
1620
|
children: [
|
|
1341
|
-
/* @__PURE__ */ (0,
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
/* @__PURE__ */ (0,
|
|
1621
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixToast.Title, { className: title5, children: title6 }),
|
|
1622
|
+
description6 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixToast.Description, { className: description5, children: description6 }),
|
|
1623
|
+
action3 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons12.XIcon, { size: 16 }) })
|
|
1345
1625
|
]
|
|
1346
1626
|
},
|
|
1347
1627
|
id
|
|
1348
1628
|
)),
|
|
1349
|
-
/* @__PURE__ */ (0,
|
|
1629
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
1350
1630
|
] }) });
|
|
1351
1631
|
}
|
|
1352
1632
|
function useToast() {
|
|
1353
|
-
const context = (0,
|
|
1633
|
+
const context = (0, import_react27.useContext)(ToastContext);
|
|
1354
1634
|
if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
|
|
1355
1635
|
return context;
|
|
1356
1636
|
}
|
|
@@ -1360,12 +1640,12 @@ var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
|
1360
1640
|
|
|
1361
1641
|
// src/components/Tooltip/Tooltip.css.ts
|
|
1362
1642
|
var arrow2 = "z7rufs1";
|
|
1363
|
-
var
|
|
1643
|
+
var content9 = "z7rufs0";
|
|
1364
1644
|
|
|
1365
1645
|
// src/components/Tooltip/Tooltip.tsx
|
|
1366
|
-
var
|
|
1646
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1367
1647
|
function Tooltip({
|
|
1368
|
-
content:
|
|
1648
|
+
content: content10,
|
|
1369
1649
|
children,
|
|
1370
1650
|
side = "top",
|
|
1371
1651
|
align = "center",
|
|
@@ -1377,21 +1657,21 @@ function Tooltip({
|
|
|
1377
1657
|
className
|
|
1378
1658
|
}) {
|
|
1379
1659
|
const portal2 = usePortalProps();
|
|
1380
|
-
if (disabled ||
|
|
1381
|
-
return /* @__PURE__ */ (0,
|
|
1382
|
-
/* @__PURE__ */ (0,
|
|
1383
|
-
/* @__PURE__ */ (0,
|
|
1660
|
+
if (disabled || content10 == null || content10 === "") return children;
|
|
1661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
1663
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1384
1664
|
RadixTooltip.Content,
|
|
1385
1665
|
{
|
|
1386
1666
|
side,
|
|
1387
1667
|
align,
|
|
1388
1668
|
sideOffset: 6,
|
|
1389
1669
|
collisionPadding: 8,
|
|
1390
|
-
className: cx(portal2.className,
|
|
1670
|
+
className: cx(portal2.className, content9, className),
|
|
1391
1671
|
style: portal2.style,
|
|
1392
1672
|
children: [
|
|
1393
|
-
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
1673
|
+
content10,
|
|
1674
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
|
|
1395
1675
|
]
|
|
1396
1676
|
}
|
|
1397
1677
|
) })
|
|
@@ -1399,14 +1679,14 @@ function Tooltip({
|
|
|
1399
1679
|
}
|
|
1400
1680
|
|
|
1401
1681
|
// src/components/Typography/Typography.tsx
|
|
1402
|
-
var
|
|
1682
|
+
var import_react28 = require("react");
|
|
1403
1683
|
|
|
1404
1684
|
// src/components/Typography/Typography.css.ts
|
|
1405
|
-
var
|
|
1406
|
-
var typography = (0,
|
|
1685
|
+
var import_createRuntimeFn23 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
1686
|
+
var typography = /* @__PURE__ */ (0, import_createRuntimeFn23.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
1687
|
|
|
1408
1688
|
// src/components/Typography/Typography.tsx
|
|
1409
|
-
var
|
|
1689
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1410
1690
|
var defaultElement = {
|
|
1411
1691
|
display: "h1",
|
|
1412
1692
|
h1: "h1",
|
|
@@ -1418,9 +1698,9 @@ var defaultElement = {
|
|
|
1418
1698
|
"body-sm": "p",
|
|
1419
1699
|
caption: "span"
|
|
1420
1700
|
};
|
|
1421
|
-
var Typography = /* @__PURE__ */ (0,
|
|
1701
|
+
var Typography = /* @__PURE__ */ (0, import_react28.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
1422
1702
|
const Component = as ?? defaultElement[variant];
|
|
1423
|
-
return /* @__PURE__ */ (0,
|
|
1703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1424
1704
|
Component,
|
|
1425
1705
|
{
|
|
1426
1706
|
ref,
|
|
@@ -1433,8 +1713,10 @@ var Typography = /* @__PURE__ */ (0, import_react23.forwardRef)(function Typogra
|
|
|
1433
1713
|
0 && (module.exports = {
|
|
1434
1714
|
Accordion,
|
|
1435
1715
|
AccordionItem,
|
|
1716
|
+
Alert,
|
|
1436
1717
|
Avatar,
|
|
1437
1718
|
Badge,
|
|
1719
|
+
Breadcrumb,
|
|
1438
1720
|
Button,
|
|
1439
1721
|
Card,
|
|
1440
1722
|
CardBody,
|
|
@@ -1442,6 +1724,8 @@ var Typography = /* @__PURE__ */ (0, import_react23.forwardRef)(function Typogra
|
|
|
1442
1724
|
CardHeader,
|
|
1443
1725
|
Checkbox,
|
|
1444
1726
|
Divider,
|
|
1727
|
+
Drawer,
|
|
1728
|
+
DrawerClose,
|
|
1445
1729
|
DropdownMenu,
|
|
1446
1730
|
DropdownMenuContent,
|
|
1447
1731
|
DropdownMenuGroup,
|
|
@@ -1449,12 +1733,15 @@ var Typography = /* @__PURE__ */ (0, import_react23.forwardRef)(function Typogra
|
|
|
1449
1733
|
DropdownMenuLabel,
|
|
1450
1734
|
DropdownMenuSeparator,
|
|
1451
1735
|
DropdownMenuTrigger,
|
|
1736
|
+
IconButton,
|
|
1452
1737
|
Input,
|
|
1738
|
+
Link,
|
|
1453
1739
|
Modal,
|
|
1454
1740
|
ModalClose,
|
|
1455
1741
|
Pagination,
|
|
1456
1742
|
Popover,
|
|
1457
1743
|
PopoverClose,
|
|
1744
|
+
Progress,
|
|
1458
1745
|
RadioGroup,
|
|
1459
1746
|
Select,
|
|
1460
1747
|
Skeleton,
|