@designbasekorea/ui 0.1.39 → 0.1.40
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.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +40 -34
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +136 -119
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +136 -119
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +136 -119
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -2263,7 +2263,124 @@
|
|
|
2263
2263
|
});
|
|
2264
2264
|
Button.displayName = 'Button';
|
|
2265
2265
|
|
|
2266
|
-
|
|
2266
|
+
// Designbase 테마 기반 색상 계열 (hex 값 사용)
|
|
2267
|
+
const colorSchemes = {
|
|
2268
|
+
primary: [
|
|
2269
|
+
'#48c3ff', // blue-400
|
|
2270
|
+
'#1ea2ff', // blue-500
|
|
2271
|
+
'#0683ff', // blue-600
|
|
2272
|
+
'#006fff', // blue-700
|
|
2273
|
+
'#0855c5', // blue-800
|
|
2274
|
+
],
|
|
2275
|
+
secondary: [
|
|
2276
|
+
'#a4adb2', // neutral-400
|
|
2277
|
+
'#8c9499', // neutral-500
|
|
2278
|
+
'#757b80', // neutral-600
|
|
2279
|
+
'#5e6366', // neutral-700
|
|
2280
|
+
'#464a4d', // neutral-800
|
|
2281
|
+
],
|
|
2282
|
+
success: [
|
|
2283
|
+
'#4ade80', // green-400
|
|
2284
|
+
'#22c55e', // green-500
|
|
2285
|
+
'#16a34a', // green-600
|
|
2286
|
+
'#14b8a6', // teal-500
|
|
2287
|
+
'#0d9485', // teal-600
|
|
2288
|
+
],
|
|
2289
|
+
warning: [
|
|
2290
|
+
'#ff8c32', // orange-400
|
|
2291
|
+
'#ff6b0a', // orange-500
|
|
2292
|
+
'#ff5100', // orange-600
|
|
2293
|
+
'#ffe50d', // yellow-400
|
|
2294
|
+
'#ffd600', // yellow-500
|
|
2295
|
+
],
|
|
2296
|
+
error: [
|
|
2297
|
+
'#f87171', // red-400
|
|
2298
|
+
'#ef4444', // red-500
|
|
2299
|
+
'#dc2626', // red-600
|
|
2300
|
+
'#b91c1c', // red-700
|
|
2301
|
+
'#991b1b', // red-800
|
|
2302
|
+
],
|
|
2303
|
+
info: [
|
|
2304
|
+
'#48c3ff', // blue-400
|
|
2305
|
+
'#1ea2ff', // blue-500
|
|
2306
|
+
'#0683ff', // blue-600
|
|
2307
|
+
'#006fff', // blue-700
|
|
2308
|
+
'#0855c5', // blue-800
|
|
2309
|
+
],
|
|
2310
|
+
purple: [
|
|
2311
|
+
'#a385ff', // purple-400
|
|
2312
|
+
'#8a58ff', // purple-500
|
|
2313
|
+
'#7830f7', // purple-600
|
|
2314
|
+
'#6a1ee3', // purple-700
|
|
2315
|
+
'#5818bf', // purple-800
|
|
2316
|
+
],
|
|
2317
|
+
ocean: [
|
|
2318
|
+
'#1ea2ff', // blue-500
|
|
2319
|
+
'#48c3ff', // blue-400
|
|
2320
|
+
'#2dd4c2', // teal-400
|
|
2321
|
+
'#14b8a6', // teal-500
|
|
2322
|
+
'#0d9485', // teal-600
|
|
2323
|
+
],
|
|
2324
|
+
sunset: [
|
|
2325
|
+
'#ff8c32', // orange-400
|
|
2326
|
+
'#ff6b0a', // orange-500
|
|
2327
|
+
'#ff5100', // orange-600
|
|
2328
|
+
'#ef4444', // red-500
|
|
2329
|
+
'#f87171', // red-400
|
|
2330
|
+
],
|
|
2331
|
+
};
|
|
2332
|
+
const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
|
|
2333
|
+
const [gradientStyle, setGradientStyle] = React.useState({});
|
|
2334
|
+
// 그라데이션 생성 함수
|
|
2335
|
+
const generateGradient = React.useMemo(() => {
|
|
2336
|
+
return () => {
|
|
2337
|
+
const schemeColors = colorSchemes[scheme];
|
|
2338
|
+
const numColors = Math.min(6, Math.max(3, colorCount));
|
|
2339
|
+
const colors = [];
|
|
2340
|
+
for (let i = 0; i < numColors; i++) {
|
|
2341
|
+
const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
|
|
2342
|
+
colors.push(randomColor);
|
|
2343
|
+
}
|
|
2344
|
+
const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
|
|
2345
|
+
const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
|
|
2346
|
+
const centerX = Math.random() * 100;
|
|
2347
|
+
const centerY = Math.random() * 100;
|
|
2348
|
+
return {
|
|
2349
|
+
background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
|
|
2350
|
+
filter: `blur(${blur}px)`,
|
|
2351
|
+
transition: `all ${animationDuration}s ease-in-out`,
|
|
2352
|
+
};
|
|
2353
|
+
};
|
|
2354
|
+
}, [scheme, colorCount, blur, animationDuration]);
|
|
2355
|
+
// 초기 그라데이션 및 애니메이션
|
|
2356
|
+
React.useEffect(() => {
|
|
2357
|
+
setGradientStyle(generateGradient());
|
|
2358
|
+
if (animated) {
|
|
2359
|
+
const interval = setInterval(() => {
|
|
2360
|
+
setGradientStyle(generateGradient());
|
|
2361
|
+
}, animationDuration * 1000);
|
|
2362
|
+
return () => clearInterval(interval);
|
|
2363
|
+
}
|
|
2364
|
+
}, [animated, animationDuration, generateGradient]);
|
|
2365
|
+
const classes = clsx('designbase-random-gradient', {
|
|
2366
|
+
'designbase-random-gradient--animated': animated,
|
|
2367
|
+
'designbase-random-gradient--with-overlay': overlay,
|
|
2368
|
+
}, className);
|
|
2369
|
+
const containerStyle = {
|
|
2370
|
+
width: typeof width === 'number' ? `${width}px` : width,
|
|
2371
|
+
height: typeof height === 'number' ? `${height}px` : height,
|
|
2372
|
+
};
|
|
2373
|
+
const overlayStyle = overlay
|
|
2374
|
+
? {
|
|
2375
|
+
background: `linear-gradient(45deg, ${colorSchemes[scheme][0]}, ${colorSchemes[scheme][1]})`,
|
|
2376
|
+
opacity: overlayOpacity,
|
|
2377
|
+
}
|
|
2378
|
+
: {};
|
|
2379
|
+
return (jsxRuntime.jsxs("div", { className: classes, style: containerStyle, children: [jsxRuntime.jsx("div", { className: "designbase-random-gradient__background", style: gradientStyle }), overlay && (jsxRuntime.jsx("div", { className: "designbase-random-gradient__overlay", style: overlayStyle })), children && (jsxRuntime.jsx("div", { className: "designbase-random-gradient__content", children: children }))] }));
|
|
2380
|
+
};
|
|
2381
|
+
RandomGradient.displayName = 'RandomGradient';
|
|
2382
|
+
|
|
2383
|
+
const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientAnimated = true, className, }) => {
|
|
2267
2384
|
const [isVisible, setIsVisible] = React.useState(true);
|
|
2268
2385
|
const [progress, setProgress] = React.useState(100);
|
|
2269
2386
|
React.useEffect(() => {
|
|
@@ -2293,6 +2410,7 @@
|
|
|
2293
2410
|
return null;
|
|
2294
2411
|
const classes = clsx('designbase-ad-banner', `designbase-ad-banner--type-${type}`, `designbase-ad-banner--variant-${variant}`, {
|
|
2295
2412
|
'designbase-ad-banner--auto-close': autoClose,
|
|
2413
|
+
'designbase-ad-banner--with-gradient': useRandomGradient,
|
|
2296
2414
|
}, className);
|
|
2297
2415
|
// 기본 아이콘
|
|
2298
2416
|
const defaultIcons = {
|
|
@@ -2305,7 +2423,23 @@
|
|
|
2305
2423
|
const displayTitle = title || getDefaultTitle(type);
|
|
2306
2424
|
const displaySubtitle = subtitle || getDefaultSubtitle(type);
|
|
2307
2425
|
const displayCtaText = ctaText || getDefaultCtaText(type);
|
|
2308
|
-
|
|
2426
|
+
// variant에 따른 그라데이션 색상 계열 매핑
|
|
2427
|
+
const getGradientScheme = () => {
|
|
2428
|
+
if (gradientScheme)
|
|
2429
|
+
return gradientScheme;
|
|
2430
|
+
const schemeMap = {
|
|
2431
|
+
primary: 'primary',
|
|
2432
|
+
secondary: 'secondary',
|
|
2433
|
+
success: 'success',
|
|
2434
|
+
warning: 'warning',
|
|
2435
|
+
error: 'error',
|
|
2436
|
+
gradient: 'sunset',
|
|
2437
|
+
};
|
|
2438
|
+
return schemeMap[variant];
|
|
2439
|
+
};
|
|
2440
|
+
// 배너 컨텐츠
|
|
2441
|
+
const bannerContent = (jsxRuntime.jsxs("div", { className: "designbase-ad-banner__content", children: [jsxRuntime.jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && !useRandomGradient && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__main", children: [jsxRuntime.jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsxRuntime.jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxRuntime.jsxs("div", { className: "designbase-ad-banner__text", children: [jsxRuntime.jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsxRuntime.jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsxRuntime.jsx("div", { className: "designbase-ad-banner__actions", children: jsxRuntime.jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsxRuntime.jsx(icons.ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress", children: jsxRuntime.jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }));
|
|
2442
|
+
return (jsxRuntime.jsx("div", { className: classes, children: useRandomGradient ? (jsxRuntime.jsx(RandomGradient, { scheme: getGradientScheme(), animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
|
|
2309
2443
|
};
|
|
2310
2444
|
// 기본 텍스트 헬퍼
|
|
2311
2445
|
function getDefaultTitle(type) {
|
|
@@ -8618,123 +8752,6 @@
|
|
|
8618
8752
|
}) }));
|
|
8619
8753
|
};
|
|
8620
8754
|
|
|
8621
|
-
// Designbase 테마 기반 색상 계열 (hex 값 사용)
|
|
8622
|
-
const colorSchemes = {
|
|
8623
|
-
primary: [
|
|
8624
|
-
'#48c3ff', // blue-400
|
|
8625
|
-
'#1ea2ff', // blue-500
|
|
8626
|
-
'#0683ff', // blue-600
|
|
8627
|
-
'#006fff', // blue-700
|
|
8628
|
-
'#0855c5', // blue-800
|
|
8629
|
-
],
|
|
8630
|
-
secondary: [
|
|
8631
|
-
'#a4adb2', // neutral-400
|
|
8632
|
-
'#8c9499', // neutral-500
|
|
8633
|
-
'#757b80', // neutral-600
|
|
8634
|
-
'#5e6366', // neutral-700
|
|
8635
|
-
'#464a4d', // neutral-800
|
|
8636
|
-
],
|
|
8637
|
-
success: [
|
|
8638
|
-
'#4ade80', // green-400
|
|
8639
|
-
'#22c55e', // green-500
|
|
8640
|
-
'#16a34a', // green-600
|
|
8641
|
-
'#14b8a6', // teal-500
|
|
8642
|
-
'#0d9485', // teal-600
|
|
8643
|
-
],
|
|
8644
|
-
warning: [
|
|
8645
|
-
'#ff8c32', // orange-400
|
|
8646
|
-
'#ff6b0a', // orange-500
|
|
8647
|
-
'#ff5100', // orange-600
|
|
8648
|
-
'#ffe50d', // yellow-400
|
|
8649
|
-
'#ffd600', // yellow-500
|
|
8650
|
-
],
|
|
8651
|
-
error: [
|
|
8652
|
-
'#f87171', // red-400
|
|
8653
|
-
'#ef4444', // red-500
|
|
8654
|
-
'#dc2626', // red-600
|
|
8655
|
-
'#b91c1c', // red-700
|
|
8656
|
-
'#991b1b', // red-800
|
|
8657
|
-
],
|
|
8658
|
-
info: [
|
|
8659
|
-
'#48c3ff', // blue-400
|
|
8660
|
-
'#1ea2ff', // blue-500
|
|
8661
|
-
'#0683ff', // blue-600
|
|
8662
|
-
'#006fff', // blue-700
|
|
8663
|
-
'#0855c5', // blue-800
|
|
8664
|
-
],
|
|
8665
|
-
purple: [
|
|
8666
|
-
'#a385ff', // purple-400
|
|
8667
|
-
'#8a58ff', // purple-500
|
|
8668
|
-
'#7830f7', // purple-600
|
|
8669
|
-
'#6a1ee3', // purple-700
|
|
8670
|
-
'#5818bf', // purple-800
|
|
8671
|
-
],
|
|
8672
|
-
ocean: [
|
|
8673
|
-
'#1ea2ff', // blue-500
|
|
8674
|
-
'#48c3ff', // blue-400
|
|
8675
|
-
'#2dd4c2', // teal-400
|
|
8676
|
-
'#14b8a6', // teal-500
|
|
8677
|
-
'#0d9485', // teal-600
|
|
8678
|
-
],
|
|
8679
|
-
sunset: [
|
|
8680
|
-
'#ff8c32', // orange-400
|
|
8681
|
-
'#ff6b0a', // orange-500
|
|
8682
|
-
'#ff5100', // orange-600
|
|
8683
|
-
'#ef4444', // red-500
|
|
8684
|
-
'#f87171', // red-400
|
|
8685
|
-
],
|
|
8686
|
-
};
|
|
8687
|
-
const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
|
|
8688
|
-
const [gradientStyle, setGradientStyle] = React.useState({});
|
|
8689
|
-
// 그라데이션 생성 함수
|
|
8690
|
-
const generateGradient = React.useMemo(() => {
|
|
8691
|
-
return () => {
|
|
8692
|
-
const schemeColors = colorSchemes[scheme];
|
|
8693
|
-
const numColors = Math.min(6, Math.max(3, colorCount));
|
|
8694
|
-
const colors = [];
|
|
8695
|
-
for (let i = 0; i < numColors; i++) {
|
|
8696
|
-
const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
|
|
8697
|
-
colors.push(randomColor);
|
|
8698
|
-
}
|
|
8699
|
-
const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
|
|
8700
|
-
const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
|
|
8701
|
-
const centerX = Math.random() * 100;
|
|
8702
|
-
const centerY = Math.random() * 100;
|
|
8703
|
-
return {
|
|
8704
|
-
background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
|
|
8705
|
-
filter: `blur(${blur}px)`,
|
|
8706
|
-
transition: `all ${animationDuration}s ease-in-out`,
|
|
8707
|
-
};
|
|
8708
|
-
};
|
|
8709
|
-
}, [scheme, colorCount, blur, animationDuration]);
|
|
8710
|
-
// 초기 그라데이션 및 애니메이션
|
|
8711
|
-
React.useEffect(() => {
|
|
8712
|
-
setGradientStyle(generateGradient());
|
|
8713
|
-
if (animated) {
|
|
8714
|
-
const interval = setInterval(() => {
|
|
8715
|
-
setGradientStyle(generateGradient());
|
|
8716
|
-
}, animationDuration * 1000);
|
|
8717
|
-
return () => clearInterval(interval);
|
|
8718
|
-
}
|
|
8719
|
-
}, [animated, animationDuration, generateGradient]);
|
|
8720
|
-
const classes = clsx('designbase-random-gradient', {
|
|
8721
|
-
'designbase-random-gradient--animated': animated,
|
|
8722
|
-
'designbase-random-gradient--with-overlay': overlay,
|
|
8723
|
-
}, className);
|
|
8724
|
-
const containerStyle = {
|
|
8725
|
-
width: typeof width === 'number' ? `${width}px` : width,
|
|
8726
|
-
height: typeof height === 'number' ? `${height}px` : height,
|
|
8727
|
-
};
|
|
8728
|
-
const overlayStyle = overlay
|
|
8729
|
-
? {
|
|
8730
|
-
background: `linear-gradient(45deg, ${colorSchemes[scheme][0]}, ${colorSchemes[scheme][1]})`,
|
|
8731
|
-
opacity: overlayOpacity,
|
|
8732
|
-
}
|
|
8733
|
-
: {};
|
|
8734
|
-
return (jsxRuntime.jsxs("div", { className: classes, style: containerStyle, children: [jsxRuntime.jsx("div", { className: "designbase-random-gradient__background", style: gradientStyle }), overlay && (jsxRuntime.jsx("div", { className: "designbase-random-gradient__overlay", style: overlayStyle })), children && (jsxRuntime.jsx("div", { className: "designbase-random-gradient__content", children: children }))] }));
|
|
8735
|
-
};
|
|
8736
|
-
RandomGradient.displayName = 'RandomGradient';
|
|
8737
|
-
|
|
8738
8755
|
const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
|
|
8739
8756
|
const [internalValue, setInternalValue] = React.useState(value ?? min);
|
|
8740
8757
|
const [internalRange, setInternalRange] = React.useState(range ?? [min, max]);
|