reshaped 3.9.0-canary.0 → 3.9.0-canary.2

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

@@ -1,31 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").FormControlProps> & {
-        Label: import("react").FC<import("../FormControl.types").LabelProps>;
-        Helper: import("react").FC<import("../FormControl.types").CaptionProps>;
-        Error: import("react").FC<import("../FormControl.types").CaptionProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const status: StoryObj;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const disabled: StoryObj;
-export declare const required: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const composition: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;
-export declare const group: StoryObj;

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

@@ -1,143 +0,0 @@
-import { expect } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import FormControl from "../index.js";
-import TextField from "../../TextField/index.js";
-import View from "../../View/index.js";
-import RadioGroup from "../../RadioGroup/index.js";
-import Radio from "../../Radio/index.js";
-export default {
-    title: "Utility components/FormControl",
-    component: FormControl,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/form-control",
-        },
-    },
-};
-export const status = {
-    name: "status",
-    render: () => (<Example>
-			<Example.Item title="status: default">
-				<FormControl>
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-					<FormControl.Error>Error</FormControl.Error>
-				</FormControl>
-			</Example.Item>
-
-			<Example.Item title="status: error">
-				<FormControl hasError>
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-					<FormControl.Error>Error</FormControl.Error>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const inputs = canvas.getAllByRole("textbox");
-        expect(inputs[0]).toHaveAccessibleName("Label");
-        expect(inputs[0]).toHaveAccessibleDescription("Caption");
-        expect(inputs[1]).toHaveAccessibleName("Label");
-        expect(inputs[1]).toHaveAccessibleDescription("Caption Error");
-    },
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: medium">
-				<FormControl size="medium">
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-				</FormControl>
-			</Example.Item>
-
-			<Example.Item title="size: large">
-				<FormControl size="large">
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name" size="large"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled">
-				<FormControl disabled>
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const required = {
-    name: "required",
-    render: () => (<Example>
-			<Example.Item title="required">
-				<FormControl required>
-					<FormControl.Label>Label</FormControl.Label>
-					<TextField name="name"/>
-					<FormControl.Helper>Caption</FormControl.Helper>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-};
-export const composition = {
-    name: "test: composition",
-    render: () => (<Example>
-			<Example.Item title="horizontal">
-				<FormControl>
-					<View direction="row" gap={10} align="center">
-						<View width="100px">
-							<FormControl.Label>Label</FormControl.Label>
-						</View>
-						<View.Item grow>
-							<TextField name="name" placeholder="Enter value"/>
-						</View.Item>
-					</View>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<FormControl id="test-id" hasError>
-			<FormControl.Label>Label</FormControl.Label>
-			<TextField name="name"/>
-			<FormControl.Helper>Caption</FormControl.Helper>
-			<FormControl.Error>Error</FormControl.Error>
-		</FormControl>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        const label = canvas.getByText("Label");
-        expect(input).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
-        expect(label).toHaveAttribute("for", "test-id");
-        expect(label).toHaveAttribute("id", `test-id-label`);
-    },
-};
-export const group = {
-    name: "group",
-    render: () => (<FormControl group>
-			<FormControl.Label>Label</FormControl.Label>
-			<RadioGroup name="name">
-				<View gap={2}>
-					<Radio value="1">One</Radio>
-					<Radio value="2">Two</Radio>
-				</View>
-			</RadioGroup>
-		</FormControl>),
-    play: async ({ canvas }) => {
-        const group = canvas.getByRole("group");
-        expect(group).toBeInTheDocument();
-    },
-};

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

@@ -1,38 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
-        displayName: string;
-    } & {
-        Item: typeof import("../Grid").GridItem;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const layout: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const itemLayout: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const areas: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const auto: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const as: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,245 +0,0 @@
-import { expect } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Grid from "../index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Grid",
-    component: Grid,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/grid",
-        },
-    },
-};
-export const base = {
-    name: "gap, columnGap, rowGap, align, justify, maxWidth, width, height",
-    render: () => (<Example>
-			<Example.Item title="gap: 2">
-				<Grid gap={2} columns={2}>
-					{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="columnGap: 2, rowGap: 4">
-				<Grid columnGap={2} rowGap={4} columns={2}>
-					{[1, 2, 3, 4].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="align: center">
-				<Grid gap={2} columns={2} align="center">
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						1
-					</View>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
-						2
-					</View>
-				</Grid>
-			</Example.Item>
-			<Example.Item title="justify: center">
-				<Grid gap={2} columns="200px 200px" justify="center">
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						1
-					</View>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						2
-					</View>
-				</Grid>
-			</Example.Item>
-
-			<Example.Item title="maxWidth: 400px">
-				<Grid gap={2} columns="200px 200px" maxWidth="400px">
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						1
-					</View>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						2
-					</View>
-				</Grid>
-			</Example.Item>
-
-			<Example.Item title="width: 400px, height: 200px">
-				<Grid gap={2} columns={2} width="400px" height="200px">
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						1
-					</View>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-						2
-					</View>
-				</Grid>
-			</Example.Item>
-		</Example>),
-};
-export const layout = {
-    name: "rows, columns",
-    render: () => (<Example>
-			<Example.Item title="simple: 2 rows, 3 columns">
-				<Grid gap={4} columns={3} rows={2}>
-					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="columns template, 1fr 2fr 1fr">
-				<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
-					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="rows template, 1fr 2fr">
-				<Grid gap={4} columns={3} rows="1fr 2fr">
-					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="responsive">
-				<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
-					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-		</Example>),
-};
-export const itemLayout = {
-    name: "colStart, colEnd, rowStart, rowEnd",
-    render: () => (<Example>
-			<Example.Item title="column, start 1, end 3">
-				<Grid gap={4} columns={3} rows={2}>
-					<Grid.Item colStart={1} colEnd={3}>
-						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							1
-						</View>
-					</Grid.Item>
-					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="column, start 1, span 2">
-				<Grid gap={4} columns={3} rows={2}>
-					<Grid.Item colStart={1} colSpan={2}>
-						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							1
-						</View>
-					</Grid.Item>
-					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-
-			<Example.Item title="row, start 1, end 3">
-				<Grid gap={4} columns={3} rows={2}>
-					<Grid.Item rowStart={1} rowEnd={3}>
-						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							1
-						</View>
-					</Grid.Item>
-					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-
-			<Example.Item title="row, start 1, span 2">
-				<Grid gap={4} columns={3} rows={2}>
-					<Grid.Item rowStart={1} rowSpan={2}>
-						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							1
-						</View>
-					</Grid.Item>
-					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-
-			<Example.Item title="responsive">
-				<Grid gap={4} columns={3} rows={2}>
-					<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
-						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							1
-						</View>
-					</Grid.Item>
-					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-		</Example>),
-};
-export const areas = {
-    name: "areas",
-    render: () => (<Example>
-			<Example.Item title="simple: 2 rows, 3 columns">
-				<Grid gap={4} rows={2} areas={["a .", "a b"]}>
-					{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
-							<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-								{area}
-							</View>
-						</Grid.Item>))}
-				</Grid>
-			</Example.Item>
-		</Example>),
-};
-export const auto = {
-    name: "autoFlow, autoColumns, autoRows",
-    render: () => (<Example>
-			<Example.Item title="auto flow: column">
-				<Grid gap={4} autoFlow="column" rows={2} columns={2}>
-					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="auto rows">
-				<Grid gap={4} autoRows="100px" columns={2}>
-					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-			<Example.Item title="auto columns">
-				<Grid gap={4} autoColumns="100px" autoFlow="column">
-					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-							{i}
-						</View>))}
-				</Grid>
-			</Example.Item>
-		</Example>),
-};
-export const as = {
-    name: "as",
-    render: () => (<Grid as="ul">
-			<Grid.Item as="li">Content</Grid.Item>
-		</Grid>),
-    play: ({ canvas }) => {
-        const ul = canvas.getByRole("list");
-        const li = canvas.getByRole("listitem");
-        expect(ul).toBeInTheDocument();
-        expect(li).toBeInTheDocument();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Grid className="test-class" attributes={{ id: "test-id" }}>
-				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
-					Content
-				</Grid.Item>
-			</Grid>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const item = root?.firstChild;
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(root).toHaveClass("test-class");
-        expect(item).toHaveAttribute("id", "test-item-id");
-        expect(item).toHaveClass("test-item-class");
-    },
-};

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

