@designbasekorea/ui 0.4.0 → 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 +2 -2
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +20 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -10
- 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 +20 -10
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -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) {
|