@designbasekorea/ui 0.2.28 → 0.2.30

package/dist/index.umd.js

@@ -5278,7 +5278,7 @@
     };
     Chip.displayName = 'Chip';
 
-    /** 유틸 */
+    /* ----------------------- 유틸 ----------------------- */
     const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
     const hexToRgb = (hex) => {
         const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
@@ -5290,6 +5290,7 @@
         const toHex = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
     };
+    /** RGB ↔ HSV (HSV: h[0-360], s[0-100], v[0-100]) */
     const rgbToHsv = (r, g, b) => {
         r /= 255;
         g /= 255;
@@ -5352,7 +5353,11 @@
             gp = 0;
             bp = x;
         }
-        return { r: Math.round((rp + m) * 255), g: Math.round((gp + m) * 255), b: Math.round((bp + m) * 255) };
+        return {
+            r: Math.round((rp + m) * 255),
+            g: Math.round((gp + m) * 255),
+            b: Math.round((bp + m) * 255),
+        };
     };
     const rgbToHsl = (r, g, b) => {
         r /= 255;
@@ -5377,10 +5382,15 @@
             }
             h *= 60;
         }
-        return { h: Math.round(h * 100) / 100, s: Math.round(s * 10000) / 100, l: Math.round(l * 10000) / 100 };
+        return {
+            h: Math.round(h * 100) / 100,
+            s: Math.round(s * 10000) / 100,
+            l: Math.round(l * 10000) / 100,
+        };
     };
+    /* ----------------------- 컴포넌트 ----------------------- */
     const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, onApply, onCancel, className, }) => {
-        /** 내부 상태 (HSV + alpha%) */
+        /** 내부 HSV + alpha */
         const [h, setH] = React.useState(211);
         const [s, setS] = React.useState(100);
         const [v, setV] = React.useState(50);
@@ -5388,15 +5398,13 @@
         const [isOpen, setIsOpen] = React.useState(false);
         const [format, setFormat] = React.useState('hex');
         const [isCopied, setIsCopied] = React.useState(false);
-        // 하단 컬러 인풋(문자열), 알파 인풋(문자열) – 엔터로만 확정
         const [colorInput, setColorInput] = React.useState('');
         const [alphaInput, setAlphaInput] = React.useState('100');
-        // 모달용 임시 상태 (적용/취소 버튼용)
         const [tempColor, setTempColor] = React.useState('');
         const pickerRef = React.useRef(null);
         const areaRef = React.useRef(null);
         const dragging = React.useRef(false);
-        /** 초기화 */
+        /** 초기값 세팅 */
         React.useEffect(() => {
             const initial = (value || defaultValue).toUpperCase();
             const rgb = hexToRgb(initial);
@@ -5405,12 +5413,11 @@
                 setH(h);
                 setS(s);
                 setV(v);
-                setColorInput(initial);
-                setAlphaInput('100');
             }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
+            setColorInput(initial);
+            setAlphaInput('100');
         }, []);
-        /** 외부 value 변화 */
+        /** 제어형(value) → HSV */
         React.useEffect(() => {
             if (!value)
                 return;
@@ -5422,11 +5429,11 @@
                 setV(v);
             }
         }, [value]);
-        /** 파생값 */
+        /** RGB/HSL 계산 */
         const rgb = React.useMemo(() => hsvToRgb(h, s, v), [h, s, v]);
         const hex = React.useMemo(() => rgbToHex(rgb.r, rgb.g, rgb.b), [rgb]);
         const hsl = React.useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
-        /** 표시 문자열 */
+        /** 출력값 formatted */
         const formatted = React.useMemo(() => {
             const alpha = a / 100;
             switch (format) {
@@ -5438,24 +5445,24 @@
                 default: return hex;
             }
         }, [format, hex, rgb, hsl, a]);
-        /** 외부 onChange 및 인풋 동기화 */
+        /** ✅ 무한 루프 방지: formatted이 부모 value랑 같으면 onChange 호출하지 않음 */
         React.useEffect(() => {
+            if (value !== undefined && value.toUpperCase() === formatted.toUpperCase())
+                return;
             onChange?.(formatted);
-            setColorInput(formatted.toUpperCase());
-            setAlphaInput(String(a));
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [formatted]);
+        }, [formatted, onChange, value]);
         /** 드롭다운 외부 클릭 닫기 */
         React.useEffect(() => {
             const handler = (e) => {
-                if (pickerRef.current && !pickerRef.current.contains(e.target))
+                if (pickerRef.current && !pickerRef.current.contains(e.target)) {
                     setIsOpen(false);
+                }
             };
             if (isOpen && type === 'dropdown')
                 document.addEventListener('mousedown', handler);
             return () => document.removeEventListener('mousedown', handler);
         }, [isOpen, type]);
