reshaped 2.11.12 → 3.0.1

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

@@ -0,0 +1,115 @@
+import { useRef } from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import ScrollArea from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Utilities/ScrollArea",
+    component: ScrollArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/scroll-area",
+        },
+    },
+};
+const Demo = () => {
+    const ref = useRef(null);
+    return (<View gap={4}>
+			<Button onClick={() => ref.current?.scrollTo({ top: 100, behavior: "smooth" })}>
+				Scroll
+			</Button>
+			<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</View>);
+};
+export const direction = () => (<Example>
+		<Example.Item title="vertical">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="horizontal">
+			<ScrollArea height="120px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4} width="500px">
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="both directions">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4} width="500px">
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+	</Example>);
+export const visibility = () => (<Example>
+		<Example.Item title="visibility: hover">
+			<ScrollArea height="100px">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="visibility: hidden">
+			<ScrollArea height="100px" scrollbarDisplay="hidden">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="visibility: visible">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+	</Example>);
+export const ref = () => (<Example>
+		<Example.Item title="external ref">
+			<Demo />
+		</Example.Item>
+	</Example>);

package/dist/components/Select/Select.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import Icon from "../Icon/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import Actionable from "../Actionable/index.js";
+import Text from "../Text/index.js";
+import IconArrow from "../../icons/ChevronVertical.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import useElementId from "../../hooks/useElementId.js";
+import s from "./Select.module.css";
+const Select = (props) => {
+    const { onChange, onClick, onFocus, onBlur, name, value, defaultValue, placeholder, options, children, icon, startSlot, size = "medium", variant = "outline", className, attributes, } = props;
+    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
+    const formControl = useFormControl();
+    const id = useElementId(props.id);
+    const inputId = formControl?.attributes?.id || props.inputAttributes?.id || id;
+    const disabled = formControl?.disabled || props.disabled;
+    const hasError = formControl?.hasError || props.hasError;
+    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], empty && options && s["--placeholder"], variant && s[`--variant-${variant}`]);
+    const handleChange = (event) => {
+        const nextValue = event.target.value;
+        // Uncontrolled placeholder
+        if (value === undefined)
+            setEmpty(!nextValue);
+        if (!onChange)
+            return;
+        onChange({ name, value: nextValue, event });
+    };
+    // Controlled placeholder
+    React.useEffect(() => {
+        if (value === undefined)
+            return;
+        setEmpty(!value);
+    }, [value]);
+    const startContent = (startSlot || icon) && (_jsx("div", { className: s.slot, children: icon ? (_jsx(Icon, { size: responsivePropDependency(size, (size) => {
+                if (size === "large")
+                    return 5;
+                if (size === "xlarge")
+                    return 6;
+                return 4;
+            }), svg: icon })) : (startSlot) }));
+    return (_jsxs("div", { ...attributes, className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", { ...inputAttributes, onFocus: (onFocus || inputAttributes?.onFocus), onBlur: (onBlur || inputAttributes?.onBlur), className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, onClick: onClick, attributes: {
+                            ...inputAttributes,
+                            onFocus: onFocus || inputAttributes?.onFocus,
+                            onBlur: onBlur || inputAttributes?.onBlur,
+                        }, children: [startContent, children || (placeholder ? _jsx(Text, { color: "neutral-faded", children: placeholder }) : null)] }), _jsx("input", { type: "hidden", value: value, name: name })] })), _jsx("div", { className: s.arrow, children: _jsx(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
+                        return size === "large" || size === "xlarge" ? 5 : 4;
+                    }) }) })] }));
+};
+export default Select;

package/dist/components/Select/Select.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}

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

@@ -0,0 +1,51 @@
+import React from "react";
+import type * as G from "../../types/global";
+import type { FormControlProps } from "../FormControl";
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type Option = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type ButtonTriggerProps = {
+    onClick?: () => void;
+    children?: React.ReactNode;
+    inputAttributes?: ActionableProps["attributes"];
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    options?: never;
+    onChange?: never;
+};
+export type SelectTriggerProps = {
+    options: Option[];
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
+    onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    inputAttributes?: G.Attributes<"select">;
+    onClick?: never;
+    children?: never;
+};
+type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlProps, "hasError">) & {
+    id?: string;
+    name: string;
+    size?: Size;
+    variant?: "outline" | "faded" | "headless";
+    disabled?: boolean;
+    placeholder?: string;
+    icon?: IconProps["svg"];
+    startSlot?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

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

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

package/dist/components/Slider/Slider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SliderControlled from "./SliderControlled.js";
+import SliderUncontrolled from "./SliderUncontrolled.js";
+const Slider = (props) => {
+    const { min = 0, max = 100, ...rest } = props;
+    if (("value" in props && props.value !== undefined) ||
+        ("minValue" in props &&
+            "maxValue" in props &&
+            props.minValue !== undefined &&
+            props.maxValue !== undefined)) {
+        return _jsx(SliderControlled, { ...rest, min: min, max: max });
+    }
+    return _jsx(SliderUncontrolled, { ...rest, min: min, max: max });
+};
+export default Slider;

package/dist/components/Slider/Slider.module.css

@@ -0,0 +1 @@
+.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;height:var(--rs-slider-thumb-size);position:relative;user-select:none;-webkit-tap-highlight-color:transparent;margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.root:has(.thumb:hover,.thumb--active,.input:focus){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);height:var(--rs-unit-x1);position:relative;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{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;position:absolute;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumbs{inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.thumb,.thumbs{height:100%;position:absolute}.thumb{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-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))}.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(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))!important}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--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/dist/components/Slider/Slider.types.d.ts

@@ -0,0 +1,80 @@
+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">;
+};
+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;
+    step: NonNullable<BaseProps["step"]>;
+    renderValue?: BaseProps["renderValue"];
+    tooltipRef: React.RefObject<HTMLDivElement>;
+};
+export {};

