@telia/teddy 0.7.34 → 0.7.36

package/dist/components/tabs/tabs-root.d.ts

@@ -34,7 +34,7 @@ type RootContextType = {
     value: string | undefined;
 };
 export declare const RootContext: React.Context<RootContextType | undefined>;
-export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "value" | "onValueChange" | "activationMode"> & {
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref">, "value" | "defaultValue" | "onValueChange" | "activationMode"> & {
     /** The controlled value of the tab to activate. Should be used in conjunction with onValueChange. */
     value?: TabsPrimitive.TabsProps['value'];
     /** Event handler called when the value changes. */

package/dist/components/tabs/tabs-scroll-button.d.ts

@@ -10,7 +10,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("dashed" | "default") | undefined;
 } & {
     iconOnly: true;
@@ -22,7 +22,7 @@ export declare const ScrollButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("dashed" | "default") | undefined;
 } & {
     iconOnly?: false | undefined;

package/dist/components/text-field/index.cjs

@@ -9,6 +9,7 @@ const components_textField_textFieldErrorList = require("./text-field-error-list
 const components_textField_textFieldIndicator = require("./text-field-indicator.cjs");
 const components_textField_textFieldButton = require("./text-field-button.cjs");
 const components_textField_textFieldClearButton = require("./text-field-clear-button.cjs");
+const components_textField_textFieldTextarea = require("./text-field-textarea.cjs");
 components_textField_textField.Root.displayName = "TextField";
 components_textField_textFieldInput.Input.displayName = "TextField.Input";
 components_textField_textFieldLabel.Label.displayName = "TextField.Label";
@@ -20,6 +21,7 @@ components_textField_textFieldButton.Button.displayName = "TextField.Button";
 components_textField_textFieldClearButton.ClearButton.displayName = "TextField.ClearButton";
 const TextField = Object.assign(components_textField_textField.Root, {
   Input: components_textField_textFieldInput.Input,
+  Textarea: components_textField_textFieldTextarea.Textarea,
   Label: components_textField_textFieldLabel.Label,
   InputGroup: components_textField_textFieldInputGroup.InputGroup,
   HelperText: components_textField_textFieldHelperText.HelperText,

package/dist/components/text-field/index.d.ts

@@ -7,6 +7,7 @@ import { TextFieldErrorListProps } from './text-field-error-list';
 import { TextFieldIndicatorProps } from './text-field-indicator';
 import { TextFieldButtonProps } from './text-field-button';
 import { TextFieldClearButtonProps } from './text-field-clear-button';
+import { TextFieldTextareaProps } from './text-field-textarea';
 
 export declare const TextField: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import('../input/input-indicator').InputIndicatorProps, "isLoading" | "isValid"> & {
     disabled?: boolean | undefined;
@@ -15,6 +16,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
     isRequired?: boolean | undefined;
 } & import('react').RefAttributes<HTMLDivElement>> & {
     Input: import('react').ForwardRefExoticComponent<TextFieldInputProps & import('react').RefAttributes<HTMLInputElement>>;
+    Textarea: import('react').ForwardRefExoticComponent<TextFieldTextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
     Label: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-label').LabelProps & import('react').RefAttributes<HTMLLabelElement>, "ref"> & {
         disabled?: boolean | undefined;
         isRequired?: boolean | undefined;
@@ -35,7 +37,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("dashed" | "default") | undefined;
     } & {
         iconOnly: true;
@@ -47,7 +49,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
         loading?: boolean | undefined;
         fullWidth?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+        variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
         borderStyle?: ("dashed" | "default") | undefined;
     } & {
         iconOnly?: false | undefined;
@@ -60,6 +62,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
 export type TextFieldProps = {
     Root: TextFieldRootProps;
     Input: TextFieldInputProps;
+    Textarea: TextFieldTextareaProps;
     Label: TextFieldLabelProps;
     Group: TextFieldInputGroupProps;
     HelperText: TextFieldHelperTextProps;

package/dist/components/text-field/index.js

@@ -7,6 +7,7 @@ import { ErrorList } from "./text-field-error-list.js";
 import { Indicator } from "./text-field-indicator.js";
 import { Button } from "./text-field-button.js";
 import { ClearButton } from "./text-field-clear-button.js";
+import { Textarea } from "./text-field-textarea.js";
 Root.displayName = "TextField";
 Input.displayName = "TextField.Input";
 Label.displayName = "TextField.Label";
@@ -18,6 +19,7 @@ Button.displayName = "TextField.Button";
 ClearButton.displayName = "TextField.ClearButton";
 const TextField = Object.assign(Root, {
   Input,
+  Textarea,
   Label,
   InputGroup,
   HelperText,

package/dist/components/text-field/text-field-button.d.ts

@@ -11,7 +11,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("dashed" | "default") | undefined;
 } & {
     iconOnly: true;
@@ -23,7 +23,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "list-item" | "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "text-underline" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("dashed" | "default") | undefined;
 } & {
     iconOnly?: false | undefined;

package/dist/components/text-field/text-field-textarea.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_textField_textField = require("./text-field.cjs");
+const components_textarea_index = require("../textarea/index.cjs");
+const Textarea = React.forwardRef((props, forwardRef) => {
+  var _a;
+  const context = React.useContext(components_textField_textField.TextFieldContext);
+  const id = context == null ? void 0 : context.id;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_textarea_index.TextareaGroup.Textarea,
+    {
+      ...props,
+      "aria-describedby": [context == null ? void 0 : context.errorId, context == null ? void 0 : context.helperTextId].filter(Boolean).join(" "),
+      disabled: context == null ? void 0 : context.disabled,
+      readOnly: context == null ? void 0 : context.readOnly,
+      required: context == null ? void 0 : context.isRequired,
+      isLoading: context == null ? void 0 : context.isLoading,
+      validationState: (context == null ? void 0 : context.isValid) ? "valid" : ((_a = context == null ? void 0 : context.errors) == null ? void 0 : _a.length) ? "invalid" : void 0,
+      id,
+      ref: forwardRef
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+exports.Textarea = Textarea;

package/dist/components/text-field/text-field-textarea.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextareaGroupProps } from '../textarea';
+
+export type TextFieldTextareaProps = Omit<TextareaGroupProps['Textarea'], 'id' | 'disabled' | 'readOnly' | 'required'>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/text-field/text-field-textarea.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { TextFieldContext } from "./text-field.js";
+import { TextareaGroup } from "../textarea/index.js";
+const Textarea = React__default.forwardRef((props, forwardRef) => {
+  var _a;
+  const context = React__default.useContext(TextFieldContext);
+  const id = context == null ? void 0 : context.id;
+  return /* @__PURE__ */ jsx(
+    TextareaGroup.Textarea,
+    {
+      ...props,
+      "aria-describedby": [context == null ? void 0 : context.errorId, context == null ? void 0 : context.helperTextId].filter(Boolean).join(" "),
+      disabled: context == null ? void 0 : context.disabled,
+      readOnly: context == null ? void 0 : context.readOnly,
+      required: context == null ? void 0 : context.isRequired,
+      isLoading: context == null ? void 0 : context.isLoading,
+      validationState: (context == null ? void 0 : context.isValid) ? "valid" : ((_a = context == null ? void 0 : context.errors) == null ? void 0 : _a.length) ? "invalid" : void 0,
+      id,
+      ref: forwardRef
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/components/textarea/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_textarea_textareaGroup = require("./textarea-group.cjs");
+const components_textarea_textareaClearButton = require("./textarea-clear-button.cjs");
+const TextareaGroup = Object.assign(components_textarea_textareaGroup.Root, {
+  Textarea: components_textarea_textareaGroup.Textarea$1,
+  TextareaIndicator: components_textarea_textareaGroup.TextareaIndicator$1,
+  TextareaClearButton: components_textarea_textareaClearButton.TextareaClearButton
+});
+exports.Textarea = components_textarea_textareaGroup.Textarea$1;
+exports.TextareaGroup = TextareaGroup;

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

@@ -0,0 +1,30 @@
+import { Textarea, TextareaProps } from './textarea';
+import { TextareaIndicatorProps } from './textarea-indicator';
+import { TextareaGroupRootProps } from './textarea-group';
+import { TextareaClearButtonProps } from './textarea-clear-button';
+
+declare const TextareaGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    frameClassName?: string | undefined;
+    preventGroupClickSelect?: boolean | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Textarea: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "children"> & {
+        validationState?: ("valid" | "invalid") | undefined;
+        isLoading?: boolean | undefined;
+        autosize?: boolean | undefined;
+        charactersLimit?: number | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+    } & import('react').RefAttributes<HTMLTextAreaElement>>;
+    TextareaIndicator: import('react').ForwardRefExoticComponent<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+        isValid?: boolean | undefined;
+        isLoading?: boolean | undefined;
+    } & import('react').RefAttributes<SVGSVGElement>>;
+    TextareaClearButton: import('react').ForwardRefExoticComponent<TextareaClearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+type TextareaGroupProps = {
+    Root: TextareaGroupRootProps;
+    Textarea: TextareaProps;
+    Indicator: TextareaIndicatorProps;
+    ClearButton: TextareaClearButtonProps;
+};
+export { Textarea, TextareaGroup };
+export type { TextareaGroupProps, TextareaProps };

package/dist/components/textarea/index.js

@@ -0,0 +1,11 @@
+import { Root, a as TextareaIndicator, T as Textarea } from "./textarea-group.js";
+import { TextareaClearButton } from "./textarea-clear-button.js";
+const TextareaGroup = Object.assign(Root, {
+  Textarea,
+  TextareaIndicator,
+  TextareaClearButton
+});
+export {
+  Textarea,
+  TextareaGroup
+};

package/dist/components/textarea/textarea-clear-button.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+require("../../assets/sprite.6511e521-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_button_button = require("../button/button.cjs");
+const clsx = require("clsx");
+const components_textarea_textareaGroup = require("./textarea-group.cjs");
+const TextareaClearButton = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const groupContext = React.useContext(components_textarea_textareaGroup.TextareaGroupContext);
+    if (!(groupContext == null ? void 0 : groupContext.isDirty)) return null;
+    const classes = clsx([components_textarea_textareaGroup.styles[`${components_textarea_textareaGroup.rootClassName$1}__clear-button`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        size: "sm",
+        variant: "tertiary-purple",
+        iconOnly: true,
+        "aria-label": "Slett",
+        type: "button",
+        ref,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!groupContext.textareaRef.current) return;
+          groupContext.textareaRef.current.value = "";
+          groupContext.textareaRef.current.focus();
+          groupContext.setIsDirty(false);
+        },
+        ...props,
+        className: classes,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" })
+      }
+    );
+  }
+);
+TextareaClearButton.displayName = "TextareaClearButton";
+exports.TextareaClearButton = TextareaClearButton;

package/dist/components/textarea/textarea-clear-button.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { Button } from '../button';
+
+export type TextareaClearButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
+export declare const TextareaClearButton: React.ForwardRefExoticComponent<TextareaClearButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/textarea/textarea-clear-button.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import "../../assets/sprite.6511e521-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { Button } from "../button/button.js";
+import clsx from "clsx";
+import { TextareaGroupContext, s as styles, r as rootClassName } from "./textarea-group.js";
+const TextareaClearButton = React__default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const groupContext = React__default.useContext(TextareaGroupContext);
+    if (!(groupContext == null ? void 0 : groupContext.isDirty)) return null;
+    const classes = clsx([styles[`${rootClassName}__clear-button`]], className);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "tertiary-purple",
+        iconOnly: true,
+        "aria-label": "Slett",
+        type: "button",
+        ref,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!groupContext.textareaRef.current) return;
+          groupContext.textareaRef.current.value = "";
+          groupContext.textareaRef.current.focus();
+          groupContext.setIsDirty(false);
+        },
+        ...props,
+        className: classes,
+        children: children || /* @__PURE__ */ jsx(Icon, { name: "close" })
+      }
+    );
+  }
+);
+TextareaClearButton.displayName = "TextareaClearButton";
+export {
+  TextareaClearButton
+};

package/dist/components/textarea/textarea-group.cjs

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+require("../../assets/sprite.6511e521-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_spinner_spinner = require("../spinner/spinner.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const fadeInAnimation = "_fadeInAnimation_15psx_1";
+const scaleInAnimation = "_scaleInAnimation_15psx_1";
+const styles = {
+  "teddy-textarea__textarea": "_teddy-textarea__textarea_15psx_17",
+  "teddy-textarea": "_teddy-textarea_15psx_17",
+  "teddy-textarea__wrapper": "_teddy-textarea__wrapper_15psx_29",
+  "teddy-textarea__textarea--valid": "_teddy-textarea__textarea--valid_15psx_84",
+  "teddy-textarea__indicator": "_teddy-textarea__indicator_15psx_90",
+  "teddy-textarea__textarea--error": "_teddy-textarea__textarea--error_15psx_93",
+  "teddy-textarea__icon": "_teddy-textarea__icon_15psx_99",
+  fadeInAnimation,
+  scaleInAnimation,
+  "teddy-textarea__clear-button": "_teddy-textarea__clear-button_15psx_119"
+};
+const TextareaGroupContext = React.createContext(void 0);
+function setCursorOnTextarea(e) {
+  if (e.defaultPrevented) return;
+  const target = e.target;
+  if (target.closest("textarea, button, a")) return;
+  const textarea = [...e.currentTarget.getElementsByTagName("textarea")].find((t) => t);
+  if (!textarea) return;
+  const position = textarea.compareDocumentPosition(target);
+  const targetIsBeforeTextarea = (position & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+  const cursorPosition = targetIsBeforeTextarea ? 0 : textarea.value.length;
+  requestAnimationFrame(() => {
+    try {
+      textarea.setSelectionRange(cursorPosition, cursorPosition);
+    } finally {
+      textarea.focus();
+    }
+  });
+}
+const Root = React.forwardRef(
+  ({ className, preventGroupClickSelect, children, frameClassName, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    const textareaRef = React.useRef(null);
+    const [isDirty, setIsDirty] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...props,
+        onPointerDown: (e) => {
+          var _a;
+          (_a = props.onPointerDown) == null ? void 0 : _a.call(props, e);
+          if (preventGroupClickSelect) return;
+          setCursorOnTextarea(e);
+        },
+        ref: forwardRef,
+        className: classes,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TextareaGroupContext.Provider, { value: { isDirty, setIsDirty, textareaRef }, children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles[`${rootClassName}__frame`], frameClassName) })
+        ]
+      }
+    );
+  }
+);
+Root.displayName = "TextareaGroup";
+const TextareaIndicator = React.forwardRef(
+  ({ className, isLoading, isValid, ...props }, forwardRef) => {
+    if (!isValid && !isLoading) return null;
+    if (!isValid && isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components_spinner_spinner.Spinner, { className, size: "xs", ...props, ref: forwardRef });
+    }
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { ...props, size: "md", name: "check-circle-filled", className: classes, ref: forwardRef });
+  }
+);
+TextareaIndicator.displayName = "TextareaIndicator";
+const rootClassName = "teddy-textarea";
+const Textarea = React.forwardRef(
+  ({ className, onValueChange, isLoading, validationState, autosize, charactersLimit, ...props }, forwardRef) => {
+    const groupContext = React.useContext(TextareaGroupContext);
+    const composedRef = utils_composeRefs.useComposedRefs(forwardRef, groupContext == null ? void 0 : groupContext.textareaRef);
+    const classes = clsx(
+      [styles[`${rootClassName}__textarea`]],
+      {
+        [styles[`${rootClassName}__textarea--valid`]]: validationState === "valid",
+        [styles[`${rootClassName}__textarea--error`]]: validationState === "invalid"
+      },
+      className
+    );
+    React.useEffect(() => {
+      var _a, _b;
+      if (!groupContext) return;
+      if ((_b = (_a = groupContext == null ? void 0 : groupContext.textareaRef) == null ? void 0 : _a.current) == null ? void 0 : _b.value.length) {
+        groupContext.setIsDirty(true);
+      } else {
+        groupContext.setIsDirty(false);
+      }
+    }, [groupContext]);
+    function onChange(e) {
+      var _a;
+      onValueChange == null ? void 0 : onValueChange(e.target.value);
+      groupContext == null ? void 0 : groupContext.setIsDirty(((_a = e.target) == null ? void 0 : _a.value.length) > 0);
+      if (autosize) {
+        e.target.style.height = "auto";
+        e.target.style.height = e.target.scrollHeight + "px";
+      }
+      if (props.onChange) props.onChange(e);
+    }
+    React.useEffect(() => {
+      if (!autosize || !composedRef || !("current" in composedRef)) return;
+      const textarea = composedRef.current;
+      if (!textarea) return;
+      textarea.style.height = "auto";
+      textarea.style.height = textarea.scrollHeight + "px";
+    }, [props.value, autosize, composedRef]);
+    const isSingleLine = !autosize && props.rows === 1;
+    const hasTextareaGroup = groupContext !== void 0;
+    if (hasTextareaGroup) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          maxLength: charactersLimit,
+          className: classes,
+          "aria-invalid": validationState === "invalid",
+          ...props,
+          onChange,
+          ref: composedRef
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx(
+          rootClassName,
+          { [`${rootClassName}--single-line`]: isSingleLine },
+          styles[`${rootClassName}__wrapper`]
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ...props,
+              maxLength: charactersLimit,
+              className: classes,
+              ref: composedRef,
+              "aria-invalid": validationState === "invalid",
+              onChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TextareaIndicator, { isValid: validationState === "valid", isLoading })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+exports.Root = Root;
+exports.Textarea = Textarea;
+exports.Textarea$1 = Textarea;
+exports.TextareaGroupContext = TextareaGroupContext;
+exports.TextareaIndicator = TextareaIndicator;
+exports.TextareaIndicator$1 = TextareaIndicator;
+exports.rootClassName = rootClassName;
+exports.rootClassName$1 = rootClassName;
+exports.styles = styles;

package/dist/components/textarea/textarea-group.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export type TextareaGroupRootProps = React.ComponentPropsWithoutRef<'div'> & {
+    frameClassName?: string;
+    preventGroupClickSelect?: boolean;
+};
+type TextareaGroupContextValue = {
+    isDirty: boolean;
+    setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+    textareaRef: React.RefObject<HTMLTextAreaElement>;
+};
+export declare const TextareaGroupContext: React.Context<TextareaGroupContextValue | undefined>;
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    frameClassName?: string | undefined;
+    preventGroupClickSelect?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};