{
  "name": "Text",
  "category": "Typography",
  "subcategory": null,
  "description": "Paragraph text with size, color, weight props.",
  "thumbnail": "/preview-cards/text.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Text/Text.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-destructive",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--color-primary"
  ],
  "api": {
    "name": "Text",
    "category": "Typography",
    "subcategory": null,
    "description": "Paragraph text with size, color, weight props.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Text/Text.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Size",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Weight",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Color",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "As",
        "type": "string",
        "default": "\"p\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Leading",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Truncate",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Align",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "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": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-destructive",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--color-primary"
    ],
    "examples": [
      {
        "title": "Sizes",
        "code": "<Text Size=\"xs\">Extra small text</Text>\n<Text Size=\"sm\">Small text</Text>\n<Text>Default text</Text>\n<Text Size=\"lg\">Large text</Text>\n<Text Size=\"xl\">Extra large text</Text>"
      },
      {
        "title": "Colors",
        "code": "<Text Color=\"foreground\">Foreground</Text>\n<Text Color=\"muted\">Muted</Text>\n<Text Color=\"primary\">Primary</Text>\n<Text Color=\"destructive\">Destructive</Text>"
      },
      {
        "title": "Weights",
        "code": "<Text Weight=\"light\">Light</Text>\n<Text Weight=\"normal\">Normal</Text>\n<Text Weight=\"medium\">Medium</Text>\n<Text Weight=\"semibold\">Semibold</Text>\n<Text Weight=\"bold\">Bold</Text>"
      },
      {
        "title": "Truncation",
        "code": "<Container MaxWidth=\"xs\">\n    <Text Truncate=\"true\">This is a very long piece of text that will be truncated...</Text>\n</Container>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "text",
  "docsUrl": "https://lumeo.nativ.sh/components/text",
  "sourceUrl": [
    {
      "file": "UI/Text/Text.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Text/Text.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Text/Text.razor",
      "content": "@namespace Lumeo\n\n@switch (As)\n{\n    case \"span\":\n        <span class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</span>\n        break;\n    case \"div\":\n        <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</div>\n        break;\n    case \"small\":\n        <small class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</small>\n        break;\n    case \"strong\":\n        <strong class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</strong>\n        break;\n    default:\n        <p class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</p>\n        break;\n}\n\n@code {\n    [Parameter] public string? Size { get; set; }\n    [Parameter] public string? Weight { get; set; }\n    [Parameter] public string? Color { get; set; }\n    [Parameter] public string As { get; set; } = \"p\";\n    [Parameter] public string? Leading { get; set; }\n    [Parameter] public bool Truncate { get; set; }\n    [Parameter] public string? Align { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass\n    {\n        get\n        {\n            var classes = new List<string>();\n\n            if (!string.IsNullOrEmpty(Size))\n                classes.Add($\"text-{Size}\");\n\n            if (!string.IsNullOrEmpty(Weight))\n                classes.Add($\"font-{Weight}\");\n\n            if (!string.IsNullOrEmpty(Color))\n            {\n                // Case-insensitive theme-token map. Unknown values fall back to no class\n                // (default text color) — never throw.\n                var token = Color.ToLowerInvariant();\n                var colorClass = token switch\n                {\n                    \"default\" => null,\n                    \"foreground\" => \"text-foreground\",\n                    \"muted\" => \"text-muted-foreground\",\n                    \"primary\" => \"text-primary\",\n                    \"destructive\" => \"text-destructive\",\n                    \"success\" => \"text-success\",\n                    \"warning\" => \"text-warning\",\n                    \"info\" => \"text-info\",\n                    \"accent\" => \"text-accent-foreground\",\n                    _ => null\n                };\n                if (!string.IsNullOrEmpty(colorClass))\n                    classes.Add(colorClass);\n            }\n\n            if (!string.IsNullOrEmpty(Leading))\n                classes.Add($\"leading-{Leading}\");\n\n            if (Truncate)\n                classes.Add(\"truncate\");\n\n            if (!string.IsNullOrEmpty(Align))\n                classes.Add($\"text-{Align}\");\n\n            if (!string.IsNullOrEmpty(Class))\n                classes.Add(Class);\n\n            return string.Join(\" \", classes);\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Text",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Catalog/CatalogPageTests.cs",
    "tests/Lumeo.Docs.Tests/Helpers/DocsTestContext.cs",
    "tests/Lumeo.Docs.Tests/Layout/NavMenuTests.cs",
    "tests/Lumeo.Docs.Tests/Services/NavConfigServiceTests.cs",
    "tests/Lumeo.Docs.Tests/Services/RegistryServiceTests.cs",
    "tests/Lumeo.Tests/Components/Badge/BadgeTests.cs",
    "tests/Lumeo.Tests/Components/BottomNav/BottomNavAnimatedTests.cs",
    "tests/Lumeo.Tests/Components/Button/ButtonTests.cs",
    "tests/Lumeo.Tests/Components/Chart/ChartTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridLayoutJsonTests.cs",
    "tests/Lumeo.Tests/Components/DropdownButton/DropdownButtonTests.cs",
    "tests/Lumeo.Tests/Components/Highlighter/HighlighterTests.cs",
    "tests/Lumeo.Tests/Components/QueryBuilder/QueryBuilderTests.cs",
    "tests/Lumeo.Tests/Components/ReasoningDisplay/ReasoningDisplayTests.cs",
    "tests/Lumeo.Tests/Components/Sheet/SheetTests.cs",
    "tests/Lumeo.Tests/Components/SplitButton/SplitButtonTests.cs",
    "tests/Lumeo.Tests/Components/StreamingText/StreamingTextTests.cs",
    "tests/Lumeo.Tests/Components/Text/TextTests.cs",
    "tests/Lumeo.Tests/Components/TextReveal/TextRevealTests.cs",
    "tests/Lumeo.Tests/Components/Tooltip/TooltipTests.cs",
    "tests/Lumeo.Tests/Components/TreeView/TreeViewTests.cs",
    "tests/Lumeo.Tests/Components/Watermark/WatermarkTests.cs",
    "tests/Lumeo.Tests/Contract/ComponentContractTests.cs",
    "tests/Lumeo.Tests/Services/DataGridExportServiceTests.cs"
  ],
  "mdSummary": "# Text\n\nParagraph text with size, color, weight props.\n\n**Package:** `Lumeo` · **Category:** Typography\n**Docs:** https://lumeo.nativ.sh/components/text\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Text | Size | `string?` | `` |  |\n| Text | Weight | `string?` | `` |  |\n| Text | Color | `string?` | `` |  |\n| Text | As | `string` | `\"p\"` |  |\n| Text | Leading | `string?` | `` |  |\n| Text | Truncate | `bool` | `` |  |\n| Text | Align | `string?` | `` |  |\n| Text | ChildContent | `RenderFragment?` | `` |  |\n| Text | Class | `string?` | `` |  |\n| Text | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Text) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Text />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-destructive`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-primary`\n\n## Files\n- `UI/Text/Text.razor`\n"
}