package/dist/components/Slider/Slider.utilities.js

@@ -0,0 +1,14 @@
+export const getPrecision = (value) => {
+    const floatPart = value.toString().split(".")[1];
+    return floatPart?.length || 0;
+};
+export const applyStepToValue = (value, step) => {
+    const isStepFloat = step % 1 !== 0;
+    const result = Math.round(value / step) * step;
+    // Handle javascript floats manually with string conversion
+    if (isStepFloat) {
+        const precision = getPrecision(step);
+        return Number(result.toFixed(precision));
+    }
+    return result;
+};

package/dist/components/Slider/SliderControlled.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom.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 { applyStepToValue } from "./Slider.utilities.js";
+import s from "./Slider.module.css";
+const THUMB_SIZE = 16;
+const getDragX = (event) => {
+    if (event instanceof MouseEvent)
+        return event.pageX || event.screenX;
+    return event.changedTouches[0].pageX;
+};
+const SliderControlled = (props) => {
+    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 minTooltipRef = React.useRef(null);
+    const maxTooltipRef = React.useRef(null);
+    const [draggingId, setDraggingId] = React.useState(null);
+    const [rtl] = useRTL();
+    const formControl = useFormControl();
+    const id = useElementId();
+    const inputId = formControl?.attributes?.id || id;
+    const minId = `${inputId}-min`;
+    const maxId = `${inputId}-max`;
+    const disabled = 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;
+        // Move by half thumb size since it's a reserved space
+        const barX = barRef.current.getBoundingClientRect().left + THUMB_SIZE / 2;
+        const positionX = x - barX;
+        const thumbsAreaWidth = barWidth - THUMB_SIZE;
+        let percentage = positionX / thumbsAreaWidth;
+        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 positionTooltip = React.useCallback((draggingId) => {
+        const draggingRef = draggingId === minId ? minTooltipRef : maxTooltipRef;
+        const thumbRef = draggingId === minId ? minRef : maxRef;
+        let nextTooltipOffset = 0;
+        const barRect = barRef.current?.getBoundingClientRect();
+        const draggingRect = draggingRef.current?.getBoundingClientRect();
+        const thumbRect = thumbRef.current?.getBoundingClientRect();
+        const barLeftSide = barRect?.left;
+        const barRightSide = barLeftSide && barLeftSide + barRect?.width;
+        const tooltipLeftSide = thumbRect && draggingRect && thumbRect.left - draggingRect.width / 2;
+        const tooltipRightSide = thumbRect && draggingRect && thumbRect.left + draggingRect.width / 2;
+        // Crosses the left slider boundary
+        if (tooltipLeftSide && barLeftSide && tooltipLeftSide < barLeftSide - 8) {
+            nextTooltipOffset = draggingRect.width / 2 - 8;
+        }
+        // Crosses the right slider boundary
+        if (tooltipRightSide && barRightSide && tooltipRightSide > barRightSide) {
+            nextTooltipOffset = -(draggingRect.width / 2 - 8);
+        }
+        const tooltipEl = draggingRef.current;
+        if (tooltipEl) {
+            tooltipEl.style.setProperty("--rs-slider-tooltip-offset", `${nextTooltipOffset || 0}px`);
+        }
+    }, [minId]);
+    const handleMinChange = React.useCallback((value, options) => {
+        if (!range)
+            return;
+        const method = options?.commit ? onChangeCommit : onChange;
+        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?.commit ? onChangeCommit : onChange;
+            method?.({ minValue: minValue, maxValue: value, name });
+            return;
+        }
+        const method = options?.commit ? onChangeCommit : onChange;
+        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);
+        disableUserSelect();
+        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 });
+        }
+        enableUserSelect();
+        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(() => {
+        positionTooltip(minId);
+        positionTooltip(maxId);
+    }, [minId, maxId, minValue, maxValue, positionTooltip]);
+    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
+    _jsxs("div", { ...attributes, className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: [_jsx("div", { className: s.bar, ref: barRef, children: _jsx("div", { className: s.selection, style: {
+                        insetInlineStart: `${minPercentPosition || 0}%`,
+                        width: `${maxPercentPosition - (minPercentPosition || 0)}%`,
+                    } }) }), _jsxs("div", { className: s.thumbs, children: [minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step })] })] }));
+};
+export default SliderControlled;

package/dist/components/Slider/SliderUncontrolled.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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?.(args);
+    };
+    const handleRangeChange = (args) => {
+        if (!range)
+            return;
+        setMinValue(args.minValue);
+        setMaxValue(args.maxValue);
+        onChange?.(args);
+    };
+    if (range) {
+        return (_jsx(SliderControlled, { ...props, min: min, max: max, minValue: minValue, maxValue: maxValue, defaultMinValue: undefined, defaultMaxValue: undefined, onChange: handleRangeChange }));
+    }
+    return (_jsx(SliderControlled, { ...props, min: min, max: max, value: maxValue, defaultValue: undefined, onChange: handleSingleChange }));
+};
+export default SliderUncontrolled;

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

@@ -0,0 +1,51 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Slider from "../index.js";
+import FormControl from "../../FormControl/index.js";
+export default {
+    title: "Components/Slider",
+    component: Slider,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/slider",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item title="range">
+			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} renderValue={() => "Hundred more times"}/>
+		</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">
+			<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
+		</Example.Item>
+	</Example>);
+export const formControl = () => (<Example>
+		<Example.Item title="form control, disabled">
+			<FormControl disabled>
+				<FormControl.Label>Slider value</FormControl.Label>
+				<Slider name="slider"/>
+			</FormControl>
+		</Example.Item>
+	</Example>);