{"_id":"@asnewyla/textarea","name":"@asnewyla/textarea","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"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"},"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"},"_nodeVersion":"24.19.0","_id":"@asnewyla/textarea@0.2.0","dist":{"integrity":"sha512-xxgcWt8HNudVkEW6GieYG+ldTHtmZSIa6zRJxnpXeIMebwi1G/JIZaHTiR1YCdg5C53U5WT/TMYLQMceZrMtbw==","shasum":"2126394e9879f8f732b885ee7aa8336378f32c9c","tarball":"https://registry.npmjs.org/@asnewyla/textarea/-/textarea-0.2.0.tgz","fileCount":11,"unpackedSize":16765,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC4+UReGocMxbaKLAMX7dx+BtcjgSJ7ct864OZa8B8/6gIgZ4QvvF8x9vqsd99P/cdTaExRfaGUWjv+7P9YtbUHbvc="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/textarea_0.2.0_1788128079810_0.48490848507202355"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T22:14:39.671Z","0.2.0":"2026-08-30T22:14:39.947Z","modified":"2026-08-30T22:14:40.128Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Styled multi-line text input (textarea) with label, validation error display, and accessibility","keywords":["react","textarea","form","styled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/textarea"},"license":"MIT","readme":"# @asnewyla/textarea\n\nStyled multi-line text input built on `@asnewyla/unstyled-textarea`. Label\nassociation, inline validation error, and full keyboard/focus\naccessibility.\n\n## Install\n\n```bash\nnpm install @asnewyla/textarea\n```\n\nImport the stylesheet once, anywhere in your app:\n\n```ts\nimport '@asnewyla/textarea/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Textarea } from '@asnewyla/textarea';\n\n<Textarea label=\"Bio\" placeholder=\"Tell us about yourself\" />\n\n<Textarea label=\"Bio\" error=\"Bio is required\" />\n\n// Controlled\n<Textarea\n  label=\"Bio\"\n  value={bio}\n  onChange={(e) => setBio(e.target.value)}\n/>\n\n// Any native textarea attribute passes straight through\n<Textarea label=\"Cover letter\" rows={10} />\n```\n\n### Props\n\nEverything `@asnewyla/unstyled-textarea` accepts, plus:\n\n| Prop | Type | Default |\n|---|---|---|\n| `label` | `string` (**required**) | — |\n| `error` | `string` | — |\n\n`error` doubles as the invalid-state flag — there's no separate `invalid`\nprop, same convention as `@asnewyla/input`/`@asnewyla/checkbox`/\n`@asnewyla/switch`. Setting `error` sets `aria-invalid`/`data-invalid` on\nthe field and links it via `aria-describedby` to the rendered error\nmessage.\n\nResizing is vertical-only (`resize: vertical`), not the browser's default\n`both` — letting a stacked, block-level field grow wider than its\ncontainer breaks whatever layout it sits in.\n\n### Theming\n\nOverride the CSS custom properties — defaults adapt automatically to\n`prefers-color-scheme` via `@asnewyla/tokens`:\n\n```css\n:root {\n  --xd-color-primary: #0d9488;\n  --xd-color-border: #cbd5e1;\n  --xd-color-destructive: #dc2626;\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"","_rev":"1-fce1e983c529a84c47f0635ee6915a5f"}