reshaped 2.11.11 → 3.0.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>);

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { responsivePropDependency } from "../../utilities/helpers.js";
+import Expandable from "../_private/Expandable/index.js";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import Divider from "../Divider/index.js";
+import Icon from "../Icon/index.js";
+import Hidden from "../Hidden/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Stepper.module.css";
+const StepperItemPrivate = (props) => {
+    const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;
+    const labelHidden = labelDisplay && responsivePropDependency(labelDisplay, (value) => value === "hidden");
+    const labelNode = (_jsx(View, { gap: 3, grow: true, children: _jsxs(View.Item, { children: [_jsx(Text, { variant: "body-3", weight: "medium", children: title }), _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: subtitle })] }) }));
+    return (_jsxs(View, { children: [_jsxs(View, { attributes: attributes, className: className, direction: "row", gap: 2, align: "center", position: "static", children: [_jsxs(View.Item, { children: [_jsx(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5, children: _jsx(Text, { variant: "body-3", weight: active ? "bold" : "medium", children: completed ? _jsx(Icon, { svg: IconCheckmark, size: 4 }) : step }) }), direction === "column" && !last && _jsx(Divider, { vertical: true, className: s.verticalDivider })] }), labelDisplay ? _jsx(Hidden, { hide: labelHidden, children: labelNode }) : labelNode] }), direction === "column" && children && (_jsx(Expandable, { active: active, children: _jsx(View, { paddingStart: 10, paddingTop: 2, children: children }) }))] }));
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const StepperItem = (_) => null;
+const Stepper = (props) => {
+    const { children, direction = "row", activeId, labelDisplay, className, attributes } = props;
+    const vertical = direction === "column";
+    const length = React.Children.count(children);
+    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
+            const itemId = child.props.id || `${index}`;
+            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...child.props, id: child.props.id || `${index}`, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
+        }) }));
+};
+Stepper.Item = StepperItem;
+export default Stepper;

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

@@ -0,0 +1,26 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    activeId?: string | number;
+    labelDisplay?: G.Responsive<"inline" | "hidden">;
+    children?: React.ReactNode;
+    direction?: "row" | "column";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ItemProps = {
+    id?: string;
+    completed?: boolean;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ItemPrivateProps = ItemProps & {
+    labelDisplay: Props["labelDisplay"];
+    step: number;
+    active: boolean;
+    direction: Props["direction"];
+    last: boolean;
+};

package/dist/components/Switch/Switch.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import { useFormControl } from "../FormControl/index.js";
+import Text from "../Text/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import s from "./Switch.module.css";
+const Switch = (props) => {
+    const { children, name, checked, size, reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, size && s[`root--size-${size}`], reversed && s["root--reversed"], className);
+    const formControl = useFormControl();
+    const id = useElementId(formControl?.attributes.id || props.id || props.inputAttributes?.id);
+    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
+    const disabled = formControl?.disabled || props.disabled;
+    const handleChange = (event) => {
+        if (!onChange)
+            return;
+        onChange({
+            name,
+            event,
+            checked: event.target.checked,
+        });
+    };
+    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: size === "small" ? "caption-1" : "body-3", weight: "medium", children: children }))] }));
+};
+export default Switch;

package/dist/components/Switch/Switch.module.css

@@ -0,0 +1 @@
+.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    id?: string;
+    name: string;
+    disabled?: boolean;
+    reversed?: boolean;
+    size?: "medium" | "small" | "large";
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label">;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type ControlledProps = BaseProps & {
+    defaultChecked?: never;
+    checked: boolean;
+};
+export type UncontrolledProps = BaseProps & {
+    defaultChecked?: boolean;
+    checked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

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

@@ -0,0 +1,63 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Switch from "../index.js";
+export default {
+    title: "Components/Switch",
+    component: Switch,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/switch",
+        },
+    },
+};
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="selected, uncontrolled">
+			<Switch name="active" defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="selected, controlled">
+			<Switch name="active" checked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: medium">
+			<Switch name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: large">
+			<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);
+export const label = () => (<Example>
+		<Example.Item title="size: medium">
+			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: medium, reversed">
+			<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled, unselected">
+			<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="disabled, selected">
+			<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);

