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

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenProps>;
@@ -12,3 +13,4 @@ export declare const visibility: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const as: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Hidden from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Hidden",
     component: Hidden,
@@ -37,3 +38,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const as = {
+    name: "as",
+    render: () => <Hidden as="span">Content</Hidden>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el.tagName).toEqual("SPAN");
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenVisuallyProps>;
@@ -12,3 +13,4 @@ export declare const visibility: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const children: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import HiddenVisually from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/HiddenVisually",
     component: HiddenVisually,
@@ -17,3 +18,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const children = {
+    name: "children",
+    render: () => <HiddenVisually>Content</HiddenVisually>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el).toBeInTheDocument();
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("..").HotkeyProps>;
@@ -9,3 +10,4 @@ declare const _default: {
 };
 export default _default;
 export declare const base: () => import("react").JSX.Element;
+export declare const className: StoryObj;

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

@@ -3,6 +3,7 @@ import useHotkeys from "../../../hooks/useHotkeys.js";
 import View from "../../View/index.js";
 import TextField from "../../TextField/index.js";
 import Hotkey from "../Hotkey.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Hotkey",
     component: Hotkey,
@@ -36,3 +37,17 @@ export const base = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Hotkey className="test-classname" attributes={{ id: "test-id" }}>
+				⌘K
+			</Hotkey>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root?.tagName).toBe("KBD");
+    },
+};

package/dist/components/Icon/Icon.js

@@ -7,11 +7,11 @@ const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
     const mixinStyles = resolveMixin({ height: size });
     const rootClassName = classNames(s.root, className, mixinStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
-    const icon = React.isValidElement(Component) ? Component : _jsx(Component, {});
+    const icon = React.isValidElement(Component) || Component === null ? Component : _jsx(Component, {});
     const style = { ...attributes?.style, ...mixinStyles.variables };
     return (
     // All icons are decorative, a11y attributes should be set for buttons wrapping them
-    _jsx("span", { ...attributes, "aria-hidden": "true", className: rootClassName, style: style, children: React.cloneElement(icon, { focusable: false }) }));
+    _jsx("span", { ...attributes, "aria-hidden": "true", className: rootClassName, style: style, children: icon && React.cloneElement(icon, { focusable: false }) }));
 };
 Icon.displayName = "Icon";
 export default Icon;

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Icon svg component or node */
-    svg: React.ReactElement | React.ComponentType;
+    svg: React.ReactElement | React.ComponentType | null;
     /** Icon size, literal css value or unit token multiplier */
     size?: G.Responsive<number | string>;
     /** Icon color, based on the color tokens */

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").IconProps>;
@@ -20,3 +21,5 @@ export declare const autoWidth: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;
+export declare const render: StoryObj;

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/Link/tests/Link.test.stories.d.ts

@@ -1,8 +1,6 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 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";
@@ -17,13 +15,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const children: StoryObj;
-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 className: StoryObj;

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

@@ -1,4 +1,3 @@
-import { userEvent, expect, fn } from "storybook/test";
 import Link from "../index.js";
 export default {
     title: "Components/Link/tests",
@@ -10,78 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const children = {
-    name: "children",
-    render: () => <Link>Trigger</Link>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByText("Trigger");
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe("SPAN");
-    },
-};
-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 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");
-    },
-};

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;