reshaped 3.8.0-canary.0 → 3.8.0-canary.10

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

@@ -3,6 +3,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Progress from "../index.js";
 import Button from "../../Button/index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Progress",
     component: Progress,
@@ -12,55 +13,90 @@ export default {
         },
     },
 };
-export const value = () => (<Example>
-		<Example.Item title="value: 50">
-			<Progress value={50} ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="value: 20, min: 0, max: 40">
-			<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="value: 50, min: 0, max: 40">
-			<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small, value: 50">
-			<Progress value={50} size="small" ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="size: medium, value: 50">
-			<Progress value={50} size="medium" ariaLabel="rating value"/>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: critical, value: 50">
-			<Progress value={50} color="critical" ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="color: warning, value: 50">
-			<Progress value={50} color="warning" ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="color: positive, value: 50">
-			<Progress value={50} color="positive" ariaLabel="rating value"/>
-		</Example.Item>
-		<Example.Item title="color: media, value: 50">
-			<View padding={4} backgroundColor="black" borderRadius="medium">
-				<Progress value={50} color="media" ariaLabel="rating value"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const duration = () => {
-    const [active, setActive] = React.useState(false);
-    const handleChange = () => {
-        setActive((state) => !state);
-    };
-    return (<Example>
-			<Example.Item title="duration: 2000">
-				<View gap={3}>
-					<View.Item>
-						<Button onClick={handleChange}>Change</Button>
-					</View.Item>
-
-					<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
+export const value = {
+    name: "value",
+    render: () => (<Example>
+			<Example.Item title="value: 50">
+				<Progress value={50} ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="value: 20, min: 0, max: 40">
+				<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="value: 50, min: 0, max: 40">
+				<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small, value: 50">
+				<Progress value={50} size="small" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="size: medium, value: 50">
+				<Progress value={50} size="medium" ariaLabel="rating value"/>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: critical, value: 50">
+				<Progress value={50} color="critical" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: warning, value: 50">
+				<Progress value={50} color="warning" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: positive, value: 50">
+				<Progress value={50} color="positive" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: media, value: 50">
+				<View padding={4} backgroundColor="black" borderRadius="medium">
+					<Progress value={50} color="media" ariaLabel="rating value"/>
 				</View>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+export const duration = {
+    name: "duration",
+    render: () => {
+        const [active, setActive] = React.useState(false);
+        const handleChange = () => {
+            setActive((state) => !state);
+        };
+        return (<Example>
+				<Example.Item title="duration: 2000">
+					<View gap={3}>
+						<View.Item>
+							<Button onClick={handleChange}>Change</Button>
+						</View.Item>
+
+						<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => <Progress value={75} min={50} max={100} ariaLabel="progress"/>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("progressbar");
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute("aria-valuenow", "75");
+        expect(el).toHaveAttribute("aria-valuemin", "50");
+        expect(el).toHaveAttribute("aria-valuemax", "100");
+        expect(el).toHaveAccessibleName("progress");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Progress className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };

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

@@ -1 +1 @@
-.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}@media (hover:hover) and (pointer:fine){.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)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.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)}.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)}}
+.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}@media (hover:hover) and (pointer:fine){.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-shadow-focus)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.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)}.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)}}

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").RadioProps>;
@@ -8,7 +10,26 @@ 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;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const error: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const checked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const checkedFalse: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultChecked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultCheckedFalse: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,6 +1,7 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Radio from "../index.js";
 import View from "../../View/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Radio",
     component: Radio,
@@ -10,71 +11,152 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<Radio name="unselected" value="dog">
-				Radio
-			</Radio>
-		</Example.Item>
-
-		<Example.Item title="checked, uncontrolled">
-			<Radio name="uncontrolled" value="dog" defaultChecked>
-				Radio
-			</Radio>
-		</Example.Item>
-
-		<Example.Item title="checked, controlled">
-			<Radio name="controlled" value="dog" checked>
-				Radio
-			</Radio>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="small" defaultChecked>
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="medium">
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="large">
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: responsive, s: small, m: large">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="small" defaultChecked>
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="medium">
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="large">
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: responsive, s: small, m: large">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
+    name: "hasError",
+    render: () => (<Example>
+			<Example.Item title="error">
+				<Radio name="error" value="dog" hasError>
 					Radio
 				</Radio>
-			</View>
-		</Example.Item>
-	</Example>);
-export const error = () => (<Example>
-		<Example.Item title="error">
-			<Radio name="error" value="dog" hasError>
-				Radio
-			</Radio>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<Radio name="disabled" value="dog" disabled>
-				Radio
-			</Radio>
-		</Example.Item>
-		<Example.Item title="disabled, checked">
-			<Radio name="disabled-checked" value="dog" disabled checked>
-				Radio
+			</Example.Item>
+		</Example>),
+};
+export const render = {
+    name: "name, value",
+    render: () => (<Radio name="test-name" value="test-value">
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const checkedFalse = {
+    name: "checked false, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        // Still not checked because it's controlled
+        expect(input).not.toBeChecked();
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const defaultCheckedFalse = {
+    name: "defaultChecked false, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Radio name="test-name" value="test-value" disabled>
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
+				Content
 			</Radio>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").RadioGroupProps>;
@@ -8,5 +10,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

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

@@ -1,7 +1,6 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
 import RadioGroup from "../index.js";
 import Radio from "../../Radio/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/RadioGroup",
     component: RadioGroup,
@@ -11,41 +10,68 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<RadioGroup name="unselected">
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
 
-		<Example.Item title="checked, uncontrolled">
-			<RadioGroup name="uncontrolled" defaultValue={"dog"}>
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
 
-		<Example.Item title="checked, controlled">
-			<RadioGroup name="controlled" value={"dog"}>
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<RadioGroup name="disabled" disabled>
-				<View gap={3}>
-					<Radio value="dog">Dog</Radio>
-					<Radio value="cat">Cat</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
-	</Example>);
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).not.toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<RadioGroup name="test-name" disabled>
+			<Radio value="test-value">Content</Radio>
+		</RadioGroup>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ScrimProps>;
@@ -8,5 +9,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => import("react").JSX.Element;
-export declare const composition: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;
+export declare const composition: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};