@designbasekorea/ui 0.2.29 → 0.2.31

package/dist/index.esm.js

@@ -5352,7 +5352,11 @@ const hsvToRgb = (h, s, v) => {
         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,11 +5381,15 @@ const rgbToHsl = (r, g, b) => {
         }
         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] = useState(211);
     const [s, setS] = useState(100);
     const [v, setV] = useState(50);
@@ -5389,15 +5397,13 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
     const [isOpen, setIsOpen] = useState(false);
     const [format, setFormat] = useState('hex');
     const [isCopied, setIsCopied] = useState(false);
-    // 하단 인풋(문자열) — 엔터로만 확정
     const [colorInput, setColorInput] = useState('');
     const [alphaInput, setAlphaInput] = useState('100');
-    // 모달용 임시 상태 (취소 시 되돌리기)
     const [tempColor, setTempColor] = useState('');
     const pickerRef = useRef(null);
     const areaRef = useRef(null);
     const dragging = useRef(false);
-    /** 초기화 */
+    /** 초기값 세팅 */
     useEffect(() => {
         const initial = (value || defaultValue).toUpperCase();
         const rgb = hexToRgb(initial);
@@ -5407,12 +5413,10 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setS(s);
             setV(v);
         }
-        // 인풋 초기 표현
         setColorInput(initial);
         setAlphaInput('100');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    /** 외부 value 변화 시(제어형)만 HSV 반영 */
+    /** 제어형(value) → HSV */
     useEffect(() => {
         if (!value)
             return;
@@ -5424,11 +5428,11 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setV(v);
         }
     }, [value]);
-    /** 파생값 */
+    /** RGB/HSL 계산 */
     const rgb = useMemo(() => hsvToRgb(h, s, v), [h, s, v]);
     const hex = useMemo(() => rgbToHex(rgb.r, rgb.g, rgb.b), [rgb]);
     const hsl = useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
-    /** 포맷 출력 문자열 */
+    /** 출력값 formatted */
     const formatted = useMemo(() => {
         const alpha = a / 100;
         switch (format) {
@@ -5440,22 +5444,25 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             default: return hex;
         }
     }, [format, hex, rgb, hsl, a]);
-    /** 외부 onChange 알림만 (입력창 동기화는 여기서 하지 않음!) */
+    /** ✅ 무한 루프 방지: formatted이 부모 value랑 같으면 onChange 호출하지 않음 */
     useEffect(() => {
+        if (value !== undefined && value.toUpperCase() === formatted.toUpperCase())
+            return;
         onChange?.(formatted);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formatted]);
+    }, [formatted]); // onChange와 value를 의존성에서 제거
     /** 드롭다운 외부 클릭 닫기 */
     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 x V) 마우스/터치 */
+    /** S/V 영역 업데이트 */
     const updateFromArea = (clientX, clientY) => {
         const el = areaRef.current;
         if (!el)
@@ -5482,12 +5489,11 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
     const onAlphaChange = useCallback((e) => {
         const newAlpha = parseInt(e.target.value, 10);
         setA(newAlpha);
-        setAlphaInput(String(newAlpha)); // 슬라이더 ↔ 인풋 동기화(표시만)
+        setAlphaInput(String(newAlpha));
     }, []);
-    /** 컬러 텍스트 인풋: 엔터로만 확정 */
+    /** 컬러 인풋 (엔터 확정) */
     const commitColorInput = useCallback(() => {
         const str = colorInput.trim();
-        // HEX (#RRGGBB)
         if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
             const rgb = hexToRgb(str);
             const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -5497,7 +5503,6 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setColorInput(str.toUpperCase());
             return;
         }
-        // rgb(r,g,b)
         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);
@@ -5510,7 +5515,6 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setColorInput(`rgb(${r}, ${g}, ${b})`.toUpperCase());
             return;
         }
-        // rgba(r,g,b,a)
         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);
