@designbasekorea/ui 0.2.12 → 0.2.13

package/dist/index.umd.js

@@ -5278,7 +5278,7 @@
     };
     Chip.displayName = 'Chip';
 
-    const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
+    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 [isOpen, setIsOpen] = React.useState(false);
         const [hue, setHue] = React.useState(211);
@@ -5424,6 +5424,11 @@
         const handleInputChange = (e) => {
             const newValue = e.target.value.trim();
             setInputValue(newValue);
+            // HEX 값이 유효하면 실시간으로 색상 업데이트
+            if (/^#[0-9A-F]{6}$/i.test(newValue)) {
+                handleColorChange(newValue.toUpperCase());
+                updateHSLFromHex(newValue);
+            }
         };
         // 입력 필드에서 포커스 아웃 시 검증 및 적용
         const handleInputBlur = () => {
@@ -5511,7 +5516,7 @@
                 return;
             setIsOpen(!isOpen);
         };
-        const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, {
+        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,