-        /** 컬러 필드 핸들링 */
+        /** S/V 영역 업데이트 */
         const updateFromArea = (clientX, clientY) => {
             const el = areaRef.current;
             if (!el)
@@ -5478,27 +5485,24 @@
             return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
         const onAreaTouchEnd = () => { dragging.current = false; };
         /** 슬라이더 */
-        const onHueChange = React.useCallback((e) => {
-            setH(parseInt(e.target.value, 10));
-        }, []);
+        const onHueChange = React.useCallback((e) => setH(parseInt(e.target.value, 10)), []);
         const onAlphaChange = React.useCallback((e) => {
             const newAlpha = parseInt(e.target.value, 10);
             setA(newAlpha);
-            setAlphaInput(String(newAlpha)); // 실시간 동기화
+            setAlphaInput(String(newAlpha));
         }, []);
-        /** 컬러 인풋: 엔터로만 확정 */
-        const tryCommitColorInput = () => {
+        /** 컬러 인풋 (엔터 확정) */
+        const commitColorInput = React.useCallback(() => {
             const str = colorInput.trim();
-            // HEX
             if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
                 const rgb = hexToRgb(str);
                 const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
                 setH(hsv.h);
                 setS(hsv.s);
                 setV(hsv.v);
+                setColorInput(str.toUpperCase());
                 return;
             }
-            // rgb()
             let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
             if (m) {
                 const r = clamp(parseInt(m[1], 10), 0, 255);
@@ -5508,9 +5512,9 @@
                 setH(hsv.h);
                 setS(hsv.s);
                 setV(hsv.v);
+                setColorInput(`rgb(${r}, ${g}, ${b})`.toUpperCase());
                 return;
             }
-            // rgba()
             m = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(str);
             if (m) {
                 const r = clamp(parseInt(m[1], 10), 0, 255);
@@ -5522,37 +5526,32 @@
                 setS(hsv.s);
                 setV(hsv.v);
                 setA(Math.round(alpha * 100));
+                setAlphaInput(String(Math.round(alpha * 100)));
+                setColorInput(`rgba(${r}, ${g}, ${b}, ${alpha})`.toUpperCase());
                 return;
             }
-            // 실패 → 원래 값으로 복구
             setColorInput(formatted.toUpperCase());
-        };
+        }, [colorInput, formatted]);
         const onColorKeyDown = (e) => {
             if (e.key === 'Enter')
-                tryCommitColorInput();
+                commitColorInput();
         };
-        const onColorBlur = () => {
-            // 요구사항: 엔터로만 변경. 블러 시에는 값 복구만.
-            setColorInput(formatted.toUpperCase());
-        };
-        /** 알파 인풋: 엔터로만 확정 (0-100) */
-        const tryCommitAlphaInput = () => {
+        const onColorBlur = () => setColorInput(formatted.toUpperCase());
+        /** 알파 인풋 (엔터 확정) */
+        const commitAlphaInput = React.useCallback(() => {
             const n = Number(alphaInput.trim());
             if (!Number.isNaN(n) && n >= 0 && n <= 100) {
                 setA(Math.round(n));
+                setAlphaInput(String(Math.round(n)));
                 return;
             }
-            // 실패 → 복구
             setAlphaInput(String(a));
-        };
+        }, [alphaInput, a]);
         const onAlphaInputKeyDown = (e) => {
             if (e.key === 'Enter')
-                tryCommitAlphaInput();
-        };
-        const onAlphaInputBlur = () => {
-            // 엔터로만 반영. 블러 시 복원.
-            setAlphaInput(String(a));
+                commitAlphaInput();
         };
+        const onAlphaInputBlur = () => setAlphaInput(String(a));
         /** 복사 */
         const onCopy = React.useCallback(async () => {
             try {
@@ -5576,21 +5575,17 @@
                     setS(hsv.s);
                     setV(hsv.v);
                 }
-                else {
-                    console.log('EyeDropper API is not supported');
-                }
             }
             catch (e) {
                 console.error(e);
             }
         }, []);
