reshaped 3.6.0-canary.0 → 3.6.0-canary.1

package/dist/components/ScrollArea/tests/ScrollArea.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { userEvent, expect, waitFor, fn } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import ScrollArea from "../index.js";
 import View from "../../View/index.js";
@@ -16,10 +17,10 @@ export default {
         },
     },
 };
-export const direction = {
-    name: "direction",
+export const base = {
+    name: "base",
     render: () => (<Example>
-			<Example.Item title="vertical">
+			<Example.Item title="vertical scroll">
 				<ScrollArea height="100px" scrollbarDisplay="visible">
 					<View backgroundColor="elevation-base" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
@@ -33,7 +34,7 @@ export const direction = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="horizontal">
+			<Example.Item title="horizontal scroll">
 				<ScrollArea height="100px" scrollbarDisplay="visible">
 					<View backgroundColor="elevation-base" padding={4} width="150%" height="100px">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
@@ -42,7 +43,7 @@ export const direction = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="horizontal, vertical">
+			<Example.Item title="horizontal and vertical scroll">
 				<ScrollArea height="100px" scrollbarDisplay="visible">
 					<View backgroundColor="elevation-base" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
@@ -57,12 +58,12 @@ export const direction = {
 			</Example.Item>
 		</Example>),
 };
-export const visibility = {
+export const scrollbarDisplay = {
     name: "scrollbarDisplay",
     render: () => (<Example>
-			<Example.Item title="visibility: hover">
+			<Example.Item title="scrollbarDisplay: hover">
 				<ScrollArea height="100px">
-					<View backgroundColor="elevation-base" padding={4}>
+					<View backgroundColor="elevation-base" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -74,9 +75,9 @@ export const visibility = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="visibility: hidden">
+			<Example.Item title="scrollbarDisplay: hidden">
 				<ScrollArea height="100px" scrollbarDisplay="hidden">
-					<View backgroundColor="elevation-base" padding={4}>
+					<View backgroundColor="elevation-base" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -88,9 +89,9 @@ export const visibility = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="visibility: visible">
+			<Example.Item title="scrollbarDisplay: visible">
 				<ScrollArea height="100px" scrollbarDisplay="visible">
-					<View backgroundColor="elevation-base" padding={4}>
+					<View backgroundColor="elevation-base" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -103,26 +104,129 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
-export const composition = {
-    name: "composition",
+export const height = {
+    name: "height, maxHeight",
     render: () => (<Example>
-			<Example.Item title="nested">
-				<ScrollArea height="100px">
-					<View padding={4} paddingInline={16}>
-						<ScrollArea height="200px">
-							{Array(20)
+			<Example.Item title="height: 80px">
+				<ScrollArea height="80px">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+
+			<Example.Item title="responsive height: s 80px, m: 120px">
+				<ScrollArea height={{ s: "80px", m: "120px" }}>
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+
+			<Example.Item title="maxHeight: 80px">
+				<ScrollArea maxHeight="80px">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+
+			<Example.Item title="responsive max height: s 80px, m: 200px">
+				<ScrollArea maxHeight={{ s: "80px", m: "200px" }}>
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
+};
+export const onScroll = {
+    name: "ref, onScroll",
+    args: {
+        handleScroll: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        return (<View gap={4}>
+				<View.Item>
+					<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
+				</View.Item>
+				<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
+					<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</View>);
+    },
+    play: async ({ canvas, args }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleScroll).toHaveBeenCalledTimes(1);
+            // x value is flaky, so only testing y here
+            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</ScrollArea>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const testNested = {
+    name: "test: nested",
+    render: () => (<ScrollArea height="100px" scrollbarDisplay="visible">
+			<View padding={4} paddingInline={16}>
+				<ScrollArea height="200px" scrollbarDisplay="visible">
+					{Array(20)
             .fill("")
             .map((_, index) => {
             return <div key={index}>Item {index + 1}</div>;
         })}
-						</ScrollArea>
-					</View>
 				</ScrollArea>
-			</Example.Item>
-		</Example>),
+			</View>
+		</ScrollArea>),
 };
-export const dynamicHeight = {
-    name: "composition, dynamic height change",
+export const testDynamicHeight = {
+    name: "test: dynamic height change",
     render: () => {
         const [count, setCount] = React.useState(10);
         return (<View gap={4}>
@@ -137,9 +241,4 @@ export const dynamicHeight = {
 				</ScrollArea>
 			</View>);
     },
-    // TODO: After Using play(), Storybook makes the scroll lag, but not when triggered manually in the browser
-    // play: async ({ canvas }) => {
-    // 	const trigger = canvas.getAllByRole("button")[0];
-    // 	await userEvent.click(trigger);
-    // },
 };

package/dist/components/Select/Select.js

@@ -6,7 +6,7 @@ import { useFormControl } from "../FormControl/index.js";
 import Actionable from "../Actionable/index.js";
 import Text from "../Text/index.js";
 import IconArrow from "../../icons/ChevronVertical.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Select.module.css";
 const Select = (props) => {

package/dist/components/Skeleton/Skeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./Skeleton.module.css";
 const Skeleton = (props) => {

package/dist/components/Slider/Slider.types.d.ts

@@ -4,23 +4,49 @@ export type SingleChangeArgs = {
     minValue?: never;
     maxValue?: never;
     name: string;
+    minName?: never;
+    maxName?: never;
 };
 export type RangeChangeArgs = {
     value?: never;
     minValue: number;
     maxValue: number;
     name: string;
+    minName?: never;
+    maxName?: never;
 };
-type RangeSelectionProps = {
-    range: true;
-    onChange?: (args: RangeChangeArgs) => void;
-    onChangeCommit?: (args: RangeChangeArgs) => void;
+export type NameRangeChangeArgs = {
+    value?: never;
+    minValue: number;
+    maxValue: number;
+    name?: never;
+    minName: string;
+    maxName: string;
 };
 type SingleSelectionProps = {
     range?: false;
+    name: string;
+    minName?: never;
+    maxName?: never;
     onChange?: (args: SingleChangeArgs) => void;
     onChangeCommit?: (args: SingleChangeArgs) => void;
 };
+type RangeSelectionProps = {
+    range: true;
+    name: string;
+    minName?: never;
+    maxName?: never;
+    onChange?: (args: RangeChangeArgs) => void;
+    onChangeCommit?: (args: RangeChangeArgs) => void;
+};
+type NameRangeSelectionProps = {
+    range: true;
+    name?: never;
+    minName: string;
+    maxName: string;
+    onChange?: (args: RangeChangeArgs) => void;
+    onChangeCommit?: (args: RangeChangeArgs) => void;
+};
 type ControlledSingleProps = {
     value: number;
     defaultValue?: never;
@@ -42,7 +68,6 @@ type UncontrolledRangeProps = {
     defaultMaxValue?: number;
 };
 type BaseProps = {
-    name: string;
     step?: number;
     disabled?: boolean;
     min?: number;
@@ -54,8 +79,8 @@ type BaseProps = {
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };
-export type ControlledProps = BaseProps & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & RangeSelectionProps));
-export type UncontrolledProps = BaseProps & ((UncontrolledSingleProps & SingleSelectionProps) | (UncontrolledRangeProps & RangeSelectionProps));
+export type ControlledProps = BaseProps & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & (RangeSelectionProps | NameRangeSelectionProps)));
+export type UncontrolledProps = BaseProps & ((UncontrolledSingleProps & SingleSelectionProps) | (UncontrolledRangeProps & (RangeSelectionProps | NameRangeSelectionProps)));
 export type Props = ControlledProps | UncontrolledProps;
 export type DefaultProps = {
     min: number;
@@ -70,6 +95,7 @@ export type ThumbProps = {
     position: number;
     onChange: (value: number, options?: {
         commit?: boolean;
+        native?: boolean;
     }) => void;
     onDragStart: (e: React.TouchEvent | React.MouseEvent) => void;
     max: number;
@@ -78,5 +104,6 @@ export type ThumbProps = {
     orientation: NonNullable<BaseProps["orientation"]>;
     renderValue?: BaseProps["renderValue"];
     tooltipRef: React.RefObject<HTMLDivElement | null>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
 };
 export {};

package/dist/components/Slider/SliderControlled.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
+import { classNames } from "../../utilities/props.js";
+import { enableUserSelect, disableUserSelect, triggerChangeEvent } from "../../utilities/dom/index.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import useRTL from "../../hooks/useRTL.js";
 import useElementId from "../../hooks/useElementId.js";
@@ -19,11 +19,15 @@ const SliderControlled = (props) => {
     const vertical = orientation === "vertical";
     const minValue = range && props.minValue !== undefined ? applyStepToValue(props.minValue, step) : undefined;
     const maxValue = applyStepToValue(range ? props.maxValue : props.value, step);
+    const minName = props.minName ?? props.name;
+    const maxName = props.maxName ?? props.name;
     const barRef = React.useRef(null);
     const minRef = React.useRef(null);
     const maxRef = React.useRef(null);
     const minTooltipRef = React.useRef(null);
     const maxTooltipRef = React.useRef(null);
+    const minInputRef = React.useRef(null);
+    const maxInputRef = React.useRef(null);
     const [draggingId, setDraggingId] = React.useState(null);
     const [rtl] = useRTL();
     const formControl = useFormControl();
@@ -68,7 +72,7 @@ const SliderControlled = (props) => {
         const tooltipLeftSide = thumbRect && draggingRect && thumbRect.left - draggingRect.width / 2;
         const tooltipRightSide = thumbRect && draggingRect && thumbRect.left + draggingRect.width / 2;
         // Crosses the left slider boundary
-        if (tooltipLeftSide && barLeftSide && tooltipLeftSide < barLeftSide - 8) {
+        if (tooltipLeftSide && barLeftSide && tooltipLeftSide < barLeftSide) {
             nextTooltipOffset = draggingRect.width / 2 - 8;
         }
         // Crosses the right slider boundary
@@ -80,30 +84,38 @@ const SliderControlled = (props) => {
             tooltipEl.style.setProperty("--rs-slider-tooltip-offset", `${nextTooltipOffset || 0}px`);
         }
     }, [minId, vertical]);
-    const handleMinChange = React.useCallback((value, options) => {
+    const handleMinChange = React.useCallback((value, options = {}) => {
         if (!range)
             return;
-        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        const args = { minValue: value, maxValue, name, minName, maxName };
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        method?.({ minValue: value, maxValue, name });
-    }, [maxValue, name, range, onChangeCommitRef, onChangeRef]);
-    const handleMaxChange = React.useCallback((value, options) => {
-        if (range) {
-            const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
-            // Manually controlled resolving of single/range handlers
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            method?.({ minValue: minValue, maxValue: value, name });
-            return;
-        }
-        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        if (options.commit)
+            onChangeCommitRef.current?.(args);
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.native)
+            onChangeRef.current?.(args);
+        triggerChangeEvent(minInputRef.current, value.toString());
+    }, [maxValue, name, minName, maxName, range, onChangeCommitRef, onChangeRef]);
+    const handleMaxChange = React.useCallback((value, options = {}) => {
+        const args = range
+            ? { minValue: minValue, maxValue: value, name, minName, maxName }
+            : { value, name };
+        // Manually controlled resolving of single/range handlers
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.commit)
+            onChangeCommitRef.current?.(args);
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        method?.({ value, name });
-    }, [minValue, name, range, onChangeRef, onChangeCommitRef]);
+        if (options.native)
+            onChangeRef.current?.(args);
+        triggerChangeEvent(maxInputRef.current, value.toString());
+    }, [minValue, name, minName, maxName, range, onChangeRef, onChangeCommitRef]);
     const handleMouseDown = ({ nativeEvent }) => {
         if (disabled)
             return;
@@ -213,7 +225,7 @@ const SliderControlled = (props) => {
     _jsxs("div", { ...attributes, className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: [_jsx("div", { className: s.bar, ref: barRef, children: _jsx("div", { className: s.selection, style: {
                         "--rs-slider-selection-start": `${minPercentPosition || 0}%`,
                         "--rs-slider-selection-size": `${maxPercentPosition - (minPercentPosition || 0)}%`,
-                    } }) }), _jsxs("div", { className: s.thumbs, children: [minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step, orientation: orientation })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step, orientation: orientation })] })] }));
+                    } }) }), _jsxs("div", { className: s.thumbs, children: [minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: minName, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, inputRef: minInputRef, renderValue: renderValue, step: step, orientation: orientation })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: maxName, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, inputRef: maxInputRef, renderValue: renderValue, step: step, orientation: orientation })] })] }));
 };
 SliderControlled.displayName = "SliderControlled";
 export default SliderControlled;

