{
  "name": "Textarea",
  "category": "Forms",
  "subcategory": "Inputs",
  "description": "Multiline text input with auto-resize option.",
  "thumbnail": "/preview-cards/textarea.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Textarea/Textarea.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-destructive",
    "--color-input",
    "--color-muted",
    "--color-muted-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Textarea",
    "category": "Forms",
    "subcategory": "Inputs",
    "description": "Multiline text input with auto-resize option.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Textarea/Textarea.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "FormField",
        "type": "FormField.FormFieldContext?",
        "default": null,
        "description": null,
        "isCascading": true,
        "captureUnmatched": false
      },
      {
        "name": "Value",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ValueChanged",
        "type": "EventCallback<string?>",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnInput",
        "type": "EventCallback<ChangeEventArgs>",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AutoResize",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "MaxRows",
        "type": "int",
        "default": "10",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ShowCount",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "MaxLength",
        "type": "int?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Resize",
        "type": "TextareaResize",
        "default": "TextareaResize.Vertical",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Required",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Invalid",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ErrorText",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "HelperText",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Label",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Name",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [
      {
        "name": "ValueChanged",
        "type": "EventCallback<string?>",
        "description": null
      },
      {
        "name": "OnInput",
        "type": "EventCallback<ChangeEventArgs>",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "TextareaResize",
        "values": [
          "Vertical",
          "Horizontal",
          "Both",
          "None"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-destructive",
      "--color-input",
      "--color-muted",
      "--color-muted-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Textarea placeholder=\"Type your message here.\" />"
      },
      {
        "title": "With Binding",
        "code": "<Textarea Value=\"@_text\" OnInput=\"@(e => _text = e.Value?.ToString() ?? \"\")\" placeholder=\"Write something...\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Character count: @_text.Length</Lumeo.Text>\n\n@code {\n    private string _text = \"\";\n}"
      },
      {
        "title": "Disabled",
        "code": "<Textarea placeholder=\"This textarea is disabled.\" disabled />"
      },
      {
        "title": "With Label",
        "code": "<FormField Label=\"Your Bio\" HelpText=\"You can use markdown for formatting.\">\n    <Textarea placeholder=\"Tell us a little bit about yourself.\" rows=\"4\" />\n</FormField>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "textarea",
  "docsUrl": "https://lumeo.nativ.sh/components/textarea",
  "sourceUrl": [
    {
      "file": "UI/Textarea/Textarea.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Textarea/Textarea.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Textarea/Textarea.razor",
      "content": "@namespace Lumeo\n\n@if (Label is not null && !InsideFormField)\n{\n    <label class=\"block text-sm font-medium mb-1.5\">\n        @Label\n        @if (Required)\n        {\n            <span class=\"text-destructive ml-0.5\">*</span>\n        }\n    </label>\n}\n\n<div>\n    <textarea id=\"@_elementId\"\n              name=\"@Name\"\n              aria-required=\"@Required.ToString().ToLowerInvariant()\"\n              aria-invalid=\"@EffectiveInvalid.ToString().ToLowerInvariant()\"\n              class=\"@CssClass\" value=\"@Value\" @oninput=\"HandleInput\" disabled=\"@Disabled\"\n              maxlength=\"@MaxLength\" @attributes=\"AdditionalAttributes\"></textarea>\n    @if (ShowCount)\n    {\n        <div class=\"mt-1 text-xs @CountClass text-right\">\n            @(Value?.Length ?? 0)@(MaxLength.HasValue ? $\"/{MaxLength}\" : \"\")\n        </div>\n    }\n</div>\n\n@if (!InsideFormField)\n{\n    @if (EffectiveInvalid && !string.IsNullOrEmpty(ErrorText))\n    {\n        <p class=\"mt-1 text-xs text-destructive\">@ErrorText</p>\n    }\n    else if (!string.IsNullOrEmpty(HelperText))\n    {\n        <p class=\"mt-1 text-xs text-muted-foreground\">@HelperText</p>\n    }\n}\n\n@inject ComponentInteropService Interop\n\n@code {\n    [CascadingParameter] private FormField.FormFieldContext? FormField { get; set; }\n\n    [Parameter] public string? Value { get; set; }\n    [Parameter] public EventCallback<string?> ValueChanged { get; set; }\n    [Parameter] public EventCallback<ChangeEventArgs> OnInput { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public bool AutoResize { get; set; }\n    [Parameter] public int MaxRows { get; set; } = 10;\n    [Parameter] public bool ShowCount { get; set; }\n    [Parameter] public int? MaxLength { get; set; }\n    [Parameter] public TextareaResize Resize { get; set; } = TextareaResize.Vertical;\n    [Parameter] public bool Required { get; set; }\n    [Parameter] public bool Invalid { get; set; }\n    [Parameter] public string? ErrorText { get; set; }\n    [Parameter] public string? HelperText { get; set; }\n    [Parameter] public string? Label { get; set; }\n    [Parameter] public string? Name { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private readonly string _elementId = $\"textarea-{Guid.NewGuid():N}\";\n    private bool _autoResizeSetup;\n\n    private bool EffectiveInvalid => Invalid || FormField?.HasError == true;\n    private bool InsideFormField => FormField is not null;\n\n    private string ResizeClass => Resize switch\n    {\n        TextareaResize.Vertical => \"resize-y\",\n        TextareaResize.Horizontal => \"resize-x\",\n        TextareaResize.Both => \"resize\",\n        TextareaResize.None => \"resize-none\",\n        _ => \"resize-y\"\n    };\n\n    private string CssClass => $\"flex min-h-[60px] w-full rounded-md border {(EffectiveInvalid ? \"border-destructive\" : \"border-input\")} bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] {(EffectiveInvalid ? \"focus-visible:ring-destructive/20\" : \"focus-visible:ring-ring\")} disabled:cursor-not-allowed disabled:opacity-50 {ResizeClass} {Class}\".Trim();\n\n    private bool IsOverLimit => MaxLength.HasValue && (Value?.Length ?? 0) > MaxLength.Value;\n\n    private string CountClass => IsOverLimit ? \"text-destructive\" : \"text-muted-foreground\";\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender && AutoResize && !_autoResizeSetup)\n        {\n            await Interop.SetupAutoResize(_elementId, MaxRows);\n            _autoResizeSetup = true;\n        }\n    }\n\n    private async Task HandleInput(ChangeEventArgs e)\n    {\n        Value = e.Value?.ToString();\n        await OnInput.InvokeAsync(e);\n        await ValueChanged.InvokeAsync(Value);\n    }\n\n    public enum TextareaResize\n    {\n        Vertical,\n        Horizontal,\n        Both,\n        None\n    }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [
    {
      "service": "ComponentInteropService",
      "namespace": ""
    }
  ],
  "cascadingDependencies": [
    {
      "name": "FormField",
      "type": "FormField.FormFieldContext?",
      "required": false
    }
  ],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Helpers/DocsTestContext.cs",
    "tests/Lumeo.Tests/Components/Textarea/TextareaTests.cs"
  ],
  "mdSummary": "# Textarea\n\nMultiline text input with auto-resize option.\n\n**Package:** `Lumeo` · **Category:** Forms/Inputs\n**Docs:** https://lumeo.nativ.sh/components/textarea\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Textarea | FormField | `FormField.FormFieldContext?` | `` |  |\n| Textarea | Value | `string?` | `` |  |\n| Textarea | ValueChanged | `EventCallback<string?>` | `` |  |\n| Textarea | OnInput | `EventCallback<ChangeEventArgs>` | `` |  |\n| Textarea | Disabled | `bool` | `` |  |\n| Textarea | AutoResize | `bool` | `` |  |\n| Textarea | MaxRows | `int` | `10` |  |\n| Textarea | ShowCount | `bool` | `` |  |\n| Textarea | MaxLength | `int?` | `` |  |\n| Textarea | Resize | `TextareaResize` | `TextareaResize.Vertical` |  |\n| Textarea | Required | `bool` | `` |  |\n| Textarea | Invalid | `bool` | `` |  |\n| Textarea | ErrorText | `string?` | `` |  |\n| Textarea | HelperText | `string?` | `` |  |\n| Textarea | Label | `string?` | `` |  |\n| Textarea | Name | `string?` | `` |  |\n| Textarea | Class | `string?` | `` |  |\n| Textarea | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- `ValueChanged` (`EventCallback<string?>`)\n- `OnInput` (`EventCallback<ChangeEventArgs>`)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- `FormField` (`FormField.FormFieldContext?`)\n\n## Services it injects\n- `ComponentInteropService` ()\n\n## Keyboard\n—\n\n## Example\n```razor\n<Textarea />\n```\n\n## CSS variables\n`--color-destructive`, `--color-input`, `--color-muted`, `--color-muted-foreground`, `--color-ring`, `--radius`\n\n## Files\n- `UI/Textarea/Textarea.razor`\n"
}