reshaped 3.4.6 → 3.5.0-rc.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -7,6 +7,7 @@ import { getActiveElement } from "../../utilities/a11y/index.js";
 import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
+import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
     const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, active, onOpen, onClose, ...textFieldProps } = props;
@@ -22,6 +23,14 @@ const Autocomplete = (props) => {
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
     const isDropdownActive = hasChildren && (active ?? internalActive);
+    const lockDropdown = () => {
+        // Prevent dropdown from re-opening when clicked on item with mouse
+        // and focus moves to the item and back to the input
+        lockedRef.current = true;
+        setTimeout(() => {
+            lockedRef.current = false;
+        }, 100);
+    };
     const handleOpen = React.useCallback(() => {
         if (lockedRef.current)
             return;
@@ -35,12 +44,7 @@ const Autocomplete = (props) => {
     const handleItemClick = (args) => {
         onChange?.({ value: args.value, name });
         onItemSelect?.(args);
-        // Prevent dropdown from re-opening when clicked on item with mouse
-        // and focus moves to the item and back to the input
-        lockedRef.current = true;
-        setTimeout(() => {
-            lockedRef.current = false;
-        }, 100);
+        lockDropdown();
     };
     const handleChange = (args) => {
         onChange?.(args);
@@ -50,6 +54,15 @@ const Autocomplete = (props) => {
         onInput?.({ value: e.currentTarget.value, name, event: e });
         textFieldProps.inputAttributes?.onInput?.(e);
     };
+    /**
+     * Make sure focus stays on the input even after user clicks on the content
+     * but outside the items
+     */
+    const handleContentClick = () => {
+        // Prevent the content from being selected
+        lockDropdown();
+        inputRef.current?.focus();
+    };
     useHotkeys({
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
@@ -79,6 +92,7 @@ const Autocomplete = (props) => {
                             onFocus: (e) => {
                                 attributes.onFocus?.();
                                 textFieldProps.onFocus?.(e);
+                                // Only select the value when user clicks on the input
                                 if (!lockedRef.current)
                                     inputRef.current?.select();
                             },
@@ -86,7 +100,7 @@ const Autocomplete = (props) => {
                             onClick: attributes.onFocus,
                             ref: inputRef,
                             role: "combobox",
-                        } })) }), _jsx(DropdownMenu.Content, { children: children })] }) }));
+                        } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick }, children: children })] }) }));
 };
 const AutocompleteItem = (props) => {
     const { value, data, onClick, ...menuItemProps } = props;
@@ -95,7 +109,10 @@ const AutocompleteItem = (props) => {
         onClick?.(e);
         onItemClick({ value, data });
     };
-    return (_jsx(DropdownMenu.Item, { ...menuItemProps, attributes: { ...menuItemProps.attributes, role: "option" }, onClick: handleClick }));
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], attributes: {
+            ...menuItemProps.attributes,
+            role: "option",
+        }, onClick: handleClick }));
 };
 Autocomplete.Item = AutocompleteItem;
 Autocomplete.displayName = "Autocomplete";

package/dist/components/Autocomplete/Autocomplete.module.css

