@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.esm.js
CHANGED
|
@@ -8338,22 +8338,26 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8338
8338
|
return (jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
|
|
8339
8339
|
};
|
|
8340
8340
|
|
|
8341
|
-
const DesignBaseLogo = ({ width = 193, height = 40, color
|
|
8342
|
-
|
|
8341
|
+
const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
|
|
8342
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8343
|
+
const fillColor = color || '#000000';
|
|
8344
|
+
return (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: jsxs("g", { fill: fillColor, children: [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" }), 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" }), jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" })] }) }));
|
|
8343
8345
|
};
|
|
8344
8346
|
DesignBaseLogo.displayName = 'DesignBaseLogo';
|
|
8345
8347
|
|
|
8346
|
-
const DesignBaseLogoMark = ({ size = 38, color
|
|
8348
|
+
const DesignBaseLogoMark = ({ size = 38, color, className, }) => {
|
|
8347
8349
|
// 원본 비율 유지: 95:100
|
|
8348
8350
|
const aspectRatio = 95 / 100;
|
|
8349
8351
|
const width = size * aspectRatio;
|
|
8350
8352
|
const height = size;
|
|
8351
|
-
|
|
8353
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8354
|
+
const fillColor = color || '#000000';
|
|
8355
|
+
return (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: 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" }) }));
|
|
8352
8356
|
};
|
|
8353
8357
|
DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
|
|
8354
8358
|
|
|
8355
|
-
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = '
|
|
8356
|
-
const classes = clsx('designbase-logo', `designbase-logo--${size}`, `designbase-logo--${variant}`, {
|
|
8359
|
+
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'original', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
|
|
8360
|
+
const classes = clsx('designbase-logo', `designbase-logo--${size}`, variant && `designbase-logo--${variant}`, {
|
|
8357
8361
|
'designbase-logo--clickable': clickable || href,
|
|
8358
8362
|
'designbase-logo--full-width': fullWidth,
|
|
8359
8363
|
'designbase-logo--svg': type !== 'custom',
|
|
@@ -8379,12 +8383,18 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
|
|
|
8379
8383
|
};
|
|
8380
8384
|
// variant별 색상 매핑
|
|
8381
8385
|
const getLogoColor = () => {
|
|
8386
|
+
// original일 때는 undefined를 반환하여 SVG 원본 색상(검정) 사용
|
|
8387
|
+
// color prop을 전달하지 않으면 SVG 로고 컴포넌트가 원본 색상을 사용
|
|
8388
|
+
if (variant === 'original') {
|
|
8389
|
+
return undefined;
|
|
8390
|
+
}
|
|
8382
8391
|
const colors = {
|
|
8392
|
+
light: '#ffffff', // 밝은 색상 (흰색)
|
|
8393
|
+
dark: '#000000', // 어두운 색상 (검정)
|
|
8383
8394
|
default: 'var(--db-text-primary)',
|
|
8384
8395
|
primary: 'var(--db-brand-primary)',
|
|
8385
8396
|
secondary: 'var(--db-text-secondary)',
|
|
8386
|
-
white: '
|
|
8387
|
-
dark: 'var(--db-text-primary)',
|
|
8397
|
+
white: '#ffffff', // white는 light와 동일하게 처리
|
|
8388
8398
|
};
|
|
8389
8399
|
return colors[variant];
|
|
8390
8400
|
};
|
|
@@ -8393,11 +8403,11 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
|
|
|
8393
8403
|
const color = getLogoColor();
|
|
8394
8404
|
// DesignBase 풀 로고
|
|
8395
8405
|
if (type === 'designbase') {
|
|
8396
|
-
return (jsx(DesignBaseLogo, { width: width, height: height, color
|
|
8406
|
+
return (jsx(DesignBaseLogo, { width: width, height: height, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8397
8407
|
}
|
|
8398
8408
|
// DesignBase 심볼 마크
|
|
8399
8409
|
if (type === 'designbase-mark') {
|
|
8400
|
-
return (jsx(DesignBaseLogoMark, { size: markSize, color
|
|
8410
|
+
return (jsx(DesignBaseLogoMark, { size: markSize, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8401
8411
|
}
|
|
8402
8412
|
// 커스텀 로고
|
|
8403
8413
|
if (src) {
|