@dt-dds/react-text-area 1.0.0-beta.23

package/CHANGELOG.md

@@ -0,0 +1,227 @@
+# @dt-ui/react-text-area
+
+## 1.0.0-beta.23
+
+### Major Changes
+
+- refactor!: rename pkg and publish to npmjs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-dds/react-core@1.0.0-beta.41
+  - @dt-dds/react-label-field@1.0.0-beta.37
+  - @dt-dds/react-typography@1.0.0-beta.32
+
+## 0.1.0-beta.22
+
+### Patch Changes
+
+- refactor: theme typography values
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.40
+  - @dt-ui/react-label-field@0.1.0-beta.36
+  - @dt-ui/react-typography@0.1.0-beta.31
+
+## 0.1.0-beta.21
+
+### Minor Changes
+
+- feat: update shadow theme values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.39
+  - @dt-ui/react-label-field@0.1.0-beta.35
+  - @dt-ui/react-typography@0.1.0-beta.30
+
+## 0.1.0-beta.20
+
+### Patch Changes
+
+- chore: update theme font-styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.38
+  - @dt-ui/react-label-field@0.1.0-beta.34
+  - @dt-ui/react-typography@0.1.0-beta.29
+
+## 0.1.0-beta.19
+
+### Patch Changes
+
+- chore: review OSS files
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.37
+  - @dt-ui/react-label-field@0.1.0-beta.33
+  - @dt-ui/react-typography@0.1.0-beta.28
+
+## 0.1.0-beta.18
+
+### Patch Changes
+
+- chore: update contextual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.36
+  - @dt-ui/react-label-field@0.1.0-beta.32
+  - @dt-ui/react-typography@0.1.0-beta.27
+
+## 0.1.0-beta.17
+
+### Patch Changes
+
+- fix: text-area container spacing
+
+## 0.1.0-beta.16
+
+### Patch Changes
+
+- fix: text overflow on textarea label
+
+## 0.1.0-beta.15
+
+### Patch Changes
+
+- fix: change content.light contextual color
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.35
+  - @dt-ui/react-label-field@0.1.0-beta.31
+  - @dt-ui/react-typography@0.1.0-beta.26
+
+## 0.1.0-beta.14
+
+### Patch Changes
+
+- fix: add accent to colors type
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.34
+  - @dt-ui/react-label-field@0.1.0-beta.30
+  - @dt-ui/react-typography@0.1.0-beta.25
+
+## 0.1.0-beta.13
+
+### Patch Changes
+
+- fix: change button text according to ux
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.33
+  - @dt-ui/react-label-field@0.1.0-beta.29
+  - @dt-ui/react-typography@0.1.0-beta.24
+
+## 0.1.0-beta.12
+
+### Patch Changes
+
+- chore: update contexual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.32
+  - @dt-ui/react-label-field@0.1.0-beta.28
+  - @dt-ui/react-typography@0.1.0-beta.23
+
+## 0.1.0-beta.11
+
+### Patch Changes
+
+- style: update responsive font styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.31
+  - @dt-ui/react-label-field@0.1.0-beta.27
+  - @dt-ui/react-typography@0.1.0-beta.22
+
+## 0.1.0-beta.10
+
+### Minor Changes
+
+- feat: add options for variant, bgfill, resize, message
+
+## 0.1.0-beta.9
+
+### Minor Changes
+
+- feat: add spinner size 'extra-small' & update specs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.30
+  - @dt-ui/react-label-field@0.1.0-beta.26
+  - @dt-ui/react-typography@0.1.0-beta.21
+
+## 0.1.0-beta.8
+
+### Patch Changes
+
+- chore: add theme breakpoints
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.29
+  - @dt-ui/react-label-field@0.1.0-beta.25
+  - @dt-ui/react-typography@0.1.0-beta.20
+
+## 0.1.0-beta.7
+
+### Minor Changes
+
+- feat: add id to base props
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.28
+  - @dt-ui/react-typography@0.1.0-beta.19
+  - @dt-ui/react-label-field@0.1.0-beta.24
+
+## 0.1.0-beta.6
+
+### Minor Changes
+
+- feat: change breakpoints values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.27
+  - @dt-ui/react-label-field@0.1.0-beta.23
+  - @dt-ui/react-typography@0.1.0-beta.18
+
+## 0.1.0-beta.5
+
+### Patch Changes
+
+- fix: replace body to correct one
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.26
+  - @dt-ui/react-label-field@0.1.0-beta.22
+  - @dt-ui/react-typography@0.1.0-beta.17
+
+## 0.1.0-beta.4
+
+### Patch Changes
+
+- chore: add theme colors missing types
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.25
+  - @dt-ui/react-label-field@0.1.0-beta.21
+  - @dt-ui/react-typography@0.1.0-beta.16
+
+## 0.1.0-beta.3
+
+### Minor Changes
+
+- feat: add search functionality to text-field
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-label-field@0.1.0-beta.20
+
+## 0.1.0-beta.2
+
+### Minor Changes
+
+- feat: add text-area input state
+
+## 0.1.0-beta.1
+
+### Patch Changes
+
+- chore: text-area independent pkg

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# TextArea Package
+
+Textarea is an input that provides the same features as the text field, but accepts multiple lines of text.
+
+## TextArea Usage
+
+```jsx
+import { TextArea } from '@dt-dds/react';
+
+export const App = () => {
+  return <TextArea label='My text area' maxLength={200} />;
+};
+```
+
+## Properties
+
+| Property         | Type                        | Default          | Description                                                                               |
+| ---------------- | --------------------------- | ---------------- | ----------------------------------------------------------------------------------------- |
+| `label`          | `string`                    | -                | A label to help users understand the scope of the text area.                              |
+| `name`           | `string`                    | -                | The attribute to specify the name of the text area.                                       |
+| `value`          | `string`                    | -                | Value of the text area                                                                    |
+| `dataTestId`     | `string`                    | `label`-textarea | Customizable test identifier                                                              |
+| `maxLength`      | `number`                    |                  | The maximum number of characters that user can enter.                                     |
+| `onChange`       | `function`                  | -                | The triggered function when the input change.                                             |
+| `variant`        | `[outlined,bottomLine]`     | `outlined`       | Styles the input with outlined or with bottom line                                        |
+| `hasError`       | `boolean`                   | -                | Set error state for text field.                                                           |
+| `backgroundFill` | `[default, contrast,light]` | `default`        | Styles the input with background color                                                    |
+| `enableResize`   | `boolean`                   | `false`          | Enables the vertical resizing                                                             |
+| `message`        | `string`                    | -                | The message to be displayed below the input field. Useful for hints or to display errors. |
+
+## Stack
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [React](https://reactjs.org/) — JavaScript library for user interfaces
+- [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
+- [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
+- [Jest](https://jestjs.io/) - JavaScript Testing Framework
+- [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+- [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
+- [Yarn](https://yarnpkg.com/) from managing packages
+
+## Commands
+
+- `yarn build` - Build the package
+- `yarn dev` - Run the package locally
+- `yarn lint` - Lint all files within this package
+- `yarn test` - Run all unit tests
+- `yarn test:report` - Open the test coverage report
+- `yarn test:update:snapshot` - Run all unit tests and update the snapshot
+
+## Compilation
+
+Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
+
+The `/dist` folder contains the compiled output.
+
+```bash
+text-area
+└── dist
+    ├── index.d.ts  <-- Types
+    ├── index.js    <-- CommonJS version
+    └── index.mjs   <-- ES Modules version
+    ...
+```
+
+## Versioning
+
+Follows [semantic versioning](https://semver.org/)
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE.md)

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { BaseProps, Theme } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef } from 'react';
+
+type TextAreaVariant = 'outlined' | 'bottom-line';
+type TextAreaBackgroundFill = 'default' | 'contrast' | 'light';
+
+interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, BaseProps {
+    label: string;
+    name?: string;
+    maxLength?: number;
+    enableResize?: boolean;
+    value?: string;
+    variant?: TextAreaVariant;
+    backgroundFill?: TextAreaBackgroundFill;
+    hasError?: boolean;
+    message?: string;
+}
+declare const TextArea: ({ label, dataTestId, name, value, style, variant, backgroundFill, maxLength, enableResize, disabled, required, hasError, message: messageProp, onChange, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends Theme {
+    }
+}
+
+export { TextArea, TextAreaProps };

package/dist/index.js

@@ -0,0 +1,292 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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);
+
+// index.ts
+var text_area_exports = {};
+__export(text_area_exports, {
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(text_area_exports);
+
+// src/TextArea.tsx
+var import_react_label_field = require("@dt-dds/react-label-field");
+var import_react_typography = require("@dt-dds/react-typography");
+var import_react = require("react");
+
+// src/TextArea.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+
+// src/constants/helpers.ts
+var getThemedBackgroundFill = (backgroundFill, theme) => ({
+  default: theme.palette.surface.default,
+  contrast: theme.palette.surface.contrast,
+  light: theme.palette.surface.light
+})[backgroundFill] || theme.palette.surface.default;
+
+// src/TextArea.styled.ts
+var TextAreaWrapper = import_styled.default.div`
+  ${({ theme }) => `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    position: relative;
+    width: 100%;
+    
+    border-style: solid;
+    border-width: 0;
+    border-color: ${theme.palette.border.dark};
+  `}
+`;
+var TextAreaMessageStyled = import_styled.default.div`
+  ${({ theme }) => `padding-left: ${theme.spacing["2xs"]}`};
+`;
+var TextAreaMessages = import_styled.default.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 100%;
+`;
+var TextAreaStyled = import_styled.default.textarea`
+  ${({ theme, enableResize = false, backgroundFill }) => `
+    ${theme.fontStyles.body1}
+
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+
+    border-style: none;
+    width: 100%;
+    color: ${theme.palette.content.dark};
+    resize: ${enableResize ? "vertical" : "none"};
+    outline: none;
+    padding-right: 10px;
+  `}
+`;
+var ContainerStyled = import_styled.default.div`
+  ${({ theme, variant, hasError = false, backgroundFill }) => {
+  const borderColor = hasError ? theme.palette.error.default : theme.palette.primary.default;
+  return `
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+    position: relative;
+    padding: 25px 0px 0px 10px;
+    width: 100%;
+
+    ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
+            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
+            &:focus-within, &:hover { { border: 1px solid ${borderColor}};
+          ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
+            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
+            &:focus-within, &:hover { { border-bottom: 1px solid  ${borderColor}};
+          `};
+
+    ${variant === "outlined" ? "border-width: 1px" : "border-width: 0 0 1px"};
+  `;
+}}
+`;
+
+// src/TextArea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TextArea = (_a) => {
+  var _b = _a, {
+    label,
+    dataTestId,
+    name,
+    value,
+    style,
+    variant = "outlined",
+    backgroundFill = "default",
+    maxLength,
+    enableResize = false,
+    disabled = false,
+    required = false,
+    hasError = false,
+    message: messageProp = "",
+    onChange = () => {
+    }
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "dataTestId",
+    "name",
+    "value",
+    "style",
+    "variant",
+    "backgroundFill",
+    "maxLength",
+    "enableResize",
+    "disabled",
+    "required",
+    "hasError",
+    "message",
+    "onChange"
+  ]);
+  const [chars, setChars] = (0, import_react.useState)(0);
+  const [activeInput, setActiveInput] = (0, import_react.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react.useState)("");
+  const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!!value) {
+      setInputValue(value);
+      setActiveInput(true);
+      setChars(value.length);
+      setHasRequiredError(false);
+    } else {
+      setInputValue("");
+    }
+  }, [value]);
+  const handleChange = (evt) => {
+    setInputValue(evt.target.value);
+    setHasRequiredError(false);
+    setChars(evt.target.value.length);
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const onFocus = (event) => {
+    setActiveInput(true);
+    if (rest.onFocus) {
+      rest.onFocus(event);
+    }
+  };
+  const onBlur = (event) => {
+    const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+    if (isEmptyOrOnlySpaces) {
+      setActiveInput(false);
+      if (required) {
+        setHasRequiredError(true);
+      }
+    }
+    if (rest.onBlur) {
+      rest.onBlur(event);
+    }
+  };
+  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLocaleLowerCase()}-textarea`;
+  const messageColor = disabled ? "content.light" : "content.medium";
+  const showError = hasError || hasRequiredError;
+  const message = messageProp;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TextAreaWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_label_field.LabelField,
+      {
+        hasError: showError,
+        htmlFor: testId,
+        isActive: activeInput,
+        isDisabled: disabled,
+        isRequired: required,
+        style: { zIndex: 1 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ContainerStyled,
+      {
+        backgroundFill,
+        "data-testid": "textarea-container",
+        hasError: showError,
+        variant,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TextAreaStyled,
+          __spreadProps(__spreadValues({
+            backgroundFill,
+            "data-error": showError,
+            disabled,
+            enableResize,
+            id: testId,
+            maxLength,
+            name,
+            style,
+            value: inputValue
+          }, rest), {
+            onBlur,
+            onChange: handleChange,
+            onFocus
+          })
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TextAreaMessages, { children: [
+      message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextAreaMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_typography.Typography,
+        {
+          color: showError ? "error.default" : messageColor,
+          element: "span",
+          fontStyles: "body3",
+          children: message
+        }
+      ) }) : null,
+      maxLength ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react_typography.Typography,
+        {
+          color: "content.medium",
+          element: "span",
+          fontStyles: "body2",
+          id: testId,
+          style: { marginLeft: "auto" },
+          children: [
+            chars,
+            " / ",
+            maxLength
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextArea
+});

package/dist/index.mjs

@@ -0,0 +1,261 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/TextArea.tsx
+import { LabelField } from "@dt-dds/react-label-field";
+import { Typography } from "@dt-dds/react-typography";
+import {
+  useEffect,
+  useState
+} from "react";
+
+// src/TextArea.styled.ts
+import styled from "@emotion/styled";
+
+// src/constants/helpers.ts
+var getThemedBackgroundFill = (backgroundFill, theme) => ({
+  default: theme.palette.surface.default,
+  contrast: theme.palette.surface.contrast,
+  light: theme.palette.surface.light
+})[backgroundFill] || theme.palette.surface.default;
+
+// src/TextArea.styled.ts
+var TextAreaWrapper = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    position: relative;
+    width: 100%;
+    
+    border-style: solid;
+    border-width: 0;
+    border-color: ${theme.palette.border.dark};
+  `}
+`;
+var TextAreaMessageStyled = styled.div`
+  ${({ theme }) => `padding-left: ${theme.spacing["2xs"]}`};
+`;
+var TextAreaMessages = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 100%;
+`;
+var TextAreaStyled = styled.textarea`
+  ${({ theme, enableResize = false, backgroundFill }) => `
+    ${theme.fontStyles.body1}
+
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+
+    border-style: none;
+    width: 100%;
+    color: ${theme.palette.content.dark};
+    resize: ${enableResize ? "vertical" : "none"};
+    outline: none;
+    padding-right: 10px;
+  `}
+`;
+var ContainerStyled = styled.div`
+  ${({ theme, variant, hasError = false, backgroundFill }) => {
+  const borderColor = hasError ? theme.palette.error.default : theme.palette.primary.default;
+  return `
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+    position: relative;
+    padding: 25px 0px 0px 10px;
+    width: 100%;
+
+    ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
+            border: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
+            &:focus-within, &:hover { { border: 1px solid ${borderColor}};
+          ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
+            border-bottom: 1px solid ${hasError ? theme.palette.error.default : theme.palette.border.default};
+            &:focus-within, &:hover { { border-bottom: 1px solid  ${borderColor}};
+          `};
+
+    ${variant === "outlined" ? "border-width: 1px" : "border-width: 0 0 1px"};
+  `;
+}}
+`;
+
+// src/TextArea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextArea = (_a) => {
+  var _b = _a, {
+    label,
+    dataTestId,
+    name,
+    value,
+    style,
+    variant = "outlined",
+    backgroundFill = "default",
+    maxLength,
+    enableResize = false,
+    disabled = false,
+    required = false,
+    hasError = false,
+    message: messageProp = "",
+    onChange = () => {
+    }
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "dataTestId",
+    "name",
+    "value",
+    "style",
+    "variant",
+    "backgroundFill",
+    "maxLength",
+    "enableResize",
+    "disabled",
+    "required",
+    "hasError",
+    "message",
+    "onChange"
+  ]);
+  const [chars, setChars] = useState(0);
+  const [activeInput, setActiveInput] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [hasRequiredError, setHasRequiredError] = useState(false);
+  useEffect(() => {
+    if (!!value) {
+      setInputValue(value);
+      setActiveInput(true);
+      setChars(value.length);
+      setHasRequiredError(false);
+    } else {
+      setInputValue("");
+    }
+  }, [value]);
+  const handleChange = (evt) => {
+    setInputValue(evt.target.value);
+    setHasRequiredError(false);
+    setChars(evt.target.value.length);
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const onFocus = (event) => {
+    setActiveInput(true);
+    if (rest.onFocus) {
+      rest.onFocus(event);
+    }
+  };
+  const onBlur = (event) => {
+    const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+    if (isEmptyOrOnlySpaces) {
+      setActiveInput(false);
+      if (required) {
+        setHasRequiredError(true);
+      }
+    }
+    if (rest.onBlur) {
+      rest.onBlur(event);
+    }
+  };
+  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLocaleLowerCase()}-textarea`;
+  const messageColor = disabled ? "content.light" : "content.medium";
+  const showError = hasError || hasRequiredError;
+  const message = messageProp;
+  return /* @__PURE__ */ jsxs(TextAreaWrapper, { children: [
+    /* @__PURE__ */ jsx(
+      LabelField,
+      {
+        hasError: showError,
+        htmlFor: testId,
+        isActive: activeInput,
+        isDisabled: disabled,
+        isRequired: required,
+        style: { zIndex: 1 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContainerStyled,
+      {
+        backgroundFill,
+        "data-testid": "textarea-container",
+        hasError: showError,
+        variant,
+        children: /* @__PURE__ */ jsx(
+          TextAreaStyled,
+          __spreadProps(__spreadValues({
+            backgroundFill,
+            "data-error": showError,
+            disabled,
+            enableResize,
+            id: testId,
+            maxLength,
+            name,
+            style,
+            value: inputValue
+          }, rest), {
+            onBlur,
+            onChange: handleChange,
+            onFocus
+          })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(TextAreaMessages, { children: [
+      message ? /* @__PURE__ */ jsx(TextAreaMessageStyled, { children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          color: showError ? "error.default" : messageColor,
+          element: "span",
+          fontStyles: "body3",
+          children: message
+        }
+      ) }) : null,
+      maxLength ? /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          color: "content.medium",
+          element: "span",
+          fontStyles: "body2",
+          id: testId,
+          style: { marginLeft: "auto" },
+          children: [
+            chars,
+            " / ",
+            maxLength
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+};
+export {
+  TextArea
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-text-area",
+  "version": "1.0.0-beta.23",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-typography": "1.0.0-beta.32",
+    "@dt-dds/react-label-field": "1.0.0-beta.37"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}