@designbasekorea/ui 0.1.6 → 0.1.8

package/dist/index.umd.js

@@ -3458,20 +3458,20 @@
 	    const renderSpinner = () => {
 	        switch (type) {
 	            case 'circular':
-	                return (jsxRuntimeExports.jsxs("svg", { className: "designbase-spinner__circular", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-indicator", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round" })] }));
+	                return (jsxRuntimeExports.jsxs("svg", { className: "designbase-spinner__circular", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none" }), jsxRuntimeExports.jsx("circle", { className: "designbase-spinner__circular-indicator", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round" })] }));
 	            case 'dots':
-	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__dots", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" })] }));
+	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__dots", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__dot" })] }));
 	            case 'bars':
-	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__bars", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" })] }));
+	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__bars", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__bar" })] }));
 	            case 'pulse':
-	                return (jsxRuntimeExports.jsx("div", { className: "designbase-spinner__pulse" }));
+	                return jsxRuntimeExports.jsx("div", { className: "designbase-spinner__pulse", "aria-hidden": "true" });
 	            case 'ripple':
-	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__ripple", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" })] }));
+	                return (jsxRuntimeExports.jsxs("div", { className: "designbase-spinner__ripple", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" }), jsxRuntimeExports.jsx("div", { className: "designbase-spinner__ripple-circle" })] }));
 	            default:
 	                return null;
 	        }
 	    };
-	    return (jsxRuntimeExports.jsxs("div", { className: classes, style: style, role: "status", "aria-label": showLabel ? label : undefined, ...props, children: [renderSpinner(), showLabel && label && (jsxRuntimeExports.jsx("span", { className: "designbase-spinner__label", "aria-hidden": "true", children: label }))] }));
+	    return (jsxRuntimeExports.jsxs("div", { className: classes, style: style, role: "status", "aria-live": "polite", "aria-busy": "true", "aria-label": showLabel ? label : undefined, ...props, children: [renderSpinner(), showLabel && label && (jsxRuntimeExports.jsx("span", { className: "designbase-spinner__label", "aria-hidden": "true", children: label }))] }));
 	};
 	Spinner.displayName = 'Spinner';
 
@@ -4407,10 +4407,25 @@
 	};
 	Dropdown.displayName = 'Dropdown';
 
-	const Logo = ({ text = 'Logo', src, alt, size = 'm', variant = 'default', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
+	const DesignBaseLogo = ({ width = 193, height = 40, color = 'currentColor', className, }) => {
+	    return (jsxRuntimeExports.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: jsxRuntimeExports.jsxs("g", { fill: color, children: [jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" }), jsxRuntimeExports.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" })] }) }));
+	};
+	DesignBaseLogo.displayName = 'DesignBaseLogo';
+
+	const DesignBaseLogoMark = ({ size = 38, color = 'currentColor', className, }) => {
+	    // 원본 비율 유지: 95:100
+	    const aspectRatio = 95 / 100;
+	    const width = size * aspectRatio;
+	    const height = size;
+	    return (jsxRuntimeExports.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: jsxRuntimeExports.jsx("path", { fill: color, 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" }) }));
+	};
+	DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
+
+	const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'default', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
 	    const classes = clsx('designbase-logo', `designbase-logo--${size}`, `designbase-logo--${variant}`, {
 	        'designbase-logo--clickable': clickable || href,
 	        'designbase-logo--full-width': fullWidth,
+	        'designbase-logo--svg': type !== 'custom',
 	    }, className);
 	    const handleClick = (e) => {
 	        if (onClick) {
@@ -4418,7 +4433,42 @@
 	            onClick();
 	        }
 	    };
+	    // 크기별 SVG 로고 크기 매핑
+	    // 로고타입 비율: 386:40 (9.65:1)
+	    // 심볼 비율: 95:100 (0.95:1)
+	    const getSvgDimensions = () => {
+	        const dimensions = {
+	            xs: { width: 96, height: 20, markSize: 19 }, // 20 * 9.65 / 2
+	            s: { width: 125, height: 26, markSize: 25 }, // 26 * 9.65 / 2
+	            m: { width: 193, height: 40, markSize: 38 }, // 40 * 9.65 / 2 (기본)
+	            l: { width: 256, height: 53, markSize: 50 }, // 53 * 9.65 / 2
+	            xl: { width: 320, height: 66, markSize: 63 }, // 66 * 9.65 / 2
+	        };
+	        return dimensions[size];
+	    };
+	    // variant별 색상 매핑
+	    const getLogoColor = () => {
+	        const colors = {
+	            default: 'var(--db-text-primary)',
+	            primary: 'var(--db-brand-primary)',
+	            secondary: 'var(--db-text-secondary)',
+	            white: 'var(--db-text-inverse-primary)',
+	            dark: 'var(--db-text-primary)',
+	        };
+	        return colors[variant];
+	    };
 	    const renderLogo = () => {
+	        const { width, height, markSize } = getSvgDimensions();
+	        const color = getLogoColor();
+	        // DesignBase 풀 로고
+	        if (type === 'designbase') {
+	            return (jsxRuntimeExports.jsx(DesignBaseLogo, { width: width, height: height, color: color, className: "designbase-logo__svg" }));
+	        }
+	        // DesignBase 심볼 마크
+	        if (type === 'designbase-mark') {
+	            return (jsxRuntimeExports.jsx(DesignBaseLogoMark, { size: markSize, color: color, className: "designbase-logo__svg" }));
+	        }
+	        // 커스텀 로고
 	        if (src) {
 	            return (jsxRuntimeExports.jsx("img", { src: src, alt: alt || text, className: "designbase-logo__image", ...props }));
 	        }