@designbasekorea/ui 0.2.22 → 0.2.25

package/dist/index.umd.js

@@ -5278,247 +5278,366 @@
     };
     Chip.displayName = 'Chip';
 
-    const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
-        const [selectedColor, setSelectedColor] = React.useState(value || defaultValue);
+    /** 유틸 */
+    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());
+        if (!m)
+            return null;
+        return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+    };
+    const rgbToHex = (r, g, b) => {
+        const toHex = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+    };
+    const rgbToHsv = (r, g, b) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0));
+                    break;
+                case g:
+                    h = ((b - r) / d + 2);
+                    break;
+                case b:
+                    h = ((r - g) / d + 4);
+                    break;
+            }
+            h *= 60;
+        }
+        const s = max === 0 ? 0 : d / max;
+        const v = max;
+        return { h: Math.round(h * 100) / 100, s: Math.round(s * 10000) / 100, v: Math.round(v * 10000) / 100 };
+    };
+    const hsvToRgb = (h, s, v) => {
+        s /= 100;
+        v /= 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let rp = 0, gp = 0, bp = 0;
+        if (h >= 0 && h < 60) {
+            rp = c;
+            gp = x;
+            bp = 0;
+        }
+        else if (h < 120) {
+            rp = x;
+            gp = c;
+            bp = 0;
+        }
+        else if (h < 180) {
+            rp = 0;
+            gp = c;
+            bp = x;
+        }
+        else if (h < 240) {
+            rp = 0;
+            gp = x;
+            bp = c;
+        }
+        else if (h < 300) {
+            rp = x;
+            gp = 0;
+            bp = c;
+        }
+        else {
+            rp = c;
+            gp = 0;
+            bp = x;
+        }
+        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;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0));
+                    break;
+                case g:
+                    h = ((b - r) / d + 2);
+                    break;
+                case b:
+                    h = ((r - g) / d + 4);
+                    break;
+            }
+            h *= 60;
+        }
+        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%) */
+        const [h, setH] = React.useState(211);
+        const [s, setS] = React.useState(100);
+        const [v, setV] = React.useState(50);
+        const [a, setA] = React.useState(100);
         const [isOpen, setIsOpen] = React.useState(false);
-        const [hue, setHue] = React.useState(211);
-        const [saturation, setSaturation] = React.useState(100);
-        const [lightness, setLightness] = React.useState(50);
-        const [alpha, setAlpha] = React.useState(100);
-        const [colorFormat, setColorFormat] = React.useState('hex');
+        const [format, setFormat] = React.useState('hex');
         const [isCopied, setIsCopied] = React.useState(false);
-        const [inputValue, setInputValue] = React.useState(value || defaultValue);
+        // 하단 컬러 인풋(문자열), 알파 인풋(문자열) – 엔터로만 확정
+        const [colorInput, setColorInput] = React.useState('');
+        const [alphaInput, setAlphaInput] = React.useState('100');
+        // 모달용 임시 상태 (적용/취소 버튼용)
+        const [tempColor, setTempColor] = React.useState('');
         const pickerRef = React.useRef(null);
