reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../../components/Actionable";
-import type { ViewProps } from "../../components/View";
-import type { Attributes } from "../../types/global";
+import type { ActionableProps } from "../../components/Actionable/index.js";
+import type { ViewProps } from "../../components/View/index.js";
+import type { Attributes } from "../../types/global.js";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = Pick<ViewProps, "padding" | "bleed" | "height" | "direction" | "gap" | "align" | "justify" | "borderRadius"> & {
     /** Highlight the component when component is used for an active state */
     selected?: boolean;

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

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

package/dist/components/Card/index.js

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

package/dist/components/Card/tests/Card.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("../Card").Component;
+    component: import("../Card.js").Component;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,167 +1,161 @@
-"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.as = exports.href = exports.onClick = exports.layout = exports.bleed = exports.raised = exports.selected = exports.borderRadius = exports.padding = void 0;
-const react_1 = require("react");
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Card_1 = __importDefault(require("../../../components/Card"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { useState } from "react";
+import { expect, fn, userEvent } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Card from "../../../components/Card/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Card",
-    component: Card_1.default,
+    component: Card,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/card",
         },
     },
 };
-exports.padding = {
+export const padding = {
     name: "padding",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="padding: default">
-				<Card_1.default>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="padding: default">
+				<Card>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="padding: 2">
-				<Card_1.default padding={2}>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="padding: 2">
+				<Card padding={2}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="padding: 0">
-				<Card_1.default padding={0}>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="padding: 0">
+				<Card padding={0}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
-				<Card_1.default padding={{ s: 4, m: 8 }}>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
+				<Card padding={{ s: 4, m: 8 }}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
 };
-exports.borderRadius = {
+export const borderRadius = {
     name: "borderRadius",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="borderRadius: small">
-				<Card_1.default borderRadius="small">
-					<storybook_1.Placeholder h={10}/>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="borderRadius: medium">
-				<Card_1.default borderRadius="medium">
-					<storybook_1.Placeholder h={30}/>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="borderRadius: large">
-				<Card_1.default borderRadius="large">
-					<storybook_1.Placeholder h={60}/>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["borderRadius: responsive", "[s] small", "[m+] large"]}>
-				<Card_1.default borderRadius={{ s: "small", m: "large" }}>
-					<storybook_1.Placeholder h={60}/>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="borderRadius: small">
+				<Card borderRadius="small">
+					<Placeholder h={10}/>
+				</Card>
+			</Example.Item>
+			<Example.Item title="borderRadius: medium">
+				<Card borderRadius="medium">
+					<Placeholder h={30}/>
+				</Card>
+			</Example.Item>
+			<Example.Item title="borderRadius: large">
+				<Card borderRadius="large">
+					<Placeholder h={60}/>
+				</Card>
+			</Example.Item>
+			<Example.Item title={["borderRadius: responsive", "[s] small", "[m+] large"]}>
+				<Card borderRadius={{ s: "small", m: "large" }}>
+					<Placeholder h={60}/>
+				</Card>
+			</Example.Item>
+		</Example>),
 };
