@bestow-ui/react 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +244 -70
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +476 -476
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +138 -8
- package/dist/index.d.ts +138 -8
- package/dist/index.js +233 -63
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
package/dist/index.cjs
CHANGED
|
@@ -43,8 +43,12 @@ __export(index_exports, {
|
|
|
43
43
|
ToastProvider: () => ToastProvider,
|
|
44
44
|
Tooltip: () => Tooltip,
|
|
45
45
|
Typography: () => Typography,
|
|
46
|
+
contrastRatio: () => contrastRatio,
|
|
47
|
+
createIntentColors: () => createIntentColors,
|
|
48
|
+
createTheme: () => createTheme,
|
|
46
49
|
themeClass: () => themeClass,
|
|
47
50
|
usePortalClassName: () => usePortalClassName,
|
|
51
|
+
usePortalProps: () => usePortalProps,
|
|
48
52
|
useTheme: () => useTheme,
|
|
49
53
|
useToast: () => useToast,
|
|
50
54
|
vars: () => vars
|
|
@@ -52,8 +56,160 @@ __export(index_exports, {
|
|
|
52
56
|
module.exports = __toCommonJS(index_exports);
|
|
53
57
|
|
|
54
58
|
// src/theme/contract.css.ts
|
|
55
|
-
var themeClass = { light: "
|
|
56
|
-
var vars = { space: { "0": "var(--
|
|
59
|
+
var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
|
|
60
|
+
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)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" }, 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)" } } };
|
|
61
|
+
|
|
62
|
+
// src/theme/color.ts
|
|
63
|
+
var import_tokens = require("@bestow-ui/tokens");
|
|
64
|
+
function parseHex(hex) {
|
|
65
|
+
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
|
|
66
|
+
if (!m) throw new Error(`\uC62C\uBC14\uB978 hex \uC0C9\uC774 \uC544\uB2C8\uC5D0\uC694: "${hex}" (\uC608: "#7c3aed")`);
|
|
67
|
+
let h = m[1];
|
|
68
|
+
if (h.length === 3) h = h.replace(/./g, (c) => c + c);
|
|
69
|
+
return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
|
|
70
|
+
}
|
|
71
|
+
function toHex(rgb) {
|
|
72
|
+
return `#${rgb.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("")}`;
|
|
73
|
+
}
|
|
74
|
+
var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
75
|
+
var fromLinear = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
|
|
76
|
+
function rgbToOklch([r, g, b]) {
|
|
77
|
+
const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)];
|
|
78
|
+
const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
|
|
79
|
+
const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
|
|
80
|
+
const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
|
|
81
|
+
const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
|
|
82
|
+
const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
|
|
83
|
+
const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
|
|
84
|
+
return { l: L, c: Math.hypot(a, bb), h: Math.atan2(bb, a) };
|
|
85
|
+
}
|
|
86
|
+
function oklchToRgbUnclamped({ l, c, h }) {
|
|
87
|
+
const a = c * Math.cos(h);
|
|
88
|
+
const b = c * Math.sin(h);
|
|
89
|
+
const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
|
|
90
|
+
const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
|
|
91
|
+
const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
|
|
92
|
+
return [
|
|
93
|
+
fromLinear(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_),
|
|
94
|
+
fromLinear(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_),
|
|
95
|
+
fromLinear(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_)
|
|
96
|
+
];
|
|
97
|
+
}
|
|
98
|
+
var inGamut = (rgb) => rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
|
|
99
|
+
function oklchToRgb(color) {
|
|
100
|
+
const l = Math.min(1, Math.max(0, color.l));
|
|
101
|
+
let rgb = oklchToRgbUnclamped({ ...color, l });
|
|
102
|
+
if (inGamut(rgb)) return rgb;
|
|
103
|
+
let lo = 0;
|
|
104
|
+
let hi = color.c;
|
|
105
|
+
for (let i = 0; i < 20; i++) {
|
|
106
|
+
const mid = (lo + hi) / 2;
|
|
107
|
+
if (inGamut(oklchToRgbUnclamped({ l, c: mid, h: color.h }))) lo = mid;
|
|
108
|
+
else hi = mid;
|
|
109
|
+
}
|
|
110
|
+
rgb = oklchToRgbUnclamped({ l, c: lo, h: color.h });
|
|
111
|
+
return rgb;
|
|
112
|
+
}
|
|
113
|
+
function luminance([r, g, b]) {
|
|
114
|
+
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
|
|
115
|
+
}
|
|
116
|
+
function contrastRatio(a, b) {
|
|
117
|
+
const [la, lb] = [luminance(parseHex(a)), luminance(parseHex(b))];
|
|
118
|
+
return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
|
|
119
|
+
}
|
|
120
|
+
function blend(fg, alpha, bg) {
|
|
121
|
+
const [f, b] = [parseHex(fg), parseHex(bg)];
|
|
122
|
+
return toHex(f.map((v, i) => v * alpha + b[i] * (1 - alpha)));
|
|
123
|
+
}
|
|
124
|
+
var withL = (base, l, c = base.c) => toHex(oklchToRgb({ l, c, h: base.h }));
|
|
125
|
+
function findReadable(base, startL, step, backgrounds) {
|
|
126
|
+
let l = startL;
|
|
127
|
+
for (let i = 0; i < 40; i++) {
|
|
128
|
+
const hex = withL(base, l);
|
|
129
|
+
if (backgrounds.every((bg) => contrastRatio(hex, bg) >= 4.5)) return hex;
|
|
130
|
+
l = Math.min(1, Math.max(0, l + step));
|
|
131
|
+
}
|
|
132
|
+
return step < 0 ? import_tokens.palette.black : import_tokens.palette.white;
|
|
133
|
+
}
|
|
134
|
+
function pickContrast(solid) {
|
|
135
|
+
const white = import_tokens.palette.white;
|
|
136
|
+
const dark = import_tokens.palette.gray[900];
|
|
137
|
+
if (contrastRatio(white, solid) >= 4.5) return white;
|
|
138
|
+
return contrastRatio(dark, solid) >= contrastRatio(white, solid) ? dark : white;
|
|
139
|
+
}
|
|
140
|
+
var rgba = (hex, alpha) => {
|
|
141
|
+
const [r, g, b] = parseHex(hex).map((v) => Math.round(v * 255));
|
|
142
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
143
|
+
};
|
|
144
|
+
function createIntentColors(intent, color) {
|
|
145
|
+
const solid = toHex(parseHex(color));
|
|
146
|
+
const base = rgbToOklch(parseHex(solid));
|
|
147
|
+
const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
|
|
148
|
+
const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
|
|
149
|
+
const light = {
|
|
150
|
+
solid,
|
|
151
|
+
solidHover: withL(base, Math.max(0, base.l - 0.06)),
|
|
152
|
+
contrast: pickContrast(solid),
|
|
153
|
+
subtle: lightSubtle,
|
|
154
|
+
subtleHover: lightSubtleHover,
|
|
155
|
+
text: findReadable(base, Math.min(base.l, 0.55), -0.02, [import_tokens.lightColors.bg.default, lightSubtle, lightSubtleHover])
|
|
156
|
+
};
|
|
157
|
+
const darkBg = import_tokens.darkColors.bg.default;
|
|
158
|
+
const darkSolid = base.l < 0.5 ? withL(base, 0.55) : solid;
|
|
159
|
+
const darkBase = rgbToOklch(parseHex(darkSolid));
|
|
160
|
+
const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
|
|
161
|
+
const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
|
|
162
|
+
const dark = {
|
|
163
|
+
solid: darkSolid,
|
|
164
|
+
solidHover: withL(darkBase, Math.min(1, darkBase.l + 0.06)),
|
|
165
|
+
contrast: pickContrast(darkSolid),
|
|
166
|
+
subtle: rgba(darkSolid, 0.16),
|
|
167
|
+
subtleHover: rgba(darkSolid, 0.26),
|
|
168
|
+
text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
|
|
169
|
+
};
|
|
170
|
+
return { light: { color: { [intent]: light } }, dark: { color: { [intent]: dark } } };
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// src/theme/createTheme.ts
|
|
174
|
+
var import_dynamic = require("@vanilla-extract/dynamic");
|
|
175
|
+
function deepMerge(target, source) {
|
|
176
|
+
if (!source) return target;
|
|
177
|
+
const out = { ...target };
|
|
178
|
+
for (const [key, value2] of Object.entries(source)) {
|
|
179
|
+
if (value2 === void 0) continue;
|
|
180
|
+
const prev = out[key];
|
|
181
|
+
out[key] = typeof value2 === "object" && typeof prev === "object" ? deepMerge(prev, value2) : value2;
|
|
182
|
+
}
|
|
183
|
+
return out;
|
|
184
|
+
}
|
|
185
|
+
function createTheme(...inputs) {
|
|
186
|
+
let light = {};
|
|
187
|
+
let dark = {};
|
|
188
|
+
for (const input3 of inputs) {
|
|
189
|
+
light = deepMerge(deepMerge(light, input3.common), input3.light);
|
|
190
|
+
dark = deepMerge(deepMerge(dark, input3.common), input3.dark);
|
|
191
|
+
}
|
|
192
|
+
return Object.freeze({ light, dark });
|
|
193
|
+
}
|
|
194
|
+
function mergeThemes(a, b) {
|
|
195
|
+
if (!a) return b;
|
|
196
|
+
if (!b) return a;
|
|
197
|
+
return createTheme(a, b);
|
|
198
|
+
}
|
|
199
|
+
function flatten(partial, contract, out) {
|
|
200
|
+
for (const [key, value2] of Object.entries(partial)) {
|
|
201
|
+
const target = contract[key];
|
|
202
|
+
if (target === void 0) continue;
|
|
203
|
+
if (typeof target === "string" && typeof value2 === "string") out[target] = value2;
|
|
204
|
+
else if (typeof target === "object" && typeof value2 === "object") flatten(value2, target, out);
|
|
205
|
+
}
|
|
206
|
+
return out;
|
|
207
|
+
}
|
|
208
|
+
function themeToStyle(theme, mode) {
|
|
209
|
+
if (!theme) return void 0;
|
|
210
|
+
const map = flatten(theme[mode], vars, {});
|
|
211
|
+
return Object.keys(map).length ? (0, import_dynamic.assignInlineVars)(map) : void 0;
|
|
212
|
+
}
|
|
57
213
|
|
|
58
214
|
// src/theme/ThemeProvider.tsx
|
|
59
215
|
var import_react = require("react");
|
|
@@ -69,15 +225,36 @@ var root = "sfyhlv1 sfyhlv0";
|
|
|
69
225
|
|
|
70
226
|
// src/theme/ThemeProvider.tsx
|
|
71
227
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
72
|
-
var ThemeContext = (0, import_react.createContext)("light");
|
|
73
|
-
var ThemeProvider = (0, import_react.forwardRef)(function ThemeProvider2({ theme
|
|
74
|
-
|
|
228
|
+
var ThemeContext = (0, import_react.createContext)({ theme: "light" });
|
|
229
|
+
var ThemeProvider = (0, import_react.forwardRef)(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
|
|
230
|
+
const parent = (0, import_react.useContext)(ThemeContext);
|
|
231
|
+
const theme = themeProp ?? parent.theme;
|
|
232
|
+
const merged = (0, import_react.useMemo)(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
|
|
233
|
+
const value2 = (0, import_react.useMemo)(
|
|
234
|
+
() => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
|
|
235
|
+
[theme, merged]
|
|
236
|
+
);
|
|
237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
238
|
+
"div",
|
|
239
|
+
{
|
|
240
|
+
ref,
|
|
241
|
+
"data-theme": theme,
|
|
242
|
+
className: cx(themeClass[theme], root, className),
|
|
243
|
+
style: value2.style ? { ...value2.style, ...style } : style,
|
|
244
|
+
...rest,
|
|
245
|
+
children
|
|
246
|
+
}
|
|
247
|
+
) });
|
|
75
248
|
});
|
|
76
249
|
function useTheme() {
|
|
77
|
-
return (0, import_react.useContext)(ThemeContext);
|
|
250
|
+
return (0, import_react.useContext)(ThemeContext).theme;
|
|
251
|
+
}
|
|
252
|
+
function usePortalProps() {
|
|
253
|
+
const { theme, style } = (0, import_react.useContext)(ThemeContext);
|
|
254
|
+
return { className: cx(themeClass[theme], portal), style };
|
|
78
255
|
}
|
|
79
256
|
function usePortalClassName() {
|
|
80
|
-
return
|
|
257
|
+
return usePortalProps().className;
|
|
81
258
|
}
|
|
82
259
|
|
|
83
260
|
// src/components/Button/Button.tsx
|
|
@@ -226,19 +403,7 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
|
|
|
226
403
|
|
|
227
404
|
// src/components/Modal/Modal.tsx
|
|
228
405
|
var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
229
|
-
|
|
230
|
-
// src/icons/index.tsx
|
|
231
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
232
|
-
var base = { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true };
|
|
233
|
-
function CloseIcon(props) {
|
|
234
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
|
|
235
|
-
}
|
|
236
|
-
function ChevronDownIcon(props) {
|
|
237
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
238
|
-
}
|
|
239
|
-
function CheckIcon(props) {
|
|
240
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
241
|
-
}
|
|
406
|
+
var import_icons = require("@bestow-ui/icons");
|
|
242
407
|
|
|
243
408
|
// src/components/Modal/Modal.css.ts
|
|
244
409
|
var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
@@ -253,7 +418,7 @@ var overlay = "_1pdsmv00";
|
|
|
253
418
|
var title = "_1pdsmv07";
|
|
254
419
|
|
|
255
420
|
// src/components/Modal/Modal.tsx
|
|
256
|
-
var
|
|
421
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
257
422
|
function Modal({
|
|
258
423
|
open,
|
|
259
424
|
defaultOpen,
|
|
@@ -268,27 +433,28 @@ function Modal({
|
|
|
268
433
|
closeOnOverlayClick = true,
|
|
269
434
|
className
|
|
270
435
|
}) {
|
|
271
|
-
const
|
|
272
|
-
return /* @__PURE__ */ (0,
|
|
273
|
-
trigger2 && /* @__PURE__ */ (0,
|
|
274
|
-
/* @__PURE__ */ (0,
|
|
275
|
-
/* @__PURE__ */ (0,
|
|
276
|
-
/* @__PURE__ */ (0,
|
|
436
|
+
const portal2 = usePortalProps();
|
|
437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
|
|
438
|
+
trigger2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
|
|
439
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Dialog.Portal, { children: [
|
|
440
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
277
442
|
Dialog.Content,
|
|
278
443
|
{
|
|
279
|
-
className: cx(
|
|
444
|
+
className: cx(portal2.className, content({ size }), className),
|
|
445
|
+
style: portal2.style,
|
|
280
446
|
onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
|
|
281
447
|
...description3 ? {} : { "aria-describedby": void 0 },
|
|
282
448
|
children: [
|
|
283
|
-
/* @__PURE__ */ (0,
|
|
284
|
-
/* @__PURE__ */ (0,
|
|
285
|
-
/* @__PURE__ */ (0,
|
|
286
|
-
description3 && /* @__PURE__ */ (0,
|
|
449
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: header, children: [
|
|
450
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: headings, children: [
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Title, { className: title, children: title3 }),
|
|
452
|
+
description3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Description, { className: description, children: description3 })
|
|
287
453
|
] }),
|
|
288
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
454
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.XIcon, { size: 16 }) })
|
|
289
455
|
] }),
|
|
290
|
-
children && /* @__PURE__ */ (0,
|
|
291
|
-
footer2 && /* @__PURE__ */ (0,
|
|
456
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: body, children }),
|
|
457
|
+
footer2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: footer, children: footer2 })
|
|
292
458
|
]
|
|
293
459
|
}
|
|
294
460
|
)
|
|
@@ -300,6 +466,7 @@ var ModalClose = Dialog.Close;
|
|
|
300
466
|
// src/components/Select/Select.tsx
|
|
301
467
|
var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
|
|
302
468
|
var import_react6 = require("react");
|
|
469
|
+
var import_icons2 = require("@bestow-ui/icons");
|
|
303
470
|
|
|
304
471
|
// src/components/Select/Select.css.ts
|
|
305
472
|
var content2 = "_1kx81e83";
|
|
@@ -311,7 +478,7 @@ var value = "_1kx81e81";
|
|
|
311
478
|
var viewport = "_1kx81e84";
|
|
312
479
|
|
|
313
480
|
// src/components/Select/Select.tsx
|
|
314
|
-
var
|
|
481
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
315
482
|
var Select = (0, import_react6.forwardRef)(function Select2({
|
|
316
483
|
options,
|
|
317
484
|
value: value2,
|
|
@@ -333,13 +500,13 @@ var Select = (0, import_react6.forwardRef)(function Select2({
|
|
|
333
500
|
const generatedId = (0, import_react6.useId)();
|
|
334
501
|
const triggerId = id ?? generatedId;
|
|
335
502
|
const helperId = helperText2 ? `${triggerId}-helper` : void 0;
|
|
336
|
-
const
|
|
337
|
-
return /* @__PURE__ */ (0,
|
|
338
|
-
label2 && /* @__PURE__ */ (0,
|
|
503
|
+
const portal2 = usePortalProps();
|
|
504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
|
|
505
|
+
label2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: triggerId, className: label, children: [
|
|
339
506
|
label2,
|
|
340
|
-
required && /* @__PURE__ */ (0,
|
|
507
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
|
|
341
508
|
] }),
|
|
342
|
-
/* @__PURE__ */ (0,
|
|
509
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
343
510
|
RadixSelect.Root,
|
|
344
511
|
{
|
|
345
512
|
value: value2,
|
|
@@ -349,7 +516,7 @@ var Select = (0, import_react6.forwardRef)(function Select2({
|
|
|
349
516
|
required,
|
|
350
517
|
name,
|
|
351
518
|
children: [
|
|
352
|
-
/* @__PURE__ */ (0,
|
|
519
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
353
520
|
RadixSelect.Trigger,
|
|
354
521
|
{
|
|
355
522
|
ref,
|
|
@@ -360,27 +527,28 @@ var Select = (0, import_react6.forwardRef)(function Select2({
|
|
|
360
527
|
"data-invalid": error || void 0,
|
|
361
528
|
className: cx(root3({ size, fullWidth }), trigger, className),
|
|
362
529
|
children: [
|
|
363
|
-
/* @__PURE__ */ (0,
|
|
364
|
-
/* @__PURE__ */ (0,
|
|
530
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Value, { placeholder }) }),
|
|
531
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.ChevronDownIcon, { size: 16 }) })
|
|
365
532
|
]
|
|
366
533
|
}
|
|
367
534
|
),
|
|
368
|
-
/* @__PURE__ */ (0,
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
369
536
|
RadixSelect.Content,
|
|
370
537
|
{
|
|
371
538
|
position: "popper",
|
|
372
539
|
sideOffset: 4,
|
|
373
540
|
collisionPadding: 8,
|
|
374
|
-
className: cx(
|
|
375
|
-
|
|
541
|
+
className: cx(portal2.className, content2),
|
|
542
|
+
style: portal2.style,
|
|
543
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
376
544
|
RadixSelect.Item,
|
|
377
545
|
{
|
|
378
546
|
value: option.value,
|
|
379
547
|
disabled: option.disabled,
|
|
380
548
|
className: item,
|
|
381
549
|
children: [
|
|
382
|
-
/* @__PURE__ */ (0,
|
|
383
|
-
/* @__PURE__ */ (0,
|
|
550
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemText, { children: option.label }),
|
|
551
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.CheckIcon, { size: 16 }) })
|
|
384
552
|
]
|
|
385
553
|
},
|
|
386
554
|
option.value
|
|
@@ -390,7 +558,7 @@ var Select = (0, import_react6.forwardRef)(function Select2({
|
|
|
390
558
|
]
|
|
391
559
|
}
|
|
392
560
|
),
|
|
393
|
-
helperText2 && /* @__PURE__ */ (0,
|
|
561
|
+
helperText2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
|
|
394
562
|
] });
|
|
395
563
|
});
|
|
396
564
|
|
|
@@ -402,9 +570,9 @@ var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn"
|
|
|
402
570
|
var stack = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
|
|
403
571
|
|
|
404
572
|
// src/components/Stack/Stack.tsx
|
|
405
|
-
var
|
|
573
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
406
574
|
var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
|
|
407
|
-
return /* @__PURE__ */ (0,
|
|
575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
408
576
|
Component,
|
|
409
577
|
{
|
|
410
578
|
ref,
|
|
@@ -417,6 +585,7 @@ var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div
|
|
|
417
585
|
// src/components/Toast/Toast.tsx
|
|
418
586
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
419
587
|
var import_react8 = require("react");
|
|
588
|
+
var import_icons3 = require("@bestow-ui/icons");
|
|
420
589
|
|
|
421
590
|
// src/components/Toast/Toast.css.ts
|
|
422
591
|
var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
@@ -428,13 +597,13 @@ var toast = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1
|
|
|
428
597
|
var viewport2 = "_1g11zvx0";
|
|
429
598
|
|
|
430
599
|
// src/components/Toast/Toast.tsx
|
|
431
|
-
var
|
|
600
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
432
601
|
var REMOVE_DELAY = 500;
|
|
433
602
|
var ToastContext = (0, import_react8.createContext)(null);
|
|
434
603
|
function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC" }) {
|
|
435
604
|
const [toasts, setToasts] = (0, import_react8.useState)([]);
|
|
436
605
|
const nextId = (0, import_react8.useRef)(0);
|
|
437
|
-
const
|
|
606
|
+
const portal2 = usePortalProps();
|
|
438
607
|
const toast2 = (0, import_react8.useCallback)((options) => {
|
|
439
608
|
const id = nextId.current++;
|
|
440
609
|
setToasts((prev) => [...prev, { ...options, id, open: true }]);
|
|
@@ -446,9 +615,9 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
|
|
|
446
615
|
setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
|
|
447
616
|
}, []);
|
|
448
617
|
const value2 = (0, import_react8.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
|
|
449
|
-
return /* @__PURE__ */ (0,
|
|
618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RadixToast.Provider, { duration, label: label2, swipeDirection: "right", children: [
|
|
450
619
|
children,
|
|
451
|
-
toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0,
|
|
620
|
+
toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
452
621
|
RadixToast.Root,
|
|
453
622
|
{
|
|
454
623
|
open,
|
|
@@ -458,15 +627,15 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
|
|
|
458
627
|
},
|
|
459
628
|
className: toast({ variant }),
|
|
460
629
|
children: [
|
|
461
|
-
/* @__PURE__ */ (0,
|
|
462
|
-
description3 && /* @__PURE__ */ (0,
|
|
463
|
-
action2 && /* @__PURE__ */ (0,
|
|
464
|
-
/* @__PURE__ */ (0,
|
|
630
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Title, { className: title2, children: title3 }),
|
|
631
|
+
description3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Description, { className: description2, children: description3 }),
|
|
632
|
+
action2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
|
|
633
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.XIcon, { size: 16 }) })
|
|
465
634
|
]
|
|
466
635
|
},
|
|
467
636
|
id
|
|
468
637
|
)),
|
|
469
|
-
/* @__PURE__ */ (0,
|
|
638
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
|
|
470
639
|
] }) });
|
|
471
640
|
}
|
|
472
641
|
function useToast() {
|
|
@@ -483,7 +652,7 @@ var arrow = "z7rufs1";
|
|
|
483
652
|
var content3 = "z7rufs0";
|
|
484
653
|
|
|
485
654
|
// src/components/Tooltip/Tooltip.tsx
|
|
486
|
-
var
|
|
655
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
487
656
|
function Tooltip({
|
|
488
657
|
content: content4,
|
|
489
658
|
children,
|
|
@@ -496,21 +665,22 @@ function Tooltip({
|
|
|
496
665
|
disabled,
|
|
497
666
|
className
|
|
498
667
|
}) {
|
|
499
|
-
const
|
|
668
|
+
const portal2 = usePortalProps();
|
|
500
669
|
if (disabled || content4 == null || content4 === "") return children;
|
|
501
|
-
return /* @__PURE__ */ (0,
|
|
502
|
-
/* @__PURE__ */ (0,
|
|
503
|
-
/* @__PURE__ */ (0,
|
|
670
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
504
673
|
RadixTooltip.Content,
|
|
505
674
|
{
|
|
506
675
|
side,
|
|
507
676
|
align,
|
|
508
677
|
sideOffset: 6,
|
|
509
678
|
collisionPadding: 8,
|
|
510
|
-
className: cx(
|
|
679
|
+
className: cx(portal2.className, content3, className),
|
|
680
|
+
style: portal2.style,
|
|
511
681
|
children: [
|
|
512
682
|
content4,
|
|
513
|
-
/* @__PURE__ */ (0,
|
|
683
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
|
|
514
684
|
]
|
|
515
685
|
}
|
|
516
686
|
) })
|
|
@@ -525,7 +695,7 @@ var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn"
|
|
|
525
695
|
var typography = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", inherit: "kioliog" }, weight: { regular: "kiolioh", medium: "kiolioi", semibold: "kiolioj", bold: "kioliok" }, align: { start: "kioliol", center: "kioliom", end: "kiolion" }, truncate: { true: "kiolioo" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
|
|
526
696
|
|
|
527
697
|
// src/components/Typography/Typography.tsx
|
|
528
|
-
var
|
|
698
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
529
699
|
var defaultElement = {
|
|
530
700
|
display: "h1",
|
|
531
701
|
h1: "h1",
|
|
@@ -539,7 +709,7 @@ var defaultElement = {
|
|
|
539
709
|
};
|
|
540
710
|
var Typography = (0, import_react9.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
|
|
541
711
|
const Component = as ?? defaultElement[variant];
|
|
542
|
-
return /* @__PURE__ */ (0,
|
|
712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
543
713
|
Component,
|
|
544
714
|
{
|
|
545
715
|
ref,
|
|
@@ -562,8 +732,12 @@ var Typography = (0, import_react9.forwardRef)(function Typography2({ variant =
|
|
|
562
732
|
ToastProvider,
|
|
563
733
|
Tooltip,
|
|
564
734
|
Typography,
|
|
735
|
+
contrastRatio,
|
|
736
|
+
createIntentColors,
|
|
737
|
+
createTheme,
|
|
565
738
|
themeClass,
|
|
566
739
|
usePortalClassName,
|
|
740
|
+
usePortalProps,
|
|
567
741
|
useTheme,
|
|
568
742
|
useToast,
|
|
569
743
|
vars
|