@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Textarea/Textarea.mdx

@@ -0,0 +1,143 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TextareaStories from './Textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+The Textarea component is a multi-line text input field that enables users to enter longer text content. It's ideal for collecting detailed information, feedback, comments, or any content that requires multiple lines of text.
+
+## Usage
+
+<Canvas of={TextareaStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={TextareaStories.Documentation}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+```
+
+## Examples
+
+### With Validate Function
+The Textarea component supports validation using the validation prop, as shown in the example above.
+For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
+Try entering less than 10 characters to see it in action, and click on **Show code** to view the validation function.
+
+<Canvas of={TextareaStories.WithValidateFunction} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const MessageTextarea = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const validate = async () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.length < 10) {
+            setValidation({ isValid: false, message: "Message must be at least 10 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter a message (minimum 10 characters)"
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            validate={validate}
+            validation={validation}
+        />
+    );
+};` } }
+/>
+
+
+## Anatomy
+
+### Textarea
+<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy"/>
+
+### Styles
+<img src="/images/storybook/textarea/styles.png" alt="Styles"/>
+
+### Field Size
+<img src="/images/storybook/textarea/field-size.png" alt="Field Size"/>
+
+### States and Styles
+<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/textarea/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms"/>

package/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "./";
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Documentation: Story;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const WithValidateFunction: Story;
+export declare const FullExample: Story;

package/Textarea/Textarea.stories.js