-exports.selected = {
+export const selected = {
     name: "selected",
     render: () => {
-        const [selected, setSelected] = (0, react_1.useState)(true);
-        return (<storybook_1.Example title={<Button_1.default onClick={() => setSelected(!selected)}>Toggle selecion</Button_1.default>}>
-				<storybook_1.Example.Item title="selected">
-					<Card_1.default selected={selected}>
-						<storybook_1.Placeholder />
-					</Card_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        const [selected, setSelected] = useState(true);
+        return (<Example title={<Button onClick={() => setSelected(!selected)}>Toggle selecion</Button>}>
+				<Example.Item title="selected">
+					<Card selected={selected}>
+						<Placeholder />
+					</Card>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.raised = {
+export const raised = {
     name: "raised",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="raised">
-				<Card_1.default raised>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="raised">
+				<Card raised>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
 };
-exports.bleed = {
+export const bleed = {
     name: "bleed",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="bleed: 4">
-				<Card_1.default bleed={4}>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
-				<Card_1.default bleed={{ s: 4, m: 0 }}>
-					<storybook_1.Placeholder />
-				</Card_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="bleed: 4">
+				<Card bleed={4}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+			<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
+				<Card bleed={{ s: 4, m: 0 }}>
+					<Placeholder />
+				</Card>
+			</Example.Item>
+		</Example>),
 };
-exports.layout = {
+export const layout = {
     name: "height, direction, gap, align, justify",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="height: 200px">
-				<Card_1.default height="200px"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="height: 200px">
+				<Card height="200px"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="direction: row, gap: 4, align: center, justify: space-between">
-				<Card_1.default direction="row" gap={4} align="center" justify="space-between">
-					<storybook_1.Placeholder />
-					<storybook_1.Placeholder h={100}/>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="direction: row, gap: 4, align: center, justify: space-between">
+				<Card direction="row" gap={4} align="center" justify="space-between">
+					<Placeholder />
+					<Placeholder h={100}/>
+				</Card>
+			</Example.Item>
+		</Example>),
 };
-exports.onClick = {
+export const onClick = {
     name: "onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => <Card_1.default onClick={args.handleClick}>Trigger</Card_1.default>,
+    render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
     play: async ({ canvas, args }) => {
         const { handleClick } = args;
         const el = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(el);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: el }));
+        await userEvent.click(el);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
     },
 };
-exports.href = {
+export const href = {
     name: "href",
-    render: () => <Card_1.default href="https://reshaped.so">Trigger</Card_1.default>,
+    render: () => <Card href="https://reshaped.so">Trigger</Card>,
     play: async ({ canvas }) => {
         const el = canvas.getByRole("link");
-        (0, test_1.expect)(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
     },
 };
-exports.as = {
+export const as = {
     name: "as",
-    render: () => <Card_1.default as="span" attributes={{ "data-testid": "root" }}/>,
+    render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
     play: ({ canvas }) => {
         const root = canvas.getByTestId("root");
-        (0, test_1.expect)(root.tagName).toBe("SPAN");
+        expect(root.tagName).toBe("SPAN");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Card_1.default className="test-classname" attributes={{ id: "test-id" }}/>
+			<Card className="test-classname" attributes={{ id: "test-id" }}/>
 		</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/Carousel/Carousel.d.ts

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

package/dist/components/Carousel/Carousel.js

@@ -3,11 +3,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 import { rafThrottle } from "@reshaped/utilities/internal";
-import View from "../../components/View";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import useRTL from "../../hooks/useRTL";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
-import CarouselControl from "./CarouselControl";
+import View from "../../components/View/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useRTL from "../../hooks/useRTL.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import CarouselControl from "./CarouselControl.js";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableRef } from "../../components/Actionable";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { ActionableRef } from "../../components/Actionable/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Instance = {
     /** Scroll to the previous item */
     navigateBack: () => void;

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,4 +1,4 @@
-import * as T from "./Carousel.types";
+import * as T from "./Carousel.types.js";
 declare function CarouselControl(props: T.ControlProps): import("react").JSX.Element;
 declare namespace CarouselControl {
     var displayName: string;

package/dist/components/Carousel/CarouselControl.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { classNames } from "@reshaped/utilities";
-import Button from "../../components/Button";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import IconChevronLeft from "../../icons/ChevronLeft";
-import IconChevronRight from "../../icons/ChevronRight";
+import Button from "../../components/Button/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import s from "./Carousel.module.css";
 const CarouselControl = (props) => {
     const { type, controlRef, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted, } = props;

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

@@ -1,2 +1,2 @@
-export { default } from "./Carousel";
-export type { Instance as CarouselInstance, Props as CarouselProps } from "./Carousel.types";
+export { default } from "./Carousel.js";
+export type { Instance as CarouselInstance, Props as CarouselProps } from "./Carousel.types.js";

package/dist/components/Carousel/index.js

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

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

@@ -3,7 +3,7 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/Carousel").CarouselProps>;
+    component: React.FC<import("../../../components/Carousel/index.js").CarouselProps>;
     parameters: {
         a11y: {
             disable: boolean;