@designbasekorea/ui 0.1.16 → 0.1.18

package/dist/index.esm.js

@@ -6054,6 +6054,20 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
 };
 
 const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
+    // 사이즈별 아이콘 크기
+    const getIconSize = () => {
+        switch (size) {
+            case 's':
+                return 12;
+            case 'm':
+                return 16;
+            case 'l':
+                return 20;
+            default:
+                return 16;
+        }
+    };
+    const iconSize = getIconSize();
     const handleDelete = (e) => {
         e.stopPropagation();
         if (!disabled && onDelete) {
@@ -6065,7 +6079,7 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
             onClick();
         }
     };
-    const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, `designbase-chip--${color}`, {
+    const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, {
         'designbase-chip--deletable': deletable,
         'designbase-chip--disabled': disabled,
         'designbase-chip--selected': selected,
@@ -6077,7 +6091,11 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
                 e.preventDefault();
                 handleClick();
             }
-        }, ...props, children: [startIcon && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__start-icon", children: startIcon })), jsxRuntimeExports.jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__end-icon", children: endIcon })), deletable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsxRuntimeExports.jsx("i", { className: "designbase-icon-x" }) }))] }));
+        }, ...props, children: [startIcon && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__start-icon", children: React.isValidElement(startIcon)
+                    ? React.cloneElement(startIcon, { size: iconSize })
+                    : startIcon })), jsxRuntimeExports.jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsxRuntimeExports.jsx("span", { className: "designbase-chip__end-icon", children: React.isValidElement(endIcon)
+                    ? React.cloneElement(endIcon, { size: iconSize })
+                    : endIcon })), deletable && (jsxRuntimeExports.jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsxRuntimeExports.jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 };
 Chip.displayName = 'Chip';