@yamada-ui/slider - npm Package Compare versions

Comparing version 1.3.4-dev-20241212095817 to 1.3.4-dev-20241212101624

dist/index.js

@@ -79,2 +79,3 @@ "use client"
     orientation = "horizontal",
+    reversed,
     step = 1,
@@ -97,2 +98,3 @@ thumbSize: thumbSizeProp,
   } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  reversed != null ? reversed : reversed = isReversed;
   if (max < min)
@@ -108,5 +110,5 @@ throw new Error("Do not assign a number less than 'min' to 'max'");
   });
-  const [isDragging, setDragging] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const isInteractive = !(disabled || readOnly);
+  const [dragging, setDragging] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const interactive = !(disabled || readOnly);
   const tenStep = (max - min) / 10;
@@ -116,8 +118,8 @@ const oneStep = step || (max - min) / 100;
   const reversedValue = max - value + min;
-  const thumbValue = isReversed ? reversedValue : value;
+  const thumbValue = reversed ? reversedValue : value;
   const thumbPercent = (0, import_utils.valueToPercent)(thumbValue, min, max);
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const latestRef = (0, import_use_latest_ref.useLatestRef)({
     focusThumbOnChange,
-    isInteractive,
+    interactive,
     max,
@@ -135,9 +137,9 @@ min,
     onMove: (ev) => {
-      const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2 } = latestRef.current;
+      if (!interactive2) return;
       setValueFromPointer(ev);
     },
     onSessionEnd: () => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(false);
@@ -147,4 +149,4 @@ onChangeEnd(value2);
     onSessionStart: (ev) => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(true);
@@ -164,6 +166,6 @@ focusThumb();
       const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
-      const diff = isVertical ? bottom - clientY : clientX - left;
-      const length = isVertical ? height : width;
+      const diff = vertical ? bottom - clientY : clientX - left;
+      const length = vertical ? height : width;
       let percent = diff / length;
-      if (isReversed) percent = 1 - percent;
+      if (reversed) percent = 1 - percent;
       let nextValue = (0, import_utils.percentToValue)(percent, min2, max2);
@@ -174,3 +176,3 @@ if (step2) nextValue = parseFloat((0, import_utils.roundNumberToStep)(nextValue, min2, step2));
     },
-    [isVertical, isReversed, latestRef]
+    [vertical, reversed, latestRef]
   );
@@ -191,4 +193,4 @@ const setValueFromPointer = (ev) => {
     (value2) => {
-      const { isInteractive: isInteractive2, max: max2, min: min2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, max: max2, min: min2 } = latestRef.current;
+      if (!interactive2) return;
       value2 = parseFloat((0, import_utils.roundNumberToStep)(value2, min2, oneStep));
@@ -201,8 +203,8 @@ value2 = (0, import_utils.clampNumber)(value2, min2, max2);
   const stepUp = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value - step2 : value + step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value - step2 : value + step2),
+    [constrain, reversed, oneStep, value]
   );
   const stepDown = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value + step2 : value - step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value + step2 : value - step2),
+    [constrain, reversed, oneStep, value]
   );
@@ -249,3 +251,3 @@ const reset = (0, import_react.useCallback)(
       if ((0, import_utils.isNumber)(h)) h = `${h}px`;
-      const paddingStyle = isVertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
+      const paddingStyle = vertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
       const style = {
@@ -276,3 +278,3 @@ ...props2.style,
     },
-    [isVertical, rest, thumbSize, thumbSizeProp]
+    [vertical, rest, thumbSize, thumbSizeProp]
   );
@@ -309,3 +311,3 @@ const getInputProps = (0, import_react.useCallback)(
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: "100%",
@@ -327,15 +329,15 @@ left: "50%",
     },
-    [isVertical, formControlProps]
+    [vertical, formControlProps]
   );
   const getFilledTrackProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
-      const n = Math.abs(isReversed ? 100 - thumbPercent : thumbPercent);
+      const n = Math.abs(reversed ? 100 - thumbPercent : thumbPercent);
       const style = {
         ...props2.style,
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: `${n}%`,
           left: "50%",
           transform: "translateX(-50%)",
-          ...isReversed ? { top: "0%" } : { bottom: "0%" }
+          ...reversed ? { top: "0%" } : { bottom: "0%" }
         } : {
@@ -345,3 +347,3 @@ top: "50%",
           width: `${n}%`,
-          ...isReversed ? { right: "0%" } : { left: "0%" }
+          ...reversed ? { right: "0%" } : { left: "0%" }
         }
@@ -356,3 +358,3 @@ };
     },
-    [isReversed, isVertical, formControlProps, thumbPercent]
+    [reversed, vertical, formControlProps, thumbPercent]
   );
@@ -362,3 +364,3 @@ const getMarkProps = (0, import_react.useCallback)(
       let n = (0, import_utils.valueToPercent)(props2.value, min, max);
-      n = isReversed ? 100 - n : n;
+      n = reversed ? 100 - n : n;
       const style = {
@@ -368,3 +370,3 @@ ...props2.style,
         position: "absolute",
-        ...isVertical ? { bottom: `${n}%` } : { left: `${n}%` }
+        ...vertical ? { bottom: `${n}%` } : { left: `${n}%` }
       };
@@ -381,3 +383,3 @@ return {
     },
-    [isReversed, isVertical, max, min, formControlProps, value]
+    [reversed, vertical, max, min, formControlProps, value]
   );
@@ -401,3 +403,3 @@ const getThumbProps = (0, import_react.useCallback)(
         userSelect: "none",
-        ...isVertical ? { bottom } : { left }
+        ...vertical ? { bottom } : { left }
       };