@@ -0,0 +1,192 @@
+import React, { useState } from "react";
+import { Textarea } from "./";
+const meta = {
+  title: "Components/Form/Textarea",
+  component: Textarea,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState("");
+    return /*#__PURE__*/React.createElement(Textarea, Object.assign({}, args, {
+      value: value,
+      onChange: newValue => setValue(newValue)
+    }));
+  },
+  args: {
+    label: "Message",
+    description: "Enter your feedback or message",
+    note: "Please be specific and provide relevant details",
+    placeholder: "Type your message here...",
+    required: true,
+    disabled: false,
+    onChange: undefined,
+    validation: {
+      isValid: true,
+      message: ""
+    },
+    value: "",
+    validate: undefined
+  },
+  argTypes: {
+    size: {
+      description: "Textarea field size",
+      control: "select",
+      options: ["md", "lg", "xl"],
+      defaultValue: "lg"
+    },
+    variant: {
+      description: "Textarea field style variant",
+      control: "select",
+      options: ["primary", "secondary", "ghost", "ghost-negative"],
+      defaultValue: "primary"
+    },
+    label: {
+      description: "Label text for the textarea",
+      control: "text"
+    },
+    description: {
+      description: "Additional description text below the textarea",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the textarea",
+      control: "text"
+    },
+    placeholder: {
+      description: "Placeholder text shown when the textarea is empty",
+      control: "text"
+    },
+    required: {
+      description: "Makes the textarea required when set to true",
+      control: "boolean"
+    },
+    disabled: {
+      description: "Disables the textarea when set to true",
+      control: "boolean"
+    },
+    validation: {
+      description: "Object containing validation state and message",
+      control: "object"
+    },
+    value: {
+      description: "The current value of the textarea",
+      control: "text"
+    },
+    onChange: {
+      description: "Function called when the textarea value changes",
+      control: "none"
+    },
+    validate: {
+      description: "Custom validation function, please refer to **With Validate Function** section below.",
+      control: "none"
+    }
+  }
+};
+export const Default = {};
+export const WithLabel = {
+  args: {
+    label: "Message"
+  }
+};
+export const WithLabelRequired = {
+  args: {
+    ...Default.args,
+    label: "Message",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Enter your feedback or message in detail"
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "All messages are reviewed within 24 hours"
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Message",
+    disabled: true
+  }
+};
+export const WithValidateFunction = {
+  render: args => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+    const validate = async () => {
+      if (!value.trim()) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else if (value.length < 10) {
+        setValidation({
+          isValid: false,
+          message: "Message must be at least 10 characters long"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+    return /*#__PURE__*/React.createElement(Textarea, Object.assign({}, args, {
+      value: value,
+      onChange: newValue => setValue(newValue),
+      validate: validate,
+      validation: validation
+    }));
+  },
+  args: {
+    ...Default.args,
+    label: "Message",
+    required: true,
+    description: "Enter a message (minimum 10 characters)"
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Message",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your message is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+
+//# sourceMappingURL=Textarea.stories.js.map

package/Textarea/Textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Textarea","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","Documentation","render","args","value","setValue","createElement","Object","assign","newValue","label","description","note","placeholder","required","undefined","validation","isValid","message","validate","size","options","variant","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","setValidation","trim","length","FullExample"],"sources":["Textarea.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Textarea } from \"~/Textarea\";\n\nconst meta: Meta<typeof Textarea> = {\n    title: \"Components/Form/Textarea\",\n    component: Textarea,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Textarea>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n\n        return <Textarea {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Message\",\n        description: \"Enter your feedback or message\",\n        note: \"Please be specific and provide relevant details\",\n        placeholder: \"Type your message here...\",\n        required: true,\n        disabled: false,\n        onChange: undefined,\n        validation: {\n            isValid: true,\n            message: \"\"\n        },\n        value: \"\",\n        validate: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Textarea field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Textarea field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text for the textarea\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional description text below the textarea\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the textarea\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when the textarea is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the textarea required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the textarea when set to true\",\n            control: \"boolean\"\n        },\n        validation: {\n            description: \"Object containing validation state and message\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The current value of the textarea\",\n            control: \"text\"\n        },\n        onChange: {\n            description: \"Function called when the textarea value changes\",\n            control: \"none\"\n        },\n        validate: {\n            description:\n                \"Custom validation function, please refer to **With Validate Function** section below.\",\n            control: \"none\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Message\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Enter your feedback or message in detail\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"All messages are reviewed within 24 hours\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const validate = async () => {\n            if (!value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (value.length < 10) {\n                setValidation({\n                    isValid: false,\n                    message: \"Message must be at least 10 characters long\"\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Textarea\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Enter a message (minimum 10 characters)\"\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Message\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your message is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Textarea/TextareaPrimitive.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type VariantProps } from "../utils";
+declare const textareaVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
+    size?: "md" | "lg" | "xl" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface TextareaPrimitiveProps extends React.ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
+    /**
+     * Reference to the textarea element.
+     */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * If true, it will pass the native `event` to the `onChange` callback
+     */
+    forwardEventOnChange?: boolean;
+    /**
+     * Callback function to be called when the Enter key is pressed.
+     */
+    onEnter?: () => void;
+}
+declare const TextareaPrimitive: (({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element) & {
+    original: ({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, variant, invalid, size, textareaRef, forwardEventOnChange, onChange: originalOnChange, onEnter, onKeyDown: originalOnKeyDown, value, ...props }: TextareaPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { TextareaPrimitive, type TextareaPrimitiveProps };

package/Textarea/TextareaPrimitive.js

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable } from "../utils";
+const textareaVariants = cva(["wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed"], {
+  variants: {
+    variant: {
+      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-border-neutral-strong", "focus:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
+      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dimmed", "focus:wby-bg-neutral-base focus:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
+      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus:wby-bg-neutral-dark/5", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled"],
+      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50", "hover:wby-bg-neutral-base/20", "focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
+    },
+    size: {
+      md: ["wby-px-sm-extra wby-py-xs-plus wby-rounded-md"],
+      lg: ["wby-px-sm-extra wby-py-sm-plus wby-rounded-md"],
+      xl: ["wby-px-md-extra wby-p-md wby-rounded-lg"]
+    },
+    invalid: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    variant: "primary",
+    invalid: true,
+    class: "!wby-border-destructive-default"
+  }, {
+    variant: "secondary",
+    invalid: true,
+    class: "!wby-border-destructive-default"
+  }, {
+    variant: "ghost",
+    invalid: true,
+    class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+  }, {
+    variant: "ghost-negative",
+    invalid: true,
+    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed"
+  }],
+  defaultVariants: {
+    variant: "primary",
+    size: "lg"
+  }
+});
+const DecoratableTextareaPrimitive = ({
+  className,
+  variant,
+  invalid,
+  size,
+  textareaRef,
+  forwardEventOnChange,
+  onChange: originalOnChange,
+  onEnter,
+  onKeyDown: originalOnKeyDown,
+  value,
+  ...props
+}) => {
+  const onChange = React.useCallback(event => {
+    if (!originalOnChange) {
+      return;
+    }
+
+    // @ts-expect-error
+    originalOnChange(forwardEventOnChange ? event : event.target.value);
+  }, [forwardEventOnChange, originalOnChange]);
+  const onKeyDown = React.useCallback(e => {
+    if (typeof onEnter === "function" && e.key === "Enter") {
+      onEnter();
+    }
+    if (typeof originalOnKeyDown === "function") {
+      return originalOnKeyDown(e);
+    }
+  }, [originalOnKeyDown, onEnter]);
+  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, props, {
+    ref: textareaRef,
+    className: cn(textareaVariants({
+      variant,
+      invalid,
+      size
+    }), className),
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    value: value ?? ""
+  }));
+};
+const TextareaPrimitive = makeDecoratable("TextareaPrimitive", DecoratableTextareaPrimitive);
+export { TextareaPrimitive };
+
+//# sourceMappingURL=TextareaPrimitive.js.map

package/Textarea/TextareaPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","textareaVariants","variants","variant","primary","secondary","ghost","size","md","lg","xl","invalid","true","compoundVariants","class","defaultVariants","DecoratableTextareaPrimitive","className","textareaRef","forwardEventOnChange","onChange","originalOnChange","onEnter","onKeyDown","originalOnKeyDown","value","props","useCallback","event","target","e","key","createElement","Object","assign","ref","TextareaPrimitive"],"sources":["TextareaPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst textareaVariants = cva(\n    [\n        \"wby-flex wby-min-h-[80px] wby-w-full wby-border-sm wby-text-md focus-visible:wby-outline-none disabled:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus:wby-bg-neutral-base focus:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dark/5\",\n                    \"focus:wby-bg-neutral-dark/5\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed\",\n                    \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50\"\n                ]\n            },\n            size: {\n                md: [\"wby-px-sm-extra wby-py-xs-plus wby-rounded-md\"],\n                lg: [\"wby-px-sm-extra wby-py-sm-plus wby-rounded-md\"],\n                xl: [\"wby-px-md-extra wby-p-md wby-rounded-lg\"]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"!wby-border-destructive-subtle !wby-bg-destructive-subtle\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"lg\"\n        }\n    }\n);\n\ninterface TextareaPrimitiveProps\n    extends React.ComponentProps<\"textarea\">,\n        VariantProps<typeof textareaVariants> {\n    /**\n     * Reference to the textarea element.\n     */\n    textareaRef?: React.Ref<HTMLTextAreaElement>;\n\n    /**\n     * If true, it will pass the native `event` to the `onChange` callback\n     */\n    forwardEventOnChange?: boolean;\n\n    /**\n     * Callback function to be called when the Enter key is pressed.\n     */\n    onEnter?: () => void;\n}\n\nconst DecoratableTextareaPrimitive = ({\n    className,\n    variant,\n    invalid,\n    size,\n    textareaRef,\n    forwardEventOnChange,\n    onChange: originalOnChange,\n    onEnter,\n    onKeyDown: originalOnKeyDown,\n    value,\n    ...props\n}: TextareaPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLTextAreaElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    return (\n        <textarea\n            {...props}\n            ref={textareaRef}\n            className={cn(textareaVariants({ variant, invalid, size }), className)}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={value ?? \"\"}\n        />\n    );\n};\n\nconst TextareaPrimitive = makeDecoratable(\"TextareaPrimitive\", DecoratableTextareaPrimitive);\n\nexport { TextareaPrimitive, type TextareaPrimitiveProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,gBAAgB,GAAGF,GAAG,CACxB,CACI,+HAA+H,CAClI,EACD;EACIG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,0GAA0G,EAC1G,iCAAiC,EACjC,gCAAgC,EAChC,uJAAuJ,CAC1J;MACDC,SAAS,EAAE,CACP,4GAA4G,EAC5G,6BAA6B,EAC7B,0DAA0D,EAC1D,oHAAoH,CACvH;MACDC,KAAK,EAAE,CACH,uGAAuG,EACvG,6BAA6B,EAC7B,6BAA6B,EAC7B,+GAA+G,CAClH;MACD,gBAAgB,EAAE,CACd,2GAA2G,EAC3G,8BAA8B,EAC9B,oGAAoG,EACpG,4IAA4I,EAC5I,qHAAqH,EACrH,yJAAyJ;IAEjK,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,CAAC,+CAA+C,CAAC;MACrDC,EAAE,EAAE,CAAC,+CAA+C,CAAC;MACrDC,EAAE,EAAE,CAAC,yCAAyC;IAClD,CAAC;IACDC,OAAO,EAAE;MACLC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,gBAAgB,EAAE,CACd;IACIV,OAAO,EAAE,SAAS;IAClBQ,OAAO,EAAE,IAAI;IACbG,KAAK,EAAE;EACX,CAAC,EACD;IACIX,OAAO,EAAE,WAAW;IACpBQ,OAAO,EAAE,IAAI;IACbG,KAAK,EAAE;EACX,CAAC,EACD;IACIX,OAAO,EAAE,OAAO;IAChBQ,OAAO,EAAE,IAAI;IACbG,KAAK,EAAE;EACX,CAAC,EACD;IACIX,OAAO,EAAE,gBAAgB;IACzBQ,OAAO,EAAE,IAAI;IACbG,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbZ,OAAO,EAAE,SAAS;IAClBI,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAqBD,MAAMS,4BAA4B,GAAGA,CAAC;EAClCC,SAAS;EACTd,OAAO;EACPQ,OAAO;EACPJ,IAAI;EACJW,WAAW;EACXC,oBAAoB;EACpBC,QAAQ,EAAEC,gBAAgB;EAC1BC,OAAO;EACPC,SAAS,EAAEC,iBAAiB;EAC5BC,KAAK;EACL,GAAGC;AACiB,CAAC,KAAK;EAC1B,MAAMN,QAAQ,GAAGvB,KAAK,CAAC8B,WAAW,CAC7BC,KAAgD,IAAK;IAClD,IAAI,CAACP,gBAAgB,EAAE;MACnB;IACJ;;IAEA;IACAA,gBAAgB,CAACF,oBAAoB,GAAGS,KAAK,GAAGA,KAAK,CAACC,MAAM,CAACJ,KAAK,CAAC;EACvE,CAAC,EACD,CAACN,oBAAoB,EAAEE,gBAAgB,CAC3C,CAAC;EAED,MAAME,SAAS,GAAG1B,KAAK,CAAC8B,WAAW,CAC9BG,CAA2C,IAAK;IAC7C,IAAI,OAAOR,OAAO,KAAK,UAAU,IAAIQ,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACpDT,OAAO,CAAC,CAAC;IACb;IAEA,IAAI,OAAOE,iBAAiB,KAAK,UAAU,EAAE;MACzC,OAAOA,iBAAiB,CAACM,CAAC,CAAC;IAC/B;EACJ,CAAC,EACD,CAACN,iBAAiB,EAAEF,OAAO,CAC/B,CAAC;EAED,oBACIzB,KAAA,CAAAmC,aAAA,aAAAC,MAAA,CAAAC,MAAA,KACQR,KAAK;IACTS,GAAG,EAAEjB,WAAY;IACjBD,SAAS,EAAEnB,EAAE,CAACG,gBAAgB,CAAC;MAAEE,OAAO;MAAEQ,OAAO;MAAEJ;IAAK,CAAC,CAAC,EAAEU,SAAS,CAAE;IACvEG,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IACrBE,KAAK,EAAEA,KAAK,IAAI;EAAG,EACtB,CAAC;AAEV,CAAC;AAED,MAAMW,iBAAiB,GAAGpC,eAAe,CAAC,mBAAmB,EAAEgB,4BAA4B,CAAC;AAE5F,SAASoB,iBAAiB","ignoreList":[]}

package/Textarea/TextareaPrimitive.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextareaPrimitive } from "./TextareaPrimitive";
+declare const meta: Meta<typeof TextareaPrimitive>;
+export default meta;
+type Story = StoryObj<typeof TextareaPrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;
+export declare const GhostNegativeVariant: Story;
+export declare const GhostNegativeVariantDisabled: Story;
+export declare const GhostNegativeVariantInvalid: Story;
+export declare const WithForwardEventOnChange: Story;

package/Textarea/TextareaPrimitive.stories.js

@@ -0,0 +1,134 @@
+import React from "react";
+import { TextareaPrimitive } from "./TextareaPrimitive";
+const meta = {
+  title: "Components/Form Primitives/Textarea",
+  component: TextareaPrimitive,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onEnter: {
+      action: "onEnter"
+    },
+    onKeyDown: {
+      action: "onKeyDown"
+    },
+    rows: {
+      control: {
+        type: "number"
+      }
+    }
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {};
+export const MediumSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "md"
+  }
+};
+export const LargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "lg"
+  }
+};
+export const ExtraLargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "xl"
+  }
+};
+export const PrimaryVariant = {
+  args: {
+    variant: "primary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const PrimaryVariantDisabled = {
+  args: {
+    ...PrimaryVariant.args,
+    disabled: true
+  }
+};
+export const PrimaryVariantInvalid = {
+  args: {
+    ...PrimaryVariant.args,
+    invalid: true
+  }
+};
+export const SecondaryVariant = {
+  args: {
+    variant: "secondary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const SecondaryVariantDisabled = {
+  args: {
+    ...SecondaryVariant.args,
+    disabled: true
+  }
+};
+export const SecondaryVariantInvalid = {
+  args: {
+    ...SecondaryVariant.args,
+    invalid: true
+  }
+};
+export const GhostVariant = {
+  args: {
+    variant: "ghost",
+    placeholder: "Custom placeholder"
+  }
+};
+export const GhostVariantDisabled = {
+  args: {
+    ...GhostVariant.args,
+    disabled: true
+  }
+};
+export const GhostVariantInvalid = {
+  args: {
+    ...GhostVariant.args,
+    invalid: true
+  }
+};
+export const GhostNegativeVariant = {
+  args: {
+    variant: "ghost-negative",
+    placeholder: "Custom placeholder"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantDisabled = {
+  args: {
+    ...GhostNegativeVariant.args,
+    disabled: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantInvalid = {
+  args: {
+    ...GhostNegativeVariant.args,
+    invalid: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const WithForwardEventOnChange = {
+  args: {
+    ...Default.args,
+    forwardEventOnChange: true
+  }
+};
+
+//# sourceMappingURL=TextareaPrimitive.stories.js.map