@designbasekorea/ui 0.1.15 → 0.1.17

package/dist/index.js

@@ -4902,6 +4902,17 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
 });
 Input.displayName = 'Input';
 
+// DoneIcon이 있으면 사용하고, 없으면 기본 SVG 사용
+let DoneIcon = null;
+let MinusIcon = null;
+try {
+    const icons = require('@designbasekorea/icons');
+    DoneIcon = icons.DoneIcon || null;
+    MinusIcon = icons.MinusIcon || null;
+}
+catch (e) {
+    // 아이콘 패키지가 없으면 기본 SVG 사용
+}
 const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminate = false, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
@@ -4923,16 +4934,7 @@ const Checkbox = React.forwardRef(({ isSelected, defaultSelected, isIndeterminat
         'designbase-checkbox--readonly': isReadOnly,
         'designbase-checkbox--no-label': !hasLabel,
     }, className);
-    const getIconColor = () => {
-        if (isDisabled) {
-            return 'var(--color-action-interactive-icon-disabled)';
-        }
-        if (selected || isIndeterminate) {
-            return 'var(--color-action-interactive-icon-selected)';
-        }
-        return 'var(--color-action-interactive-icon)';
-    };
-    return (jsxRuntimeExports.jsxs("label", { className: classes, children: [jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, name: name, value: value, type: "checkbox", checked: selected, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, className: "designbase-checkbox__input" }), jsxRuntimeExports.jsxs("div", { className: "designbase-checkbox__visual", children: [selected && !isIndeterminate && (jsxRuntimeExports.jsx("svg", { className: "designbase-checkbox__check-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M20 6L9 17L4 12", stroke: getIconColor(), strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), isIndeterminate && (jsxRuntimeExports.jsx("svg", { className: "designbase-checkbox__indeterminate-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M5 12H19", stroke: getIconColor(), strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }), children && jsxRuntimeExports.jsx("span", { className: "designbase-checkbox__label", children: children })] }));
+    return (jsxRuntimeExports.jsxs("label", { className: classes, children: [jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, name: name, value: value, type: "checkbox", checked: selected, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, className: "designbase-checkbox__input" }), jsxRuntimeExports.jsxs("div", { className: "designbase-checkbox__visual", children: [selected && !isIndeterminate && (jsxRuntimeExports.jsx("div", { className: "designbase-checkbox__check-icon", children: DoneIcon ? (jsxRuntimeExports.jsx(DoneIcon, { size: 16 })) : (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", children: jsxRuntimeExports.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })), isIndeterminate && (jsxRuntimeExports.jsx("div", { className: "designbase-checkbox__indeterminate-icon", children: MinusIcon ? (jsxRuntimeExports.jsx(MinusIcon, { size: 16 })) : (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", children: jsxRuntimeExports.jsx("path", { d: "M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }))] }), children && jsxRuntimeExports.jsx("span", { className: "designbase-checkbox__label", children: children })] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -6054,6 +6056,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 +6081,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 +6093,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';