@@ -417,5 +419,5 @@ return {
         "aria-valuetext": (_a = ariaValueText != null ? ariaValueText : getAriaValueText(value)) != null ? _a : value.toString(),
-        "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
+        "data-active": (0, import_utils.dataAttr)(dragging && focusThumbOnChange),
         role: "slider",
-        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        tabIndex: interactive && focusThumbOnChange ? 0 : void 0,
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
@@ -429,3 +431,3 @@ onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
       thumbSize,
-      isVertical,
+      vertical,
       ariaLabel,
@@ -441,5 +443,5 @@ ariaLabelledBy,
       getAriaValueText,
-      isDragging,
+      dragging,
       focusThumbOnChange,
-      isInteractive,
+      interactive,
       onBlur,
@@ -451,5 +453,16 @@ onFocus,
   return {
-    isDragging,
-    isFocused,
-    isVertical,
+    dragging,
+    focused,
+    /**
+     * @deprecated Use `dragging` instead.
+     */
+    isDragging: dragging,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `vertical` instead.
+     */
+    isVertical: vertical,
     reset,
@@ -460,2 +473,3 @@ stepDown,
     value,
+    vertical,
     getContainerProps,
@@ -663,2 +677,3 @@ getFilledTrackProps,
     orientation = "horizontal",
+    reversed,
     step = 1,
@@ -682,2 +697,3 @@ thumbSize: thumbSizeProp,
   defaultValue = defaultValue != null ? defaultValue : [min + (max - min) / 4, max - (max - min) / 4];
+  reversed != null ? reversed : reversed = isReversed;
   if (max < min)
@@ -694,5 +710,5 @@ throw new Error("Do not assign a number less than 'min' to 'max'");
   const uuid = (0, import_react2.useId)();
-  const [isDragging, setDragging] = (0, import_react2.useState)(false);
-  const [isFocused, setFocused] = (0, import_react2.useState)(false);
-  const isInteractive = !(disabled || readOnly);
+  const [dragging, setDragging] = (0, import_react2.useState)(false);
+  const [focused, setFocused] = (0, import_react2.useState)(false);
+  const interactive = !(disabled || readOnly);
   const tenStep = (max - min) / 10;
@@ -706,3 +722,3 @@ const oneStep = step || (max - min) / 100;
   const reversedValues = values.map((value) => max - value + min);
-  const thumbValues = isReversed ? reversedValues : values;
+  const thumbValues = reversed ? reversedValues : values;
   const thumbPercents = thumbValues.map(
@@ -715,3 +731,3 @@ (value) => (0, import_utils2.valueToPercent)(value, min, max)
   ];
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const latestRef = (0, import_use_latest_ref2.useLatestRef)({
@@ -721,11 +737,11 @@ betweenThumbs,
     focusThumbOnChange,
-    isInteractive,
-    isReversed,
-    isVertical,
+    interactive,
     max,
     min,
     orientation,
+    reversed,
     step,
     valueBounds,
-    values
+    values,
+    vertical
   });
@@ -754,4 +770,4 @@ const activeIndexRef = (0, import_react2.useRef)(-1);
       const activeIndex = activeIndexRef.current;
-      const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2 || activeIndex == -1) return;
+      const { interactive: interactive2 } = latestRef.current;
+      if (!interactive2 || activeIndex == -1) return;
       const pointValue = getValueFromPointer(ev) || 0;
@@ -762,4 +778,4 @@ constrain(activeIndex, pointValue);
     onSessionEnd: () => {
-      const { isInteractive: isInteractive2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(false);
@@ -769,4 +785,4 @@ onChangeEnd(values2);
     onSessionStart: (ev) => {
-      const { isInteractive: isInteractive2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(true);
@@ -797,10 +813,10 @@ const pointValue = getValueFromPointer(ev) || 0;
       const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
-      const diff = isVertical ? bottom - clientY : clientX - left;
-      const length = isVertical ? height : width;
+      const diff = vertical ? bottom - clientY : clientX - left;
+      const length = vertical ? height : width;
       let percent = diff / length;
-      if (isReversed) percent = 1 - percent;
+      if (reversed) percent = 1 - percent;
       let nextValue = (0, import_utils2.percentToValue)(percent, min2, max2);
       return nextValue;
     },
-    [latestRef, isVertical, isReversed]
+    [latestRef, vertical, reversed]
   );
@@ -820,4 +836,4 @@ const focusThumb = (0, import_react2.useCallback)(
       var _a;
-      const { isInteractive: isInteractive2, valueBounds: valueBounds2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, valueBounds: valueBounds2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       const { max: max2 = 100, min: min2 = 0 } = (_a = valueBounds2[i]) != null ? _a : {};
@@ -836,5 +852,5 @@ value = parseFloat((0, import_utils2.roundNumberToStep)(value, min2, oneStep));
       const value = values2[i];
-      constrain(i, isReversed ? value - step2 : value + step2);
+      constrain(i, reversed ? value - step2 : value + step2);
     },
-    [constrain, isReversed, latestRef, oneStep]
+    [constrain, reversed, latestRef, oneStep]
   );
@@ -845,5 +861,5 @@ const stepDown = (0, import_react2.useCallback)(
       const value = values2[i];
-      constrain(i, isReversed ? value + step2 : value - step2);
+      constrain(i, reversed ? value + step2 : value - step2);
     },
-    [constrain, isReversed, latestRef, oneStep]
+    [constrain, reversed, latestRef, oneStep]
   );
@@ -889,3 +905,3 @@ const reset = (0, import_react2.useCallback)(
       if (thumbSizes.length) {
-        const p = isVertical ? "height" : "width";
+        const p = vertical ? "height" : "width";
         const z = { height: 0, width: 0 };
@@ -896,3 +912,3 @@ const { height, width } = (_a = thumbSizes.reduce((a = z, b = z) => a[p] > b[p] ? a : b, z)) != null ? _a : {};
       }
-      const paddingStyle = isVertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
+      const paddingStyle = vertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
       const style = {
@@ -924,3 +940,3 @@ ...props2.style,
     },
-    [id, isVertical, rest, thumbSizeProp, thumbSizes]
+    [id, vertical, rest, thumbSizeProp, thumbSizes]
   );
@@ -957,3 +973,3 @@ const getInputProps = (0, import_react2.useCallback)(
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: "100%",
@@ -976,3 +992,3 @@ left: "50%",
     },
-    [id, isVertical, formControlProps]
+    [id, vertical, formControlProps]
   );
@@ -982,11 +998,11 @@ const getFilledTrackProps = (0, import_react2.useCallback)(
       const n = Math.abs(thumbPercents[1] - thumbPercents[0]);
-      const s = isReversed ? 100 - thumbPercents[0] : thumbPercents[0];
+      const s = reversed ? 100 - thumbPercents[0] : thumbPercents[0];
       const style = {
         ...props2.style,
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: `${n}%`,
           left: "50%",
           transform: "translateX(-50%)",
-          ...isReversed ? { top: `${s}%` } : { bottom: `${s}%` }
+          ...reversed ? { top: `${s}%` } : { bottom: `${s}%` }
         } : {
@@ -996,3 +1012,3 @@ top: "50%",
           width: `${n}%`,
-          ...isReversed ? { right: `${s}%` } : { left: `${s}%` }
+          ...reversed ? { right: `${s}%` } : { left: `${s}%` }
         }
@@ -1008,3 +1024,3 @@ };
     },
