@sproutsocial/seeds-react-textarea 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-textarea/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     7.13 KB
+CJS dist/index.js.map 12.10 KB
+CJS ⚡️ Build success in 189ms
+ESM dist/esm/index.js     5.09 KB
+ESM dist/esm/index.js.map 12.05 KB
+ESM ⚡️ Build success in 189ms
+DTS Build start
+DTS ⚡️ Build success in 37155ms
+DTS dist/index.d.ts  3.36 KB
+DTS dist/index.d.mts 3.36 KB
+Done in 45.30s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-textarea
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate Textarea from Racine to seeds-react-textarea

package/dist/esm/index.js

@@ -0,0 +1,210 @@
+// src/Textarea.tsx
+import * as React from "react";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+var Container = styled.div`
+  box-sizing: border-box;
+  position: relative;
+
+  textarea {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: ${(props) => props.theme.space[300]};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    outline: none;
+    resize: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    ${(props) => props.theme.typography[200]}
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    appearance: none;
+
+    &:focus {
+      ${focusRing}
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.form.placeholder.base};
+      font-style: italic;
+    }
+
+    ${(props) => props.resizable && css`
+        resize: vertical;
+      `}
+
+    ${(props) => props.hasBeforeElement && css`
+        padding-left: 40px;
+      `}
+
+    ${(props) => props.hasAfterElement && css`
+        padding-right: 40px;
+      `}
+  }
+
+  ${(props) => props.disabled && css`
+      opacity: 0.4;
+
+      textarea {
+        cursor: not-allowed;
+      }
+    `}
+
+  ${(props) => props.invalid && css`
+      textarea {
+        border-color: ${(props2) => props2.theme.colors.form.border.error};
+      }
+    `}
+
+  ${COMMON}
+`;
+var Accessory = styled.div`
+  position: absolute;
+  color: ${(props) => props.theme.colors.icon.base};
+
+  ${(props) => props.before && css`
+      top: ${props.theme.space[300]};
+      left: ${props.theme.space[350]};
+    `};
+
+  ${(props) => props.after && css`
+      right: ${props.theme.space[350]};
+      bottom: ${props.theme.space[300]};
+    `};
+`;
+Container.displayName = "TextareaContainer";
+Accessory.displayName = "TextareaAccessory";
+var styles_default = Container;
+
+// src/Textarea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Textarea = class extends React.Component {
+  static defaultProps = {
+    rows: 4
+  };
+  handleBlur = (e) => {
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  };
+  handleChange = (e) => {
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
+  };
+  handleFocus = (e) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(e);
+    }
+  };
+  handleKeyDown = (e) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  };
+  handleKeyUp = (e) => {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(e);
+    }
+  };
+  render() {
+    const {
+      autoFocus,
+      disabled,
+      readOnly,
+      isInvalid,
+      id,
+      name,
+      placeholder,
+      value,
+      enableSpellcheck,
+      enableResize,
+      required,
+      rows,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaLabel,
+      ariaDescribedby,
+      innerRef,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      color,
+      qa = {},
+      inputProps = {},
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ jsxs(
+      styles_default,
+      {
+        hasBeforeElement: !!elemBefore,
+        hasAfterElement: !!elemAfter,
+        disabled,
+        invalid: isInvalid,
+        resizable: enableResize,
+        color,
+        "data-qa-textarea": id,
+        "data-qa-textarea-isdisabled": disabled === true,
+        "data-qa-textarea-isrequired": required === true,
+        "data-qa-textarea-isinvalid": isInvalid === true,
+        ...qa,
+        ...rest,
+        children: [
+          elemBefore && /* @__PURE__ */ jsx(Accessory, { before: true, children: elemBefore }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id,
+              "aria-label": ariaLabel,
+              "aria-describedby": ariaDescribedby,
+              "aria-invalid": isInvalid,
+              value,
+              name,
+              placeholder,
+              rows,
+              disabled,
+              readOnly: Boolean(readOnly),
+              autoFocus,
+              spellCheck: enableSpellcheck,
+              required,
+              maxLength,
+              onChange: this.handleChange,
+              onKeyUp: this.handleKeyUp,
+              onKeyDown: this.handleKeyDown,
+              onBlur: this.handleBlur,
+              onFocus: this.handleFocus,
+              ref: innerRef,
+              "data-qa-textarea-input": "",
+              "data-qa-input": name,
+              ...inputProps
+            }
+          ),
+          elemAfter && /* @__PURE__ */ jsx(Accessory, { after: true, children: elemAfter })
+        ]
+      }
+    );
+  }
+};
+
+// src/TextareaTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Textarea;
+export {
+  Textarea,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Textarea.tsx","../../src/styles.ts","../../src/TextareaTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Accessory } from \"./styles\";\nimport type { TypeTextareaProps } from \"./TextareaTypes\";\n\n/**\n * @deprecated Use TypeTextareaProps from root instead\n */\nexport type TypeProps = TypeTextareaProps;\n\nexport default class Textarea extends React.Component<TypeTextareaProps> {\n  static defaultProps = {\n    rows: 4,\n  };\n\n  handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(e);\n    }\n  };\n\n  handleChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onChange) {\n      this.props.onChange(e);\n    }\n  };\n\n  handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  handleKeyDown = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  handleKeyUp = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {\n    if (this.props.onKeyUp) {\n      this.props.onKeyUp(e);\n    }\n  };\n\n  override render() {\n    const {\n      autoFocus,\n      disabled,\n      readOnly,\n      isInvalid,\n      id,\n      name,\n      placeholder,\n      value,\n      enableSpellcheck,\n      enableResize,\n      required,\n      rows,\n      elemBefore,\n      elemAfter,\n      maxLength,\n      ariaLabel,\n      ariaDescribedby,\n      innerRef,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      color,\n      qa = {},\n      inputProps = {},\n      ...rest\n    } = this.props;\n\n    return (\n      <Container\n        hasBeforeElement={!!elemBefore}\n        hasAfterElement={!!elemAfter}\n        disabled={disabled}\n        invalid={isInvalid}\n        resizable={enableResize}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n        data-qa-textarea={id}\n        data-qa-textarea-isdisabled={disabled === true}\n        data-qa-textarea-isrequired={required === true}\n        data-qa-textarea-isinvalid={isInvalid === true}\n        {...qa}\n        {...rest}\n      >\n        {elemBefore && <Accessory before>{elemBefore}</Accessory>}\n\n        <textarea\n          id={id}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          aria-invalid={isInvalid}\n          value={value}\n          name={name}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n          readOnly={Boolean(readOnly)}\n          autoFocus={autoFocus}\n          spellCheck={enableSpellcheck}\n          required={required}\n          maxLength={maxLength}\n          onChange={this.handleChange}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          ref={innerRef}\n          data-qa-textarea-input=\"\"\n          data-qa-input={name}\n          {...inputProps}\n        />\n\n        {elemAfter && <Accessory after>{elemAfter}</Accessory>}\n      </Container>\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n  TypeTextareaAccessoryProps,\n  TypeTextareaContainerProps,\n} from \"./TextareaTypes\";\n\nconst Container = styled.div<TypeTextareaContainerProps>`\n  box-sizing: border-box;\n  position: relative;\n\n  textarea {\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    padding: ${(props) => props.theme.space[300]};\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    outline: none;\n    resize: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    ${(props) => props.theme.typography[200]}\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    appearance: none;\n\n    &:focus {\n      ${focusRing}\n    }\n\n    &::placeholder {\n      color: ${(props) => props.theme.colors.form.placeholder.base};\n      font-style: italic;\n    }\n\n    ${(props) =>\n      props.resizable &&\n      css`\n        resize: vertical;\n      `}\n\n    ${(props) =>\n      props.hasBeforeElement &&\n      css`\n        padding-left: 40px;\n      `}\n\n    ${(props) =>\n      props.hasAfterElement &&\n      css`\n        padding-right: 40px;\n      `}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n\n      textarea {\n        cursor: not-allowed;\n      }\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      textarea {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Accessory = styled.div<TypeTextareaAccessoryProps>`\n  position: absolute;\n  color: ${(props) => props.theme.colors.icon.base};\n\n  ${(props) =>\n    props.before &&\n    css`\n      top: ${props.theme.space[300]};\n      left: ${props.theme.space[350]};\n    `};\n\n  ${(props) =>\n    props.after &&\n    css`\n      right: ${props.theme.space[350]};\n      bottom: ${props.theme.space[300]};\n    `};\n`;\n\nContainer.displayName = \"TextareaContainer\";\nAccessory.displayName = \"TextareaAccessory\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype CollisionTypes =\n  | \"color\"\n  | \"onChange\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onKeyDown\"\n  | \"onKeyUp\";\n\nexport interface TypeTextareaProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"textarea\">, CollisionTypes> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the input if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Textarea, like an error */\n  ariaDescribedby?: string;\n\n  /** Current value of the textarea */\n  value?: string;\n\n  /** Will autofocus the element when mounted to the DOM */\n  autoFocus?: boolean;\n\n  /** HTML disabled attribute */\n  disabled?: boolean;\n\n  /** HTML readonly attribute */\n  readOnly?: boolean;\n\n  /** Whether or not the current contents of the input are invalid */\n  isInvalid?: boolean;\n\n  /** Placeholder text for when value is undefined or empty */\n  placeholder?: string;\n\n  /** HTML required attribute */\n  required?: boolean;\n\n  /** 16x16 element, such as an icon */\n  elemBefore?: React.ReactNode;\n\n  /** 16x16 element, such as an icon */\n  elemAfter?: React.ReactNode;\n\n  /** Max length of the input */\n  maxLength?: number;\n\n  /** HTML spellcheck attribute */\n  enableSpellcheck?: boolean;\n\n  /** Makes the text area vertically resizable */\n  enableResize?: boolean;\n\n  /** The number of visible lines of text without scrolling */\n  rows?: number;\n  qa?: object;\n\n  /** Props to spread onto the underlying textarea element */\n  inputProps?: React.ComponentPropsWithoutRef<\"textarea\">;\n\n  /** Used to get a reference to the underlying element */\n  innerRef?:\n    | {\n        current: null | HTMLTextAreaElement;\n      }\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    | ((arg0: React.ElementRef<any> | HTMLElement) => void);\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n  onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n}\n\nexport interface TypeTextareaContainerProps {\n  resizable?: TypeTextareaProps[\"enableResize\"];\n  hasBeforeElement?: boolean;\n  hasAfterElement?: boolean;\n  disabled?: TypeTextareaProps[\"disabled\"];\n  invalid?: TypeTextareaProps[\"isInvalid\"];\n}\n\nexport interface TypeTextareaAccessoryProps {\n  before?: boolean;\n  after?: boolean;\n}\n","import Textarea from \"./Textarea\";\n\nexport default Textarea;\nexport { Textarea };\nexport * from \"./TextareaTypes\";\n"],"mappings":"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","names":["props"]}

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type CollisionTypes = "color" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp";
+interface TypeTextareaProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"textarea">, CollisionTypes> {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the input if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Textarea, like an error */
+    ariaDescribedby?: string;
+    /** Current value of the textarea */
+    value?: string;
+    /** Will autofocus the element when mounted to the DOM */
+    autoFocus?: boolean;
+    /** HTML disabled attribute */
+    disabled?: boolean;
+    /** HTML readonly attribute */
+    readOnly?: boolean;
+    /** Whether or not the current contents of the input are invalid */
+    isInvalid?: boolean;
+    /** Placeholder text for when value is undefined or empty */
+    placeholder?: string;
+    /** HTML required attribute */
+    required?: boolean;
+    /** 16x16 element, such as an icon */
+    elemBefore?: React.ReactNode;
+    /** 16x16 element, such as an icon */
+    elemAfter?: React.ReactNode;
+    /** Max length of the input */
+    maxLength?: number;
+    /** HTML spellcheck attribute */
+    enableSpellcheck?: boolean;
+    /** Makes the text area vertically resizable */
+    enableResize?: boolean;
+    /** The number of visible lines of text without scrolling */
+    rows?: number;
+    qa?: object;
+    /** Props to spread onto the underlying textarea element */
+    inputProps?: React.ComponentPropsWithoutRef<"textarea">;
+    /** Used to get a reference to the underlying element */
+    innerRef?: {
+        current: null | HTMLTextAreaElement;
+    } | ((arg0: React.ElementRef<any> | HTMLElement) => void);
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+}
+interface TypeTextareaContainerProps {
+    resizable?: TypeTextareaProps["enableResize"];
+    hasBeforeElement?: boolean;
+    hasAfterElement?: boolean;
+    disabled?: TypeTextareaProps["disabled"];
+    invalid?: TypeTextareaProps["isInvalid"];
+}
+interface TypeTextareaAccessoryProps {
+    before?: boolean;
+    after?: boolean;
+}
+
+declare class Textarea extends React.Component<TypeTextareaProps> {
+    static defaultProps: {
+        rows: number;
+    };
+    handleBlur: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    handleChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    handleKeyUp: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Textarea, type TypeTextareaAccessoryProps, type TypeTextareaContainerProps, type TypeTextareaProps, Textarea as default };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type CollisionTypes = "color" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp";
+interface TypeTextareaProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"textarea">, CollisionTypes> {
+    /** ID of the form element, should match the "for" value of the associated label */
+    id: string;
+    name: string;
+    /** Label used to describe the input if not used with an accompanying visual label */
+    ariaLabel?: string;
+    /** Attribute used to associate other elements that describe the Textarea, like an error */
+    ariaDescribedby?: string;
+    /** Current value of the textarea */
+    value?: string;
+    /** Will autofocus the element when mounted to the DOM */
+    autoFocus?: boolean;
+    /** HTML disabled attribute */
+    disabled?: boolean;
+    /** HTML readonly attribute */
+    readOnly?: boolean;
+    /** Whether or not the current contents of the input are invalid */
+    isInvalid?: boolean;
+    /** Placeholder text for when value is undefined or empty */
+    placeholder?: string;
+    /** HTML required attribute */
+    required?: boolean;
+    /** 16x16 element, such as an icon */
+    elemBefore?: React.ReactNode;
+    /** 16x16 element, such as an icon */
+    elemAfter?: React.ReactNode;
+    /** Max length of the input */
+    maxLength?: number;
+    /** HTML spellcheck attribute */
+    enableSpellcheck?: boolean;
+    /** Makes the text area vertically resizable */
+    enableResize?: boolean;
+    /** The number of visible lines of text without scrolling */
+    rows?: number;
+    qa?: object;
+    /** Props to spread onto the underlying textarea element */
+    inputProps?: React.ComponentPropsWithoutRef<"textarea">;
+    /** Used to get a reference to the underlying element */
+    innerRef?: {
+        current: null | HTMLTextAreaElement;
+    } | ((arg0: React.ElementRef<any> | HTMLElement) => void);
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onKeyUp?: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+}
+interface TypeTextareaContainerProps {
+    resizable?: TypeTextareaProps["enableResize"];
+    hasBeforeElement?: boolean;
+    hasAfterElement?: boolean;
+    disabled?: TypeTextareaProps["disabled"];
+    invalid?: TypeTextareaProps["isInvalid"];
+}
+interface TypeTextareaAccessoryProps {
+    before?: boolean;
+    after?: boolean;
+}
+
+declare class Textarea extends React.Component<TypeTextareaProps> {
+    static defaultProps: {
+        rows: number;
+    };
+    handleBlur: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    handleChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    handleKeyDown: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    handleKeyUp: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Textarea, type TypeTextareaAccessoryProps, type TypeTextareaContainerProps, type TypeTextareaProps, Textarea as default };

