reshaped 4.2.0 → 4.3.0-canary.1

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

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

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

@@ -1,111 +1,105 @@
-"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.render = exports.duration = exports.color = exports.size = exports.value = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const ProgressBar_1 = __importDefault(require("../../../components/ProgressBar"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import ProgressBar from "../../../components/ProgressBar/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/ProgressBar",
-    component: ProgressBar_1.default,
+    component: ProgressBar,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/progress-bar",
         },
     },
 };
-exports.value = {
+export const value = {
     name: "value",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="value: 50">
-				<ProgressBar_1.default value={50} ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="value: 20, min: 0, max: 40">
-				<ProgressBar_1.default value={20} min={0} max={40} ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="value: 50, min: 0, max: 40">
-				<ProgressBar_1.default value={50} min={0} max={40} ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="value: 50">
+				<ProgressBar value={50} ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="value: 20, min: 0, max: 40">
+				<ProgressBar value={20} min={0} max={40} ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="value: 50, min: 0, max: 40">
+				<ProgressBar value={50} min={0} max={40} ariaLabel="rating value"/>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small, value: 50">
-				<ProgressBar_1.default value={50} size="small" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium, value: 50">
-				<ProgressBar_1.default value={50} size="medium" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="size: small, value: 50">
+				<ProgressBar value={50} size="small" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="size: medium, value: 50">
+				<ProgressBar value={50} size="medium" ariaLabel="rating value"/>
+			</Example.Item>
+		</Example>),
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral, value: 50">
-				<ProgressBar_1.default value={50} color="neutral" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical, value: 50">
-				<ProgressBar_1.default value={50} color="critical" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: warning, value: 50">
-				<ProgressBar_1.default value={50} color="warning" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive, value: 50">
-				<ProgressBar_1.default value={50} color="positive" ariaLabel="rating value"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: media, value: 50">
-				<View_1.default padding={4} backgroundColor="black" borderRadius="medium">
-					<ProgressBar_1.default value={50} color="media" ariaLabel="rating value"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="color: neutral, value: 50">
+				<ProgressBar value={50} color="neutral" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: critical, value: 50">
+				<ProgressBar value={50} color="critical" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: warning, value: 50">
+				<ProgressBar value={50} color="warning" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: positive, value: 50">
+				<ProgressBar value={50} color="positive" ariaLabel="rating value"/>
+			</Example.Item>
+			<Example.Item title="color: media, value: 50">
+				<View padding={4} backgroundColor="black" borderRadius="medium">
+					<ProgressBar value={50} color="media" ariaLabel="rating value"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.duration = {
+export const duration = {
     name: "duration",
     render: () => {
-        const [active, setActive] = react_1.default.useState(false);
+        const [active, setActive] = React.useState(false);
         const handleChange = () => {
             setActive((state) => !state);
         };
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="duration: 2000">
-					<View_1.default gap={3}>
-						<View_1.default.Item>
-							<Button_1.default onClick={handleChange}>Change</Button_1.default>
-						</View_1.default.Item>
+        return (<Example>
+				<Example.Item title="duration: 2000">
+					<View gap={3}>
+						<View.Item>
+							<Button onClick={handleChange}>Change</Button>
+						</View.Item>
 
-						<ProgressBar_1.default value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						<ProgressBar value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.render = {
+export const render = {
     name: "rendering",
-    render: () => <ProgressBar_1.default value={75} min={50} max={100} ariaLabel="progress"/>,
+    render: () => <ProgressBar value={75} min={50} max={100} ariaLabel="progress"/>,
     play: async ({ canvas }) => {
         const el = canvas.getByRole("progressbar");
-        (0, test_1.expect)(el).toBeInTheDocument();
-        (0, test_1.expect)(el).toHaveAttribute("aria-valuenow", "75");
-        (0, test_1.expect)(el).toHaveAttribute("aria-valuemin", "50");
-        (0, test_1.expect)(el).toHaveAttribute("aria-valuemax", "100");
-        (0, test_1.expect)(el).toHaveAccessibleName("progress");
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute("aria-valuenow", "75");
+        expect(el).toHaveAttribute("aria-valuemin", "50");
+        expect(el).toHaveAttribute("aria-valuemax", "100");
+        expect(el).toHaveAccessibleName("progress");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<ProgressBar_1.default className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
+			<ProgressBar className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
 		</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/ProgressIndicator/ProgressIndicator.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Total amount of progress indicator dots */
     total: number;

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

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

package/dist/components/ProgressIndicator/index.js

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

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

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

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

@@ -1,93 +1,87 @@
-"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.ariaLabel = exports.color = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const ProgressIndicator_1 = __importDefault(require("../../../components/ProgressIndicator"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import ProgressIndicator from "../../../components/ProgressIndicator/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/ProgressIndicator",
-    component: ProgressIndicator_1.default,
+    component: ProgressIndicator,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/progress-indicator",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const [activeIndex, setActiveIndex] = react_1.default.useState(0);
+        const [activeIndex, setActiveIndex] = React.useState(0);
         const total = 10;
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="base">
-					<View_1.default gap={4}>
-						<View_1.default direction="row" gap={2} align="center">
-							<Button_1.default onClick={() => {
+        return (<Example>
+				<Example.Item title="base">
+					<View gap={4}>
+						<View direction="row" gap={2} align="center">
+							<Button onClick={() => {
                 setActiveIndex((prev) => Math.max(0, prev - 1));
             }}>
 								Previous
-							</Button_1.default>
-							<Button_1.default onClick={() => {
+							</Button>
+							<Button onClick={() => {
                 setActiveIndex((prev) => Math.min(total - 1, prev + 1));
             }}>
 								Next
-							</Button_1.default>
-							<Text_1.default weight="medium">Index: {activeIndex}</Text_1.default>
-						</View_1.default>
+							</Button>
+							<Text weight="medium">Index: {activeIndex}</Text>
+						</View>
 
-						<View_1.default borderRadius="medium" overflow="hidden" width="300px" backgroundColor="black" height="200px">
-							<View_1.default position="absolute" insetBottom={4} insetStart={4} insetEnd={4} align="center" justify="center">
-								<ProgressIndicator_1.default total={total} activeIndex={activeIndex} color="media"/>
-							</View_1.default>
-						</View_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						<View borderRadius="medium" overflow="hidden" width="300px" backgroundColor="black" height="200px">
+							<View position="absolute" insetBottom={4} insetStart={4} insetEnd={4} align="center" justify="center">
+								<ProgressIndicator total={total} activeIndex={activeIndex} color="media"/>
+							</View>
+						</View>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.color = {
+export const color = {
     name: "color",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="color: primary">
-					<ProgressIndicator_1.default total={10} activeIndex={5} color="primary"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="color: media">
-					<View_1.default borderRadius="medium" overflow="hidden" width="300px" backgroundColor="black" height="200px">
-						<View_1.default position="absolute" insetBottom={4} insetStart={4} insetEnd={4} align="center" justify="center">
-							<ProgressIndicator_1.default total={10} activeIndex={5} color="media"/>
-						</View_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        return (<Example>
+				<Example.Item title="color: primary">
+					<ProgressIndicator total={10} activeIndex={5} color="primary"/>
+				</Example.Item>
+				<Example.Item title="color: media">
+					<View borderRadius="medium" overflow="hidden" width="300px" backgroundColor="black" height="200px">
+						<View position="absolute" insetBottom={4} insetStart={4} insetEnd={4} align="center" justify="center">
+							<ProgressIndicator total={10} activeIndex={5} color="media"/>
+						</View>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.ariaLabel = {
+export const ariaLabel = {
     name: "ariaLabel",
-    render: () => <ProgressIndicator_1.default total={10} className="test-classname" ariaLabel="Progress"/>,
+    render: () => <ProgressIndicator total={10} className="test-classname" ariaLabel="Progress"/>,
     play: async ({ canvas }) => {
         const progress = canvas.getByRole("progressbar");
-        (0, test_1.expect)(progress).toHaveAttribute("aria-valuenow", "0");
-        (0, test_1.expect)(progress).toHaveAttribute("aria-valuemin", "0");
-        (0, test_1.expect)(progress).toHaveAttribute("aria-valuemax", "9");
-        (0, test_1.expect)(progress).toHaveAccessibleName("Progress");
+        expect(progress).toHaveAttribute("aria-valuenow", "0");
+        expect(progress).toHaveAttribute("aria-valuemin", "0");
+        expect(progress).toHaveAttribute("aria-valuemax", "9");
+        expect(progress).toHaveAccessibleName("Progress");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<ProgressIndicator_1.default total={10} className="test-classname" attributes={{ id: "test-id" }}/>
+			<ProgressIndicator total={10} 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/Radio/Radio.d.ts

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

package/dist/components/Radio/Radio.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { useFormControl } from "../../components/FormControl";
-import HiddenInput from "../../components/HiddenInput";
-import { useRadioGroup } from "../../components/RadioGroup";
-import Text from "../../components/Text";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
+import { useFormControl } from "../../components/FormControl/index.js";
+import HiddenInput from "../../components/HiddenInput/index.js";
+import { useRadioGroup } from "../../components/RadioGroup/index.js";
+import Text from "../../components/Text/index.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, size = "medium", className, attributes, inputAttributes, } = props;
@@ -17,7 +17,11 @@ const Radio = (props) => {
     const defaultChecked = radioGroup ? undefined : props.defaultChecked;
     const name = radioGroup ? radioGroup.name : props.name;
     const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, attributes: inputAttributes }), _jsx("div", { className: s.decorator, children: _jsx("span", { className: s.dot }) })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, attributes: {
+                            ...inputAttributes,
+                            ...formControl.attributes,
+                            "aria-invalid": hasError || undefined,
+                        } }), _jsx("div", { className: s.decorator, children: _jsx("span", { className: s.dot }) })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
                     if (size === "large")
                         return "body-1";
                     if (size === "small")

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 type BaseProps = {
     /** Node for inserting children */
     children?: React.ReactNode;

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

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

package/dist/components/Radio/index.js

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

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