{
  "name": "DropdownButton",
  "category": "Utility",
  "subcategory": null,
  "description": "Dropdown Button component.",
  "thumbnail": "/preview-cards/dropdown-button.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/DropdownButton/DropdownButton.razor"
  ],
  "dependencies": [
    "button",
    "dropdown-menu"
  ],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "DropdownButton",
    "category": "Utility",
    "subcategory": null,
    "description": "Dropdown Button component.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/DropdownButton/DropdownButton.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Text",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "MenuContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "Button.ButtonVariant",
        "default": "Button.ButtonVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "Button.ButtonSize",
        "default": "Button.ButtonSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "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",
        "code": "<DropdownButton Text=\"Actions\">\n    <MenuContent>\n        <DropdownMenuItem>Edit</DropdownMenuItem>\n        <DropdownMenuItem>Duplicate</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>Delete</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>"
      },
      {
        "title": "Variants",
        "code": "<DropdownButton Text=\"Default\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>\n<DropdownButton Text=\"Secondary\" Variant=\"Button.ButtonVariant.Secondary\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>\n<DropdownButton Text=\"Outline\" Variant=\"Button.ButtonVariant.Outline\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n        <DropdownMenuItem>Option B</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>"
      },
      {
        "title": "Sizes",
        "code": "<DropdownButton Text=\"Small\" Size=\"Button.ButtonSize.Sm\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>\n<DropdownButton Text=\"Default\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>\n<DropdownButton Text=\"Large\" Size=\"Button.ButtonSize.Lg\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>"
      },
      {
        "title": "Disabled",
        "code": "<DropdownButton Text=\"Disabled\" Disabled=\"true\">\n    <MenuContent>\n        <DropdownMenuItem>Option A</DropdownMenuItem>\n    </MenuContent>\n</DropdownButton>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "dropdown-button",
  "docsUrl": "https://lumeo.nativ.sh/components/dropdown-button",
  "sourceUrl": [
    {
      "file": "UI/DropdownButton/DropdownButton.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/DropdownButton/DropdownButton.razor"
    }
  ],
  "source": [
    {
      "path": "UI/DropdownButton/DropdownButton.razor",
      "content": "@namespace Lumeo\n\n<DropdownMenu @bind-Open=\"_open\">\n    <DropdownMenuTrigger @attributes=\"AdditionalAttributes\">\n        <Button Variant=\"Variant\" Size=\"Size\" Disabled=\"Disabled\" Class=\"@CssClass\">\n            @if (ChildContent != null)\n            {\n                @ChildContent\n            }\n            else\n            {\n                @Text\n            }\n            <Blazicon Svg=\"Lucide.ChevronDown\" Class=\"h-4 w-4 shrink-0 opacity-70 transition-transform duration-200 group-data-[state=open]:rotate-180\" />\n        </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent>\n        @MenuContent\n    </DropdownMenuContent>\n</DropdownMenu>\n\n@code {\n    [Parameter] public string? Text { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public RenderFragment? MenuContent { get; set; }\n    [Parameter] public Button.ButtonVariant Variant { get; set; } = Button.ButtonVariant.Default;\n    [Parameter] public Button.ButtonSize Size { get; set; } = Button.ButtonSize.Default;\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool _open;\n\n    private string CssClass => string.Join(\" \", new[]\n    {\n        \"gap-1.5\",\n        Class\n    }.Where(s => !string.IsNullOrWhiteSpace(s)));\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "DropdownButton",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "MenuContent",
      "owner": "DropdownButton",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "DropdownMenu",
      "reason": "used internally"
    },
    {
      "name": "Button",
      "reason": "used internally"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/DropdownButton/DropdownButtonTests.cs"
  ],
  "mdSummary": "# DropdownButton\n\nDropdown Button component.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/dropdown-button\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| DropdownButton | Text | `string?` | `` |  |\n| DropdownButton | ChildContent | `RenderFragment?` | `` |  |\n| DropdownButton | MenuContent | `RenderFragment?` | `` |  |\n| DropdownButton | Variant | `Button.ButtonVariant` | `Button.ButtonVariant.Default` |  |\n| DropdownButton | Size | `Button.ButtonSize` | `Button.ButtonSize.Default` |  |\n| DropdownButton | Disabled | `bool` | `` |  |\n| DropdownButton | Class | `string?` | `` |  |\n| DropdownButton | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (DropdownButton) — RenderFragment slot\n- `MenuContent` (DropdownButton) — 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<DropdownButton />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/DropdownButton/DropdownButton.razor`\n"
}