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

package/dist/components/Card/Card.module.css

@@ -1 +1 @@
-.root{--rs-border-w:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;position:relative;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{box-shadow:var(--rs-focus-shadow)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover:before{opacity:1}}
+.root{--rs-card-shadow-border:0 0 0 1px var(--rs-color-border-neutral-faded);--rs-card-shadow-elevation:0 0 transparent;background:var(--rs-color-background-elevation-base);box-shadow:var(--rs-card-shadow-border),var(--rs-card-shadow-elevation);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;position:relative;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{--rs-card-shadow-elevation:var(--rs-shadow-raised);background:var(--rs-color-background-elevation-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{--rs-card-shadow-border:var(--rs-shadow-focus)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover:before{opacity:1}}

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<{
@@ -22,9 +24,29 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const padding: () => React.JSX.Element;
-export declare const actionable: () => React.JSX.Element;
-export declare const selected: () => React.JSX.Element;
-export declare const elevated: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
-export declare const height: () => React.JSX.Element;
+export declare const padding: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const selected: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const elevated: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const bleed: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const height: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const href: StoryObj;
+export declare const as: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Card from "../index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Card",
     component: Card,
@@ -10,71 +11,115 @@ export default {
         },
     },
 };
-export const padding = () => (<Example>
-		<Example.Item title="padding: default">
-			<Card>
-				<Placeholder />
-			</Card>
-		</Example.Item>
+export const padding = {
+    name: "padding",
+    render: () => (<Example>
+			<Example.Item title="padding: default">
+				<Card>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-		<Example.Item title="padding: 2">
-			<Card padding={2}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
+			<Example.Item title="padding: 2">
+				<Card padding={2}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-		<Example.Item title="padding: 0">
-			<Card padding={0}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
+			<Example.Item title="padding: 0">
+				<Card padding={0}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-		<Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
-			<Card padding={{ s: 4, m: 8 }}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-	</Example>);
-export const actionable = () => (<Example>
-		<Example.Item title="button role">
-			<Card onClick={() => { }} attributes={{ "aria-label": "action" }}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-		<Example.Item title="link role">
-			<Card href="#" attributes={{ "aria-label": "action" }}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-	</Example>);
-export const selected = () => (<Example>
-		<Example.Item title="selected">
-			<Card selected>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-	</Example>);
-export const elevated = () => (<Example>
-		<Example.Item title="elevated">
-			<Card elevated>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-	</Example>);
-export const bleed = () => (<Example>
-		<Example.Item title="bleed: 4">
-			<Card bleed={4}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-		<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
-			<Card bleed={{ s: 4, m: 0 }}>
-				<Placeholder />
-			</Card>
-		</Example.Item>
-	</Example>);
-export const height = () => (<Example>
-		<Example.Item title="height: 200px">
-			<Card height="200px"/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
+				<Card padding={{ s: 4, m: 8 }}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
+};
+export const selected = {
+    name: "selected",
+    render: () => (<Example>
+			<Example.Item title="selected">
+				<Card selected>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
+};
+export const elevated = {
+    name: "elevated",
+    render: () => (<Example>
+			<Example.Item title="elevated">
+				<Card elevated>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
+};
+export const bleed = {
+    name: "bleed",
+    render: () => (<Example>
+			<Example.Item title="bleed: 4">
+				<Card bleed={4}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+			<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
+				<Card bleed={{ s: 4, m: 0 }}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
+};
+export const height = {
+    name: "height",
+    render: () => (<Example>
+			<Example.Item title="height: 200px">
+				<Card height="200px"/>
+			</Example.Item>
+		</Example>),
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <Card href="https://reshaped.so">Trigger</Card>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const as = {
+    name: "as",
+    render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("root");
+        expect(root.tagName).toBe("SPAN");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Card 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/Carousel/Carousel.module.css

@@ -1 +1 @@
-.root{isolation:isolate;position:relative;width:100%}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);outline:none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}[data-rs-keyboard] .scroll:focus{box-shadow:var(--rs-focus-shadow)}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
+.root{isolation:isolate;position:relative;width:100%}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);outline:none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}[data-rs-keyboard] .scroll:focus{box-shadow:var(--rs-shadow-focus)}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

package/dist/components/Checkbox/Checkbox.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-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:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:var(--rs-radius-circular);content:"";height:1.5px;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-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{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}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{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);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}
+.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-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:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:var(--rs-radius-circular);content:"";height:1.5px;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-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{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}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-shadow-focus)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{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);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}

package/dist/components/Checkbox/tests/Checkbox.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("./..").CheckboxProps>;
@@ -8,7 +10,21 @@ 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 render: StoryObj;
+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 disabled: StoryObj;
+export declare const checked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultChecked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const indeterminate: StoryObj;
+export declare const className: StoryObj;

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

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

package/dist/components/CheckboxGroup/tests/CheckboxGroup.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("./..").CheckboxGroupProps>;
@@ -8,5 +10,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;