reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,6 +1,6 @@
-import Autocomplete, { AutocompleteItem } from "./Autocomplete";
+import Autocomplete, { AutocompleteItem } from "./Autocomplete.js";
 declare const AutocompleteRoot: typeof Autocomplete & {
     Item: typeof AutocompleteItem;
 };
 export default AutocompleteRoot;
-export type { Instance as AutocompleteInstance, Props as AutocompleteProps, } from "./Autocomplete.types";
+export type { Instance as AutocompleteInstance, Props as AutocompleteProps, } from "./Autocomplete.types.js";

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import Autocomplete, { AutocompleteItem } from "./Autocomplete";
+import Autocomplete, { AutocompleteItem } from "./Autocomplete.js";
 const AutocompleteRoot = Autocomplete;
 AutocompleteRoot.Item = AutocompleteItem;
 export default AutocompleteRoot;

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

@@ -3,8 +3,8 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/Autocomplete").AutocompleteProps> & {
-        Item: typeof import("../Autocomplete").AutocompleteItem;
+    component: React.FC<import("../../../components/Autocomplete/index.js").AutocompleteProps> & {
+        Item: typeof import("../Autocomplete.js").AutocompleteItem;
     };
     parameters: {
         iframe: {

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

@@ -1,40 +1,34 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.multiselect = exports.itemDisabled = exports.itemData = exports.base = exports.active = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Autocomplete_1 = __importDefault(require("../../../components/Autocomplete"));
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fireEvent, fn, userEvent, waitFor, within } from "storybook/test";
+import Autocomplete from "../../../components/Autocomplete/index.js";
+import Badge from "../../../components/Badge/index.js";
+import FormControl from "../../../components/FormControl/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Autocomplete",
-    component: Autocomplete_1.default,
+    component: Autocomplete,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/autocomplete",
         },
     },
 };
