reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,214 +1,208 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formControl = exports.className = exports.value = exports.defaultValue = exports.disabled = exports.id = exports.placeholder = exports.render = exports.edgeCases = exports.aligner = exports.error = exports.resize = exports.size = exports.variants = void 0;
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const TextArea_1 = __importDefault(require("../../../components/TextArea"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import FormControl from "../../../components/FormControl/index.js";
+import Text from "../../../components/Text/index.js";
+import TextArea from "../../../components/TextArea/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/TextArea",
-    component: TextArea_1.default,
+    component: TextArea,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/text-area",
         },
     },
 };
-exports.variants = {
+export const variants = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: outline">
-				<TextArea_1.default name="Name" placeholder="Enter your name"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="variant: outline">
+				<TextArea name="Name" placeholder="Enter your name"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: faded">
-				<TextArea_1.default variant="faded" name="Name" placeholder="Enter your name"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="variant: faded">
+				<TextArea variant="faded" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: ghost">
-				<TextArea_1.default variant="ghost" name="Name" placeholder="Enter your name"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="variant: ghost">
+				<TextArea variant="ghost" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: headless">
-				<TextArea_1.default variant="headless" name="Name" placeholder="Enter your name"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="variant: headless">
+				<TextArea variant="headless" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: medium">
-				<TextArea_1.default name="Name" placeholder="Enter your name" size="medium"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="size: medium">
+				<TextArea name="Name" placeholder="Enter your name" size="medium"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large">
-				<TextArea_1.default name="Name" placeholder="Enter your name" size="large"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: large">
+				<TextArea name="Name" placeholder="Enter your name" size="large"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: xlarge">
-				<TextArea_1.default name="Name" placeholder="Enter your name" size="xlarge"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: xlarge">
+				<TextArea name="Name" placeholder="Enter your name" size="xlarge"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive size", "[s] large", "[m+] medium"]}>
-				<TextArea_1.default name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive size", "[s] large", "[m+] medium"]}>
+				<TextArea name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
+			</Example.Item>
+		</Example>),
 };
