reshaped 1.0.1 → 2.2.0

package/components/Select/tests/Select.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const selection: () => React.JSX.Element;
+export declare const variants: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const error: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const triggerComposition: () => React.JSX.Element;
+export declare const formControl: () => React.JSX.Element;

package/components/Select/tests/Select.stories.js

@@ -0,0 +1,165 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+import Select from "../index.js";
+import View from "../../View/index.js";
+import DropdownMenu from "../../DropdownMenu/DropdownMenu.js";
+import FormControl from "../../FormControl/index.js";
+export default { title: "Components/Select" };
+export const selection = () => (<Example>
+		<Example.Item title="unselected, placeholder">
+			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]}/>
+		</Example.Item>
+
+		<Example.Item title="selected, controlled">
+			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" defaultValue="dog" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]}/>
+		</Example.Item>
+
+		<Example.Item title="selected, uncontrolled">
+			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" value="dog" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]}/>
+		</Example.Item>
+	</Example>);
+export const variants = () => (<Example>
+		<Example.Item title="variant: faded">
+			<Select variant="faded" name="animal" placeholder="Select an animal" value="dog" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="variant: headless">
+			<Select variant="headless" name="animal" placeholder="Select an animal" value="dog" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: medium, slot">
+			<Select size="medium" name="animal" startSlot={<Placeholder h={24}/>} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: medium, icon">
+			<Select size="medium" name="animal" icon={IconZap} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: large, slot">
+			<Select size="large" name="animal" startSlot={<Placeholder h={24}/>} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: large, icon">
+			<Select size="large" name="animal" icon={IconZap} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: xlarge, slot">
+			<Select size="xlarge" name="animal" startSlot={<Placeholder h={24}/>} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: xlarge, icon">
+			<Select size="xlarge" name="animal" icon={IconZap} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+
+		<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
+			<Select name="animal" size={{ s: "xlarge", m: "medium" }} options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<Select disabled name="animal" placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const error = () => (<Example>
+		<Example.Item title="error">
+			<Select name="animal" hasError placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const icon = () => (<Example>
+		<Example.Item title="icon">
+			<Select name="animal" placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} icon={IconZap} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const slots = () => (<Example>
+		<Example.Item title="startSlot">
+			<Select name="animal" placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]} startSlot={<View height="20px" width="20px" backgroundColor="neutral" borderRadius="small"/>} inputAttributes={{ "aria-label": "test select" }}/>
+		</Example.Item>
+	</Example>);
+export const triggerComposition = () => (<Example>
+		<Example.Item title="select with dropdown menu">
+			<DropdownMenu width="trigger">
+				<DropdownMenu.Trigger>
+					{(attributes) => (<Select name="animal" placeholder="Select an animal" startSlot={<View height="20px" width="20px" backgroundColor="neutral" borderRadius="small"/>} inputAttributes={attributes}>
+							Hello
+						</Select>)}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+					<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+		</Example.Item>
+	</Example>);
+export const formControl = () => (<Example>
+		<Example.Item title={["with helper", "error is hidden"]}>
+			<FormControl>
+				<FormControl.Label>Name</FormControl.Label>
+				<Select name="animal" placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]}/>
+				<FormControl.Helper>Helper</FormControl.Helper>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+		<Example.Item title={["with error"]}>
+			<FormControl hasError>
+				<FormControl.Label>Name</FormControl.Label>
+				<Select name="animal" placeholder="Select an animal" options={[
+        { label: "Dog", value: "dog" },
+        { label: "Turtle", value: "turtle" },
+    ]}/>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+	</Example>);

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Skeleton.types";
+declare const Skeleton: (props: T.Props) => React.JSX.Element;
+export default Skeleton;

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./Skeleton.module.css";
+const Skeleton = (props) => {
+    const { borderRadius = "small", width, height, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (React.createElement(View, { backgroundColor: "disabled", width: width, height: height, borderRadius: borderRadius, className: rootClassNames, attributes: attributes }));
+};
+export default Skeleton;

package/components/Skeleton/Skeleton.module.css

@@ -0,0 +1 @@
+.root{animation:rs-skeleton-pulse 2.4s ease-in-out infinite;min-height:var(--rs-unit-x5)}@media (prefers-reduced-motion){.root{animation:none}}@keyframes rs-skeleton-pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}

package/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from "../View";
+import * as G from "../../types/global";
+export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Skeleton/Skeleton.types.js

@@ -0,0 +1 @@
+export {};

package/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Skeleton";
+export type { Props as SkeletonProps } from "./Skeleton.types";

package/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default } from "./Skeleton.js";

