@designbasekorea/ui 0.2.27 → 0.2.28

package/dist/index.umd.js

@@ -5478,12 +5478,14 @@
             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 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)); // 실시간 동기화
-        };
+        }, []);
         /** 컬러 인풋: 엔터로만 확정 */
         const tryCommitColorInput = () => {
             const str = colorInput.trim();
@@ -5552,7 +5554,7 @@
             setAlphaInput(String(a));
         };
         /** 복사 */
-        const onCopy = async () => {
+        const onCopy = React.useCallback(async () => {
             try {
                 await navigator.clipboard.writeText(formatted);
                 setIsCopied(true);
@@ -5561,9 +5563,9 @@
             catch (e) {
                 console.error(e);
             }
-        };
+        }, [formatted]);
         /** EyeDropper */
-        const onEyedrop = async () => {
+        const onEyedrop = React.useCallback(async () => {
             try {
                 if ('EyeDropper' in window) {
                     const eye = new window.EyeDropper();
@@ -5581,21 +5583,21 @@
             catch (e) {
                 console.error(e);
             }
-        };
+        }, []);
         /** 모달용 핸들러 */
-        const handleModalOpen = () => {
+        const handleModalOpen = React.useCallback(() => {
             if (type === 'modal') {
                 setTempColor(formatted);
             }
             setIsOpen(true);
-        };
-        const handleModalApply = () => {
+        }, [type, formatted]);
+        const handleModalApply = React.useCallback(() => {
             if (type === 'modal') {
                 onApply?.(formatted);
                 setIsOpen(false);
             }
-        };
-        const handleModalCancel = () => {
+        }, [type, formatted, onApply]);
+        const handleModalCancel = React.useCallback(() => {
             if (type === 'modal') {
                 // 원래 색상으로 복원
                 const rgb = hexToRgb(tempColor);
@@ -5608,9 +5610,9 @@
                 onCancel?.();
                 setIsOpen(false);
             }
-        };
+        }, [type, tempColor, onCancel]);
         /** 배경 스타일 */
-        const hueTrackStyle = {
+        const hueTrackStyle = React.useMemo(() => ({
             background: `linear-gradient(to right,
       hsl(0,100%,50%),
       hsl(60,100%,50%),
@@ -5619,15 +5621,15 @@
       hsl(240,100%,50%),
       hsl(300,100%,50%),
       hsl(360,100%,50%))`,
-        };
-        const areaBackground = {
+        }), []);
+        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%))
     `,
-        };
+        }), [h]);
         /** ✔︎ 알파 트랙: 색상 무관, 고정 흑백 그라디언트 */
-        const alphaTrackStyle = {
+        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%),
@@ -5638,7 +5640,7 @@
             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,
             'designbase-color-picker--readonly': readonly,
@@ -5646,13 +5648,13 @@
             '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 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, position: "top", options: [
+        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' },
                                 { label: 'RGBA', value: 'rgba' },
                                 { label: 'HSL', value: 'hsl' },
                                 { label: 'HSLA', value: 'hsla' },
-                            ], size: "s" })), 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, {}) }))] })] }));
+                            ], 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" })] }) })] }))] }));
     };
     ColorPicker.displayName = 'ColorPicker';