-exports.active = {
+export const active = {
     name: "active, onOpen, onClose",
     args: {
-        handleClose: (0, test_1.fn)(),
-        handleOpen: (0, test_1.fn)(),
+        handleClose: fn(),
+        handleOpen: fn(),
     },
     render: (args) => {
-        const toggle = (0, useToggle_1.default)(true);
-        const [value, setValue] = react_1.default.useState("");
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="active, onOpen, onClose">
-					<FormControl_1.default>
-						<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-						<Autocomplete_1.default name="fruit" placeholder="Pick your food" active={toggle.active} value={value} onChange={(args) => setValue(args.value)} onOpen={() => {
+        const toggle = useToggle(true);
+        const [value, setValue] = React.useState("");
+        return (<Example>
+				<Example.Item title="active, onOpen, onClose">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" active={toggle.active} value={value} onChange={(args) => setValue(args.value)} onOpen={() => {
                 args.handleOpen();
                 toggle.activate();
             }} onClose={() => {
@@ -44,25 +38,25 @@ exports.active = {
 							{["Pizza", "Pie", "Ice-cream"].map((v) => {
                 if (!v.toLowerCase().includes(value.toLowerCase()))
                     return;
-                return (<Autocomplete_1.default.Item key={v} value={v}>
+                return (<Autocomplete.Item key={v} value={v}>
 										{v}
-									</Autocomplete_1.default.Item>);
+									</Autocomplete.Item>);
             })}
-						</Autocomplete_1.default>
-					</FormControl_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         // const input = canvas.getByRole("combobox");
         const list = await canvas.findByRole("listbox");
-        (0, test_1.expect)(list).toBeInTheDocument();
-        (0, test_1.expect)(args.handleOpen).not.toHaveBeenCalled();
-        await test_1.userEvent.click(document.body);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenLastCalledWith();
+        expect(list).toBeInTheDocument();
+        expect(args.handleOpen).not.toHaveBeenCalled();
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenLastCalledWith();
         });
         // TODO: Flaky behavior in node env tests, works in the browser
         // await sleep(500);
@@ -73,134 +67,134 @@ exports.active = {
         // });
     },
 };
-exports.base = {
+export const base = {
     name: "onInput, onItemSelect, onBackspace",
     args: {
-        handleInput: (0, test_1.fn)(),
-        handleBackspace: (0, test_1.fn)(),
-        handleItemSelect: (0, test_1.fn)(),
+        handleInput: fn(),
+        handleBackspace: fn(),
+        handleItemSelect: fn(),
     },
     render: (args) => {
-        const [value, setValue] = react_1.default.useState("");
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="Base">
-					<FormControl_1.default>
-						<FormControl_1.default.Label>Food</FormControl_1.default.Label>
-						<Autocomplete_1.default name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
+        const [value, setValue] = React.useState("");
+        return (<Example>
+				<Example.Item title="Base">
+					<FormControl>
+						<FormControl.Label>Food</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
 							{["Pizza", "Pie", "Ice-cream"].map((v) => {
-                return (<Autocomplete_1.default.Item key={v} value={v}>
+                return (<Autocomplete.Item key={v} value={v}>
 										{v}
-									</Autocomplete_1.default.Item>);
+									</Autocomplete.Item>);
             })}
-						</Autocomplete_1.default>
-					</FormControl_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const input = canvas.getByRole("combobox");
         // Reset the focus
         document.body.focus();
         // Test keyboard selection after focusing the input
         input.focus();
         let options = [];
-        await (0, test_1.waitFor)(() => {
+        await waitFor(() => {
             options = canvas.getAllByRole("option");
         });
-        (0, test_1.expect)(options).toHaveLength(3);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(options[0]).toHaveAttribute("tabindex", "0");
+        expect(options).toHaveLength(3);
+        await waitFor(() => {
+            expect(options[0]).toHaveAttribute("tabindex", "0");
         });
-        (0, test_1.expect)(options[1]).toHaveAttribute("tabindex", "-1");
-        await test_1.userEvent.keyboard("{ArrowDown}");
-        await test_1.userEvent.keyboard("{Enter}");
-        (0, test_1.expect)(input).toHaveValue("Pie");
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenCalledWith({
+        expect(options[1]).toHaveAttribute("tabindex", "-1");
+        await userEvent.keyboard("{ArrowDown}");
+        await userEvent.keyboard("{Enter}");
+        expect(input).toHaveValue("Pie");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
             value: "Pie",
             data: undefined,
         });
         // Give browser time to focus on the input
-        await (0, helpers_1.sleep)(100);
+        await sleep(100);
         // Test click selection after opening with down arrow
-        await test_1.userEvent.keyboard("{ArrowDown}");
-        await (0, test_1.waitFor)(() => {
+        await userEvent.keyboard("{ArrowDown}");
+        await waitFor(() => {
             options = canvas.getAllByRole("option");
         });
-        await test_1.userEvent.click(options[0]);
-        (0, test_1.expect)(input).toHaveValue("Pizza");
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenCalledWith({
+        await userEvent.click(options[0]);
+        expect(input).toHaveValue("Pizza");
+        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
+        expect(args.handleItemSelect).toHaveBeenCalledWith({
             value: "Pizza",
         });
         input.focus();
-        await test_1.userEvent.keyboard("{Backspace}");
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleBackspace).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleBackspace).toHaveBeenCalledWith();
+        await userEvent.keyboard("{Backspace}");
+        await waitFor(() => {
+            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
+            expect(args.handleBackspace).toHaveBeenCalledWith();
         });
     },
 };
-exports.itemData = {
+export const itemData = {
     name: "item data",
     args: {
-        handleItemSelect: (0, test_1.fn)(),
+        handleItemSelect: fn(),
     },
     render: (args) => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="item data">
-					<FormControl_1.default>
-						<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-						<Autocomplete_1.default name="fruit" placeholder="Pick your food" onItemSelect={args.handleItemSelect} active>
+        return (<Example>
+				<Example.Item title="item data">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" onItemSelect={args.handleItemSelect} active>
 							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete_1.default.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>
+                return (<Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>
 										{v}
-									</Autocomplete_1.default.Item>);
+									</Autocomplete.Item>);
             })}
-						</Autocomplete_1.default>
-					</FormControl_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const options = await canvas.findAllByRole("option");
-        await test_1.userEvent.click(options[0]);
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pizza" });
-        await test_1.userEvent.click(options[1]);
-        (0, test_1.expect)(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pie", data: { foo: true } });
+        await userEvent.click(options[0]);
+        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pizza" });
+        await userEvent.click(options[1]);
+        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pie", data: { foo: true } });
     },
 };
-exports.itemDisabled = {
+export const itemDisabled = {
     name: "item disabled",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="item disabled">
-					<FormControl_1.default>
-						<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-						<Autocomplete_1.default name="fruit" placeholder="Pick your food" active>
+        return (<Example>
+				<Example.Item title="item disabled">
+					<FormControl>
+						<FormControl.Label>Label</FormControl.Label>
+						<Autocomplete name="fruit" placeholder="Pick your food" active>
 							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete_1.default.Item key={v} value={v} disabled={i === 1}>
+                return (<Autocomplete.Item key={v} value={v} disabled={i === 1}>
 										{v}
-									</Autocomplete_1.default.Item>);
+									</Autocomplete.Item>);
             })}
-						</Autocomplete_1.default>
-					</FormControl_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Autocomplete>
+					</FormControl>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const input = canvas.getByRole("combobox");
         const options = await canvas.findAllByRole("option");
-        await test_1.fireEvent.click(options[1]);
-        (0, test_1.expect)(options[1]).toBeDisabled();
+        await fireEvent.click(options[1]);
+        expect(options[1]).toBeDisabled();
         // Check that focus stays on input when clicking on disabled elements
-        (0, test_1.expect)(document.activeElement).toBe(input);
+        expect(document.activeElement).toBe(input);
     },
 };
-exports.multiselect = {
+export const multiselect = {
     name: "test: multiselect",
     render: () => {
         const options = [
@@ -213,26 +207,26 @@ exports.multiselect = {
             "Option 5",
             "Option 6",
         ];
-        const inputRef = react_1.default.useRef(null);
-        const [values, setValues] = react_1.default.useState([
+        const inputRef = React.useRef(null);
+        const [values, setValues] = React.useState([
             "Option 4",
             "Option 5",
             "Option 6",
             "Pizza",
             "Ice-cream",
         ]);
-        const [query, setQuery] = react_1.default.useState("");
+        const [query, setQuery] = React.useState("");
         const handleDismiss = (dismissedValue) => {
             const nextValues = values.filter((value) => value !== dismissedValue);
             setValues(nextValues);
             inputRef.current?.focus();
         };
-        const valuesNode = values.map((value) => (<Badge_1.default dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value}>
+        const valuesNode = values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value}>
 				{value}
-			</Badge_1.default>));
-        return (<FormControl_1.default>
-				<FormControl_1.default.Label>Food</FormControl_1.default.Label>
-				<Autocomplete_1.default name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onBackspace={() => {
+			</Badge>));
+        return (<FormControl>
+				<FormControl.Label>Food</FormControl.Label>
+				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onBackspace={() => {
                 if (query.length === 0) {
                     setValues((prev) => prev.slice(0, -1));
                 }
@@ -245,11 +239,11 @@ exports.multiselect = {
                     return;
                 if (values.includes(v))
                     return;
-                return (<Autocomplete_1.default.Item key={v} value={v}>
+                return (<Autocomplete.Item key={v} value={v}>
 								{v}
-							</Autocomplete_1.default.Item>);
+							</Autocomplete.Item>);
             })}
-				</Autocomplete_1.default>
-			</FormControl_1.default>);
+				</Autocomplete>
+			</FormControl>);
     },
 };

package/dist/components/Avatar/Avatar.d.ts

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

package/dist/components/Avatar/Avatar.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Icon from "../../components/Icon";
-import Image from "../../components/Image";
-import View from "../../components/View";
-import { responsivePropDependency } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import Icon from "../../components/Icon/index.js";
+import Image from "../../components/Image/index.js";
+import View from "../../components/View/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
     const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes, attributes, } = props;

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

@@ -1,7 +1,7 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { IconProps } from "../../components/Icon";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { IconProps } from "../../components/Icon/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Image URL */
     src?: string;

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

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

package/dist/components/Avatar/index.js

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

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

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