@designbasekorea/ui 0.2.12 → 0.2.14

package/dist/index.esm.js

@@ -5277,7 +5277,7 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
 };
 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] = useState(value || defaultValue);
     const [isOpen, setIsOpen] = useState(false);
     const [hue, setHue] = useState(211);
@@ -5423,6 +5423,11 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#00
     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 = () => {
@@ -5510,7 +5515,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '#00
             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,
@@ -9357,7 +9362,7 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
         }) }));
 };
 
-const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
+const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, valuePosition = 'top', showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(value ?? min);
     const [internalRange, setInternalRange] = useState(range ?? [min, max]);
     const [isDragging, setIsDragging] = useState(false);
@@ -9368,6 +9373,8 @@ const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', v
     const isControlled = value !== undefined || range !== undefined;
     const currentValue = isControlled ? (value ?? internalValue) : internalValue;
     const currentRange = isControlled ? (range ?? internalRange) : internalRange;
+    // 단일 값일 때 기본적으로 우측에 표시
+    const effectiveValuePosition = valuePosition === 'top' && range === undefined ? 'right' : valuePosition;
     // 값 정규화
     const normalizeValue = useCallback((val) => {
         return Math.max(min, Math.min(max, val));
@@ -9537,7 +9544,7 @@ const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', v
                 }, "aria-hidden": "true", children: markLabels[mark] && (jsx("span", { className: "designbase-range-slider__mark-label", children: markLabels[mark] })) }, mark));
         });
     };
-    const classes = clsx('designbase-range-slider', `designbase-range-slider--${size}`, `designbase-range-slider--${variant}`, {
+    const classes = clsx('designbase-range-slider', `designbase-range-slider--${size}`, `designbase-range-slider--${variant}`, `designbase-range-slider--value-${effectiveValuePosition}`, {
         'designbase-range-slider--disabled': disabled,
         'designbase-range-slider--readonly': readOnly,
         'designbase-range-slider--full-width': fullWidth,