reshaped 3.8.0-canary.7 → 3.8.0-canary.8

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

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

@@ -1,7 +1,7 @@
-import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").AlertProps>;
+    component: import("react").FC<import("./..").AlertProps>;
     parameters: {
         iframe: {
             url: string;
@@ -11,13 +11,14 @@ declare const _default: {
 export default _default;
 export declare const color: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const inline: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
 export declare const bleed: {
     name: string;
-    render: () => React.JSX.Element;
+    render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;

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

@@ -1,8 +1,8 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Alert from "../index.js";
 import Link from "../../Link/index.js";
 import IconZap from "../../../icons/Zap.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Alert",
     component: Alert,
@@ -63,3 +63,16 @@ export const bleed = {
 			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Alert className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Alert>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid transparent;border-radius:var(--rs-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:1px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -42,3 +42,8 @@ export declare const container: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -282,3 +282,37 @@ export const container = {
 			</Example>);
     },
 };
+export const href = {
+    name: "href",
+    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
+			Badge
+		</Badge>),
+    play: async ({ canvas }) => {
+        const link = canvas.getByRole("link");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Badge color="primary" 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");
+    },
+};

package/dist/components/Breadcrumbs/tests/Breadcrumbs.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("./..").BreadcrumbsProps> & {
@@ -26,11 +28,13 @@ export declare const slots: {
     name: string;
     render: () => import("react").JSX.Element;
 };
-export declare const collapsed: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
+export declare const collapsed: StoryObj;
 export declare const multiline: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const href: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,3 +1,4 @@
+import { expect, fn, userEvent } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Breadcrumbs from "../index.js";
 import Badge from "../../Badge/index.js";
@@ -84,7 +85,7 @@ export const slots = {
 		</Example>),
 };
 export const collapsed = {
-    name: "collapse",
+    name: "collapsed",
     render: () => (<Example>
 			<Example.Item title="collapsed, 3 items shown by default">
 				<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumbs one" expandAriaLabel="Expand items">
@@ -116,6 +117,18 @@ export const collapsed = {
 				</Breadcrumbs>
 			</Example.Item>
 		</Example>),
+    play: async ({ canvas }) => {
+        let triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveAccessibleName("Expand items");
+        expect(triggers[2]).toHaveTextContent("Item 4");
+        await userEvent.click(triggers[1]);
+        triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveTextContent("Item 2");
+        expect(triggers[2]).toHaveTextContent("Item 3");
+        expect(triggers[3]).toHaveTextContent("Item 4");
+    },
 };
 export const multiline = {
     name: "composition, multiline",
@@ -129,3 +142,46 @@ export const multiline = {
 			</Example.Item>
 		</Example>),
 };
+export const onClick = {
+    name: "item, onClick, disabled",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Breadcrumbs>
+			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={args.handleClick} disabled>
+				Trigger
+			</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ args, canvas }) => {
+        const triggers = canvas.getAllByRole("button");
+        await userEvent.click(triggers[0]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: triggers[0] }));
+        await userEvent.click(triggers[1]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+    },
+};
+export const href = {
+    name: "item, href",
+    render: () => (<Breadcrumbs>
+			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ canvas }) => {
+        const triggers = canvas.getAllByRole("link");
+        expect(triggers[0]).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
+				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Button/tests/Button.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("../Button.types").Export;
@@ -8,15 +10,55 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variantAndColor: () => import("react").JSX.Element;
-export declare const icon: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const elevated: () => import("react").JSX.Element;
-export declare const rounded: () => import("react").JSX.Element;
-export declare const fullWidth: () => import("react").JSX.Element;
-export declare const loading: () => import("react").JSX.Element;
-export declare const highlighted: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const group: () => import("react").JSX.Element;
-export declare const aligner: () => import("react").JSX.Element;
-export declare const composition: () => import("react").JSX.Element;
+export declare const variantAndColor: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const icon: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const elevated: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const rounded: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const fullWidth: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const loading: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const highlighted: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const disabled: StoryObj;
+export declare const aligner: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const composition: {
+    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 as: StoryObj;
+export declare const className: StoryObj;
+export declare const group: StoryObj;
+export declare const groupClassName: StoryObj;