reshaped 3.9.0-canary.0 → 3.9.0-canary.10

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

@@ -1,204 +0,0 @@
-import { userEvent, expect, fn } from "storybook/test";
-import { Placeholder } from "../../../utilities/storybook/index.js";
-import Accordion from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Accordion",
-    component: Accordion,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/accordion",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Accordion defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconSize = {
-    name: "iconSize",
-    render: () => (<Accordion iconSize={6}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const iconPosition = {
-    name: "iconPosition",
-    render: () => (<Accordion iconPosition="start">
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-};
-export const gap = {
-    name: "gap",
-    render: () => (<Accordion defaultActive gap={4}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<Placeholder />
-			</Accordion.Content>
-		</Accordion>),
-};
-export const onToggle = {
-    name: "onToggle",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        await userEvent.click(trigger);
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        expect(content).toBeInTheDocument();
-        expect(content.getAttribute("aria-labelledby")).toBe(triggerId);
-        expect(trigger.getAttribute("aria-controls")).toBe(contentId);
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(2);
-        expect(handleToggle).toBeCalledWith(false);
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const active = {
-    name: "active",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} active>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-    },
-};
-export const defaultActive = {
-    name: "defaultActive",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle} defaultActive>
-			<Accordion.Trigger>
-				<Placeholder>Trigger</Placeholder>
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        // Opened by default
-        expect(trigger).toHaveAttribute("aria-expanded", "true");
-        await userEvent.click(trigger);
-        // Calls handle toggle with a new state
-        expect(handleToggle).toBeCalledWith(false);
-        // Keeps content opened since it's controlled
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-    },
-};
-export const renderProps = {
-    name: "children: render props",
-    args: {
-        handleToggle: fn(),
-    },
-    render: (args) => (<Accordion onToggle={args.handleToggle}>
-			<Accordion.Trigger>
-				{(attributes, { active }) => (<Button attributes={{ ...attributes, "data-active": active }}>Trigger</Button>)}
-			</Accordion.Trigger>
-			<Accordion.Content>
-				<View paddingTop={2}>
-					<Placeholder />
-				</View>
-			</Accordion.Content>
-		</Accordion>),
-    play: async ({ canvas, args }) => {
-        const { handleToggle } = args;
-        const trigger = canvas.getAllByRole("button")[0];
-        const content = canvas.getByRole("region", { hidden: true });
-        const triggerId = trigger.getAttribute("id");
-        const contentId = content.getAttribute("id");
-        expect(trigger).toHaveAttribute("aria-expanded", "false");
-        expect(trigger).toHaveAttribute("id", triggerId);
-        expect(trigger).toHaveAttribute("aria-controls", contentId);
-        expect(trigger).toHaveAttribute("data-active", "false");
-        await userEvent.click(trigger);
-        expect(handleToggle).toBeCalledTimes(1);
-        expect(handleToggle).toBeCalledWith(true);
-        expect(trigger).toHaveAttribute("data-active", "true");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Accordion className="test-classname" attributes={{ id: "test-id" }}>
-				<Accordion.Trigger>
-					<Placeholder>Trigger</Placeholder>
-				</Accordion.Trigger>
-				<Accordion.Content>
-					<View paddingTop={2}>
-						<Placeholder />
-					</View>
-				</Accordion.Content>
-			</Accordion>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,40 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ActionBarProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const positionRelative: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionAbsolute: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const positionFixed: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const elevated: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const offset: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const active: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const padding: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,223 +0,0 @@
-import { expect } from "storybook/test";
-import { Placeholder, Example } from "../../../utilities/storybook/index.js";
-import ActionBar from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-import useToggle from "../../../hooks/useToggle.js";
-export default {
-    title: "Components/ActionBar",
-    component: ActionBar,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/action-bar",
-        },
-    },
-};
-const Fixtures = {
-    Container: (props) => (<View backgroundColor="neutral-faded" height="160px" overflow="hidden" borderRadius="medium">
-			{props.children}
-		</View>),
-    Actions: () => (<View direction="row" gap={2}>
-			<Button onClick={() => { }}>Action</Button>
-			<Button onClick={() => { }} variant="outline">
-				Action
-			</Button>
-		</View>),
-};
-export const positionRelative = {
-    name: "position, positionType: relative",
-    render: () => (<Example>
-			<Example.Item title="position: top">
-				<ActionBar position="top">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<ActionBar position="bottom">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const positionAbsolute = {
-    name: "position, positionType: absolute",
-    render: () => (<Example>
-			<Example.Item title="position: top-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const positionFixed = {
-    name: "position, positionType: fixed",
-    render: () => (<>
-			<ActionBar padding={2} position="top-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<div style={{ height: 2000 }}/>
-		</>),
-};
-export const elevated = {
-    name: "elevated",
-    render: () => (<Example>
-			<Example.Item title="elevated, position: top">
-				<ActionBar position="top" elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="elevated, position: bottom">
-				<ActionBar elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="auto elevated, position: bottom">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const offset = {
-    name: "offset",
-    render: () => (<Example>
-			<Example.Item title="offset 2, position: top">
-				<Fixtures.Container>
-					<ActionBar position="top" positionType="absolute" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset 2, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset s: 2, m: 4, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={{ s: 2, m: 4 }}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const active = {
-    name: "active",
-    render: () => {
-        const barToggle = useToggle();
-        return (<>
-				<Button onClick={() => barToggle.toggle()}>Toggle</Button>
-				<ActionBar active={barToggle.active} positionType="fixed" position="top-end">
-					<Fixtures.Actions />
-				</ActionBar>
-			</>);
-    },
-};
-export const padding = {
-    name: "padding, paddingBlock, paddingInline",
-    render: () => (<Example>
-			<Example.Item title="padding: 6">
-				<ActionBar padding={6}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="paddingBlock: 2, paddingInline: 4">
-				<ActionBar paddingBlock={2} paddingInline={4}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="padding: [s] 4, [m+] 6">
-				<ActionBar padding={{ s: 4, m: 6 }}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ActionBar className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</ActionBar>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,41 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-    handleSecondClick: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const fullWidth: StoryObj;
-export declare const insetFocus: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const disableFocusRing: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const borderRadius: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const type: StoryObj<{
-    handleSubmit: ReturnType<typeof fn>;
-}>;
-export declare const as: StoryObj;
-export declare const stopPropagation: StoryObj<{
-    handleParentClick: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;