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

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;
+};

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/TabsContext.d.ts

@@ -4,13 +4,13 @@ export declare const TabsProvider: React.Provider<T.Context>;
 export declare const useTabs: (value?: string) => {
     panelId: string | undefined;
     buttonId: string | undefined;
+    variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
     name?: string | undefined;
+    direction?: "column" | "row" | undefined;
     onChange?: ((args: {
         value: string;
         name?: string;
     }) => void) | undefined;
-    variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
-    direction?: "column" | "row" | undefined;
     itemWidth?: "equal" | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;

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) => {