reshaped 3.4.6 → 3.5.0-rc.0

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./NumberField.types";
+declare const NumberField: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NumberFieldControlled from "./NumberFieldControlled.js";
+import NumberFieldUncontrolled from "./NumberFieldUncontrolled.js";
+const NumberField = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(NumberFieldControlled, { ...props });
+    return _jsx(NumberFieldUncontrolled, { ...props });
+};
+NumberField.displayName = "NumberField";
+export default NumberField;

package/dist/components/NumberField/NumberField.module.css

@@ -0,0 +1 @@
+.field{font-variant-numeric:tabular-nums}.controls-wrapper{display:block}.controls{--rs-number-field-control-border-color:var(--rs-color-border-neutral);display:flex;flex-direction:column;inset-block:calc(var(--rs-text-field-p-v) * -1 + var(--rs-unit-x1));inset-inline-end:0;position:absolute;transition:border-color var(--rs-duration-fast) var(--rs-easing-standard)}.controls:has([aria-disabled]+[aria-disabled]){--rs-number-field-control-border-color:var(--rs-color-border-disabled)}.controls--size-small .control,.controls--size-small .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small .controls-wrapper{width:54px}}.controls--size-medium .control,.controls--size-medium .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium .controls-wrapper{width:70px}}.controls--size-large .control{width:var(--rs-unit-x6)}.controls--size-large .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large .controls-wrapper{width:94px}}.controls--size-xlarge .control{width:var(--rs-unit-x7)}.controls--size-xlarge .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge .controls-wrapper{width:110px}}.control{align-items:center;display:flex;flex-grow:1;height:50%;justify-content:center;touch-action:manipulation;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.control[aria-disabled]{color:var(--rs-color-foreground-disabled)}.control:not([aria-disabled]):hover{background:rgba(var(--rs-color-rgb-background-neutral),32%)}.icon--touch{display:none!important}.--outline .controls{border-inline-start:1px solid var(--rs-number-field-control-border-color);inset-inline-end:1px}.--outline .control:first-child{box-shadow:0 1px var(--rs-number-field-control-border-color)}@media (pointer:coarse) and (hover:none){.controls{flex-direction:row-reverse}.control{aspect-ratio:1;box-sizing:content-box;height:100%;touch-action:manipulation;width:auto!important}.icon--touch{display:block!important}.icon--mouse{display:none!important}.--outline .control:first-child{border-inline-start:1px solid var(--rs-color-border-neutral);box-shadow:none}}@media (--rs-viewport-m ){.controls--size-small--m .control,.controls--size-small--m .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--m .controls-wrapper{width:54px}}.controls--size-medium--m .control,.controls--size-medium--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--m .controls-wrapper{width:70px}}.controls--size-large--m .control{width:var(--rs-unit-x6)}.controls--size-large--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--m .controls-wrapper{width:94px}}.controls--size-xlarge--m .control{width:var(--rs-unit-x7)}.controls--size-xlarge--m .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--m .controls-wrapper{width:110px}}}@media (--rs-viewport-l ){.controls--size-small--l .control,.controls--size-small--l .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--l .controls-wrapper{width:54px}}.controls--size-medium--l .control,.controls--size-medium--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--l .controls-wrapper{width:70px}}.controls--size-large--l .control{width:var(--rs-unit-x6)}.controls--size-large--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--l .controls-wrapper{width:94px}}.controls--size-xlarge--l .control{width:var(--rs-unit-x7)}.controls--size-xlarge--l .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--l .controls-wrapper{width:110px}}}@media (--rs-viewport-xl ){.controls--size-small--xl .control,.controls--size-small--xl .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--xl .controls-wrapper{width:54px}}.controls--size-medium--xl .control,.controls--size-medium--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--xl .controls-wrapper{width:70px}}.controls--size-large--xl .control{width:var(--rs-unit-x6)}.controls--size-large--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--xl .controls-wrapper{width:94px}}.controls--size-xlarge--xl .control{width:var(--rs-unit-x7)}.controls--size-xlarge--xl .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--xl .controls-wrapper{width:110px}}}

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

