reshaped 3.6.0-canary.0 → 3.6.0-canary.2

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

@@ -1,7 +1,8 @@
+import React from "react";
+import { expect, fireEvent, fn } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Slider from "../index.js";
 import View from "../../View/index.js";
-import FormControl from "../../FormControl/index.js";
 import Modal from "../../Modal/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 export default {
@@ -13,59 +14,272 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="range">
-			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100}/>
-		</Example.Item>
-		<div style={{ height: 2000 }}/>
-	</Example>);
-export const direction = () => (<Example>
-		<Example.Item title="vertical">
-			<View height="200px">
-				<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} orientation="vertical"/>
-			</View>
+export const base = {
+    name: "name, minName, maxName, range",
+    render: () => (<Example>
+			<Example.Item title="single, name">
+				<Slider name="slider-single" defaultValue={30}/>
+			</Example.Item>
+			<Example.Item title="range, name">
+				<Slider range name="slider-range" defaultMinValue={30} defaultMaxValue={85}/>
+			</Example.Item>
+			<Example.Item title="range, minName, maxName">
+				<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={85}/>
+			</Example.Item>
+			<div style={{ height: 2000 }}/>
+		</Example>),
+    play: ({ canvas }) => {
+        const inputs = canvas.getAllByRole("slider");
+        expect(inputs[0]).toHaveAttribute("name", "slider-single");
+        expect(inputs[1]).toHaveAttribute("name", "slider-range");
+        expect(inputs[2]).toHaveAttribute("name", "slider-range");
+        expect(inputs[3]).toHaveAttribute("name", "slider-min");
+        expect(inputs[4]).toHaveAttribute("name", "slider-max");
+    },
+};
+export const orientation = {
+    name: "orientation",
+    render: () => (<Example>
+			<Example.Item title="orientation: vertical">
+				<View height="200px">
+					<Slider range name="slider" defaultMinValue={30} defaultMaxValue={85} orientation="vertical"/>
+				</View>
+			</Example.Item>
 			<View height="2000px"/>
-		</Example.Item>
-	</Example>);
-export const step = () => (<Example>
-		<Example.Item title="float step">
-			<Slider name="slider" defaultValue={30} step={0.01}/>
-		</Example.Item>
-	</Example>);
-export const boundaries = () => (<Example>
-		<Example.Item title="min: 20, max: 30, value: 25">
-			<Slider name="slider" defaultValue={25} min={20} max={30}/>
-		</Example.Item>
-		<Example.Item title="step: 10, value: 4, renders as 0">
-			<Slider name="slider" defaultValue={4} step={10}/>
-		</Example.Item>
-	</Example>);
-export const status = () => (<Example>
-		<Example.Item title="disabled">
-			<Slider name="slider" defaultValue={30} disabled/>
-		</Example.Item>
-		<Example.Item title="step">
-			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={70} disabled/>
-		</Example.Item>
-	</Example>);
-export const customRender = () => (<Example>
-		<Example.Item title="custom render">
-			<FormControl>
-				<FormControl.Label>Slider value</FormControl.Label>
-				<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
-			</FormControl>
-		</Example.Item>
+		</Example>),
+};
+export const minMax = {
+    name: "min, max",
+    render: () => (<Example>
+			<Example.Item title="min, max">
+				<Slider name="name" min={50} max={70} defaultValue={60}/>
+			</Example.Item>
+			<Example.Item title="min, max, value < min">
+				<Slider name="name" min={50} max={70} defaultValue={30}/>
+			</Example.Item>
+			<Example.Item title="min, max, value > max">
+				<Slider name="name" min={50} max={70} defaultValue={80}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const inputs = canvas.getAllByRole("slider");
+        expect(inputs[0]).toHaveAttribute("min", "50");
+        expect(inputs[0]).toHaveAttribute("max", "70");
+        expect(inputs[0]).toHaveValue("60");
+        fireEvent.change(inputs[0], { target: { value: 30 } });
+        expect(inputs[0]).toHaveValue("50");
+        fireEvent.change(inputs[0], { target: { value: 80 } });
+        expect(inputs[0]).toHaveValue("70");
+        expect(inputs[1]).toHaveValue("50");
+        expect(inputs[2]).toHaveValue("70");
+    },
+};
+export const step = {
+    name: "step",
+    render: () => (<Example>
+			<Example.Item title="step: 5">
+				<Slider name="slider" defaultValue={30} step={5}/>
+			</Example.Item>
+
+			<Example.Item title="step: 5, defaultValue: 31, rounded down to 30">
+				<Slider name="slider" defaultValue={31} step={5}/>
+			</Example.Item>
+
+			<Example.Item title="step: 0.01, float">
+				<Slider name="slider" defaultValue={30} step={0.01}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const inputs = canvas.getAllByRole("slider");
+        expect(inputs[0]).toHaveValue("30");
+        fireEvent.change(inputs[0], { target: { value: 31 } });
+        expect(inputs[0]).toHaveValue("30");
+        fireEvent.change(inputs[0], { target: { value: 34 } });
+        expect(inputs[0]).toHaveValue("35");
+        expect(inputs[1]).toHaveValue("30");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<Slider name="slider" defaultValue={30} disabled/>
+			</Example.Item>
 
-		<Example.Item title="no tooltip">
-			<FormControl>
-				<FormControl.Label>Slider value</FormControl.Label>
-				<Slider name="slider" defaultValue={30} renderValue={false}/>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const testModal = () => {
-    const toggle = useToggle(true);
-    return (<Modal active={toggle.active} onClose={toggle.deactivate} position="end">
-			<Slider name="slider" defaultValue={30} renderValue={false}/>
-		</Modal>);
+			<Example.Item title="disabled, range">
+				<Slider name="slider" range defaultMinValue={30} defaultMaxValue={80} disabled/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const inputs = canvas.getAllByRole("slider");
+        expect(inputs[0]).toBeDisabled();
+        expect(inputs[1]).toBeDisabled();
+    },
+};
+export const renderValue = {
+    name: "renderValue",
+    render: () => (<Example>
+			<Example.Item title="renderValue: $">
+				<Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>
+			</Example.Item>
+			<Example.Item title="renderValue: false">
+				<Slider name="name" defaultValue={50} renderValue={false}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const tooltip = canvas.getByText("$50");
+        const hiddenTooltip = canvas.queryByText("50");
+        expect(tooltip).toBeInTheDocument();
+        expect(hiddenTooltip).not.toBeInTheDocument();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, onChange, onChangeCommit",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<View paddingTop={10}>
+			<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("slider");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("51");
+    },
+};
+export const value = {
+    name: "value, onChange, onChangeCommit",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<View paddingTop={10}>
+			<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("slider");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("50");
+    },
+};
+export const rangeDefaultValue = {
+    name: "range, defaultValue, onChange, onChangeCommit",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<View paddingTop={10}>
+			<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
+    play: async ({ canvas, args }) => {
+        const [minInput, maxInput] = canvas.getAllByRole("slider");
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            minValue: 51,
+            maxValue: 70,
+            name: "test-name",
+            minName: "test-name",
+            maxName: "test-name",
+        });
+        expect(minInput).toHaveValue("51");
+        expect(maxInput).toHaveValue("70");
+    },
+};
+export const rangeValue = {
+    name: "range, value, onChange, onChangeCommit, minName, maxName",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<View paddingTop={10}>
+			<Slider range minName="test-name-min" maxName="test-name-max" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
+    play: async ({ canvas, args }) => {
+        const [minInput, maxInput] = canvas.getAllByRole("slider");
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            minValue: 51,
+            maxValue: 70,
+            minName: "test-name-min",
+            maxName: "test-name-max",
+        });
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Slider name="name" className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const testForm = {
+    name: "test: form onChange",
+    args: {
+        handleFormChange: fn(),
+        handleFormInit: fn(),
+    },
+    render: (args) => {
+        const formRef = React.useRef(null);
+        const [data, setData] = React.useState([]);
+        const handleChange = (e) => {
+            const formData = new FormData(e.currentTarget);
+            const nextState = [...formData.entries()];
+            args.handleFormChange({ formData: nextState });
+            setData(nextState);
+        };
+        React.useEffect(() => {
+            const formData = new FormData(formRef.current);
+            const nextState = [...formData.entries()];
+            args.handleFormInit({ formData: nextState });
+            setData(nextState);
+        }, []);
+        return (<View paddingTop={10} gap={4}>
+				<form onChange={handleChange} ref={formRef}>
+					<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={50}/>
+				</form>
+
+				{data.map((v) => v.join(": ")).join(", ")}
+			</View>);
+    },
+    play: async () => {
+        /**
+         * Placeholder
+         *
+         * No way to test dragging here without calling fireEvent.change
+         * Which defeats the purpose of testing custom emitted events
+         *
+         * Test this behavior manually in Storybook by dragging the thumbs
+         */
+    },
+};
+export const testSwipe = {
+    name: "test: prevents parent swipe",
+    render: () => {
+        const toggle = useToggle(true);
+        return (<Modal active={toggle.active} onClose={toggle.deactivate} position="end">
+				<View gap={4}>
+					<Modal.Title>Modal</Modal.Title>
+					<Slider name="slider" defaultValue={30}/>
+				</View>
+			</Modal>);
+    },
 };

