reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,53 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabledTransition = exports.uncontrolled = exports.controlled = exports.inverted = exports.inherited = exports.dark = exports.light = exports.scoped = void 0;
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Card_1 = __importDefault(require("../../../components/Card"));
-const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
-const Popover_1 = __importDefault(require("../../../components/Popover"));
-const Theme_1 = __importStar(require("../../../components/Theme"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, userEvent } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Card from "../../../components/Card/index.js";
+import MenuItem from "../../../components/MenuItem/index.js";
+import Popover from "../../../components/Popover/index.js";
+import Theme, { useTheme } from "../../../components/Theme/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Theme",
-    component: Theme_1.default,
+    component: Theme,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/theme",
@@ -55,156 +16,156 @@ exports.default = {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.scoped = {
+export const scoped = {
     name: "scoped",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="scoped, single">
-				<Theme_1.default name="reshaped">
-					<Card_1.default attributes={{ "data-testid": "test-id" }}>
-						<Button_1.default color="primary">Action</Button_1.default>
-					</Card_1.default>
-				</Theme_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="scoped, single">
+				<Theme name="reshaped">
+					<Card attributes={{ "data-testid": "test-id" }}>
+						<Button color="primary">Action</Button>
+					</Card>
+				</Theme>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="scoped, multiple">
-				<Theme_1.default name={["reshaped", "figma"]}>
-					<Card_1.default attributes={{ "data-testid": "test-id-multi" }}>
-						<View_1.default direction="row" gap={4}>
-							<Button_1.default color="primary">Action</Button_1.default>
+			<Example.Item title="scoped, multiple">
+				<Theme name={["reshaped", "figma"]}>
+					<Card attributes={{ "data-testid": "test-id-multi" }}>
+						<View direction="row" gap={4}>
+							<Button color="primary">Action</Button>
 
-							<Popover_1.default>
-								<Popover_1.default.Trigger>
-									{(attributes) => <Button_1.default attributes={attributes}>Popover</Button_1.default>}
-								</Popover_1.default.Trigger>
-								<Popover_1.default.Content>Content</Popover_1.default.Content>
-							</Popover_1.default>
-						</View_1.default>
-					</Card_1.default>
-				</Theme_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+							<Popover>
+								<Popover.Trigger>
+									{(attributes) => <Button attributes={attributes}>Popover</Button>}
+								</Popover.Trigger>
+								<Popover.Content>Content</Popover.Content>
+							</Popover>
+						</View>
+					</Card>
+				</Theme>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const root = canvas.getByTestId("test-id").parentNode;
         const rootMultiple = canvas.getByTestId("test-id-multi").parentNode;
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
-        (0, test_1.expect)(rootMultiple).toHaveAttribute("data-rs-theme", " reshaped figma ");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(rootMultiple).toHaveAttribute("data-rs-theme", " reshaped figma ");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.light = {
+export const light = {
     name: "light",
-    render: () => (<Theme_1.default name="reshaped" colorMode="light">
-			<Card_1.default attributes={{ "data-testid": "test-id" }}>Content</Card_1.default>
-		</Theme_1.default>),
+    render: () => (<Theme name="reshaped" colorMode="light">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
     play: ({ canvas }) => {
         const root = canvas.getByTestId("test-id").parentNode;
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "light");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
     },
 };
-exports.dark = {
+export const dark = {
     name: "dark",
-    render: () => (<Theme_1.default name="reshaped" colorMode="dark">
-			<Card_1.default attributes={{ "data-testid": "test-id" }}>Content</Card_1.default>
-		</Theme_1.default>),
+    render: () => (<Theme name="reshaped" colorMode="dark">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
     play: ({ canvas }) => {
         const root = canvas.getByTestId("test-id").parentNode;
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.inherited = {
+export const inherited = {
     name: "inherited",
-    render: () => (<Theme_1.default name="reshaped">
-			<Card_1.default attributes={{ "data-testid": "test-id" }}>Content</Card_1.default>
-		</Theme_1.default>),
+    render: () => (<Theme name="reshaped">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
     play: ({ canvas }) => {
         const root = canvas.getByTestId("test-id").parentNode;
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
         // Our storybook setup uses dark by default
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.inverted = {
+export const inverted = {
     name: "inverted",
-    render: () => (<Theme_1.default name="reshaped" colorMode="inverted">
-			<Card_1.default attributes={{ "data-testid": "test-id" }}>Content</Card_1.default>
-		</Theme_1.default>),
+    render: () => (<Theme name="reshaped" colorMode="inverted">
+			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
+		</Theme>),
     play: ({ canvas }) => {
         const root = canvas.getByTestId("test-id").parentNode;
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "light");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "light");
     },
 };
-exports.controlled = {
+export const controlled = {
     name: "controlled",
     render: () => {
         const Internal = () => {
-            const { setTheme } = (0, Theme_1.useTheme)();
-            return (<Button_1.default color="primary" onClick={() => setTheme("slate")}>
+            const { setTheme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
 					Switch to slate
-				</Button_1.default>);
+				</Button>);
         };
         return (<div data-testid="root">
-				<Theme_1.default name="reshaped">
+				<Theme name="reshaped">
 					<Internal />
-				</Theme_1.default>
+				</Theme>
 			</div>);
     },
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const trigger = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
-        await test_1.userEvent.click(trigger);
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.uncontrolled = {
+export const uncontrolled = {
     name: "uncontrolled",
     render: () => {
         const Internal = () => {
-            const { setTheme } = (0, Theme_1.useTheme)();
-            return (<Button_1.default color="primary" onClick={() => setTheme("slate")}>
+            const { setTheme } = useTheme();
+            return (<Button color="primary" onClick={() => setTheme("slate")}>
 					Switch to slate
-				</Button_1.default>);
+				</Button>);
         };
         return (<div data-testid="root">
-				<Theme_1.default defaultName="reshaped">
+				<Theme defaultName="reshaped">
 					<Internal />
-				</Theme_1.default>
+				</Theme>
 			</div>);
     },
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const trigger = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "reshaped");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
-        await test_1.userEvent.click(trigger);
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "slate");
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
+        await userEvent.click(trigger);
+        expect(root).toHaveAttribute("data-rs-theme", "slate");
+        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.disabledTransition = {
+export const disabledTransition = {
     name: "disabled transitions",
     render: () => {
-        const { invertColorMode } = (0, Theme_1.useTheme)();
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="should have no transitions while switching color mode">
-					<View_1.default gap={3}>
-						<Button_1.default onClick={invertColorMode}>Invert mode</Button_1.default>
+        const { invertColorMode } = useTheme();
+        return (<Example>
+				<Example.Item title="should have no transitions while switching color mode">
+					<View gap={3}>
+						<Button onClick={invertColorMode}>Invert mode</Button>
 
-						<MenuItem_1.default selected>Test transition</MenuItem_1.default>
+						<MenuItem selected>Test transition</MenuItem>
 
-						<Card_1.default>Default card</Card_1.default>
+						<Card>Default card</Card>
 
-						<Theme_1.default colorMode="inverted">
-							<Card_1.default>Inverted card</Card_1.default>
-						</Theme_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						<Theme colorMode="inverted">
+							<Card>Inverted card</Card>
+						</Theme>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };

package/dist/components/Theme/useTheme.d.ts

@@ -1,10 +1,10 @@
-export declare const useGlobalColorMode: () => import("./Theme.types").GlobalColorModeContextData;
+export declare const useGlobalColorMode: () => import("./Theme.types.js").GlobalColorModeContextData;
 export declare const useTheme: () => {
-    theme: import("../../types/global").Theme;
-    setTheme: (theme: import("../../types/global").Theme) => void;
-    rootTheme: import("../../types/global").Theme;
-    setRootTheme: (theme: import("../../types/global").Theme) => void;
-    colorMode: import("../..").ColorMode;
-    setColorMode: (mode: import("../..").ColorMode) => void;
+    theme: import("../../types/global.js").Theme;
+    setTheme: (theme: import("../../types/global.js").Theme) => void;
+    rootTheme: import("../../types/global.js").Theme;
+    setRootTheme: (theme: import("../../types/global.js").Theme) => void;
+    colorMode: import("../../index.js").ColorMode;
+    setColorMode: (mode: import("../../index.js").ColorMode) => void;
     invertColorMode: () => void;
 };

package/dist/components/Theme/useTheme.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { GlobalColorModeContext, ThemeContext } from "./Theme.context";
+import { GlobalColorModeContext, ThemeContext } from "./Theme.context.js";
 export const useGlobalColorMode = () => {
     return React.useContext(GlobalColorModeContext);
 };

package/dist/components/Toast/Toast.constants.d.ts

@@ -1,4 +1,4 @@
-import type * as T from "./Toast.types";
+import type * as T from "./Toast.types.js";
 export declare const timeouts: Record<T.Timeout, number>;
 export declare const toastWidths: Record<T.WidthPreset, string | undefined>;
 export declare const positions: T.Position[];

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Toast.types";
+import type * as T from "./Toast.types.js";
 declare const context: React.Context<T.Context>;
 export default context;

package/dist/components/Toast/Toast.context.js

@@ -1,5 +1,5 @@
 "use client";
 import React from "react";
-import { defaultContextData } from "./Toast.constants";
+import { defaultContextData } from "./Toast.constants.js";
 const context = React.createContext(defaultContextData);
 export default context;

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Toast.types";
+import type * as T from "./Toast.types.js";
 declare const Toast: React.FC<T.Props & {
     collapsed: boolean;
 }>;

package/dist/components/Toast/Toast.js

@@ -2,10 +2,10 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Button from "../../components/Button";
-import Icon from "../../components/Icon";
-import Text from "../../components/Text";
-import View from "../../components/View";
+import Button from "../../components/Button/index.js";
+import Icon from "../../components/Icon/index.js";
+import Text from "../../components/Text/index.js";
+import View from "../../components/View/index.js";
 import s from "./Toast.module.css";
 const Toast = (props) => {
     const { text, children, color = "neutral", orientation = "horizontal", icon, title, actionsSlot, startSlot, className, attributes, } = props;

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { IconProps } from "../../components/Icon";
-import type { Attributes } from "../../types/global";
+import type { IconProps } from "../../components/Icon/index.js";
+import type { Attributes } from "../../types/global.js";
 export type Status = "entering" | "entered" | "exited";
 export type TimeoutAlias = "short" | "long";
 export type Timeout = TimeoutAlias | number;

package/dist/components/Toast/ToastContainer.d.ts

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

package/dist/components/Toast/ToastContainer.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames, TrapFocus } from "@reshaped/utilities";
 import { checkKeyboardMode } from "@reshaped/utilities/internal";
-import { onNextFrame, checkTransitions } from "../../utilities/animation";
-import Toast from "./Toast";
-import { timeouts, toastWidths } from "./Toast.constants";
-import ToastContext from "./Toast.context";
+import { onNextFrame, checkTransitions } from "../../utilities/animation.js";
+import Toast from "./Toast.js";
+import { timeouts, toastWidths } from "./Toast.constants.js";
+import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";
 const isWidthPreset = (width) => width === "short" || width === "long";
 const resolveWidth = (width) => {

package/dist/components/Toast/ToastProvider.d.ts

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

package/dist/components/Toast/ToastProvider.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { defaultContextData, positions } from "./Toast.constants";
-import ToastContext from "./Toast.context";
-import ToastRegion from "./ToastRegion";
-import useToast from "./useToast";
+import { defaultContextData, positions } from "./Toast.constants.js";
+import ToastContext from "./Toast.context.js";
+import ToastRegion from "./ToastRegion.js";
+import useToast from "./useToast.js";
 let counter = 0;
 const generateId = () => `__rs-toast-${counter++}`;
 const toastReducer = (state, action) => {

package/dist/components/Toast/ToastRegion.d.ts

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

package/dist/components/Toast/ToastRegion.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 import { focusableSelector } from "@reshaped/utilities/internal";
-import ToastContext from "./Toast.context";
-import ToastContainer from "./ToastContainer";
+import ToastContext from "./Toast.context.js";
+import ToastContainer from "./ToastContainer.js";
 import s from "./Toast.module.css";
 const ToastRegion = (props) => {
     const { position, nested } = props;

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

@@ -1,3 +1,3 @@
-export type { Props as ToastProps, ProviderProps as ToastProviderProps, ShowProps as ToastShowProps, } from "./Toast.types";
-export { default as ToastProvider } from "./ToastProvider";
-export { default as useToast } from "./useToast";
+export type { Props as ToastProps, ProviderProps as ToastProviderProps, ShowProps as ToastShowProps, } from "./Toast.types.js";
+export { default as ToastProvider } from "./ToastProvider.js";
+export { default as useToast } from "./useToast.js";

package/dist/components/Toast/index.js

@@ -1,2 +1,2 @@
-export { default as ToastProvider } from "./ToastProvider";
-export { default as useToast } from "./useToast";
+export { default as ToastProvider } from "./ToastProvider.js";
+export { default as useToast } from "./useToast.js";