@@ -0,0 +1 @@
+.item--disabled{pointer-events:none}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
+import { Mock } from "@storybook/test";
 declare const _default: {
     title: string;
     component: {
@@ -17,7 +18,19 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: StoryObj;
+export declare const active: StoryObj<{
+    handleOpen: Mock;
+    handleClose: Mock;
+}>;
+export declare const base: StoryObj<{
+    handleInput: Mock;
+    handleItemSelect: Mock;
+    handleBackspace: Mock;
+}>;
+export declare const itemData: StoryObj<{
+    handleItemSelect: Mock;
+}>;
+export declare const itemDisabled: StoryObj;
 export declare const multiselect: {
     name: string;
     render: () => React.JSX.Element;

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

@@ -1,16 +1,12 @@
 import React from "react";
+import { fn, expect, within, waitFor, userEvent, fireEvent } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Autocomplete from "../index.js";
 import View from "../../View/index.js";
 import Badge from "../../Badge/index.js";
 import useToggle from "../../../hooks/useToggle.js";
-import Modal from "../../Modal/index.js";
-import TextField from "../../TextField/index.js";
-import Text from "../../Text/index.js";
-import Button from "../../Button/index.js";
-import PlusIcon from "../../../icons/Plus.js";
-import Dismissible from "../../Dismissible/index.js";
 import FormControl from "../../FormControl/index.js";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/Autocomplete",
     component: Autocomplete,
@@ -20,16 +16,68 @@ export default {
         },
     },
 };
+export const active = {
+    name: "active, onOpen, onClose",
+    args: {
+        handleClose: fn(),
+        handleOpen: fn(),
+    },
+    render: (args) => {
+        const toggle = useToggle(true);
+        return (<Example>
+				<Example.Item title="active, onOpen, onClose">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" active={toggle.active} onOpen={() => {
+                args.handleOpen();
+                toggle.activate();
+            }} onClose={() => {
+                args.handleClose();
+                toggle.deactivate();
+            }}>
+							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
+                return (<Autocomplete.Item key={v} value={v}>
+										{v}
+									</Autocomplete.Item>);
+            })}
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const input = canvas.getByRole("combobox");
+        const list = await canvas.findByRole("listbox");
+        expect(list).toBeInTheDocument();
+        expect(args.handleOpen).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenLastCalledWith();
+        });
+        await userEvent.click(input);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenLastCalledWith();
+        });
+    },
+};
 export const base = {
-    name: "base",
-    render: () => {
+    name: "onInput, onItemSelect, onBackspace",
+    args: {
+        handleInput: fn(),
+        handleBackspace: fn(),
+        handleItemSelect: fn(),
+    },
+    render: (args) => {
         const [value, setValue] = React.useState("");
         return (<Example>
 				<Example.Item title="Base">
 					<FormControl>
 						<FormControl.Label>Food</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)}>
-							{["Pizza", "Pie", "Ice-cream"].map((v) => {
+						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
+							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
                 return (<Autocomplete.Item key={v} value={v}>
 										{v}
 									</Autocomplete.Item>);
@@ -39,54 +87,148 @@ export const base = {
 				</Example.Item>
 			</Example>);
     },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const input = canvas.getByRole("combobox");
+        // Reset the focus
+        document.body.focus();
+        // Test keyboard selection after focusing the input
+        input.focus();
+        let options = [];
+        await waitFor(() => {
+            options = canvas.getAllByRole("option");
+        });
+        expect(options).toHaveLength(3);
+        await waitFor(() => {
+            expect(options[0]).toHaveAttribute("data-rs-focus");
+        });
+        expect(options[1]).not.toHaveAttribute("data-rs-focus");
+        await userEvent.keyboard("{ArrowDown/}");
+        await userEvent.keyboard("{Enter/}");
+        expect(input).toHaveValue("Pie");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
+            value: "Pie",
+            data: undefined,
+        });
+        // Give browser time to focus on the input
+        await sleep(100);
+        // Test click selection after opening with down arrow
+        await userEvent.keyboard("{ArrowDown/}");
+        await waitFor(() => {
+            options = canvas.getAllByRole("option");
+        });
+        await userEvent.click(options[0]);
+        expect(input).toHaveValue("Pizza");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
+            value: "Pizza",
+        });
+        input.focus();
+        await userEvent.keyboard("{Backspace/}");
+        await waitFor(() => {
+            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
+            expect(args.handleBackspace).toHaveBeenCalledWith();
+        });
+    },
+};
+export const itemData = {
+    name: "item data",
+    args: {
+        handleItemSelect: fn(),
+    },
+    render: (args) => {
+        return (<Example>
+				<Example.Item title="item data">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" onItemSelect={args.handleItemSelect} active>
+							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
+                return (<Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>
+										{v}
+									</Autocomplete.Item>);
+            })}
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const options = await canvas.findAllByRole("option");
+        await userEvent.click(options[0]);
+        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pizza" });
+        await userEvent.click(options[1]);
+        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pie", data: { foo: true } });
+    },
+};
+export const itemDisabled = {
+    name: "item disabled",
+    render: () => {
+        return (<Example>
+				<Example.Item title="item disabled">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" active>
+							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
+                return (<Autocomplete.Item key={v} value={v} disabled={i === 1}>
+										{v}
+									</Autocomplete.Item>);
+            })}
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const input = canvas.getByRole("combobox");
+        const options = await canvas.findAllByRole("option");
+        await fireEvent.click(options[1]);
+        expect(options[1]).toBeDisabled();
+        // Check that focus stays on input when clicking on disabled elements
+        expect(document.activeElement).toBe(input);
+    },
 };
 export const multiselect = {
-    name: "multiselect",
+    name: "test: multiselect",
     render: () => {
+        const options = [
+            "Pizza",
+            "Pie",
+            "Ice-cream",
+            "Fries",
+            "Salad",
+            "Option 4",
+            "Option 5",
+            "Option 6",
+        ];
         const inputRef = React.useRef(null);
-        const [active, setActive] = React.useState(false);
-        const [values, setValues] = React.useState(["foo", "bar"]);
+        const [values, setValues] = React.useState([
+            "Option 4",
+            "Option 5",
+            "Option 6",
+            "Pizza",
+            "Ice-cream",
+        ]);
         const [query, setQuery] = React.useState("");
-        const [customValueQuery, setCustomValueQuery] = React.useState("");
-        const customValueToggle = useToggle();
         const handleDismiss = (dismissedValue) => {
             const nextValues = values.filter((value) => value !== dismissedValue);
             setValues(nextValues);
             inputRef.current?.focus();
         };
-        const handleAddCustomValue = () => {
-            if (customValueQuery.length) {
-                setValues((prev) => [...prev, customValueQuery]);
-            }
-            customValueToggle.deactivate();
-            setCustomValueQuery("");
-        };
         const valuesNode = !!values.length && (<View direction="row" gap={1}>
-				{values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value} size="small">
+				{values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value}>
 						{value}
 					</Badge>))}
 			</View>);
         return (<FormControl>
 				<FormControl.Label>Food</FormControl.Label>
-				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
-                if (!query.length)
-                    handleDismiss(values[values.length - 1]);
-            }} onOpen={() => {
-                setActive(true);
-            }} onClose={(args) => {
-                if (args.reason === "item-selection")
-                    return;
-                setActive(false);
-            }} active={active} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
-                setCustomValueQuery(query);
+				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
                 setQuery("");