-    [id, isReversed, isVertical, formControlProps, thumbPercents]
+    [id, reversed, vertical, formControlProps, thumbPercents]
   );
@@ -1014,3 +1030,3 @@ const getMarkProps = (0, import_react2.useCallback)(
       let n = (0, import_utils2.valueToPercent)(props2.value, min, max);
-      n = isReversed ? 100 - n : n;
+      n = reversed ? 100 - n : n;
       const style = {
@@ -1020,3 +1036,3 @@ ...props2.style,
         position: "absolute",
-        ...isVertical ? { bottom: `${n}%` } : { left: `${n}%` }
+        ...vertical ? { bottom: `${n}%` } : { left: `${n}%` }
       };
@@ -1036,3 +1052,3 @@ return {
     },
-    [getMarkerId, isReversed, isVertical, max, min, formControlProps, values]
+    [getMarkerId, reversed, vertical, max, min, formControlProps, values]
   );
@@ -1056,3 +1072,3 @@ const getThumbProps = (0, import_react2.useCallback)(
         userSelect: "none",
-        ...isVertical ? { bottom } : { left }
+        ...vertical ? { bottom } : { left }
       };
@@ -1079,6 +1095,6 @@ const value = values[i];
         "data-active": (0, import_utils2.dataAttr)(
-          isDragging && focusThumbOnChange && activeIndexRef.current === i
+          dragging && focusThumbOnChange && activeIndexRef.current === i
         ),
         role: "slider",
