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

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

@@ -1,38 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ResizableProps> & {
-        Item: typeof import("../Resizable").ResizableItem;
-        Handle: import("react").FC<import("./..").ResizableHandleProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        a11y: {
-            disable: boolean;
-        };
-    };
-};
-export default _default;
-export declare const direction: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const children: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const variant: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const layout: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,185 +0,0 @@
-import { expect } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Resizable from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-export default {
-    title: "Components/Resizable",
-    component: Resizable,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/resizable",
-        },
-        // Skip because of the aria-hidden applied to buttons, they're not needed for the screen reader navigation
-        a11y: {
-            disable: true,
-        },
-    },
-};
-const Panel = (props) => (<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height={props.height ?? "100%"}>
-		Panel
-	</View>);
-const Handle = () => {
-    return (<Resizable.Handle>
-			{(attributes, props) => (<View backgroundColor={props.status === "dragging" ? "primary" : "primary-faded"} padding={props.direction === "column" ? 1 : 8} height="100%" align="center" justify="center" borderRadius="small" animated>
-					<Button attributes={attributes} type="button">
-						Drag me
-					</Button>
-				</View>)}
-		</Resizable.Handle>);
-};
-export const direction = {
-    name: "direction",
-    render: () => {
-        return (<Example>
-				<Example.Item title="row">
-					<Resizable height="200px">
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-					</Resizable>
-				</Example.Item>
-				<Example.Item title="column">
-					<Resizable height="400px" direction="column">
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-					</Resizable>
-				</Example.Item>
-
-				{/* Test that page doesn't scroll on dragging */}
-				<div style={{ height: 2000 }}/>
-			</Example>);
-    },
-};
-export const children = {
-    name: "children",
-    render: () => {
-        return (<Example>
-				<Example.Item title="render props, row">
-					<Resizable height="200px">
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-					</Resizable>
-				</Example.Item>
-				<Example.Item title="render props, column">
-					<Resizable height="400px" direction="column">
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Resizable.Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-						<Handle />
-						<Resizable.Item>
-							<Panel />
-						</Resizable.Item>
-					</Resizable>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="bordered, row">
-				<Resizable height="200px" variant="bordered">
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-					<Resizable.Handle />
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-					<Resizable.Handle />
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-				</Resizable>
-			</Example.Item>
-			<Example.Item title="bordered, column">
-				<Resizable height="400px" direction="column" variant="bordered">
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-					<Resizable.Handle />
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-					<Resizable.Handle />
-					<Resizable.Item>
-						<Panel />
-					</Resizable.Item>
-				</Resizable>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "minSize, maxSize, defaultSize",
-    render: () => (<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
-			<Resizable.Item>
-				<Panel />
-			</Resizable.Item>
-			<Resizable.Handle />
-			<Resizable.Item minSize="200px" maxSize="500px" defaultSize="300px">
-				<Panel />
-			</Resizable.Item>
-		</Resizable>),
-};
-export const layout = {
-    name: "height, gap",
-    render: () => (<Resizable height="100px" gap={8}>
-			<Resizable.Item>
-				<Panel />
-			</Resizable.Item>
-			<Resizable.Handle />
-			<Resizable.Item>
-				<Panel />
-			</Resizable.Item>
-		</Resizable>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
-				<Resizable.Item>
-					<Panel />
-				</Resizable.Item>
-				<Resizable.Handle />
-				<Resizable.Item>
-					<Panel />
-				</Resizable.Item>
-			</Resizable>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

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

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

@@ -1,67 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Scrim from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Scrim",
-    component: Scrim,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/scrim",
-        },
-    },
-};
-export const position = {
-    name: "position",
-    render: () => (<Example>
-			<Example.Item title="position: center">
-				<Scrim backgroundSlot={<Placeholder h={200}/>}>Scrim</Scrim>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<Scrim position="bottom" backgroundSlot={<Placeholder h={200}/>}>
-					Scrim
-				</Scrim>
-			</Example.Item>
-
-			<Example.Item title="position: top">
-				<Scrim position="top" backgroundSlot={<Placeholder h={200}/>}>
-					Scrim
-				</Scrim>
-			</Example.Item>
-
-			<Example.Item title="position: start">
-				<Scrim position="start" backgroundSlot={<Placeholder h={200}/>}>
-					Scrim
-				</Scrim>
-			</Example.Item>
-
-			<Example.Item title="position: end">
-				<Scrim position="end" backgroundSlot={<Placeholder h={200}/>}>
-					Scrim
-				</Scrim>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Scrim className="test-classname" attributes={{ id: "test-id" }}>
-				Content
-			</Scrim>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};
-export const composition = {
-    name: "test: composition",
-    render: () => (<Example>
-			<Example.Item title="without backgroundSlot, size is based on the parent component">
-				<div style={{ height: 300, position: "relative" }}>
-					<Scrim>Text</Scrim>
-				</div>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,37 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        a11y: {
-            disable: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const scrollbarDisplay: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const height: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const onScroll: StoryObj<{
-    handleScroll: Mock;
-}>;
-export declare const className: StoryObj;
-export declare const testNested: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const testDynamicHeight: StoryObj;

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

@@ -1,244 +0,0 @@
-import React from "react";
-import { userEvent, expect, waitFor, fn } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import ScrollArea from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-export default {
-    title: "Utility components/ScrollArea",
-    component: ScrollArea,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/scroll-area",
-        },
-        // Skip because axe core incorrectly reports contrast issues
-        a11y: {
-            disable: true,
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="vertical scroll">
-				<ScrollArea height="100px" scrollbarDisplay="visible">
-					<View backgroundColor="elevation-base" padding={4}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="horizontal scroll">
-				<ScrollArea height="100px" scrollbarDisplay="visible">
-					<View backgroundColor="elevation-base" padding={4} width="150%" height="100px">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="horizontal and vertical scroll">
-				<ScrollArea height="100px" scrollbarDisplay="visible">
-					<View backgroundColor="elevation-base" padding={4} width="150%">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-		</Example>),
-};
-export const scrollbarDisplay = {
-    name: "scrollbarDisplay",
-    render: () => (<Example>
-			<Example.Item title="scrollbarDisplay: hover">
-				<ScrollArea height="100px">
-					<View backgroundColor="elevation-base" padding={4} width="150%">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="scrollbarDisplay: hidden">
-				<ScrollArea height="100px" scrollbarDisplay="hidden">
-					<View backgroundColor="elevation-base" padding={4} width="150%">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="scrollbarDisplay: visible">
-				<ScrollArea height="100px" scrollbarDisplay="visible">
-					<View backgroundColor="elevation-base" padding={4} width="150%">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-		</Example>),
-};
-export const height = {
-    name: "height, maxHeight",
-    render: () => (<Example>
-			<Example.Item title="height: 80px">
-				<ScrollArea height="80px">
-					<View backgroundColor="elevation-base" padding={4}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="responsive height: s 80px, m: 120px">
-				<ScrollArea height={{ s: "80px", m: "120px" }}>
-					<View backgroundColor="elevation-base" padding={4}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="maxHeight: 80px">
-				<ScrollArea maxHeight="80px">
-					<View backgroundColor="elevation-base" padding={4}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-
-			<Example.Item title="responsive max height: s 80px, m: 200px">
-				<ScrollArea maxHeight={{ s: "80px", m: "200px" }}>
-					<View backgroundColor="elevation-base" padding={4}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</Example.Item>
-		</Example>),
-};
-export const onScroll = {
-    name: "ref, onScroll",
-    args: {
-        handleScroll: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        return (<View gap={4}>
-				<View.Item>
-					<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
-				</View.Item>
-				<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
-					<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</View>);
-    },
-    play: async ({ canvas, args }) => {
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleScroll).toHaveBeenCalledTimes(1);
-            // x value is flaky, so only testing y here
-            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
-				Content
-			</ScrollArea>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};
-export const testNested = {
-    name: "test: nested",
-    render: () => (<ScrollArea height="100px" scrollbarDisplay="visible">
-			<View padding={4} paddingInline={16}>
-				<ScrollArea height="200px" scrollbarDisplay="visible">
-					{Array(20)
-            .fill("")
-            .map((_, index) => {
-            return <div key={index}>Item {index + 1}</div>;
-        })}
-				</ScrollArea>
-			</View>
-		</ScrollArea>),
-};
-export const testDynamicHeight = {
-    name: "test: dynamic height change",
-    render: () => {
-        const [count, setCount] = React.useState(10);
-        return (<View gap={4}>
-				<View.Item>
-					<Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>
-				</View.Item>
-
-				<ScrollArea height="200px" scrollbarDisplay="visible">
-					<View gap={2}>
-						{new Array(count).fill("").map((_, i) => (<View.Item key={i}>Item {i + 1}</View.Item>))}
-					</View>
-				</ScrollArea>
-			</View>);
-    },
-};

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

@@ -1,53 +0,0 @@
-import React from "react";
-import { Mock } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: React.FC<import("../Select.types").NativeProps> & {
-        Custom: React.FC<import("../Select.types").CustomProps>;
-        Option: React.FC<import("../Select.types").OptionProps>;
-        Group: React.FC<import("../Select.types").GroupProps>;
-        OptionGroup: React.FC<import("../Select.types").GroupProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const nativeRender: StoryObj;
-export declare const customRender: StoryObj;
-export declare const nativeHandlers: StoryObj<{
-    handleChange: Mock;
-    handleControlledChange: Mock;
-    handleFocus: Mock;
-    handleBlur: Mock;
-    handleClick: Mock;
-}>;
-export declare const customHandlers: StoryObj<{
-    handleChange: Mock;
-    handleControlledChange: Mock;
-    handleFocus: Mock;
-    handleBlur: Mock;
-    handleClick: Mock;
-}>;
-export declare const triggerOnly: StoryObj<{
-    handleClick: Mock;
-}>;
-export declare const multiple: StoryObj<{
-    handleChange: Mock;
-}>;
-export declare const variant: StoryObj;
-export declare const size: StoryObj;
-export declare const startSlot: StoryObj;
-export declare const renderValue: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const error: StoryObj;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;
-export declare const fallback: StoryObj;
-export declare const formControl: StoryObj;
-export declare const testComposition: StoryObj;