@designbasekorea/ui 0.2.13 → 0.2.14

package/dist/index.umd.js

@@ -9363,7 +9363,7 @@
             }) }));
     };
 
-    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] = React.useState(value ?? min);
         const [internalRange, setInternalRange] = React.useState(range ?? [min, max]);
         const [isDragging, setIsDragging] = React.useState(false);
@@ -9374,6 +9374,8 @@
         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 = React.useCallback((val) => {
             return Math.max(min, Math.min(max, val));
@@ -9543,7 +9545,7 @@
                     }, "aria-hidden": "true", children: markLabels[mark] && (jsxRuntime.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,