reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Text/Text.d.ts

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

package/dist/components/Text/Text.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { responsiveClassNames } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import { responsiveClassNames } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Text.module.css";
 const tagMap = {
     "featured-1": "h1",

package/dist/components/Text/Text.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";
 export type Variant = "headline-1" | "headline-2" | "headline-3" | "featured-1" | "featured-2" | "featured-3" | "featured-4" | "featured-5" | "featured-6" | "body-1" | "body-2" | "caption-1" | "caption-2";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Text render variant */

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

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

package/dist/components/Text/index.js

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

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

@@ -1,5 +1,5 @@
 import { StoryObj } from "@storybook/react-vite";
-import Text from "../../../components/Text";
+import Text from "../../../components/Text/index.js";
 declare const _default: {
     title: string;
     component: typeof Text;

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

@@ -1,155 +1,149 @@
-"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.asProp = exports.align = exports.numeric = exports.maxLines = exports.mono = exports.wrap = exports.decoration = exports.color = exports.weight = exports.variant = void 0;
-const test_1 = require("storybook/test");
-const Text_1 = __importDefault(require("../../../components/Text"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Text from "../../../components/Text/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Text",
-    component: Text_1.default,
+    component: Text,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/text",
         },
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: headline-1">
-				<Text_1.default variant="headline-1">Headline 1</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: headline-2">
-				<Text_1.default variant="headline-2">Headline 2</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: headline-3">
-				<Text_1.default variant="headline-3">Headline 3</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-1">
-				<Text_1.default variant="featured-1">Title 1</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-2">
-				<Text_1.default variant="featured-2">Title 2</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-3">
-				<Text_1.default variant="featured-3">Title 3</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-4">
-				<Text_1.default variant="featured-4">Title 4</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-5">
-				<Text_1.default variant="featured-5">Title 5</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: featured-6">
-				<Text_1.default variant="featured-6">Title 6</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: body-1">
-				<Text_1.default variant="body-1">Body 1</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: body-2">
-				<Text_1.default variant="body-2">Body 2</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: caption-1">
-				<Text_1.default variant="caption-1">Caption 1</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: caption-2">
-				<Text_1.default variant="caption-2">Caption 2</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive variant", "[s] body-2", "[m+] featured-4"]}>
-				<Text_1.default variant={{ s: "body-2", m: "featured-4" }}>Responsive</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="variant: headline-1">
+				<Text variant="headline-1">Headline 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: headline-2">
+				<Text variant="headline-2">Headline 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: headline-3">
+				<Text variant="headline-3">Headline 3</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-1">
+				<Text variant="featured-1">Title 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-2">
+				<Text variant="featured-2">Title 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-3">
+				<Text variant="featured-3">Title 3</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-4">
+				<Text variant="featured-4">Title 4</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-5">
+				<Text variant="featured-5">Title 5</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-6">
+				<Text variant="featured-6">Title 6</Text>
+			</Example.Item>
+			<Example.Item title="variant: body-1">
+				<Text variant="body-1">Body 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: body-2">
+				<Text variant="body-2">Body 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: caption-1">
+				<Text variant="caption-1">Caption 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: caption-2">
+				<Text variant="caption-2">Caption 2</Text>
+			</Example.Item>
+			<Example.Item title={["responsive variant", "[s] body-2", "[m+] featured-4"]}>
+				<Text variant={{ s: "body-2", m: "featured-4" }}>Responsive</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.weight = {
+export const weight = {
     name: "weight",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="weight: regular">
-				<Text_1.default weight="regular">Regular</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="weight: medium">
-				<Text_1.default weight="medium">Medium</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="weight: semibold">
-				<Text_1.default weight="semibold">Semibold</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="weight: bold">
-				<Text_1.default weight="bold">Bold</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="weight: extrabold">
-				<Text_1.default weight="extrabold">Extrabold</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
-				<Text_1.default weight={{ s: "regular", m: "bold" }}>Responsive</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="weight: regular">
+				<Text weight="regular">Regular</Text>
+			</Example.Item>
+			<Example.Item title="weight: medium">
+				<Text weight="medium">Medium</Text>
+			</Example.Item>
+			<Example.Item title="weight: semibold">
+				<Text weight="semibold">Semibold</Text>
+			</Example.Item>
+			<Example.Item title="weight: bold">
+				<Text weight="bold">Bold</Text>
+			</Example.Item>
+			<Example.Item title="weight: extrabold">
+				<Text weight="extrabold">Extrabold</Text>
+			</Example.Item>
+			<Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
+				<Text weight={{ s: "regular", m: "bold" }}>Responsive</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: inherit">
-				<Text_1.default>Neutral</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: neutral-faded">
-				<Text_1.default color="neutral-faded">Faded</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive">
-				<Text_1.default color="positive">Positive</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: warning">
-				<Text_1.default color="warning">Warning</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<Text_1.default color="critical">Critical</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary">
-				<Text_1.default color="primary">Primary</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: disabled">
-				<Text_1.default color="disabled" attributes={{ "aria-disabled": true }}>
+    render: () => (<Example>
+			<Example.Item title="color: inherit">
+				<Text>Neutral</Text>
+			</Example.Item>
+			<Example.Item title="color: neutral-faded">
+				<Text color="neutral-faded">Faded</Text>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Text color="positive">Positive</Text>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Text color="warning">Warning</Text>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Text color="critical">Critical</Text>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Text color="primary">Primary</Text>
+			</Example.Item>
+			<Example.Item title="color: disabled">
+				<Text color="disabled" attributes={{ "aria-disabled": true }}>
 					Disabled
-				</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.decoration = {
+export const decoration = {
     name: "decoration",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="decoration: line-through">
-				<Text_1.default decoration="line-through">Line through</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="decoration: line-through">
+				<Text decoration="line-through">Line through</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.wrap = {
+export const wrap = {
     name: "wrap",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="wrap: balance">
-				<Text_1.default wrap="balance" variant="featured-3">
+    render: () => (<Example>
+			<Example.Item title="wrap: balance">
+				<Text wrap="balance" variant="featured-3">
 					The design system you want to build
-				</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.mono = {
+export const mono = {
     name: "monospace",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="monospace">
-				<Text_1.default monospace>Content</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="monospace, variant, weight">
-				<Text_1.default monospace variant="featured-1" weight="regular">
+    render: () => (<Example>
+			<Example.Item title="monospace">
+				<Text monospace>Content</Text>
+			</Example.Item>
+			<Example.Item title="monospace, variant, weight">
+				<Text monospace variant="featured-1" weight="regular">
 					Content
-				</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.maxLines = {
+export const maxLines = {
     name: "maxLines",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="maxLines: 2">
-				<Text_1.default maxLines={2}>
+    render: () => (<Example>
+			<Example.Item title="maxLines: 2">
+				<Text maxLines={2}>
 					There are many variations of passages of Lorem Ipsum available, but the majority have
 					suffered alteration in some form, by injected humour, or randomised words which don't look
 					even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
@@ -159,60 +153,60 @@ exports.maxLines = {
 					combined with a handful of model sentence structures, to generate Lorem Ipsum which looks
 					reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
 					humour, or non-characteristic words etc.
-				</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.numeric = {
+export const numeric = {
     name: "numeric",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="numeric">
-				<Text_1.default numeric>1234567890</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="numeric">
+				<Text numeric>1234567890</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.align = {
+export const align = {
     name: "align",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="align: start">
-				<Text_1.default align="start">Text content</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: center">
-				<Text_1.default align="center">Text content</Text_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: end">
-				<Text_1.default align="end">Text content</Text_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="align: start">
+				<Text align="start">Text content</Text>
+			</Example.Item>
+			<Example.Item title="align: center">
+				<Text align="center">Text content</Text>
+			</Example.Item>
+			<Example.Item title="align: end">
+				<Text align="end">Text content</Text>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
-				<Text_1.default align={{ s: "center", m: "start" }}>Text content</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
+				<Text align={{ s: "center", m: "start" }}>Text content</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.asProp = {
+export const asProp = {
     name: "as",
     render: () => (<>
-			<Text_1.default as="h1">Content</Text_1.default>
-			<Text_1.default variant="featured-3">Content</Text_1.default>
-			<Text_1.default variant={{ s: "featured-3", m: "featured-4" }}>Content</Text_1.default>
+			<Text as="h1">Content</Text>
+			<Text variant="featured-3">Content</Text>
+			<Text variant={{ s: "featured-3", m: "featured-4" }}>Content</Text>
 		</>),
     play: async ({ canvas }) => {
         const els = canvas.getAllByRole("heading");
-        (0, test_1.expect)(els[0].tagName).toEqual("H1");
-        (0, test_1.expect)(els[1].tagName).toBe("H3");
-        (0, test_1.expect)(els[2].tagName).toBe("H4");
+        expect(els[0].tagName).toEqual("H1");
+        expect(els[1].tagName).toBe("H3");
+        expect(els[2].tagName).toBe("H4");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Text_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<Text className="test-classname" attributes={{ id: "test-id" }}>
 				Content
-			</Text_1.default>
+			</Text>
 		</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/TextArea/TextArea.d.ts

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

package/dist/components/TextArea/TextArea.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { useFormControl } from "../../components/FormControl";
-import useElementId from "../../hooks/useElementId";
-import { responsiveClassNames } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import { useFormControl } from "../../components/FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import { responsiveClassNames } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./TextArea.module.css";
 const TextArea = (props) => {
     const { onChange, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;
@@ -20,7 +20,11 @@ const TextArea = (props) => {
         borderColor: disabled ? "disabled" : "neutral",
         border: variant === "outline" ? true : undefined,
     });
-    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
+    const inputAttributes = {
+        ...props.inputAttributes,
+        ...formControl?.attributes,
+        "aria-invalid": hasError || undefined,
+    };
     const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], resize !== undefined && s[`--resize-${resize}`], className);
     const decoratorClassName = classNames(s.decorator, decoratorMixin.classNames);
     const handleChange = (event) => {

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

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { FormControlProps } from "../../components/FormControl";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { FormControlProps } from "../../components/FormControl/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 type BaseProps = {
     /** Unique identifier for the text area */

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

@@ -1,7 +1,7 @@
-import Aligner from "../../components/_private/Aligner";
-import TextArea from "./TextArea";
+import Aligner from "../../components/_private/Aligner/index.js";
+import TextArea from "./TextArea.js";
 declare const TextAreaRoot: typeof TextArea & {
     Aligner: typeof Aligner;
 };
 export default TextAreaRoot;
-export type { Props as TextAreaProps } from "./TextArea.types";
+export type { Props as TextAreaProps } from "./TextArea.types.js";

package/dist/components/TextArea/index.js

@@ -1,5 +1,5 @@
-import Aligner from "../../components/_private/Aligner";
-import TextArea from "./TextArea";
+import Aligner from "../../components/_private/Aligner/index.js";
+import TextArea from "./TextArea.js";
 const TextAreaRoot = TextArea;
 TextAreaRoot.Aligner = Aligner;
 export default TextAreaRoot;

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

@@ -2,8 +2,8 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/TextArea").TextAreaProps> & {
-        Aligner: import("react").FC<import("../../../components/Button").ButtonAlignerProps>;
+    component: import("react").FC<import("../../../components/TextArea/index.js").TextAreaProps> & {
+        Aligner: import("react").FC<import("../../../components/Button/index.js").ButtonAlignerProps>;
     };
     parameters: {
         iframe: {