@@ -5526,18 +5530,14 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setColorInput(`rgba(${r}, ${g}, ${b}, ${alpha})`.toUpperCase());
             return;
         }
-        // 잘못된 값 → 원복
         setColorInput(formatted.toUpperCase());
     }, [colorInput, formatted]);
     const onColorKeyDown = (e) => {
         if (e.key === 'Enter')
             commitColorInput();
     };
-    const onColorBlur = () => {
-        // 요구사항: 엔터로만 반영, 블러 시엔 원복
-        setColorInput(formatted.toUpperCase());
-    };
-    /** 알파 인풋: 엔터로만 확정 (0~100) */
+    const onColorBlur = () => setColorInput(formatted.toUpperCase());
+    /** 알파 인풋 (엔터 확정) */
     const commitAlphaInput = useCallback(() => {
         const n = Number(alphaInput.trim());
         if (!Number.isNaN(n) && n >= 0 && n <= 100) {
@@ -5545,17 +5545,13 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setAlphaInput(String(Math.round(n)));
             return;
         }
-        // 잘못된 값 → 원복
         setAlphaInput(String(a));
     }, [alphaInput, a]);
     const onAlphaInputKeyDown = (e) => {
         if (e.key === 'Enter')
             commitAlphaInput();
     };
-    const onAlphaInputBlur = () => {
-        // 엔터로만 반영, 블러 시 원복
-        setAlphaInput(String(a));
-    };
+    const onAlphaInputBlur = () => setAlphaInput(String(a));
     /** 복사 */
     const onCopy = useCallback(async () => {
         try {
@@ -5579,18 +5575,15 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
                 setS(hsv.s);
                 setV(hsv.v);
             }
-            else {
-                console.log('EyeDropper API is not supported');
-            }
         }
         catch (e) {
             console.error(e);
         }
     }, []);
-    /** 모달 열기/적용/취소 (deps에서 formatted 제거 → 재생성 방지) */
+    /** modal open(중요: formatted deps 제거) */
     const handleModalOpen = useCallback(() => {
         if (type === 'modal')
-            setTempColor(hex); // 현재 HEX 저장
+            setTempColor(hex);
         setIsOpen(true);
     }, [type, hex]);
     const handleModalApply = useCallback(() => {
@@ -5603,53 +5596,55 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         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 = 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 = 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 = 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 = (jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsx("div", { className: "designbase-color-picker__color-display", children: jsx("div", { className: "designbase-color-picker__color-box", style: { backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex } }) }), showInput && (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 && (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 ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) })), jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsx(ChevronDownIcon, { size: 16 }) })] }));
+    const Trigger = (jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsx("div", { className: "designbase-color-picker__color-display", children: jsx("div", { className: "designbase-color-picker__color-box", style: {
+                        backgroundColor: showAlpha
+                            ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})`
+                            : hex
+                    } }) }), showInput && (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 && (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 ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) })), jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsx(ChevronDownIcon, { size: 16 }) })] }));
     const Selector = (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: 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: jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsx(EyedropperIcon, {}) }), jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsx("div", { className: "designbase-color-picker__hue-slider", children: 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 && (jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
                             { label: 'HEX', value: 'hex' },
                             { label: 'RGB', value: 'rgb' },
@@ -5657,7 +5652,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
                             { label: 'HSL', value: 'hsl' },
                             { label: 'HSLA', value: 'hsla' },
                         ], size: "s", position: "top" })), jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [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" }), jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsx(Button, { variant: "tertiary", size: "m", iconOnly: true, onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, {}) : jsx(CopyIcon, {}) }))] })] }));
-    return (jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsx(ModalBody, { children: Selector }), jsx(ModalFooter, { children: jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [jsx(Button, { variant: "tertiary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
+    return (jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsx(ModalBody, { children: Selector }), jsx(ModalFooter, { children: jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [jsx(Button, { variant: "tertiary", size: "m", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "m", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
 };
 ColorPicker.displayName = 'ColorPicker';