-                if (args.value === "_custom") {
-                    customValueToggle.activate();
-                    return;
-                }
                 setValues((prev) => [...prev, args.value]);
             }}>
-					{["Pizza", "Pie", "Ice-cream"].map((v) => {
+					{options.map((v) => {
                 if (!v.toLowerCase().includes(query.toLowerCase()))
                     return;
                 if (values.includes(v))
@@ -95,32 +237,7 @@ export const multiselect = {
 								{v}
 							</Autocomplete.Item>);
             })}
-					{!!query.length && (<Autocomplete.Item value="_custom" icon={PlusIcon}>
-							Add a custom value
-						</Autocomplete.Item>)}
 				</Autocomplete>
-				<Modal onClose={customValueToggle.deactivate} active={customValueToggle.active}>
-					<View gap={4}>
-						<Dismissible onClose={customValueToggle.deactivate} closeAriaLabel="Close modal">
-							<Modal.Title>
-								<Text variant="body-3" weight="medium">
-									Add a custom value
-								</Text>
-							</Modal.Title>
-						</Dismissible>
-						<View direction="row" gap={3} as="form" attributes={{
-                onSubmit: (e) => {
-                    e.preventDefault();
-                    handleAddCustomValue();
-                },
-            }}>
-							<View.Item grow>
-								<TextField name="custom" onChange={(args) => setCustomValueQuery(args.value)} value={customValueQuery}/>
-							</View.Item>
-							<Button type="submit">Add</Button>
-						</View>
-					</View>
-				</Modal>
 			</FormControl>);
     },
 };

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

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ActionableProps } from "../Actionable";
+import type { ActionableProps, ActionableRef } from "../Actionable";
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
 type BaseProps = {
@@ -36,7 +36,9 @@ export type ContainerProps = {
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };
-export type Export = React.ForwardRefExoticComponent<Props> & {
+export type Export = React.ForwardRefExoticComponent<Props & {
+    ref?: ActionableRef;
+}> & {
     Container: React.ComponentType<ContainerProps>;
 };
 export {};

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { IconProps } from "../Icon";
-import type { ActionableProps } from "../Actionable";
+import type { ActionableProps, ActionableRef } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
@@ -28,7 +28,9 @@ export type AlignerProps = BaseAlignerProps & {
      */
     position?: BaseAlignerProps["side"];
 };
-export type Export = React.ForwardRefExoticComponent<Props> & {
+export type Export = React.ForwardRefExoticComponent<Props & {
+    ref?: ActionableRef;
+}> & {
     Aligner: React.ComponentType<AlignerProps>;
     Group: React.ComponentType<GroupProps>;
 };

package/dist/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{isolation:isolate;padding:2px}.cell:hover .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell.--selection-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell-button:before{content:"";inset-block:0;inset-inline-start:-4px;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color;width:4px}.cell-button[disabled]{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}
+@layer rs.calendar.base;@layer rs.calendar.range;@layer rs.calendar.disabled;@layer rs.calendar.base{.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{isolation:isolate;padding:2px}.cell:hover .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell-button:before{content:"";inset-block:0;inset-inline-start:-4px;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color;width:4px}}@layer rs.calendar.selection{.cell.--selection-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%);color:var(--rs-color-foreground-neutral)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}@layer rs.calendar.disabled{.cell-button[disabled]{background-color:transparent;color:var(--rs-color-foreground-disabled)}}

package/dist/components/Checkbox/Checkbox.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
 import IconCheckmark from "../../icons/Checkmark.js";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
-    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const { children, value, onChange, onFocus, onBlur, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;
     const checkboxGroup = useCheckboxGroup();
     const formControl = useFormControl();
     const hasError = formControl?.hasError || props.hasError || checkboxGroup?.hasError;
@@ -19,7 +20,7 @@ const Checkbox = (props) => {
     const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
     const name = checkboxGroup ? checkboxGroup.name : props.name;
     const inputRef = React.useRef(null);
-    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const rootClassName = classNames(s.root, className, size && hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
     const handleChange = (event) => {
         if (!name)
             return;
@@ -36,7 +37,19 @@ const Checkbox = (props) => {
     return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: {
                             ...inputAttributes,
                             ref: inputRef,
-                        } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] }));
+                        } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon, size: responsivePropDependency(size, (size) => {
+                                if (size === "large")
+                                    return 5;
+                                if (size === "small")
+                                    return 3;
+                                return 4;
+                            }) }) })] }), 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 }))] }));
 };
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);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:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:calc(var(--rs-line-height-body-3) * .4)}.decorator:before,.icon{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}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .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 .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+@layer rs.checkbox.base;@layer rs.checkbox.error;@layer rs.checkbox.checked;@layer rs.checkbox.disabled;@layer rs.checkbox.base{.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-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:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;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-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{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}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}}@layer rs.checkbox.error{.root.--error .decorator{border-color:var(--rs-color-border-critical)}}@layer rs.checkbox.checked{.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}}@layer rs.checkbox.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);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}

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

