reshaped 2.11.11 → 3.0.0

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

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

package/components/Slider/Slider.utilities.js

@@ -1,14 +0,0 @@
-export const getPrecision = (value) => {
-    const floatPart = value.toString().split(".")[1];
-    return (floatPart === null || floatPart === void 0 ? void 0 : 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/components/Slider/SliderControlled.js

@@ -1,209 +0,0 @@
-"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) => {
-    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 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 = ((_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;
-        // 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) => {
-        var _a, _b, _c;
-        const draggingRef = draggingId === minId ? minTooltipRef : maxTooltipRef;
-        const thumbRef = draggingId === minId ? minRef : maxRef;
-        let nextTooltipOffset = 0;
-        const barRect = (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const draggingRect = (_b = draggingRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        const thumbRect = (_c = thumbRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-        const barLeftSide = barRect === null || barRect === void 0 ? void 0 : barRect.left;
-        const barRightSide = barLeftSide && barLeftSide + (barRect === null || barRect === void 0 ? void 0 : 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 === 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);
-        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);
-    }, [positionTooltip, minId, maxId]);
-    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", Object.assign({}, 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/components/Slider/SliderUncontrolled.js

@@ -1,33 +0,0 @@
-"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 === 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 (_jsx(SliderControlled, Object.assign({}, props, { min: min, max: max, minValue: minValue, maxValue: maxValue, defaultMinValue: undefined, defaultMaxValue: undefined, onChange: handleRangeChange })));
-    }
-    return (_jsx(SliderControlled, Object.assign({}, props, { min: min, max: max, value: maxValue, defaultValue: undefined, onChange: handleSingleChange })));
-};
-export default SliderUncontrolled;

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

@@ -1,52 +0,0 @@
-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>
-		<Slider name="slider" defaultValue={100} renderValue={() => "$12345"}/>
-		<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/components/Stepper/Stepper.js

@@ -1,30 +0,0 @@
-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, Object.assign({}, child.props, { id: child.props.id || `${index}`, active: (activeId === null || activeId === void 0 ? void 0 : 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/components/Stepper/Stepper.types.d.ts

@@ -1,26 +0,0 @@
-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<"ul", Props>;
-};
-export type ItemProps = {
-    id?: string;
-    completed?: boolean;
-    title?: React.ReactNode;
-    subtitle?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"li", ItemProps>;
-};
-export type ItemPrivateProps = ItemProps & {
-    labelDisplay: Props["labelDisplay"];
-    step: number;
-    active: boolean;
-    direction: Props["direction"];
-    last: boolean;
-};

package/components/Switch/Switch.js

@@ -1,27 +0,0 @@
-"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) => {
-    var _a;
-    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 === null || formControl === void 0 ? void 0 : formControl.attributes.id) || props.id || ((_a = props.inputAttributes) === null || _a === void 0 ? void 0 : _a.id));
-    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
-    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
-    const handleChange = (event) => {
-        if (!onChange)
-            return;
-        onChange({
-            name,
-            event,
-            checked: event.target.checked,
-        });
-    };
-    return (_jsxs("label", Object.assign({}, attributes, { className: rootClassNames, children: [_jsx("input", Object.assign({ type: "checkbox" }, inputAttributes, { className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: id })), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: "body-3", weight: "medium", children: children }))] })));
-};
-export default Switch;

package/components/Switch/Switch.module.css

@@ -1 +0,0 @@
-.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;border-radius:calc(var(--rs-unit-x1) * 5 / 2);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)}.thumb{background:var(--rs-color-white);border-radius:50%;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--reversed{flex-direction:row-reverse}

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

@@ -1,26 +0,0 @@
-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";
-    onChange?: G.ChangeHandler<boolean>;
-    onFocus?: (e: React.FocusEvent) => void;
-    onBlur?: (e: React.FocusEvent) => void;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"label", Props>;
-    inputAttributes?: G.Attributes<"input", Omit<Props, "id">>;
-};
-export type ControlledProps = BaseProps & {
-    defaultChecked?: never;
-    checked: boolean;
-};
-export type UncontrolledProps = BaseProps & {
-    defaultChecked?: boolean;
-    checked?: boolean;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export {};

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

@@ -1,60 +0,0 @@
-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>);
-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/components/Table/Table.js

@@ -1,45 +0,0 @@
-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 === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, (width === 0 || width === "0px") && s["cell--width-auto"], align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`]);
-    const headingStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.variables), responsiveVariables("--rs-table-p-vertical", paddingBlock !== null && paddingBlock !== void 0 ? paddingBlock : padding)), responsiveVariables("--rs-table-p-horizontal", paddingInline !== null && paddingInline !== void 0 ? paddingInline : padding));
-    return (_jsx(TagName, Object.assign({}, attributes, { className: headingClassNames, rowSpan: rowSpan, colSpan: colSpan, style: headingStyle, children: children })));
-};
-const TableCell = (props) => {
-    return _jsx(TableCellPrivate, Object.assign({}, props, { tagName: "td" }));
-};
-const TableHeading = (props) => {
-    return _jsx(TableCellPrivate, Object.assign({}, props, { tagName: "th" }));
-};
-const TableRow = (props) => {
-    const { highlighted, children, attributes } = props;
-    const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"]);
-    return (_jsx("tr", Object.assign({}, 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", Object.assign({}, 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/components/Table/Table.module.css

@@ -1 +0,0 @@
-.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-unit-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/components/Tabs/Tabs.js

@@ -1,16 +0,0 @@
-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, Object.assign({}, props));
-    return _jsx(TabsUncontrolled, Object.assign({}, props));
-};
-Tabs.Item = TabsItem;
-Tabs.List = TabsList;
-Tabs.Panel = TabsPanel;
-export default Tabs;