-exports.resize = {
+export const resize = {
     name: "resize",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="resize: none">
-				<TextArea_1.default name="Name" placeholder="Enter your name" resize="none"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="resize: auto">
-				<TextArea_1.default name="Name" placeholder="Enter your name" resize="auto"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
-};
-exports.error = {
+    render: () => (<Example>
+			<Example.Item title="resize: none">
+				<TextArea name="Name" placeholder="Enter your name" resize="none"/>
+			</Example.Item>
+			<Example.Item title="resize: auto">
+				<TextArea name="Name" placeholder="Enter your name" resize="auto"/>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
     name: "hasError",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="error">
-				<TextArea_1.default name="Name" placeholder="Enter your name" hasError/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="error">
+				<TextArea name="Name" placeholder="Enter your name" hasError/>
+			</Example.Item>
+		</Example>),
 };
-exports.aligner = {
+export const aligner = {
     name: "aligner",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="aligner">
-				<View_1.default gap={2}>
-					<Text_1.default variant="featured-5">What problem are you trying to solve?</Text_1.default>
-					<TextArea_1.default.Aligner>
-						<TextArea_1.default variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-					</TextArea_1.default.Aligner>
-					<View_1.default.Item>
-						<Button_1.default>Next</Button_1.default>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
-};
-exports.edgeCases = {
+    render: () => (<Example>
+			<Example.Item title="aligner">
+				<View gap={2}>
+					<Text variant="featured-5">What problem are you trying to solve?</Text>
+					<TextArea.Aligner>
+						<TextArea variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+					</TextArea.Aligner>
+					<View.Item>
+						<Button>Next</Button>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const edgeCases = {
     name: "test: edge cases",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="long value without breaks">
-				<TextArea_1.default name="hey" defaultValue={`<div style="position:relative;width:100%;padding-top:calc(150% + 72px)">
+    render: () => (<Example>
+			<Example.Item title="long value without breaks">
+				<TextArea name="hey" defaultValue={`<div style="position:relative;width:100%;padding-top:calc(150% + 72px)">
 	<iframe src="nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds" />
 </div>`} resize="auto" placeholder="Placeholder"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.render = {
+export const render = {
     name: "base",
-    render: () => <TextArea_1.default name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    render: () => <TextArea name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveAttribute("name", "test-name");
-        (0, test_1.expect)(input).toHaveAccessibleName("Label");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
     },
 };
-exports.placeholder = {
+export const placeholder = {
     name: "placeholder",
-    render: () => (<TextArea_1.default name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<TextArea name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("");
-        (0, test_1.expect)(input).toHaveAttribute("placeholder", "Placeholder");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
     },
 };
-exports.id = {
+export const id = {
     name: "id",
-    render: () => (<TextArea_1.default name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<TextArea name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-id");
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => <TextArea_1.default name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    render: () => <TextArea name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };
-exports.defaultValue = {
+export const defaultValue = {
     name: "defaultValue, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<TextArea_1.default name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<TextArea name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
         input.focus();
-        await test_1.userEvent.keyboard("2");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "2value",
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).toHaveValue("2value");
+        expect(input).toHaveValue("2value");
     },
 };
-exports.value = {
+export const value = {
     name: "value, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<TextArea_1.default name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<TextArea name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
         input.focus();
-        await test_1.userEvent.keyboard("2");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "2value",
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<TextArea_1.default className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+			<TextArea className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-input-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
     },
 };
-exports.formControl = {
+export const formControl = {
     name: "test: form control",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="with helper">
-				<FormControl_1.default>
-					<FormControl_1.default.Label>Name</FormControl_1.default.Label>
-					<TextArea_1.default name="name" placeholder="Enter your name"/>
-					<FormControl_1.default.Helper>Helper</FormControl_1.default.Helper>
-					<FormControl_1.default.Error>This field is required</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="with error">
-				<FormControl_1.default hasError>
-					<FormControl_1.default.Label>Name</FormControl_1.default.Label>
-					<TextArea_1.default name="name" placeholder="Enter your name"/>
-					<FormControl_1.default.Error>This field is required</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="with helper">
+				<FormControl>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextArea name="name" placeholder="Enter your name"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+			<Example.Item title="with error">
+				<FormControl hasError>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextArea name="name" placeholder="Enter your name"/>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };

package/dist/components/TextField/TextField.d.ts

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

package/dist/components/TextField/TextField.js

@@ -2,11 +2,11 @@
 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 Icon from "../../components/Icon";
-import useElementId from "../../hooks/useElementId";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import { useFormControl } from "../../components/FormControl/index.js";
+import Icon from "../../components/Icon/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./TextField.module.css";
 const TextFieldSlot = (props) => {
     const { slot, icon, size, affix, position, id } = props;
@@ -51,7 +51,11 @@ const TextField = (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, className, ...mixin.classNames, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], focused && s["--focused"], multiline && s["--multiline"], rounded && s["--rounded"], variant && s[`--variant-${variant}`]);
     const handleChange = (event) => {
         if (!onChange)
@@ -67,7 +71,7 @@ const TextField = (props) => {
                 ? `calc(var(--rs-unit-x1) * ${endSlotPadding})`
                 : undefined,
             ...mixin.variables,
-        }, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsxs("div", { className: s.inner, children: [_jsx("input", { type: "text", autoComplete: "off", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] })] }));
+        }, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: inputId }), _jsxs("div", { className: s.inner, children: [_jsx("input", { type: "text", autoComplete: "off", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: inputId })] })] }));
 };
 TextField.displayName = "TextField";
 export default TextField;

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

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

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

@@ -1,7 +1,7 @@
-import Aligner from "../../components/_private/Aligner";
-import TextField from "./TextField";
+import Aligner from "../../components/_private/Aligner/index.js";
+import TextField from "./TextField.js";
 declare const TextFieldRoot: typeof TextField & {
     Aligner: typeof Aligner;
 };
 export default TextFieldRoot;
-export type { BaseProps as TextFieldBaseProps, Props as TextFieldProps } from "./TextField.types";
+export type { BaseProps as TextFieldBaseProps, Props as TextFieldProps } from "./TextField.types.js";

package/dist/components/TextField/index.js

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

package/dist/components/TextField/tests/TextField.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/TextField").TextFieldProps> & {
-        Aligner: import("react").FC<import("../../../components/Button").ButtonAlignerProps>;
+    component: import("react").FC<import("../../../components/TextField/index.js").TextFieldProps> & {
+        Aligner: import("react").FC<import("../../../components/Button/index.js").ButtonAlignerProps>;
     };
     parameters: {
         iframe: {