reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,102 +0,0 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Progress from "../index.js";
-import Button from "../../Button/index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Progress",
-    component: Progress,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/progress",
-        },
-    },
-};
-export const value = {
-    name: "value",
-    render: () => (<Example>
-			<Example.Item title="value: 50">
-				<Progress value={50} ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="value: 20, min: 0, max: 40">
-				<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="value: 50, min: 0, max: 40">
-				<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small, value: 50">
-				<Progress value={50} size="small" ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="size: medium, value: 50">
-				<Progress value={50} size="medium" ariaLabel="rating value"/>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: critical, value: 50">
-				<Progress value={50} color="critical" ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="color: warning, value: 50">
-				<Progress value={50} color="warning" ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="color: positive, value: 50">
-				<Progress value={50} color="positive" ariaLabel="rating value"/>
-			</Example.Item>
-			<Example.Item title="color: media, value: 50">
-				<View padding={4} backgroundColor="black" borderRadius="medium">
-					<Progress value={50} color="media" ariaLabel="rating value"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const duration = {
-    name: "duration",
-    render: () => {
-        const [active, setActive] = React.useState(false);
-        const handleChange = () => {
-            setActive((state) => !state);
-        };
-        return (<Example>
-				<Example.Item title="duration: 2000">
-					<View gap={3}>
-						<View.Item>
-							<Button onClick={handleChange}>Change</Button>
-						</View.Item>
-
-						<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const render = {
-    name: "rendering",
-    render: () => <Progress value={75} min={50} max={100} ariaLabel="progress"/>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByRole("progressbar");
-        expect(el).toBeInTheDocument();
-        expect(el).toHaveAttribute("aria-valuenow", "75");
-        expect(el).toHaveAttribute("aria-valuemin", "50");
-        expect(el).toHaveAttribute("aria-valuemax", "100");
-        expect(el).toHaveAccessibleName("progress");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Progress className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,19 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").ProgressIndicatorProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const color: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const ariaLabel: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,92 +0,0 @@
-import React from "react";
-import { expect } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import ProgressIndicator from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-import Text from "../../Text/index.js";
-import Scrim from "../../Scrim/index.js";
-export default {
-    title: "Components/ProgressIndicator",
-    component: ProgressIndicator,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/progress-indicator",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => {
-        const [activeIndex, setActiveIndex] = React.useState(0);
-        const total = 10;
-        return (<Example>
-				<Example.Item title="base">
-					<View gap={4}>
-						<View direction="row" gap={2} align="center">
-							<Button onClick={() => {
-                setActiveIndex((prev) => Math.max(0, prev - 1));
-            }}>
-								Previous
-							</Button>
-							<Button onClick={() => {
-                setActiveIndex((prev) => Math.min(total - 1, prev + 1));
-            }}>
-								Next
-							</Button>
-							<Text weight="medium">Index: {activeIndex}</Text>
-						</View>
-
-						<View borderRadius="medium" overflow="hidden" width="300px">
-							<Scrim position="bottom" backgroundSlot={<View aspectRatio={16 / 9} backgroundColor="neutral-faded"/>}>
-								<View align="center">
-									<ProgressIndicator total={total} activeIndex={activeIndex} color="media"/>
-								</View>
-							</Scrim>
-						</View>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const color = {
-    name: "color",
-    render: () => {
-        return (<Example>
-				<Example.Item title="color: primary">
-					<ProgressIndicator total={10} activeIndex={5} color="primary"/>
-				</Example.Item>
-				<Example.Item title="color: media">
-					<View borderRadius="medium" overflow="hidden" width="300px">
-						<Scrim position="bottom" backgroundSlot={<View aspectRatio={16 / 9} backgroundColor="neutral-faded"/>}>
-							<View align="center">
-								<ProgressIndicator total={10} activeIndex={5} color="media"/>
-							</View>
-						</Scrim>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const ariaLabel = {
-    name: "ariaLabel",
-    render: () => <ProgressIndicator total={10} className="test-classname" ariaLabel="Progress"/>,
-    play: async ({ canvas }) => {
-        const progress = canvas.getByRole("progressbar");
-        expect(progress).toHaveAttribute("aria-valuenow", "0");
-        expect(progress).toHaveAttribute("aria-valuemin", "0");
-        expect(progress).toHaveAttribute("aria-valuemax", "9");
-        expect(progress).toHaveAccessibleName("Progress");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ProgressIndicator total={10} 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/Radio/tests/Radio.stories.d.ts

@@ -1,35 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").RadioProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const error: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const render: StoryObj;
-export declare const checked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const checkedFalse: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultChecked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultCheckedFalse: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,162 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Radio from "../index.js";
-import View from "../../View/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/Radio",
-    component: Radio,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/radio",
-        },
-    },
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<View gap={4} direction="row">
-					<Radio name="animal" value="dog" size="small" defaultChecked>
-						Radio
-					</Radio>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: medium">
-				<View gap={4} direction="row">
-					<Radio name="animal" value="dog" size="medium">
-						Radio
-					</Radio>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: large">
-				<View gap={4} direction="row">
-					<Radio name="animal" value="dog" size="large">
-						Radio
-					</Radio>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: responsive, s: small, m: large">
-				<View gap={4} direction="row">
-					<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
-						Radio
-					</Radio>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const error = {
-    name: "hasError",
-    render: () => (<Example>
-			<Example.Item title="error">
-				<Radio name="error" value="dog" hasError>
-					Radio
-				</Radio>
-			</Example.Item>
-		</Example>),
-};
-export const render = {
-    name: "name, value",
-    render: () => (<Radio name="test-name" value="test-value">
-			Content
-		</Radio>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).toHaveAttribute("value", "test-value");
-        expect(input).toHaveAttribute("name", "test-name");
-        expect(input).not.toBeChecked();
-    },
-};
-export const checked = {
-    name: "checked, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
-			Content
-		</Radio>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).toBeChecked();
-    },
-};
-export const checkedFalse = {
-    name: "checked false, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
-			Content
-		</Radio>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).not.toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "test-value",
-            checked: true,
-            event: expect.objectContaining({ target: input }),
-        });
-        // Still not checked because it's controlled
-        expect(input).not.toBeChecked();
-    },
-};
-export const defaultChecked = {
-    name: "defaultChecked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
-			Content
-		</Radio>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).toBeChecked();
-    },
-};
-export const defaultCheckedFalse = {
-    name: "defaultChecked false, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
-			Content
-		</Radio>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).not.toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "test-value",
-            checked: true,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toBeChecked();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Radio name="test-name" value="test-value" disabled>
-			Content
-		</Radio>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).toBeDisabled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
-				Content
-			</Radio>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,19 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").RadioGroupProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;

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

@@ -1,77 +0,0 @@
-import RadioGroup from "../index.js";
-import Radio from "../../Radio/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/RadioGroup",
-    component: RadioGroup,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/radio",
-        },
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
-			{/* checked should be ignored */}
-			<Radio value="1" checked={false}>
-				Content
-			</Radio>
-
-			<Radio value="2">Content 2</Radio>
-		</RadioGroup>),
-    play: async ({ canvas, args }) => {
-        const inputs = canvas.getAllByRole("radio");
-        expect(inputs[0]).toBeChecked();
-        await userEvent.click(inputs[1]);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "2",
-            event: expect.objectContaining({ target: inputs[1] }),
-        });
-        // Still checked because it's controlled
-        expect(inputs[0]).toBeChecked();
-        expect(inputs[1]).not.toBeChecked();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
-			{/* checked should be ignored */}
-			<Radio value="1" checked={false}>
-				Content
-			</Radio>
-
-			<Radio value="2">Content 2</Radio>
-		</RadioGroup>),
-    play: async ({ canvas, args }) => {
-        const inputs = canvas.getAllByRole("radio");
-        expect(inputs[0]).toBeChecked();
-        await userEvent.click(inputs[1]);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "2",
-            event: expect.objectContaining({ target: inputs[1] }),
-        });
-        expect(inputs[0]).not.toBeChecked();
-        expect(inputs[1]).toBeChecked();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<RadioGroup name="test-name" disabled>
-			<Radio value="test-value">Content</Radio>
-		</RadioGroup>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("radio");
-        expect(input).toBeDisabled();
-    },
-};

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