package/components/Skeleton/tests/Skeleton.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const radius: () => React.JSX.Element;

package/components/Skeleton/tests/Skeleton.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Skeleton from "../index.js";
+export default { title: "Components/Skeleton" };
+export const variant = () => (<Example>
+		<Example.Item title="text">
+			<Skeleton />
+		</Example.Item>
+
+		<Example.Item title="view, rectangle">
+			<Skeleton width="100px" height="100px"/>
+		</Example.Item>
+
+		<Example.Item title="view, circle">
+			<Skeleton width="100px" height="100px" borderRadius="circular"/>
+		</Example.Item>
+
+		<Example.Item title="view, rectangle, responsive">
+			<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
+		</Example.Item>
+	</Example>);
+export const radius = () => (<Example>
+		<Example.Item title="radius=small">
+			<Skeleton width="60px" height="60px" borderRadius="small"/>
+		</Example.Item>
+
+		<Example.Item title="radius=medium">
+			<Skeleton width="60px" height="60px" borderRadius="medium"/>
+		</Example.Item>
+
+		<Example.Item title="radius=large">
+			<Skeleton width="60px" height="60px" borderRadius="large"/>
+		</Example.Item>
+
+		<Example.Item title="radius=circular">
+			<Skeleton width="60px" height="60px" borderRadius="circular"/>
+		</Example.Item>
+	</Example>);

package/components/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Slider.types";
+declare const Slider: (props: T.Props) => React.JSX.Element;
+export default Slider;

package/components/Slider/Slider.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import SliderControlled from "./SliderControlled.js";
+import SliderUncontrolled from "./SliderUncontrolled.js";
+const Slider = (props) => {
+    const { min = 0, max = 100 } = props, rest = __rest(props, ["min", "max"]);
+    if (("value" in props && props.value !== undefined) ||
+        ("minValue" in props &&
+            "maxValue" in props &&
+            props.minValue !== undefined &&
+            props.maxValue !== undefined)) {
+        return React.createElement(SliderControlled, Object.assign({}, rest, { min: min, max: max }));
+    }
+    return React.createElement(SliderUncontrolled, Object.assign({}, rest, { min: min, max: max }));
+};
+export default Slider;

package/components/Slider/Slider.module.css

@@ -0,0 +1 @@
+.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4)}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

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

@@ -0,0 +1,78 @@
+import type * as G from "../../types/global";
+export type SingleChangeArgs = {
+    value: number;
+    minValue?: never;
+    maxValue?: never;
+    name: string;
+};
+export type RangeChangeArgs = {
+    value?: never;
+    minValue: number;
+    maxValue: number;
+    name: string;
+};
+type RangeSelectionProps = {
+    range: true;
+    onChange?: (args: RangeChangeArgs) => void;
+    onChangeCommit?: (args: RangeChangeArgs) => void;
+};
+type SingleSelectionProps = {
+    range?: false;
+    onChange?: (args: SingleChangeArgs) => void;
+    onChangeCommit?: (args: SingleChangeArgs) => void;
+};
+type ControlledSingleProps = {
+    value: number;
+    defaultValue?: never;
+};
+type ControlledRangeProps = {
+    minValue: number;
+    maxValue: number;
+    defaultMinValue?: never;
+    defaultMaxValue?: never;
+};
+type UncontrolledSingleProps = {
+    value?: never;
+    defaultValue?: number;
+};
+type UncontrolledRangeProps = {
+    minValue?: never;
+    maxValue?: never;
+    defaultMinValue?: number;
+    defaultMaxValue?: number;
+};
+type BaseProps = {
+    name: string;
+    step?: number;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    renderValue?: (args: {
+        value: number;
+    }) => string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ControlledProps = BaseProps & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & RangeSelectionProps));
+export type UncontrolledProps = BaseProps & ((UncontrolledSingleProps & SingleSelectionProps) | (UncontrolledRangeProps & RangeSelectionProps));
+export type Props = ControlledProps | UncontrolledProps;
+export type DefaultProps = {
+    min: number;
+    max: number;
+};
+export type ThumbProps = {
+    id: string;
+    name: string;
+    disabled?: boolean;
+    value: number;
+    active?: boolean;
+    position: number;
+    onChange: (value: number, options?: {
+        commit?: boolean;
+    }) => void;
+    onDragStart: () => void;
+    max: number;
+    min: number;
+    renderValue?: BaseProps["renderValue"];
+};
+export {};

package/components/Slider/Slider.types.js

@@ -0,0 +1 @@
+export {};

package/components/Slider/SliderControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Slider.types";
+declare const SliderControlled: (props: T.ControlledProps & T.DefaultProps) => React.JSX.Element;
+export default SliderControlled;

