@designbasekorea/ui 0.2.35 → 0.2.37

package/dist/index.esm.js

@@ -5321,17 +5321,18 @@ Chip.displayName = 'Chip';
 
 /* ----------------------- 유틸 ----------------------- */
 const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const normalizeHex = (s) => (s || '').trim().toUpperCase();
+const isHex = (s) => /^#?[0-9A-Fa-f]{6}$/.test(s || '');
 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 toHex = (r, g, b) => {
+    const h = (x) => clamp(Math.round(x), 0, 255).toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`.toUpperCase();
 };
-/** RGB ↔ HSV (HSV: h[0-360], s[0-100], v[0-100]) */
 const rgbToHsv = (r, g, b) => {
     r /= 255;
     g /= 255;
@@ -5355,7 +5356,7 @@ const rgbToHsv = (r, g, b) => {
     }
     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 };
+    return { h, s: s * 100, v: v * 100 };
 };
 const hsvToRgb = (h, s, v) => {
     s /= 100;
@@ -5423,92 +5424,151 @@ 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, s: s * 100, l: l * 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] = useState(211);
-    const [s, setS] = useState(100);
-    const [v, setV] = useState(50);
+const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, showEyedropper = true, disabled = false, readonly = false, onChangeFormat = 'hex', fireOnInit = false, changeDebounceMs = 0, emitDuringDrag = true, onChange, onApply, onCancel, className, }) => {
+    /** 초기 HSV — StrictMode에서도 안전하도록 lazy init */
+    const initialHex = (isHex(value) ? normalizeHex(value) : normalizeHex(defaultValue)) || '#006FFF';
+    const initialRgb = hexToRgb(initialHex) || { r: 0, g: 111, b: 255 };
+    const initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);
+    const [h, setH] = useState(() => initialHsv.h);
+    const [s, setS] = useState(() => initialHsv.s);
+    const [v, setV] = useState(() => initialHsv.v);
     const [a, setA] = useState(100);
     const [isOpen, setIsOpen] = useState(false);
     const [format, setFormat] = useState('hex');
     const [isCopied, setIsCopied] = useState(false);
-    const [colorInput, setColorInput] = useState('');
+    const [colorInput, setColorInput] = useState(() => initialHex);
     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);
-        if (rgb) {
-            const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
-            setH(h);
-            setS(s);
-            setV(v);
-        }
-        setColorInput(initial);
-        setAlphaInput('100');
-    }, []);
-    /** 제어형(value) → HSV */
+    const didMountRef = useRef(false);
+    const lastEmittedHexRef = useRef(initialHex);
+    const suppressNextValueSyncRef = useRef(false);
+    const emitErrorCountRef = useRef(0);
+    const emitBlockedUntilRef = useRef(0);
+    const debounceTimerRef = useRef(null);
+    /** 외부 value 변화 → 내부 HSV 반영(자기 발사 직후는 무시 가능) */
     useEffect(() => {
-        if (!value)
+        if (value == null)
+            return;
+        const norm = normalizeHex(value);
+        if (!isHex(norm))
+            return;
+        // 자기 자신이 방금 보낸 값이면 동기화 스킵(미세 진동 방지)
+        if (suppressNextValueSyncRef.current && norm === lastEmittedHexRef.current) {
+            suppressNextValueSyncRef.current = false;
             return;
-        const rgb = hexToRgb(value);
-        if (rgb) {
-            const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
-            setH(h);
-            setS(s);
-            setV(v);
         }
+        const rgb = hexToRgb(norm);
+        if (!rgb)
+            return;
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        setH(hsv.h);
+        setS(hsv.s);
+        setV(hsv.v);
+        setColorInput(norm);
     }, [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 hex = useMemo(() => toHex(rgb.r, rgb.g, rgb.b), [rgb]);
     const hsl = useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
-    /** 출력값 formatted */
-    const formatted = useMemo(() => {
+    /** 표시 문자열(UI 포맷) */
+    const uiFormatted = 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)})`;
+            case 'hsl': return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
+            case 'hsla': return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${alpha.toFixed(2)})`;
             default: return hex;
         }
     }, [format, hex, rgb, hsl, a]);
-    /** ✅ 무한 루프 방지: formatted이 부모 value랑 같으면 onChange 호출하지 않음 */
+    /** 바깥으로 내보낼 문자열 */
+    const outward = useMemo(() => (onChangeFormat === 'hex' ? hex : uiFormatted), [hex, uiFormatted, onChangeFormat]);
+    /** colorInput(표시 전용) 동기화 — 순수 표시만, 포커스 중이면 건드리지 않는 게 안전하지만 간단히 비교 후 반영 */
     useEffect(() => {
-        if (value !== undefined && value.toUpperCase() === formatted.toUpperCase())
-            return;
-        onChange?.(formatted);
+        const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+        if (colorInput !== next)
+            setColorInput(next);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formatted]); // onChange와 value를 의존성에서 제거
-    /** formatted 변경시 colorInput 동기화 */
-    useEffect(() => {
-        setColorInput(formatted.toUpperCase());
-    }, [formatted]);
+    }, [uiFormatted, format]);
     /** 드롭다운 외부 클릭 닫기 */
     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 영역 업데이트 */
+    /** ===== onChange 발사 컨트롤러 ===== */
+    const actuallyEmit = useCallback(() => {
+        if (!onChange)
+            return;
+        const now = Date.now();
+        if (emitBlockedUntilRef.current > now)
+            return;
+        const currentHex = normalizeHex(hex);
+        const parentHex = isHex(value) ? normalizeHex(value) : null;
+        // 부모값과 동치면 발사 금지
+        if (parentHex && parentHex === currentHex)
+            return;
+        // 직전 발사와 동일하면 발사 금지
+        if (lastEmittedHexRef.current === currentHex)
+            return;
+        try {
+            lastEmittedHexRef.current = currentHex;
+            suppressNextValueSyncRef.current = true; // 다음 value 동기화 스킵(왕복 진동 방지)
+            onChange(onChangeFormat === 'hex' ? currentHex : outward);
+            emitErrorCountRef.current = 0;
+        }
+        catch {
+            emitErrorCountRef.current += 1;
+            if (emitErrorCountRef.current >= 20) {
+                emitBlockedUntilRef.current = Date.now() + 3000;
+                console.warn('[ColorPicker] onChange errors too frequent; temporarily muted.');
+            }
+        }
+    }, [hex, outward, onChange, onChangeFormat, value]);
+    /** 변경 감지 → 발사(드래그 중 정책 + 디바운스 반영) */
+    useEffect(() => {
+        // 첫 렌더
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            if (!fireOnInit)
+                return;
+        }
+        // 드래그 중이면 정책 적용
+        if (dragging.current && !emitDuringDrag) {
+            // 드래그 끝에서 발사하므로 지금은 무시
+            return;
+        }
+        if (!onChange)
+            return;
+        if (changeDebounceMs > 0) {
+            if (debounceTimerRef.current)
+                window.clearTimeout(debounceTimerRef.current);
+            debounceTimerRef.current = window.setTimeout(() => {
+                actuallyEmit();
+            }, changeDebounceMs);
+            return () => {
+                if (debounceTimerRef.current)
+                    window.clearTimeout(debounceTimerRef.current);
+            };
+        }
+        else {
+            actuallyEmit();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hex, a, format]); // h/s/v → hex로 수렴됨. a/format도 외부로 나갈 수 있으니 포함.
+    /** ===== SV 영역 ===== */
     const updateFromArea = (clientX, clientY) => {
         const el = areaRef.current;
         if (!el)
@@ -5516,28 +5576,71 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         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);
+        const newS = (x / rect.width) * 100;
+        const newV = 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 onAreaMouseDown = (e) => {
+        if (disabled || readonly)
+            return;
+        dragging.current = true;
+        updateFromArea(e.clientX, e.clientY);
+    };
+    const onAreaMouseMove = (e) => {
+        if (!dragging.current || disabled || readonly)
+            return;
+        updateFromArea(e.clientX, e.clientY);
+    };
+    const finishDrag = () => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        // 드래그 종료 시 한 번만 발사
+        if (!emitDuringDrag) {
+            if (changeDebounceMs > 0) {
+                if (debounceTimerRef.current)
+                    window.clearTimeout(debounceTimerRef.current);
+                debounceTimerRef.current = window.setTimeout(() => {
+                    actuallyEmit();
+                }, changeDebounceMs);
+            }
+            else {
+                actuallyEmit();
+            }
+        }
+    };
+    const onAreaMouseUp = finishDrag;
+    const onAreaLeave = finishDrag;
+    const onAreaTouchStart = (e) => {
+        if (disabled || readonly)
+            return;
+        dragging.current = true;
+        const t = e.touches[0];
+        updateFromArea(t.clientX, t.clientY);
+    };
+    const onAreaTouchMove = (e) => {
+        if (!dragging.current || disabled || readonly)
+            return;
+        const t = e.touches[0];
+        updateFromArea(t.clientX, t.clientY);
+    };
+    const onAreaTouchEnd = finishDrag;
     /** 슬라이더 */
-    const onHueChange = useCallback((e) => setH(parseInt(e.target.value, 10)), []);
+    const onHueChange = useCallback((e) => {
+        if (disabled || readonly)
+            return;
+        setH(parseFloat(e.target.value));
+    }, [disabled, readonly]);
     const onAlphaChange = useCallback((e) => {
+        if (disabled || readonly)
+            return;
         const newAlpha = parseInt(e.target.value, 10);
         setA(newAlpha);
         setAlphaInput(String(newAlpha));
-    }, []);
-    /** 컬러 인풋 (엔터 확정) */
+    }, [disabled, readonly]);
+    /** 입력 확정 */
     const commitColorInput = useCallback(() => {
         const str = colorInput.trim();
         if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
@@ -5546,7 +5649,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setH(hsv.h);
             setS(hsv.s);
             setV(hsv.v);
-            setColorInput(str.toUpperCase());
+            setColorInput(normalizeHex(str));
             return;
         }
         let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
@@ -5558,7 +5661,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             setH(hsv.h);
             setS(hsv.s);
             setV(hsv.v);
-            setColorInput(`rgb(${r}, ${g}, ${b})`.toUpperCase());
+            setColorInput(`rgb(${r}, ${g}, ${b})`);
             return;
         }
         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);
@@ -5573,42 +5676,49 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             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')
-            commitColorInput();
-    };
-    const onColorBlur = () => setColorInput(formatted.toUpperCase());
-    /** 알파 인풋 (엔터 확정) */
+            setColorInput(`rgba(${r}, ${g}, ${b}, ${alpha})`);
+            return;
+        }
+        // 인식 실패 → 표시값으로 원복
+        const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+        if (colorInput !== next)
+            setColorInput(next);
+    }, [colorInput, uiFormatted, format]);
+    const onColorKeyDown = (e) => { if (e.key === 'Enter')
+        commitColorInput(); };
+    const onColorBlur = () => {
+        const next = format === 'hex' ? normalizeHex(uiFormatted) : uiFormatted;
+        if (colorInput !== next)
+            setColorInput(next);
+    };
+    /** 알파 입력 확정 */
     const commitAlphaInput = useCallback(() => {
         const n = Number(alphaInput.trim());
         if (!Number.isNaN(n) && n >= 0 && n <= 100) {
-            setA(Math.round(n));
-            setAlphaInput(String(Math.round(n)));
+            const rounded = Math.round(n);
+            if (a !== rounded)
+                setA(rounded);
+            if (alphaInput !== String(rounded))
+                setAlphaInput(String(rounded));
             return;
         }
         setAlphaInput(String(a));
     }, [alphaInput, a]);
-    const onAlphaInputKeyDown = (e) => {
-        if (e.key === 'Enter')
-            commitAlphaInput();
-    };
-    const onAlphaInputBlur = () => setAlphaInput(String(a));
+    const onAlphaInputKeyDown = (e) => { if (e.key === 'Enter')
+        commitAlphaInput(); };
+    const onAlphaInputBlur = () => { if (alphaInput !== String(a))
+        setAlphaInput(String(a)); };
     /** 복사 */
     const onCopy = useCallback(async () => {
         try {
-            await navigator.clipboard.writeText(formatted);
+            await navigator.clipboard.writeText(uiFormatted);
             setIsCopied(true);
             setTimeout(() => setIsCopied(false), 1600);
         }
         catch (e) {
             console.error(e);
         }
-    }, [formatted]);
+    }, [uiFormatted]);
     /** EyeDropper */
     const onEyedrop = useCallback(async () => {
         try {
@@ -5626,7 +5736,8 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             console.error(e);
         }
     }, []);
-    /** modal open(중요: formatted deps 제거) */
+    const isEyedropperAvailable = typeof window !== 'undefined' && 'EyeDropper' in window;
+    /** 모달 */
     const handleModalOpen = useCallback(() => {
         if (type === 'modal')
             setTempColor(hex);
@@ -5634,10 +5745,11 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
     }, [type, hex]);
     const handleModalApply = useCallback(() => {
         if (type === 'modal') {
-            onApply?.(formatted);
+            const out = onChangeFormat === 'hex' ? hex : uiFormatted;
+            onApply?.(out);
             setIsOpen(false);
         }
-    }, [type, formatted, onApply]);
+    }, [type, hex, uiFormatted, onApply, onChangeFormat]);
     const handleModalCancel = useCallback(() => {
         if (type === 'modal') {
             const rgb = hexToRgb(tempColor);
@@ -5654,28 +5766,28 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
     /** 스타일 */
     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(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 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)',
@@ -5687,11 +5799,9 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         '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
+                        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: [
+    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: [showEyedropper && isEyedropperAvailable && (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' },
                             { label: 'RGBA', value: 'rgba' },