@@ -1,16 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").HiddenProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-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,48 +0,0 @@
-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,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/hidden",
-        },
-    },
-};
-export const visibility = {
-    name: "visibility",
-    render: () => (<Example>
-			<Example.Item title="hide: always">
-				<Hidden hide={true}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="shown on s">
-				<Hidden hide={{ s: false, m: true }}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="shown on l/xl">
-				<Hidden hide={{ s: true, l: false }}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="shown on m/l/xl">
-				<Hidden hide={{ s: true, m: false }}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="shown on m">
-				<Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="shown on s/xl">
-				<Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>
-			</Example.Item>
-			<Example.Item title="hide: always, visibility">
-				<Hidden hide visibility>
-					Content
-				</Hidden>
-			</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,16 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").HiddenVisuallyProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-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,28 +0,0 @@
-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,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/hidden-visually",
-        },
-    },
-};
-export const visibility = {
-    name: "visibility",
-    render: () => (<Example>
-			<Example.Item title="pronounced by screen readers">
-				<HiddenVisually>Screen-reader only</HiddenVisually>
-			</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,13 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("..").HotkeyProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const className: StoryObj;

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

@@ -1,53 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-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,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/hotkey",
-        },
-    },
-};
-const Demo = () => {
-    const { checkHotkeyState } = useHotkeys({
-        "Meta+v": () => {
-            console.log("meta v");
-        },
-        "Mod+v": () => {
-            console.log("mod v");
-        },
-    });
-    return <Hotkey active={checkHotkeyState("k")}>⌘K</Hotkey>;
-};
-export const base = () => (<Example>
-		<Example.Item title="Base">
-			<Demo />
-		</Example.Item>
-		<Example.Item title="Active">
-			<Hotkey active>⌘K</Hotkey>
-		</Example.Item>
-		<Example.Item title="Inside input slot">
-			<View width="300px">
-				<TextField name="hey" endSlot={<Demo />} inputAttributes={{ "aria-label": "hotkey test" }}/>
-			</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/tests/Icon.stories.d.ts

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").IconProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-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 autoWidth: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;
-export declare const render: StoryObj;