package/dist/components/Slider/SliderThumb.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
 import { getPrecision } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
 const SliderThumb = React.forwardRef((props, ref) => {
-    const { name, value, disabled, active, position, max, min, step, onChange, onDragStart, renderValue, tooltipRef, orientation, } = props;
+    const { name, value, disabled, active, position, max, min, step, onChange, onDragStart, renderValue, tooltipRef, inputRef, orientation, } = props;
     const id = React.useId();
     const thumbClassNames = classNames(s.thumb, active && s["thumb--active"]);
     const precision = getPrecision(step);
     const tooltipValue = renderValue ? renderValue({ value }) : value.toFixed(precision);
     const handleChange = (e) => {
-        onChange(+e.target.value);
+        onChange(+e.target.value, { native: true });
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: renderValue !== false && (_jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation, ref: inputRef }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: renderValue !== false && (_jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) })) })] }));
 });
 SliderThumb.displayName = "SliderThumb";
 export default SliderThumb;

package/dist/components/Slider/SliderUncontrolled.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import SliderControlled from "./SliderControlled.js";
+const normalizeValue = (value, min, max) => Math.min(Math.max(value, min), max);
 const SliderUncontrolled = (props) => {
     const { min, max, onChange, range } = props;
     const defaultMinValue = ("defaultMinValue" in props && props.defaultMinValue !== undefined && props.defaultMinValue) ||
@@ -10,8 +11,8 @@ const SliderUncontrolled = (props) => {
     const defaultMaxValue = ("defaultMaxValue" in props && props.defaultMaxValue !== undefined && props.defaultMaxValue) ||
         ("defaultValue" in props && props.defaultValue !== undefined && props.defaultValue) ||
         (range ? max : min);
-    const [minValue, setMinValue] = React.useState(defaultMinValue);
-    const [maxValue, setMaxValue] = React.useState(defaultMaxValue);
+    const [minValue, setMinValue] = React.useState(normalizeValue(defaultMinValue, min, max));
+    const [maxValue, setMaxValue] = React.useState(normalizeValue(defaultMaxValue, min, max));
     const handleSingleChange = (args) => {
         if (range)
             return;

package/dist/components/Slider/tests/Slider.stories.d.ts

@@ -1,6 +1,9 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { Mock } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").SliderProps>;
+    component: React.FC<import("./..").SliderProps>;
     parameters: {
         iframe: {
             url: string;
@@ -8,10 +11,37 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const direction: () => import("react").JSX.Element;
-export declare const step: () => import("react").JSX.Element;
-export declare const boundaries: () => import("react").JSX.Element;
-export declare const status: () => import("react").JSX.Element;
-export declare const customRender: () => import("react").JSX.Element;
-export declare const testModal: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const orientation: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const minMax: StoryObj;
+export declare const step: StoryObj;
+export declare const disabled: StoryObj;
+export declare const renderValue: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: Mock;
+    handleChangeCommit: Mock;
+}>;
+export declare const value: StoryObj<{
+    handleChange: Mock;
+    handleChangeCommit: Mock;
+}>;
+export declare const rangeDefaultValue: StoryObj<{
+    handleChange: Mock;
+    handleChangeCommit: Mock;
+}>;
+export declare const rangeValue: StoryObj<{
+    handleChange: Mock;
+    handleChangeCommit: Mock;
+}>;
+export declare const className: StoryObj;
+export declare const testForm: StoryObj<{
+    handleFormChange: Mock;
+    handleFormInit: Mock;
+}>;
+export declare const testSwipe: {
+    name: string;
+    render: () => React.JSX.Element;
+};