@@ -0,0 +1,19 @@
+import type { TextFieldBaseProps } from "../TextField";
+import type * as G from "../../types/global";
+export type BaseProps = Omit<TextFieldBaseProps, "endSlot" | "onChange" | "rounded" | "multiline"> & {
+    onChange?: G.ChangeHandler<number>;
+    increaseAriaLabel: string;
+    decreaseAriaLabel: string;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+export type ControlledProps = BaseProps & {
+    value: number | null;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: number;
+};
+export type Props = ControlledProps | UncontrolledProps;

package/dist/components/NumberField/NumberField.types.js

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

package/dist/components/NumberField/NumberFieldControlled.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./NumberField.types";
+declare const NumberFieldControlled: {
+    (props: T.ControlledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NumberFieldControlled;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import TextField from "../TextField/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import IconChevronUp from "../../icons/ChevronUp.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import IconPlus from "../../icons/Plus.js";
+import IconMinus from "../../icons/Minus.js";
+import useElementId from "../../hooks/useElementId.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import * as keys from "../../constants/keys.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import s from "./NumberField.module.css";
+const NumberFieldControlled = (props) => {
+    const { increaseAriaLabel, decreaseAriaLabel, min, max, step = 1, name, value, onChange, size = "medium", ...textFieldProps } = props;
+    const formControl = useFormControl();
+    const id = useElementId(textFieldProps.id);
+    const inputId = formControl?.attributes.id || props.inputAttributes?.id || id;
+    const disabled = formControl?.disabled || props.disabled;
+    const hasError = formControl?.hasError || props.hasError;
+    const increaseDisabled = disabled || (value && max ? value >= max : false);
+    const decreaseDisabled = disabled || (value && min ? value <= min : false);
+    const inputRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const [textValue, setTextValue] = React.useState(value?.toString() || "");
+    // Sync value to a ref to handle holding controlss pressed
+    // And changing it without waiting for a rerender
+    const valueRef = React.useRef(value);
+    const onChangeRef = useHandlerRef(onChange);
+    const pressedTimeoutRef = React.useRef(null);
+    const changeIntervalRef = React.useRef(null);
+    const calculateDirectionalChange = React.useCallback((direction) => {
+        const delta = step * direction;
+        const value = valueRef.current;
+        let nextValue = value === null ? delta : value + delta;
+        if (max !== undefined && nextValue > max)
+            nextValue = max;
+        if (min !== undefined && nextValue < min)
+            nextValue = min;
+        // Keep the right precision and avoid JS rounding errors
+        const floatPartLength = value?.toString().split(".")[1]?.length || 0;
+        return Number(nextValue.toFixed(floatPartLength));
+    }, [step, min, max]);
+    const commitValue = React.useCallback((value, options) => {
+        onChangeRef.current?.({ value, name });
+        // Only update the ref here when typing in the input
+        // Otherwise it will be updated when value changes
+        if (!options?.programmatic)
+            valueRef.current = value;
+    }, [name, onChangeRef]);
+    const handleIncrease = React.useCallback(() => {
+        const nextValue = calculateDirectionalChange(1);
+        commitValue(nextValue, { programmatic: true });
+    }, [calculateDirectionalChange, commitValue]);
+    const handleDecrease = React.useCallback(() => {
+        const nextValue = calculateDirectionalChange(-1);
+        commitValue(nextValue, { programmatic: true });
+    }, [calculateDirectionalChange, commitValue]);
+    const handleChange = (args) => {
+        if (!args.value.match(/^(-?)[0-9]*(\.?)[0-9]*$/))
+            return;
+        const numberValue = parseFloat(args.value);
+        if (numberValue > Number.MAX_SAFE_INTEGER)
+            return;
+        if (numberValue < Number.MIN_SAFE_INTEGER)
+            return;
+        setTextValue(args.value);
+        if (isNaN(numberValue))
+            return;
+        commitValue(numberValue);
+    };
+    const handleControlPointerDown = (e, callback) => {
+        if (disabled)
+            return;
+        callback();
+        if (e.pointerType !== "touch") {
+            inputRef.current?.focus();
+        }
+        pressedTimeoutRef.current = setTimeout(() => {
+            changeIntervalRef.current = setInterval(() => {
+                callback();
+            }, 50);
+        }, 500);
+    };
+    const handleControlPointerUp = () => {
+        if (disabled)
+            return;
+        if (pressedTimeoutRef.current) {
+            clearTimeout(pressedTimeoutRef.current);
+            pressedTimeoutRef.current = null;
+        }
+        if (changeIntervalRef.current) {
+            clearTimeout(changeIntervalRef.current);
+            changeIntervalRef.current = null;
+        }
+    };
+    useHotkeys({
+        [keys.UP]: handleIncrease,
+        [keys.DOWN]: handleDecrease,
+    }, [handleIncrease, handleDecrease], {
+        preventDefault: true,
+        ref: rootRef,
+    });
+    React.useEffect(() => {
+        valueRef.current = value;
+        setTextValue(value?.toString() ?? "");
+    }, [value]);
+    const mouseIconSize = responsivePropDependency(size, (size) => {
+        return size === "large" || size === "xlarge" ? 4 : 3;
+    });
+    const touchIconSize = responsivePropDependency(size, (size) => {
+        return size === "small" ? 3 : 4;
+    });
+    const controlsNode = (_jsx("span", { className: s["controls-wrapper"], children: _jsxs("span", { className: s.controls, children: [_jsxs(Actionable, { className: s.control, disabled: increaseDisabled, disableFocusRing: true, as: "span", attributes: {
+                        "aria-label": increaseAriaLabel,
+                        "aria-controls": inputId,
+                        role: "button",
+                        tabIndex: increaseDisabled ? undefined : -1,
+                        onPointerDown: (e) => handleControlPointerDown(e, handleIncrease),
+                        onPointerUp: handleControlPointerUp,
+                        onPointerLeave: handleControlPointerUp,
+                        // Prevent menu from opening on long press
+                        onContextMenu: (e) => e.preventDefault(),
+                    }, children: [_jsx(Icon, { svg: IconChevronUp, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconPlus, size: touchIconSize, className: s["icon--touch"] })] }), _jsxs(Actionable, { className: s.control, disabled: decreaseDisabled, disableFocusRing: true, as: "span", attributes: {
+                        "aria-label": decreaseAriaLabel,
+                        "aria-controls": inputId,
+                        role: "button",
+                        tabIndex: decreaseDisabled ? undefined : -1,
+                        onPointerDown: (e) => handleControlPointerDown(e, handleDecrease),
+                        onPointerUp: handleControlPointerUp,
+                        onPointerLeave: handleControlPointerUp,
+                        // Prevent menu from opening on long press
+                        onContextMenu: (e) => e.preventDefault(),
+                    }, children: [_jsx(Icon, { svg: IconChevronDown, size: mouseIconSize, className: s["icon--mouse"] }), _jsx(Icon, { svg: IconMinus, size: touchIconSize, className: s["icon--touch"] })] })] }) }));
+    return (_jsx(TextField, { ...textFieldProps, className: [
+            textFieldProps.className,
+            responsiveClassNames(s, "controls--size", size),
+            !(textFieldProps.variant === "faded" || textFieldProps.variant === "headless") &&
+                s["--outline"],
+        ], attributes: {
+            ...textFieldProps.attributes,
+            role: "group",
+            ref: rootRef,
+        }, inputAttributes: {
+            ...textFieldProps.inputAttributes,
+            ref: inputRef,
+            inputMode: "numeric",
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: "false",
+            min,
+            max,
+            step,
+            className: s.field,
+        }, size: size, id: inputId, hasError: hasError, disabled: disabled, value: textValue, onChange: handleChange, name: name, endSlot: controlsNode }));
+};
+NumberFieldControlled.displayName = "NumberFieldControlled";
+export default NumberFieldControlled;

package/dist/components/NumberField/NumberFieldUncontrolled.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./NumberField.types";
+declare const NumberFieldUncontrolled: {
+    (props: T.UncontrolledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NumberFieldUncontrolled;

package/dist/components/NumberField/NumberFieldUncontrolled.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import NumberFieldControlled from "./NumberFieldControlled.js";
+const NumberFieldUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue ?? null);
+    const handleChange = (args) => {
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(NumberFieldControlled, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
+};
+NumberFieldUncontrolled.displayName = "NumberFieldUncontrolled";
+export default NumberFieldUncontrolled;

package/dist/components/NumberField/index.d.ts

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

package/dist/components/NumberField/index.js

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

package/dist/components/NumberField/tests/NumberField.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from "@storybook/react";
+import { Mock } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").NumberFieldProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const variant: StoryObj;
+export declare const size: StoryObj;
+export declare const disabled: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const value: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const minMax: StoryObj;
+export declare const className: StoryObj;
+export declare const formControl: StoryObj;
+export declare const valueChanges: StoryObj;

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

@@ -0,0 +1,240 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import FormControl from "../../FormControl/index.js";
+import NumberField from "../index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
+    title: "Components/NumberField",
+    component: NumberField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/number-field",
+        },
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => {
+        return (<Example>
+				<Example.Item title="variant: outline">
+					<NumberField name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="variant: faded">
+					<NumberField variant="faded" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="variant: headless">
+					<NumberField variant="headless" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const input = canvas.getAllByRole("textbox")[0];
+        const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(increaseButton).toHaveAccessibleName("Increase");
+        expect(decreaseButton).toHaveAccessibleName("Decrease");
+    },
+};
+export const size = {
+    name: "size",
+    render: () => {
+        return (<Example>
+				<Example.Item title="size: small">
+					<NumberField size="small" name="test-name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" suffix="m2" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: medium">
+					<NumberField size="medium" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: large">
+					<NumberField size="large" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+				<Example.Item title="size: xlarge">
+					<NumberField size="xlarge" name="test-name" suffix="m2" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const disabled = {
+    name: "disabled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<NumberField name="test-name" onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" disabled inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        const increaseButton = document.querySelector('[aria-label="Increase"]');
+        const decreaseButton = document.querySelector('[aria-label="Decrease"]');
+        expect(input).toBeDisabled();
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).not.toHaveBeenCalled();
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).not.toHaveBeenCalled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<NumberField name="test-name" defaultValue={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
+        expect(input).toHaveValue("2");
+        input.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 23,
+        });
+        expect(input).toHaveValue("23");
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).toBeCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 24,
+        });
+        expect(input).toHaveValue("24");
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).toBeCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 23,
+        });
+        expect(input).toHaveValue("23");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<NumberField name="test-name" value={2} onChange={args.handleChange} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
+        expect(input).toHaveValue("2");
+        input.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 23,
+        });
+        expect(input).toHaveValue("23");
+        await userEvent.click(increaseButton);
+        expect(args.handleChange).toBeCalledTimes(2);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 24,
+        });
+        expect(input).toHaveValue("23");
+        await userEvent.click(decreaseButton);
+        expect(args.handleChange).toBeCalledTimes(3);
+        expect(args.handleChange).toHaveBeenLastCalledWith({
+            name: "test-name",
+            value: 22,
+        });
+        expect(input).toHaveValue("23");
+    },
+};
+export const minMax = {
+    name: "min, max, step",
+    render: () => (<NumberField name="test-name" defaultValue={6} min={5} max={15} step={5} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
+        expect(input).toHaveValue("6");
+        await userEvent.click(increaseButton);
+        expect(input).toHaveValue("11");
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        expect(input).toHaveValue("5");
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        expect(input).toHaveValue("15");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<NumberField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};
+export const formControl = {
+    name: "test: FormControl",
+    render: () => (<Example>
+			<Example.Item title="FormControl">
+				<FormControl>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+
+			<Example.Item title="FormControl, disabled">
+				<FormControl disabled>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+
+			<Example.Item title="FormControl, error">
+				<FormControl hasError>
+					<FormControl.Label>Label</FormControl.Label>
+					<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease"/>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};
+export const valueChanges = {
+    name: "test: keyboard",
+    render: () => (<Example>
+			<Example.Item title="keyboard">
+				<NumberField name="name" increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        input.focus();
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-");
+        await userEvent.keyboard("1");
+        expect(input).toHaveValue("-1");
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-1");
+        await userEvent.keyboard("2");
+        expect(input).toHaveValue("-12");
+        await userEvent.keyboard("{ArrowUp}");
+        expect(input).toHaveValue("-11");
+        await userEvent.keyboard("{ArrowDown}");
+        expect(input).toHaveValue("-12");
+        await userEvent.keyboard(".");
+        expect(input).toHaveValue("-12.");
+        await userEvent.keyboard("3");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard(".");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard("-");
+        expect(input).toHaveValue("-12.3");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        await userEvent.keyboard("{ArrowUp}");
+        expect(input).toHaveValue("-7.3");
+        await userEvent.keyboard("{ArrowDown}");
+        expect(input).toHaveValue("-8.3");
+    },
+};
+// Value change edge cases

package/dist/components/Overlay/Overlay.js

@@ -97,7 +97,7 @@ const Overlay = (props) => {
     React.useEffect(() => {
         if (!rendered || !contentRef.current)
             return;
-        const trapFocus = new TrapFocus(contentRef.current);
+        const trapFocus = new TrapFocus();
         const containerEl = containerRef?.current;
         if (containerEl) {
             originalOverflowRef.current = containerEl.style.overflow;
@@ -105,7 +105,7 @@ const Overlay = (props) => {
             containerEl.style.isolation = "isolate";
             setOffset([containerEl.scrollLeft, containerEl.scrollTop]);
         }
-        trapFocus.trap({
+        trapFocus.trap(contentRef.current, {
             initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
         });
         onOpenRef.current?.();

package/dist/components/PinField/PinField.module.css

@@ -1 +1 @@
-.root{display:inline-flex;margin:-1px 0;overflow-y:clip;padding:1px 0}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}
+.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}

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

@@ -1,5 +1,5 @@
 import type * as G from "../../types/global";
-export type Size = "medium" | "large" | "xlarge";
+export type Size = "small" | "medium" | "large" | "xlarge";
 type BaseProps = {
     name: string;
     valueLength?: number;

package/dist/components/PinField/PinFieldControlled.js

@@ -11,6 +11,7 @@ import * as keys from "../../constants/keys.js";
 import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";
 import s from "./PinField.module.css";
 const sizeMap = {
+    small: 7,
     medium: 9,
     large: 12,
     xlarge: 14,

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

@@ -40,6 +40,14 @@ export const variant = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
+		<Example.Item title="size: small">
+			<PinField name="pin" size="small" inputAttributes={{ "aria-label": "Pin" }}/>
+		</Example.Item>
+
+		<Example.Item title="size: medium">
+			<PinField name="pin" size="medium" inputAttributes={{ "aria-label": "Pin" }}/>
+		</Example.Item>
+
 		<Example.Item title="size: large">
 			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>

package/dist/components/Radio/Radio.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
+import Text from "../Text/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
-    const { children, value, onChange, onFocus, onBlur, className, attributes, inputAttributes } = props;
+    const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;
     const formControl = useFormControl();
     const radioGroup = useRadioGroup();
     const hasError = formControl?.hasError || props.hasError || radioGroup?.hasError;
@@ -14,7 +15,7 @@ const Radio = (props) => {
     const checked = radioGroup ? radioGroup.value === value : props.checked;
     const defaultChecked = radioGroup ? undefined : props.defaultChecked;
     const name = radioGroup ? radioGroup.name : props.name;
-    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
     const handleChange = (event) => {
         if (!name)
             return;
@@ -25,7 +26,13 @@ const Radio = (props) => {
         if (radioGroup?.onChange)
             radioGroup.onChange(changeArgs);
     };
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && _jsx("span", { className: s.text, children: children })] }));
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
+                    if (size === "large")
+                        return "body-2";
+                    if (size === "small")
+                        return "caption-1";
+                    return "body-3";
+                }), children: children }))] }));
 };
 Radio.displayName = "Radio";
 export default Radio;

package/dist/components/Radio/Radio.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-decorator-size) * .4)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+@layer rs.radio.base;@layer rs.radio.error;@layer rs.radio.checked;@layer rs.radio.disabled;@layer rs.radio.base{.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}}@layer rs.radio.error{.root.--error .decorator{border-color:var(--rs-color-border-critical)}}@layer rs.radio.checked{.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}}@layer rs.radio.disabled{.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}