@bestow-ui/react 0.12.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,3507 +1,2 @@
1
- "use client";
2
-
3
- // src/theme/contract.css.ts
4
- var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
5
- 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)" } };
6
-
7
- // src/theme/color.ts
8
- import { darkColors, lightColors, palette } from "@bestow-ui/tokens";
9
- function parseHex(hex) {
10
- const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
11
- if (!m) throw new Error(`\uC62C\uBC14\uB978 hex \uC0C9\uC774 \uC544\uB2C8\uC5D0\uC694: "${hex}" (\uC608: "#7c3aed")`);
12
- let h = m[1];
13
- if (h.length === 3) h = h.replace(/./g, (c) => c + c);
14
- return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
15
- }
16
- function toHex(rgb) {
17
- return `#${rgb.map(
18
- (v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")
19
- ).join("")}`;
20
- }
21
- var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
22
- var fromLinear = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
23
- function rgbToOklch([r, g, b]) {
24
- const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)];
25
- const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
26
- const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
27
- const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
28
- const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
29
- const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
30
- const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
31
- return { l: L, c: Math.hypot(a, bb), h: Math.atan2(bb, a) };
32
- }
33
- function oklchToRgbUnclamped({ l, c, h }) {
34
- const a = c * Math.cos(h);
35
- const b = c * Math.sin(h);
36
- const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
37
- const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
38
- const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
39
- return [
40
- fromLinear(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_),
41
- fromLinear(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_),
42
- fromLinear(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_)
43
- ];
44
- }
45
- var inGamut = (rgb) => rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
46
- function oklchToRgb(color) {
47
- const l = Math.min(1, Math.max(0, color.l));
48
- let rgb = oklchToRgbUnclamped({ ...color, l });
49
- if (inGamut(rgb)) return rgb;
50
- let lo = 0;
51
- let hi = color.c;
52
- for (let i = 0; i < 20; i++) {
53
- const mid = (lo + hi) / 2;
54
- if (inGamut(oklchToRgbUnclamped({ l, c: mid, h: color.h }))) lo = mid;
55
- else hi = mid;
56
- }
57
- rgb = oklchToRgbUnclamped({ l, c: lo, h: color.h });
58
- return rgb;
59
- }
60
- function luminance([r, g, b]) {
61
- return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
62
- }
63
- function contrastRatio(a, b) {
64
- const [la, lb] = [luminance(parseHex(a)), luminance(parseHex(b))];
65
- return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
66
- }
67
- function blend(fg, alpha, bg) {
68
- const [f, b] = [parseHex(fg), parseHex(bg)];
69
- return toHex(f.map((v, i) => v * alpha + b[i] * (1 - alpha)));
70
- }
71
- var withL = (base, l, c = base.c) => toHex(oklchToRgb({ l, c, h: base.h }));
72
- function findReadable(base, startL, step, backgrounds) {
73
- let l = startL;
74
- for (let i = 0; i < 40; i++) {
75
- const hex = withL(base, l);
76
- if (backgrounds.every((bg) => contrastRatio(hex, bg) >= 4.5)) return hex;
77
- l = Math.min(1, Math.max(0, l + step));
78
- }
79
- return step < 0 ? palette.black : palette.white;
80
- }
81
- function hoverFor(base, delta, contrast) {
82
- const preferred = withL(base, Math.min(1, Math.max(0, base.l + delta)));
83
- if (contrastRatio(contrast, preferred) >= 4.5) return preferred;
84
- return withL(base, Math.min(1, Math.max(0, base.l - delta)));
85
- }
86
- function pickContrast(solid) {
87
- const white = palette.white;
88
- const dark = palette.gray[900];
89
- if (contrastRatio(white, solid) >= 4.5) return white;
90
- return contrastRatio(dark, solid) >= contrastRatio(white, solid) ? dark : white;
91
- }
92
- var rgba = (hex, alpha) => {
93
- const [r, g, b] = parseHex(hex).map((v) => Math.round(v * 255));
94
- return `rgba(${r}, ${g}, ${b}, ${alpha})`;
95
- };
96
- function createIntentColors(intent, color) {
97
- const solid = toHex(parseHex(color));
98
- const base = rgbToOklch(parseHex(solid));
99
- const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
100
- const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
101
- const lightContrast = pickContrast(solid);
102
- const light = {
103
- solid,
104
- solidHover: hoverFor(base, -0.06, lightContrast),
105
- contrast: lightContrast,
106
- subtle: lightSubtle,
107
- subtleHover: lightSubtleHover,
108
- text: findReadable(base, Math.min(base.l, 0.55), -0.02, [lightColors.bg.default, lightSubtle, lightSubtleHover])
109
- };
110
- const darkBg = darkColors.bg.default;
111
- const darkSolid = base.l < 0.5 ? withL(base, 0.55) : solid;
112
- const darkBase = rgbToOklch(parseHex(darkSolid));
113
- const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
114
- const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
115
- const darkContrast = pickContrast(darkSolid);
116
- const dark = {
117
- solid: darkSolid,
118
- solidHover: hoverFor(darkBase, 0.06, darkContrast),
119
- contrast: darkContrast,
120
- subtle: rgba(darkSolid, 0.16),
121
- subtleHover: rgba(darkSolid, 0.26),
122
- text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
123
- };
124
- const focusOn = (candidate, fallback2, bg) => contrastRatio(candidate, bg) >= 3 ? candidate : fallback2;
125
- const focus = intent === "primary" ? {
126
- light: { border: { focus: focusOn(light.solid, light.text, lightColors.bg.default) } },
127
- dark: {
128
- border: { focus: focusOn(withL(darkBase, Math.min(1, darkBase.l + 0.06)), dark.text, darkBg) }
129
- }
130
- } : void 0;
131
- return {
132
- light: { color: { [intent]: light, ...focus?.light } },
133
- dark: { color: { [intent]: dark, ...focus?.dark } }
134
- };
135
- }
136
-
137
- // src/theme/createTheme.ts
138
- import { assignInlineVars } from "@vanilla-extract/dynamic";
139
- function deepMerge(target, source) {
140
- if (!source) return target;
141
- const out = { ...target };
142
- for (const [key, value4] of Object.entries(source)) {
143
- if (value4 === void 0) continue;
144
- const prev = out[key];
145
- out[key] = typeof value4 === "object" && typeof prev === "object" ? deepMerge(prev, value4) : value4;
146
- }
147
- return out;
148
- }
149
- function createTheme(...inputs) {
150
- let light = {};
151
- let dark = {};
152
- for (const input5 of inputs) {
153
- light = deepMerge(deepMerge(light, input5.common), input5.light);
154
- dark = deepMerge(deepMerge(dark, input5.common), input5.dark);
155
- }
156
- return Object.freeze({ light, dark });
157
- }
158
- function mergeThemes(a, b) {
159
- if (!a) return b;
160
- if (!b) return a;
161
- return createTheme(a, b);
162
- }
163
- function flatten(partial, contract, out) {
164
- for (const [key, value4] of Object.entries(partial)) {
165
- const target = contract[key];
166
- if (target === void 0) continue;
167
- if (typeof target === "string" && typeof value4 === "string") out[target] = value4;
168
- else if (typeof target === "object" && typeof value4 === "object") flatten(value4, target, out);
169
- }
170
- return out;
171
- }
172
- function themeToStyle(theme, mode) {
173
- if (!theme) return void 0;
174
- const map = flatten(theme[mode], vars, {});
175
- return Object.keys(map).length ? assignInlineVars(map) : void 0;
176
- }
177
-
178
- // src/theme/ThemeProvider.tsx
179
- import { createContext, forwardRef, useContext, useMemo } from "react";
180
-
181
- // src/utils/cx.ts
182
- function cx(...classNames) {
183
- return classNames.filter(Boolean).join(" ");
184
- }
185
-
186
- // src/theme/ThemeProvider.css.ts
187
- var portal = "sfyhlv0";
188
- var root = "sfyhlv1 sfyhlv0";
189
-
190
- // src/theme/ThemeProvider.tsx
191
- import { jsx } from "react/jsx-runtime";
192
- var ThemeContext = /* @__PURE__ */ createContext({ theme: "light" });
193
- var ThemeProvider = /* @__PURE__ */ forwardRef(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
194
- const parent = useContext(ThemeContext);
195
- const theme = themeProp ?? parent.theme;
196
- const merged = useMemo(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
197
- const value4 = useMemo(
198
- () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
199
- [theme, merged]
200
- );
201
- return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value4, children: /* @__PURE__ */ jsx(
202
- "div",
203
- {
204
- ref,
205
- "data-theme": theme,
206
- className: cx(themeClass[theme], root, className),
207
- style: value4.style ? { ...value4.style, ...style } : style,
208
- ...rest,
209
- children
210
- }
211
- ) });
212
- });
213
- function useTheme() {
214
- return useContext(ThemeContext).theme;
215
- }
216
- function usePortalProps() {
217
- const { theme, style } = useContext(ThemeContext);
218
- return { className: cx(themeClass[theme], portal), style };
219
- }
220
- function usePortalClassName() {
221
- return usePortalProps().className;
222
- }
223
-
224
- // src/i18n/LocaleProvider.tsx
225
- import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
226
- import { jsx as jsx2 } from "react/jsx-runtime";
227
- var MessagesContext = /* @__PURE__ */ createContext2({});
228
- function LocaleProvider({ messages, children }) {
229
- const parent = useContext2(MessagesContext);
230
- const value4 = useMemo2(() => ({ ...parent, ...messages }), [parent, messages]);
231
- return /* @__PURE__ */ jsx2(MessagesContext.Provider, { value: value4, children });
232
- }
233
- function useMessages() {
234
- return useContext2(MessagesContext);
235
- }
236
-
237
- // src/i18n/en.ts
238
- var WEEKDAYS_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
239
- var MONTHS = [
240
- "January",
241
- "February",
242
- "March",
243
- "April",
244
- "May",
245
- "June",
246
- "July",
247
- "August",
248
- "September",
249
- "October",
250
- "November",
251
- "December"
252
- ];
253
- var en = {
254
- close: "Close",
255
- loading: "Loading",
256
- notifications: "Notifications",
257
- breadcrumb: "Breadcrumb",
258
- pagination: "Pagination",
259
- paginationPrevious: "Previous page",
260
- paginationNext: "Next page",
261
- paginationPage: (page) => `Page ${page}`,
262
- newWindow: "(opens in a new window)",
263
- noResults: "No results",
264
- openList: "Show options",
265
- rangeStart: "minimum",
266
- rangeEnd: "maximum",
267
- agreeAll: "Agree to all",
268
- required: "Required",
269
- optional: "Optional",
270
- show: "View",
271
- hide: "Hide",
272
- verificationCode: "Verification code",
273
- verificationCodeHint: (length, type) => `Enter the ${length}-${type === "numeric" ? "digit" : "character"} code.`,
274
- resend: "Resend",
275
- verificationExpired: "The code has expired. Please request a new one.",
276
- phoneNumber: "Phone number",
277
- businessNumber: "Business registration number",
278
- businessNumberInvalid: "This business registration number is not valid. Please check it again.",
279
- businessNumberIncomplete: "Enter all 10 digits.",
280
- amount: "Amount",
281
- currencyUnit: "KRW",
282
- address: "Address",
283
- addressSearch: "Find address",
284
- addressSearchDescription: "Search by road name, building name, or lot number.",
285
- postalCode: "Postal code",
286
- baseAddress: "Address",
287
- baseAddressPlaceholder: 'Select "Find address" to choose an address',
288
- detailAddress: "Address line 2",
289
- detailAddressPlaceholder: "Apartment, suite, unit, etc.",
290
- addressLoading: "Loading address search",
291
- addressLoadError: "Could not load address search. Please try again later.",
292
- previousMonth: "Previous month",
293
- nextMonth: "Next month",
294
- monthTitle: (year, month) => `${MONTHS[month - 1]} ${year}`,
295
- weekdaysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
296
- weekdaysLong: WEEKDAYS_LONG,
297
- dayLabel: (date, weekdayLong) => `${date.getDate()}, ${weekdayLong}, ${MONTHS[date.getMonth()]} ${date.getFullYear()}`,
298
- holiday: "holiday",
299
- today: "today",
300
- date: "Date",
301
- openCalendar: "Choose date",
302
- calendar: "Calendar",
303
- dateInvalid: "This date does not exist.",
304
- dateUnavailable: "This date is not available.",
305
- dateIncomplete: "Enter the date as YYYY-MM-DD."
306
- };
307
-
308
- // src/components/Accordion/Accordion.tsx
309
- import * as RadixAccordion from "@radix-ui/react-accordion";
310
- import { ChevronDownIcon } from "@bestow-ui/icons";
311
- import { forwardRef as forwardRef2 } from "react";
312
-
313
- // src/components/Accordion/Accordion.css.ts
314
- var chevron = "v58j0l4";
315
- var content = "v58j0l5";
316
- var contentInner = "v58j0l6";
317
- var header = "v58j0l2";
318
- var item = "v58j0l1";
319
- var root2 = "v58j0l0";
320
- var trigger = "v58j0l3";
321
-
322
- // src/components/Accordion/Accordion.tsx
323
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
324
- var Accordion = /* @__PURE__ */ forwardRef2(function Accordion2({ className, ...props }, ref) {
325
- const { collapsible, ...multipleProps } = props;
326
- const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
327
- const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
328
- return /* @__PURE__ */ jsx3(RadixAccordion.Root, { ref, className: cx(root2, className), ...rootProps });
329
- });
330
- var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
331
- const Heading = `h${headingLevel}`;
332
- return /* @__PURE__ */ jsxs(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
333
- /* @__PURE__ */ jsx3(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { className: header, children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: trigger, children: [
334
- title6,
335
- /* @__PURE__ */ jsx3(ChevronDownIcon, { size: 18, className: chevron })
336
- ] }) }) }),
337
- /* @__PURE__ */ jsx3(RadixAccordion.Content, { className: content, children: /* @__PURE__ */ jsx3("div", { className: contentInner, children }) })
338
- ] });
339
- });
340
-
341
- // src/components/AddressInput/AddressInput.tsx
342
- import { forwardRef as forwardRef7, useEffect, useId as useId2, useRef as useRef2, useState } from "react";
343
-
344
- // src/components/Button/Button.tsx
345
- import { forwardRef as forwardRef4 } from "react";
346
-
347
- // src/components/Spinner/Spinner.tsx
348
- import { LoaderIcon } from "@bestow-ui/icons";
349
- import { forwardRef as forwardRef3 } from "react";
350
-
351
- // src/styles/visuallyHidden.css.ts
352
- var visuallyHidden = "_1kdtbw10";
353
-
354
- // src/components/Spinner/Spinner.css.ts
355
- import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
356
- var spinner = /* @__PURE__ */ _7a468({ defaultClassName: "_4b5tg40", variantClassNames: { color: { inherit: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "inherit", size: "md" }, compoundVariants: [] });
357
-
358
- // src/utils/warnOnce.ts
359
- var warned = /* @__PURE__ */ new Set();
360
- function warnOnce(message) {
361
- if (typeof process !== "undefined" && process.env.NODE_ENV === "production") return;
362
- if (warned.has(message)) return;
363
- warned.add(message);
364
- console.warn(`[BestOW UI] ${message}`);
365
- }
366
-
367
- // src/components/Spinner/Spinner.tsx
368
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
369
- var Spinner = /* @__PURE__ */ forwardRef3(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
370
- const m = useMessages();
371
- if (color === "current") {
372
- warnOnce('Spinner \uC758 color="current" \uB294 deprecated \uC608\uC694. color="inherit" \uB97C \uC4F0\uC138\uC694 (1.0 \uC5D0\uC11C \uC81C\uAC70).');
373
- color = "inherit";
374
- }
375
- const label6 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
376
- const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
377
- return /* @__PURE__ */ jsxs2("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
378
- /* @__PURE__ */ jsx4(LoaderIcon, { size: "100%" }),
379
- label6 && /* @__PURE__ */ jsx4("span", { className: visuallyHidden, children: label6 })
380
- ] });
381
- });
382
-
383
- // src/components/Button/Button.css.ts
384
- import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
385
- var button = /* @__PURE__ */ _7a4682({ 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: [] });
386
- var icon = "xcekdai";
387
-
388
- // src/components/Button/Button.tsx
389
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
390
- var Button = /* @__PURE__ */ forwardRef4(function Button2({
391
- variant,
392
- color,
393
- size,
394
- fullWidth,
395
- startIcon,
396
- endIcon,
397
- loading: loading2,
398
- className,
399
- type = "button",
400
- onClick,
401
- children,
402
- ...rest
403
- }, ref) {
404
- const handleClick = (event) => {
405
- if (loading2) {
406
- event.preventDefault();
407
- return;
408
- }
409
- onClick?.(event);
410
- };
411
- const leading = loading2 ? /* @__PURE__ */ jsx5(Spinner, { size: "sm", label: "" }) : startIcon;
412
- return /* @__PURE__ */ jsxs3(
413
- "button",
414
- {
415
- ref,
416
- type,
417
- className: cx(button({ variant, color, size, fullWidth }), className),
418
- "aria-busy": loading2 || void 0,
419
- "aria-disabled": loading2 || void 0,
420
- onClick: handleClick,
421
- ...rest,
422
- children: [
423
- leading && /* @__PURE__ */ jsx5("span", { className: icon, children: leading }),
424
- children,
425
- endIcon && /* @__PURE__ */ jsx5("span", { className: icon, children: endIcon })
426
- ]
427
- }
428
- );
429
- });
430
-
431
- // src/components/Input/Input.css.ts
432
- import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
433
- var adornment = "_19p5zvh6";
434
- var field = "_19p5zvh7";
435
- var fieldFullWidth = "_19p5zvh8";
436
- var helperText = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
437
- var input = "_19p5zvh5";
438
- var label = "_19p5zvh9";
439
- var requiredMark = "_19p5zvha";
440
- var root3 = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
441
-
442
- // src/components/Input/Input.tsx
443
- import { forwardRef as forwardRef5 } from "react";
444
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
445
- var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
446
- return /* @__PURE__ */ jsxs4(
447
- "div",
448
- {
449
- className: cx(root3({ size, fullWidth }), rootClassName),
450
- "data-invalid": invalid || void 0,
451
- "data-disabled": disabled || void 0,
452
- children: [
453
- startAdornment && /* @__PURE__ */ jsx6("span", { className: adornment, children: startAdornment }),
454
- /* @__PURE__ */ jsx6(
455
- "input",
456
- {
457
- ref,
458
- className: cx(input, className),
459
- disabled,
460
- "aria-invalid": invalid || void 0,
461
- ...rest
462
- }
463
- ),
464
- endAdornment && /* @__PURE__ */ jsx6("span", { className: adornment, children: endAdornment })
465
- ]
466
- }
467
- );
468
- });
469
-
470
- // src/components/Input/TextField.tsx
471
- import { forwardRef as forwardRef6, useId } from "react";
472
- import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
473
- var TextField = /* @__PURE__ */ forwardRef6(function TextField2({ label: label6, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
474
- const generatedId = useId();
475
- const inputId = id ?? generatedId;
476
- const helperId = helperText3 ? `${inputId}-helper` : void 0;
477
- return /* @__PURE__ */ jsxs5("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
478
- label6 && /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: label, children: [
479
- label6,
480
- required && /* @__PURE__ */ jsx7("span", { className: requiredMark, "aria-hidden": true, children: "*" })
481
- ] }),
482
- /* @__PURE__ */ jsx7(
483
- Input,
484
- {
485
- ref,
486
- id: inputId,
487
- invalid: error,
488
- required,
489
- fullWidth,
490
- "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
491
- ...rest
492
- }
493
- ),
494
- helperText3 && /* @__PURE__ */ jsx7("p", { id: helperId, className: helperText({ error }), children: helperText3 })
495
- ] });
496
- });
497
-
498
- // src/components/Modal/Modal.tsx
499
- import * as Dialog from "@radix-ui/react-dialog";
500
- import { XIcon } from "@bestow-ui/icons";
501
-
502
- // src/utils/useReturnFocus.ts
503
- import { useRef } from "react";
504
- function useReturnFocus(hasTrigger, onCloseAutoFocus) {
505
- const returnTo = useRef(null);
506
- return {
507
- onOpenAutoFocus: () => {
508
- returnTo.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
509
- },
510
- onCloseAutoFocus: (event) => {
511
- onCloseAutoFocus?.(event);
512
- if (event.defaultPrevented || hasTrigger) return;
513
- const target = returnTo.current;
514
- if (target && target.isConnected && target !== document.body) {
515
- event.preventDefault();
516
- target.focus();
517
- }
518
- }
519
- };
520
- }
521
-
522
- // src/components/Modal/Modal.css.ts
523
- import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
524
- var body = "_1pdsmv0a";
525
- var closeButton = "_1pdsmv09";
526
- var content2 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
527
- var description = "_1pdsmv08";
528
- var footer = "_1pdsmv0b";
529
- var header2 = "_1pdsmv05";
530
- var headings = "_1pdsmv06";
531
- var overlay = "_1pdsmv00";
532
- var title = "_1pdsmv07";
533
-
534
- // src/components/Modal/Modal.tsx
535
- import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
536
- function Modal({
537
- open,
538
- defaultOpen,
539
- onOpenChange,
540
- trigger: trigger4,
541
- title: title6,
542
- description: description6,
543
- children,
544
- footer: footer6,
545
- size,
546
- hideCloseButton = false,
547
- closeOnOverlayClick = true,
548
- className,
549
- onCloseAutoFocus
550
- }) {
551
- const portal2 = usePortalProps();
552
- const m = useMessages();
553
- const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
554
- return /* @__PURE__ */ jsxs6(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
555
- trigger4 && /* @__PURE__ */ jsx8(Dialog.Trigger, { asChild: true, children: trigger4 }),
556
- /* @__PURE__ */ jsxs6(Dialog.Portal, { children: [
557
- /* @__PURE__ */ jsx8(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
558
- /* @__PURE__ */ jsxs6(
559
- Dialog.Content,
560
- {
561
- className: cx(portal2.className, content2({ size }), className),
562
- style: portal2.style,
563
- onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
564
- onOpenAutoFocus: focus.onOpenAutoFocus,
565
- onCloseAutoFocus: focus.onCloseAutoFocus,
566
- ...description6 ? {} : { "aria-describedby": void 0 },
567
- children: [
568
- /* @__PURE__ */ jsxs6("div", { className: header2, children: [
569
- /* @__PURE__ */ jsxs6("div", { className: headings, children: [
570
- /* @__PURE__ */ jsx8(Dialog.Title, { className: title, children: title6 }),
571
- description6 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description6 })
572
- ] }),
573
- !hideCloseButton && /* @__PURE__ */ jsx8(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx8(XIcon, { size: 16 }) })
574
- ] }),
575
- children && /* @__PURE__ */ jsx8("div", { className: body, children }),
576
- footer6 && /* @__PURE__ */ jsx8("div", { className: footer, children: footer6 })
577
- ]
578
- }
579
- )
580
- ] })
581
- ] });
582
- }
583
- var ModalClose = Dialog.Close;
584
-
585
- // src/components/AddressInput/addressProviders.ts
586
- var KAKAO_POSTCODE_SRC = "https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
587
- var loading = null;
588
- function loadKakaoPostcode() {
589
- const w = window;
590
- const existing = w.kakao?.Postcode ?? w.daum?.Postcode;
591
- if (existing) return Promise.resolve(existing);
592
- loading ?? (loading = new Promise((resolve, reject) => {
593
- const script = document.createElement("script");
594
- script.src = KAKAO_POSTCODE_SRC;
595
- script.async = true;
596
- script.onload = () => {
597
- const ctor = w.kakao?.Postcode ?? w.daum?.Postcode;
598
- if (ctor) resolve(ctor);
599
- else reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC5B4\uC694"));
600
- };
601
- script.onerror = () => {
602
- loading = null;
603
- reject(new Error("\uC6B0\uD3B8\uBC88\uD638 \uC11C\uBE44\uC2A4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694"));
604
- };
605
- document.head.appendChild(script);
606
- }));
607
- return loading;
608
- }
609
- function composeExtraAddress(data) {
610
- if (data.userSelectedType !== "R") return "";
611
- const parts = [];
612
- if (data.bname && /[동로가]$/.test(data.bname)) parts.push(data.bname);
613
- if (data.buildingName && data.apartment === "Y") parts.push(data.buildingName);
614
- return parts.length ? ` (${parts.join(", ")})` : "";
615
- }
616
- var kakaoPostcodeProvider = async (container2, onSelect) => {
617
- const Postcode = await loadKakaoPostcode();
618
- new Postcode({
619
- width: "100%",
620
- height: "100%",
621
- oncomplete: (data) => {
622
- const address = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress || data.autoJibunAddress || "";
623
- onSelect({ zonecode: data.zonecode, address, extraAddress: composeExtraAddress(data) });
624
- }
625
- }).embed(container2);
626
- };
627
-
628
- // src/components/AddressInput/AddressInput.css.ts
629
- var fieldset = "_16fi7uy0";
630
- var legend = "_16fi7uy1";
631
- var row = "_16fi7uy2";
632
- var searchArea = "_16fi7uy4";
633
- var searchStatus = "_16fi7uy5";
634
- var zonecode = "_16fi7uy3";
635
-
636
- // src/components/AddressInput/AddressInput.tsx
637
- import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
638
- var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
639
- function SearchArea({
640
- provider,
641
- onSelect,
642
- loadErrorText,
643
- loadingText
644
- }) {
645
- const containerRef = useRef2(null);
646
- const [status, setStatus] = useState("loading");
647
- const onSelectRef = useRef2(onSelect);
648
- useEffect(() => {
649
- onSelectRef.current = onSelect;
650
- });
651
- useEffect(() => {
652
- const container2 = containerRef.current;
653
- if (!container2) return;
654
- let cleanup;
655
- let cancelled = false;
656
- Promise.resolve().then(() => provider(container2, (result) => onSelectRef.current(result))).then((fn) => {
657
- if (cancelled) fn?.();
658
- else {
659
- cleanup = fn;
660
- setStatus("ready");
661
- }
662
- }).catch(() => !cancelled && setStatus("error"));
663
- return () => {
664
- cancelled = true;
665
- cleanup?.();
666
- };
667
- }, [provider]);
668
- return /* @__PURE__ */ jsxs7("div", { className: searchArea, children: [
669
- /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
670
- status !== "ready" && /* @__PURE__ */ jsx9("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ jsx9(Spinner, { label: loadingText }) : loadErrorText })
671
- ] });
672
- }
673
- var AddressInput = /* @__PURE__ */ forwardRef7(
674
- function AddressInput2(props, ref) {
675
- const {
676
- value: value4,
677
- defaultValue,
678
- onValueChange,
679
- label: labelProp,
680
- required,
681
- helperText: helperText3,
682
- error,
683
- disabled,
684
- provider = kakaoPostcodeProvider,
685
- searchLabel: searchLabelProp,
686
- detailPlaceholder: detailPlaceholderProp,
687
- loadErrorText: loadErrorTextProp,
688
- name,
689
- className
690
- } = props;
691
- const m = useMessages();
692
- const label6 = labelProp ?? m.address ?? "\uC8FC\uC18C";
693
- const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
694
- const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
695
- const loadErrorText = loadErrorTextProp ?? m.addressLoadError ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
696
- const baseId = useId2();
697
- const helperId = helperText3 ? `${baseId}-helper` : void 0;
698
- const detailRef = useRef2(null);
699
- const selectedRef = useRef2(false);
700
- const [open, setOpen] = useState(false);
701
- const isControlled = "value" in props;
702
- const [innerValue, setInnerValue] = useState(defaultValue ?? EMPTY);
703
- const current2 = isControlled ? value4 ?? EMPTY : innerValue;
704
- const update = (next) => {
705
- if (!isControlled) setInnerValue(next);
706
- onValueChange?.(next);
707
- };
708
- const openSearch = () => {
709
- if (disabled) return;
710
- selectedRef.current = false;
711
- setOpen(true);
712
- };
713
- const handleSelect = (result) => {
714
- selectedRef.current = true;
715
- update({
716
- ...current2,
717
- zonecode: result.zonecode,
718
- address: result.address,
719
- extraAddress: result.extraAddress ?? ""
720
- });
721
- setOpen(false);
722
- };
723
- const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
724
- return /* @__PURE__ */ jsxs7("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
725
- /* @__PURE__ */ jsxs7("legend", { className: legend, children: [
726
- label6,
727
- required && /* @__PURE__ */ jsx9("span", { className: requiredMark, "aria-hidden": true, children: "*" })
728
- ] }),
729
- /* @__PURE__ */ jsxs7("div", { className: row, children: [
730
- /* @__PURE__ */ jsx9(
731
- TextField,
732
- {
733
- "aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
734
- readOnly: true,
735
- value: current2.zonecode,
736
- placeholder: m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
737
- error: error && !current2.zonecode,
738
- "aria-required": required || void 0,
739
- rootClassName: zonecode,
740
- onClick: openSearch
741
- }
742
- ),
743
- /* @__PURE__ */ jsx9(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
744
- ] }),
745
- /* @__PURE__ */ jsx9(
746
- TextField,
747
- {
748
- "aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
749
- readOnly: true,
750
- value: fullAddress,
751
- placeholder: m.baseAddressPlaceholder ?? `${searchLabel}\uC744 \uB20C\uB7EC \uC8FC\uC18C\uB97C \uACE0\uB974\uC138\uC694`,
752
- error: error && !current2.address,
753
- "aria-required": required || void 0,
754
- fullWidth: true,
755
- onClick: openSearch
756
- }
757
- ),
758
- /* @__PURE__ */ jsx9(
759
- TextField,
760
- {
761
- ref: detailRef,
762
- "aria-label": m.detailAddress ?? "\uC0C1\uC138 \uC8FC\uC18C",
763
- value: current2.detail,
764
- placeholder: detailPlaceholder,
765
- onChange: (event) => update({ ...current2, detail: event.target.value }),
766
- autoComplete: "address-line2",
767
- fullWidth: true
768
- }
769
- ),
770
- helperText3 && /* @__PURE__ */ jsx9("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
771
- name && /* @__PURE__ */ jsxs7(Fragment, { children: [
772
- /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
773
- /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
774
- /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
775
- ] }),
776
- /* @__PURE__ */ jsx9(
777
- Modal,
778
- {
779
- open,
780
- onOpenChange: setOpen,
781
- title: searchLabel,
782
- description: m.addressSearchDescription ?? "\uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC9C0\uBC88\uC73C\uB85C \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694.",
783
- onCloseAutoFocus: (event) => {
784
- if (selectedRef.current) {
785
- event.preventDefault();
786
- detailRef.current?.focus();
787
- }
788
- },
789
- children: /* @__PURE__ */ jsx9(
790
- SearchArea,
791
- {
792
- provider,
793
- onSelect: handleSelect,
794
- loadErrorText,
795
- loadingText: m.addressLoading ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911"
796
- }
797
- )
798
- }
799
- )
800
- ] });
801
- }
802
- );
803
-
804
- // src/components/AgreementGroup/AgreementGroup.tsx
805
- import { forwardRef as forwardRef9, useId as useId3, useState as useState2 } from "react";
806
- import { ChevronDownIcon as ChevronDownIcon2 } from "@bestow-ui/icons";
807
-
808
- // src/components/Checkbox/Checkbox.tsx
809
- import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef3 } from "react";
810
-
811
- // src/utils/mergeRefs.ts
812
- function mergeRefs(...refs) {
813
- return (value4) => {
814
- for (const ref of refs) {
815
- if (typeof ref === "function") ref(value4);
816
- else if (ref) ref.current = value4;
817
- }
818
- };
819
- }
820
-
821
- // src/components/Checkbox/Checkbox.css.ts
822
- import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
823
- var checkIcon = "_1y7mzsn8 _1y7mzsn7";
824
- var control = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
825
- var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
826
- var input2 = "_1y7mzsn6";
827
- var root4 = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
828
-
829
- // src/components/Checkbox/Checkbox.tsx
830
- import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
831
- var Checkbox = /* @__PURE__ */ forwardRef8(function Checkbox2({ label: label6, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
832
- const innerRef = useRef3(null);
833
- useEffect2(() => {
834
- if (innerRef.current) innerRef.current.indeterminate = indeterminate;
835
- }, [indeterminate]);
836
- return /* @__PURE__ */ jsxs8("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
837
- /* @__PURE__ */ jsxs8("span", { className: control({ size }), children: [
838
- /* @__PURE__ */ jsx10(
839
- "input",
840
- {
841
- ref: mergeRefs(innerRef, ref),
842
- type: "checkbox",
843
- className: input2,
844
- disabled,
845
- "aria-invalid": invalid || void 0,
846
- onChange: (event) => {
847
- onChange?.(event);
848
- onCheckedChange?.(event.target.checked);
849
- },
850
- ...rest
851
- }
852
- ),
853
- /* @__PURE__ */ jsx10("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10(
854
- "path",
855
- {
856
- d: "M5 10.5l3.2 3L15 7",
857
- stroke: "currentColor",
858
- strokeWidth: "2",
859
- strokeLinecap: "round",
860
- strokeLinejoin: "round"
861
- }
862
- ) }),
863
- /* @__PURE__ */ jsx10("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
864
- ] }),
865
- label6
866
- ] });
867
- });
868
-
869
- // src/components/AgreementGroup/AgreementGroup.css.ts
870
- var all = "j3uxdc3";
871
- var box = "j3uxdc2";
872
- var chevron2 = "j3uxdc9";
873
- var content3 = "j3uxdca";
874
- var fieldset2 = "j3uxdc0";
875
- var item2 = "j3uxdc5";
876
- var legend2 = "j3uxdc1";
877
- var list = "j3uxdc4";
878
- var row2 = "j3uxdc6";
879
- var tag = "j3uxdc7";
880
- var toggle = "j3uxdc8";
881
-
882
- // src/components/AgreementGroup/AgreementGroup.tsx
883
- import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
884
- function hasAllRequiredAgreements(items2, value4) {
885
- return items2.every((item7) => !item7.required || value4.includes(item7.value));
886
- }
887
- var AgreementGroup = /* @__PURE__ */ forwardRef9(
888
- function AgreementGroup2(props, ref) {
889
- const {
890
- items: items2,
891
- value: value4,
892
- defaultValue,
893
- onValueChange,
894
- label: label6,
895
- allLabel: allLabelProp,
896
- helperText: helperText3,
897
- error,
898
- disabled,
899
- requiredText: requiredTextProp,
900
- optionalText: optionalTextProp,
901
- showText: showTextProp,
902
- hideText: hideTextProp,
903
- name,
904
- className
905
- } = props;
906
- const m = useMessages();
907
- const allLabel = allLabelProp ?? m.agreeAll ?? "\uC804\uCCB4 \uB3D9\uC758";
908
- const requiredText = requiredTextProp ?? m.required ?? "\uD544\uC218";
909
- const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
910
- const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
911
- const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
912
- const baseId = useId3();
913
- const helperId = helperText3 ? `${baseId}-helper` : void 0;
914
- const isControlled = "value" in props;
915
- const [innerValue, setInnerValue] = useState2(defaultValue ?? []);
916
- const agreed = isControlled ? value4 ?? [] : innerValue;
917
- const [expanded, setExpanded] = useState2([]);
918
- const update = (next) => {
919
- if (!isControlled) setInnerValue(next);
920
- onValueChange?.(next);
921
- };
922
- const allValues = items2.map((item7) => item7.value);
923
- const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
924
- const allChecked = items2.length > 0 && agreedCount === items2.length;
925
- const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
926
- return /* @__PURE__ */ jsxs9(
927
- "fieldset",
928
- {
929
- ref,
930
- className: cx(fieldset2, className),
931
- disabled,
932
- "aria-describedby": helperId,
933
- "data-invalid": error || void 0,
934
- children: [
935
- label6 && /* @__PURE__ */ jsx11("legend", { className: legend2, children: label6 }),
936
- /* @__PURE__ */ jsxs9("div", { className: box, children: [
937
- /* @__PURE__ */ jsx11("div", { className: all, children: /* @__PURE__ */ jsx11(
938
- Checkbox,
939
- {
940
- label: allLabel,
941
- checked: allChecked,
942
- indeterminate: agreedCount > 0 && !allChecked,
943
- onChange: (event) => update(event.target.checked ? allValues : [])
944
- }
945
- ) }),
946
- /* @__PURE__ */ jsx11("ul", { className: list, children: items2.map((item7) => {
947
- const labelId = `${baseId}-${item7.value}-label`;
948
- const toggleTextId = `${baseId}-${item7.value}-toggle`;
949
- const contentId = `${baseId}-${item7.value}-content`;
950
- const isOpen = expanded.includes(item7.value);
951
- return /* @__PURE__ */ jsxs9("li", { className: item2, children: [
952
- /* @__PURE__ */ jsxs9("div", { className: row2, children: [
953
- /* @__PURE__ */ jsx11(
954
- Checkbox,
955
- {
956
- size: "sm",
957
- checked: agreed.includes(item7.value),
958
- invalid: error && item7.required && !agreed.includes(item7.value),
959
- onChange: (event) => toggleItem(item7.value, event.target.checked),
960
- label: /* @__PURE__ */ jsxs9("span", { id: labelId, children: [
961
- /* @__PURE__ */ jsx11("span", { className: tag, "data-required": item7.required || void 0, children: item7.required ? requiredText : optionalText }),
962
- " ",
963
- item7.label
964
- ] })
965
- }
966
- ),
967
- item7.content && /* @__PURE__ */ jsxs9(
968
- "button",
969
- {
970
- type: "button",
971
- className: toggle,
972
- "aria-expanded": isOpen,
973
- "aria-controls": contentId,
974
- "aria-labelledby": `${labelId} ${toggleTextId}`,
975
- onClick: () => setExpanded((prev) => isOpen ? prev.filter((v) => v !== item7.value) : [...prev, item7.value]),
976
- children: [
977
- /* @__PURE__ */ jsx11("span", { id: toggleTextId, children: isOpen ? hideText : showText }),
978
- /* @__PURE__ */ jsx11(ChevronDownIcon2, { size: 14, className: chevron2 })
979
- ]
980
- }
981
- )
982
- ] }),
983
- item7.content && isOpen && // 내용이 길면 스크롤된다 — 키보드로도 스크롤할 수 있게 포커스를 받는 이름 있는 영역으로 둔다
984
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
985
- /* @__PURE__ */ jsx11("div", { id: contentId, role: "region", "aria-labelledby": labelId, tabIndex: 0, className: content3, children: item7.content })
986
- ] }, item7.value);
987
- }) })
988
- ] }),
989
- name && agreed.map((v) => /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: v }, v)),
990
- helperText3 && /* @__PURE__ */ jsx11("p", { id: helperId, className: helperText({ error }), children: helperText3 })
991
- ]
992
- }
993
- );
994
- }
995
- );
996
-
997
- // src/components/Alert/Alert.tsx
998
- import { forwardRef as forwardRef10 } from "react";
999
- import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon as XIcon2 } from "@bestow-ui/icons";
1000
-
1001
- // src/components/Alert/Alert.css.ts
1002
- import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
1003
- var action = "bsmpc0j";
1004
- var alert = /* @__PURE__ */ _7a4686({ 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: [] });
1005
- var closeButton2 = "bsmpc0k";
1006
- var content4 = "bsmpc0g";
1007
- var description2 = "bsmpc0i";
1008
- var icon2 = "bsmpc0f";
1009
- var title2 = "bsmpc0h";
1010
-
1011
- // src/components/Alert/Alert.tsx
1012
- import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
1013
- var defaultIcons = {
1014
- primary: InfoIcon,
1015
- neutral: InfoIcon,
1016
- success: CircleCheckIcon,
1017
- warning: TriangleAlertIcon,
1018
- danger: CircleAlertIcon
1019
- };
1020
- var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
1021
- variant,
1022
- color = "primary",
1023
- title: title6,
1024
- icon: icon6,
1025
- action: action3,
1026
- onClose,
1027
- closeLabel: closeLabelProp,
1028
- className,
1029
- children,
1030
- ...rest
1031
- }, ref) {
1032
- const m = useMessages();
1033
- const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
1034
- const DefaultIcon = defaultIcons[color];
1035
- const iconNode = icon6 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon6;
1036
- return /* @__PURE__ */ jsxs10("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
1037
- iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
1038
- /* @__PURE__ */ jsxs10("div", { className: content4, children: [
1039
- title6 && /* @__PURE__ */ jsx12("div", { className: title2, children: title6 }),
1040
- children && /* @__PURE__ */ jsx12("div", { className: description2, children })
1041
- ] }),
1042
- action3 && /* @__PURE__ */ jsx12("div", { className: action, children: action3 }),
1043
- onClose && /* @__PURE__ */ jsx12("button", { type: "button", className: closeButton2, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx12(XIcon2, { size: 16 }) })
1044
- ] });
1045
- });
1046
-
1047
- // src/components/AmountInput/AmountInput.tsx
1048
- import { forwardRef as forwardRef11, useRef as useRef5 } from "react";
1049
-
1050
- // src/utils/koreanFormat.ts
1051
- var onlyDigits = (input5) => input5.replace(/\D/g, "");
1052
- function phoneNumberMaxDigits(digits) {
1053
- if (digits.startsWith("02")) return 10;
1054
- if (/^1[568]/.test(digits)) return 8;
1055
- return 11;
1056
- }
1057
- function formatPhoneNumber(input5) {
1058
- const d = onlyDigits(input5).slice(0, phoneNumberMaxDigits(onlyDigits(input5)));
1059
- if (d.startsWith("02")) {
1060
- if (d.length <= 2) return d;
1061
- if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
1062
- if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
1063
- return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6)}`;
1064
- }
1065
- if (/^1[568]/.test(d)) {
1066
- return d.length <= 4 ? d : `${d.slice(0, 4)}-${d.slice(4)}`;
1067
- }
1068
- if (d.length <= 3) return d;
1069
- if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
1070
- if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
1071
- return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7)}`;
1072
- }
1073
- function formatBusinessNumber(input5) {
1074
- const d = onlyDigits(input5).slice(0, 10);
1075
- if (d.length <= 3) return d;
1076
- if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
1077
- return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
1078
- }
1079
- function isValidBusinessNumber(input5) {
1080
- const d = onlyDigits(input5);
1081
- if (d.length !== 10) return false;
1082
- const weights = [1, 3, 7, 1, 3, 7, 1, 3, 5];
1083
- const digits = [...d].map(Number);
1084
- let sum = weights.reduce((acc, w, i) => acc + w * digits[i], 0);
1085
- sum += Math.floor(digits[8] * 5 / 10);
1086
- return (10 - sum % 10) % 10 === digits[9];
1087
- }
1088
- function formatKoreanAmount(amount, unit = "\uC6D0") {
1089
- const n = Math.floor(Math.abs(amount));
1090
- if (n === 0) return `0${unit}`;
1091
- const units = [
1092
- { value: 1e12, label: "\uC870" },
1093
- { value: 1e8, label: "\uC5B5" },
1094
- { value: 1e4, label: "\uB9CC" },
1095
- { value: 1, label: "" }
1096
- ];
1097
- let rest = n;
1098
- const parts = [];
1099
- for (const u of units) {
1100
- const q = Math.floor(rest / u.value);
1101
- rest %= u.value;
1102
- if (q > 0) parts.push(`${q.toLocaleString("ko-KR")}${u.label}`);
1103
- }
1104
- return `${amount < 0 ? "-" : ""}${parts.join(" ")}${unit}`;
1105
- }
1106
-
1107
- // src/utils/useFormattedInput.ts
1108
- import { useLayoutEffect, useRef as useRef4, useState as useState3 } from "react";
1109
- function caretAfter(display, count2, isMeaningful) {
1110
- if (count2 <= 0) return 0;
1111
- let seen = 0;
1112
- for (let i = 0; i < display.length; i++) {
1113
- if (isMeaningful(display[i])) seen++;
1114
- if (seen === count2) return i + 1;
1115
- }
1116
- return display.length;
1117
- }
1118
- function useFormattedInput({
1119
- isControlled,
1120
- value: value4,
1121
- defaultValue,
1122
- onValueChange,
1123
- sanitize: sanitize4,
1124
- format: format2,
1125
- isMeaningful,
1126
- inputRef
1127
- }) {
1128
- const [innerValue, setInnerValue] = useState3(() => sanitize4(defaultValue ?? ""));
1129
- const raw = isControlled ? sanitize4(value4 ?? "") : innerValue;
1130
- const display = format2(raw);
1131
- const pendingCaret = useRef4(null);
1132
- useLayoutEffect(() => {
1133
- const input5 = inputRef.current;
1134
- if (pendingCaret.current === null || !input5 || document.activeElement !== input5) return;
1135
- const position = caretAfter(input5.value, pendingCaret.current, isMeaningful);
1136
- input5.setSelectionRange(position, position);
1137
- pendingCaret.current = null;
1138
- });
1139
- const commit = (next, caretCount) => {
1140
- pendingCaret.current = caretCount;
1141
- if (!isControlled) setInnerValue(next);
1142
- if (next !== raw) onValueChange?.(next);
1143
- };
1144
- const onChange = (event) => {
1145
- const { value: typed, selectionStart } = event.target;
1146
- const next = sanitize4(typed);
1147
- const before = sanitize4(typed.slice(0, selectionStart ?? typed.length));
1148
- commit(next, Math.min(before.length, next.length));
1149
- };
1150
- const onKeyDown = (event) => {
1151
- const input5 = event.currentTarget;
1152
- const { selectionStart: start, selectionEnd: end } = input5;
1153
- if (start === null || start !== end) return;
1154
- const countBefore = (text2) => [...text2].filter(isMeaningful).length;
1155
- if (event.key === "Backspace" && start > 0 && !isMeaningful(input5.value[start - 1])) {
1156
- const index = countBefore(input5.value.slice(0, start)) - 1;
1157
- if (index < 0) return;
1158
- event.preventDefault();
1159
- commit(raw.slice(0, index) + raw.slice(index + 1), index);
1160
- } else if (event.key === "Delete" && start < input5.value.length && !isMeaningful(input5.value[start])) {
1161
- const index = countBefore(input5.value.slice(0, start));
1162
- if (index >= raw.length) return;
1163
- event.preventDefault();
1164
- commit(raw.slice(0, index) + raw.slice(index + 1), index);
1165
- }
1166
- };
1167
- const setRaw = (next) => setInnerValue(sanitize4(next));
1168
- return { raw, display, onChange, onKeyDown, setRaw };
1169
- }
1170
-
1171
- // src/components/AmountInput/AmountInput.css.ts
1172
- var input3 = "_70qkav0";
1173
-
1174
- // src/components/AmountInput/AmountInput.tsx
1175
- import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
1176
- var MAX_DIGITS = 15;
1177
- var isDigit = (char) => /\d/.test(char);
1178
- var AmountInput = /* @__PURE__ */ forwardRef11(
1179
- function AmountInput2(props, ref) {
1180
- const {
1181
- value: value4,
1182
- defaultValue,
1183
- onValueChange,
1184
- max,
1185
- unit: unitProp,
1186
- showKoreanAmount = true,
1187
- label: labelProp,
1188
- placeholder = "0",
1189
- helperText: helperText3,
1190
- onKeyDown,
1191
- className,
1192
- ...rest
1193
- } = props;
1194
- const inputRef = useRef5(null);
1195
- const m = useMessages();
1196
- const unit = unitProp ?? m.currencyUnit ?? "\uC6D0";
1197
- const label6 = labelProp ?? m.amount ?? "\uAE08\uC561";
1198
- const sanitize4 = (input5) => {
1199
- let digits = input5.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
1200
- if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
1201
- return digits;
1202
- };
1203
- const toRaw = (amount) => amount === null || amount === void 0 ? "" : String(Math.floor(Math.abs(amount)));
1204
- const field3 = useFormattedInput({
1205
- isControlled: "value" in props,
1206
- value: toRaw(value4),
1207
- defaultValue: toRaw(defaultValue),
1208
- onValueChange: (digits) => onValueChange?.(digits === "" ? null : Number(digits)),
1209
- sanitize: sanitize4,
1210
- format: (digits) => digits === "" ? "" : Number(digits).toLocaleString("ko-KR"),
1211
- isMeaningful: isDigit,
1212
- inputRef
1213
- });
1214
- const reading = showKoreanAmount && field3.raw !== "" ? formatKoreanAmount(Number(field3.raw), unit) : null;
1215
- return /* @__PURE__ */ jsx13(
1216
- TextField,
1217
- {
1218
- ref: mergeRefs(ref, inputRef),
1219
- label: label6,
1220
- placeholder,
1221
- inputMode: "numeric",
1222
- value: field3.display,
1223
- onChange: field3.onChange,
1224
- onKeyDown: (event) => {
1225
- field3.onKeyDown(event);
1226
- onKeyDown?.(event);
1227
- },
1228
- endAdornment: unit,
1229
- helperText: reading && helperText3 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
1230
- reading,
1231
- /* @__PURE__ */ jsx13("br", {}),
1232
- helperText3
1233
- ] }) : reading ?? helperText3,
1234
- className: cx(input3, className),
1235
- ...rest
1236
- }
1237
- );
1238
- }
1239
- );
1240
-
1241
- // src/components/Avatar/Avatar.tsx
1242
- import * as RadixAvatar from "@radix-ui/react-avatar";
1243
- import { UserIcon } from "@bestow-ui/icons";
1244
- import { forwardRef as forwardRef12 } from "react";
1245
-
1246
- // src/components/Avatar/Avatar.css.ts
1247
- import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
1248
- var fallback = "_1fd2kp27";
1249
- var image = "_1fd2kp26";
1250
- var root5 = /* @__PURE__ */ _7a4687({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
1251
-
1252
- // src/components/Avatar/Avatar.tsx
1253
- import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
1254
- function getInitials(name) {
1255
- const [a = "", b = ""] = name.trim().split(/\s+/);
1256
- const first = (word) => Array.from(word)[0] ?? "";
1257
- return (first(a) + first(b)).toUpperCase();
1258
- }
1259
- var Avatar = /* @__PURE__ */ forwardRef12(function Avatar2({ src, alt, name, fallback: fallback2, size, shape, className, ...rest }, ref) {
1260
- const label6 = alt ?? name;
1261
- const a11y = label6 ? { role: "img", "aria-label": label6 } : { "aria-hidden": true };
1262
- const initials = name ? getInitials(name) : "";
1263
- return /* @__PURE__ */ jsxs12(RadixAvatar.Root, { ref, className: cx(root5({ size, shape }), className), ...a11y, ...rest, children: [
1264
- src && /* @__PURE__ */ jsx14(RadixAvatar.Image, { src, alt: "", className: image }),
1265
- /* @__PURE__ */ jsx14(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ jsx14(UserIcon, { size: "60%" })) })
1266
- ] });
1267
- });
1268
-
1269
- // src/components/Badge/Badge.tsx
1270
- import { forwardRef as forwardRef13 } from "react";
1271
-
1272
- // src/components/Badge/Badge.css.ts
1273
- import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
1274
- var badge = /* @__PURE__ */ _7a4688({ 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: [] });
1275
- var icon3 = "_1295cfng";
1276
-
1277
- // src/components/Badge/Badge.tsx
1278
- import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
1279
- var Badge = /* @__PURE__ */ forwardRef13(function Badge2({ variant, color, size, startIcon, className, children, ...rest }, ref) {
1280
- return /* @__PURE__ */ jsxs13("span", { ref, className: cx(badge({ variant, color, size }), className), ...rest, children: [
1281
- startIcon && /* @__PURE__ */ jsx15("span", { className: icon3, children: startIcon }),
1282
- children
1283
- ] });
1284
- });
1285
-
1286
- // src/components/Breadcrumb/Breadcrumb.tsx
1287
- import { forwardRef as forwardRef15 } from "react";
1288
- import { ChevronRightIcon } from "@bestow-ui/icons";
1289
-
1290
- // src/components/Link/Link.tsx
1291
- import { Slot } from "@radix-ui/react-slot";
1292
- import { forwardRef as forwardRef14 } from "react";
1293
- import { ExternalLinkIcon } from "@bestow-ui/icons";
1294
-
1295
- // src/components/Link/Link.css.ts
1296
- import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
1297
- var externalIcon = "_1t4hlp6";
1298
- var link = /* @__PURE__ */ _7a4689({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
1299
-
1300
- // src/components/Link/Link.tsx
1301
- import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
1302
- var Link = /* @__PURE__ */ forwardRef14(function Link2({
1303
- as: Component = "a",
1304
- asChild,
1305
- color,
1306
- underline,
1307
- external,
1308
- externalLabel: externalLabelProp,
1309
- target,
1310
- rel,
1311
- className,
1312
- children,
1313
- ...rest
1314
- }, ref) {
1315
- const m = useMessages();
1316
- const externalLabel = externalLabelProp ?? m.newWindow ?? "(\uC0C8 \uCC3D)";
1317
- const linkClassName = cx(link({ color, underline }), className);
1318
- if (asChild) {
1319
- return (
1320
- // Slot 의 props 타입은 HTMLElement 기준이라 <a> 전용 속성(target·rel 등)은 그대로 넘기도록 단언한다
1321
- /* @__PURE__ */ jsx16(Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children })
1322
- );
1323
- }
1324
- return /* @__PURE__ */ jsxs14(
1325
- Component,
1326
- {
1327
- ref,
1328
- className: linkClassName,
1329
- target: external ? target ?? "_blank" : target,
1330
- rel: external ? rel ?? "noopener noreferrer" : rel,
1331
- ...rest,
1332
- children: [
1333
- children,
1334
- external && /* @__PURE__ */ jsxs14(Fragment3, { children: [
1335
- " ",
1336
- /* @__PURE__ */ jsx16(ExternalLinkIcon, { className: externalIcon }),
1337
- /* @__PURE__ */ jsx16("span", { className: visuallyHidden, children: externalLabel })
1338
- ] })
1339
- ]
1340
- }
1341
- );
1342
- });
1343
-
1344
- // src/components/Breadcrumb/Breadcrumb.css.ts
1345
- var current = "_18t8ztt3";
1346
- var item3 = "_18t8ztt1";
1347
- var link2 = "_18t8ztt2";
1348
- var list2 = "_18t8ztt0";
1349
- var separator = "_18t8ztt4";
1350
-
1351
- // src/components/Breadcrumb/Breadcrumb.tsx
1352
- import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
1353
- var Breadcrumb = /* @__PURE__ */ forwardRef15(function Breadcrumb2({ items: items2, linkAs, separator: separator3, "aria-label": ariaLabelProp, className, ...rest }, ref) {
1354
- const m = useMessages();
1355
- const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
1356
- const sep = separator3 ?? /* @__PURE__ */ jsx17(ChevronRightIcon, { size: 14 });
1357
- return /* @__PURE__ */ jsx17("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx17("ol", { className: list2, children: items2.map((item7, index) => {
1358
- const isCurrent = index === items2.length - 1;
1359
- return /* @__PURE__ */ jsxs15("li", { className: item3, children: [
1360
- index > 0 && /* @__PURE__ */ jsx17("span", { className: separator, "aria-hidden": true, children: sep }),
1361
- isCurrent || item7.href === void 0 ? /* @__PURE__ */ jsx17("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item7.label }) : /* @__PURE__ */ jsx17(Link, { as: linkAs, href: item7.href, color: "neutral", underline: "hover", className: link2, children: item7.label })
1362
- ] }, index);
1363
- }) }) });
1364
- });
1365
-
1366
- // src/components/BusinessNumberInput/BusinessNumberInput.tsx
1367
- import { forwardRef as forwardRef16, useRef as useRef6, useState as useState4 } from "react";
1368
- import { jsx as jsx18 } from "react/jsx-runtime";
1369
- var sanitize = (input5) => input5.replace(/\D/g, "").slice(0, 10);
1370
- var isDigit2 = (char) => /\d/.test(char);
1371
- var BusinessNumberInput = /* @__PURE__ */ forwardRef16(
1372
- function BusinessNumberInput2(props, ref) {
1373
- const {
1374
- value: value4,
1375
- defaultValue,
1376
- onValueChange,
1377
- validate = true,
1378
- invalidText: invalidTextProp,
1379
- label: labelProp,
1380
- placeholder = "000-00-00000",
1381
- error,
1382
- helperText: helperText3,
1383
- onBlur,
1384
- onKeyDown,
1385
- ...rest
1386
- } = props;
1387
- const inputRef = useRef6(null);
1388
- const m = useMessages();
1389
- const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
1390
- const label6 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
1391
- const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
1392
- const [touched, setTouched] = useState4(false);
1393
- const field3 = useFormattedInput({
1394
- isControlled: "value" in props,
1395
- value: value4,
1396
- defaultValue,
1397
- onValueChange: (digits) => onValueChange?.(digits, digits.length === 10 ? isValidBusinessNumber(digits) : null),
1398
- sanitize,
1399
- format: formatBusinessNumber,
1400
- isMeaningful: isDigit2,
1401
- inputRef
1402
- });
1403
- const complete = field3.raw.length === 10;
1404
- const autoInvalid = validate && field3.raw.length > 0 && (complete ? !isValidBusinessNumber(field3.raw) : touched);
1405
- const showAuto = autoInvalid && error === void 0;
1406
- return /* @__PURE__ */ jsx18(
1407
- TextField,
1408
- {
1409
- ref: mergeRefs(ref, inputRef),
1410
- label: label6,
1411
- placeholder,
1412
- inputMode: "numeric",
1413
- value: field3.display,
1414
- onChange: field3.onChange,
1415
- onKeyDown: (event) => {
1416
- field3.onKeyDown(event);
1417
- onKeyDown?.(event);
1418
- },
1419
- onBlur: (event) => {
1420
- setTouched(true);
1421
- onBlur?.(event);
1422
- },
1423
- error: error ?? autoInvalid,
1424
- helperText: showAuto ? complete ? invalidText : incompleteText : helperText3,
1425
- ...rest
1426
- }
1427
- );
1428
- }
1429
- );
1430
-
1431
- // src/components/Calendar/Calendar.tsx
1432
- import { forwardRef as forwardRef18, useEffect as useEffect3, useId as useId4, useRef as useRef7, useState as useState5 } from "react";
1433
- import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
1434
-
1435
- // src/utils/date.ts
1436
- var pad = (n) => String(n).padStart(2, "0");
1437
- function toISODate(date) {
1438
- return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
1439
- }
1440
- function parseISODate(value4) {
1441
- const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value4 ?? "");
1442
- if (!m) return null;
1443
- const [y, mo, d] = [Number(m[1]), Number(m[2]), Number(m[3])];
1444
- const date = new Date(y, mo - 1, d);
1445
- return date.getFullYear() === y && date.getMonth() === mo - 1 && date.getDate() === d ? date : null;
1446
- }
1447
- function addDays(date, days) {
1448
- return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
1449
- }
1450
- function addMonths(date, months) {
1451
- const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
1452
- const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
1453
- return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
1454
- }
1455
- function isSameDay(a, b) {
1456
- return !!a && !!b && toISODate(a) === toISODate(b);
1457
- }
1458
- function isSameMonth(a, b) {
1459
- return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
1460
- }
1461
- function compareDays(a, b) {
1462
- const x = toISODate(a);
1463
- const y = toISODate(b);
1464
- return x < y ? -1 : x > y ? 1 : 0;
1465
- }
1466
- function getCalendarWeeks(year, month) {
1467
- const first = new Date(year, month, 1);
1468
- const start = addDays(first, -first.getDay());
1469
- return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_2, day2) => addDays(start, week * 7 + day2)));
1470
- }
1471
- var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
1472
- function formatKoreanDate(date, withWeekday = true) {
1473
- const base = `${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${date.getDate()}\uC77C`;
1474
- return withWeekday ? `${base} ${KOREAN_WEEKDAYS[date.getDay()]}\uC694\uC77C` : base;
1475
- }
1476
-
1477
- // src/components/IconButton/IconButton.tsx
1478
- import { forwardRef as forwardRef17 } from "react";
1479
-
1480
- // src/components/IconButton/IconButton.css.ts
1481
- import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRuntimeFn";
1482
- var iconButton = /* @__PURE__ */ _7a46810({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
1483
-
1484
- // src/components/IconButton/IconButton.tsx
1485
- import { jsx as jsx19 } from "react/jsx-runtime";
1486
- var IconButton = /* @__PURE__ */ forwardRef17(function IconButton2({ variant = "ghost", color = "neutral", size, loading: loading2, className, children, ...rest }, ref) {
1487
- return /* @__PURE__ */ jsx19(
1488
- Button,
1489
- {
1490
- ref,
1491
- variant,
1492
- color,
1493
- size,
1494
- loading: loading2,
1495
- className: cx(iconButton({ size }), className),
1496
- ...rest,
1497
- children: !loading2 && children
1498
- }
1499
- );
1500
- });
1501
-
1502
- // src/components/Calendar/Calendar.css.ts
1503
- var cell = "_1qyq67b5";
1504
- var day = "_1qyq67b6";
1505
- var grid = "_1qyq67b3";
1506
- var header3 = "_1qyq67b1";
1507
- var heading = "_1qyq67b2";
1508
- var root6 = "_1qyq67b0";
1509
- var weekday = "_1qyq67b4";
1510
-
1511
- // src/components/Calendar/Calendar.tsx
1512
- import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
1513
- var Calendar = /* @__PURE__ */ forwardRef18(function Calendar2(props, ref) {
1514
- const {
1515
- value: value4,
1516
- defaultValue,
1517
- onValueChange,
1518
- min,
1519
- max,
1520
- isDateDisabled,
1521
- isHoliday,
1522
- today: todayProp,
1523
- initialFocus,
1524
- prevMonthLabel: prevMonthLabelProp,
1525
- nextMonthLabel: nextMonthLabelProp,
1526
- className
1527
- } = props;
1528
- const m = useMessages();
1529
- const prevMonthLabel = prevMonthLabelProp ?? m.previousMonth ?? "\uC774\uC804 \uB2EC";
1530
- const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
1531
- const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
1532
- const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
1533
- const headingId = useId4();
1534
- const gridRef = useRef7(null);
1535
- const isControlled = "value" in props;
1536
- const [innerValue, setInnerValue] = useState5(defaultValue ?? "");
1537
- const selected = parseISODate(isControlled ? value4 : innerValue);
1538
- const today = parseISODate(todayProp) ?? /* @__PURE__ */ new Date();
1539
- const minDate = parseISODate(min);
1540
- const maxDate = parseISODate(max);
1541
- const clamp = (date) => {
1542
- if (minDate && compareDays(date, minDate) < 0) return minDate;
1543
- if (maxDate && compareDays(date, maxDate) > 0) return maxDate;
1544
- return date;
1545
- };
1546
- const isDisabled = (date) => minDate !== null && compareDays(date, minDate) < 0 || maxDate !== null && compareDays(date, maxDate) > 0 || !!isDateDisabled?.(date);
1547
- const [focused, setFocused] = useState5(() => clamp(selected ?? today));
1548
- const moveFocus = useRef7(initialFocus ?? false);
1549
- const selectedIso = selected ? toISODate(selected) : "";
1550
- useEffect3(() => {
1551
- const date = parseISODate(selectedIso);
1552
- if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
1553
- }, [selectedIso]);
1554
- useEffect3(() => {
1555
- if (!moveFocus.current) return;
1556
- moveFocus.current = false;
1557
- gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
1558
- }, [focused]);
1559
- const focusDate = (date) => {
1560
- moveFocus.current = true;
1561
- setFocused(clamp(date));
1562
- };
1563
- const select = (date) => {
1564
- if (isDisabled(date)) return;
1565
- const iso = toISODate(date);
1566
- if (!isControlled) setInnerValue(iso);
1567
- onValueChange?.(iso);
1568
- setFocused(date);
1569
- };
1570
- const handleKeyDown = (event) => {
1571
- const moves = {
1572
- ArrowLeft: () => addDays(focused, -1),
1573
- ArrowRight: () => addDays(focused, 1),
1574
- ArrowUp: () => addDays(focused, -7),
1575
- ArrowDown: () => addDays(focused, 7),
1576
- Home: () => addDays(focused, -focused.getDay()),
1577
- End: () => addDays(focused, 6 - focused.getDay()),
1578
- PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
1579
- PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
1580
- };
1581
- const move = moves[event.key];
1582
- if (move) {
1583
- event.preventDefault();
1584
- focusDate(move());
1585
- }
1586
- };
1587
- const visible = focused;
1588
- const weeks = getCalendarWeeks(visible.getFullYear(), visible.getMonth()).filter(
1589
- (week) => week.some((date) => isSameMonth(date, visible))
1590
- );
1591
- const prevMonth = addMonths(visible, -1);
1592
- const nextMonth = addMonths(visible, 1);
1593
- const canPrev = !minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0;
1594
- const canNext = !maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0;
1595
- return /* @__PURE__ */ jsxs16("div", { ref, className: cx(root6, className), children: [
1596
- /* @__PURE__ */ jsxs16("div", { className: header3, children: [
1597
- /* @__PURE__ */ jsx20(
1598
- IconButton,
1599
- {
1600
- "aria-label": prevMonthLabel,
1601
- size: "sm",
1602
- disabled: !canPrev,
1603
- onClick: () => setFocused(clamp(prevMonth)),
1604
- children: /* @__PURE__ */ jsx20(ChevronLeftIcon, {})
1605
- }
1606
- ),
1607
- /* @__PURE__ */ jsx20("div", { id: headingId, className: heading, "aria-live": "polite", children: m.monthTitle?.(visible.getFullYear(), visible.getMonth() + 1) ?? `${visible.getFullYear()}\uB144 ${visible.getMonth() + 1}\uC6D4` }),
1608
- /* @__PURE__ */ jsx20(
1609
- IconButton,
1610
- {
1611
- "aria-label": nextMonthLabel,
1612
- size: "sm",
1613
- disabled: !canNext,
1614
- onClick: () => setFocused(clamp(nextMonth)),
1615
- children: /* @__PURE__ */ jsx20(ChevronRightIcon2, {})
1616
- }
1617
- )
1618
- ] }),
1619
- /* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
1620
- /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ jsx20("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
1621
- /* @__PURE__ */ jsx20("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx20("tr", { children: week.map((date) => {
1622
- const iso = toISODate(date);
1623
- if (!isSameMonth(date, visible)) return /* @__PURE__ */ jsx20("td", { role: "gridcell", className: cell }, iso);
1624
- const isSelected = isSameDay(date, selected);
1625
- const isToday = isSameDay(date, today);
1626
- const holiday = !!isHoliday?.(date);
1627
- const disabled = isDisabled(date);
1628
- const label6 = [
1629
- m.dayLabel?.(date, weekdaysLong[date.getDay()]) ?? `${date.getDate()}, ${date.getFullYear()}\uB144 ${date.getMonth() + 1}\uC6D4 ${weekdaysLong[date.getDay()]}`,
1630
- holiday && (m.holiday ?? "\uACF5\uD734\uC77C"),
1631
- isToday && (m.today ?? "\uC624\uB298")
1632
- ].filter(Boolean).join(", ");
1633
- return /* @__PURE__ */ jsx20("td", { role: "gridcell", "aria-selected": isSelected, className: cell, children: /* @__PURE__ */ jsx20(
1634
- "button",
1635
- {
1636
- type: "button",
1637
- className: day,
1638
- "data-date": iso,
1639
- "data-weekday": date.getDay(),
1640
- "data-holiday": holiday || void 0,
1641
- "data-selected": isSelected || void 0,
1642
- tabIndex: isSameDay(date, focused) ? 0 : -1,
1643
- "aria-label": label6,
1644
- "aria-current": isToday ? "date" : void 0,
1645
- "aria-disabled": disabled || void 0,
1646
- onClick: () => select(date),
1647
- onFocus: () => !isSameDay(date, focused) && setFocused(date),
1648
- children: date.getDate()
1649
- }
1650
- ) }, iso);
1651
- }) }, toISODate(week[0]))) })
1652
- ] })
1653
- ] });
1654
- });
1655
-
1656
- // src/components/Card/Card.tsx
1657
- import { forwardRef as forwardRef19 } from "react";
1658
-
1659
- // src/components/Card/Card.css.ts
1660
- import { createRuntimeFn as _7a46811 } from "@vanilla-extract/recipes/createRuntimeFn";
1661
- var body2 = "dnuf1u9";
1662
- var card = /* @__PURE__ */ _7a46811({ 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: [] });
1663
- var footer2 = "dnuf1ua";
1664
- var header4 = "dnuf1u8";
1665
-
1666
- // src/components/Card/Card.tsx
1667
- import { jsx as jsx21 } from "react/jsx-runtime";
1668
- var Card = /* @__PURE__ */ forwardRef19(function Card2({ variant, padding, as: Component = "div", className, ...rest }, ref) {
1669
- return /* @__PURE__ */ jsx21(Component, { ref, className: cx(card({ variant, padding }), className), ...rest });
1670
- });
1671
- var CardHeader = /* @__PURE__ */ forwardRef19(function CardHeader2({ className, ...rest }, ref) {
1672
- return /* @__PURE__ */ jsx21("div", { ref, className: cx(header4, className), ...rest });
1673
- });
1674
- var CardBody = /* @__PURE__ */ forwardRef19(function CardBody2({ className, ...rest }, ref) {
1675
- return /* @__PURE__ */ jsx21("div", { ref, className: cx(body2, className), ...rest });
1676
- });
1677
- var CardFooter = /* @__PURE__ */ forwardRef19(function CardFooter2({ className, ...rest }, ref) {
1678
- return /* @__PURE__ */ jsx21("div", { ref, className: cx(footer2, className), ...rest });
1679
- });
1680
-
1681
- // src/components/Combobox/Combobox.tsx
1682
- import * as Popover from "@radix-ui/react-popover";
1683
- import {
1684
- forwardRef as forwardRef20,
1685
- useEffect as useEffect4,
1686
- useId as useId5,
1687
- useMemo as useMemo3,
1688
- useRef as useRef8,
1689
- useState as useState6
1690
- } from "react";
1691
- import { CheckIcon, ChevronDownIcon as ChevronDownIcon3 } from "@bestow-ui/icons";
1692
-
1693
- // src/components/Select/Select.css.ts
1694
- var content5 = "_1kx81e83";
1695
- var icon4 = "_1kx81e82";
1696
- var item4 = "_1kx81e85";
1697
- var itemIndicator = "_1kx81e86";
1698
- var trigger2 = "_1kx81e80";
1699
- var value = "_1kx81e81";
1700
- var viewport = "_1kx81e84";
1701
-
1702
- // src/components/Combobox/Combobox.css.ts
1703
- var content6 = "c2pbq71";
1704
- var empty = "c2pbq72";
1705
- var toggle2 = "c2pbq70";
1706
-
1707
- // src/components/Combobox/Combobox.tsx
1708
- import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
1709
- var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
1710
- var Combobox = /* @__PURE__ */ forwardRef20(function Combobox2(props, ref) {
1711
- const {
1712
- options,
1713
- value: value4,
1714
- defaultValue,
1715
- onValueChange,
1716
- filter = defaultFilter,
1717
- emptyMessage: emptyMessageProp,
1718
- placeholder,
1719
- label: label6,
1720
- helperText: helperText3,
1721
- error,
1722
- size,
1723
- fullWidth,
1724
- disabled,
1725
- required,
1726
- name,
1727
- id,
1728
- "aria-label": ariaLabel,
1729
- toggleLabel: toggleLabelProp,
1730
- className
1731
- } = props;
1732
- const m = useMessages();
1733
- const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
1734
- const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
1735
- const generatedId = useId5();
1736
- const inputId = id ?? generatedId;
1737
- const labelId = `${inputId}-label`;
1738
- const listId = `${inputId}-listbox`;
1739
- const helperId = helperText3 ? `${inputId}-helper` : void 0;
1740
- const optionId = (index) => `${inputId}-option-${index}`;
1741
- const portal2 = usePortalProps();
1742
- const inputRef = useRef8(null);
1743
- const anchorRef = useRef8(null);
1744
- const isControlled = "value" in props;
1745
- const [innerValue, setInnerValue] = useState6(defaultValue);
1746
- const selectedValue = isControlled ? value4 : innerValue;
1747
- const selectedOption = options.find((o) => o.value === selectedValue);
1748
- const [open, setOpen] = useState6(false);
1749
- const [query, setQuery] = useState6(null);
1750
- const [activeIndex, setActiveIndex] = useState6(-1);
1751
- const filtered = useMemo3(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
1752
- const inputText = query ?? selectedOption?.label ?? "";
1753
- const firstEnabled = (list5, from = 0, step = 1) => {
1754
- for (let i = from; i >= 0 && i < list5.length; i += step) if (!list5[i].disabled) return i;
1755
- return -1;
1756
- };
1757
- const openList = (list5 = filtered, preferLast = false) => {
1758
- setOpen(true);
1759
- const selectedIndex = list5.findIndex((o) => o.value === selectedValue);
1760
- setActiveIndex(
1761
- selectedIndex >= 0 && !list5[selectedIndex].disabled ? selectedIndex : preferLast ? firstEnabled(list5, list5.length - 1, -1) : firstEnabled(list5)
1762
- );
1763
- };
1764
- const close2 = () => {
1765
- setOpen(false);
1766
- setQuery(null);
1767
- setActiveIndex(-1);
1768
- };
1769
- const select = (option2) => {
1770
- if (option2.disabled) return;
1771
- if (!isControlled) setInnerValue(option2.value);
1772
- if (option2.value !== selectedValue) onValueChange?.(option2.value);
1773
- close2();
1774
- };
1775
- const move = (step) => {
1776
- const start = activeIndex < 0 ? step === 1 ? 0 : filtered.length - 1 : activeIndex + step;
1777
- const next = firstEnabled(filtered, start, step);
1778
- if (next >= 0) setActiveIndex(next);
1779
- };
1780
- const handleChange = (event) => {
1781
- const nextQuery = event.target.value;
1782
- const nextList = nextQuery ? options.filter((o) => filter(o, nextQuery)) : options;
1783
- setQuery(nextQuery);
1784
- setOpen(true);
1785
- setActiveIndex(firstEnabled(nextList));
1786
- };
1787
- const handleKeyDown = (event) => {
1788
- switch (event.key) {
1789
- case "ArrowDown":
1790
- event.preventDefault();
1791
- if (!open) openList();
1792
- else move(1);
1793
- break;
1794
- case "ArrowUp":
1795
- event.preventDefault();
1796
- if (!open) openList(filtered, true);
1797
- else move(-1);
1798
- break;
1799
- case "Enter":
1800
- if (open) {
1801
- event.preventDefault();
1802
- const option2 = filtered[activeIndex];
1803
- if (option2) select(option2);
1804
- }
1805
- break;
1806
- case "Escape":
1807
- if (open) {
1808
- event.preventDefault();
1809
- close2();
1810
- }
1811
- break;
1812
- case "Tab":
1813
- if (open) close2();
1814
- break;
1815
- }
1816
- };
1817
- useEffect4(() => {
1818
- if (!open || activeIndex < 0) return;
1819
- document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
1820
- }, [open, activeIndex]);
1821
- const hasOptions = filtered.length > 0;
1822
- return /* @__PURE__ */ jsxs17("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
1823
- label6 && /* @__PURE__ */ jsxs17("label", { id: labelId, htmlFor: inputId, className: label, children: [
1824
- label6,
1825
- required && /* @__PURE__ */ jsx22("span", { className: requiredMark, "aria-hidden": true, children: "*" })
1826
- ] }),
1827
- /* @__PURE__ */ jsxs17(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
1828
- /* @__PURE__ */ jsx22(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs17(
1829
- "div",
1830
- {
1831
- ref: anchorRef,
1832
- className: cx(root3({ size, fullWidth }), className),
1833
- "data-invalid": error || void 0,
1834
- "data-disabled": disabled || void 0,
1835
- children: [
1836
- /* @__PURE__ */ jsx22(
1837
- "input",
1838
- {
1839
- ref: mergeRefs(ref, inputRef),
1840
- id: inputId,
1841
- type: "text",
1842
- role: "combobox",
1843
- "aria-expanded": open,
1844
- "aria-controls": open && hasOptions ? listId : void 0,
1845
- "aria-autocomplete": "list",
1846
- "aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
1847
- "aria-label": label6 ? void 0 : ariaLabel,
1848
- "aria-invalid": error || void 0,
1849
- "aria-required": required || void 0,
1850
- "aria-describedby": helperId,
1851
- autoComplete: "off",
1852
- placeholder,
1853
- disabled,
1854
- value: inputText,
1855
- onChange: handleChange,
1856
- onKeyDown: handleKeyDown,
1857
- onBlur: () => {
1858
- if (open) close2();
1859
- },
1860
- className: input
1861
- }
1862
- ),
1863
- /* @__PURE__ */ jsx22(
1864
- "button",
1865
- {
1866
- type: "button",
1867
- tabIndex: -1,
1868
- "aria-label": toggleLabel,
1869
- "aria-expanded": open,
1870
- disabled,
1871
- className: toggle2,
1872
- onMouseDown: (event) => event.preventDefault(),
1873
- onClick: () => {
1874
- if (open) close2();
1875
- else openList(options);
1876
- inputRef.current?.focus();
1877
- },
1878
- children: /* @__PURE__ */ jsx22(ChevronDownIcon3, { size: 16 })
1879
- }
1880
- )
1881
- ]
1882
- }
1883
- ) }),
1884
- /* @__PURE__ */ jsx22(Popover.Portal, { children: /* @__PURE__ */ jsx22(
1885
- Popover.Content,
1886
- {
1887
- role: "presentation",
1888
- align: "start",
1889
- sideOffset: 4,
1890
- collisionPadding: 8,
1891
- className: cx(portal2.className, content6),
1892
- style: portal2.style,
1893
- onOpenAutoFocus: (event) => event.preventDefault(),
1894
- onCloseAutoFocus: (event) => event.preventDefault(),
1895
- onMouseDown: (event) => event.preventDefault(),
1896
- onInteractOutside: (event) => {
1897
- if (anchorRef.current?.contains(event.target)) event.preventDefault();
1898
- },
1899
- children: hasOptions ? /* @__PURE__ */ jsx22(
1900
- "div",
1901
- {
1902
- id: listId,
1903
- role: "listbox",
1904
- "aria-labelledby": label6 ? labelId : void 0,
1905
- "aria-label": label6 ? void 0 : ariaLabel,
1906
- children: filtered.map((option2, index) => {
1907
- const isSelected = option2.value === selectedValue;
1908
- return (
1909
- // aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
1910
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
1911
- /* @__PURE__ */ jsxs17(
1912
- "div",
1913
- {
1914
- id: optionId(index),
1915
- role: "option",
1916
- "aria-selected": isSelected,
1917
- "aria-disabled": option2.disabled || void 0,
1918
- "data-highlighted": index === activeIndex ? "" : void 0,
1919
- "data-state": isSelected ? "checked" : "unchecked",
1920
- "data-disabled": option2.disabled ? "" : void 0,
1921
- className: item4,
1922
- onMouseDown: (event) => event.preventDefault(),
1923
- onMouseMove: () => !option2.disabled && setActiveIndex(index),
1924
- onClick: () => select(option2),
1925
- children: [
1926
- option2.label,
1927
- isSelected && /* @__PURE__ */ jsx22("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx22(CheckIcon, { size: 16 }) })
1928
- ]
1929
- },
1930
- option2.value
1931
- )
1932
- );
1933
- })
1934
- }
1935
- ) : /* @__PURE__ */ jsx22("div", { className: empty, role: "status", children: emptyMessage })
1936
- }
1937
- ) })
1938
- ] }),
1939
- name && /* @__PURE__ */ jsx22("input", { type: "hidden", name, value: selectedValue ?? "" }),
1940
- helperText3 && /* @__PURE__ */ jsx22("p", { id: helperId, className: helperText({ error }), children: helperText3 })
1941
- ] });
1942
- });
1943
-
1944
- // src/components/DatePicker/DatePicker.tsx
1945
- import { forwardRef as forwardRef21, useEffect as useEffect5, useRef as useRef9, useState as useState7 } from "react";
1946
- import { CalendarIcon } from "@bestow-ui/icons";
1947
-
1948
- // src/components/Popover/Popover.tsx
1949
- import * as RadixPopover from "@radix-ui/react-popover";
1950
- import { XIcon as XIcon3 } from "@bestow-ui/icons";
1951
- import { useId as useId6 } from "react";
1952
-
1953
- // src/components/Popover/Popover.css.ts
1954
- var arrow = "_1j99p8x4";
1955
- var closeButton3 = "_1j99p8x3";
1956
- var content7 = "_1j99p8x0";
1957
- var header5 = "_1j99p8x1";
1958
- var title3 = "_1j99p8x2";
1959
-
1960
- // src/components/Popover/Popover.tsx
1961
- import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
1962
- function Popover2({
1963
- content: content12,
1964
- children,
1965
- title: title6,
1966
- "aria-label": ariaLabel,
1967
- showClose = false,
1968
- showArrow = false,
1969
- side = "bottom",
1970
- align = "center",
1971
- open,
1972
- defaultOpen,
1973
- onOpenChange,
1974
- modal,
1975
- className,
1976
- style,
1977
- onOpenAutoFocus
1978
- }) {
1979
- const portal2 = usePortalProps();
1980
- const m = useMessages();
1981
- const titleId = useId6();
1982
- return /* @__PURE__ */ jsxs18(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
1983
- /* @__PURE__ */ jsx23(RadixPopover.Trigger, { asChild: true, children }),
1984
- /* @__PURE__ */ jsx23(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs18(
1985
- RadixPopover.Content,
1986
- {
1987
- side,
1988
- align,
1989
- sideOffset: 6,
1990
- onOpenAutoFocus,
1991
- collisionPadding: 8,
1992
- "aria-labelledby": title6 ? titleId : void 0,
1993
- "aria-label": title6 ? void 0 : ariaLabel,
1994
- className: cx(portal2.className, content7, className),
1995
- style: { ...portal2.style, ...style },
1996
- children: [
1997
- (title6 || showClose) && /* @__PURE__ */ jsxs18("div", { className: header5, children: [
1998
- title6 && /* @__PURE__ */ jsx23("h2", { id: titleId, className: title3, children: title6 }),
1999
- showClose && /* @__PURE__ */ jsx23(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx23(XIcon3, { size: 16 }) })
2000
- ] }),
2001
- content12,
2002
- showArrow && /* @__PURE__ */ jsx23(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
2003
- ]
2004
- }
2005
- ) })
2006
- ] });
2007
- }
2008
- var PopoverClose = RadixPopover.Close;
2009
-
2010
- // src/components/DatePicker/DatePicker.tsx
2011
- import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
2012
- var sanitize2 = (input5) => input5.replace(/\D/g, "").slice(0, 8);
2013
- var format = (digits) => digits.length <= 4 ? digits : digits.length <= 6 ? `${digits.slice(0, 4)}-${digits.slice(4)}` : `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
2014
- var isDigit3 = (char) => /\d/.test(char);
2015
- var DatePicker = /* @__PURE__ */ forwardRef21(
2016
- function DatePicker2(props, ref) {
2017
- const {
2018
- value: value4,
2019
- defaultValue,
2020
- onValueChange,
2021
- min,
2022
- max,
2023
- isDateDisabled,
2024
- isHoliday,
2025
- today,
2026
- label: labelProp,
2027
- helperText: helperText3,
2028
- error,
2029
- required,
2030
- disabled,
2031
- fullWidth,
2032
- placeholder = "YYYY-MM-DD",
2033
- calendarLabel: calendarLabelProp,
2034
- invalidText: invalidTextProp,
2035
- unavailableText: unavailableTextProp,
2036
- incompleteText: incompleteTextProp,
2037
- name,
2038
- id,
2039
- className
2040
- } = props;
2041
- const inputRef = useRef9(null);
2042
- const m = useMessages();
2043
- const label6 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
2044
- const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
2045
- const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
2046
- const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
2047
- const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
2048
- const [open, setOpen] = useState7(false);
2049
- const [touched, setTouched] = useState7(false);
2050
- const isControlled = "value" in props;
2051
- const lastEmitted = useRef9(isControlled ? value4 ?? "" : defaultValue ?? "");
2052
- const minDate = parseISODate(min);
2053
- const maxDate = parseISODate(max);
2054
- const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
2055
- const isUnavailable = (date2) => minDate !== null && compareDays(date2, minDate) < 0 || maxDate !== null && compareDays(date2, maxDate) > 0 || !!isDateDisabled?.(date2);
2056
- const emit = (iso) => {
2057
- if (iso === lastEmitted.current) return;
2058
- lastEmitted.current = iso;
2059
- onValueChange?.(iso);
2060
- };
2061
- const field3 = useFormattedInput({
2062
- isControlled: false,
2063
- value: void 0,
2064
- defaultValue: (isControlled ? value4 : defaultValue)?.replace(/\D/g, ""),
2065
- onValueChange: (digits) => {
2066
- const date2 = parseISODate(toIso(digits));
2067
- emit(date2 && !isUnavailable(date2) ? toIso(digits) : "");
2068
- },
2069
- sanitize: sanitize2,
2070
- format,
2071
- isMeaningful: isDigit3,
2072
- inputRef
2073
- });
2074
- const textIso = toIso(field3.raw);
2075
- const { setRaw } = field3;
2076
- useEffect5(() => {
2077
- if (!isControlled) return;
2078
- const next = value4 ?? "";
2079
- lastEmitted.current = next;
2080
- if (next === textIso) return;
2081
- const textDate = parseISODate(textIso);
2082
- const textIsValid = textDate !== null && !isUnavailable(textDate);
2083
- if (next === "" && !textIsValid) return;
2084
- setRaw(next.replace(/\D/g, ""));
2085
- }, [value4]);
2086
- const date = parseISODate(textIso);
2087
- const complete = field3.raw.length === 8;
2088
- const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field3.raw.length > 0 ? incompleteText : null;
2089
- const showAuto = autoError !== null && error === void 0;
2090
- const selectedIso = date && !isUnavailable(date) ? textIso : "";
2091
- return /* @__PURE__ */ jsxs19(Fragment4, { children: [
2092
- /* @__PURE__ */ jsx24(
2093
- TextField,
2094
- {
2095
- ref: mergeRefs(ref, inputRef),
2096
- id,
2097
- label: label6,
2098
- placeholder,
2099
- inputMode: "numeric",
2100
- autoComplete: "off",
2101
- value: field3.display,
2102
- onChange: field3.onChange,
2103
- onKeyDown: field3.onKeyDown,
2104
- onBlur: () => setTouched(true),
2105
- error: error ?? autoError !== null,
2106
- helperText: showAuto ? autoError : helperText3,
2107
- required,
2108
- disabled,
2109
- fullWidth,
2110
- rootClassName: className,
2111
- endAdornment: /* @__PURE__ */ jsx24(
2112
- Popover2,
2113
- {
2114
- open,
2115
- onOpenChange: setOpen,
2116
- modal: true,
2117
- align: "end",
2118
- "aria-label": m.calendar ?? "\uB2EC\uB825",
2119
- onOpenAutoFocus: (event) => event.preventDefault(),
2120
- content: /* @__PURE__ */ jsx24(
2121
- Calendar,
2122
- {
2123
- value: selectedIso,
2124
- onValueChange: (iso) => {
2125
- setRaw(iso.replace(/\D/g, ""));
2126
- emit(iso);
2127
- setOpen(false);
2128
- },
2129
- min,
2130
- max,
2131
- isDateDisabled,
2132
- isHoliday,
2133
- today,
2134
- initialFocus: true
2135
- }
2136
- ),
2137
- children: /* @__PURE__ */ jsx24(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx24(CalendarIcon, {}) })
2138
- }
2139
- )
2140
- }
2141
- ),
2142
- name && /* @__PURE__ */ jsx24("input", { type: "hidden", name, value: selectedIso })
2143
- ] });
2144
- }
2145
- );
2146
-
2147
- // src/components/Divider/Divider.tsx
2148
- import { forwardRef as forwardRef22 } from "react";
2149
-
2150
- // src/components/Divider/Divider.css.ts
2151
- import { createRuntimeFn as _7a46812 } from "@vanilla-extract/recipes/createRuntimeFn";
2152
- var divider = /* @__PURE__ */ _7a46812({ defaultClassName: "_1t3gq8v0", variantClassNames: { orientation: { horizontal: "_1t3gq8v1", vertical: "_1t3gq8v2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
2153
- var labeled = "_1t3gq8v3";
2154
- var line = "_1t3gq8v4";
2155
-
2156
- // src/components/Divider/Divider.tsx
2157
- import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
2158
- var Divider = /* @__PURE__ */ forwardRef22(function Divider2({ orientation = "horizontal", decorative, className, children, ...rest }, ref) {
2159
- if (children && orientation === "horizontal") {
2160
- return /* @__PURE__ */ jsxs20("div", { ref, className: cx(labeled, className), ...rest, children: [
2161
- /* @__PURE__ */ jsx25("span", { className: line, "aria-hidden": true }),
2162
- children,
2163
- /* @__PURE__ */ jsx25("span", { className: line, "aria-hidden": true })
2164
- ] });
2165
- }
2166
- const a11y = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
2167
- return /* @__PURE__ */ jsx25("div", { ref, className: cx(divider({ orientation }), className), ...a11y, ...rest });
2168
- });
2169
-
2170
- // src/components/Drawer/Drawer.tsx
2171
- import * as Dialog2 from "@radix-ui/react-dialog";
2172
- import { XIcon as XIcon4 } from "@bestow-ui/icons";
2173
-
2174
- // src/components/Drawer/Drawer.css.ts
2175
- import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
2176
- var body3 = "nmobyvy";
2177
- var closeButton4 = "nmobyvx";
2178
- var content8 = /* @__PURE__ */ _7a46813({ 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"]] });
2179
- var description3 = "nmobyvw";
2180
- var footer3 = "nmobyvz";
2181
- var header6 = "nmobyvt";
2182
- var headings2 = "nmobyvu";
2183
- var overlay2 = "nmobyv0";
2184
- var title4 = "nmobyvv";
2185
-
2186
- // src/components/Drawer/Drawer.tsx
2187
- import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
2188
- function Drawer({
2189
- open,
2190
- defaultOpen,
2191
- onOpenChange,
2192
- trigger: trigger4,
2193
- title: title6,
2194
- description: description6,
2195
- children,
2196
- footer: footer6,
2197
- side,
2198
- size,
2199
- hideCloseButton = false,
2200
- closeOnOverlayClick = true,
2201
- className
2202
- }) {
2203
- const portal2 = usePortalProps();
2204
- const m = useMessages();
2205
- const focus = useReturnFocus(Boolean(trigger4));
2206
- return /* @__PURE__ */ jsxs21(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
2207
- trigger4 && /* @__PURE__ */ jsx26(Dialog2.Trigger, { asChild: true, children: trigger4 }),
2208
- /* @__PURE__ */ jsxs21(Dialog2.Portal, { children: [
2209
- /* @__PURE__ */ jsx26(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
2210
- /* @__PURE__ */ jsxs21(
2211
- Dialog2.Content,
2212
- {
2213
- className: cx(portal2.className, content8({ side, size }), className),
2214
- style: portal2.style,
2215
- "data-side": side ?? "right",
2216
- onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
2217
- onOpenAutoFocus: focus.onOpenAutoFocus,
2218
- onCloseAutoFocus: focus.onCloseAutoFocus,
2219
- ...description6 ? {} : { "aria-describedby": void 0 },
2220
- children: [
2221
- /* @__PURE__ */ jsxs21("div", { className: header6, children: [
2222
- /* @__PURE__ */ jsxs21("div", { className: headings2, children: [
2223
- /* @__PURE__ */ jsx26(Dialog2.Title, { className: title4, children: title6 }),
2224
- description6 && /* @__PURE__ */ jsx26(Dialog2.Description, { className: description3, children: description6 })
2225
- ] }),
2226
- !hideCloseButton && /* @__PURE__ */ jsx26(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx26(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx26(XIcon4, {}) }) })
2227
- ] }),
2228
- children && /* @__PURE__ */ jsx26("div", { className: body3, children }),
2229
- footer6 && /* @__PURE__ */ jsx26("div", { className: footer3, children: footer6 })
2230
- ]
2231
- }
2232
- )
2233
- ] })
2234
- ] });
2235
- }
2236
- var DrawerClose = Dialog2.Close;
2237
-
2238
- // src/components/DropdownMenu/DropdownMenu.tsx
2239
- import * as RadixMenu from "@radix-ui/react-dropdown-menu";
2240
- import { forwardRef as forwardRef23 } from "react";
2241
-
2242
- // src/components/DropdownMenu/DropdownMenu.css.ts
2243
- var content9 = "_1d7ahux0";
2244
- var danger = "_1d7ahux2";
2245
- var icon5 = "_1d7ahux3";
2246
- var item5 = "_1d7ahux1";
2247
- var label2 = "_1d7ahux5";
2248
- var separator2 = "_1d7ahux6";
2249
- var shortcut = "_1d7ahux4";
2250
-
2251
- // src/components/DropdownMenu/DropdownMenu.tsx
2252
- import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
2253
- var DropdownMenu = RadixMenu.Root;
2254
- var DropdownMenuTrigger = RadixMenu.Trigger;
2255
- var DropdownMenuGroup = RadixMenu.Group;
2256
- var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
2257
- function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
2258
- const portal2 = usePortalProps();
2259
- return /* @__PURE__ */ jsx27(RadixMenu.Portal, { children: /* @__PURE__ */ jsx27(
2260
- RadixMenu.Content,
2261
- {
2262
- ref,
2263
- side,
2264
- align,
2265
- sideOffset,
2266
- collisionPadding,
2267
- className: cx(portal2.className, content9, className),
2268
- style: { ...portal2.style, ...style },
2269
- ...rest
2270
- }
2271
- ) });
2272
- }
2273
- );
2274
- var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
2275
- function DropdownMenuItem2({ icon: icon6, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
2276
- if (color === "default") {
2277
- warnOnce('DropdownMenuItem \uC758 color="default" \uB294 deprecated \uC608\uC694. color="neutral" \uC744 \uC4F0\uC138\uC694 (1.0 \uC5D0\uC11C \uC81C\uAC70).');
2278
- }
2279
- return /* @__PURE__ */ jsxs22(RadixMenu.Item, { ref, className: cx(item5, color === "danger" && danger, className), ...rest, children: [
2280
- icon6 && /* @__PURE__ */ jsx27("span", { className: icon5, "aria-hidden": true, children: icon6 }),
2281
- children,
2282
- shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
2283
- ] });
2284
- }
2285
- );
2286
- var DropdownMenuLabel = /* @__PURE__ */ forwardRef23(
2287
- function DropdownMenuLabel2({ className, ...rest }, ref) {
2288
- return /* @__PURE__ */ jsx27(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
2289
- }
2290
- );
2291
- var DropdownMenuSeparator = /* @__PURE__ */ forwardRef23(
2292
- function DropdownMenuSeparator2({ className, ...rest }, ref) {
2293
- return /* @__PURE__ */ jsx27(RadixMenu.Separator, { ref, className: cx(separator2, className), ...rest });
2294
- }
2295
- );
2296
-
2297
- // src/components/Pagination/Pagination.tsx
2298
- import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon3 } from "@bestow-ui/icons";
2299
- import { forwardRef as forwardRef24, useState as useState8 } from "react";
2300
-
2301
- // src/components/Pagination/getPaginationItems.ts
2302
- var range = (start, end) => end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
2303
- function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount = 1) {
2304
- if (totalPages < 1) return [];
2305
- const startPages = range(1, Math.min(boundaryCount, totalPages));
2306
- const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
2307
- const siblingsStart = Math.max(
2308
- Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
2309
- boundaryCount + 2
2310
- );
2311
- const siblingsEnd = Math.min(
2312
- Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
2313
- endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
2314
- );
2315
- const items2 = [...startPages];
2316
- if (siblingsStart > boundaryCount + 2) items2.push("ellipsis-start");
2317
- else if (boundaryCount + 1 < totalPages - boundaryCount) items2.push(boundaryCount + 1);
2318
- items2.push(...range(siblingsStart, siblingsEnd));
2319
- if (siblingsEnd < totalPages - boundaryCount - 1) items2.push("ellipsis-end");
2320
- else if (totalPages - boundaryCount > boundaryCount) items2.push(totalPages - boundaryCount);
2321
- items2.push(...endPages);
2322
- return items2;
2323
- }
2324
-
2325
- // src/components/Pagination/Pagination.css.ts
2326
- import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
2327
- var ellipsis = "_1iraoak4";
2328
- var item6 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1iraoak1", variantClassNames: { size: { sm: "_1iraoak2", md: "_1iraoak3" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2329
- var list3 = "_1iraoak0";
2330
-
2331
- // src/components/Pagination/Pagination.tsx
2332
- import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
2333
- var Pagination = /* @__PURE__ */ forwardRef24(function Pagination2({
2334
- totalPages,
2335
- page: pageProp,
2336
- defaultPage = 1,
2337
- onPageChange,
2338
- siblingCount = 1,
2339
- boundaryCount = 1,
2340
- size,
2341
- getItemLabel: getItemLabelProp,
2342
- className,
2343
- "aria-label": ariaLabelProp,
2344
- ...rest
2345
- }, ref) {
2346
- const [uncontrolledPage, setUncontrolledPage] = useState8(defaultPage);
2347
- const m = useMessages();
2348
- const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
2349
- const getItemLabel = getItemLabelProp ?? ((type, n) => type === "previous" ? m.paginationPrevious ?? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? m.paginationNext ?? "\uB2E4\uC74C \uD398\uC774\uC9C0" : m.paginationPage?.(n) ?? `${n} \uD398\uC774\uC9C0`);
2350
- if (totalPages < 1) return null;
2351
- const page = Math.min(Math.max(pageProp ?? uncontrolledPage, 1), totalPages);
2352
- const goTo = (next) => {
2353
- if (next === page || next < 1 || next > totalPages) return;
2354
- if (pageProp === void 0) setUncontrolledPage(next);
2355
- onPageChange?.(next);
2356
- };
2357
- const itemClass = item6({ size });
2358
- return /* @__PURE__ */ jsx28("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs23("ul", { className: list3, children: [
2359
- /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
2360
- "button",
2361
- {
2362
- type: "button",
2363
- className: itemClass,
2364
- "aria-label": getItemLabel("previous", page - 1),
2365
- disabled: page <= 1,
2366
- onClick: () => goTo(page - 1),
2367
- children: /* @__PURE__ */ jsx28(ChevronLeftIcon2, { size: 16 })
2368
- }
2369
- ) }),
2370
- getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
2371
- (item7) => typeof item7 === "number" ? /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
2372
- "button",
2373
- {
2374
- type: "button",
2375
- className: itemClass,
2376
- "aria-label": getItemLabel("page", item7),
2377
- "aria-current": item7 === page ? "page" : void 0,
2378
- onClick: () => goTo(item7),
2379
- children: item7
2380
- }
2381
- ) }, item7) : /* @__PURE__ */ jsx28("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item7)
2382
- ),
2383
- /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
2384
- "button",
2385
- {
2386
- type: "button",
2387
- className: itemClass,
2388
- "aria-label": getItemLabel("next", page + 1),
2389
- disabled: page >= totalPages,
2390
- onClick: () => goTo(page + 1),
2391
- children: /* @__PURE__ */ jsx28(ChevronRightIcon3, { size: 16 })
2392
- }
2393
- ) })
2394
- ] }) });
2395
- });
2396
-
2397
- // src/components/PhoneNumberInput/PhoneNumberInput.tsx
2398
- import { forwardRef as forwardRef25, useRef as useRef10 } from "react";
2399
- import { jsx as jsx29 } from "react/jsx-runtime";
2400
- var sanitize3 = (input5) => {
2401
- const digits = input5.replace(/\D/g, "");
2402
- return digits.slice(0, phoneNumberMaxDigits(digits));
2403
- };
2404
- var isDigit4 = (char) => /\d/.test(char);
2405
- var PhoneNumberInput = /* @__PURE__ */ forwardRef25(
2406
- function PhoneNumberInput2(props, ref) {
2407
- const {
2408
- value: value4,
2409
- defaultValue,
2410
- onValueChange,
2411
- label: labelProp,
2412
- placeholder = "010-0000-0000",
2413
- onKeyDown,
2414
- ...rest
2415
- } = props;
2416
- const inputRef = useRef10(null);
2417
- const m = useMessages();
2418
- const label6 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
2419
- const field3 = useFormattedInput({
2420
- isControlled: "value" in props,
2421
- value: value4,
2422
- defaultValue,
2423
- onValueChange,
2424
- sanitize: sanitize3,
2425
- format: formatPhoneNumber,
2426
- isMeaningful: isDigit4,
2427
- inputRef
2428
- });
2429
- return /* @__PURE__ */ jsx29(
2430
- TextField,
2431
- {
2432
- ref: mergeRefs(ref, inputRef),
2433
- label: label6,
2434
- placeholder,
2435
- type: "tel",
2436
- inputMode: "tel",
2437
- autoComplete: "tel-national",
2438
- value: field3.display,
2439
- onChange: field3.onChange,
2440
- onKeyDown: (event) => {
2441
- field3.onKeyDown(event);
2442
- onKeyDown?.(event);
2443
- },
2444
- ...rest
2445
- }
2446
- );
2447
- }
2448
- );
2449
-
2450
- // src/components/Progress/Progress.tsx
2451
- import { forwardRef as forwardRef26, useId as useId7 } from "react";
2452
-
2453
- // src/components/Progress/Progress.css.ts
2454
- import { createRuntimeFn as _7a46815 } from "@vanilla-extract/recipes/createRuntimeFn";
2455
- var header7 = "_1tvkq001";
2456
- var indicator = /* @__PURE__ */ _7a46815({ defaultClassName: "_1tvkq008", variantClassNames: { color: { primary: "_1tvkq009", neutral: "_1tvkq00a", success: "_1tvkq00b", warning: "_1tvkq00c", danger: "_1tvkq00d" } }, defaultVariants: { color: "primary" }, compoundVariants: [] });
2457
- var label3 = "_1tvkq002";
2458
- var root7 = "_1tvkq000";
2459
- var track = /* @__PURE__ */ _7a46815({ defaultClassName: "_1tvkq004", variantClassNames: { size: { sm: "_1tvkq005", md: "_1tvkq006", lg: "_1tvkq007" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2460
- var value2 = "_1tvkq003";
2461
-
2462
- // src/components/Progress/Progress.tsx
2463
- import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
2464
- var defaultFormat = (value4, max) => `${Math.round(value4 / max * 100)}%`;
2465
- var Progress = /* @__PURE__ */ forwardRef26(function Progress2({
2466
- value: value4,
2467
- max = 100,
2468
- label: label6,
2469
- "aria-label": ariaLabel,
2470
- showValue,
2471
- formatValue = defaultFormat,
2472
- size,
2473
- color,
2474
- className,
2475
- ...rest
2476
- }, ref) {
2477
- const labelId = useId7();
2478
- const isIndeterminate = value4 === void 0 || value4 === null;
2479
- const safeMax = max > 0 ? max : 100;
2480
- const clamped = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value4));
2481
- const valueText = isIndeterminate ? void 0 : formatValue(clamped, safeMax);
2482
- return /* @__PURE__ */ jsxs24("div", { ref, className: cx(root7, className), ...rest, children: [
2483
- (label6 || showValue && valueText) && /* @__PURE__ */ jsxs24("div", { className: header7, children: [
2484
- label6 && /* @__PURE__ */ jsx30("span", { id: labelId, className: label3, children: label6 }),
2485
- showValue && valueText && /* @__PURE__ */ jsx30("span", { className: value2, "aria-hidden": true, children: valueText })
2486
- ] }),
2487
- /* @__PURE__ */ jsx30(
2488
- "div",
2489
- {
2490
- role: "progressbar",
2491
- "aria-labelledby": label6 ? labelId : void 0,
2492
- "aria-label": label6 ? void 0 : ariaLabel,
2493
- "aria-valuemin": 0,
2494
- "aria-valuemax": safeMax,
2495
- "aria-valuenow": isIndeterminate ? void 0 : clamped,
2496
- "aria-valuetext": valueText,
2497
- className: track({ size }),
2498
- children: /* @__PURE__ */ jsx30(
2499
- "div",
2500
- {
2501
- className: indicator({ color }),
2502
- "data-state": isIndeterminate ? "indeterminate" : clamped >= safeMax ? "complete" : "loading",
2503
- style: isIndeterminate ? void 0 : { width: `${clamped / safeMax * 100}%` }
2504
- }
2505
- )
2506
- }
2507
- )
2508
- ] });
2509
- });
2510
-
2511
- // src/components/RadioGroup/RadioGroup.tsx
2512
- import * as RadixRadioGroup from "@radix-ui/react-radio-group";
2513
- import { forwardRef as forwardRef27, useId as useId8 } from "react";
2514
-
2515
- // src/components/RadioGroup/RadioGroup.css.ts
2516
- import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
2517
- var description4 = "_1w9iwjmd";
2518
- var groupLabel = "_1w9iwjme";
2519
- var indicator2 = "_1w9iwjma";
2520
- var items = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
2521
- var labelText = "_1w9iwjmc";
2522
- var option = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2523
- var radio = /* @__PURE__ */ _7a46816({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2524
- var text = "_1w9iwjmb";
2525
-
2526
- // src/components/RadioGroup/RadioGroup.tsx
2527
- import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
2528
- var RadioGroup = /* @__PURE__ */ forwardRef27(function RadioGroup2(props, ref) {
2529
- const {
2530
- options,
2531
- value: value4,
2532
- defaultValue,
2533
- onValueChange,
2534
- label: label6,
2535
- helperText: helperText3,
2536
- error,
2537
- orientation = "vertical",
2538
- size,
2539
- disabled,
2540
- required,
2541
- name,
2542
- id,
2543
- "aria-label": ariaLabel,
2544
- className
2545
- } = props;
2546
- const isControlled = "value" in props;
2547
- const generatedId = useId8();
2548
- const baseId = id ?? generatedId;
2549
- const labelId = label6 ? `${baseId}-label` : void 0;
2550
- const helperId = helperText3 ? `${baseId}-helper` : void 0;
2551
- return /* @__PURE__ */ jsxs25("div", { className: cx(field, className), children: [
2552
- label6 && /* @__PURE__ */ jsxs25("span", { id: labelId, className: cx(label, groupLabel), children: [
2553
- label6,
2554
- required && /* @__PURE__ */ jsx31("span", { className: requiredMark, "aria-hidden": true, children: "*" })
2555
- ] }),
2556
- /* @__PURE__ */ jsx31(
2557
- RadixRadioGroup.Root,
2558
- {
2559
- ref,
2560
- id: baseId,
2561
- value: isControlled ? value4 ?? "" : void 0,
2562
- defaultValue,
2563
- onValueChange,
2564
- orientation,
2565
- disabled,
2566
- required,
2567
- name,
2568
- "aria-label": ariaLabel,
2569
- "aria-labelledby": labelId,
2570
- "aria-describedby": helperId,
2571
- "aria-invalid": error || void 0,
2572
- className: items({ orientation }),
2573
- children: options.map((option2) => {
2574
- const itemId = `${baseId}-${option2.value}`;
2575
- const descriptionId = option2.description ? `${itemId}-description` : void 0;
2576
- const itemDisabled = disabled || option2.disabled;
2577
- return /* @__PURE__ */ jsxs25("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
2578
- /* @__PURE__ */ jsx31(
2579
- RadixRadioGroup.Item,
2580
- {
2581
- id: itemId,
2582
- value: option2.value,
2583
- disabled: option2.disabled,
2584
- "aria-describedby": descriptionId,
2585
- className: radio({ size }),
2586
- children: /* @__PURE__ */ jsx31(RadixRadioGroup.Indicator, { className: indicator2 })
2587
- }
2588
- ),
2589
- /* @__PURE__ */ jsxs25("span", { className: text, children: [
2590
- /* @__PURE__ */ jsx31("label", { htmlFor: itemId, className: labelText, children: option2.label }),
2591
- option2.description && /* @__PURE__ */ jsx31("span", { id: descriptionId, className: description4, children: option2.description })
2592
- ] })
2593
- ] }, option2.value);
2594
- })
2595
- }
2596
- ),
2597
- helperText3 && /* @__PURE__ */ jsx31("p", { id: helperId, className: helperText({ error }), children: helperText3 })
2598
- ] });
2599
- });
2600
-
2601
- // src/components/Select/Select.tsx
2602
- import * as RadixSelect from "@radix-ui/react-select";
2603
- import { forwardRef as forwardRef28, useId as useId9 } from "react";
2604
- import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
2605
- import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
2606
- var Select = /* @__PURE__ */ forwardRef28(function Select2(props, ref) {
2607
- const {
2608
- options,
2609
- value: value4,
2610
- defaultValue,
2611
- onValueChange,
2612
- placeholder,
2613
- label: label6,
2614
- helperText: helperText3,
2615
- error,
2616
- size,
2617
- fullWidth,
2618
- disabled,
2619
- required,
2620
- name,
2621
- id,
2622
- "aria-label": ariaLabel,
2623
- className
2624
- } = props;
2625
- const isControlled = "value" in props;
2626
- const generatedId = useId9();
2627
- const triggerId = id ?? generatedId;
2628
- const helperId = helperText3 ? `${triggerId}-helper` : void 0;
2629
- const portal2 = usePortalProps();
2630
- return /* @__PURE__ */ jsxs26("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
2631
- label6 && /* @__PURE__ */ jsxs26("label", { htmlFor: triggerId, className: label, children: [
2632
- label6,
2633
- required && /* @__PURE__ */ jsx32("span", { className: requiredMark, "aria-hidden": true, children: "*" })
2634
- ] }),
2635
- /* @__PURE__ */ jsxs26(
2636
- RadixSelect.Root,
2637
- {
2638
- value: isControlled ? value4 ?? "" : void 0,
2639
- defaultValue,
2640
- onValueChange,
2641
- disabled,
2642
- required,
2643
- name,
2644
- children: [
2645
- /* @__PURE__ */ jsxs26(
2646
- RadixSelect.Trigger,
2647
- {
2648
- ref,
2649
- id: triggerId,
2650
- "aria-label": ariaLabel,
2651
- "aria-invalid": error || void 0,
2652
- "aria-describedby": helperId,
2653
- "data-invalid": error || void 0,
2654
- className: cx(root3({ size, fullWidth }), trigger2, className),
2655
- children: [
2656
- /* @__PURE__ */ jsx32("span", { className: value, children: /* @__PURE__ */ jsx32(RadixSelect.Value, { placeholder }) }),
2657
- /* @__PURE__ */ jsx32(RadixSelect.Icon, { className: icon4, children: /* @__PURE__ */ jsx32(ChevronDownIcon4, { size: 16 }) })
2658
- ]
2659
- }
2660
- ),
2661
- /* @__PURE__ */ jsx32(RadixSelect.Portal, { children: /* @__PURE__ */ jsx32(
2662
- RadixSelect.Content,
2663
- {
2664
- position: "popper",
2665
- sideOffset: 4,
2666
- collisionPadding: 8,
2667
- className: cx(portal2.className, content5),
2668
- style: portal2.style,
2669
- children: /* @__PURE__ */ jsx32(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs26(
2670
- RadixSelect.Item,
2671
- {
2672
- value: option2.value,
2673
- disabled: option2.disabled,
2674
- className: item4,
2675
- children: [
2676
- /* @__PURE__ */ jsx32(RadixSelect.ItemText, { children: option2.label }),
2677
- /* @__PURE__ */ jsx32(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx32(CheckIcon2, { size: 16 }) })
2678
- ]
2679
- },
2680
- option2.value
2681
- )) })
2682
- }
2683
- ) })
2684
- ]
2685
- }
2686
- ),
2687
- helperText3 && /* @__PURE__ */ jsx32("p", { id: helperId, className: helperText({ error }), children: helperText3 })
2688
- ] });
2689
- });
2690
-
2691
- // src/components/Skeleton/Skeleton.tsx
2692
- import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
2693
- import { forwardRef as forwardRef29 } from "react";
2694
-
2695
- // src/components/Skeleton/Skeleton.css.ts
2696
- import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
2697
- var height = "var(--_1s8datd1)";
2698
- var lines = "_1s8datd6";
2699
- var skeleton = /* @__PURE__ */ _7a46817({ defaultClassName: "_1s8datd2", variantClassNames: { variant: { text: "_1s8datd3", rect: "_1s8datd4", circle: "_1s8datd5" } }, defaultVariants: { variant: "text" }, compoundVariants: [] });
2700
- var width = "var(--_1s8datd0)";
2701
-
2702
- // src/components/Skeleton/Skeleton.tsx
2703
- import { jsx as jsx33 } from "react/jsx-runtime";
2704
- var toCss = (value4) => typeof value4 === "number" ? `${value4}px` : value4;
2705
- var Skeleton = /* @__PURE__ */ forwardRef29(function Skeleton2({ variant = "text", width: width2, height: height2, lines: lines2 = 1, className, style, ...rest }, ref) {
2706
- const w = toCss(width2 ?? (variant === "circle" ? 40 : "100%"));
2707
- const h = toCss(height2 ?? (variant === "circle" ? w : variant === "rect" ? 100 : "1em"));
2708
- if (variant === "text" && lines2 > 1) {
2709
- return /* @__PURE__ */ jsx33(
2710
- "span",
2711
- {
2712
- ref,
2713
- "aria-hidden": true,
2714
- className: cx(lines, className),
2715
- style: { ...assignInlineVars2({ [width]: w }), ...style },
2716
- ...rest,
2717
- children: Array.from({ length: lines2 }, (_, i) => /* @__PURE__ */ jsx33(
2718
- "span",
2719
- {
2720
- className: skeleton({ variant }),
2721
- style: assignInlineVars2({ [width]: i === lines2 - 1 ? "60%" : "100%", [height]: h })
2722
- },
2723
- i
2724
- ))
2725
- }
2726
- );
2727
- }
2728
- return /* @__PURE__ */ jsx33(
2729
- "span",
2730
- {
2731
- ref,
2732
- "aria-hidden": true,
2733
- className: cx(skeleton({ variant }), className),
2734
- style: { ...assignInlineVars2({ [width]: w, [height]: h }), ...style },
2735
- ...rest
2736
- }
2737
- );
2738
- });
2739
-
2740
- // src/components/Slider/Slider.tsx
2741
- import * as RadixSlider from "@radix-ui/react-slider";
2742
- import { forwardRef as forwardRef30, useId as useId10, useState as useState9 } from "react";
2743
-
2744
- // src/components/Slider/Slider.css.ts
2745
- import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
2746
- var field2 = "_126mzjm0";
2747
- var header8 = "_126mzjm1";
2748
- var helperText2 = "_126mzjm4";
2749
- var label4 = "_126mzjm2";
2750
- var range2 = "_126mzjmb";
2751
- var root8 = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjm5", variantClassNames: { size: { sm: "_126mzjm6", md: "_126mzjm7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2752
- var thumb = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjmc", variantClassNames: { size: { sm: "_126mzjmd", md: "_126mzjme" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2753
- var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "_126mzjm8", variantClassNames: { size: { sm: "_126mzjm9", md: "_126mzjma" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2754
- var value3 = "_126mzjm3";
2755
-
2756
- // src/components/Slider/Slider.tsx
2757
- import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
2758
- var Slider = /* @__PURE__ */ forwardRef30(function Slider2(props, ref) {
2759
- const {
2760
- value: value4,
2761
- defaultValue,
2762
- onValueChange,
2763
- min = 0,
2764
- max = 100,
2765
- label: label6,
2766
- "aria-label": ariaLabel,
2767
- helperText: helperText3,
2768
- showValue,
2769
- formatValue = String,
2770
- thumbLabels: thumbLabelsProp,
2771
- size,
2772
- id,
2773
- className,
2774
- disabled,
2775
- ...rest
2776
- } = props;
2777
- const m = useMessages();
2778
- const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
2779
- const generatedId = useId10();
2780
- const baseId = id ?? generatedId;
2781
- const labelId = `${baseId}-label`;
2782
- const helperId = `${baseId}-helper`;
2783
- const isControlled = "value" in props;
2784
- const [innerValue, setInnerValue] = useState9(defaultValue ?? [min]);
2785
- const current2 = isControlled ? value4 ?? [min] : innerValue;
2786
- const isRange = current2.length > 1;
2787
- const handleChange = (next) => {
2788
- if (!isControlled) setInnerValue(next);
2789
- onValueChange?.(next);
2790
- };
2791
- const valueText = current2.map(formatValue).join(" \u2013 ");
2792
- return /* @__PURE__ */ jsxs27("div", { className: cx(field2, className), children: [
2793
- (label6 || showValue) && /* @__PURE__ */ jsxs27("div", { className: header8, children: [
2794
- label6 && /* @__PURE__ */ jsx34("span", { id: labelId, className: label4, children: label6 }),
2795
- showValue && /* @__PURE__ */ jsx34("span", { className: value3, "aria-hidden": true, children: valueText })
2796
- ] }),
2797
- /* @__PURE__ */ jsxs27(
2798
- RadixSlider.Root,
2799
- {
2800
- ref,
2801
- id: baseId,
2802
- min,
2803
- max,
2804
- disabled,
2805
- value: current2,
2806
- onValueChange: handleChange,
2807
- className: root8({ size }),
2808
- ...rest,
2809
- children: [
2810
- /* @__PURE__ */ jsx34(RadixSlider.Track, { className: track2({ size }), children: /* @__PURE__ */ jsx34(RadixSlider.Range, { className: range2 }) }),
2811
- current2.map((thumbValue, index) => {
2812
- const thumbLabelId = `${baseId}-thumb-${index}`;
2813
- return /* @__PURE__ */ jsx34(
2814
- RadixSlider.Thumb,
2815
- {
2816
- className: thumb({ size }),
2817
- "aria-labelledby": label6 ? isRange ? `${labelId} ${thumbLabelId}` : labelId : isRange ? thumbLabelId : void 0,
2818
- "aria-label": label6 ? void 0 : isRange ? void 0 : ariaLabel,
2819
- "aria-valuetext": formatValue(thumbValue),
2820
- "aria-describedby": helperText3 ? helperId : void 0
2821
- },
2822
- index
2823
- );
2824
- })
2825
- ]
2826
- }
2827
- ),
2828
- isRange && current2.map((_, index) => /* @__PURE__ */ jsxs27("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
2829
- label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
2830
- thumbLabels[index] ?? `${index + 1}`
2831
- ] }, index)),
2832
- helperText3 && /* @__PURE__ */ jsx34("span", { id: helperId, className: helperText2, children: helperText3 })
2833
- ] });
2834
- });
2835
-
2836
- // src/components/Stack/Stack.tsx
2837
- import { forwardRef as forwardRef31 } from "react";
2838
-
2839
- // src/components/Stack/Stack.css.ts
2840
- import { createRuntimeFn as _7a46819 } from "@vanilla-extract/recipes/createRuntimeFn";
2841
- var stack = /* @__PURE__ */ _7a46819({ 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: [] });
2842
-
2843
- // src/components/Stack/Stack.tsx
2844
- import { jsx as jsx35 } from "react/jsx-runtime";
2845
- var Stack = /* @__PURE__ */ forwardRef31(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
2846
- return /* @__PURE__ */ jsx35(Component, { ref, className: cx(stack({ direction, gap, align, justify, wrap }), className), ...rest });
2847
- });
2848
-
2849
- // src/components/Switch/Switch.tsx
2850
- import * as RadixSwitch from "@radix-ui/react-switch";
2851
- import { forwardRef as forwardRef32, useId as useId11 } from "react";
2852
-
2853
- // src/components/Switch/Switch.css.ts
2854
- import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
2855
- var label5 = "o33ul29";
2856
- var root9 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul20", variantClassNames: { size: { sm: "o33ul21", md: "o33ul22" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2857
- var thumb2 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul26", variantClassNames: { size: { sm: "o33ul27", md: "o33ul28" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2858
- var track3 = /* @__PURE__ */ _7a46820({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
2859
-
2860
- // src/components/Switch/Switch.tsx
2861
- import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
2862
- var Switch = /* @__PURE__ */ forwardRef32(function Switch2({ label: label6, size, id, className, disabled, "aria-label": ariaLabel, ...rest }, ref) {
2863
- const generatedId = useId11();
2864
- const switchId = id ?? generatedId;
2865
- return /* @__PURE__ */ jsxs28("span", { className: cx(root9({ size }), className), "data-disabled": disabled || void 0, children: [
2866
- /* @__PURE__ */ jsx36(
2867
- RadixSwitch.Root,
2868
- {
2869
- ref,
2870
- id: switchId,
2871
- disabled,
2872
- "aria-label": ariaLabel,
2873
- className: track3({ size }),
2874
- ...rest,
2875
- children: /* @__PURE__ */ jsx36(RadixSwitch.Thumb, { className: thumb2({ size }) })
2876
- }
2877
- ),
2878
- label6 && /* @__PURE__ */ jsx36("label", { htmlFor: switchId, className: label5, children: label6 })
2879
- ] });
2880
- });
2881
-
2882
- // src/components/Table/Table.tsx
2883
- import {
2884
- createContext as createContext3,
2885
- forwardRef as forwardRef33,
2886
- useContext as useContext3,
2887
- useId as useId12
2888
- } from "react";
2889
- import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
2890
-
2891
- // src/components/Table/Table.css.ts
2892
- import { createRuntimeFn as _7a46821 } from "@vanilla-extract/recipes/createRuntimeFn";
2893
- var body4 = "l3ploy5";
2894
- var caption = "l3ploy2";
2895
- var cell2 = /* @__PURE__ */ _7a46821({ defaultClassName: "l3ploy9", variantClassNames: { size: { sm: "l3ploya", md: "l3ployb" }, align: { left: "l3ployc", center: "l3ployd", right: "l3ploye" } }, defaultVariants: { size: "md", align: "left" }, compoundVariants: [] });
2896
- var container = "l3ploy0";
2897
- var footer4 = "l3ploy7";
2898
- var footerCell = "l3ployg";
2899
- var head = "l3ployf";
2900
- var header9 = "l3ploy3";
2901
- var row3 = "l3ploy8";
2902
- var sortButton = "l3ployh";
2903
- var sortIcon = "l3ployi";
2904
- var stickyHeader = "l3ploy4";
2905
- var striped = "l3ploy6";
2906
- var table = "l3ploy1";
2907
-
2908
- // src/components/Table/Table.tsx
2909
- import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
2910
- var TableSizeContext = /* @__PURE__ */ createContext3("md");
2911
- var TableSectionContext = /* @__PURE__ */ createContext3("body");
2912
- var Table = /* @__PURE__ */ forwardRef33(function Table2({
2913
- size = "md",
2914
- striped: striped2,
2915
- stickyHeader: stickyHeader2,
2916
- caption: caption2,
2917
- "aria-label": ariaLabel,
2918
- containerClassName,
2919
- containerStyle,
2920
- className,
2921
- children,
2922
- ...rest
2923
- }, ref) {
2924
- const captionId = useId12();
2925
- return /* @__PURE__ */ jsx37(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx37(
2926
- "div",
2927
- {
2928
- className: cx(container, containerClassName),
2929
- style: containerStyle,
2930
- tabIndex: 0,
2931
- role: "region",
2932
- "aria-labelledby": caption2 ? captionId : void 0,
2933
- "aria-label": caption2 ? void 0 : ariaLabel,
2934
- children: /* @__PURE__ */ jsxs29(
2935
- "table",
2936
- {
2937
- ref,
2938
- className: cx(table, striped2 && striped, stickyHeader2 && stickyHeader, className),
2939
- "aria-label": caption2 ? void 0 : ariaLabel,
2940
- ...rest,
2941
- children: [
2942
- caption2 && /* @__PURE__ */ jsx37("caption", { id: captionId, className: caption, children: caption2 }),
2943
- children
2944
- ]
2945
- }
2946
- )
2947
- }
2948
- ) });
2949
- });
2950
- var TableHeader = /* @__PURE__ */ forwardRef33(
2951
- function TableHeader2({ className, ...rest }, ref) {
2952
- return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx37("thead", { ref, className: cx(header9, className), ...rest }) });
2953
- }
2954
- );
2955
- var TableBody = /* @__PURE__ */ forwardRef33(
2956
- function TableBody2({ className, ...rest }, ref) {
2957
- return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx37("tbody", { ref, className: cx(body4, className), ...rest }) });
2958
- }
2959
- );
2960
- var TableFooter = /* @__PURE__ */ forwardRef33(
2961
- function TableFooter2({ className, ...rest }, ref) {
2962
- return /* @__PURE__ */ jsx37(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx37("tfoot", { ref, className: cx(footer4, className), ...rest }) });
2963
- }
2964
- );
2965
- var TableRow = /* @__PURE__ */ forwardRef33(function TableRow2({ selected, className, ...rest }, ref) {
2966
- return /* @__PURE__ */ jsx37("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
2967
- });
2968
- var TableHead = /* @__PURE__ */ forwardRef33(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
2969
- const size = useContext3(TableSizeContext);
2970
- const section = useContext3(TableSectionContext);
2971
- const sortable = onSort !== void 0;
2972
- const direction = sortDirection ?? "none";
2973
- const SortIcon = direction === "descending" ? ArrowDownIcon : ArrowUpIcon;
2974
- return /* @__PURE__ */ jsx37(
2975
- "th",
2976
- {
2977
- ref,
2978
- scope: scope ?? (section === "header" ? "col" : "row"),
2979
- "aria-sort": sortable && direction !== "none" ? direction : void 0,
2980
- className: cx(
2981
- cell2({ size, align }),
2982
- section === "header" ? head : section === "footer" ? footerCell : void 0,
2983
- className
2984
- ),
2985
- ...rest,
2986
- children: sortable ? /* @__PURE__ */ jsxs29("button", { type: "button", className: sortButton, onClick: onSort, children: [
2987
- children,
2988
- /* @__PURE__ */ jsx37(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
2989
- ] }) : children
2990
- }
2991
- );
2992
- });
2993
- var TableCell = /* @__PURE__ */ forwardRef33(function TableCell2({ align, className, ...rest }, ref) {
2994
- const size = useContext3(TableSizeContext);
2995
- const section = useContext3(TableSectionContext);
2996
- return /* @__PURE__ */ jsx37(
2997
- "td",
2998
- {
2999
- ref,
3000
- className: cx(cell2({ size, align }), section === "footer" && footerCell, className),
3001
- ...rest
3002
- }
3003
- );
3004
- });
3005
-
3006
- // src/components/Tabs/Tabs.tsx
3007
- import * as RadixTabs from "@radix-ui/react-tabs";
3008
- import { createContext as createContext4, forwardRef as forwardRef34, useContext as useContext4 } from "react";
3009
-
3010
- // src/components/Tabs/Tabs.css.ts
3011
- import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
3012
- var content10 = "fvhbtda";
3013
- var list4 = /* @__PURE__ */ _7a46822({ defaultClassName: "fvhbtd0", variantClassNames: { variant: { line: "fvhbtd1", soft: "fvhbtd2" } }, defaultVariants: { variant: "line" }, compoundVariants: [] });
3014
- var trigger3 = /* @__PURE__ */ _7a46822({ 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"]] });
3015
-
3016
- // src/components/Tabs/Tabs.tsx
3017
- import { jsx as jsx38 } from "react/jsx-runtime";
3018
- var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
3019
- var Tabs = /* @__PURE__ */ forwardRef34(function Tabs2({ variant = "line", size = "md", ...props }, ref) {
3020
- const controlled = "value" in props ? { value: props.value ?? "" } : {};
3021
- return /* @__PURE__ */ jsx38(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx38(RadixTabs.Root, { ref, ...props, ...controlled }) });
3022
- });
3023
- var TabsList = /* @__PURE__ */ forwardRef34(function TabsList2({ className, ...rest }, ref) {
3024
- const { variant } = useContext4(TabsStyleContext);
3025
- return /* @__PURE__ */ jsx38(RadixTabs.List, { ref, className: cx(list4({ variant }), className), ...rest });
3026
- });
3027
- var TabsTrigger = /* @__PURE__ */ forwardRef34(function TabsTrigger2({ className, ...rest }, ref) {
3028
- const { variant, size } = useContext4(TabsStyleContext);
3029
- return /* @__PURE__ */ jsx38(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
3030
- });
3031
- var TabsContent = /* @__PURE__ */ forwardRef34(function TabsContent2({ className, ...rest }, ref) {
3032
- return /* @__PURE__ */ jsx38(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
3033
- });
3034
-
3035
- // src/components/Textarea/Textarea.tsx
3036
- import {
3037
- forwardRef as forwardRef35,
3038
- useCallback,
3039
- useEffect as useEffect6,
3040
- useId as useId13,
3041
- useLayoutEffect as useLayoutEffect2,
3042
- useRef as useRef11,
3043
- useState as useState10
3044
- } from "react";
3045
-
3046
- // src/components/Textarea/Textarea.css.ts
3047
- import { createRuntimeFn as _7a46823 } from "@vanilla-extract/recipes/createRuntimeFn";
3048
- var count = "_1koawa9";
3049
- var countOver = "_1koawaa";
3050
- var defaultWidth = "_1koawa7";
3051
- var footer5 = "_1koawa8";
3052
- var textarea = /* @__PURE__ */ _7a46823({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
3053
-
3054
- // src/components/Textarea/Textarea.tsx
3055
- import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
3056
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect6;
3057
- var Textarea = /* @__PURE__ */ forwardRef35(function Textarea2({
3058
- label: label6,
3059
- helperText: helperText3,
3060
- error,
3061
- size,
3062
- fullWidth,
3063
- resize,
3064
- autoResize,
3065
- showCount,
3066
- required,
3067
- id,
3068
- rows = 3,
3069
- value: value4,
3070
- defaultValue,
3071
- onChange,
3072
- maxLength,
3073
- className,
3074
- style,
3075
- "aria-describedby": ariaDescribedBy,
3076
- ...rest
3077
- }, ref) {
3078
- const generatedId = useId13();
3079
- const textareaId = id ?? generatedId;
3080
- const helperId = helperText3 ? `${textareaId}-helper` : void 0;
3081
- const innerRef = useRef11(null);
3082
- const [uncontrolledLength, setUncontrolledLength] = useState10(() => String(defaultValue ?? "").length);
3083
- const length = value4 !== void 0 ? String(value4).length : uncontrolledLength;
3084
- const fitHeight = useCallback(() => {
3085
- const el = innerRef.current;
3086
- if (!autoResize || !el) return;
3087
- el.style.height = "auto";
3088
- const borders = el.offsetHeight - el.clientHeight;
3089
- el.style.height = `${el.scrollHeight + borders}px`;
3090
- }, [autoResize]);
3091
- useIsomorphicLayoutEffect(fitHeight, [fitHeight, value4]);
3092
- const handleChange = (event) => {
3093
- if (value4 === void 0) setUncontrolledLength(event.target.value.length);
3094
- fitHeight();
3095
- onChange?.(event);
3096
- };
3097
- return /* @__PURE__ */ jsxs30("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
3098
- label6 && /* @__PURE__ */ jsxs30("label", { htmlFor: textareaId, className: label, children: [
3099
- label6,
3100
- required && /* @__PURE__ */ jsx39("span", { className: requiredMark, "aria-hidden": true, children: "*" })
3101
- ] }),
3102
- /* @__PURE__ */ jsx39(
3103
- "textarea",
3104
- {
3105
- ref: mergeRefs(innerRef, ref),
3106
- id: textareaId,
3107
- rows,
3108
- value: value4,
3109
- defaultValue,
3110
- onChange: handleChange,
3111
- maxLength,
3112
- required,
3113
- "aria-invalid": error || void 0,
3114
- "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
3115
- className: cx(
3116
- textarea({ size, resize: autoResize ? "none" : resize }),
3117
- !fullWidth && defaultWidth,
3118
- className
3119
- ),
3120
- style: autoResize ? { overflowY: "auto", ...style } : style,
3121
- ...rest
3122
- }
3123
- ),
3124
- (helperText3 || showCount) && /* @__PURE__ */ jsxs30("div", { className: footer5, children: [
3125
- helperText3 && /* @__PURE__ */ jsx39("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
3126
- showCount && /* @__PURE__ */ jsx39("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
3127
- ] })
3128
- ] });
3129
- });
3130
-
3131
- // src/components/Toast/Toast.tsx
3132
- import * as RadixToast from "@radix-ui/react-toast";
3133
- import { createContext as createContext5, useCallback as useCallback2, useContext as useContext5, useMemo as useMemo4, useRef as useRef12, useState as useState11 } from "react";
3134
- import { XIcon as XIcon5 } from "@bestow-ui/icons";
3135
-
3136
- // src/components/Toast/Toast.css.ts
3137
- import { createRuntimeFn as _7a46824 } from "@vanilla-extract/recipes/createRuntimeFn";
3138
- var action2 = "_1g11zvx9";
3139
- var close = "_1g11zvxa";
3140
- var description5 = "_1g11zvx8";
3141
- var title5 = "_1g11zvx7";
3142
- var toast = /* @__PURE__ */ _7a46824({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
3143
- var viewport2 = "_1g11zvx0";
3144
-
3145
- // src/components/Toast/Toast.tsx
3146
- import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
3147
- var REMOVE_DELAY = 500;
3148
- var ToastContext = /* @__PURE__ */ createContext5(null);
3149
- function ToastProvider({ children, duration = 5e3, label: labelProp }) {
3150
- const m = useMessages();
3151
- const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
3152
- const [toasts, setToasts] = useState11([]);
3153
- const nextId = useRef12(0);
3154
- const portal2 = usePortalProps();
3155
- const toast2 = useCallback2(({ variant, ...options }) => {
3156
- if (variant !== void 0) {
3157
- warnOnce(
3158
- 'toast() \uC758 variant \uB294 deprecated \uC608\uC694. color \uB97C \uC4F0\uC138\uC694 (variant "default" \u2192 color "neutral", 1.0 \uC5D0\uC11C \uC81C\uAC70).'
3159
- );
3160
- }
3161
- const color = options.color ?? (variant === "default" ? "neutral" : variant);
3162
- const id = nextId.current++;
3163
- setToasts((prev) => [...prev, { ...options, color, id, open: true }]);
3164
- return id;
3165
- }, []);
3166
- const dismiss = useCallback2((id) => {
3167
- const isTarget = (t) => id === void 0 || t.id === id;
3168
- setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
3169
- setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
3170
- }, []);
3171
- const value4 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
3172
- return /* @__PURE__ */ jsx40(ToastContext.Provider, { value: value4, children: /* @__PURE__ */ jsxs31(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
3173
- children,
3174
- toasts.map(({ id, open, title: title6, description: description6, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs31(
3175
- RadixToast.Root,
3176
- {
3177
- open,
3178
- duration: itemDuration,
3179
- onOpenChange: (nextOpen) => {
3180
- if (!nextOpen) dismiss(id);
3181
- },
3182
- className: toast({ color }),
3183
- children: [
3184
- /* @__PURE__ */ jsx40(RadixToast.Title, { className: title5, children: title6 }),
3185
- description6 && /* @__PURE__ */ jsx40(RadixToast.Description, { className: description5, children: description6 }),
3186
- action3 && /* @__PURE__ */ jsx40(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx40(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
3187
- /* @__PURE__ */ jsx40(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx40(XIcon5, { size: 16 }) })
3188
- ]
3189
- },
3190
- id
3191
- )),
3192
- /* @__PURE__ */ jsx40(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
3193
- ] }) });
3194
- }
3195
- function useToast() {
3196
- const context = useContext5(ToastContext);
3197
- if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
3198
- return context;
3199
- }
3200
-
3201
- // src/components/Tooltip/Tooltip.tsx
3202
- import * as RadixTooltip from "@radix-ui/react-tooltip";
3203
-
3204
- // src/components/Tooltip/Tooltip.css.ts
3205
- var arrow2 = "z7rufs1";
3206
- var content11 = "z7rufs0";
3207
-
3208
- // src/components/Tooltip/Tooltip.tsx
3209
- import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
3210
- function Tooltip({
3211
- content: content12,
3212
- children,
3213
- side = "top",
3214
- align = "center",
3215
- delay = 300,
3216
- open,
3217
- defaultOpen,
3218
- onOpenChange,
3219
- disabled,
3220
- className
3221
- }) {
3222
- const portal2 = usePortalProps();
3223
- if (disabled || content12 == null || content12 === "") return children;
3224
- return /* @__PURE__ */ jsx41(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs32(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
3225
- /* @__PURE__ */ jsx41(RadixTooltip.Trigger, { asChild: true, children }),
3226
- /* @__PURE__ */ jsx41(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs32(
3227
- RadixTooltip.Content,
3228
- {
3229
- side,
3230
- align,
3231
- sideOffset: 6,
3232
- collisionPadding: 8,
3233
- className: cx(portal2.className, content11, className),
3234
- style: portal2.style,
3235
- children: [
3236
- content12,
3237
- /* @__PURE__ */ jsx41(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
3238
- ]
3239
- }
3240
- ) })
3241
- ] }) });
3242
- }
3243
-
3244
- // src/components/Typography/Typography.tsx
3245
- import { forwardRef as forwardRef36 } from "react";
3246
-
3247
- // src/components/Typography/Typography.css.ts
3248
- import { createRuntimeFn as _7a46825 } from "@vanilla-extract/recipes/createRuntimeFn";
3249
- var typography = /* @__PURE__ */ _7a46825({ 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: [] });
3250
-
3251
- // src/components/Typography/Typography.tsx
3252
- import { jsx as jsx42 } from "react/jsx-runtime";
3253
- var defaultElement = {
3254
- display: "h1",
3255
- h1: "h1",
3256
- h2: "h2",
3257
- h3: "h3",
3258
- h4: "h4",
3259
- "body-lg": "p",
3260
- body: "p",
3261
- "body-sm": "p",
3262
- caption: "span"
3263
- };
3264
- var Typography = /* @__PURE__ */ forwardRef36(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
3265
- const Component = as ?? defaultElement[variant];
3266
- return /* @__PURE__ */ jsx42(
3267
- Component,
3268
- {
3269
- ref,
3270
- className: cx(typography({ variant, color, weight, align, truncate }), className),
3271
- ...rest
3272
- }
3273
- );
3274
- });
3275
-
3276
- // src/components/VerificationCodeInput/VerificationCodeInput.tsx
3277
- import { forwardRef as forwardRef37, useEffect as useEffect7, useId as useId14, useRef as useRef13, useState as useState12 } from "react";
3278
-
3279
- // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
3280
- var input4 = "ea01812";
3281
- var row4 = "ea01810";
3282
- var slot = "ea01813";
3283
- var slots = "ea01811";
3284
- var timer = "ea01814";
3285
-
3286
- // src/components/VerificationCodeInput/VerificationCodeInput.tsx
3287
- import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
3288
- var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
3289
- var VerificationCodeInput = /* @__PURE__ */ forwardRef37(
3290
- function VerificationCodeInput2(props, ref) {
3291
- const {
3292
- length = 6,
3293
- value: value4,
3294
- defaultValue,
3295
- onValueChange,
3296
- onComplete,
3297
- type = "numeric",
3298
- label: labelProp,
3299
- helperText: helperText3,
3300
- error,
3301
- disabled,
3302
- autoFocus,
3303
- expiresIn,
3304
- onExpire,
3305
- onResend,
3306
- resendText: resendTextProp,
3307
- expiredText: expiredTextProp,
3308
- name,
3309
- id,
3310
- className
3311
- } = props;
3312
- const m = useMessages();
3313
- const label6 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
3314
- const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
3315
- const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
3316
- const generatedId = useId14();
3317
- const inputId = id ?? generatedId;
3318
- const helperId = `${inputId}-helper`;
3319
- const statusId = `${inputId}-status`;
3320
- const inputRef = useRef13(null);
3321
- const isControlled = "value" in props;
3322
- const [innerValue, setInnerValue] = useState12(defaultValue ?? "");
3323
- const code = (isControlled ? value4 ?? "" : innerValue).slice(0, length);
3324
- const [focused, setFocused] = useState12(false);
3325
- const [endAt, setEndAt] = useState12(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
3326
- const [remaining, setRemaining] = useState12(expiresIn ?? 0);
3327
- const expired = expiresIn !== void 0 && remaining <= 0;
3328
- const onExpireRef = useRef13(onExpire);
3329
- useEffect7(() => {
3330
- onExpireRef.current = onExpire;
3331
- });
3332
- useEffect7(() => {
3333
- if (endAt === null) return;
3334
- const tick = () => {
3335
- const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
3336
- setRemaining(left);
3337
- if (left === 0) {
3338
- clearInterval(timer2);
3339
- onExpireRef.current?.();
3340
- }
3341
- };
3342
- const timer2 = setInterval(tick, 250);
3343
- tick();
3344
- return () => clearInterval(timer2);
3345
- }, [endAt]);
3346
- const setCode = (next) => {
3347
- if (!isControlled) setInnerValue(next);
3348
- onValueChange?.(next);
3349
- if (next.length === length && code.length !== length) onComplete?.(next);
3350
- };
3351
- const handleChange = (event) => {
3352
- const raw = event.target.value;
3353
- const cleaned = (type === "numeric" ? raw.replace(/\D/g, "") : raw.replace(/[^0-9a-z]/gi, "").toUpperCase()).slice(0, length);
3354
- setCode(cleaned);
3355
- };
3356
- const resend = () => {
3357
- onResend?.();
3358
- setCode("");
3359
- if (expiresIn) {
3360
- setEndAt(Date.now() + expiresIn * 1e3);
3361
- setRemaining(expiresIn);
3362
- }
3363
- inputRef.current?.focus();
3364
- };
3365
- const description6 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
3366
- const activeIndex = Math.min(code.length, length - 1);
3367
- return /* @__PURE__ */ jsxs33(
3368
- "div",
3369
- {
3370
- className: cx(field, className),
3371
- "data-invalid": error || void 0,
3372
- "data-disabled": disabled || void 0,
3373
- children: [
3374
- /* @__PURE__ */ jsx43("label", { htmlFor: inputId, className: label, children: label6 }),
3375
- /* @__PURE__ */ jsxs33("div", { className: row4, children: [
3376
- /* @__PURE__ */ jsxs33("div", { className: slots, children: [
3377
- /* @__PURE__ */ jsx43(
3378
- "input",
3379
- {
3380
- ref: mergeRefs(ref, inputRef),
3381
- id: inputId,
3382
- type: "text",
3383
- inputMode: type === "numeric" ? "numeric" : "text",
3384
- autoComplete: "one-time-code",
3385
- pattern: type === "numeric" ? "[0-9]*" : void 0,
3386
- value: code,
3387
- onChange: handleChange,
3388
- onFocus: () => setFocused(true),
3389
- onBlur: () => setFocused(false),
3390
- disabled,
3391
- autoFocus,
3392
- "aria-invalid": error || void 0,
3393
- "aria-describedby": `${helperId} ${statusId}`,
3394
- className: input4
3395
- }
3396
- ),
3397
- Array.from({ length }, (_, index) => /* @__PURE__ */ jsx43(
3398
- "div",
3399
- {
3400
- className: slot,
3401
- "data-active": focused && index === activeIndex ? "" : void 0,
3402
- "aria-hidden": true,
3403
- children: code[index] ?? ""
3404
- },
3405
- index
3406
- ))
3407
- ] }),
3408
- expiresIn !== void 0 && /* @__PURE__ */ jsx43("span", { role: "timer", className: timer, children: formatTime(remaining) }),
3409
- onResend && /* @__PURE__ */ jsx43(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
3410
- ] }),
3411
- /* @__PURE__ */ jsx43("p", { id: helperId, className: helperText({ error }), children: description6 }),
3412
- /* @__PURE__ */ jsx43("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
3413
- name && /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: code })
3414
- ]
3415
- }
3416
- );
3417
- }
3418
- );
3419
- export {
3420
- Accordion,
3421
- AccordionItem,
3422
- AddressInput,
3423
- AgreementGroup,
3424
- Alert,
3425
- AmountInput,
3426
- Avatar,
3427
- Badge,
3428
- Breadcrumb,
3429
- BusinessNumberInput,
3430
- Button,
3431
- Calendar,
3432
- Card,
3433
- CardBody,
3434
- CardFooter,
3435
- CardHeader,
3436
- Checkbox,
3437
- Combobox,
3438
- DatePicker,
3439
- Divider,
3440
- Drawer,
3441
- DrawerClose,
3442
- DropdownMenu,
3443
- DropdownMenuContent,
3444
- DropdownMenuGroup,
3445
- DropdownMenuItem,
3446
- DropdownMenuLabel,
3447
- DropdownMenuSeparator,
3448
- DropdownMenuTrigger,
3449
- IconButton,
3450
- Input,
3451
- Link,
3452
- LocaleProvider,
3453
- Modal,
3454
- ModalClose,
3455
- Pagination,
3456
- PhoneNumberInput,
3457
- Popover2 as Popover,
3458
- PopoverClose,
3459
- Progress,
3460
- RadioGroup,
3461
- Select,
3462
- Skeleton,
3463
- Slider,
3464
- Spinner,
3465
- Stack,
3466
- Switch,
3467
- Table,
3468
- TableBody,
3469
- TableCell,
3470
- TableFooter,
3471
- TableHead,
3472
- TableHeader,
3473
- TableRow,
3474
- Tabs,
3475
- TabsContent,
3476
- TabsList,
3477
- TabsTrigger,
3478
- TextField,
3479
- Textarea,
3480
- ThemeProvider,
3481
- ToastProvider,
3482
- Tooltip,
3483
- Typography,
3484
- VerificationCodeInput,
3485
- composeExtraAddress,
3486
- contrastRatio,
3487
- createIntentColors,
3488
- createTheme,
3489
- en,
3490
- formatBusinessNumber,
3491
- formatKoreanAmount,
3492
- formatKoreanDate,
3493
- formatPhoneNumber,
3494
- hasAllRequiredAgreements,
3495
- isValidBusinessNumber,
3496
- kakaoPostcodeProvider,
3497
- parseISODate,
3498
- themeClass,
3499
- toISODate,
3500
- useMessages,
3501
- usePortalClassName,
3502
- usePortalProps,
3503
- useTheme,
3504
- useToast,
3505
- vars
3506
- };
3507
- //# sourceMappingURL=index.js.map
1
+ export * from './shared.js';
2
+ export * from './client.js';