reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.edgeCases = exports.testLongText = exports.contentMaxWidth = exports.defaultActive = exports.color = exports.position = void 0;
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Popover_1 = __importDefault(require("../../../components/Popover"));
-const Tooltip_1 = __importDefault(require("../../../components/Tooltip"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useResponsiveClientValue_1 = __importDefault(require("../../../hooks/useResponsiveClientValue"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fireEvent, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Popover from "../../../components/Popover/index.js";
+import Tooltip from "../../../components/Tooltip/index.js";
+import View from "../../../components/View/index.js";
+import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Tooltip",
-    component: Tooltip_1.default,
+    component: Tooltip,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/tooltip",
@@ -22,119 +16,119 @@ exports.default = {
 };
 const Demo = (props) => {
     const { position, ...rest } = props;
-    return (<Tooltip_1.default text={position} position={position} {...rest}>
-			{(attributes) => <Button_1.default attributes={attributes}>Show tooltip</Button_1.default>}
-		</Tooltip_1.default>);
+    return (<Tooltip text={position} position={position} {...rest}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
 };
 const DemoResponsive = (props) => {
     const { position, ...rest } = props;
-    const screenSize = (0, useResponsiveClientValue_1.default)({
+    const screenSize = useResponsiveClientValue({
         s: "small",
         m: "medium",
     });
-    return (<Tooltip_1.default text={position} position={position} {...rest} active={screenSize === "small"}>
-			{(attributes) => <Button_1.default attributes={attributes}>Show tooltip</Button_1.default>}
-		</Tooltip_1.default>);
+    return (<Tooltip text={position} position={position} {...rest} active={screenSize === "small"}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
 };
-exports.position = {
+export const position = {
     name: "position",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="position: bottom-start">
-				<View_1.default direction="row" gap={2}>
-					<Button_1.default.Group>
+    render: () => (<Example>
+			<Example.Item title="position: bottom-start">
+				<View direction="row" gap={2}>
+					<Button.Group>
 						<Demo position="bottom-start" text="Tooltip 1"/>
 						<Demo position="bottom" text="Tooltip 2"/>
 						<Demo position="bottom-end" text="Tooltip 3"/>
-					</Button_1.default.Group>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: bottom">
+					</Button.Group>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: bottom">
 				<Demo position="bottom"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: bottom-end">
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
 				<Demo position="bottom-end"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top-start">
+			</Example.Item>
+			<Example.Item title="position: top-start">
 				<Demo position="top-start"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top">
+			</Example.Item>
+			<Example.Item title="position: top">
 				<Demo position="top"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top-end">
+			</Example.Item>
+			<Example.Item title="position: top-end">
 				<Demo position="top-end"/>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: start">
-				<View_1.default align="end">
+			<Example.Item title="position: start">
+				<View align="end">
 					<Demo position="start"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: start-top">
-				<View_1.default align="end">
+			<Example.Item title="position: start-top">
+				<View align="end">
 					<Demo position="start-top"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: start-bottom">
-				<View_1.default align="end">
+			<Example.Item title="position: start-bottom">
+				<View align="end">
 					<Demo position="start-bottom"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: end">
+			<Example.Item title="position: end">
 				<Demo position="end"/>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: end-top">
+			<Example.Item title="position: end-top">
 				<Demo position="end-top"/>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="position: end-bottom">
+			<Example.Item title="position: end-bottom">
 				<Demo position="end-bottom"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: inverted">
+    render: () => (<Example>
+			<Example.Item title="color: inverted">
 				<Demo color="inverted" position="bottom"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: dark">
+			</Example.Item>
+			<Example.Item title="color: dark">
 				<Demo color="dark" position="bottom"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.defaultActive = {
+export const defaultActive = {
     name: "uncontrolled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<Tooltip_1.default text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
-			{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-		</Tooltip_1.default>),
+    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
+			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+		</Tooltip>),
     play: async ({ canvasElement, args }) => {
         const { ownerDocument } = canvasElement;
         const body = ownerDocument.body;
-        const canvas = (0, test_1.within)(body);
+        const canvas = within(body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.hover(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
         });
         const item = canvas.getByText("Content");
-        (0, test_1.expect)(item).toBeInTheDocument();
-        await test_1.userEvent.unhover(trigger);
-        test_1.fireEvent.mouseMove(ownerDocument, {
+        expect(item).toBeInTheDocument();
+        await userEvent.unhover(trigger);
+        fireEvent.mouseMove(ownerDocument, {
             clientX: (ownerDocument.defaultView?.innerWidth ?? 0) + 1000,
             clientY: (ownerDocument.defaultView?.innerHeight ?? 0) + 1000,
         });
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({});
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
         });
         // FIXME: Fix for the CLI tests, works in Storybook
         // await waitFor(() => {
@@ -142,84 +136,84 @@ exports.defaultActive = {
         // });
     },
 };
-exports.contentMaxWidth = {
+export const contentMaxWidth = {
     name: "contentMaxWidth",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="contentMaxWidth: 200px">
-				<Tooltip_1.default contentMaxWidth="200px" text="Very long tooltip test text that should trigger position update" position="top" active>
-					{(attributes) => <Button_1.default attributes={attributes}>Show tooltip</Button_1.default>}
-				</Tooltip_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="contentMaxWidth: 200px">
+				<Tooltip contentMaxWidth="200px" text="Very long tooltip test text that should trigger position update" position="top" active>
+					{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+				</Tooltip>
+			</Example.Item>
+		</Example>),
 };
-exports.testLongText = {
+export const testLongText = {
     name: "test: long text",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="long text">
-				<Tooltip_1.default active text="Very long tooltip test text that should trigger position update" position="top">
-					{(attributes) => <Button_1.default attributes={attributes}>Show tooltip</Button_1.default>}
-				</Tooltip_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="long text">
+				<Tooltip active text="Very long tooltip test text that should trigger position update" position="top">
+					{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+				</Tooltip>
+			</Example.Item>
+		</Example>),
 };
-exports.edgeCases = {
+export const edgeCases = {
     name: "test: edge cases",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="responsive visibility">
+    render: () => (<Example>
+			<Example.Item title="responsive visibility">
 				<DemoResponsive text="Responsive"/>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="without text">
-				<Tooltip_1.default>{() => <Button_1.default>Button</Button_1.default>}</Tooltip_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="without text">
+				<Tooltip>{() => <Button>Button</Button>}</Tooltip>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="tooltip with popover">
-				<Tooltip_1.default text="Tooltip" position="top">
-					{(attributes) => (<Popover_1.default position="bottom">
-							<Popover_1.default.Trigger>
-								{(popoverAttributes) => (<Button_1.default attributes={{ ...attributes, ...popoverAttributes }}>Action</Button_1.default>)}
-							</Popover_1.default.Trigger>
-							<Popover_1.default.Content>Popover</Popover_1.default.Content>
-						</Popover_1.default>)}
-				</Tooltip_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="tooltip with popover">
+				<Tooltip text="Tooltip" position="top">
+					{(attributes) => (<Popover position="bottom">
+							<Popover.Trigger>
+								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
+							</Popover.Trigger>
+							<Popover.Content>Popover</Popover.Content>
+						</Popover>)}
+				</Tooltip>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="nested popovers inside a tooltip">
-				<View_1.default direction="row" gap={2}>
-					<Tooltip_1.default position="top" text="Hello">
-						{(tooltipAttributes) => (<Popover_1.default position="bottom" width="300px">
-								<Popover_1.default.Trigger>
-									{(attributes) => (<Button_1.default attributes={{ ...tooltipAttributes, ...attributes }}>
+			<Example.Item title="nested popovers inside a tooltip">
+				<View direction="row" gap={2}>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+								<Popover.Trigger>
+									{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
 											Tooltip with popover
-										</Button_1.default>)}
-								</Popover_1.default.Trigger>
-								<Popover_1.default.Content>
-									<View_1.default gap={2} align="center" direction="row" justify="space-between">
+										</Button>)}
+								</Popover.Trigger>
+								<Popover.Content>
+									<View gap={2} align="center" direction="row" justify="space-between">
 										Popover content
-										<Popover_1.default position="bottom" width="300px">
-											<Popover_1.default.Trigger>
-												{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-											</Popover_1.default.Trigger>
-											<Popover_1.default.Content>
-												<View_1.default gap={2}>
-													<Popover_1.default.Dismissible align="center" closeAriaLabel="Close">
+										<Popover position="bottom" width="300px">
+											<Popover.Trigger>
+												{(attributes) => <Button attributes={attributes}>Open</Button>}
+											</Popover.Trigger>
+											<Popover.Content>
+												<View gap={2}>
+													<Popover.Dismissible align="center" closeAriaLabel="Close">
 														Another popover content
-													</Popover_1.default.Dismissible>
+													</Popover.Dismissible>
 
-													<Tooltip_1.default text="Tooltip">
-														{(attributes) => <Button_1.default attributes={attributes}>Button</Button_1.default>}
-													</Tooltip_1.default>
-												</View_1.default>
-											</Popover_1.default.Content>
-										</Popover_1.default>
-									</View_1.default>
-								</Popover_1.default.Content>
-							</Popover_1.default>)}
-					</Tooltip_1.default>
-					<Tooltip_1.default position="top" text="Hello">
-						{(tooltipAttributes) => <Button_1.default attributes={tooltipAttributes}>Just a tooltip</Button_1.default>}
-					</Tooltip_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+													<Tooltip text="Tooltip">
+														{(attributes) => <Button attributes={attributes}>Button</Button>}
+													</Tooltip>
+												</View>
+											</Popover.Content>
+										</Popover>
+									</View>
+								</Popover.Content>
+							</Popover>)}
+					</Tooltip>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
+					</Tooltip>
+				</View>
+			</Example.Item>
+		</Example>),
 };

package/dist/components/View/View.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./View.types";
+import type * as T from "./View.types.js";
 export declare function ViewItem<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.JSX.Element;
 export declare namespace ViewItem {
     var displayName: string;

package/dist/components/View/View.js

@@ -2,10 +2,10 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
 import { classNames } from "@reshaped/utilities";
-import Divider from "../../components/Divider";
-import Hidden from "../../components/Hidden";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import Divider from "../../components/Divider/index.js";
+import Hidden from "../../components/Hidden/index.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./View.module.css";
 export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type * as TStyles from "../../styles/types";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as TStyles from "../../styles/types.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
@@ -76,8 +76,8 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     borderRadius?: G.Responsive<TStyles.Radius>;
     /** Position style */
     position?: G.Responsive<TStyles.Position>;
-    /** Inset style, base unit token number multiplier when used as a number */
-    inset?: G.Responsive<TStyles.Inset>;
+    /** Inset style, base unit token number multiplier when used as a number, "center" centers the element on both axes */
+    inset?: G.Responsive<TStyles.InsetAxis>;
     /** Inset start, base unit token number multiplier when used as a number */
     insetStart?: G.Responsive<TStyles.Inset>;
     /** Inset end, base unit token number multiplier when used as a number */

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

@@ -1,6 +1,6 @@
-import View, { ViewItem } from "./View";
+import View, { ViewItem } from "./View.js";
 declare const ViewRoot: typeof View & {
     Item: typeof ViewItem;
 };
 export default ViewRoot;
-export type { ItemProps as ViewItemProps, Props as ViewProps } from "./View.types";
+export type { ItemProps as ViewItemProps, Props as ViewProps } from "./View.types.js";

package/dist/components/View/index.js

@@ -1,4 +1,4 @@
-import View, { ViewItem } from "./View";
+import View, { ViewItem } from "./View.js";
 const ViewRoot = View;
 ViewRoot.Item = ViewItem;
 export default ViewRoot;

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

@@ -1,13 +1,13 @@
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
-import { type ViewProps } from "../../../components/View";
+import { type ViewProps } from "../../../components/View/index.js";
 declare const _default: {
     title: string;
     component: {
         <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
         displayName: string;
     } & {
-        Item: typeof import("../View").ViewItem;
+        Item: typeof import("../View.js").ViewItem;
     };
     parameters: {
         iframe: {