reshaped 3.8.0-canary.1 → 3.8.0-canary.11

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

@@ -1,8 +1,10 @@
-import { userEvent } from "storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
 import useToggle from "../../../hooks/useToggle.js";
+import React from "react";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Utility components/Overlay",
     component: Overlay,
@@ -66,3 +68,135 @@ export const blurred = {
         await userEvent.click(trigger);
     },
 };
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			{(args) => (args.active ? "Opened" : "Closed")}
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Opened");
+        expect(root).toBeInTheDocument();
+    },
+};
+export const handlers = {
+    name: "onOpen, onClose, onAfterOpen, onAfterClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
+    },
+    render: (args) => {
+        const overlayToggle = useToggle();
+        return (<>
+				<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
+				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let overlay;
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
+        });
+        // Close by changing the state after the trigger click
+        await userEvent.click(trigger);
+        // Changing state doesn't trigger onClose
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape}");
+        expect(args.handleClose).toHaveBeenCalledTimes(2);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const overlay = canvas.getByText("Content");
+        await userEvent.click(overlay);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("{Escape}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
+				<Overlay active containerRef={containerRef}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const container = canvas.getByTestId("test-id");
+        const overlay = canvas.getByText("Content");
+        expect(container).toContainElement(overlay);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

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

@@ -1,3 +1,5 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PaginationProps>;
@@ -8,4 +10,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const truncate: () => import("react").JSX.Element;
+export declare const truncate: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const defaultPage: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const page: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Pagination from "../index.js";
+import { expect, fn, userEvent, within } from "storybook/test";
 export default {
     title: "Components/Pagination",
     component: Pagination,
@@ -9,19 +10,96 @@ export default {
         },
     },
 };
-export const truncate = () => {
-    return (<Example>
-			<Example.Item title="start">
-				<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="middle">
-				<Pagination total={10} defaultPage={5} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="end">
-				<Pagination total={10} defaultPage={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-			<Example.Item title="no truncation">
-				<Pagination total={4} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
-			</Example.Item>
-		</Example>);
+export const truncate = {
+    name: "truncate",
+    render: () => {
+        return (<Example>
+				<Example.Item title="start">
+					<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="middle">
+					<Pagination total={10} defaultPage={5} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="end">
+					<Pagination total={10} defaultPage={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+				<Example.Item title="no truncation">
+					<Pagination total={4} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<div data-testid="root">
+			<Pagination total={10} previousAriaLabel="Previous" nextAriaLabel="Next" pageAriaLabel={(args) => `Page ${args.page}`}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        const prevButton = root.getByLabelText("Previous");
+        const nextButton = root.getByLabelText("Next");
+        const firstPageButton = root.getByLabelText("Page 1");
+        expect(buttons.length).toBe(8);
+        expect(prevButton).toEqual(buttons[0]);
+        expect(prevButton).toBeDisabled();
+        expect(nextButton).toEqual(buttons.at(-1));
+        expect(nextButton).not.toBeDisabled();
+        expect(firstPageButton).toBeInTheDocument();
+        expect(firstPageButton).toEqual(pages[0]);
+        expect(firstPageButton).toHaveAttribute("aria-current", "true");
+    },
+};
+export const defaultPage = {
+    name: "defaultPage, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} defaultPage={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        expect(pages[1]).toHaveAttribute("aria-current", "false");
+        expect(pages[2]).toHaveAttribute("aria-current", "true");
+    },
+};
+export const page = {
+    name: "page, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} page={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        // Stays the same because it's controlled
+        expect(pages[1]).toHaveAttribute("aria-current", "true");
+        expect(pages[2]).toHaveAttribute("aria-current", "false");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Pagination className="test-classname" attributes={{ id: "test-id" }} total={10} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };

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

@@ -1,5 +1,5 @@
 import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/internal/test";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PinFieldProps>;

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor } from "storybook/internal/test";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
 import FormControl from "../../FormControl/index.js";

package/dist/components/Popover/Popover.js

@@ -5,11 +5,11 @@ import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
 const Popover = (props) => {
-    const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
+    const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, borderRadius, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode ?? (triggerType === "hover" ? "content-menu" : undefined);
     const mixinStyles = resolveMixin({ padding });
-    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`], mixinStyles.classNames);
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`], borderRadius && s[`content--radius-${borderRadius}`], mixinStyles.classNames);
     return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...mixinStyles.variables } } }));
 };
 const PopoverDismissible = (props) => {

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-border-faded),var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-border-faded),var(--rs-shadow-raised)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

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

@@ -1,13 +1,15 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */
     padding?: number;
     /** Component elevation level */
     elevation?: "raised" | "overlay";
+    /** Border radius for the content */
+    borderRadius?: "small" | "medium";
     /** @deprecated use Flyout utility instead, will be removed in v4 */
     variant?: "elevated" | "headless";
 };

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").ProgressProps>;
@@ -9,7 +10,21 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const value: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const duration: () => React.JSX.Element;
+export declare const value: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const duration: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const className: StoryObj;

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;