-        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        tabIndex: interactive && focusThumbOnChange ? 0 : void 0,
         onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => {
@@ -1098,3 +1114,3 @@ activeIndexRef.current = -1;
       thumbSizes,
-      isVertical,
+      vertical,
       values,
@@ -1111,5 +1127,5 @@ ariaLabel,
       getAriaValueText,
-      isDragging,
+      dragging,
       focusThumbOnChange,
-      isInteractive,
+      interactive,
       onBlur,
@@ -1121,8 +1137,7 @@ onFocus,
   return {
+    dragging,
+    focused,
     getInputId,
     getMarkerId,
     getThumbId,
-    isDragging,
-    isFocused,
-    isVertical,
     reset,
@@ -1132,2 +1147,3 @@ stepDown,
     values,
+    vertical,
     getContainerProps,
@@ -1162,3 +1178,3 @@ getFilledTrackProps,
   const {
-    isVertical,
+    vertical,
     getContainerProps,
@@ -1201,3 +1217,2 @@ getFilledTrackProps,
         filledTrackColor,
-        isVertical,
         styles,
@@ -1208,2 +1223,3 @@ thumbColor,
         trackSize,
+        vertical,
         filledTrackProps,
@@ -1241,6 +1257,6 @@ getFilledTrackProps,
     const {
-      isVertical,
       styles,
       trackColor,
       trackSize,
+      vertical,
       getTrackProps,
@@ -1258,3 +1274,3 @@ trackProps
             ...trackColor ? { bg: trackColor } : {},
-            ...trackSize ? isVertical ? { w: trackSize } : { h: trackSize } : {},
+            ...trackSize ? vertical ? { w: trackSize } : { h: trackSize } : {},
             ...trackProps,
@@ -1261,0 +1277,0 @@ ...rest

dist/range-slider.d.ts

@@ -42,2 +42,4 @@ import * as _yamada_ui_core from '@yamada-ui/core';
      * If `true`, the value will be incremented or decremented in reverse.
+     *
+     * @deprecated Use `reversed` instead.
      */
@@ -64,2 +66,6 @@ isReversed?: boolean;
     /**
+     * If `true`, the value will be incremented or decremented in reverse.
+     */
+    reversed?: boolean;
+    /**
      * The step in which increments or decrements have to be made.
@@ -95,8 +101,7 @@ *
 declare const useRangeSlider: ({ focusThumbOnChange, ...props }: UseRangeSliderProps) => {
+    dragging: boolean;
+    focused: boolean;
     getInputId: (i: number) => string;
     getMarkerId: (i: number) => string;
     getThumbId: (i: number) => string;
-    isDragging: boolean;
-    isFocused: boolean;
-    isVertical: boolean;
     reset: () => void;
@@ -106,2 +111,3 @@ stepDown: (i: number, step?: number) => void;
     values: [number, number];
+    vertical: boolean;
     getContainerProps: PropGetter<"div", undefined>;
@@ -108,0 +114,0 @@ getFilledTrackProps: PropGetter<"div", undefined>;

dist/range-slider.js

@@ -73,2 +73,3 @@ "use client"
     orientation = "horizontal",
+    reversed,
     step = 1,
@@ -91,2 +92,3 @@ thumbSize: thumbSizeProp,
   } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  reversed != null ? reversed : reversed = isReversed;
   if (max < min)
@@ -102,5 +104,5 @@ throw new Error("Do not assign a number less than 'min' to 'max'");
   });
-  const [isDragging, setDragging] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const isInteractive = !(disabled || readOnly);
+  const [dragging, setDragging] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const interactive = !(disabled || readOnly);
   const tenStep = (max - min) / 10;
@@ -110,8 +112,8 @@ const oneStep = step || (max - min) / 100;
   const reversedValue = max - value + min;
-  const thumbValue = isReversed ? reversedValue : value;
+  const thumbValue = reversed ? reversedValue : value;
   const thumbPercent = (0, import_utils.valueToPercent)(thumbValue, min, max);
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const latestRef = (0, import_use_latest_ref.useLatestRef)({
     focusThumbOnChange,
-    isInteractive,
+    interactive,
     max,
@@ -129,9 +131,9 @@ min,
     onMove: (ev) => {
-      const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2 } = latestRef.current;
+      if (!interactive2) return;
       setValueFromPointer(ev);
     },
     onSessionEnd: () => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(false);
@@ -141,4 +143,4 @@ onChangeEnd(value2);
     onSessionStart: (ev) => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(true);
@@ -158,6 +160,6 @@ focusThumb();
       const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
-      const diff = isVertical ? bottom - clientY : clientX - left;
-      const length = isVertical ? height : width;
+      const diff = vertical ? bottom - clientY : clientX - left;
+      const length = vertical ? height : width;
       let percent = diff / length;
-      if (isReversed) percent = 1 - percent;
+      if (reversed) percent = 1 - percent;
       let nextValue = (0, import_utils.percentToValue)(percent, min2, max2);
@@ -168,3 +170,3 @@ if (step2) nextValue = parseFloat((0, import_utils.roundNumberToStep)(nextValue, min2, step2));
     },
-    [isVertical, isReversed, latestRef]
+    [vertical, reversed, latestRef]
   );
@@ -185,4 +187,4 @@ const setValueFromPointer = (ev) => {
     (value2) => {
-      const { isInteractive: isInteractive2, max: max2, min: min2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, max: max2, min: min2 } = latestRef.current;
+      if (!interactive2) return;
       value2 = parseFloat((0, import_utils.roundNumberToStep)(value2, min2, oneStep));
@@ -195,8 +197,8 @@ value2 = (0, import_utils.clampNumber)(value2, min2, max2);
   const stepUp = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value - step2 : value + step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value - step2 : value + step2),
+    [constrain, reversed, oneStep, value]
   );
   const stepDown = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value + step2 : value - step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value + step2 : value - step2),
+    [constrain, reversed, oneStep, value]
   );
@@ -243,3 +245,3 @@ const reset = (0, import_react.useCallback)(
       if ((0, import_utils.isNumber)(h)) h = `${h}px`;
-      const paddingStyle = isVertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
+      const paddingStyle = vertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
       const style = {
@@ -270,3 +272,3 @@ ...props2.style,
     },
-    [isVertical, rest, thumbSize, thumbSizeProp]
+    [vertical, rest, thumbSize, thumbSizeProp]
   );
@@ -303,3 +305,3 @@ const getInputProps = (0, import_react.useCallback)(
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: "100%",
@@ -321,15 +323,15 @@ left: "50%",
     },
-    [isVertical, formControlProps]
+    [vertical, formControlProps]
   );
   const getFilledTrackProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
-      const n = Math.abs(isReversed ? 100 - thumbPercent : thumbPercent);
+      const n = Math.abs(reversed ? 100 - thumbPercent : thumbPercent);
       const style = {
         ...props2.style,
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: `${n}%`,
           left: "50%",
           transform: "translateX(-50%)",
-          ...isReversed ? { top: "0%" } : { bottom: "0%" }
+          ...reversed ? { top: "0%" } : { bottom: "0%" }
         } : {
@@ -339,3 +341,3 @@ top: "50%",
           width: `${n}%`,
-          ...isReversed ? { right: "0%" } : { left: "0%" }
+          ...reversed ? { right: "0%" } : { left: "0%" }
         }
@@ -350,3 +352,3 @@ };
     },
-    [isReversed, isVertical, formControlProps, thumbPercent]
+    [reversed, vertical, formControlProps, thumbPercent]
   );
@@ -356,3 +358,3 @@ const getMarkProps = (0, import_react.useCallback)(
       let n = (0, import_utils.valueToPercent)(props2.value, min, max);
-      n = isReversed ? 100 - n : n;
+      n = reversed ? 100 - n : n;
       const style = {
@@ -362,3 +364,3 @@ ...props2.style,
         position: "absolute",
-        ...isVertical ? { bottom: `${n}%` } : { left: `${n}%` }
+        ...vertical ? { bottom: `${n}%` } : { left: `${n}%` }
       };
@@ -375,3 +377,3 @@ return {
     },
-    [isReversed, isVertical, max, min, formControlProps, value]
+    [reversed, vertical, max, min, formControlProps, value]
   );
@@ -395,3 +397,3 @@ const getThumbProps = (0, import_react.useCallback)(
         userSelect: "none",
-        ...isVertical ? { bottom } : { left }
+        ...vertical ? { bottom } : { left }
       };
@@ -411,5 +413,5 @@ return {
         "aria-valuetext": (_a = ariaValueText != null ? ariaValueText : getAriaValueText(value)) != null ? _a : value.toString(),
-        "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
+        "data-active": (0, import_utils.dataAttr)(dragging && focusThumbOnChange),
         role: "slider",
-        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        tabIndex: interactive && focusThumbOnChange ? 0 : void 0,
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
@@ -423,3 +425,3 @@ onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
       thumbSize,
-      isVertical,
+      vertical,
       ariaLabel,
@@ -435,5 +437,5 @@ ariaLabelledBy,
       getAriaValueText,
-      isDragging,
+      dragging,
       focusThumbOnChange,
-      isInteractive,
+      interactive,
       onBlur,
@@ -445,5 +447,16 @@ onFocus,
   return {
-    isDragging,
-    isFocused,
-    isVertical,
+    dragging,
+    focused,
+    /**
+     * @deprecated Use `dragging` instead.
+     */
+    isDragging: dragging,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `vertical` instead.
+     */
+    isVertical: vertical,
     reset,
@@ -454,2 +467,3 @@ stepDown,
     value,
+    vertical,
     getContainerProps,
@@ -657,2 +671,3 @@ getFilledTrackProps,
     orientation = "horizontal",
+    reversed,
     step = 1,
@@ -676,2 +691,3 @@ thumbSize: thumbSizeProp,
   defaultValue = defaultValue != null ? defaultValue : [min + (max - min) / 4, max - (max - min) / 4];
+  reversed != null ? reversed : reversed = isReversed;
   if (max < min)
@@ -688,5 +704,5 @@ throw new Error("Do not assign a number less than 'min' to 'max'");
   const uuid = (0, import_react2.useId)();
-  const [isDragging, setDragging] = (0, import_react2.useState)(false);
-  const [isFocused, setFocused] = (0, import_react2.useState)(false);
-  const isInteractive = !(disabled || readOnly);
+  const [dragging, setDragging] = (0, import_react2.useState)(false);
+  const [focused, setFocused] = (0, import_react2.useState)(false);
+  const interactive = !(disabled || readOnly);
   const tenStep = (max - min) / 10;
@@ -700,3 +716,3 @@ const oneStep = step || (max - min) / 100;
   const reversedValues = values.map((value) => max - value + min);
-  const thumbValues = isReversed ? reversedValues : values;
+  const thumbValues = reversed ? reversedValues : values;
   const thumbPercents = thumbValues.map(
@@ -709,3 +725,3 @@ (value) => (0, import_utils2.valueToPercent)(value, min, max)
   ];
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const latestRef = (0, import_use_latest_ref2.useLatestRef)({
@@ -715,11 +731,11 @@ betweenThumbs,
     focusThumbOnChange,
-    isInteractive,
-    isReversed,
-    isVertical,
+    interactive,
     max,
     min,
     orientation,
+    reversed,
     step,
     valueBounds,
-    values
+    values,
+    vertical
   });
@@ -748,4 +764,4 @@ const activeIndexRef = (0, import_react2.useRef)(-1);
       const activeIndex = activeIndexRef.current;
-      const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2 || activeIndex == -1) return;
+      const { interactive: interactive2 } = latestRef.current;
+      if (!interactive2 || activeIndex == -1) return;
       const pointValue = getValueFromPointer(ev) || 0;
@@ -756,4 +772,4 @@ constrain(activeIndex, pointValue);
     onSessionEnd: () => {
-      const { isInteractive: isInteractive2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(false);
@@ -763,4 +779,4 @@ onChangeEnd(values2);
     onSessionStart: (ev) => {
-      const { isInteractive: isInteractive2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(true);
@@ -791,10 +807,10 @@ const pointValue = getValueFromPointer(ev) || 0;
       const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
-      const diff = isVertical ? bottom - clientY : clientX - left;
-      const length = isVertical ? height : width;
+      const diff = vertical ? bottom - clientY : clientX - left;
+      const length = vertical ? height : width;
       let percent = diff / length;
-      if (isReversed) percent = 1 - percent;
+      if (reversed) percent = 1 - percent;
       let nextValue = (0, import_utils2.percentToValue)(percent, min2, max2);
       return nextValue;
     },
-    [latestRef, isVertical, isReversed]
+    [latestRef, vertical, reversed]
   );
@@ -814,4 +830,4 @@ const focusThumb = (0, import_react2.useCallback)(
       var _a;
-      const { isInteractive: isInteractive2, valueBounds: valueBounds2, values: values2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, valueBounds: valueBounds2, values: values2 } = latestRef.current;
+      if (!interactive2) return;
       const { max: max2 = 100, min: min2 = 0 } = (_a = valueBounds2[i]) != null ? _a : {};
@@ -830,5 +846,5 @@ value = parseFloat((0, import_utils2.roundNumberToStep)(value, min2, oneStep));
       const value = values2[i];
-      constrain(i, isReversed ? value - step2 : value + step2);
+      constrain(i, reversed ? value - step2 : value + step2);
     },
-    [constrain, isReversed, latestRef, oneStep]
+    [constrain, reversed, latestRef, oneStep]
   );
@@ -839,5 +855,5 @@ const stepDown = (0, import_react2.useCallback)(
       const value = values2[i];
-      constrain(i, isReversed ? value + step2 : value - step2);
+      constrain(i, reversed ? value + step2 : value - step2);
     },
-    [constrain, isReversed, latestRef, oneStep]
+    [constrain, reversed, latestRef, oneStep]
   );
@@ -883,3 +899,3 @@ const reset = (0, import_react2.useCallback)(
       if (thumbSizes.length) {
-        const p = isVertical ? "height" : "width";
+        const p = vertical ? "height" : "width";
         const z = { height: 0, width: 0 };
@@ -890,3 +906,3 @@ const { height, width } = (_a = thumbSizes.reduce((a = z, b = z) => a[p] > b[p] ? a : b, z)) != null ? _a : {};
       }
-      const paddingStyle = isVertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
+      const paddingStyle = vertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
       const style = {
@@ -918,3 +934,3 @@ ...props2.style,
     },
-    [id, isVertical, rest, thumbSizeProp, thumbSizes]
+    [id, vertical, rest, thumbSizeProp, thumbSizes]
   );
@@ -951,3 +967,3 @@ const getInputProps = (0, import_react2.useCallback)(
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: "100%",
@@ -970,3 +986,3 @@ left: "50%",
     },
-    [id, isVertical, formControlProps]
+    [id, vertical, formControlProps]
   );
@@ -976,11 +992,11 @@ const getFilledTrackProps = (0, import_react2.useCallback)(
       const n = Math.abs(thumbPercents[1] - thumbPercents[0]);
-      const s = isReversed ? 100 - thumbPercents[0] : thumbPercents[0];
+      const s = reversed ? 100 - thumbPercents[0] : thumbPercents[0];
       const style = {
         ...props2.style,
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: `${n}%`,
           left: "50%",
           transform: "translateX(-50%)",
-          ...isReversed ? { top: `${s}%` } : { bottom: `${s}%` }
+          ...reversed ? { top: `${s}%` } : { bottom: `${s}%` }
         } : {
@@ -990,3 +1006,3 @@ top: "50%",
           width: `${n}%`,
-          ...isReversed ? { right: `${s}%` } : { left: `${s}%` }
+          ...reversed ? { right: `${s}%` } : { left: `${s}%` }
         }
@@ -1002,3 +1018,3 @@ };
     },
-    [id, isReversed, isVertical, formControlProps, thumbPercents]
+    [id, reversed, vertical, formControlProps, thumbPercents]
   );
