@asnewyla/textarea 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+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,73 @@
+# @asnewyla/textarea
+
+Styled multi-line text input built on `@asnewyla/unstyled-textarea`. Label
+association, inline validation error, and full keyboard/focus
+accessibility.
+
+## Install
+
+```bash
+npm install @asnewyla/textarea
+```
+
+Import the stylesheet once, anywhere in your app:
+
+```ts
+import '@asnewyla/textarea/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Textarea } from '@asnewyla/textarea';
+
+<Textarea label="Bio" placeholder="Tell us about yourself" />
+
+<Textarea label="Bio" error="Bio is required" />
+
+// Controlled
+<Textarea
+  label="Bio"
+  value={bio}
+  onChange={(e) => setBio(e.target.value)}
+/>
+
+// Any native textarea attribute passes straight through
+<Textarea label="Cover letter" rows={10} />
+```
+
+### Props
+
+Everything `@asnewyla/unstyled-textarea` accepts, plus:
+
+| Prop | Type | Default |
+|---|---|---|
+| `label` | `string` (**required**) | — |
+| `error` | `string` | — |
+
+`error` doubles as the invalid-state flag — there's no separate `invalid`
+prop, same convention as `@asnewyla/input`/`@asnewyla/checkbox`/
+`@asnewyla/switch`. Setting `error` sets `aria-invalid`/`data-invalid` on
+the field and links it via `aria-describedby` to the rendered error
+message.
+
+Resizing is vertical-only (`resize: vertical`), not the browser's default
+`both` — letting a stacked, block-level field grow wider than its
+container breaks whatever layout it sits in.
+
+### Theming
+
+Override the CSS custom properties — defaults adapt automatically to
+`prefers-color-scheme` via `@asnewyla/tokens`:
+
+```css
+:root {
+  --xd-color-primary: #0d9488;
+  --xd-color-border: #cbd5e1;
+  --xd-color-destructive: #dc2626;
+}
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,47 @@
+/* src/components/Textarea.css */
+.xd-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xd-space-xs, 0.25rem);
+}
+.xd-textarea-label {
+  font-size: var(--xd-font-size-sm, 0.8125rem);
+  font-weight: var(--xd-font-weight-semibold, 600);
+  letter-spacing: var(--xd-letter-spacing-label, 0);
+  text-transform: var(--xd-text-transform-label, none);
+}
+.xd-textarea-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 5.5rem;
+  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);
+  border-radius: var(--xd-radius-sm, 0.25rem);
+  padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);
+  font-family: inherit;
+  font-size: var(--xd-font-size-md, 0.875rem);
+  line-height: var(--xd-line-height-normal, 1.25);
+  color: inherit;
+  background-color: transparent;
+  resize: vertical;
+  transition: border-color var(--xd-motion-fast, 120ms ease-out), outline-color var(--xd-motion-fast, 120ms ease-out);
+}
+.xd-textarea-input:focus-visible {
+  outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, var(--xd-color-primary, #0d9488));
+  outline-offset: var(--xd-focus-ring-offset, 2px);
+}
+.xd-textarea-input[data-invalid=true] {
+  border-color: var(--xd-color-destructive, #dc2626);
+}
+.xd-textarea-input[data-invalid=true]:focus-visible {
+  outline-color: var(--xd-color-destructive, #dc2626);
+}
+.xd-textarea-error {
+  font-size: var(--xd-font-size-sm, 0.8125rem);
+  color: var(--xd-color-destructive, #dc2626);
+}
+.xd-textarea-input:disabled {
+  opacity: var(--xd-opacity-disabled, 0.5);
+  cursor: not-allowed;
+  resize: none;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea.css"],"sourcesContent":[".xd-textarea {\n  display: flex;\n  flex-direction: column;\n  gap: var(--xd-space-xs, 0.25rem);\n}\n\n.xd-textarea-label {\n  font-size: var(--xd-font-size-sm, 0.8125rem);\n  font-weight: var(--xd-font-weight-semibold, 600);\n  letter-spacing: var(--xd-letter-spacing-label, 0);\n  text-transform: var(--xd-text-transform-label, none);\n}\n\n.xd-textarea-input {\n  box-sizing: border-box;\n  width: 100%;\n  /* Taller floor than Input's single-line control-height, and a real\n     min-height rather than a fixed height -- a textarea grows past this\n     with its own native resize handle or a consumer's `rows`. */\n  min-height: 5.5rem;\n  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n  border-radius: var(--xd-radius-sm, 0.25rem);\n  padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n  font-family: inherit;\n  font-size: var(--xd-font-size-md, 0.875rem);\n  line-height: var(--xd-line-height-normal, 1.25);\n  color: inherit;\n  background-color: transparent;\n  /* Vertical-only, not the native default `both` -- letting a stacked\n     block-level field grow wider than its container breaks the layout\n     it sits in, the same reasoning `resize: vertical` design systems\n     converge on. */\n  resize: vertical;\n  transition:\n    border-color var(--xd-motion-fast, 120ms ease-out),\n    outline-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-textarea-input:focus-visible {\n  outline: var(--xd-focus-ring-width, 2px) solid\n    var(--xd-color-focus, var(--xd-color-primary, #0d9488));\n  outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n/* --- Invalid --- */\n\n.xd-textarea-input[data-invalid=\"true\"] {\n  border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-textarea-input[data-invalid=\"true\"]:focus-visible {\n  outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-textarea-error {\n  font-size: var(--xd-font-size-sm, 0.8125rem);\n  color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-textarea-input:disabled {\n  opacity: var(--xd-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  resize: none;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI,aAAa,EAAE;AAC1B;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,eAAa,IAAI,yBAAyB,EAAE;AAC5C,kBAAgB,IAAI,yBAAyB,EAAE;AAC/C,kBAAgB,IAAI,yBAAyB,EAAE;AACjD;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AAIP,cAAY;AACZ,UAAQ,IAAI,sBAAsB,EAAE,KAAK,MAAM,IAAI,iBAAiB,EAAE;AACtE,iBAAe,IAAI,cAAc,EAAE;AACnC,WAAS,IAAI,aAAa,EAAE,UAAU,IAAI,aAAa,EAAE;AACzD,eAAa;AACb,aAAW,IAAI,iBAAiB,EAAE;AAClC,eAAa,IAAI,uBAAuB,EAAE;AAC1C,SAAO;AACP,oBAAkB;AAKlB,UAAQ;AACR,cACE,aAAa,IAAI,gBAAgB,EAAE,MAAM,SAAS,EAClD,cAAc,IAAI,gBAAgB,EAAE,MAAM;AAC9C;AAEA,CAzBC,iBAyBiB;AAChB,WAAS,IAAI,qBAAqB,EAAE,KAAK,MACvC,IAAI,gBAAgB,EAAE,IAAI,kBAAkB,EAAE;AAChD,kBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAIA,CAjCC,iBAiCiB,CAAC;AACjB,gBAAc,IAAI,sBAAsB,EAAE;AAC5C;AAEA,CArCC,iBAqCiB,CAAC,kBAAoB;AACrC,iBAAe,IAAI,sBAAsB,EAAE;AAC7C;AAEA,CAAC;AACC,aAAW,IAAI,iBAAiB,EAAE;AAClC,SAAO,IAAI,sBAAsB,EAAE;AACrC;AAIA,CAhDC,iBAgDiB;AAChB,WAAS,IAAI,qBAAqB,EAAE;AACpC,UAAQ;AACR,UAAQ;AACV;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { UnstyledTextareaProps } from '@asnewyla/unstyled-textarea';
+
+type TextareaProps = Omit<UnstyledTextareaProps, 'invalid'> & {
+    label: string;
+    error?: string;
+};
+declare const Textarea: react.ForwardRefExoticComponent<Omit<UnstyledTextareaProps, "invalid"> & {
+    label: string;
+    error?: string;
+} & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { UnstyledTextareaProps } from '@asnewyla/unstyled-textarea';
+
+type TextareaProps = Omit<UnstyledTextareaProps, 'invalid'> & {
+    label: string;
+    error?: string;
+};
+declare const Textarea: react.ForwardRefExoticComponent<Omit<UnstyledTextareaProps, "invalid"> & {
+    label: string;
+    error?: string;
+} & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var unstyledTextarea = require('@asnewyla/unstyled-textarea');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Textarea.tsx
+function TextareaInner({ label, id, error, disabled, className, ...rest }, ref) {
+  const generatedId = react.useId();
+  const textareaId = id ?? generatedId;
+  const errorId = `${textareaId}-error`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xd-textarea", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "xd-textarea-label", htmlFor: textareaId, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      unstyledTextarea.UnstyledTextarea,
+      {
+        id: textareaId,
+        ...rest,
+        invalid: !!error,
+        disabled,
+        "aria-describedby": error ? errorId : void 0,
+        className: className ? `xd-textarea-input ${className}` : "xd-textarea-input",
+        ref
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xd-textarea-error", id: errorId, children: error })
+  ] });
+}
+var Textarea = react.forwardRef(
+  TextareaInner
+);
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea.tsx"],"names":["useId","jsxs","jsx","UnstyledTextarea","forwardRef"],"mappings":";;;;;;;AAYA,SAAS,aAAA,CACP,EAAE,KAAA,EAAO,EAAA,EAAI,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EACjD,GAAA,EACA;AACA,EAAA,MAAM,cAAcA,WAAA,EAAM;AAC1B,EAAA,MAAM,aAAa,EAAA,IAAM,WAAA;AACzB,EAAA,MAAM,OAAA,GAAU,GAAG,UAAU,CAAA,MAAA,CAAA;AAE7B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,mBAAA,EAAoB,OAAA,EAAS,YAC3C,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBACAA,cAAA;AAAA,MAACC,iCAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,UAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,OAAA,EAAS,CAAC,CAAC,KAAA;AAAA,QACX,QAAA;AAAA,QACA,kBAAA,EAAkB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACpC,SAAA,EACE,SAAA,GAAY,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,GAAK,mBAAA;AAAA,QAEjD;AAAA;AAAA,KACF;AAAA,IACC,yBACCD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mBAAA,EAAoB,EAAA,EAAI,SACpC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,IAAM,QAAA,GAAWE,gBAAA;AAAA,EACtB;AACF","file":"index.js","sourcesContent":["import {\n  UnstyledTextarea,\n  type UnstyledTextareaProps,\n} from '@asnewyla/unstyled-textarea';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\nimport './Textarea.css';\n\nexport type TextareaProps = Omit<UnstyledTextareaProps, 'invalid'> & {\n  label: string;\n  error?: string;\n};\n\nfunction TextareaInner(\n  { label, id, error, disabled, className, ...rest }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const generatedId = useId();\n  const textareaId = id ?? generatedId;\n  const errorId = `${textareaId}-error`;\n\n  return (\n    <div className=\"xd-textarea\">\n      <label className=\"xd-textarea-label\" htmlFor={textareaId}>\n        {label}\n      </label>\n      <UnstyledTextarea\n        id={textareaId}\n        {...rest}\n        invalid={!!error}\n        disabled={disabled}\n        aria-describedby={error ? errorId : undefined}\n        className={\n          className ? `xd-textarea-input ${className}` : 'xd-textarea-input'\n        }\n        ref={ref}\n      />\n      {error && (\n        <div className=\"xd-textarea-error\" id={errorId}>\n          {error}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  TextareaInner,\n);\n"]}

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import { UnstyledTextarea } from '@asnewyla/unstyled-textarea';
+import { forwardRef, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Textarea.tsx
+function TextareaInner({ label, id, error, disabled, className, ...rest }, ref) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const errorId = `${textareaId}-error`;
+  return /* @__PURE__ */ jsxs("div", { className: "xd-textarea", children: [
+    /* @__PURE__ */ jsx("label", { className: "xd-textarea-label", htmlFor: textareaId, children: label }),
+    /* @__PURE__ */ jsx(
+      UnstyledTextarea,
+      {
+        id: textareaId,
+        ...rest,
+        invalid: !!error,
+        disabled,
+        "aria-describedby": error ? errorId : void 0,
+        className: className ? `xd-textarea-input ${className}` : "xd-textarea-input",
+        ref
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { className: "xd-textarea-error", id: errorId, children: error })
+  ] });
+}
+var Textarea = forwardRef(
+  TextareaInner
+);
+
+export { Textarea };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea.tsx"],"names":[],"mappings":";;;;;AAYA,SAAS,aAAA,CACP,EAAE,KAAA,EAAO,EAAA,EAAI,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EACjD,GAAA,EACA;AACA,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,aAAa,EAAA,IAAM,WAAA;AACzB,EAAA,MAAM,OAAA,GAAU,GAAG,UAAU,CAAA,MAAA,CAAA;AAE7B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,mBAAA,EAAoB,OAAA,EAAS,YAC3C,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,UAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,OAAA,EAAS,CAAC,CAAC,KAAA;AAAA,QACX,QAAA;AAAA,QACA,kBAAA,EAAkB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACpC,SAAA,EACE,SAAA,GAAY,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,GAAK,mBAAA;AAAA,QAEjD;AAAA;AAAA,KACF;AAAA,IACC,yBACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mBAAA,EAAoB,EAAA,EAAI,SACpC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB;AACF","file":"index.mjs","sourcesContent":["import {\n  UnstyledTextarea,\n  type UnstyledTextareaProps,\n} from '@asnewyla/unstyled-textarea';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\nimport './Textarea.css';\n\nexport type TextareaProps = Omit<UnstyledTextareaProps, 'invalid'> & {\n  label: string;\n  error?: string;\n};\n\nfunction TextareaInner(\n  { label, id, error, disabled, className, ...rest }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const generatedId = useId();\n  const textareaId = id ?? generatedId;\n  const errorId = `${textareaId}-error`;\n\n  return (\n    <div className=\"xd-textarea\">\n      <label className=\"xd-textarea-label\" htmlFor={textareaId}>\n        {label}\n      </label>\n      <UnstyledTextarea\n        id={textareaId}\n        {...rest}\n        invalid={!!error}\n        disabled={disabled}\n        aria-describedby={error ? errorId : undefined}\n        className={\n          className ? `xd-textarea-input ${className}` : 'xd-textarea-input'\n        }\n        ref={ref}\n      />\n      {error && (\n        <div className=\"xd-textarea-error\" id={errorId}>\n          {error}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  TextareaInner,\n);\n"]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@asnewyla/textarea",
+  "version": "0.2.0",
+  "description": "Styled multi-line text input (textarea) with label, validation error display, and accessibility",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/textarea"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "react",
+    "textarea",
+    "form",
+    "styled",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@asnewyla/unstyled-textarea": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}