package/dist/index.js

@@ -0,0 +1,247 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Textarea: () => Textarea,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Textarea.tsx
+var React = __toESM(require("react"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var Container = import_styled_components.default.div`
+  box-sizing: border-box;
+  position: relative;
+
+  textarea {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: ${(props) => props.theme.space[300]};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
+    border-radius: ${(props) => props.theme.radii[500]};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    color: ${(props) => props.theme.colors.text.body};
+    outline: none;
+    resize: none;
+    transition: border-color ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in},
+      box-shadow ${(props) => props.theme.duration.fast}
+        ${(props) => props.theme.easing.ease_in};
+    font-family: ${(props) => props.theme.fontFamily};
+    ${(props) => props.theme.typography[200]}
+    font-weight: ${(props) => props.theme.fontWeights.normal};
+    appearance: none;
+
+    &:focus {
+      ${import_seeds_react_mixins.focusRing}
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.form.placeholder.base};
+      font-style: italic;
+    }
+
+    ${(props) => props.resizable && import_styled_components.css`
+        resize: vertical;
+      `}
+
+    ${(props) => props.hasBeforeElement && import_styled_components.css`
+        padding-left: 40px;
+      `}
+
+    ${(props) => props.hasAfterElement && import_styled_components.css`
+        padding-right: 40px;
+      `}
+  }
+
+  ${(props) => props.disabled && import_styled_components.css`
+      opacity: 0.4;
+
+      textarea {
+        cursor: not-allowed;
+      }
+    `}
+
+  ${(props) => props.invalid && import_styled_components.css`
+      textarea {
+        border-color: ${(props2) => props2.theme.colors.form.border.error};
+      }
+    `}
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var Accessory = import_styled_components.default.div`
+  position: absolute;
+  color: ${(props) => props.theme.colors.icon.base};
+
+  ${(props) => props.before && import_styled_components.css`
+      top: ${props.theme.space[300]};
+      left: ${props.theme.space[350]};
+    `};
+
+  ${(props) => props.after && import_styled_components.css`
+      right: ${props.theme.space[350]};
+      bottom: ${props.theme.space[300]};
+    `};
+`;
+Container.displayName = "TextareaContainer";
+Accessory.displayName = "TextareaAccessory";
+var styles_default = Container;
+
+// src/Textarea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Textarea = class extends React.Component {
+  static defaultProps = {
+    rows: 4
+  };
+  handleBlur = (e) => {
+    if (this.props.onBlur) {
+      this.props.onBlur(e);
+    }
+  };
+  handleChange = (e) => {
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
+  };
+  handleFocus = (e) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(e);
+    }
+  };
+  handleKeyDown = (e) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  };
+  handleKeyUp = (e) => {
+    if (this.props.onKeyUp) {
+      this.props.onKeyUp(e);
+    }
+  };
+  render() {
+    const {
+      autoFocus,
+      disabled,
+      readOnly,
+      isInvalid,
+      id,
+      name,
+      placeholder,
+      value,
+      enableSpellcheck,
+      enableResize,
+      required,
+      rows,
+      elemBefore,
+      elemAfter,
+      maxLength,
+      ariaLabel,
+      ariaDescribedby,
+      innerRef,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      color,
+      qa = {},
+      inputProps = {},
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      styles_default,
+      {
+        hasBeforeElement: !!elemBefore,
+        hasAfterElement: !!elemAfter,
+        disabled,
+        invalid: isInvalid,
+        resizable: enableResize,
+        color,
+        "data-qa-textarea": id,
+        "data-qa-textarea-isdisabled": disabled === true,
+        "data-qa-textarea-isrequired": required === true,
+        "data-qa-textarea-isinvalid": isInvalid === true,
+        ...qa,
+        ...rest,
+        children: [
+          elemBefore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accessory, { before: true, children: elemBefore }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "textarea",
+            {
+              id,
+              "aria-label": ariaLabel,
+              "aria-describedby": ariaDescribedby,
+              "aria-invalid": isInvalid,
+              value,
+              name,
+              placeholder,
+              rows,
+              disabled,
+              readOnly: Boolean(readOnly),
+              autoFocus,
+              spellCheck: enableSpellcheck,
+              required,
+              maxLength,
+              onChange: this.handleChange,
+              onKeyUp: this.handleKeyUp,
+              onKeyDown: this.handleKeyDown,
+              onBlur: this.handleBlur,
+              onFocus: this.handleFocus,
+              ref: innerRef,
+              "data-qa-textarea-input": "",
+              "data-qa-input": name,
+              ...inputProps
+            }
+          ),
+          elemAfter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accessory, { after: true, children: elemAfter })
+        ]
+      }
+    );
+  }
+};
+
+// src/TextareaTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Textarea;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Textarea
+});
+//# sourceMappingURL=index.js.map