reshaped 3.8.0-canary.2 → 3.8.0-canary.21

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

@@ -4,6 +4,7 @@ import Icon from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
 import IconMic from "../../../icons/Mic.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Icon",
     component: Icon,
@@ -69,7 +70,7 @@ export const color = {
 		</Example>),
 };
 export const autoWidth = {
-    name: "autoWidth",
+    name: "autoWidth, blank",
     render: () => (<Example>
 			<Example.Item title="square boundaries">
 				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
@@ -81,5 +82,32 @@ export const autoWidth = {
 					<Icon svg={IconMic} size={10} autoWidth/>
 				</div>
 			</Example.Item>
+			<Example.Item title="blank">
+				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
+					<Icon svg={null} size={10}/>
+				</div>
+			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Icon svg={IconZap} className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const render = {
+    name: "test: hidden from sr",
+    render: () => (<div data-testid="root">
+			<Icon svg={IconZap}/>
+		</div>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toBeInTheDocument();
+        expect(root).toHaveAttribute("aria-hidden");
+    },
+};

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ActionableRef } from "../Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "children" | "className" | "attributes" | "type" | "href" | "onClick" | "stopPropagation"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "children" | "className" | "attributes" | "render" | "type" | "href" | "onClick" | "stopPropagation"> & {
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

package/dist/components/Link/Link.js

@@ -5,9 +5,9 @@ import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
-    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, } = props;
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
-    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, stopPropagation: stopPropagation, children: [icon && _jsx(Icon, { svg: icon }), children] }));
+    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, stopPropagation: stopPropagation, render: render, children: [icon && _jsx(Icon, { svg: icon }), children] }));
 });
 Link.displayName = "Link";
 export default Link;

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

@@ -1,6 +1,6 @@
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation" | "render"> & {
     /** Icon at the start position */
     icon?: IconProps["svg"];
     /** Link color, based on the color tokens

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

@@ -1,6 +1,8 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href" | "stopPropagation"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";
@@ -12,8 +14,29 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const withIcon: () => import("react").JSX.Element;
-export declare const testMultilineInText: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const icon: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const render: StoryObj;
+export declare const className: StoryObj;
+export declare const testMultilineInText: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -2,6 +2,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Link from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Link",
     component: Link,
@@ -11,62 +12,144 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="variant: underline">
-			<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
-				Reshaped
-			</Link>
-		</Example.Item>
-		<Example.Item title="variant: plain">
-			<Link onClick={() => { }} variant="plain">
-				Link
-			</Link>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: primary">
-			<Link color="primary">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Link color="critical">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Link color="positive">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: warning">
-			<Link color="warning">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: inherit">
-			<Link color="inherit">Link</Link>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<Link disabled>Link</Link>
-		</Example.Item>
-	</Example>);
-export const withIcon = () => (<Example>
-		<Example.Item title="icon, variant: underline">
-			<Link icon={IconZap}>Link</Link>
-		</Example.Item>
-		<Example.Item title="icon, variant: plain">
-			<Link icon={IconZap} variant="plain">
-				Link
-			</Link>
-		</Example.Item>
-		<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
-			<Text variant="title-3">
-				<Link icon={IconZap} variant="underline">
-					Instant delivery
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: underline">
+				<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
+					Reshaped
+				</Link>
+			</Example.Item>
+			<Example.Item title="variant: plain">
+				<Link onClick={() => { }} variant="plain">
+					Link
+				</Link>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Link color="primary">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Link color="critical">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Link color="positive">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Link color="warning">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: inherit">
+				<Link color="inherit">Link</Link>
+			</Example.Item>
+		</Example>),
+};
+export const icon = {
+    name: "icon",
+    render: () => (<Example>
+			<Example.Item title="icon, variant: underline">
+				<Link icon={IconZap}>Link</Link>
+			</Example.Item>
+			<Example.Item title="icon, variant: plain">
+				<Link icon={IconZap} variant="plain">
+					Link
 				</Link>
-			</Text>
-		</Example.Item>
-	</Example>);
-export const testMultilineInText = () => (<Example>
-		<Example.Item title="should wrap inside the text">
-			<div>
-				Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
-				<Link href="/">this very very long link</Link> to it.
-			</div>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+			<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
+				<Text variant="title-3">
+					<Link icon={IconZap} variant="underline">
+						Instant delivery
+					</Link>
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+export const href = {
+    name: "href",
+    render: () => <Link href="https://reshaped.so">Trigger</Link>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Link onClick={args.handleClick}>Trigger</Link>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Link onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</Link>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Link disabled onClick={() => { }}>
+			Trigger
+		</Link>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const render = {
+    name: "render",
+    render: () => <Link render={(props) => <section {...props}/>}>Trigger</Link>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SECTION");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Link className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</Link>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const testMultilineInText = {
+    name: "test: multiline",
+    render: () => (<Example>
+			<Example.Item title="should wrap inside the text">
+				<div>
+					Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
+					<Link href="/">this very very long link</Link> to it.
+				</div>
+			</Example.Item>
+		</Example>),
+};

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

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

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Loader from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Loader",
     component: Loader,
@@ -9,33 +10,59 @@ export default {
         },
     },
 };
-export const size = () => {
-    return (<Example>
-			<Example.Item title="size: medium">
-				<Loader size="medium" ariaLabel="Loading"/>
+export const size = {
+    name: "size",
+    render: () => {
+        return (<Example>
+				<Example.Item title="size: medium">
+					<Loader size="medium" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: small">
+					<Loader size="small" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: large">
+					<Loader size="large" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
+					<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Loader ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title="size: small">
-				<Loader size="small" ariaLabel="Loading"/>
+			<Example.Item title="color: critical">
+				<Loader color="critical" ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title="size: large">
-				<Loader size="large" ariaLabel="Loading"/>
+			<Example.Item title="color: positive">
+				<Loader color="positive" ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-				<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
+			<Example.Item title="color: inherit">
+				<Loader color="inherit" ariaLabel="Loading"/>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+export const ariaLabel = {
+    name: "ariaLabel",
+    render: () => <Loader ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root");
+        expect(root).toHaveAttribute("aria-live", "assertive");
+        expect(root).toHaveAttribute("aria-label", "Loading");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Loader className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };
-export const color = () => (<Example>
-		<Example.Item title="color: primary">
-			<Loader ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Loader color="critical" ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Loader color="positive" ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: inherit">
-			<Loader color="inherit" ariaLabel="Loading"/>
-		</Example.Item>
-	</Example>);

package/dist/components/MenuItem/MenuItem.js

@@ -7,11 +7,11 @@ import View from "../View/index.js";
 import MenuItemAligner from "./MenuItemAligner.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
-    const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
+    const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, render, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
     const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
     const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
-    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, render: render, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
 });
 MenuItem.Aligner = MenuItemAligner;
 MenuItem.displayName = "MenuItem";

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{background-color:rgba(var(--rs-color-rgb-background-neutral),32%);box-shadow:none}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -3,7 +3,7 @@ import type { IconProps } from "../Icon";
 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"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation" | "render"> & {
     /** Component color, based on the color tokens */
     color?: "neutral" | "critical" | "primary";
     /** Icon at the start position */

package/dist/components/MenuItem/tests/MenuItem.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("../MenuItem.types").Export;
@@ -8,10 +10,38 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const size: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const selected: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const roundedCorners: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const aligner: () => import("react").JSX.Element;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const selected: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const roundedCorners: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const slots: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const aligner: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const as: StoryObj;
+export declare const className: StoryObj;
+export declare const alignerClassName: StoryObj;