{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:component",
  "title": "Textarea",
  "description": "Collects multiple lines of text. Resizes vertically only.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/input.json",
    "https://vlak.dev/r/vlak-lib.json",
    "https://vlak.dev/r/field.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/textarea.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\nimport { useFieldControl } from \"./field\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: React.ReactNode;\n  feedback?: React.ReactNode;\n}\n\nconst styles = stylex.create({\n  field: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"0.5rem\",\n  },\n  label: {\n    fontSize: {\n      default: \"0.75rem\",\n      [mq.phone]: vlak.controlLabel,\n    },\n    fontWeight: 600,\n    color: vlak.gray,\n    letterSpacing: \"-0.01em\",\n    lineHeight: \"16px\",\n  },\n  area: {\n    boxSizing: \"border-box\",\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: {\n      default: vlak.controlBorder,\n      \":focus\": vlak.accent,\n    },\n    borderRadius: {\n      default: vlak.radiusSm,\n      [mq.phone]: vlak.radiusSm,\n    },\n    appearance: \"none\",\n    WebkitAppearance: \"none\",\n    backgroundColor: \"var(--bg)\",\n    color: \"var(--text)\",\n    caretColor: \"var(--text)\",\n    fontSize: {\n      default: \"0.875rem\",\n      [mq.phone]: \"1rem\",\n    },\n    lineHeight: 1.45,\n    paddingBlock: {\n      default: \"0.5rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    paddingInline: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    outlineWidth: {\n      default: 0,\n      \":focus-visible\": 2,\n    },\n    outlineStyle: {\n      default: \"none\",\n      \":focus-visible\": \"solid\",\n    },\n    outlineColor: vlak.ink,\n    outlineOffset: 2,\n    fontFamily: \"inherit\",\n    minHeight: {\n      default: \"6rem\",\n      [mq.phone]: \"8.25rem\",\n    },\n    resize: \"vertical\",\n    width: \"100%\",\n    \":-webkit-autofill\": {\n      WebkitTextFillColor: \"var(--text)\",\n      caretColor: \"var(--text)\",\n      backgroundColor: \"var(--bg)\",\n      boxShadow: \"inset 0 0 0 1000px var(--bg)\",\n    },\n  },\n  invalid: {\n    borderColor: vlak.ink,\n  },\n  feedback: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"0.5rem\",\n    fontSize: {\n      default: \"0.75rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    fontWeight: 500,\n    color: vlak.gray,\n    letterSpacing: \"-0.01em\",\n    lineHeight: \"16px\",\n    margin: 0,\n    minHeight: \"1rem\",\n  },\n});\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { label, feedback, className, style, id, ...props },\n  ref,\n) {\n  const autoId = React.useId();\n  const areaId = id ?? autoId;\n  const field = useFieldControl(props);\n  const invalid = field.invalid;\n  const stack = rs([\"rs-field\", \"rs-textarea-field\"], styles.field);\n  const lab = rs([\"rs-field-label\", \"rs-textarea-label\"], styles.label);\n  const sx = rs([\"rs-textarea\", invalid && \"rs-textarea-invalid\", className], styles.area, invalid && styles.invalid);\n  const fb = rs([\"rs-feedback\", \"rs-textarea-feedback\"], styles.feedback);\n  return (\n    <div className={stack.className} style={stack.style}>\n      {label != null && (\n        <label className={lab.className} style={lab.style} htmlFor={areaId}>\n          {label}\n        </label>\n      )}\n      <textarea\n        ref={ref}\n        id={areaId}\n        {...props}\n        aria-describedby={field[\"aria-describedby\"]}\n        aria-invalid={field[\"aria-invalid\"]}\n        className={sx.className}\n        style={{ ...sx.style, ...style }}\n      />\n      {feedback != null && (\n        <span className={fb.className} style={fb.style}>\n          {feedback}\n        </span>\n      )}\n    </div>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/textarea.tsx"
    },
    {
      "path": "vlak/styles/textarea.css",
      "content": "/* ── textarea: generated from packages/react/src/components/textarea.tsx ── */\n.rs-field.rs-textarea-field{width:100%;display:flex;flex-direction:column;gap:0.5rem}\n.rs-field-label.rs-textarea-label{font-size:0.75rem;font-weight:600;color:var(--text-secondary);letter-spacing:-0.01em;line-height:16px}\n@media (max-width: 640px){.rs-field-label.rs-textarea-label{font-size:var(--control-label)}}\n.rs-textarea{box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--control-border);border-radius:var(--radius-sm);appearance:none;-webkit-appearance:none;background-color:var(--bg);color:var(--text);caret-color:var(--text);font-size:0.875rem;line-height:1.45;padding-block:0.5rem;padding-inline:0.625rem;outline-width:0;outline-style:none;outline-color:var(--text);outline-offset:2px;font-family:inherit;min-height:6rem;resize:vertical;width:100%}\n.rs-textarea:focus{border-color:var(--accent)}\n.rs-textarea:focus-visible{outline-width:2px;outline-style:solid}\n.rs-textarea:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);background-color:var(--bg);box-shadow:inset 0 0 0 1000px var(--bg)}\n@media (max-width: 640px){.rs-textarea{border-radius:var(--radius-sm);font-size:1rem;padding-block:0.75rem;padding-inline:0.875rem;min-height:8.25rem}}\n.rs-textarea-invalid{border-color:var(--text)}\n.rs-feedback.rs-textarea-feedback{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:500;color:var(--text-secondary);letter-spacing:-0.01em;line-height:16px;margin:0;min-height:1rem}\n@media (max-width: 640px){.rs-feedback.rs-textarea-feedback{font-size:0.875rem}}\n",
      "type": "registry:file",
      "target": "styles/vlak/textarea.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "forms",
      "classes": [
        "rs-textarea",
        "rs-textarea-invalid",
        "rs-textarea-feedback",
        "rs-textarea-field",
        "rs-textarea-label"
      ],
      "snippet": "<div class=\"rs-field\"><span class=\"rs-field-label\">Notes</span><textarea class=\"rs-textarea\" placeholder=\"What should we know?\"></textarea></div>",
      "cssOnly": false,
      "registryDependencies": [
        "input",
        "vlak-lib",
        "field"
      ],
      "aliases": [
        "Textarea",
        "Text area",
        "Multiline input"
      ],
      "example": "import { Textarea } from \"@noorddev/vlak-react\";\n\n<Textarea label=\"Notes\" placeholder=\"What should we know?\" rows={4} />",
      "usage": {
        "use": [
          "Free text longer than one line.",
          "Vertical resize only; the width follows the grid."
        ],
        "avoid": [
          "Single values; use Input.",
          "Rich text; this is a native textarea."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves focus to the field; Enter inserts a line break"
        }
      ],
      "a11y": [
        "A native <textarea> with a generated id; label renders a <label> pointing at it.",
        "Inside Field, hint and error reach it through aria-describedby and aria-invalid."
      ]
    }
  }
}