-        // 초기화: defaultValue가 있으면 HSL 값으로 변환
+        const areaRef = React.useRef(null);
+        const dragging = React.useRef(false);
+        /** 초기화 */
         React.useEffect(() => {
-            const initialColor = value || defaultValue;
-            if (initialColor) {
-                updateHSLFromHex(initialColor);
-                setInputValue(initialColor);
+            const initial = (value || defaultValue).toUpperCase();
+            const rgb = hexToRgb(initial);
+            if (rgb) {
+                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                setH(h);
+                setS(s);
+                setV(v);
+                setColorInput(initial);
+                setAlphaInput('100');
             }
-        }, []); // 컴포넌트 마운트 시에만 실행
-        // value prop이 변경되면 업데이트
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        /** 외부 value 변화 */
         React.useEffect(() => {
-            if (value) {
-                setSelectedColor(value);
-                updateHSLFromHex(value);
-            }
-        }, [value]);
-        // HEX를 HSL로 변환
-        const updateHSLFromHex = (hex) => {
-            const rgb = hexToRgb(hex);
+            if (!value)
+                return;
+            const rgb = hexToRgb(value);
             if (rgb) {
-                const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
-                setHue(hsl.h);
-                setSaturation(hsl.s);
-                setLightness(hsl.l);
-            }
-        };
-        // HEX를 RGB로 변환
-        const hexToRgb = (hex) => {
-            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-            return result ? {
-                r: parseInt(result[1], 16),
-                g: parseInt(result[2], 16),
-                b: parseInt(result[3], 16)
-            } : null;
-        };
-        // RGB를 HSL로 변환 (정밀도 개선)
-        const rgbToHsl = (r, g, b) => {
-            r /= 255;
-            g /= 255;
-            b /= 255;
-            const max = Math.max(r, g, b), min = Math.min(r, g, b);
-            let h = 0, s = 0, l = (max + min) / 2;
-            if (max !== min) {
-                const d = max - min;
-                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-                switch (max) {
-                    case r:
-                        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                        break;
-                    case g:
-                        h = ((b - r) / d + 2) / 6;
-                        break;
-                    case b:
-                        h = ((r - g) / d + 4) / 6;
-                        break;
-                }
+                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                setH(h);
+                setS(s);
+                setV(v);
             }
-            // 정밀도 개선: 반올림 대신 더 정확한 계산
-            return {
-                h: Math.round(h * 360 * 100) / 100,
-                s: Math.round(s * 100 * 100) / 100,
-                l: Math.round(l * 100 * 100) / 100
-            };
-        };
-        // HSL을 RGB로 변환 (정밀도 개선)
-        const hslToRgb = (h, s, l) => {
-            l /= 100;
-            const a = s * Math.min(l, 1 - l) / 100;
-            const f = (n) => {
-                const k = (n + h / 30) % 12;
-                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-                return Math.round(255 * color);
-            };
-            return { r: f(0), g: f(8), b: f(4) };
-        };
-        // HSL을 HEX로 변환 (정밀도 개선)
-        const hslToHex = (h, s, l) => {
-            const rgb = hslToRgb(h, s, l);
-            const toHex = (n) => {
-                // RGB 값을 0-255 범위로 제한하고 HEX로 변환
-                const clamped = Math.max(0, Math.min(255, Math.round(n)));
-                return clamped.toString(16).padStart(2, '0');
+        }, [value]);
+        /** 파생값 */
+        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]);
+        /** 표시 문자열 */
+        const formatted = React.useMemo(() => {
+            const alpha = a / 100;
+            switch (format) {
+                case 'hex': return hex;
+                case 'rgb': return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+                case 'rgba': return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+                case 'hsl': return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+                case 'hsla': return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+                default: return hex;
+            }
+        }, [format, hex, rgb, hsl, a]);
+        /** 외부 onChange 및 인풋 동기화 */
+        React.useEffect(() => {
+            onChange?.(formatted);
+            setColorInput(formatted.toUpperCase());
+            setAlphaInput(String(a));
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [formatted]);
+        /** 드롭다운 외부 클릭 닫기 */
+        React.useEffect(() => {
+            const handler = (e) => {
+                if (pickerRef.current && !pickerRef.current.contains(e.target))
+                    setIsOpen(false);
             };
-            return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
-        };
-        // 현재 포맷에 따른 색상 문자열 반환
-        const getFormattedColor = () => {
-            const rgb = hslToRgb(hue, saturation, lightness);
-            const alphaValue = alpha / 100;
-            switch (colorFormat) {
-                case 'hex':
-                    return hslToHex(hue, saturation, lightness);
-                case 'rgb':
-                    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-                case 'rgba':
-                    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
-                case 'hsl':
-                    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-                case 'hsla':
-                    return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
-                default:
-                    return hslToHex(hue, saturation, lightness);
-            }
-        };
-        // 색상 변경 핸들러
-        const handleColorChange = (newColor) => {
-            setSelectedColor(newColor);
-            onChange?.(newColor);
-        };
-        // Hue 슬라이더 변경
-        const handleHueChange = (e) => {
-            const newHue = parseInt(e.target.value);
-            setHue(newHue);
-            const newColor = hslToHex(newHue, saturation, lightness);
-            handleColorChange(newColor);
-        };
-        // Alpha 슬라이더 변경
-        const handleAlphaChange = (e) => {
-            const newAlpha = parseInt(e.target.value);
-            setAlpha(newAlpha);
-            const newColor = getFormattedColorWithAlpha(newAlpha);
-            handleColorChange(newColor);
-        };
-        // Alpha 값을 포함한 색상 문자열 반환
-        const getFormattedColorWithAlpha = (alphaVal) => {
-            const rgb = hslToRgb(hue, saturation, lightness);
-            const alphaValue = alphaVal / 100;
-            if (colorFormat === 'rgba') {
-                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
-            }
-            else if (colorFormat === 'hsla') {
-                return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
+            if (isOpen && type === 'dropdown')
+                document.addEventListener('mousedown', handler);
+            return () => document.removeEventListener('mousedown', handler);
+        }, [isOpen, type]);
+        /** 컬러 필드 핸들링 */
+        const updateFromArea = (clientX, clientY) => {
+            const el = areaRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const x = clamp(clientX - rect.left, 0, rect.width);
+            const y = clamp(clientY - rect.top, 0, rect.height);
+            const newS = Math.round((x / rect.width) * 100);
+            const newV = Math.round(100 - (y / rect.height) * 100);
+            setS(newS);
+            setV(newV);
+        };
+        const onAreaMouseDown = (e) => { dragging.current = true; updateFromArea(e.clientX, e.clientY); };
+        const onAreaMouseMove = (e) => { if (dragging.current)
+            updateFromArea(e.clientX, e.clientY); };
+        const onAreaMouseUp = () => { dragging.current = false; };
+        const onAreaLeave = () => { dragging.current = false; };
+        const onAreaTouchStart = (e) => { dragging.current = true; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
+        const onAreaTouchMove = (e) => { if (!dragging.current)
+            return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
+        const onAreaTouchEnd = () => { dragging.current = false; };
+        /** 슬라이더 */
+        const onHueChange = (e) => setH(parseInt(e.target.value, 10));
+        const onAlphaChange = (e) => {
+            const newAlpha = parseInt(e.target.value, 10);
+            setA(newAlpha);
+            setAlphaInput(String(newAlpha)); // 실시간 동기화
+        };
+        /** 컬러 인풋: 엔터로만 확정 */
+        const tryCommitColorInput = () => {
+            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);
+                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);
+                const g = clamp(parseInt(m[2], 10), 0, 255);
+                const b = clamp(parseInt(m[3], 10), 0, 255);
+                const hsv = rgbToHsv(r, g, b);
+                setH(hsv.h);
+                setS(hsv.s);
+                setV(hsv.v);
+                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);
+                const g = clamp(parseInt(m[2], 10), 0, 255);
+                const b = clamp(parseInt(m[3], 10), 0, 255);
+                const alpha = parseFloat(m[4]);
+                const hsv = rgbToHsv(r, g, b);
+                setH(hsv.h);
+                setS(hsv.s);
+                setV(hsv.v);
+                setA(Math.round(alpha * 100));
+                return;
+            }
+            // 실패 → 원래 값으로 복구
+            setColorInput(formatted.toUpperCase());
+        };
+        const onColorKeyDown = (e) => {
+            if (e.key === 'Enter')
+                tryCommitColorInput();
+        };
+        const onColorBlur = () => {
+            // 요구사항: 엔터로만 변경. 블러 시에는 값 복구만.
+            setColorInput(formatted.toUpperCase());
+        };
+        /** 알파 인풋: 엔터로만 확정 (0-100) */
+        const tryCommitAlphaInput = () => {
+            const n = Number(alphaInput.trim());
+            if (!Number.isNaN(n) && n >= 0 && n <= 100) {
+                setA(Math.round(n));
+                return;
+            }
+            // 실패 → 복구
+            setAlphaInput(String(a));
+        };
+        const onAlphaInputKeyDown = (e) => {
+            if (e.key === 'Enter')
+                tryCommitAlphaInput();
+        };
+        const onAlphaInputBlur = () => {
+            // 엔터로만 반영. 블러 시 복원.
+            setAlphaInput(String(a));
+        };
+        /** 복사 */
+        const onCopy = async () => {
+            try {
+                await navigator.clipboard.writeText(formatted);
+                setIsCopied(true);
+                setTimeout(() => setIsCopied(false), 1600);
             }
-            return hslToHex(hue, saturation, lightness);
-        };
-        // 입력 필드 변경
-        const handleInputChange = (e) => {
-            const newValue = e.target.value.trim();
-            setInputValue(newValue);
-            // HEX 값이 유효하면 실시간으로 색상 업데이트
-            if (/^#[0-9A-F]{6}$/i.test(newValue)) {
-                const normalizedHex = newValue.toUpperCase();
-                handleColorChange(normalizedHex);
-                updateHSLFromHex(normalizedHex);
+            catch (e) {
+                console.error(e);
             }
         };
-        // 입력 필드에서 포커스 아웃 시 검증 및 적용
-        const handleInputBlur = () => {
-            let isValid = false;
-            // HEX 검증
-            if (/^#[0-9A-F]{6}$/i.test(inputValue)) {
-                handleColorChange(inputValue.toUpperCase());
-                updateHSLFromHex(inputValue);
-                isValid = true;
-            }
-            // RGB 검증
-            else if (/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.test(inputValue)) {
-                const match = inputValue.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-                if (match) {
-                    const r = parseInt(match[1]);
-                    const g = parseInt(match[2]);
-                    const b = parseInt(match[3]);
-                    if (r <= 255 && g <= 255 && b <= 255) {
-                        const hsl = rgbToHsl(r, g, b);
-                        setHue(hsl.h);
-                        setSaturation(hsl.s);
-                        setLightness(hsl.l);
-                        const hex = hslToHex(hsl.h, hsl.s, hsl.l);
-                        handleColorChange(hex);
-                        isValid = true;
-                    }
+        /** EyeDropper */
+        const onEyedrop = async () => {
+            try {
+                if ('EyeDropper' in window) {
+                    const eye = new window.EyeDropper();
+                    const { sRGBHex } = await eye.open();
+                    const rgb = hexToRgb(sRGBHex);
+                    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                    setH(hsv.h);
+                    setS(hsv.s);
+                    setV(hsv.v);
                 }
-            }
-            // RGBA 검증
-            else if (/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i.test(inputValue)) {
-                const match = inputValue.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i);
-                if (match) {
-                    const r = parseInt(match[1]);
-                    const g = parseInt(match[2]);
-                    const b = parseInt(match[3]);
-                    const a = parseFloat(match[4]);
-                    if (r <= 255 && g <= 255 && b <= 255 && a >= 0 && a <= 1) {
-                        const hsl = rgbToHsl(r, g, b);
-                        setHue(hsl.h);
-                        setSaturation(hsl.s);
-                        setLightness(hsl.l);
-                        setAlpha(Math.round(a * 100));
-                        const hex = hslToHex(hsl.h, hsl.s, hsl.l);
-                        handleColorChange(hex);
-                        isValid = true;
-                    }
+                else {
+                    console.log('EyeDropper API is not supported');
                 }
             }
-            // 유효하지 않으면 이전 값으로 복원
-            if (!isValid) {
-                setInputValue(getFormattedColor());
+            catch (e) {
+                console.error(e);
             }
         };
-        // 복사 기능
-        const handleCopy = async () => {
-            try {
-                await navigator.clipboard.writeText(getFormattedColor());
-                setIsCopied(true);
-                setTimeout(() => setIsCopied(false), 2000);
+        /** 모달용 핸들러 */
+        const handleModalOpen = () => {
+            if (type === 'modal') {
+                setTempColor(formatted);
             }
-            catch (err) {
-                console.error('Failed to copy:', err);
+            setIsOpen(true);
+        };
+        const handleModalApply = () => {
+            if (type === 'modal') {
+                onApply?.(formatted);
+                setIsOpen(false);
             }
         };
-        // 포맷 변경 시 inputValue 업데이트
-        React.useEffect(() => {
-            setInputValue(getFormattedColor());
-        }, [colorFormat, hue, saturation, lightness, alpha]);
-        // 외부 클릭 감지
-        React.useEffect(() => {
-            const handleClickOutside = (event) => {
-                if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-                    setIsOpen(false);
-                }
-            };
-            if (isOpen && type === 'dropdown') {
-                document.addEventListener('mousedown', handleClickOutside);
+        const handleModalCancel = () => {
+            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);
+                }
+                onCancel?.();
+                setIsOpen(false);
             }
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [isOpen, type]);
-        const togglePicker = () => {
-            if (disabled || readonly)
-                return;
-            setIsOpen(!isOpen);
+        };
+        /** 배경 스타일 */
+        const hueTrackStyle = {
+            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%))`,
+        };
+        const areaBackground = {
+            backgroundImage: `
+      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
+      linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
+    `,
+        };
+        /** ✔︎ 알파 트랙: 색상 무관, 고정 흑백 그라디언트 */
+        const alphaTrackStyle = {
+            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))
+    `,
+            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)',
         };
         const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, `designbase-color-picker--${position}`, {
             'designbase-color-picker--disabled': disabled,
@@ -5526,62 +5645,15 @@
             'designbase-color-picker--open': isOpen,
             'designbase-color-picker--no-input': !showInput,
         }, className);
-        // 메인 컬러 선택 영역 클릭 핸들러
-        const handleColorAreaClick = (e) => {
-            const rect = e.currentTarget.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            // 좌측은 채도 낮고, 우측은 채도 최대치
-            const saturation = Math.round((x / rect.width) * 100);
-            // 위로는 밝기 최대, 아래로는 밝기 어둡게
-            const lightness = Math.round(100 - (y / rect.height) * 100);
-            setSaturation(Math.max(0, Math.min(100, saturation)));
-            setLightness(Math.max(0, Math.min(100, lightness)));
-            const newColor = hslToHex(hue, saturation, lightness);
-            handleColorChange(newColor);
-        };
-        // 스포이드 기능 (색상 추출)
-        const handleEyedropperClick = async () => {
-            try {
-                // EyeDropper API 지원 확인
-                if ('EyeDropper' in window) {
-                    const eyeDropper = new window.EyeDropper();
-                    const result = await eyeDropper.open();
-                    const hexColor = result.sRGBHex;
-                    handleColorChange(hexColor);
-                    updateHSLFromHex(hexColor);
-                }
-                else {
-                    // EyeDropper API가 지원되지 않는 경우 대체 기능
-                    console.log('EyeDropper API is not supported in this browser');
-                    // 여기에 대체 기능을 구현할 수 있습니다
-                }
-            }
-            catch (err) {
-                console.error('EyeDropper failed:', err);
-            }
-        };
-        // 컬러 선택 UI
-        const renderColorSelector = () => (jsxRuntime.jsxs("div", { className: "designbase-color-picker__selector", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-area", children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-field", style: {
-                            background: `linear-gradient(to right, 
-                            hsl(${hue}, 0%, 50%), 
-                            hsl(${hue}, 100%, 50%)),
-                            linear-gradient(to bottom, 
-                            hsl(${hue}, 100%, 100%), 
-                            hsl(${hue}, 100%, 0%))`
-                        }, onClick: handleColorAreaClick, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-pointer", style: {
-                                left: `${saturation}%`,
-                                top: `${100 - lightness}%`,
-                                backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
-                            } }) }) }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__controls", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: handleEyedropperClick, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.PaletteIcon, { size: 16 }) }), jsxRuntime.jsx("div", { className: "designbase-color-picker__hue-slider", children: jsxRuntime.jsx("input", { type: "range", min: "0", max: "360", value: hue, onChange: handleHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue" }) }), showAlpha && (jsxRuntime.jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsxRuntime.jsx("input", { type: "range", min: "0", max: "100", value: alpha, onChange: handleAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha" }) }))] }), jsxRuntime.jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxRuntime.jsxs("select", { className: "designbase-color-picker__format-select", value: colorFormat, onChange: (e) => setColorFormat(e.target.value), children: [jsxRuntime.jsx("option", { value: "hex", children: "HEX" }), jsxRuntime.jsx("option", { value: "rgb", children: "RGB" }), jsxRuntime.jsx("option", { value: "rgba", children: "RGBA" }), jsxRuntime.jsx("option", { value: "hsl", children: "HSL" }), jsxRuntime.jsx("option", { value: "hsla", children: "HSLA" })] })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxRuntime.jsxs("span", { className: "designbase-color-picker__alpha-percent", children: [alpha, "%"] })), showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) }))] })] }));
-        return (jsxRuntime.jsxs("div", { ref: pickerRef, className: classes, children: [jsxRuntime.jsxs("div", { className: "designbase-color-picker__trigger", children: [jsxRuntime.jsx("div", { className: "designbase-color-picker__color-display", onClick: togglePicker, children: jsxRuntime.jsx("div", { className: "designbase-color-picker__color-box", style: {
-                                    backgroundColor: showAlpha
-                                        ? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
-                                        : `hsl(${hue}, ${saturation}%, ${lightness}%)`
-                                } }) }), showInput && (jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, 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();
-                                handleCopy();
-                            }, 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", onClick: togglePicker, disabled: disabled, "aria-label": "Toggle color picker", children: jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsxRuntime.jsx("div", { className: "designbase-color-picker__dropdown", children: renderColorSelector() })), type === 'modal' && (jsxRuntime.jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: renderColorSelector() }))] }));
+        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 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", { type: "button", className: "designbase-color-picker__eyedropper", onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsxRuntime.jsx(icons.EyedropperIcon, { size: 16 }) }), 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' },
+                                { label: 'RGBA', value: 'rgba' },
+                                { label: 'HSL', value: 'hsl' },
+                                { label: 'HSLA', value: 'hsla' },
+                            ], size: "s" })), jsxRuntime.jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxRuntime.jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: alphaInput, onChange: (e) => setAlphaInput(e.target.value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsxRuntime.jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsxRuntime.jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsxRuntime.jsx(icons.DoneIcon, { size: 14 }) : jsxRuntime.jsx(icons.CopyIcon, { size: 14 }) }))] })] }));
+        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: [Selector, jsxRuntime.jsx(ModalFooter, { children: jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [jsxRuntime.jsx(Button, { variant: "secondary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsxRuntime.jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
     };
     ColorPicker.displayName = 'ColorPicker';