reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,146 +1,138 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.disabled = exports.checked = exports.defaultChecked = exports.label = exports.size = void 0;
-const test_1 = require("storybook/test");
-const Switch_1 = __importDefault(require("../../../components/Switch"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Switch from "../../../components/Switch/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Switch",
-    component: Switch_1.default,
+    component: Switch,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/switch",
         },
     },
 };
-const size = () => (<storybook_1.Example>
-		<storybook_1.Example.Item title="size: small">
-			<Switch_1.default name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}/>
-		</storybook_1.Example.Item>
-		<storybook_1.Example.Item title="size: medium">
-			<Switch_1.default name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
-		</storybook_1.Example.Item>
-		<storybook_1.Example.Item title="size: large">
-			<Switch_1.default name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
-		</storybook_1.Example.Item>
-		<storybook_1.Example.Item title="size: responsive, s: small, m: large">
-			<Switch_1.default name="active" size={{ s: "small", m: "large" }} inputAttributes={{ "aria-label": "test switch" }}/>
-		</storybook_1.Example.Item>
-	</storybook_1.Example>);
-exports.size = size;
-const label = () => (<storybook_1.Example>
-		<storybook_1.Example.Item title="size: small">
-			<View_1.default direction="row" gap={8}>
-				<Switch_1.default name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+export const size = () => (<Example>
+		<Example.Item title="size: small">
+			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: medium">
+			<Switch name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: large">
+			<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: responsive, s: small, m: large">
+			<Switch name="active" size={{ s: "small", m: "large" }} inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);
+export const label = () => (<Example>
+		<Example.Item title="size: small">
+			<View direction="row" gap={8}>
+				<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-				<Switch_1.default reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+				</Switch>
+				<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-			</View_1.default>
-		</storybook_1.Example.Item>
+				</Switch>
+			</View>
+		</Example.Item>
 
-		<storybook_1.Example.Item title="size: medium">
-			<View_1.default direction="row" gap={8}>
-				<Switch_1.default name="active" inputAttributes={{ "aria-label": "test switch" }}>
+		<Example.Item title="size: medium">
+			<View direction="row" gap={8}>
+				<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-				<Switch_1.default reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
+				</Switch>
+				<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-			</View_1.default>
-		</storybook_1.Example.Item>
+				</Switch>
+			</View>
+		</Example.Item>
 
-		<storybook_1.Example.Item title="size: large">
-			<View_1.default direction="row" gap={8}>
-				<Switch_1.default name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
+		<Example.Item title="size: large">
+			<View direction="row" gap={8}>
+				<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-				<Switch_1.default reversed name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
+				</Switch>
+				<Switch reversed name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
 					Wi-fi
-				</Switch_1.default>
-			</View_1.default>
-		</storybook_1.Example.Item>
-	</storybook_1.Example>);
-exports.label = label;
-exports.defaultChecked = {
+				</Switch>
+			</View>
+		</Example.Item>
+	</Example>);
+export const defaultChecked = {
     name: "defaultChecked, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<Switch_1.default name="test-name" defaultChecked onChange={args.handleChange}>
+    render: (args) => (<Switch name="test-name" defaultChecked onChange={args.handleChange}>
 			Label
-		</Switch_1.default>),
+		</Switch>),
     play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        (0, test_1.expect)(input).toBeChecked();
-        await test_1.userEvent.click(input);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        const input = canvas.getByRole("switch");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             checked: false,
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).not.toBeChecked();
+        expect(input).not.toBeChecked();
     },
 };
-exports.checked = {
+export const checked = {
     name: "checked, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<Switch_1.default name="test-name" checked onChange={args.handleChange}>
+    render: (args) => (<Switch name="test-name" checked onChange={args.handleChange}>
 			Label
-		</Switch_1.default>),
+		</Switch>),
     play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        (0, test_1.expect)(input).toBeChecked();
-        await test_1.userEvent.click(input);
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        const input = canvas.getByRole("switch");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             checked: false,
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).toBeChecked();
+        expect(input).toBeChecked();
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled, unselected">
-				<Switch_1.default name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, selected">
-				<Switch_1.default name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, with label">
-				<Switch_1.default name="active" disabled>
+    render: () => (<Example>
+			<Example.Item title="disabled, unselected">
+				<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
+			</Example.Item>
+			<Example.Item title="disabled, selected">
+				<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+			</Example.Item>
+			<Example.Item title="disabled, with label">
+				<Switch name="active" disabled>
 					Switch
-				</Switch_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Switch>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
-        const [input] = canvas.getAllByRole("checkbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        const [input] = canvas.getAllByRole("switch");
+        expect(input).toBeDisabled();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Switch_1.default className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
+			<Switch className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
 				Label
-			</Switch_1.default>
+			</Switch>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("checkbox");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-input-id");
+        const input = canvas.getByRole("switch");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
     },
 };

package/dist/components/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Table.types";
+import type * as T from "./Table.types.js";
 export declare const TableCell: React.FC<T.CellProps>;
 export declare const TableHeading: React.FC<T.HeadingProps>;
 export declare const TableRow: React.FC<T.RowProps>;

package/dist/components/Table/Table.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
 import { classNames } from "@reshaped/utilities";
-import { responsiveVariables } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import { responsiveVariables } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;

package/dist/components/Table/Table.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Add border around the table */
     border?: boolean;

package/dist/components/Table/index.d.ts

@@ -1,4 +1,4 @@
-import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table";
+import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table.js";
 declare const TableRoot: typeof Table & {
     Cell: typeof TableCell;
     Heading: typeof TableHeading;
@@ -7,4 +7,4 @@ declare const TableRoot: typeof Table & {
     Head: typeof TableHead;
 };
 export default TableRoot;
-export type { BodyProps as TableBodyProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, HeadProps as TableHeadProps, Props as TableProps, RowProps as TableRowProps, } from "./Table.types";
+export type { BodyProps as TableBodyProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, HeadProps as TableHeadProps, Props as TableProps, RowProps as TableRowProps, } from "./Table.types.js";

package/dist/components/Table/index.js

@@ -1,4 +1,4 @@
-import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table";
+import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table.js";
 const TableRoot = Table;
 TableRoot.Cell = TableCell;
 TableRoot.Heading = TableHeading;

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

@@ -2,12 +2,12 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/Table").TableProps> & {
-        Cell: typeof import("../Table").TableCell;
-        Heading: typeof import("../Table").TableHeading;
-        Row: typeof import("../Table").TableRow;
-        Body: typeof import("../Table").TableBody;
-        Head: typeof import("../Table").TableHead;
+    component: React.FC<import("../../../components/Table/index.js").TableProps> & {
+        Cell: typeof import("../Table.js").TableCell;
+        Heading: typeof import("../Table.js").TableHeading;
+        Row: typeof import("../Table.js").TableRow;
+        Body: typeof import("../Table.js").TableBody;
+        Head: typeof import("../Table.js").TableHead;
     };
     parameters: {
         iframe: {