@designbasekorea/ui 0.3.5 → 0.4.1
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 +4 -2
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +23 -13
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +23 -13
- 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 +23 -13
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -3857,7 +3857,7 @@ const Breadcrumbs = ({ items, size = 'm', breadcrumbStyle = 'default', separator
|
|
|
3857
3857
|
};
|
|
3858
3858
|
Breadcrumbs.displayName = 'Breadcrumbs';
|
|
3859
3859
|
|
|
3860
|
-
const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3860
|
+
const SegmentControl = ({ options, defaultValue, value, size = 'm', variant = 'default', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3861
3861
|
const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? options[0]?.value ?? '');
|
|
3862
3862
|
const [focusedIndex, setFocusedIndex] = React.useState(-1);
|
|
3863
3863
|
const containerRef = React.useRef(null);
|
|
@@ -3932,7 +3932,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
|
|
|
3932
3932
|
setFocusedIndex(-1);
|
|
3933
3933
|
}, []);
|
|
3934
3934
|
const selectedIndex = options.findIndex(option => option.value === selectedValue);
|
|
3935
|
-
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, {
|
|
3935
|
+
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, `designbase-segment-control--${variant}`, {
|
|
3936
3936
|
'designbase-segment-control--full-width': fullWidth,
|
|
3937
3937
|
'designbase-segment-control--disabled': disabled,
|
|
3938
3938
|
}, className);
|
|
@@ -3952,7 +3952,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
|
|
|
3952
3952
|
else {
|
|
3953
3953
|
segmentRefs.current.delete(option.value);
|
|
3954
3954
|
}
|
|
3955
|
-
}, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntime.jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })] }, option.value));
|
|
3955
|
+
}, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntime.jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), variant === 'default' && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })), variant === 'icon-only' && !option.icon && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", "aria-label": option.label, children: option.label }))] }, option.value));
|
|
3956
3956
|
}), jsxRuntime.jsx("div", { className: "designbase-segment-control__indicator", style: {
|
|
3957
3957
|
transform: `translateX(${selectedIndex * 100}%)`,
|
|
3958
3958
|
width: `${100 / options.length}%`,
|
|
@@ -8340,22 +8340,26 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8340
8340
|
return (jsxRuntime.jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
|
|
8341
8341
|
};
|
|
8342
8342
|
|
|
8343
|
-
const DesignBaseLogo = ({ width = 193, height = 40, color
|
|
8344
|
-
|
|
8343
|
+
const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
|
|
8344
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8345
|
+
const fillColor = color || '#000000';
|
|
8346
|
+
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 386 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Logo", children: jsxRuntime.jsxs("g", { fill: fillColor, children: [jsxRuntime.jsx("polygon", { points: "58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3" }), jsxRuntime.jsx("path", { d: "M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z" }), jsxRuntime.jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), jsxRuntime.jsx("path", { d: "M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z" }), jsxRuntime.jsx("polygon", { points: "209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4" }), jsxRuntime.jsx("path", { d: "M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z" }), jsxRuntime.jsx("path", { d: "M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z" }), jsxRuntime.jsx("path", { d: "M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z" }), jsxRuntime.jsx("polygon", { points: "364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3" }), jsxRuntime.jsx("path", { d: "M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z" })] }) }));
|
|
8345
8347
|
};
|
|
8346
8348
|
DesignBaseLogo.displayName = 'DesignBaseLogo';
|
|
8347
8349
|
|
|
8348
|
-
const DesignBaseLogoMark = ({ size = 38, color
|
|
8350
|
+
const DesignBaseLogoMark = ({ size = 38, color, className, }) => {
|
|
8349
8351
|
// 원본 비율 유지: 95:100
|
|
8350
8352
|
const aspectRatio = 95 / 100;
|
|
8351
8353
|
const width = size * aspectRatio;
|
|
8352
8354
|
const height = size;
|
|
8353
|
-
|
|
8355
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8356
|
+
const fillColor = color || '#000000';
|
|
8357
|
+
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 95 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Mark", children: jsxRuntime.jsx("path", { fill: fillColor, d: "M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z" }) }));
|
|
8354
8358
|
};
|
|
8355
8359
|
DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
|
|
8356
8360
|
|
|
8357
|
-
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = '
|
|
8358
|
-
const classes = clsx('designbase-logo', `designbase-logo--${size}`, `designbase-logo--${variant}`, {
|
|
8361
|
+
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'original', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
|
|
8362
|
+
const classes = clsx('designbase-logo', `designbase-logo--${size}`, variant && `designbase-logo--${variant}`, {
|
|
8359
8363
|
'designbase-logo--clickable': clickable || href,
|
|
8360
8364
|
'designbase-logo--full-width': fullWidth,
|
|
8361
8365
|
'designbase-logo--svg': type !== 'custom',
|
|
@@ -8381,12 +8385,18 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
|
|
|
8381
8385
|
};
|
|
8382
8386
|
// variant별 색상 매핑
|
|
8383
8387
|
const getLogoColor = () => {
|
|
8388
|
+
// original일 때는 undefined를 반환하여 SVG 원본 색상(검정) 사용
|
|
8389
|
+
// color prop을 전달하지 않으면 SVG 로고 컴포넌트가 원본 색상을 사용
|
|
8390
|
+
if (variant === 'original') {
|
|
8391
|
+
return undefined;
|
|
8392
|
+
}
|
|
8384
8393
|
const colors = {
|
|
8394
|
+
light: '#ffffff', // 밝은 색상 (흰색)
|
|
8395
|
+
dark: '#000000', // 어두운 색상 (검정)
|
|
8385
8396
|
default: 'var(--db-text-primary)',
|
|
8386
8397
|
primary: 'var(--db-brand-primary)',
|
|
8387
8398
|
secondary: 'var(--db-text-secondary)',
|
|
8388
|
-
white: '
|
|
8389
|
-
dark: 'var(--db-text-primary)',
|
|
8399
|
+
white: '#ffffff', // white는 light와 동일하게 처리
|
|
8390
8400
|
};
|
|
8391
8401
|
return colors[variant];
|
|
8392
8402
|
};
|
|
@@ -8395,11 +8405,11 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
|
|
|
8395
8405
|
const color = getLogoColor();
|
|
8396
8406
|
// DesignBase 풀 로고
|
|
8397
8407
|
if (type === 'designbase') {
|
|
8398
|
-
return (jsxRuntime.jsx(DesignBaseLogo, { width: width, height: height, color
|
|
8408
|
+
return (jsxRuntime.jsx(DesignBaseLogo, { width: width, height: height, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8399
8409
|
}
|
|
8400
8410
|
// DesignBase 심볼 마크
|
|
8401
8411
|
if (type === 'designbase-mark') {
|
|
8402
|
-
return (jsxRuntime.jsx(DesignBaseLogoMark, { size: markSize, color
|
|
8412
|
+
return (jsxRuntime.jsx(DesignBaseLogoMark, { size: markSize, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8403
8413
|
}
|
|
8404
8414
|
// 커스텀 로고
|
|
8405
8415
|
if (src) {
|