@@ -1008,3 +1024,3 @@ const getMarkProps = (0, import_react2.useCallback)(
       let n = (0, import_utils2.valueToPercent)(props2.value, min, max);
-      n = isReversed ? 100 - n : n;
+      n = reversed ? 100 - n : n;
       const style = {
@@ -1014,3 +1030,3 @@ ...props2.style,
         position: "absolute",
-        ...isVertical ? { bottom: `${n}%` } : { left: `${n}%` }
+        ...vertical ? { bottom: `${n}%` } : { left: `${n}%` }
       };
@@ -1030,3 +1046,3 @@ return {
     },
-    [getMarkerId, isReversed, isVertical, max, min, formControlProps, values]
+    [getMarkerId, reversed, vertical, max, min, formControlProps, values]
   );
@@ -1050,3 +1066,3 @@ const getThumbProps = (0, import_react2.useCallback)(
         userSelect: "none",
-        ...isVertical ? { bottom } : { left }
+        ...vertical ? { bottom } : { left }
       };
@@ -1073,6 +1089,6 @@ const value = values[i];
         "data-active": (0, import_utils2.dataAttr)(
-          isDragging && focusThumbOnChange && activeIndexRef.current === i
+          dragging && focusThumbOnChange && activeIndexRef.current === i
         ),
         role: "slider",