package/components/Slider/SliderControlled.js

@@ -0,0 +1,172 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useRTL from "../../hooks/useRTL.js";
+import useElementId from "../../hooks/useElementId.js";
+import { useFormControl } from "../FormControl/index.js";
+import SliderThumb from "./SliderThumb.js";
+import s from "./Slider.module.css";
+const getDragX = (event) => {
+    if (event instanceof MouseEvent)
+        return event.pageX || event.screenX;
+    return event.changedTouches[0].pageX;
+};
+const applyStepToValue = (value, step) => {
+    return Math.round(value / step) * step;
+};
+const SliderControlled = (props) => {
+    var _a;
+    const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, } = props;
+    const minValue = range && props.minValue !== undefined ? applyStepToValue(props.minValue, step) : undefined;
+    const maxValue = applyStepToValue(range ? props.maxValue : props.value, step);
+    const barRef = React.useRef(null);
+    const minRef = React.useRef(null);
+    const maxRef = React.useRef(null);
+    const [draggingId, setDraggingId] = React.useState(null);
+    const [rtl] = useRTL();
+    const formControl = useFormControl();
+    const id = useElementId();
+    const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || id;
+    const minId = `${inputId}-min`;
+    const maxId = `${inputId}-max`;
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
+    const rootClassNames = classNames(s.root, disabled && s["--disabled"], className);
+    const getPositionValue = React.useCallback((x) => {
+        if (!barRef.current)
+            return;
+        const barWidth = barRef.current.clientWidth;
+        const positionX = x - barRef.current.getBoundingClientRect().left;
+        let percentage = positionX / barWidth;
+        if (rtl)
+            percentage = 1 - percentage;
+        let value = (max - min) * percentage + min;
+        value = Math.max(min, Math.min(max, value));
+        return applyStepToValue(value, step);
+    }, [max, min, rtl, step]);
+    const getPercentPosition = (value) => {
+        const ratio = (value - min) / (max - min);
+        return ratio * 100;
+    };
+    const handleMinChange = React.useCallback((value, options) => {
+        if (!range)
+            return;
+        const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
+        method === null || method === void 0 ? void 0 : method({ minValue: value, maxValue, name });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [maxValue, name, range]);
+    const handleMaxChange = React.useCallback((value, options) => {
+        if (range) {
+            const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
+            method === null || method === void 0 ? void 0 : method({ minValue: minValue, maxValue: value, name });
+            return;
+        }
+        const method = (options === null || options === void 0 ? void 0 : options.commit) ? onChangeCommit : onChange;
+        method === null || method === void 0 ? void 0 : method({ value, name });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [minValue, name, range]);
+    const handleMouseDown = ({ nativeEvent }) => {
+        if (disabled)
+            return;
+        let minDistance;
+        let closestId;
+        const x = getDragX(nativeEvent);
+        const nextValue = getPositionValue(x);
+        const thumbs = [
+            { ref: minRef, id: minId },
+            { ref: maxRef, id: maxId },
+        ];
+        thumbs.forEach((item) => {
+            if (!item.ref.current)
+                return;
+            const el = item.ref.current;
+            const distance = Math.abs(el.getBoundingClientRect().left - x);
+            if (minDistance === undefined || distance <= minDistance) {
+                minDistance = distance;
+                closestId = item.id;
+            }
+        });
+        if (!closestId || nextValue === undefined)
+            return;
+        if (closestId === minId)
+            handleMinChange(nextValue);
+        if (closestId === maxId)
+            handleMaxChange(nextValue);
+        setDraggingId(closestId);
+    };
+    const handleMinDragStart = () => {
+        if (disabled)
+            return;
+        setDraggingId(minId);
+    };
+    const handleMaxDragStart = () => {
+        if (disabled)
+            return;
+        setDraggingId(maxId);
+    };
+    const handleDragStop = React.useCallback(() => {
+        if (draggingId === minId && minValue !== undefined) {
+            handleMinChange(minValue, { commit: true });
+        }
+        if (draggingId === maxId) {
+            handleMaxChange(maxValue, { commit: true });
+        }
+        setDraggingId(null);
+    }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);
+    const handleDrag = React.useCallback((e) => {
+        if (!draggingId)
+            return;
+        const x = getDragX(e);
+        const nextValue = getPositionValue(x);
+        if (nextValue === undefined)
+            return;
+        // Switch to another id if thumbs overlap
+        let nextDraggingId = draggingId;
+        if (draggingId === minId && nextValue > maxValue)
+            nextDraggingId = maxId;
+        if (draggingId === maxId && minValue && nextValue < minValue)
+            nextDraggingId = minId;
+        if (nextDraggingId === minId)
+            handleMinChange(nextValue);
+        if (nextDraggingId === maxId)
+            handleMaxChange(nextValue);
+        if (draggingId !== nextDraggingId)
+            setDraggingId(nextDraggingId);
+    }, [
+        draggingId,
+        minValue,
+        maxValue,
+        getPositionValue,
+        handleMaxChange,
+        handleMinChange,
+        maxId,
+        minId,
+    ]);
+    React.useEffect(() => {
+        window.addEventListener("mouseup", handleDragStop);
+        window.addEventListener("touchend", handleDragStop);
+        window.addEventListener("mousemove", handleDrag);
+        window.addEventListener("touchmove", handleDrag);
+        return () => {
+            window.removeEventListener("mouseup", handleDragStop);
+            window.removeEventListener("touchend", handleDragStop);
+            window.removeEventListener("mousemove", handleDrag);
+            window.removeEventListener("touchmove", handleDrag);
+        };
+    }, [handleDragStop, handleDrag]);
+    const minPercentPosition = minValue && getPercentPosition(minValue);
+    const maxPercentPosition = getPercentPosition(maxValue);
+    return (
+    // mouse/touch events only needed for non-keyboard use
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", Object.assign({}, attributes, { className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown }),
+        React.createElement("div", { className: s.bar, ref: barRef },
+            React.createElement("div", { className: s.selection, style: {
+                    insetInlineStart: `${minPercentPosition || 0}%`,
+                    width: `${maxPercentPosition - (minPercentPosition || 0)}%`,
+                } })),
+        minValue !== undefined && minPercentPosition !== undefined && (React.createElement(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, renderValue: renderValue })),
+        React.createElement(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, renderValue: renderValue })));
+};
+export default SliderControlled;