package/dist/components/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/helpers.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import Expandable from "../_private/Expandable/index.js";
 import View from "../View/index.js";
 import Text from "../Text/index.js";

package/dist/components/Switch/Switch.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 { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";

package/dist/components/Table/Table.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables } from "../../utilities/props.js";
 import getWidthStyles from "../../styles/width/index.js";
 import getMinWidthStyles from "../../styles/minWidth/index.js";
 import s from "./Table.module.css";
+import useFadeSide from "../../hooks/_private/useFadeSide.js";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;
     const width = props.width === "auto" ? "0px" : props.width;
@@ -40,9 +41,11 @@ const TableHead = (props) => {
 };
 const Table = (props) => {
     const { children, border, columnBorder, className, attributes } = props;
-    const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"]);
+    const rootRef = React.useRef(null);
+    const fadeSide = useFadeSide(rootRef);
+    const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"]);
     const [firstChild] = React.Children.toArray(children);
-    return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
+    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
                 (firstChild.type === TableBody || firstChild.type === TableHead) ? (children) : (_jsx(TableBody, { children: children })) }) }));
 };
 Table.Cell = TableCell;

package/dist/components/Table/Table.module.css

@@ -1 +1 @@
-.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-raised)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}
+@property --rs-table-fade-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-table-fade-end{syntax:"<length>";initial-value:0;inherits:false}.root{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-table-fade-start),#000 calc(100% - var(--rs-table-fade-end)),transparent 100%);overflow:auto;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-table-fade-start,--rs-table-fade-end}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.row[tabindex]{cursor:pointer}[data-rs-keyboard] .row:focus{box-shadow:var(--rs-focus-inset-shadow);outline:none;z-index:var(--rs-z-index-raised)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.head+.body .row:first-child .cell,.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),24%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}.--fade-start,[dir=rtl] .--fade-end{--rs-table-fade-start:var(--rs-unit-x4)}.--fade-end,[dir=rtl] .--fade-start{--rs-table-fade-end:var(--rs-unit-x4)}