-        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        tabIndex: interactive && focusThumbOnChange ? 0 : void 0,
         onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => {
@@ -1092,3 +1108,3 @@ activeIndexRef.current = -1;
       thumbSizes,
-      isVertical,
+      vertical,
       values,
@@ -1105,5 +1121,5 @@ ariaLabel,
       getAriaValueText,
-      isDragging,
+      dragging,
       focusThumbOnChange,
-      isInteractive,
+      interactive,
       onBlur,
@@ -1115,8 +1131,7 @@ onFocus,
   return {
+    dragging,
+    focused,
     getInputId,
     getMarkerId,
     getThumbId,
-    isDragging,
-    isFocused,
-    isVertical,
     reset,
@@ -1126,2 +1141,3 @@ stepDown,
     values,
+    vertical,
     getContainerProps,
@@ -1156,3 +1172,3 @@ getFilledTrackProps,
   const {
-    isVertical,
+    vertical,
     getContainerProps,
@@ -1195,3 +1211,2 @@ getFilledTrackProps,
         filledTrackColor,
-        isVertical,
         styles,
@@ -1202,2 +1217,3 @@ thumbColor,
         trackSize,
+        vertical,
         filledTrackProps,
@@ -1235,6 +1251,6 @@ getFilledTrackProps,
     const {
-      isVertical,
       styles,
       trackColor,
       trackSize,
+      vertical,
       getTrackProps,
@@ -1252,3 +1268,3 @@ trackProps
             ...trackColor ? { bg: trackColor } : {},
-            ...trackSize ? isVertical ? { w: trackSize } : { h: trackSize } : {},
+            ...trackSize ? vertical ? { w: trackSize } : { h: trackSize } : {},
             ...trackProps,
@@ -1255,0 +1271,0 @@ ...rest

dist/slider.d.ts

@@ -38,2 +38,4 @@ import * as _yamada_ui_core from '@yamada-ui/core';
      * If `true`, the value will be incremented or decremented in reverse.
+     *
+     * @deprecated Use `reversed` instead.
      */
@@ -60,2 +62,6 @@ isReversed?: boolean;
     /**
+     * If `true`, the value will be incremented or decremented in reverse.
+     */
+    reversed?: boolean;
+    /**
      * The step in which increments or decrements have to be made.
@@ -91,4 +97,15 @@ *
 declare const useSlider: ({ focusThumbOnChange, ...props }: UseSliderProps) => {
+    dragging: boolean;
+    focused: boolean;
+    /**
+     * @deprecated Use `dragging` instead.
+     */
     isDragging: boolean;
+    /**
+     * @deprecated Use `focused` instead.
+     */
     isFocused: boolean;
+    /**
+     * @deprecated Use `vertical` instead.
+     */
     isVertical: boolean;
@@ -100,2 +117,3 @@ reset: () => void;
     value: number;
+    vertical: boolean;
     getContainerProps: PropGetter<"div", undefined>;
@@ -102,0 +120,0 @@ getFilledTrackProps: PropGetter<"div", undefined>;

dist/slider.js

@@ -63,2 +63,3 @@ "use client"
     orientation = "horizontal",
+    reversed,
     step = 1,
@@ -81,2 +82,3 @@ thumbSize: thumbSizeProp,
   } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  reversed != null ? reversed : reversed = isReversed;
   if (max < min)
@@ -92,5 +94,5 @@ throw new Error("Do not assign a number less than 'min' to 'max'");
   });
-  const [isDragging, setDragging] = (0, import_react.useState)(false);
-  const [isFocused, setFocused] = (0, import_react.useState)(false);
-  const isInteractive = !(disabled || readOnly);
+  const [dragging, setDragging] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const interactive = !(disabled || readOnly);
   const tenStep = (max - min) / 10;
@@ -100,8 +102,8 @@ const oneStep = step || (max - min) / 100;
   const reversedValue = max - value + min;
-  const thumbValue = isReversed ? reversedValue : value;
+  const thumbValue = reversed ? reversedValue : value;
   const thumbPercent = (0, import_utils.valueToPercent)(thumbValue, min, max);
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const latestRef = (0, import_use_latest_ref.useLatestRef)({
     focusThumbOnChange,
-    isInteractive,
+    interactive,
     max,
@@ -119,9 +121,9 @@ min,
     onMove: (ev) => {
-      const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2 } = latestRef.current;
+      if (!interactive2) return;
       setValueFromPointer(ev);
     },
     onSessionEnd: () => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(false);
@@ -131,4 +133,4 @@ onChangeEnd(value2);
     onSessionStart: (ev) => {
-      const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, value: value2 } = latestRef.current;
+      if (!interactive2) return;
       setDragging(true);
@@ -148,6 +150,6 @@ focusThumb();
       const { clientX, clientY } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
-      const diff = isVertical ? bottom - clientY : clientX - left;
-      const length = isVertical ? height : width;
+      const diff = vertical ? bottom - clientY : clientX - left;
+      const length = vertical ? height : width;
       let percent = diff / length;
-      if (isReversed) percent = 1 - percent;
+      if (reversed) percent = 1 - percent;
       let nextValue = (0, import_utils.percentToValue)(percent, min2, max2);
@@ -158,3 +160,3 @@ if (step2) nextValue = parseFloat((0, import_utils.roundNumberToStep)(nextValue, min2, step2));
     },
-    [isVertical, isReversed, latestRef]
+    [vertical, reversed, latestRef]
   );