@@ -1,34 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        disableWrapper: boolean;
-    };
-};
-export default _default;
-export declare const rtl: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const controlledMode: StoryObj;
-export declare const lightMode: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => void;
-};
-export declare const darkMode: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => void;
-};
-export declare const scoped: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const testScoped: StoryObj;
-export declare const keyboardMode: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};

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

@@ -1,108 +0,0 @@
-import { useState } from "react";
-import { expect, userEvent } from "storybook/test";
-import { useTheme } from "../../Theme/index.js";
-import Button from "../../Button/index.js";
-import Reshaped from "../Reshaped.js";
-export default {
-    title: "Utility components/Reshaped",
-    parameters: {
-        disableWrapper: true,
-    },
-};
-export const rtl = {
-    name: "defaultRTL",
-    render: () => (<Reshaped defaultRTL theme="reshaped" defaultColorMode="dark">
-			Hello
-		</Reshaped>),
-};
-export const controlledMode = {
-    name: "colorMode, controlled",
-    render: () => {
-        const [mode, setMode] = useState("dark");
-        return (<Reshaped theme="reshaped" colorMode={mode}>
-				<Button onClick={() => {
-                setMode(mode === "dark" ? "light" : "dark");
-            }}>
-					Toggle color mode
-				</Button>
-			</Reshaped>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("dark");
-        await userEvent.click(button);
-        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("light");
-    },
-};
-export const lightMode = {
-    name: "defaultColorMode=light",
-    render: () => <Reshaped theme="reshaped">Hello</Reshaped>,
-    play: () => {
-        const theme = document.documentElement.getAttribute("data-rs-theme");
-        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
-        expect(theme).toEqual("reshaped");
-        expect(colorMode).toEqual("light");
-    },
-};
-export const darkMode = {
-    name: "defaultColorMode=dark",
-    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
-			Hello
-		</Reshaped>),
-    play: () => {
-        const theme = document.documentElement.getAttribute("data-rs-theme");
-        const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
-        expect(theme).toEqual("reshaped");
-        expect(colorMode).toEqual("dark");
-    },
-};
-export const scoped = {
-    name: "scoped",
-    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark" scoped>
-			Hello
-		</Reshaped>),
-    play: async () => {
-        const root = document.querySelector("[data-rs-root]");
-        expect(root).toBeInTheDocument();
-        expect(root).not.toBe(document.documentElement);
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(document.documentElement).not.toHaveAttribute("data-rs-theme");
-    },
-};
-const ScopedComponent = () => {
-    const { invertColorMode } = useTheme();
-    return <Button onClick={invertColorMode}>Invert</Button>;
-};
-export const testScoped = {
-    name: "test: scoped switch",
-    render: () => (<Reshaped theme="reshaped">
-			<Reshaped theme="slate" scoped>
-				<ScopedComponent />
-			</Reshaped>
-		</Reshaped>),
-    play: async ({ canvas }) => {
-        const nestedRoot = document.querySelector("[data-rs-root]");
-        const button = canvas.getAllByRole("button")[0];
-        expect(document.documentElement).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
-        expect(nestedRoot).toHaveAttribute("data-rs-theme", "slate");
-        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
-        await userEvent.click(button);
-        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
-        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const keyboardMode = {
-    name: "test: keyboard mode",
-    render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
-			Hello
-		</Reshaped>),
-    play: async () => {
-        const attribute = "data-rs-keyboard";
-        expect(document.documentElement).not.toHaveAttribute(attribute);
-        await userEvent.keyboard("{Tab/}");
-        expect(document.documentElement).toHaveAttribute(attribute);
-        await userEvent.click(document.body);
-        expect(document.documentElement).not.toHaveAttribute(attribute);
-    },
-};