package/dist/components/Tabs/TabsItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";

package/dist/components/Tabs/TabsList.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, throttle } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import useRTL from "../../hooks/useRTL.js";
 import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
+import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
@@ -24,7 +25,7 @@ const TabsList = (props) => {
     const { children, className, attributes } = props;
     const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
     const [rtl] = useRTL();
-    const [fadeSide, setFadeSide] = React.useState(null);
+    const fadeSide = useFadeSide(elScrollableRef);
     const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
     const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
     const handleNextClick = () => {
@@ -105,38 +106,6 @@ const TabsList = (props) => {
             return;
         setSelection({ ...selectionStyle, status: "animated" });
     }, [selection]);
-    useIsomorphicLayoutEffect(() => {
-        const elScrollable = elScrollableRef.current;
-        if (!elScrollable || direction === "column")
-            return;
-        const updateArrowNav = () => {
-            const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
-            if (!isScrollable)
-                setFadeSide(null);
-            // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
-            const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
-            const cutOffStart = scrollLeft > 1;
-            const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
-            if (cutOffEnd && cutOffStart)
-                return setFadeSide("both");
-            if (cutOffStart)
-                return setFadeSide("start");
-            if (cutOffEnd)
-                return setFadeSide("end");
-        };
-        const debouncedUpdateArrowNav = throttle(updateArrowNav, 16);
-        // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
-        // For example: And edge case inside the complex flexbox layout
-        requestAnimationFrame(() => {
-            updateArrowNav();
-        });
-        window.addEventListener("resize", debouncedUpdateArrowNav);
-        elScrollable.addEventListener("scroll", debouncedUpdateArrowNav);
-        return () => {
-            window.removeEventListener("resize", debouncedUpdateArrowNav);
-            elScrollable.removeEventListener("scroll", debouncedUpdateArrowNav);
-        };
-    }, [rtl]);
     return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", ref: hotkeysRef, children: [React.Children.map(children, (child, index) => {
                             if (!React.isValidElement(child))
                                 return null;

package/dist/components/Tabs/TabsPanel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
 const TabsPanel = (props) => {

package/dist/components/Text/Text.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import getTextAlignStyles from "../../styles/textAlign/index.js";
 import s from "./Text.module.css";
 const tagMap = {

package/dist/components/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import { useFormControl } from "../FormControl/index.js";
 import Aligner from "../_private/Aligner/index.js";
 import useElementId from "../../hooks/useElementId.js";

package/dist/components/TextField/TextField.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";

package/dist/components/Theme/Theme.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 useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { ThemeContext } from "./Theme.context.js";
 import { getRootThemeEl } from "./Theme.utilities.js";

package/dist/components/Timeline/Timeline.js

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

package/dist/components/Toast/ToastContainer.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 { checkKeyboardMode, TrapFocus } from "../../utilities/a11y/index.js";
 import Toast from "./Toast.js";

package/dist/components/Toast/ToastRegion.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 { focusableSelector } from "../../utilities/a11y/index.js";
 import ToastContainer from "./ToastContainer.js";
 import ToastContext from "./Toast.context.js";

package/dist/components/View/View.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";

package/dist/components/_private/Aligner/Aligner.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It relies on using a data-rs-aligner-target attribute in other components and works based
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames } from "../../../utilities/props.js";
 import s from "./Aligner.module.css";
 const Aligner = (props) => {
     const { side: passedSide = "all", children, className, attributes } = props;

package/dist/components/_private/Expandable/Expandable.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 useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./Expandable.module.css";

package/dist/components/_private/HiddenInput/HiddenInput.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 "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;

package/dist/hooks/_private/useFadeSide.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const useFadeSide: (scrollableRef: React.RefObject<HTMLElement | null>, options?: {
+    disabled?: boolean;
+}) => "start" | "end" | "both" | null;
+export default useFadeSide;

package/dist/hooks/_private/useFadeSide.js

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import useRTL from "../useRTL.js";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+const useFadeSide = (scrollableRef, options = {}) => {
+    const { disabled } = options;
+    const [rtl] = useRTL();
+    const [fadeSide, setFadeSide] = React.useState(null);
+    const updateFade = React.useCallback(() => {
+        const elScrollable = scrollableRef.current;
+        if (!elScrollable)
+            return;
+        const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
+        if (!isScrollable)
+            setFadeSide(null);
+        // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
+        const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
+        const cutOffStart = scrollLeft > 1;
+        const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
+        if (cutOffEnd && cutOffStart)
+            return setFadeSide("both");
+        if (cutOffStart)
+            return setFadeSide("start");
+        if (cutOffEnd)
+            return setFadeSide("end");
+    }, [rtl, scrollableRef]);
+    useIsomorphicLayoutEffect(() => {
+        const elScrollable = scrollableRef.current;
+        if (!elScrollable)
+            return;
+        if (disabled)
+            return;
+        const debouncedUpdate = rafThrottle(updateFade);
+        // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
+        // For example: And edge case inside the complex flexbox layout
+        requestAnimationFrame(() => updateFade());
+        window.addEventListener("resize", debouncedUpdate);
+        elScrollable.addEventListener("scroll", debouncedUpdate);
+        return () => {
+            window.removeEventListener("resize", debouncedUpdate);
+            elScrollable.removeEventListener("scroll", debouncedUpdate);
+        };
+    }, [rtl, disabled]);
+    return fadeSide;
+};
+export default useFadeSide;