package/dist/components/Table/Table.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables } from "../../utilities/helpers.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getMinWidthStyles from "../../styles/minWidth/index.js";
+import s from "./Table.module.css";
+const TableCellPrivate = (props) => {
+    const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, attributes, } = props;
+    const width = props.width === "auto" ? "0px" : props.width;
+    const widthStyles = getWidthStyles(width);
+    const minWidthStyles = getMinWidthStyles(minWidth || width);
+    const headingClassNames = classNames(s.cell, widthStyles?.classNames, minWidthStyles?.classNames, (width === 0 || width === "0px") && s["cell--width-auto"], align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`]);
+    const headingStyle = {
+        ...widthStyles?.variables,
+        ...minWidthStyles?.variables,
+        ...responsiveVariables("--rs-table-p-vertical", paddingBlock ?? padding),
+        ...responsiveVariables("--rs-table-p-horizontal", paddingInline ?? padding),
+    };
+    return (_jsx(TagName, { ...attributes, className: headingClassNames, rowSpan: rowSpan, colSpan: colSpan, style: headingStyle, children: children }));
+};
+const TableCell = (props) => {
+    return _jsx(TableCellPrivate, { ...props, tagName: "td" });
+};
+const TableHeading = (props) => {
+    return _jsx(TableCellPrivate, { ...props, tagName: "th" });
+};
+const TableRow = (props) => {
+    const { highlighted, children, attributes } = props;
+    const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"]);
+    return (_jsx("tr", { ...attributes, className: rowClassNames, children: children }));
+};
+const TableBody = (props) => {
+    return _jsx("tbody", { children: props.children });
+};
+const TableHead = (props) => {
+    return _jsx("thead", { children: props.children });
+};
+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 [firstChild] = React.Children.toArray(children);
+    return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
+                (firstChild.type === TableBody || firstChild.type === TableHead) ? (children) : (_jsx(TableBody, { children: children })) }) }));
+};
+Table.Cell = TableCell;
+Table.Heading = TableHeading;
+Table.Row = TableRow;
+Table.Body = TableBody;
+Table.Head = TableHead;
+export default Table;

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

@@ -0,0 +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)}.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}.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),40%)}.--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))}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TabsControlled from "./TabsControlled.js";
+import TabsUncontrolled from "./TabsUncontrolled.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(TabsControlled, { ...props });
+    return _jsx(TabsUncontrolled, { ...props });
+};
+Tabs.Item = TabsItem;
+Tabs.List = TabsList;
+Tabs.Panel = TabsPanel;
+export default Tabs;

package/dist/components/Tabs/Tabs.module.css

@@ -0,0 +1 @@
+@property --rs-tabs-stop-l{syntax:"<percentage>";initial-value:.01%;inherits:false}@property --rs-tabs-stop-r{syntax:"<percentage>";initial-value:100%;inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.inner{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent 100%);transition:var(--rs-duration-fast) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{--rs-tabs-gap:var(--rs-unit-x4);flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.next,.prev{align-items:center;display:flex;inset-block:0;position:absolute;z-index:var(--rs-z-index-raised)}[dir=rtl] .next,[dir=rtl] .prev{transform:scaleX(-1)}.next{inset-inline-end:var(--rs-unit-x1)}.prev{inset-inline-start:var(--rs-unit-x1)}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row{margin:0 calc(var(--rs-unit-x2) * -1);overflow:hidden;padding:0 var(--rs-unit-x2)}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1) -40px;overflow:auto;padding:0 var(--rs-unit-x2) 40px;white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .listItem+.listItem{margin-inline-start:var(--rs-tabs-gap)}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .listItem+.listItem{margin-top:var(--rs-tabs-gap)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills .listItem,.--variant-pills-elevated .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-stop-r:85%}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-stop-l:15%}@media (--rs-viewport-s ){.next,.prev{display:none}}