{
  "name": "Flex",
  "category": "Layout",
  "subcategory": null,
  "description": "Flexbox wrapper exposing direction, gap, align, justify as props.",
  "thumbnail": "/preview-cards/flex.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Flex/Flex.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Flex",
    "category": "Layout",
    "subcategory": null,
    "description": "Flexbox wrapper exposing direction, gap, align, justify as props.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Flex/Flex.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Direction",
        "type": "string?",
        "default": "\"row\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Gap",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Align",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Justify",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Wrap",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Inline",
        "type": "bool",
        "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-foreground"
    ],
    "examples": [
      {
        "title": "Basic Row",
        "code": "<Flex Gap=\"3\">\n    <div>Item 1</div>\n    <div>Item 2</div>\n    <div>Item 3</div>\n</Flex>"
      },
      {
        "title": "With Spacer",
        "code": "<Flex Align=\"center\">\n    <Text Weight=\"semibold\">Logo</Text>\n    <Spacer />\n    <Flex Gap=\"2\">\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\n        <Button Size=\"Button.ButtonSize.Sm\">Sign In</Button>\n    </Flex>\n</Flex>"
      },
      {
        "title": "Centered",
        "code": "<Flex Align=\"center\" Justify=\"center\" Class=\"h-32 w-full\">\n    <Text Color=\"muted\">Centered content</Text>\n</Flex>"
      },
      {
        "title": "Wrapping",
        "code": "<Flex Gap=\"2\" Wrap=\"true\">\n    <div>1</div>\n    <div>2</div>\n    <!-- ... more items -->\n</Flex>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "flex",
  "docsUrl": "https://lumeo.nativ.sh/components/flex",
  "sourceUrl": [
    {
      "file": "UI/Flex/Flex.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Flex/Flex.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Flex/Flex.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</div>\n\n@code {\n    [Parameter] public string? Direction { get; set; } = \"row\";\n    [Parameter] public string? Gap { get; set; }\n    [Parameter] public string? Align { get; set; }\n    [Parameter] public string? Justify { get; set; }\n    [Parameter] public bool Wrap { get; set; }\n    [Parameter] public bool Inline { 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 display = Inline ? \"inline-flex\" : \"flex\";\n            var direction = !string.IsNullOrEmpty(Direction) ? $\"flex-{Direction}\" : \"\";\n            var gap = !string.IsNullOrEmpty(Gap) ? $\"gap-{Gap}\" : \"\";\n            var align = !string.IsNullOrEmpty(Align) ? $\"items-{Align}\" : \"\";\n            var justify = !string.IsNullOrEmpty(Justify) ? $\"justify-{Justify}\" : \"\";\n            var wrap = Wrap ? \"flex-wrap\" : \"\";\n            return $\"{display} {direction} {gap} {align} {justify} {wrap} {Class}\".Trim();\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Flex",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Flex/FlexTests.cs"
  ],
  "mdSummary": "# Flex\n\nFlexbox wrapper exposing direction, gap, align, justify as props.\n\n**Package:** `Lumeo` · **Category:** Layout\n**Docs:** https://lumeo.nativ.sh/components/flex\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Flex | Direction | `string?` | `\"row\"` |  |\n| Flex | Gap | `string?` | `` |  |\n| Flex | Align | `string?` | `` |  |\n| Flex | Justify | `string?` | `` |  |\n| Flex | Wrap | `bool` | `` |  |\n| Flex | Inline | `bool` | `` |  |\n| Flex | ChildContent | `RenderFragment?` | `` |  |\n| Flex | Class | `string?` | `` |  |\n| Flex | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Flex) — 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<Flex />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Flex/Flex.razor`\n"
}