@@ -175,4 +177,4 @@ const setValueFromPointer = (ev) => {
     (value2) => {
-      const { isInteractive: isInteractive2, max: max2, min: min2 } = latestRef.current;
-      if (!isInteractive2) return;
+      const { interactive: interactive2, max: max2, min: min2 } = latestRef.current;
+      if (!interactive2) return;
       value2 = parseFloat((0, import_utils.roundNumberToStep)(value2, min2, oneStep));
@@ -185,8 +187,8 @@ value2 = (0, import_utils.clampNumber)(value2, min2, max2);
   const stepUp = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value - step2 : value + step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value - step2 : value + step2),
+    [constrain, reversed, oneStep, value]
   );
   const stepDown = (0, import_react.useCallback)(
-    (step2 = oneStep) => constrain(isReversed ? value + step2 : value - step2),
-    [constrain, isReversed, oneStep, value]
+    (step2 = oneStep) => constrain(reversed ? value + step2 : value - step2),
+    [constrain, reversed, oneStep, value]
   );
@@ -233,3 +235,3 @@ const reset = (0, import_react.useCallback)(
       if ((0, import_utils.isNumber)(h)) h = `${h}px`;
-      const paddingStyle = isVertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
+      const paddingStyle = vertical ? { paddingLeft: `calc(${w} / 2)`, paddingRight: `calc(${w} / 2)` } : { paddingBottom: `calc(${h} / 2)`, paddingTop: `calc(${h} / 2)` };
       const style = {
@@ -260,3 +262,3 @@ ...props2.style,
     },
-    [isVertical, rest, thumbSize, thumbSizeProp]
+    [vertical, rest, thumbSize, thumbSizeProp]
   );
@@ -293,3 +295,3 @@ const getInputProps = (0, import_react.useCallback)(
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: "100%",
@@ -311,15 +313,15 @@ left: "50%",
     },
-    [isVertical, formControlProps]
+    [vertical, formControlProps]
   );
   const getFilledTrackProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {
-      const n = Math.abs(isReversed ? 100 - thumbPercent : thumbPercent);
+      const n = Math.abs(reversed ? 100 - thumbPercent : thumbPercent);
       const style = {
         ...props2.style,
         position: "absolute",
-        ...isVertical ? {
+        ...vertical ? {
           height: `${n}%`,
           left: "50%",
           transform: "translateX(-50%)",
-          ...isReversed ? { top: "0%" } : { bottom: "0%" }
+          ...reversed ? { top: "0%" } : { bottom: "0%" }
         } : {
@@ -329,3 +331,3 @@ top: "50%",
           width: `${n}%`,
-          ...isReversed ? { right: "0%" } : { left: "0%" }
+          ...reversed ? { right: "0%" } : { left: "0%" }
         }
@@ -340,3 +342,3 @@ };
     },
-    [isReversed, isVertical, formControlProps, thumbPercent]
+    [reversed, vertical, formControlProps, thumbPercent]
   );
