reshaped 4.2.0 → 4.3.0-canary.1

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

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

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

package/dist/components/RadioGroup/RadioGroup.d.ts

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

package/dist/components/RadioGroup/RadioGroup.js

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

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { RadioProps } from "../../components/Radio";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { RadioProps } from "../../components/Radio/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 type BaseProps = {
     /** Unique identifier for the radio group */
     id?: string;

package/dist/components/RadioGroup/RadioGroupControlled.d.ts

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

package/dist/components/RadioGroup/RadioGroupControlled.js

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

package/dist/components/RadioGroup/RadioGroupUncontrolled.d.ts

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

package/dist/components/RadioGroup/RadioGroupUncontrolled.js

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

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

@@ -1,3 +1,3 @@
-export { default } from "./RadioGroup";
-export { useRadioGroup } from "./RadioGroup.context";
-export type { Props as RadioGroupProps } from "./RadioGroup.types";
+export { default } from "./RadioGroup.js";
+export { useRadioGroup } from "./RadioGroup.context.js";
+export type { Props as RadioGroupProps } from "./RadioGroup.types.js";

package/dist/components/RadioGroup/index.js

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

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

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

@@ -1,83 +1,77 @@
-"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 Radio_1 = __importDefault(require("../../../components/Radio"));
-const RadioGroup_1 = __importDefault(require("../../../components/RadioGroup"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Radio from "../../../components/Radio/index.js";
+import RadioGroup from "../../../components/RadioGroup/index.js";
+export default {
     title: "Components/RadioGroup",
-    component: RadioGroup_1.default,
+    component: RadioGroup,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/radio",
         },
     },
 };
-exports.value = {
+export const value = {
     name: "value, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<RadioGroup_1.default name="test-name" value="1" onChange={args.handleChange}>
+    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
 			{/* checked should be ignored */}
-			<Radio_1.default value="1" checked={false}>
+			<Radio value="1" checked={false}>
 				Content
-			</Radio_1.default>
+			</Radio>
 
-			<Radio_1.default value="2">Content 2</Radio_1.default>
-		</RadioGroup_1.default>),
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
     play: async ({ canvas, args }) => {
         const inputs = canvas.getAllByRole("radio");
-        (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: "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) => (<RadioGroup_1.default name="test-name" defaultValue="1" onChange={args.handleChange}>
+    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
 			{/* checked should be ignored */}
-			<Radio_1.default value="1" checked={false}>
+			<Radio value="1" checked={false}>
 				Content
-			</Radio_1.default>
+			</Radio>
 
-			<Radio_1.default value="2">Content 2</Radio_1.default>
-		</RadioGroup_1.default>),
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
     play: async ({ canvas, args }) => {
         const inputs = canvas.getAllByRole("radio");
-        (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: "2",
-            event: test_1.expect.objectContaining({ target: inputs[1] }),
+            event: expect.objectContaining({ target: inputs[1] }),
         });
-        (0, test_1.expect)(inputs[0]).not.toBeChecked();
-        (0, test_1.expect)(inputs[1]).toBeChecked();
+        expect(inputs[0]).not.toBeChecked();
+        expect(inputs[1]).toBeChecked();
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<RadioGroup_1.default name="test-name" disabled>
-			<Radio_1.default value="test-value">Content</Radio_1.default>
-		</RadioGroup_1.default>),
+    render: () => (<RadioGroup name="test-name" disabled>
+			<Radio value="test-value">Content</Radio>
+		</RadioGroup>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("radio");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };

package/dist/components/Reshaped/Reshaped.d.ts

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

package/dist/components/Reshaped/Reshaped.js

@@ -2,13 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { GlobalColorMode, PrivateTheme } from "../../components/Theme";
-import { useGlobalColorMode } from "../../components/Theme/useTheme";
-import { ToastProvider } from "../../components/Toast";
-import { SingletonHotkeysProvider } from "../../hooks/_internal/useSingletonHotkeys";
-import { SingletonKeyboardModeProvider } from "../../hooks/_internal/useSingletonKeyboardMode";
-import { SingletonRTLProvider } from "../../hooks/_internal/useSingletonRTL";
-import { SingletonViewportProvider } from "../../hooks/_internal/useSingletonViewport";
+import { GlobalColorMode, PrivateTheme } from "../../components/Theme/index.js";
+import { useGlobalColorMode } from "../../components/Theme/useTheme.js";
+import { ToastProvider } from "../../components/Toast/index.js";
+import { SingletonHotkeysProvider } from "../../hooks/_internal/useSingletonHotkeys.js";
+import { SingletonKeyboardModeProvider } from "../../hooks/_internal/useSingletonKeyboardMode.js";
+import { SingletonRTLProvider } from "../../hooks/_internal/useSingletonRTL.js";
+import { SingletonViewportProvider } from "../../hooks/_internal/useSingletonViewport.js";
 import "./Reshaped.css";
 import s from "./Reshaped.module.css";
 const Reshaped = (props) => {

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { GlobalColorModeProps, ThemeProps } from "../../components/Theme";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { GlobalColorModeProps, ThemeProps } from "../../components/Theme/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Node for inserting children */
     children?: React.ReactNode;

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

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

package/dist/components/Reshaped/index.js

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