reshaped 2.8.0 → 2.8.1

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

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type { RadioProps } from "../Radio";
+type BaseProps = {
+    id?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    name: string;
+    hasError?: boolean;
+    onChange?: G.ChangeHandler<string>;
+};
+export type ControlledProps = BaseProps & {
+    value: string | null;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: RadioProps["onChange"];
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    value?: string | null;
+};
+export {};

package/dist/components/RadioGroup/RadioGroupControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./RadioGroup.types";
+declare const RadioGroupControlled: (props: T.ControlledProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioGroupControlled;

package/dist/components/RadioGroup/RadioGroupControlled.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Context from "./RadioGroup.context.js";
+const RadioGroupControlled = (props) => {
+    const { onChange, name, disabled, value, children, hasError } = props;
+    const handleChange = ({ event, value }) => {
+        if (!value)
+            return;
+        if (onChange)
+            onChange({ name, value, event });
+    };
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError }, children: children }));
+};
+export default RadioGroupControlled;

package/dist/components/RadioGroup/RadioGroupUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./RadioGroup.types";
+declare const RadioGroupUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioGroupUncontrolled;

package/dist/components/RadioGroup/RadioGroupUncontrolled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import RadioGroupControlled from "./RadioGroupControlled.js";
+const RadioGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || null);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(RadioGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
+};
+export default RadioGroupUncontrolled;

package/dist/components/Reshaped/Reshaped.d.ts

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

package/dist/components/Reshaped/Reshaped.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import Theme, { GlobalColorMode } from "../Theme/index.js";
+import { ToastProvider } from "../Toast/index.js";
+import useSingletonKeyboardMode from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { SingletonEnvironmentContext, useSingletonRTL, } from "../../hooks/_private/useSingletonEnvironment.js";
+import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
+import "./Reshaped.css";
+import s from "./Reshaped.module.css";
+const ReshapedInner = (props) => {
+    const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
+    const rtlState = useSingletonRTL(defaultRTL);
+    useSingletonKeyboardMode();
+    return (_jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }));
+};
+const Reshaped = (props) => {
+    const { theme, defaultTheme = "reshaped", defaultColorMode, className } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode, children: _jsx(Theme, { name: theme, defaultName: defaultTheme, className: rootClassNames, children: _jsx(ReshapedInner, Object.assign({}, props, { children: props.children })) }) }));
+};
+export default Reshaped;

package/dist/components/Scrim/Scrim.d.ts

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

package/dist/components/Scrim/Scrim.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Scrim.module.css";
+const Scrim = (props) => {
+    const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
+    const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
+    const scrimClassNames = classNames(s.scrim, scrimClassName);
+    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] })));
+};
+export default Scrim;

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

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

package/dist/components/Select/Select.js

@@ -0,0 +1,49 @@
+"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) => {
+    var _a, _b;
+    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 = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
+    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : 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", Object.assign({}, attributes, { className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", Object.assign({}, inputAttributes, { className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, 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: 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: Object.assign(Object.assign({}, inputAttributes), { onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : 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/Skeleton/Skeleton.d.ts

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

package/dist/components/Skeleton/Skeleton.js

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

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", Props>;
+};

package/dist/components/Slider/Slider.d.ts

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

package/dist/components/Slider/Slider.js

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

package/dist/components/Slider/SliderControlled.d.ts

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

package/dist/components/Slider/SliderControlled.js

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

package/dist/components/Slider/SliderThumb.js

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

package/dist/components/Slider/SliderUncontrolled.d.ts

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

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 === 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/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./Stepper.types";
+declare const Stepper: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: (_: T.ItemProps) => null;
+};
+export default Stepper;

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, 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/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<"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/dist/components/Switch/Switch.d.ts

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

package/dist/components/Switch/Switch.js

@@ -0,0 +1,27 @@
+"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/dist/components/Table/Table.d.ts

@@ -0,0 +1,10 @@
+import type * as T from "./Table.types";
+declare const Table: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Cell: (props: T.CellProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: (props: T.HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Row: (props: T.RowProps) => import("react/jsx-runtime").JSX.Element;
+    Body: (props: T.BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Head: (props: T.HeadProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Table;

package/dist/components/Table/Table.js

@@ -0,0 +1,45 @@
+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, 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, align && s[`cell--align-${align}`]);
+    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/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+import type * as T from "./Tabs.types";
+declare const Tabs: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<T.ItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    List: (props: T.ListProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: (props: T.PanelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Tabs;