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

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

@@ -1,4 +1,6 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
+import { sleep } from "../../../utilities/helpers.js";
 import View from "../../View/index.js";
 import Popover from "../index.js";
 import Tooltip from "../../Tooltip/index.js";
@@ -26,99 +28,206 @@ const Demo = (props) => {
 			</Popover.Content>
 		</Popover>);
 };
-export const position = () => (<Example>
-		<Example.Item title="position: bottom">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="bottom-start"/>
-				<Demo position="bottom"/>
-				<Demo position="bottom-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="top-start"/>
-				<Demo position="top"/>
-				<Demo position="top-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: start">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="start-top"/>
-				<Demo position="start"/>
-				<Demo position="start-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: end">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="end-top"/>
-				<Demo position="end"/>
-				<Demo position="end-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title={["position: bottom", "changes to top-start because it doesn't fit"]}>
-			<View align="center">
-				<Demo position="bottom"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const width = () => (<Example>
-		<Example.Item title="width: 400">
-			<Demo width="400px"/>
-		</Example.Item>
-		<Example.Item title="width: 100%">
-			<Demo width="100%"/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: headless">
-			<Popover variant="headless">
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: bottom">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="bottom-start"/>
+					<Demo position="bottom"/>
+					<Demo position="bottom-end"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="top-start"/>
+					<Demo position="top"/>
+					<Demo position="top-end"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: start">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="start-top"/>
+					<Demo position="start"/>
+					<Demo position="start-bottom"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: end">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="end-top"/>
+					<Demo position="end"/>
+					<Demo position="end-bottom" defaultActive/>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const widthNumber = {
+    name: "width: px",
+    render: () => <Demo width="400px" defaultActive/>,
+};
+export const widthFull = {
+    name: "width: 100%",
+    render: () => <Demo width="100%" defaultActive/>,
+};
+export const padding = {
+    name: "padding",
+    render: () => (<Example>
+			<Example.Item title="padding: 0">
+				<Demo padding={0}/>
+			</Example.Item>
+			<Example.Item title="padding: 6">
+				<Demo padding={6} defaultActive/>
+			</Example.Item>
+		</Example>),
+};
+export const elevation = {
+    name: "elevation",
+    render: () => (<Example>
+			<Example.Item title="elevation: raised">
+				<Demo elevation="raised" defaultActive/>
+			</Example.Item>
+		</Example>),
+};
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Content");
+        // Wait for the open animation
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Content");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Content");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const dismissible = {
+    name: "dismissible, onClose, className, attributes, closeAriaLabel",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
+					Content
+				</Popover.Dismissible>
+			</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        await sleep(300);
+        const dismissible = canvas.getByTestId("test-id");
+        const closeButton = within(dismissible).getByRole("button");
+        expect(dismissible).toHaveClass("test-classname");
+        expect(closeButton).toHaveAccessibleName("Close");
+        await userEvent.click(closeButton);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
+        });
+        await sleep(300);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Popover active>
 				<Popover.Trigger>
 					{(attributes) => <Button attributes={attributes}>Open</Button>}
 				</Popover.Trigger>
-				<Popover.Content>
-					<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="neutral-faded"/>
+				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+					Content
 				</Popover.Content>
 			</Popover>
-		</Example.Item>
-	</Example>);
-export const padding = () => (<Example>
-		<Example.Item title="padding: 0">
-			<Demo padding={0}/>
-		</Example.Item>
-		<Example.Item title="padding: 6">
-			<Demo padding={6}/>
-		</Example.Item>
-	</Example>);
-export const triggerType = () => (<Example>
-		<Example.Item title="triggerType: hover">
-			<Demo triggerType="hover"/>
-		</Example.Item>
-	</Example>);
-export const dismissible = () => {
-    return (<Example>
-			<Example.Item title="with dismissible">
-				<Popover>
-					<Popover.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</Popover.Trigger>
-					<Popover.Content>
-						<Popover.Dismissible closeAriaLabel="Close" align="center">
-							Popover content
-						</Popover.Dismissible>
-					</Popover.Content>
-				</Popover>
-			</Example.Item>
-		</Example>);
+		</div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const menu = await canvas.findByTestId("test-id");
+        expect(menu).toHaveClass("test-classname");
+    },
 };
-export const edgeCases = () => (<Example>
-		<Example.Item title="Popover with tooltip">
+export const testWithTooltip = {
+    name: "test: with tooltip",
+    render: () => (<View paddingTop={10}>
 			<Tooltip position="top" text="Hello">
 				{(tooltipAttributes) => (<Popover position="bottom">
 						<Popover.Trigger>
 							{(attributes) => (<Button attributes={{
-                ...attributes,
-                ...tooltipAttributes,
-            }}>
+                    ...attributes,
+                    ...tooltipAttributes,
+                }}>
 									Open
 								</Button>)}
 						</Popover.Trigger>
@@ -130,5 +239,20 @@ export const edgeCases = () => (<Example>
 						</Popover.Content>
 					</Popover>)}
 			</Tooltip>
-		</Example.Item>
-	</Example>);
+		</View>),
+};
+export const variant = {
+    name: "variant [deprecated]",
+    render: () => (<Example>
+			<Example.Item title="variant: headless">
+				<Popover variant="headless" defaultActive position="bottom-start">
+					<Popover.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</Popover.Trigger>
+					<Popover.Content>
+						<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
+					</Popover.Content>
+				</Popover>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Progress/Progress.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 s from "./Progress.module.css";
 const Progress = (props) => {
     const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import usePrevious from "../../hooks/_private/usePrevious.js";
 import s from "./ProgressIndicator.module.css";

package/dist/components/Radio/Radio.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
 import Text from "../Text/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";

package/dist/components/Reshaped/Reshaped.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
 import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";

package/dist/components/Resizable/Resizable.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import useDrag from "../../hooks/_private/useDrag.js";
 import View from "../View/index.js";
 import s from "./Resizable.module.css";

package/dist/components/Scrim/Scrim.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
     const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import getHeightStyles from "../../styles/height/index.js";
 import getMaxHeightStyles from "../../styles/maxHeight/index.js";
@@ -70,7 +70,7 @@ const ScrollArea = forwardRef((props, ref) => {
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const scrollableRef = React.useRef(null);
-    const contentRef = React.useRef(null);
+    const rootRef = React.useRef(null);
     const heightStyles = getHeightStyles(height);
     const maxHeightStyles = getMaxHeightStyles(maxHeight);
     const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, className);
@@ -124,14 +124,14 @@ const ScrollArea = forwardRef((props, ref) => {
         updateScroll();
     }, [updateScroll]);
     useIsomorphicLayoutEffect(() => {
-        const contentEl = contentRef.current;
-        if (!contentEl)
+        const rootEl = rootRef.current;
+        if (!rootEl)
             return;
         const observer = new ResizeObserver(updateScroll);
-        observer.observe(contentEl);
+        observer.observe(rootEl);
         return () => observer.disconnect();
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, style: { ...heightStyles?.variables }, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: contentClassNames, ref: contentRef, style: { ...maxHeightStyles?.variables }, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: { ...heightStyles?.variables }, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: contentClassNames, style: { ...maxHeightStyles?.variables }, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

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;