package/components/Slider/SliderThumb.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Slider.types";
+declare const _default: React.ForwardRefExoticComponent<T.ThumbProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/components/Slider/SliderThumb.js

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Theme from "../Theme/index.js";
+import Text from "../Text/index.js";
+import s from "./Slider.module.css";
+const SliderThumb = (props, ref) => {
+    const { name, value, disabled, active, position, max, min, onChange, onDragStart, renderValue } = props;
+    const id = React.useId();
+    const thumbClassNames = classNames(s.thumb, active && s["thumb--active"]);
+    const tooltipValue = renderValue ? renderValue({ value }) : value;
+    const handleChange = (e) => {
+        onChange(+e.target.value);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, "aria-labelledby": id }),
+        React.createElement("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { insetInlineStart: `${position}%` }, id: id, "aria-hidden": "true" },
+            React.createElement(Theme, { className: s.tooltip, colorMode: "inverted" },
+                React.createElement(Text, { variant: "caption-1", weight: "medium" }, tooltipValue)))));
+};
+export default React.forwardRef(SliderThumb);

package/components/Slider/SliderUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Slider.types";
+declare const SliderUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => React.JSX.Element;
+export default SliderUncontrolled;

package/components/Slider/SliderUncontrolled.js

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import SliderControlled from "./SliderControlled.js";
+const SliderUncontrolled = (props) => {
+    const { min, max, onChange, range } = props;
+    const defaultMinValue = ("defaultMinValue" in props && props.defaultMinValue !== undefined && props.defaultMinValue) ||
+        ("defaultValue" in props && props.defaultValue !== undefined && props.defaultValue) ||
+        min;
+    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 handleSingleChange = (args) => {
+        if (range)
+            return;
+        setMaxValue(args.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(args);
+    };
+    const handleRangeChange = (args) => {
+        if (!range)
+            return;
+        setMinValue(args.minValue);
+        setMaxValue(args.maxValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(args);
+    };
+    if (range) {
+        return (React.createElement(SliderControlled, Object.assign({}, props, { min: min, max: max, minValue: minValue, maxValue: maxValue, defaultMinValue: undefined, defaultMaxValue: undefined, onChange: handleRangeChange })));
+    }
+    return (React.createElement(SliderControlled, Object.assign({}, props, { min: min, max: max, value: maxValue, defaultValue: undefined, onChange: handleSingleChange })));
+};
+export default SliderUncontrolled;

package/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Slider";
+export type { Props as SliderProps } from "./Slider.types";

package/components/Slider/index.js

@@ -0,0 +1 @@
+export { default } from "./Slider.js";

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;
+export declare const boundaries: () => React.JSX.Element;
+export declare const status: () => React.JSX.Element;
+export declare const customRender: () => React.JSX.Element;
+export declare const formControl: () => React.JSX.Element;