-        /** 모달용 핸들러 */
+        /** modal open(중요: formatted deps 제거) */
         const handleModalOpen = React.useCallback(() => {
-            if (type === 'modal') {
-                setTempColor(formatted);
-            }
+            if (type === 'modal')
+                setTempColor(hex);
             setIsOpen(true);
-        }, [type, formatted]);
+        }, [type, hex]);
         const handleModalApply = React.useCallback(() => {
             if (type === 'modal') {
                 onApply?.(formatted);
@@ -5599,55 +5594,57 @@
         }, [type, formatted, onApply]);
         const handleModalCancel = React.useCallback(() => {
             if (type === 'modal') {
-                // 원래 색상으로 복원
                 const rgb = hexToRgb(tempColor);
                 if (rgb) {
-                    const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                    setH(h);
-                    setS(s);
-                    setV(v);
+                    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                    setH(hsv.h);
+                    setS(hsv.s);
+                    setV(hsv.v);
                 }
                 onCancel?.();
                 setIsOpen(false);
             }
         }, [type, tempColor, onCancel]);
-        /** 배경 스타일 */
+        /** 스타일 */
         const hueTrackStyle = React.useMemo(() => ({
             background: `linear-gradient(to right,
-      hsl(0,100%,50%),
-      hsl(60,100%,50%),
-      hsl(120,100%,50%),
-      hsl(180,100%,50%),
-      hsl(240,100%,50%),
-      hsl(300,100%,50%),
-      hsl(360,100%,50%))`,
+            hsl(0,100%,50%),
+            hsl(60,100%,50%),
+            hsl(120,100%,50%),
+            hsl(180,100%,50%),
+            hsl(240,100%,50%),
+            hsl(300,100%,50%),
+            hsl(360,100%,50%))`,
         }), []);
         const areaBackground = React.useMemo(() => ({
             backgroundImage: `
-      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
-      linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
-    `,
+            linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
+        `,
         }), [h]);
-        /** ✔︎ 알파 트랙: 색상 무관, 고정 흑백 그라디언트 */
         const alphaTrackStyle = React.useMemo(() => ({
             backgroundImage: `
-      linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
-      linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1))
-    `,
+            linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
+            linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
+            linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
+            linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))
+        `,
             backgroundSize: '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%',
             backgroundPosition: '0 0,0 4px,4px -4px,-4px 0,0 0',
             backgroundColor: 'var(--db-surface-base)',
-        }), []);
+        }), [rgb]);
         const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, `designbase-color-picker--${position}`, {
             'designbase-color-picker--disabled': disabled,
             'designbase-color-picker--readonly': readonly,
             'designbase-color-picker--open': isOpen,
             'designbase-color-picker--no-input': !showInput,
         }, className);
-        const Trigger = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && handleModalOpen(), children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: { backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex } }) }), showInput && (jsxRuntime.jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) })), jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] }));
+        const Trigger = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: {
+                            backgroundColor: showAlpha
+                                ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})`
+                                : hex
+                        } }) }), showInput && (jsxRuntime.jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) })), jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] }));
         const Selector = (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, {}) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
                                 { label: 'HEX', value: 'hex' },
                                 { label: 'RGB', value: 'rgb' },
@@ -5655,7 +5652,7 @@
                                 { label: 'HSL', value: 'hsl' },
                                 { label: 'HSLA', value: 'hsla' },
                             ], size: "s", position: "top" })), jsxRuntime.jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxRuntime.jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsxRuntime.jsx(Input, { type: "text", inputMode: "numeric", value: alphaInput, onChange: (value) => setAlphaInput(value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, placeholder: "100", size: "s", className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsxRuntime.jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsxRuntime.jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, {}) : jsxRuntime.jsx(icons.CopyIcon, {}) }))] })] }));
-        return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsxRuntime.jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsxRuntime.jsx(ModalBody, { children: Selector }), jsxRuntime.jsx(ModalFooter, { children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
+        return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsxRuntime.jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsxRuntime.jsx(ModalBody, { children: Selector }), jsxRuntime.jsx(ModalFooter, { children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [jsxRuntime.jsx(Button, { variant: "tertiary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
     };
     ColorPicker.displayName = 'ColorPicker';