@@ -346,3 +348,3 @@ const getMarkProps = (0, import_react.useCallback)(
       let n = (0, import_utils.valueToPercent)(props2.value, min, max);
-      n = isReversed ? 100 - n : n;
+      n = reversed ? 100 - n : n;
       const style = {
@@ -352,3 +354,3 @@ ...props2.style,
         position: "absolute",
-        ...isVertical ? { bottom: `${n}%` } : { left: `${n}%` }
+        ...vertical ? { bottom: `${n}%` } : { left: `${n}%` }
       };
@@ -365,3 +367,3 @@ return {
     },
-    [isReversed, isVertical, max, min, formControlProps, value]
+    [reversed, vertical, max, min, formControlProps, value]
   );
@@ -385,3 +387,3 @@ const getThumbProps = (0, import_react.useCallback)(
         userSelect: "none",
-        ...isVertical ? { bottom } : { left }
+        ...vertical ? { bottom } : { left }
       };
@@ -401,5 +403,5 @@ return {
         "aria-valuetext": (_a = ariaValueText != null ? ariaValueText : getAriaValueText(value)) != null ? _a : value.toString(),
-        "data-active": (0, import_utils.dataAttr)(isDragging && focusThumbOnChange),
+        "data-active": (0, import_utils.dataAttr)(dragging && focusThumbOnChange),
         role: "slider",
-        tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
+        tabIndex: interactive && focusThumbOnChange ? 0 : void 0,
         onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
@@ -413,3 +415,3 @@ onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
       thumbSize,
-      isVertical,
+      vertical,
       ariaLabel,
@@ -425,5 +427,5 @@ ariaLabelledBy,
       getAriaValueText,
-      isDragging,
+      dragging,
       focusThumbOnChange,
-      isInteractive,
+      interactive,
       onBlur,
@@ -435,5 +437,16 @@ onFocus,
   return {
-    isDragging,
-    isFocused,
-    isVertical,
+    dragging,
+    focused,
+    /**
+     * @deprecated Use `dragging` instead.
+     */
+    isDragging: dragging,
+    /**
+     * @deprecated Use `focused` instead.
+     */
+    isFocused: focused,
+    /**
+     * @deprecated Use `vertical` instead.
+     */
+    isVertical: vertical,
     reset,
@@ -444,2 +457,3 @@ stepDown,
     value,
+    vertical,
     getContainerProps,
@@ -446,0 +460,0 @@ getFilledTrackProps,

package.json

 {
   "name": "@yamada-ui/slider",
-  "version": "1.3.4-dev-20241212095817",
+  "version": "1.3.4-dev-20241212101624",
   "description": "Yamada UI slider components",
@@ -40,9 +40,9 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "1.16.2-dev-20241212095817",
-    "@yamada-ui/form-control": "2.1.11-dev-20241212095817",
-    "@yamada-ui/use-controllable-state": "1.0.26-dev-20241212095817",
+    "@yamada-ui/core": "1.16.2-dev-20241212101624",
+    "@yamada-ui/form-control": "2.1.11-dev-20241212101624",
+    "@yamada-ui/use-controllable-state": "1.0.26-dev-20241212101624",
     "@yamada-ui/use-latest-ref": "1.0.3",
-    "@yamada-ui/use-pan-event": "1.0.28-dev-20241212095817",
-    "@yamada-ui/use-size": "1.0.26-dev-20241212095817",
-    "@yamada-ui/utils": "1.6.2-dev-20241212095817"
+    "@yamada-ui/use-pan-event": "1.0.28-dev-20241212101624",
+    "@yamada-ui/use-size": "1.0.26-dev-20241212101624",
+    "@yamada-ui/utils": "1.6.2-dev-20241212101624"
   },
@@ -49,0 +49,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

450004

increased by0.92%

Lines of code

5077

increased by1.72%

Dependency changes

• + Added@yamada-ui/core@1.16.2-dev-20241212101624(transitive)

• + Added@yamada-ui/form-control@2.1.11-dev-20241212101624(transitive)

• + Added@yamada-ui/portal@1.0.27-dev-20241212101624(transitive)

• + Added@yamada-ui/use-controllable-state@1.0.26-dev-20241212101624(transitive)

• + Added@yamada-ui/use-pan-event@1.0.28-dev-20241212101624(transitive)

• + Added@yamada-ui/use-size@1.0.26-dev-20241212101624(transitive)

• + Added@yamada-ui/utils@1.6.2-dev-20241212101624(transitive)

• + Added@yamada-ui/visually-hidden@1.0.20-dev-20241212101624(transitive)

• - Removed@yamada-ui/core@1.16.2-dev-20241212095817(transitive)

• - Removed@yamada-ui/form-control@2.1.11-dev-20241212095817(transitive)

• - Removed@yamada-ui/portal@1.0.27-dev-20241212095817(transitive)

• - Removed@yamada-ui/use-controllable-state@1.0.26-dev-20241212095817(transitive)

• - Removed@yamada-ui/use-pan-event@1.0.28-dev-20241212095817(transitive)

• - Removed@yamada-ui/use-size@1.0.26-dev-20241212095817(transitive)

• - Removed@yamada-ui/utils@1.6.2-dev-20241212095817(transitive)

• - Removed@yamada-ui/visually-hidden@1.0.20-dev-20241212095817(transitive)

• Updated@yamada-ui/core@1.16.2-dev-20241212101624

• Updated@yamada-ui/form-control@2.1.11-dev-20241212101624

• Updated@yamada-ui/use-controllable-state@1.0.26-dev-20241212101624

• Updated@yamada-ui/use-pan-event@1.0.28-dev-20241212101624

• Updated@yamada-ui/use-size@1.0.26-dev-20241212101624

• Updated@yamada-ui/utils@1.6.2-dev-20241212101624