{
  "name": "Input",
  "category": "Forms",
  "subcategory": "Inputs",
  "description": "Styled text input with label, prefix/suffix, icons, error state.",
  "thumbnail": "/preview-cards/input.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Input/Input.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-destructive",
    "--color-foreground",
    "--color-input",
    "--color-muted",
    "--color-muted-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Input",
    "category": "Forms",
    "subcategory": "Inputs",
    "description": "Styled text input with label, prefix/suffix, icons, error state.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Input/Input.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": "Prefix",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Suffix",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "InputSize",
        "default": "InputSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Clearable",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnClear",
        "type": "EventCallback",
        "default": null,
        "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
      },
      {
        "name": "OnClear",
        "type": "EventCallback",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "InputSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-destructive",
      "--color-foreground",
      "--color-input",
      "--color-muted",
      "--color-muted-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Input placeholder=\"Email\" />"
      },
      {
        "title": "With Binding",
        "code": "<Input Value=\"@_name\" OnInput=\"@(e => _name = e.Value?.ToString() ?? \"\")\" placeholder=\"Enter your name\" />\n<Lumeo.Text Size=\"sm\" Color=\"muted\">Value: @_name</Lumeo.Text>\n\n@code {\n    private string _name = \"\";\n}"
      },
      {
        "title": "File Input",
        "code": "<Input type=\"file\" />"
      },
      {
        "title": "Disabled",
        "code": "<Input placeholder=\"Disabled input\" disabled />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "input",
  "docsUrl": "https://lumeo.nativ.sh/components/input",
  "sourceUrl": [
    {
      "file": "UI/Input/Input.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Input/Input.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Input/Input.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@if (Prefix != null || Suffix != null || (Clearable && !string.IsNullOrEmpty(Value)))\n{\n    <div class=\"@WrapperClass\" @attributes=\"AdditionalAttributes\">\n        @if (Prefix != null)\n        {\n            <div class=\"flex items-center px-3 text-muted-foreground\">@Prefix</div>\n        }\n        <input name=\"@Name\"\n               aria-required=\"@Required.ToString().ToLowerInvariant()\"\n               aria-invalid=\"@EffectiveInvalid.ToString().ToLowerInvariant()\"\n               class=\"@WrappedInputClass\" value=\"@Value\" @oninput=\"HandleInput\" disabled=\"@Disabled\" />\n        @if (Clearable && !string.IsNullOrEmpty(Value))\n        {\n            <button type=\"button\" class=\"flex items-center px-2 text-muted-foreground hover:text-foreground transition-colors\" @onclick=\"HandleClear\" tabindex=\"-1\" aria-label=\"@L[\"Common.Clear\"]\">\n                <Blazicon Svg=\"Lucide.X\" class=\"h-3.5 w-3.5\" />\n            </button>\n        }\n        @if (Suffix != null)\n        {\n            <div class=\"flex items-center px-3 text-muted-foreground\">@Suffix</div>\n        }\n    </div>\n}\nelse\n{\n    <input name=\"@Name\"\n           aria-required=\"@Required.ToString().ToLowerInvariant()\"\n           aria-invalid=\"@EffectiveInvalid.ToString().ToLowerInvariant()\"\n           class=\"@CssClass\" value=\"@Value\" @oninput=\"HandleInput\" disabled=\"@Disabled\" @attributes=\"AdditionalAttributes\" />\n}\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 Lumeo.Services.Localization.ILumeoLocalizer L\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 RenderFragment? Prefix { get; set; }\n    [Parameter] public RenderFragment? Suffix { get; set; }\n    [Parameter] public InputSize Size { get; set; } = InputSize.Default;\n    [Parameter] public bool Clearable { get; set; }\n    [Parameter] public EventCallback OnClear { get; set; }\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 bool EffectiveInvalid => Invalid || FormField?.HasError == true;\n    private bool InsideFormField => FormField is not null;\n\n    private string SizeClasses => Size switch\n    {\n        InputSize.Sm => \"h-8 text-xs px-2.5\",\n        InputSize.Lg => \"h-11 text-base px-4\",\n        _ => \"h-9 text-sm px-3\"\n    };\n\n    private string WrapperSizeClasses => Size switch\n    {\n        InputSize.Sm => \"h-8 text-xs\",\n        InputSize.Lg => \"h-11 text-base\",\n        _ => \"h-9 text-sm\"\n    };\n\n    private string WrappedInputSizeClasses => Size switch\n    {\n        InputSize.Sm => \"px-2.5 text-xs\",\n        InputSize.Lg => \"px-4 text-base\",\n        _ => \"px-3 text-sm\"\n    };\n\n    private string CssClass => $\"flex {SizeClasses} w-full rounded-md border {(EffectiveInvalid ? \"border-destructive\" : \"border-input\")} bg-transparent py-1 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 {Class}\".Trim();\n\n    private string WrapperClass => $\"flex {WrapperSizeClasses} w-full rounded-md border {(EffectiveInvalid ? \"border-destructive\" : \"border-input\")} bg-transparent transition-colors {(EffectiveInvalid ? \"focus-within:ring-[1.5px] focus-within:ring-destructive/20\" : \"focus-within:ring-[1.5px] focus-within:ring-ring\")} disabled:cursor-not-allowed disabled:opacity-50 {Class}\".Trim();\n\n    private string WrappedInputClass => $\"flex-1 bg-transparent {WrappedInputSizeClasses} py-1 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed\".Trim();\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    private async Task HandleClear()\n    {\n        Value = \"\";\n        await OnInput.InvokeAsync(new ChangeEventArgs { Value = \"\" });\n        await ValueChanged.InvokeAsync(\"\");\n        await OnClear.InvokeAsync();\n    }\n\n    public enum InputSize { Sm, Default, Lg }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "Prefix",
      "owner": "Input",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "Suffix",
      "owner": "Input",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ILumeoLocalizer",
      "namespace": "Lumeo.Services.Localization"
    }
  ],
  "cascadingDependencies": [
    {
      "name": "FormField",
      "type": "FormField.FormFieldContext?",
      "required": false
    }
  ],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Catalog/CatalogCardTests.cs",
    "tests/Lumeo.Docs.Tests/Catalog/CatalogPageTests.cs",
    "tests/Lumeo.Docs.Tests/Services/NavConfigServiceTests.cs",
    "tests/Lumeo.Docs.Tests/Services/RegistryServiceTests.cs",
    "tests/Lumeo.Tests/Components/Combobox/ComboboxTests.cs",
    "tests/Lumeo.Tests/Components/Command/CommandTests.cs",
    "tests/Lumeo.Tests/Components/FileManager/FileManagerTests.cs",
    "tests/Lumeo.Tests/Components/Input/InputTests.cs",
    "tests/Lumeo.Tests/Components/OtpInput/OtpInputTests.cs",
    "tests/Lumeo.Tests/Components/Slider/SliderTests.cs",
    "tests/Lumeo.Tests/Components/TagInput/TagInputGenericTests.cs",
    "tests/Lumeo.Tests/Components/Textarea/TextareaTests.cs",
    "tests/Lumeo.Tests/Components/ToolCallCard/ToolCallCardTests.cs",
    "tests/Lumeo.Tests/Components/TreeView/TreeViewTests.cs"
  ],
  "mdSummary": "# Input\n\nStyled text input with label, prefix/suffix, icons, error state.\n\n**Package:** `Lumeo` · **Category:** Forms/Inputs\n**Docs:** https://lumeo.nativ.sh/components/input\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Input | FormField | `FormField.FormFieldContext?` | `` |  |\n| Input | Value | `string?` | `` |  |\n| Input | ValueChanged | `EventCallback<string?>` | `` |  |\n| Input | OnInput | `EventCallback<ChangeEventArgs>` | `` |  |\n| Input | Disabled | `bool` | `` |  |\n| Input | Prefix | `RenderFragment?` | `` |  |\n| Input | Suffix | `RenderFragment?` | `` |  |\n| Input | Size | `InputSize` | `InputSize.Default` |  |\n| Input | Clearable | `bool` | `` |  |\n| Input | OnClear | `EventCallback` | `` |  |\n| Input | Required | `bool` | `` |  |\n| Input | Invalid | `bool` | `` |  |\n| Input | ErrorText | `string?` | `` |  |\n| Input | HelperText | `string?` | `` |  |\n| Input | Label | `string?` | `` |  |\n| Input | Name | `string?` | `` |  |\n| Input | Class | `string?` | `` |  |\n| Input | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `Prefix` (Input) — RenderFragment slot\n- `Suffix` (Input) — RenderFragment slot\n\n## Events\n- `ValueChanged` (`EventCallback<string?>`)\n- `OnInput` (`EventCallback<ChangeEventArgs>`)\n- `OnClear` (`EventCallback`)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- `FormField` (`FormField.FormFieldContext?`)\n\n## Services it injects\n- `ILumeoLocalizer` (Lumeo.Services.Localization)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Input />\n```\n\n## CSS variables\n`--color-destructive`, `--color-foreground`, `--color-input`, `--color-muted`, `--color-muted-foreground`, `--color-ring`, `--radius`\n\n## Files\n- `UI/Input/Input.razor`\n"
}