@@ -7,6 +7,7 @@ type BaseProps = {
     hasError?: boolean;
     value?: string;
     indeterminate?: boolean;
+    size?: G.Responsive<"small" | "medium" | "large">;
     onChange?: G.ChangeHandler<boolean>;
     onFocus?: (e: React.FocusEvent) => void;
     onBlur?: (e: React.FocusEvent) => void;

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

@@ -12,5 +12,6 @@ declare const _default: {
 };
 export default _default;
 export declare const selection: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
 export declare const error: () => import("react").JSX.Element;
 export declare const disabled: () => import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Checkbox from "../index.js";
+import View from "../../View/index.js";
 export default {
     title: "Components/Checkbox",
     component: Checkbox,
@@ -34,6 +35,45 @@ export const selection = () => (<Example>
 			</Checkbox>
 		</Example.Item>
 	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: small">
+			<View gap={4} direction="row">
+				<Checkbox name="animal" value="dog" size="small" defaultChecked>
+					Checkbox
+				</Checkbox>
+				<Checkbox name="animal" value="dog" size="small" indeterminate>
+					Checkbox
+				</Checkbox>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: medium">
+			<View gap={4} direction="row">
+				<Checkbox name="animal" value="dog" size="medium" defaultChecked>
+					Checkbox
+				</Checkbox>
+				<Checkbox name="animal" value="dog" size="medium" indeterminate>
+					Checkbox
+				</Checkbox>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: large">
+			<View gap={4} direction="row">
+				<Checkbox name="animal" value="dog" size="large" defaultChecked>
+					Checkbox
+				</Checkbox>
+				<Checkbox name="animal" value="dog" size="large" indeterminate>
+					Checkbox
+				</Checkbox>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: responsive, s: small, m: large">
+			<View gap={4} direction="row">
+				<Checkbox name="animal" value="dog" size={{ s: "small", m: "large" }} defaultChecked>
+					Checkbox
+				</Checkbox>
+			</View>
+		</Example.Item>
+	</Example>);
 export const error = () => (<Example>
 		<Example.Item title="error">
 			<Checkbox name="animal" value="dog" hasError>

package/dist/components/Dismissible/Dismissible.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../utilities/helpers.js";
 import Button from "../Button/index.js";

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -50,7 +50,7 @@ const DropdownMenuItem = (props) => {
         if (onClick)
             onClick(e);
     };
-    return (_jsx(MenuItem, { ...props, roundedCorners: true, className: s.item, attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
+    return (_jsx(MenuItem, { ...props, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 const DropdownMenuSubMenu = (props) => {
     const { children } = props;

package/dist/components/FormControl/FormControlLabel.js

@@ -7,13 +7,8 @@ const FormControlLabel = (props) => {
     const { children } = props;
     const { attributes, required, group, disabled, size } = useFormControlPrivate();
     const id = `${attributes.id}-label`;
-    const tagProps = group
-        ? { as: "legend", attributes: { id } }
-        : {
-            as: "label",
-            attributes: { id, htmlFor: attributes.id },
-        };
-    return (_jsxs(Text, { ...tagProps, variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, "aria-disabled": disabled, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
+    const TagName = group ? "legend" : "label";
+    return (_jsxs(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, "aria-disabled": disabled, children: [_jsx(TagName, { id: id, htmlFor: group ? undefined : attributes.id, children: children }), required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
 };
 FormControlLabel.displayName = "FormControl.Label";
 export default FormControlLabel;

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { IconProps } from "../Icon";
-import type { ActionableProps } from "../Actionable";
+import type { ActionableProps, ActionableRef } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation"> & {
@@ -18,6 +18,8 @@ export type AlignerProps = {
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };
-export type Export = React.ForwardRefExoticComponent<Props> & {
+export type Export = React.ForwardRefExoticComponent<Props & {
+    ref?: ActionableRef;
+}> & {
     Aligner: React.ComponentType<AlignerProps>;
 };