@designbasekorea/ui 0.2.13 → 0.2.16

package/dist/index.js

@@ -9364,7 +9364,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] = React.useState(value ?? min);
     const [internalRange, setInternalRange] = React.useState(range ?? [min, max]);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -9375,6 +9375,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 = range !== undefined ? 'top' : (valuePosition === 'top' ? 'right' : valuePosition);
     // 값 정규화
     const normalizeValue = React.useCallback((val) => {
         return Math.max(min, Math.min(max, val));
@@ -9544,7 +9546,7 @@ const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', v
                 }, "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,
@@ -9563,7 +9565,7 @@ const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', v
         : {
             [vertical ? 'height' : 'width']: `${getPercentage(currentValue)}%`,
         };
-    return (jsxRuntime.jsxs("div", { className: classes, ...props, children: [showValue && (jsxRuntime.jsx("div", { className: "designbase-range-slider__values", children: range !== undefined ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "designbase-range-slider__value", children: currentRange[0] }), jsxRuntime.jsx("span", { className: "designbase-range-slider__value", children: currentRange[1] })] })) : (jsxRuntime.jsx("span", { className: "designbase-range-slider__value", children: currentValue })) })), jsxRuntime.jsx("div", { ref: containerRef, className: "designbase-range-slider__container", role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": range !== undefined ? currentRange[0] : currentValue, "aria-valuetext": range !== undefined ? `${currentRange[0]} to ${currentRange[1]}` : currentValue.toString(), "aria-disabled": disabled, "aria-readonly": readOnly, tabIndex: disabled || readOnly ? -1 : 0, onKeyDown: (e) => handleKeyDown(e), children: jsxRuntime.jsxs("div", { ref: trackRef, className: trackClasses, onClick: handleTrackClick, children: [jsxRuntime.jsx("div", { className: "designbase-range-slider__fill", style: fillStyle }), renderMarks(), range !== undefined ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx('designbase-range-slider__thumb', {
+    return (jsxRuntime.jsxs("div", { className: classes, ...props, children: [showValue && (jsxRuntime.jsx("div", { className: "designbase-range-slider__values", children: range !== undefined ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "designbase-range-slider__value designbase-range-slider__value--min", children: currentRange[0] }), jsxRuntime.jsx("span", { className: "designbase-range-slider__value designbase-range-slider__value--max", children: currentRange[1] })] })) : (jsxRuntime.jsx("span", { className: "designbase-range-slider__value designbase-range-slider__value--single", children: currentValue })) })), jsxRuntime.jsx("div", { ref: containerRef, className: "designbase-range-slider__container", role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": range !== undefined ? currentRange[0] : currentValue, "aria-valuetext": range !== undefined ? `${currentRange[0]} to ${currentRange[1]}` : currentValue.toString(), "aria-disabled": disabled, "aria-readonly": readOnly, tabIndex: disabled || readOnly ? -1 : 0, onKeyDown: (e) => handleKeyDown(e), children: jsxRuntime.jsxs("div", { ref: trackRef, className: trackClasses, onClick: handleTrackClick, children: [jsxRuntime.jsx("div", { className: "designbase-range-slider__fill", style: fillStyle }), renderMarks(), range !== undefined ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx('designbase-range-slider__thumb', {
                                         'designbase-range-slider__thumb--active': activeThumb === 'min',
                                     }), style: {
                                         [vertical ? 'bottom' : 'left']: `${getPercentage(currentRange[0])}%`,