reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,175 +1,169 @@
-"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.indeterminate = exports.defaultChecked = exports.checked = exports.disabled = exports.error = exports.size = exports.render = void 0;
-const test_1 = require("storybook/test");
-const Checkbox_1 = __importDefault(require("../../../components/Checkbox"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Checkbox from "../../../components/Checkbox/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Checkbox",
-    component: Checkbox_1.default,
+    component: Checkbox,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/checkbox",
         },
     },
 };
-exports.render = {
+export const render = {
     name: "name, value",
-    render: () => (<Checkbox_1.default name="test-name" value="test-value">
+    render: () => (<Checkbox name="test-name" value="test-value">
 			Content
-		</Checkbox_1.default>),
+		</Checkbox>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("checkbox");
-        (0, test_1.expect)(input).toHaveAttribute("value", "test-value");
-        (0, test_1.expect)(input).toHaveAttribute("name", "test-name");
-        (0, test_1.expect)(input).not.toBeChecked();
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
     },
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<View_1.default gap={4} direction="row">
-					<Checkbox_1.default name="animal" value="dog" size="small" defaultChecked>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={4} direction="row">
+					<Checkbox name="animal" value="dog" size="small" defaultChecked>
 						Checkbox
-					</Checkbox_1.default>
-					<Checkbox_1.default name="animal" value="dog" size="small" indeterminate>
+					</Checkbox>
+					<Checkbox name="animal" value="dog" size="small" indeterminate>
 						Checkbox
-					</Checkbox_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium">
-				<View_1.default gap={4} direction="row">
-					<Checkbox_1.default name="animal" value="dog" size="medium" defaultChecked>
+					</Checkbox>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={4} direction="row">
+					<Checkbox name="animal" value="dog" size="medium" defaultChecked>
 						Checkbox
-					</Checkbox_1.default>
-					<Checkbox_1.default name="animal" value="dog" size="medium" indeterminate>
+					</Checkbox>
+					<Checkbox name="animal" value="dog" size="medium" indeterminate>
 						Checkbox
-					</Checkbox_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: large">
-				<View_1.default gap={4} direction="row">
-					<Checkbox_1.default name="animal" value="dog" size="large" defaultChecked>
+					</Checkbox>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<View gap={4} direction="row">
+					<Checkbox name="animal" value="dog" size="large" defaultChecked>
 						Checkbox
-					</Checkbox_1.default>
-					<Checkbox_1.default name="animal" value="dog" size="large" indeterminate>
+					</Checkbox>
+					<Checkbox name="animal" value="dog" size="large" indeterminate>
 						Checkbox
-					</Checkbox_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: responsive, s: small, m: large">
-				<View_1.default gap={4} direction="row">
-					<Checkbox_1.default name="animal" value="dog" size={{ s: "small", m: "large" }} defaultChecked>
+					</Checkbox>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: responsive, s: small, m: large">
+				<View gap={4} direction="row">
+					<Checkbox name="animal" value="dog" size={{ s: "small", m: "large" }} defaultChecked>
 						Checkbox
-					</Checkbox_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Checkbox>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.error = {
+export const error = {
     name: "hasError",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="error">
-				<Checkbox_1.default name="animal" value="dog" hasError>
+    render: () => (<Example>
+			<Example.Item title="error">
+				<Checkbox name="animal" value="dog" hasError>
 					Checkbox
-				</Checkbox_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Checkbox>
+			</Example.Item>
+		</Example>),
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled">
-				<Checkbox_1.default name="animal" value="dog" disabled>
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<Checkbox name="animal" value="dog" disabled>
 					Checkbox
-				</Checkbox_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, checked">
-				<Checkbox_1.default name="animal" value="dog" disabled checked>
+				</Checkbox>
+			</Example.Item>
+			<Example.Item title="disabled, checked">
+				<Checkbox name="animal" value="dog" disabled checked>
 					Checkbox
-				</Checkbox_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, indeterminate">
-				<Checkbox_1.default name="animal" value="dog" disabled indeterminate>
+				</Checkbox>
+			</Example.Item>
+			<Example.Item title="disabled, indeterminate">
+				<Checkbox name="animal" value="dog" disabled indeterminate>
 					Checkbox
-				</Checkbox_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Checkbox>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const [input] = canvas.getAllByRole("checkbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };
-exports.checked = {
+export const checked = {
     name: "checked, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<Checkbox_1.default name="test-name" value="test-value" checked onChange={args.handleChange}>
+    render: (args) => (<Checkbox name="test-name" value="test-value" checked onChange={args.handleChange}>
 			Content
-		</Checkbox_1.default>),
+		</Checkbox>),
     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).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "test-value",
             checked: false,
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
         // Still checked because it's controlled
-        (0, test_1.expect)(input).toBeChecked();
+        expect(input).toBeChecked();
     },
 };
-exports.defaultChecked = {
+export const defaultChecked = {
     name: "defaultChecked, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<Checkbox_1.default name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+    render: (args) => (<Checkbox name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
 			Content
-		</Checkbox_1.default>),
+		</Checkbox>),
     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).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "test-value",
             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.indeterminate = {
+export const indeterminate = {
     name: "indeterminate",
-    render: () => (<Checkbox_1.default name="test-name" value="test-value" indeterminate>
+    render: () => (<Checkbox name="test-name" value="test-value" indeterminate>
 			Content
-		</Checkbox_1.default>),
+		</Checkbox>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("checkbox");
-        (0, test_1.expect)(input.indeterminate).toBeTruthy();
+        expect(input.indeterminate).toBeTruthy();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Checkbox_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<Checkbox className="test-classname" attributes={{ id: "test-id" }}>
 				Content
-			</Checkbox_1.default>
+			</Checkbox>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

package/dist/components/CheckboxGroup/CheckboxGroup.context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./CheckboxGroup.types";
+import type * as T from "./CheckboxGroup.types.js";
 declare const CheckboxContext: React.Context<T.Context | null>;
 export declare const useCheckboxGroup: () => T.Context | null;
 export default CheckboxContext;

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./CheckboxGroup.types";
+import type * as T from "./CheckboxGroup.types.js";
 declare const CheckboxGroup: React.FC<T.Props>;
 export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CheckboxGroupControlled from "./CheckboxGroupControlled";
-import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js";
 const CheckboxGroup = (props) => {
     const { value } = props;
     if (value !== undefined)

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

@@ -1,6 +1,6 @@
 import type React from "react";
-import type { CheckboxProps } from "../../components/Checkbox";
-import type * as G from "../../types/global";
+import type { CheckboxProps } from "../../components/Checkbox/index.js";
+import type * as G from "../../types/global.js";
 type BaseProps = {
     /** Component id attribute */
     id?: string;

package/dist/components/CheckboxGroup/CheckboxGroupControlled.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./CheckboxGroup.types";
+import type * as T from "./CheckboxGroup.types.js";
 declare const CheckboxGroupControlled: React.FC<T.ControlledProps>;
 export default CheckboxGroupControlled;

package/dist/components/CheckboxGroup/CheckboxGroupControlled.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import Context from "./CheckboxGroup.context";
+import Context from "./CheckboxGroup.context.js";
 const CheckboxGroupControlled = (props) => {
     const { onChange, name, disabled, value, children, hasError } = props;
     const handleChange = (args) => {

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./CheckboxGroup.types";
+import type * as T from "./CheckboxGroup.types.js";
 declare const CheckboxGroupUncontrolled: React.FC<T.UncontrolledProps>;
 export default CheckboxGroupUncontrolled;

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import CheckboxGroupControlled from "./CheckboxGroupControlled";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
 const CheckboxGroupUncontrolled = (props) => {
     const { defaultValue, onChange } = props;
     const [value, setValue] = React.useState(defaultValue || []);

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

@@ -1,3 +1,3 @@
-export { default } from "./CheckboxGroup";
-export { useCheckboxGroup } from "./CheckboxGroup.context";
-export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types";
+export { default } from "./CheckboxGroup.js";
+export { useCheckboxGroup } from "./CheckboxGroup.context.js";
+export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types.js";

package/dist/components/CheckboxGroup/index.js

@@ -1,2 +1,2 @@
-export { default } from "./CheckboxGroup";
-export { useCheckboxGroup } from "./CheckboxGroup.context";
+export { default } from "./CheckboxGroup.js";
+export { useCheckboxGroup } from "./CheckboxGroup.context.js";

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/CheckboxGroup").CheckboxGroupProps>;
+    component: import("react").FC<import("../../../components/CheckboxGroup/index.js").CheckboxGroupProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,89 +1,83 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabled = exports.defaultValue = exports.value = void 0;
-const test_1 = require("storybook/test");
-const Checkbox_1 = __importDefault(require("../../../components/Checkbox"));
-const CheckboxGroup_1 = __importDefault(require("../../../components/CheckboxGroup"));
-const View_1 = __importDefault(require("../../../components/View"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Checkbox from "../../../components/Checkbox/index.js";
+import CheckboxGroup from "../../../components/CheckboxGroup/index.js";
+import View from "../../../components/View/index.js";
+export default {
     title: "Components/CheckboxGroup",
-    component: CheckboxGroup_1.default,
+    component: CheckboxGroup,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/checkbox",
         },
     },
 };
-exports.value = {
+export const value = {
     name: "value, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<View_1.default gap={2}>
-			<CheckboxGroup_1.default name="test-name" value={["1"]} onChange={args.handleChange}>
+    render: (args) => (<View gap={2}>
+			<CheckboxGroup name="test-name" value={["1"]} onChange={args.handleChange}>
 				{/* checked should be ignored */}
-				<Checkbox_1.default value="1" checked={false}>
+				<Checkbox value="1" checked={false}>
 					Content
-				</Checkbox_1.default>
+				</Checkbox>
 
-				<Checkbox_1.default value="2">Content 2</Checkbox_1.default>
-			</CheckboxGroup_1.default>
-		</View_1.default>),
+				<Checkbox value="2">Content 2</Checkbox>
+			</CheckboxGroup>
+		</View>),
     play: async ({ canvas, args }) => {
         const inputs = canvas.getAllByRole("checkbox");
-        (0, test_1.expect)(inputs[0]).toBeChecked();
-        await test_1.userEvent.click(inputs[1]);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: ["1", "2"],
-            event: test_1.expect.objectContaining({ target: inputs[1] }),
+            event: expect.objectContaining({ target: inputs[1] }),
         });
         // Still checked because it's controlled
-        (0, test_1.expect)(inputs[0]).toBeChecked();
-        (0, test_1.expect)(inputs[1]).not.toBeChecked();
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
     },
 };
-exports.defaultValue = {
+export const defaultValue = {
     name: "defaultValue, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<View_1.default gap={2}>
-			<CheckboxGroup_1.default name="test-name" defaultValue={["1"]} onChange={args.handleChange}>
+    render: (args) => (<View gap={2}>
+			<CheckboxGroup name="test-name" defaultValue={["1"]} onChange={args.handleChange}>
 				{/* checked should be ignored */}
-				<Checkbox_1.default value="1" checked={false}>
+				<Checkbox value="1" checked={false}>
 					Content
-				</Checkbox_1.default>
+				</Checkbox>
 
-				<Checkbox_1.default value="2">Content 2</Checkbox_1.default>
-			</CheckboxGroup_1.default>
-		</View_1.default>),
+				<Checkbox value="2">Content 2</Checkbox>
+			</CheckboxGroup>
+		</View>),
     play: async ({ canvas, args }) => {
         const inputs = canvas.getAllByRole("checkbox");
-        (0, test_1.expect)(inputs[0]).toBeChecked();
-        await test_1.userEvent.click(inputs[1]);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: ["1", "2"],
-            event: test_1.expect.objectContaining({ target: inputs[1] }),
+            event: expect.objectContaining({ target: inputs[1] }),
         });
-        (0, test_1.expect)(inputs[0]).toBeChecked();
-        (0, test_1.expect)(inputs[1]).toBeChecked();
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).toBeChecked();
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<CheckboxGroup_1.default name="test-name" disabled>
-			<Checkbox_1.default value="test-value">Item 1</Checkbox_1.default>
-			<Checkbox_1.default value="test-value-2">Item 2</Checkbox_1.default>
-		</CheckboxGroup_1.default>),
+    render: () => (<CheckboxGroup name="test-name" disabled>
+			<Checkbox value="test-value">Item 1</Checkbox>
+			<Checkbox value="test-value-2">Item 2</Checkbox>
+		</CheckboxGroup>),
     play: async ({ canvas }) => {
         const [input] = canvas.getAllByRole("checkbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };

package/dist/components/Container/Container.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Container.types";
+import type * as T from "./Container.types.js";
 declare const Container: React.FC<T.Props>;
 export default Container;

package/dist/components/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import View from "../../components/View";
+import View from "../../components/View/index.js";
 import s from "./Container.module.css";
 const Container = (props) => {
     const { children, padding = 4, width, align, justify, height, maxHeight, className, attributes, } = props;

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ViewProps } from "../../components/View";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { ViewProps } from "../../components/View/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
     /** Component inline padding */
     padding?: ViewProps["padding"];

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

@@ -1,2 +1,2 @@
-export { default } from "./Container";
-export type { Props as ContainerProps } from "./Container.types";
+export { default } from "./Container.js";
+export type { Props as ContainerProps } from "./Container.types.js";

package/dist/components/Container/index.js

@@ -1 +1 @@
-export { default } from "./Container";
+export { default } from "./Container.js";

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Container").ContainerProps>;
+    component: import("react").FC<import("../../../components/Container/index.js").ContainerProps>;
     parameters: {
         iframe: {
             url: string;