@lumeo-ui/mcp-server 4.1.0-preview.4 → 4.1.0-preview.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components-api.json +116 -63
- package/src/registry.json +82 -223
package/src/components-api.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://lumeo.nativ.sh/components-api-schema.json",
|
|
3
|
-
"version": "4.1.0-preview.
|
|
4
|
-
"generated": "2026-07-
|
|
3
|
+
"version": "4.1.0-preview.5",
|
|
4
|
+
"generated": "2026-07-03T13:46:29.9603856Z",
|
|
5
5
|
"stats": {
|
|
6
6
|
"componentCount": 164,
|
|
7
|
-
"totalParameters":
|
|
7
|
+
"totalParameters": 4170,
|
|
8
8
|
"totalEnums": 74,
|
|
9
9
|
"totalRecords": 72,
|
|
10
10
|
"serviceCount": 33,
|
|
@@ -5041,11 +5041,11 @@
|
|
|
5041
5041
|
},
|
|
5042
5042
|
{
|
|
5043
5043
|
"title": "With Icon",
|
|
5044
|
-
"code": "<Alert>\n <Flex Gap=\"3\">\n <
|
|
5044
|
+
"code": "<Alert>\n <Flex Gap=\"3\">\n <SvgGlyph Svg=\"@(Lucide.Info)\" class=\"h-4 w-4 mt-0.5\" />\n <Stack Gap=\"0\">\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Information</Heading>\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">This action will update your preferences.</Lumeo.Text>\n </Stack>\n </Flex>\n</Alert>\n<Alert Variant=\"Alert.AlertVariant.Destructive\">\n <Flex Gap=\"3\">\n <SvgGlyph Svg=\"@(Lucide.CircleAlert)\" class=\"h-4 w-4 mt-0.5\" />\n <Stack Gap=\"0\">\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">Something went wrong</Heading>\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Could not save your changes. Please try again.</Lumeo.Text>\n </Stack>\n </Flex>\n</Alert>"
|
|
5045
5045
|
},
|
|
5046
5046
|
{
|
|
5047
5047
|
"title": "With Action",
|
|
5048
|
-
"code": "<Alert>\n <Flex Align=\"start\" Justify=\"between\" Gap=\"4\">\n <Flex Gap=\"3\">\n <
|
|
5048
|
+
"code": "<Alert>\n <Flex Align=\"start\" Justify=\"between\" Gap=\"4\">\n <Flex Gap=\"3\">\n <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-4 w-4 mt-0.5 text-primary\" />\n <Stack Gap=\"0\">\n <Heading Level=\"5\" Size=\"sm\" Weight=\"medium\" Class=\"mb-1 leading-none tracking-tight\">New feature available</Heading>\n <Lumeo.Text Size=\"sm\" Leading=\"relaxed\">Dark mode is now available for all users.</Lumeo.Text>\n </Stack>\n </Flex>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">Try it</Button>\n </Flex>\n</Alert>"
|
|
5049
5049
|
}
|
|
5050
5050
|
],
|
|
5051
5051
|
"subComponents": {},
|
|
@@ -5196,7 +5196,7 @@
|
|
|
5196
5196
|
},
|
|
5197
5197
|
{
|
|
5198
5198
|
"title": "Unsaved Changes",
|
|
5199
|
-
"code": "<AlertDialog @bind-Open=\"_isOpen\">\n <AlertDialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <
|
|
5199
|
+
"code": "<AlertDialog @bind-Open=\"_isOpen\">\n <AlertDialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <SvgGlyph Svg=\"@(Lucide.X)\" class=\"h-4 w-4\" /> Close Editor\n </Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>\n <AlertDialogDescription>\n You have unsaved changes. If you close now, your changes will be lost.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Keep Editing</AlertDialogCancel>\n <AlertDialogAction>Discard Changes</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
5200
5200
|
},
|
|
5201
5201
|
{
|
|
5202
5202
|
"title": "Loading Action",
|
|
@@ -5956,7 +5956,7 @@
|
|
|
5956
5956
|
},
|
|
5957
5957
|
{
|
|
5958
5958
|
"title": "With Search",
|
|
5959
|
-
"code": "<AppBar>\n <StartContent>\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n </StartContent>\n <ChildContent>\n <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n </ChildContent>\n <EndContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <
|
|
5959
|
+
"code": "<AppBar>\n <StartContent>\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n </StartContent>\n <ChildContent>\n <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n </ChildContent>\n <EndContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-4 w-4\" />\n </Button>\n <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n </EndContent>\n</AppBar>"
|
|
5960
5960
|
},
|
|
5961
5961
|
{
|
|
5962
5962
|
"title": "Appearance toggles — interactive",
|
|
@@ -5964,7 +5964,7 @@
|
|
|
5964
5964
|
},
|
|
5965
5965
|
{
|
|
5966
5966
|
"title": "Elevated (no border)",
|
|
5967
|
-
"code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n <StartContent>\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n </StartContent>\n <EndContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <
|
|
5967
|
+
"code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n <StartContent>\n <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n </StartContent>\n <EndContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" />\n </Button>\n </EndContent>\n</AppBar>"
|
|
5968
5968
|
}
|
|
5969
5969
|
],
|
|
5970
5970
|
"subComponents": {},
|
|
@@ -6468,7 +6468,7 @@
|
|
|
6468
6468
|
},
|
|
6469
6469
|
{
|
|
6470
6470
|
"title": "Fallback Initials",
|
|
6471
|
-
"code": "<Avatar>\n <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n<Avatar>\n <AvatarFallback>\n <
|
|
6471
|
+
"code": "<Avatar>\n <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n<Avatar>\n <AvatarFallback>\n <SvgGlyph Svg=\"@(Lucide.User)\" class=\"h-4 w-4\" />\n </AvatarFallback>\n</Avatar>"
|
|
6472
6472
|
},
|
|
6473
6473
|
{
|
|
6474
6474
|
"title": "Sizes",
|
|
@@ -6780,7 +6780,7 @@
|
|
|
6780
6780
|
},
|
|
6781
6781
|
{
|
|
6782
6782
|
"title": "Custom Content",
|
|
6783
|
-
"code": "<BackToTop>\n <
|
|
6783
|
+
"code": "<BackToTop>\n <SvgGlyph Svg=\"@(Lucide.ChevronUp)\" class=\"h-5 w-5\" />\n</BackToTop>"
|
|
6784
6784
|
},
|
|
6785
6785
|
{
|
|
6786
6786
|
"title": "Interactive: Visibility Threshold",
|
|
@@ -8014,11 +8014,11 @@
|
|
|
8014
8014
|
},
|
|
8015
8015
|
{
|
|
8016
8016
|
"title": "With Icons",
|
|
8017
|
-
"code": "<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">\n <
|
|
8017
|
+
"code": "<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">\n <SvgGlyph Svg=\"@(Lucide.Home)\" class=\"h-4 w-4\" />\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Documents</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Projects</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Report.pdf</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>"
|
|
8018
8018
|
},
|
|
8019
8019
|
{
|
|
8020
8020
|
"title": "Custom Separator",
|
|
8021
|
-
"code": "<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <
|
|
8021
|
+
"code": "<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SvgGlyph Svg=\"@(Lucide.Slash)\" class=\"h-4 w-4\" />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbLink Href=\"#\">Settings</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SvgGlyph Svg=\"@(Lucide.Slash)\" class=\"h-4 w-4\" />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Profile</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>"
|
|
8022
8022
|
}
|
|
8023
8023
|
],
|
|
8024
8024
|
"subComponents": {
|
|
@@ -8562,11 +8562,11 @@
|
|
|
8562
8562
|
},
|
|
8563
8563
|
{
|
|
8564
8564
|
"title": "Sizes",
|
|
8565
|
-
"code": "<Button Size=\"Button.ButtonSize.Sm\">Small</Button>\n<Button>Default</Button>\n<Button Size=\"Button.ButtonSize.Lg\">Large</Button>\n<Button Size=\"Button.ButtonSize.Icon\">\n <
|
|
8565
|
+
"code": "<Button Size=\"Button.ButtonSize.Sm\">Small</Button>\n<Button>Default</Button>\n<Button Size=\"Button.ButtonSize.Lg\">Large</Button>\n<Button Size=\"Button.ButtonSize.Icon\">\n <SvgGlyph Svg=\"@(Lucide.ChevronRight)\" class=\"h-4 w-4\" />\n</Button>"
|
|
8566
8566
|
},
|
|
8567
8567
|
{
|
|
8568
8568
|
"title": "With Icon",
|
|
8569
|
-
"code": "<Button>\n <
|
|
8569
|
+
"code": "<Button>\n <SvgGlyph Svg=\"@(Lucide.Mail)\" class=\"h-4 w-4\" />\n Login with Email\n</Button>\n<Button Variant=\"Button.ButtonVariant.Secondary\">\n <SvgGlyph Svg=\"@(Lucide.Loader2)\" class=\"h-4 w-4 animate-spin\" />\n Please wait\n</Button>"
|
|
8570
8570
|
},
|
|
8571
8571
|
{
|
|
8572
8572
|
"title": "Disabled",
|
|
@@ -8655,7 +8655,7 @@
|
|
|
8655
8655
|
"examples": [
|
|
8656
8656
|
{
|
|
8657
8657
|
"title": "Horizontal (default)",
|
|
8658
|
-
"code": "<ButtonGroup>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <
|
|
8658
|
+
"code": "<ButtonGroup>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n </Button>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n </Button>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n </Button>\n</ButtonGroup>"
|
|
8659
8659
|
},
|
|
8660
8660
|
{
|
|
8661
8661
|
"title": "Vertical",
|
|
@@ -9132,11 +9132,11 @@
|
|
|
9132
9132
|
},
|
|
9133
9133
|
{
|
|
9134
9134
|
"title": "Card with Actions",
|
|
9135
|
-
"code": "<Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Lumeo.Text Size=\"sm\" Color=\"foreground\">\n Learn how to build accessible, composable UI components using\n Blazor and Tailwind CSS in this in-depth guide.\n </Lumeo.Text>\n </CardContent>\n <CardFooter>\n <Flex Gap=\"2\" Class=\"w-full\">\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n <
|
|
9135
|
+
"code": "<Card>\n <CardHeader>\n <Heading Level=\"3\" Size=\"lg\" Class=\"leading-none tracking-tight\">Blog Post</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Published on Jan 12, 2025</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Lumeo.Text Size=\"sm\" Color=\"foreground\">\n Learn how to build accessible, composable UI components using\n Blazor and Tailwind CSS in this in-depth guide.\n </Lumeo.Text>\n </CardContent>\n <CardFooter>\n <Flex Gap=\"2\" Class=\"w-full\">\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Copy)\" class=\"h-4 w-4\" /> Edit\n </Button>\n <Button Variant=\"Button.ButtonVariant.Destructive\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Trash)\" class=\"h-4 w-4\" /> Delete\n </Button>\n </Flex>\n </CardFooter>\n</Card>"
|
|
9136
9136
|
},
|
|
9137
9137
|
{
|
|
9138
9138
|
"title": "Horizontal Card",
|
|
9139
|
-
"code": "<Card>\n <Flex>\n <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\n <
|
|
9139
|
+
"code": "<Card>\n <Flex>\n <Center Class=\"w-32 h-32 rounded-l-lg bg-muted shrink-0\">\n <SvgGlyph Svg=\"@(Lucide.Star)\" class=\"h-10 w-10 text-muted-foreground\" />\n </Center>\n <Stack Gap=\"0\" Class=\"flex-1\">\n <CardHeader>\n <Heading Level=\"3\" Size=\"base\" Weight=\"semibold\" Class=\"leading-none tracking-tight\">Featured Article</Heading>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">5 min read</Lumeo.Text>\n </CardHeader>\n <CardContent>\n <Lumeo.Text Size=\"sm\" Color=\"muted\">\n An introduction to modern component-driven design systems.\n </Lumeo.Text>\n </CardContent>\n <CardFooter>\n <Button Variant=\"Button.ButtonVariant.Link\" Class=\"px-0\">Read more</Button>\n </CardFooter>\n </Stack>\n </Flex>\n</Card>"
|
|
9140
9140
|
},
|
|
9141
9141
|
{
|
|
9142
9142
|
"title": "With Form",
|
|
@@ -19840,7 +19840,7 @@
|
|
|
19840
19840
|
"examples": [
|
|
19841
19841
|
{
|
|
19842
19842
|
"title": "Default",
|
|
19843
|
-
"code": "<Collapsible @bind-Open=\"_isOpen\">\n <div class=\"flex items-center justify-between\">\n <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\n <CollapsibleTrigger>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <
|
|
19843
|
+
"code": "<Collapsible @bind-Open=\"_isOpen\">\n <div class=\"flex items-center justify-between\">\n <h4 class=\"text-sm font-semibold\">Starred Repositories</h4>\n <CollapsibleTrigger>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.ChevronDown)\" class=\"h-4 w-4\" />\n </Button>\n </CollapsibleTrigger>\n </div>\n <CollapsibleContent>\n <div class=\"rounded-md border px-4 py-2 text-sm\">Content here</div>\n </CollapsibleContent>\n</Collapsible>"
|
|
19844
19844
|
},
|
|
19845
19845
|
{
|
|
19846
19846
|
"title": "Initially Open",
|
|
@@ -19848,7 +19848,7 @@
|
|
|
19848
19848
|
},
|
|
19849
19849
|
{
|
|
19850
19850
|
"title": "Sidebar Section",
|
|
19851
|
-
"code": "<Collapsible @bind-Open=\"_isOpen\">\n <CollapsibleTrigger>\n <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\n <div class=\"flex items-center gap-2 text-sm font-medium\">\n <
|
|
19851
|
+
"code": "<Collapsible @bind-Open=\"_isOpen\">\n <CollapsibleTrigger>\n <div class=\"flex items-center justify-between px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer\">\n <div class=\"flex items-center gap-2 text-sm font-medium\">\n <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" /> Settings\n </div>\n <SvgGlyph Svg=\"@(Lucide.ChevronDown)\" class=\"@($\"h-4 w-4 transition-transform {(_isOpen ? \\\"rotate-180\\\" : \\\"\\\")}\")}\" />\n </div>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <div class=\"pl-6 mt-1 space-y-1\">\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">General</div>\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Security</div>\n <div class=\"px-2 py-1.5 text-sm text-muted-foreground\">Notifications</div>\n </div>\n </CollapsibleContent>\n</Collapsible>"
|
|
19852
19852
|
}
|
|
19853
19853
|
],
|
|
19854
19854
|
"subComponents": {
|
|
@@ -21249,7 +21249,7 @@
|
|
|
21249
21249
|
"examples": [
|
|
21250
21250
|
{
|
|
21251
21251
|
"title": "Default",
|
|
21252
|
-
"code": "<Command>\n <CommandInput Placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandGroup Heading=\"Suggestions\">\n <CommandItem>\n <
|
|
21252
|
+
"code": "<Command>\n <CommandInput Placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandGroup Heading=\"Suggestions\">\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.Calendar)\" class=\"mr-2 h-4 w-4\" />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"mr-2 h-4 w-4\" />\n <span>Settings</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup Heading=\"Actions\">\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.User)\" class=\"mr-2 h-4 w-4\" />\n <span>Profile</span>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n</Command>"
|
|
21253
21253
|
},
|
|
21254
21254
|
{
|
|
21255
21255
|
"title": "Compact",
|
|
@@ -21257,7 +21257,7 @@
|
|
|
21257
21257
|
},
|
|
21258
21258
|
{
|
|
21259
21259
|
"title": "Navigation",
|
|
21260
|
-
"code": "<Command>\n <CommandInput Placeholder=\"Go to...\" />\n <CommandList>\n <CommandGroup Heading=\"Pages\">\n <CommandItem>\n <
|
|
21260
|
+
"code": "<Command>\n <CommandInput Placeholder=\"Go to...\" />\n <CommandList>\n <CommandGroup Heading=\"Pages\">\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.House)\" class=\"mr-2 h-4 w-4\" />\n <span>Dashboard</span>\n </CommandItem>\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.User)\" class=\"mr-2 h-4 w-4\" />\n <span>Profile</span>\n </CommandItem>\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"mr-2 h-4 w-4\" />\n <span>Settings</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup Heading=\"Recent\">\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"mr-2 h-4 w-4\" />\n <span>Notifications</span>\n </CommandItem>\n <CommandItem>\n <SvgGlyph Svg=\"@(Lucide.Mail)\" class=\"mr-2 h-4 w-4\" />\n <span>Messages</span>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n</Command>"
|
|
21261
21261
|
},
|
|
21262
21262
|
{
|
|
21263
21263
|
"title": "Disabled Items",
|
|
@@ -28129,7 +28129,7 @@
|
|
|
28129
28129
|
},
|
|
28130
28130
|
{
|
|
28131
28131
|
"title": "Confirmation Dialog",
|
|
28132
|
-
"code": "<Dialog @bind-Open=\"_isOpen\">\n <DialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Destructive\">\n <
|
|
28132
|
+
"code": "<Dialog @bind-Open=\"_isOpen\">\n <DialogTrigger>\n <Button Variant=\"Button.ButtonVariant.Destructive\">\n <SvgGlyph Svg=\"@(Lucide.Trash)\" class=\"h-4 w-4\" /> Delete Account\n </Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Are you absolutely sure?</DialogTitle>\n <DialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </DialogDescription>\n </DialogHeader>\n <DialogFooter>\n <DialogClose>\n <Button Variant=\"Button.ButtonVariant.Outline\">Cancel</Button>\n </DialogClose>\n <DialogClose>\n <Button Variant=\"Button.ButtonVariant.Destructive\">Yes, delete account</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n</Dialog>\n\n@code {\n private bool _isOpen;\n}"
|
|
28133
28133
|
},
|
|
28134
28134
|
{
|
|
28135
28135
|
"title": "Prevent Close",
|
|
@@ -28653,7 +28653,7 @@
|
|
|
28653
28653
|
"examples": [
|
|
28654
28654
|
{
|
|
28655
28655
|
"title": "LTR vs RTL",
|
|
28656
|
-
"code": "@* Same markup, two directions. *@\n<DirectionProvider Direction=\"LayoutDirection.Rtl\">\n <Flex Align=\"center\" Gap=\"3\">\n <
|
|
28656
|
+
"code": "@* Same markup, two directions. *@\n<DirectionProvider Direction=\"LayoutDirection.Rtl\">\n <Flex Align=\"center\" Gap=\"3\">\n <SvgGlyph Svg=\"@(Lucide.Info)\" class=\"h-5 w-5 text-primary shrink-0\" />\n <Lumeo.Text Size=\"sm\">Mirrors under RTL.</Lumeo.Text>\n <Button Size=\"Lumeo.Size.Sm\" Class=\"ms-auto\">Action</Button>\n </Flex>\n</DirectionProvider>\n\n@code {\n // LayoutDirection lives in Lumeo.Services.\n}"
|
|
28657
28657
|
},
|
|
28658
28658
|
{
|
|
28659
28659
|
"title": "Wrapping the whole app",
|
|
@@ -28751,11 +28751,11 @@
|
|
|
28751
28751
|
"examples": [
|
|
28752
28752
|
{
|
|
28753
28753
|
"title": "Basic Dock",
|
|
28754
|
-
"code": "<Dock>\n <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Home\">\n <
|
|
28754
|
+
"code": "<Dock>\n <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Home\">\n <SvgGlyph Svg=\"Lucide.House\" class=\"h-6 w-6 text-foreground/80\" />\n </button>\n <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Files\">\n <SvgGlyph Svg=\"Lucide.FolderOpen\" class=\"h-6 w-6 text-foreground/80\" />\n </button>\n <button class=\"w-12 h-12 rounded-xl bg-card border border-border/40 flex items-center justify-center\" title=\"Mail\">\n <SvgGlyph Svg=\"Lucide.Mail\" class=\"h-6 w-6 text-foreground/80\" />\n </button>\n</Dock>"
|
|
28755
28755
|
},
|
|
28756
28756
|
{
|
|
28757
28757
|
"title": "Custom Scale & Radius",
|
|
28758
|
-
"code": "<Dock MaxScale=\"2.2\" MagnifyRadius=\"120\">\n <!-- dock items with
|
|
28758
|
+
"code": "<Dock MaxScale=\"2.2\" MagnifyRadius=\"120\">\n <!-- dock items with SvgGlyph icons -->\n</Dock>"
|
|
28759
28759
|
}
|
|
28760
28760
|
],
|
|
28761
28761
|
"subComponents": {},
|
|
@@ -28887,7 +28887,7 @@
|
|
|
28887
28887
|
},
|
|
28888
28888
|
{
|
|
28889
28889
|
"title": "Filters Drawer",
|
|
28890
|
-
"code": "<Drawer @bind-Open=\"_isFiltersOpen\">\n <DrawerTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <
|
|
28890
|
+
"code": "<Drawer @bind-Open=\"_isFiltersOpen\">\n <DrawerTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\">\n <SvgGlyph Svg=\"@(Lucide.Settings)\" class=\"h-4 w-4\" /> Filters\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>Filter Results</DrawerTitle>\n <DrawerDescription>Narrow down your search.</DrawerDescription>\n </DrawerHeader>\n <Stack Gap=\"4\" Class=\"p-4\">\n <Select @bind-Value=\"_filterCategory\">\n <SelectTrigger><span>@(_filterCategory ?? \"All categories\")</span></SelectTrigger>\n <SelectContent>\n <SelectItem Value=\"electronics\">Electronics</SelectItem>\n <SelectItem Value=\"clothing\">Clothing</SelectItem>\n </SelectContent>\n </Select>\n </Stack>\n <DrawerFooter>\n <DrawerClose><Button Class=\"w-full\">Apply Filters</Button></DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n</Drawer>"
|
|
28891
28891
|
},
|
|
28892
28892
|
{
|
|
28893
28893
|
"title": "Prevent Close",
|
|
@@ -30620,7 +30620,7 @@
|
|
|
30620
30620
|
"examples": [
|
|
30621
30621
|
{
|
|
30622
30622
|
"title": "Basic Feature Grid",
|
|
30623
|
-
"code": "<FeatureGrid Title=\"Everything in the box\"\n Subtitle=\"A focused set of primitives that compose into anything.\">\n <FeatureItem Title=\"Theming\" Description=\"Every color is a CSS variable.\">\n <IconContent><
|
|
30623
|
+
"code": "<FeatureGrid Title=\"Everything in the box\"\n Subtitle=\"A focused set of primitives that compose into anything.\">\n <FeatureItem Title=\"Theming\" Description=\"Every color is a CSS variable.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Palette)\" class=\"h-5 w-5\" /></IconContent>\n </FeatureItem>\n <FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles and keyboard navigation.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Accessibility)\" class=\"h-5 w-5\" /></IconContent>\n </FeatureItem>\n <FeatureItem Title=\"Density\" Description=\"Flip a panel between compact and spacious.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Rows3)\" class=\"h-5 w-5\" /></IconContent>\n </FeatureItem>\n</FeatureGrid>"
|
|
30624
30624
|
},
|
|
30625
30625
|
{
|
|
30626
30626
|
"title": "Two Columns",
|
|
@@ -30628,7 +30628,7 @@
|
|
|
30628
30628
|
},
|
|
30629
30629
|
{
|
|
30630
30630
|
"title": "Standalone Feature Item",
|
|
30631
|
-
"code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n <IconContent><
|
|
30631
|
+
"code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
|
|
30632
30632
|
}
|
|
30633
30633
|
],
|
|
30634
30634
|
"subComponents": {},
|
|
@@ -30726,7 +30726,7 @@
|
|
|
30726
30726
|
"examples": [
|
|
30727
30727
|
{
|
|
30728
30728
|
"title": "Basic",
|
|
30729
|
-
"code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n <IconContent><
|
|
30729
|
+
"code": "<FeatureItem Title=\"Fast by default\" Description=\"A small CSS bundle keeps your app lean.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n</FeatureItem>"
|
|
30730
30730
|
},
|
|
30731
30731
|
{
|
|
30732
30732
|
"title": "Without an Icon",
|
|
@@ -30734,11 +30734,11 @@
|
|
|
30734
30734
|
},
|
|
30735
30735
|
{
|
|
30736
30736
|
"title": "With Extra Content",
|
|
30737
|
-
"code": "<FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles, keyboard navigation, and focus management built in.\">\n <IconContent><
|
|
30737
|
+
"code": "<FeatureItem Title=\"Accessible\" Description=\"WAI-ARIA roles, keyboard navigation, and focus management built in.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Accessibility)\" class=\"h-5 w-5\" /></IconContent>\n <ChildContent>\n <a href=\"/docs/accessibility\" class=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\">\n Learn more\n <SvgGlyph Svg=\"@(Lucide.ArrowRight)\" class=\"h-4 w-4\" />\n </a>\n </ChildContent>\n</FeatureItem>"
|
|
30738
30738
|
},
|
|
30739
30739
|
{
|
|
30740
30740
|
"title": "In a Feature Grid",
|
|
30741
|
-
"code": "<FeatureGrid Columns=\"2\" Title=\"Composes into a grid\">\n <FeatureItem Title=\"Fast\" Description=\"Small CSS bundle, tree-shakeable.\">\n <IconContent><
|
|
30741
|
+
"code": "<FeatureGrid Columns=\"2\" Title=\"Composes into a grid\">\n <FeatureItem Title=\"Fast\" Description=\"Small CSS bundle, tree-shakeable.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Zap)\" class=\"h-5 w-5\" /></IconContent>\n </FeatureItem>\n <FeatureItem Title=\"Themeable\" Description=\"Every color is a CSS variable.\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Palette)\" class=\"h-5 w-5\" /></IconContent>\n </FeatureItem>\n</FeatureGrid>"
|
|
30742
30742
|
}
|
|
30743
30743
|
],
|
|
30744
30744
|
"subComponents": {},
|
|
@@ -33817,10 +33817,11 @@
|
|
|
33817
33817
|
"name": "Icon",
|
|
33818
33818
|
"category": "Utility",
|
|
33819
33819
|
"subcategory": null,
|
|
33820
|
-
"description": "Icon wrapper — renders Lucide
|
|
33820
|
+
"description": "Icon wrapper — renders the built-in LumeoIcons set (Lucide-derived) or any IconSource natively.",
|
|
33821
33821
|
"nugetPackage": "Lumeo",
|
|
33822
33822
|
"files": [
|
|
33823
|
-
"UI/Icon/Icon.razor"
|
|
33823
|
+
"UI/Icon/Icon.razor",
|
|
33824
|
+
"UI/Icon/SvgGlyph.razor"
|
|
33824
33825
|
],
|
|
33825
33826
|
"namespace": "Lumeo",
|
|
33826
33827
|
"inheritsFrom": null,
|
|
@@ -33830,16 +33831,16 @@
|
|
|
33830
33831
|
"name": "Name",
|
|
33831
33832
|
"type": "string?",
|
|
33832
33833
|
"default": null,
|
|
33833
|
-
"description": "Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (
|
|
33834
|
+
"description": "Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (any IconSource, e.g. from a Lumeo icon pack).",
|
|
33834
33835
|
"isCascading": false,
|
|
33835
33836
|
"captureUnmatched": false,
|
|
33836
33837
|
"isEditorRequired": false
|
|
33837
33838
|
},
|
|
33838
33839
|
{
|
|
33839
33840
|
"name": "Svg",
|
|
33840
|
-
"type": "
|
|
33841
|
+
"type": "IconSource?",
|
|
33841
33842
|
"default": null,
|
|
33842
|
-
"description": "Direct
|
|
33843
|
+
"description": "Direct IconSource reference — takes precedence over Name. Lets consumers supply any vendored icon (e.g. LumeoIcons.Search or an icon-pack member).",
|
|
33843
33844
|
"isCascading": false,
|
|
33844
33845
|
"captureUnmatched": false,
|
|
33845
33846
|
"isEditorRequired": false
|
|
@@ -33853,6 +33854,15 @@
|
|
|
33853
33854
|
"captureUnmatched": false,
|
|
33854
33855
|
"isEditorRequired": false
|
|
33855
33856
|
},
|
|
33857
|
+
{
|
|
33858
|
+
"name": "StrokeWidth",
|
|
33859
|
+
"type": "double?",
|
|
33860
|
+
"default": null,
|
|
33861
|
+
"description": "Overrides the IconSource's stroke width on the rendered svg. Only affects Stroke-style icons (Lucide, Tabler); ignored for Fill sets (Phosphor, Material, Bootstrap) where stroke is not used. When null (default) the icon source's own StrokeWidth is used.",
|
|
33862
|
+
"isCascading": false,
|
|
33863
|
+
"captureUnmatched": false,
|
|
33864
|
+
"isEditorRequired": false
|
|
33865
|
+
},
|
|
33856
33866
|
{
|
|
33857
33867
|
"name": "Title",
|
|
33858
33868
|
"type": "string?",
|
|
@@ -33889,7 +33899,50 @@
|
|
|
33889
33899
|
"--color-foreground"
|
|
33890
33900
|
],
|
|
33891
33901
|
"examples": [],
|
|
33892
|
-
"subComponents": {
|
|
33902
|
+
"subComponents": {
|
|
33903
|
+
"SvgGlyph": {
|
|
33904
|
+
"componentName": "SvgGlyph",
|
|
33905
|
+
"fileName": "SvgGlyph.razor",
|
|
33906
|
+
"namespace": "Lumeo",
|
|
33907
|
+
"inheritsFrom": null,
|
|
33908
|
+
"implements": [],
|
|
33909
|
+
"parameters": [
|
|
33910
|
+
{
|
|
33911
|
+
"name": "Svg",
|
|
33912
|
+
"type": "IconSource",
|
|
33913
|
+
"default": "default!",
|
|
33914
|
+
"description": "The icon to render. Its Content becomes the inner markup and its ViewBox/RenderStyle/ StrokeWidth style the root <svg>.",
|
|
33915
|
+
"isCascading": false,
|
|
33916
|
+
"captureUnmatched": false,
|
|
33917
|
+
"isEditorRequired": true
|
|
33918
|
+
},
|
|
33919
|
+
{
|
|
33920
|
+
"name": "StrokeWidth",
|
|
33921
|
+
"type": "double?",
|
|
33922
|
+
"default": null,
|
|
33923
|
+
"description": "Optional root stroke-width override for Stroke icons. When null (default) the icon's own StrokeWidth is used; ignored for Fill icons.",
|
|
33924
|
+
"isCascading": false,
|
|
33925
|
+
"captureUnmatched": false,
|
|
33926
|
+
"isEditorRequired": false
|
|
33927
|
+
},
|
|
33928
|
+
{
|
|
33929
|
+
"name": "AdditionalAttributes",
|
|
33930
|
+
"type": "Dictionary<string, object>?",
|
|
33931
|
+
"default": null,
|
|
33932
|
+
"description": "Arbitrary attributes (class, aria-*, role, title, …) splatted onto the root <svg>. Sizing is done here via classes (e.g. h-4 w-4), exactly like the icon component it replaces. A consumer-supplied attribute that collides with one this component sets (e.g. fill) wins, because the splat is applied last.",
|
|
33933
|
+
"isCascading": false,
|
|
33934
|
+
"captureUnmatched": true,
|
|
33935
|
+
"isEditorRequired": false
|
|
33936
|
+
}
|
|
33937
|
+
],
|
|
33938
|
+
"events": [],
|
|
33939
|
+
"enums": [],
|
|
33940
|
+
"records": [],
|
|
33941
|
+
"gotchas": [],
|
|
33942
|
+
"parseFailed": false,
|
|
33943
|
+
"parseError": null
|
|
33944
|
+
}
|
|
33945
|
+
},
|
|
33893
33946
|
"a11y": {
|
|
33894
33947
|
"roles": [
|
|
33895
33948
|
"img"
|
|
@@ -35739,7 +35792,7 @@
|
|
|
35739
35792
|
},
|
|
35740
35793
|
{
|
|
35741
35794
|
"title": "With Icon and Sparkline",
|
|
35742
|
-
"code": "<KpiCard Label=\"Page Views\" Value=\"94,210\" Delta=\"5.7\">\n <IconContent>\n <
|
|
35795
|
+
"code": "<KpiCard Label=\"Page Views\" Value=\"94,210\" Delta=\"5.7\">\n <IconContent>\n <SvgGlyph Svg=\"@(Lucide.TrendingUp)\" class=\"h-4 w-4\" />\n </IconContent>\n <SparkContent>\n <Sparkline Data=\"@_viewData\" Class=\"h-10 w-full\" />\n </SparkContent>\n</KpiCard>"
|
|
35743
35796
|
}
|
|
35744
35797
|
],
|
|
35745
35798
|
"subComponents": {},
|
|
@@ -37714,7 +37767,7 @@
|
|
|
37714
37767
|
},
|
|
37715
37768
|
{
|
|
37716
37769
|
"title": "Icons and Disabled Item",
|
|
37717
|
-
"code": "<MegaMenu>\n <MegaMenuItem Label=\"Products\" Icon=\"
|
|
37770
|
+
"code": "<MegaMenu>\n <MegaMenuItem Label=\"Products\" Icon=\"LumeoIcons.Box\">\n <MegaMenuPanel Columns=\"2\">\n <MegaMenuGroup Title=\"Design\">\n <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.Component\" Title=\"Components\" Description=\"Pre-built UI components\" />\n <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.LayoutTemplate\" Title=\"Templates\" Description=\"Starter page templates\" />\n </MegaMenuGroup>\n <MegaMenuGroup Title=\"Development\">\n <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.Terminal\" Title=\"CLI\" Description=\"Command-line tooling\" />\n <MegaMenuLink Href=\"#\" Icon=\"LumeoIcons.BookOpen\" Title=\"API Reference\" Description=\"Complete API docs\" Disabled=\"true\" />\n </MegaMenuGroup>\n </MegaMenuPanel>\n </MegaMenuItem>\n <MegaMenuItem Label=\"Docs\" Icon=\"LumeoIcons.FileText\" Href=\"#\" />\n <MegaMenuItem Label=\"Archived\" Disabled=\"true\" />\n</MegaMenu>"
|
|
37718
37771
|
},
|
|
37719
37772
|
{
|
|
37720
37773
|
"title": "Orientation — interactive",
|
|
@@ -37802,9 +37855,9 @@
|
|
|
37802
37855
|
},
|
|
37803
37856
|
{
|
|
37804
37857
|
"name": "Icon",
|
|
37805
|
-
"type": "
|
|
37858
|
+
"type": "IconSource?",
|
|
37806
37859
|
"default": null,
|
|
37807
|
-
"description":
|
|
37860
|
+
"description": "Optional leading icon. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.Home) or from LumeoIcons.",
|
|
37808
37861
|
"isCascading": false,
|
|
37809
37862
|
"captureUnmatched": false,
|
|
37810
37863
|
"isEditorRequired": false
|
|
@@ -37904,9 +37957,9 @@
|
|
|
37904
37957
|
},
|
|
37905
37958
|
{
|
|
37906
37959
|
"name": "Icon",
|
|
37907
|
-
"type": "
|
|
37960
|
+
"type": "IconSource?",
|
|
37908
37961
|
"default": null,
|
|
37909
|
-
"description":
|
|
37962
|
+
"description": "Optional leading icon. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.Home) or from LumeoIcons.",
|
|
37910
37963
|
"isCascading": false,
|
|
37911
37964
|
"captureUnmatched": false,
|
|
37912
37965
|
"isEditorRequired": false
|
|
@@ -41942,9 +41995,9 @@
|
|
|
41942
41995
|
},
|
|
41943
41996
|
{
|
|
41944
41997
|
"name": "Icon",
|
|
41945
|
-
"type": "
|
|
41998
|
+
"type": "Lumeo.IconSource?",
|
|
41946
41999
|
"default": null,
|
|
41947
|
-
"description":
|
|
42000
|
+
"description": "Optional leading icon shown beside the title. Supply an IconSource from a Lumeo.Icons pack (e.g. Lucide.TriangleAlert) or from LumeoIcons.",
|
|
41948
42001
|
"isCascading": false,
|
|
41949
42002
|
"captureUnmatched": false,
|
|
41950
42003
|
"isEditorRequired": false
|
|
@@ -42959,7 +43012,7 @@
|
|
|
42959
43012
|
},
|
|
42960
43013
|
{
|
|
42961
43014
|
"title": "With Leading and Trailing Content",
|
|
42962
|
-
"code": "<PromptInput @bind-Value=\"_prompt\" OnSend=\"@HandleSend\" Placeholder=\"Message Claude…\">\n <LeadingContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-7 w-7\">\n <
|
|
43015
|
+
"code": "<PromptInput @bind-Value=\"_prompt\" OnSend=\"@HandleSend\" Placeholder=\"Message Claude…\">\n <LeadingContent>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Icon\" Class=\"h-7 w-7\">\n <SvgGlyph Svg=\"@(Lucide.Paperclip)\" class=\"h-4 w-4\" />\n </Button>\n </LeadingContent>\n <TrailingContent>\n <span class=\"text-xs text-muted-foreground\">Shift+Enter for newline</span>\n </TrailingContent>\n</PromptInput>"
|
|
42963
43016
|
}
|
|
42964
43017
|
],
|
|
42965
43018
|
"subComponents": {},
|
|
@@ -45702,7 +45755,7 @@
|
|
|
45702
45755
|
},
|
|
45703
45756
|
{
|
|
45704
45757
|
"title": "Sticky bottom tab bar (realistic example)",
|
|
45705
|
-
"code": "<div class=\"relative h-64 border border-border/40 rounded-md overflow-hidden bg-background\">\n <div class=\"p-4 space-y-2 overflow-y-auto h-full pb-16\">\n <!-- scrollable content -->\n </div>\n <SafeArea Bottom=\"true\" Top=\"false\"\n Class=\"absolute bottom-0 left-0 right-0 bg-card border-t border-border/40\">\n <Flex Justify=\"around\" Class=\"py-3\">\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <
|
|
45758
|
+
"code": "<div class=\"relative h-64 border border-border/40 rounded-md overflow-hidden bg-background\">\n <div class=\"p-4 space-y-2 overflow-y-auto h-full pb-16\">\n <!-- scrollable content -->\n </div>\n <SafeArea Bottom=\"true\" Top=\"false\"\n Class=\"absolute bottom-0 left-0 right-0 bg-card border-t border-border/40\">\n <Flex Justify=\"around\" Class=\"py-3\">\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <SvgGlyph Svg=\"@(Lucide.Bell)\" class=\"h-5 w-5\" />\n </Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <SvgGlyph Svg=\"@(Lucide.Search)\" class=\"h-5 w-5\" />\n </Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\">\n <SvgGlyph Svg=\"@(Lucide.User)\" class=\"h-5 w-5\" />\n </Button>\n </Flex>\n </SafeArea>\n</div>"
|
|
45706
45759
|
}
|
|
45707
45760
|
],
|
|
45708
45761
|
"subComponents": {},
|
|
@@ -48410,11 +48463,11 @@
|
|
|
48410
48463
|
"examples": [
|
|
48411
48464
|
{
|
|
48412
48465
|
"title": "Push (Default)",
|
|
48413
|
-
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\n <SidebarComponent>\n <SidebarHeader>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Platform</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n <IconContent><
|
|
48466
|
+
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\">\n <SidebarComponent>\n <SidebarHeader>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Acme Inc</Lumeo.Text>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Platform</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n <LabelContent><span>Dashboard</span></LabelContent>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n </SidebarContent>\n <SidebarFooter>\n <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>\n </SidebarFooter>\n </SidebarComponent>\n <main class=\"flex-1 p-6\">\n <SidebarTrigger />\n </main>\n</SidebarProvider>"
|
|
48414
48467
|
},
|
|
48415
48468
|
{
|
|
48416
48469
|
"title": "Overlay",
|
|
48417
|
-
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\n <SidebarComponent>\n <SidebarHeader>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n <IconContent><
|
|
48470
|
+
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Overlay\">\n <SidebarComponent>\n <SidebarHeader>\n <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Workspace</Lumeo.Text>\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n <LabelContent><span>Home</span></LabelContent>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n </SidebarContent>\n </SidebarComponent>\n <main class=\"flex-1 p-6\">\n <SidebarTrigger />\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Click backdrop to dismiss.</Lumeo.Text>\n </main>\n</SidebarProvider>"
|
|
48418
48471
|
},
|
|
48419
48472
|
{
|
|
48420
48473
|
"title": "Side — interactive",
|
|
@@ -48422,7 +48475,7 @@
|
|
|
48422
48475
|
},
|
|
48423
48476
|
{
|
|
48424
48477
|
"title": "Icon",
|
|
48425
|
-
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\n <SidebarComponent>\n <SidebarContent>\n <SidebarGroup>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\n <IconContent><
|
|
48478
|
+
"code": "<SidebarProvider @bind-IsCollapsed=\"_isCollapsed\" Variant=\"SidebarProvider.SidebarVariant.Icon\">\n <SidebarComponent>\n <SidebarContent>\n <SidebarGroup>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton Href=\"#\" IsActive=\"true\" Tooltip=\"Home\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.House)\" class=\"h-4 w-4\" /></IconContent>\n <LabelContent><span>Home</span></LabelContent>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n </SidebarContent>\n </SidebarComponent>\n <main class=\"flex-1 p-6\">\n <SidebarTrigger />\n <Lumeo.Text Size=\"sm\" Color=\"muted\">Toggle to expand with labels.</Lumeo.Text>\n </main>\n</SidebarProvider>"
|
|
48426
48479
|
}
|
|
48427
48480
|
],
|
|
48428
48481
|
"subComponents": {
|
|
@@ -53421,7 +53474,7 @@
|
|
|
53421
53474
|
},
|
|
53422
53475
|
{
|
|
53423
53476
|
"title": "Icon reveal",
|
|
53424
|
-
"code": "<Tabs ActiveValue=\"members\" IconReveal Variant=\"Tabs.TabsVariant.Card\">\n <TabsList>\n <TabsTrigger Value=\"members\">\n <IconContent><
|
|
53477
|
+
"code": "<Tabs ActiveValue=\"members\" IconReveal Variant=\"Tabs.TabsVariant.Card\">\n <TabsList>\n <TabsTrigger Value=\"members\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Users)\" class=\"h-4 w-4\" /></IconContent>\n Members\n </TabsTrigger>\n <TabsTrigger Value=\"credentials\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Award)\" class=\"h-4 w-4\" /></IconContent>\n Shared Credentials\n </TabsTrigger>\n @* …more icon tabs… *@\n </TabsList>\n <TabsContent Value=\"members\">Team members and their roles.</TabsContent>\n <TabsContent Value=\"credentials\">Credentials shared with this team.</TabsContent>\n</Tabs>"
|
|
53425
53478
|
},
|
|
53426
53479
|
{
|
|
53427
53480
|
"title": "Notifications",
|
|
@@ -54939,7 +54992,7 @@
|
|
|
54939
54992
|
},
|
|
54940
54993
|
{
|
|
54941
54994
|
"title": "With Icons",
|
|
54942
|
-
"code": "<Timeline>\n <TimelineItem Title=\"Account created\" Time=\"9:00 AM\">\n <IconContent><
|
|
54995
|
+
"code": "<Timeline>\n <TimelineItem Title=\"Account created\" Time=\"9:00 AM\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.UserPlus)\" class=\"h-4 w-4\" /></IconContent>\n </TimelineItem>\n <TimelineItem Title=\"Profile updated\" Time=\"10:30 AM\">\n <IconContent><SvgGlyph Svg=\"@(Lucide.Pencil)\" class=\"h-4 w-4\" /></IconContent>\n </TimelineItem>\n</Timeline>"
|
|
54943
54996
|
},
|
|
54944
54997
|
{
|
|
54945
54998
|
"title": "Alternate Layout",
|
|
@@ -56093,19 +56146,19 @@
|
|
|
56093
56146
|
"examples": [
|
|
56094
56147
|
{
|
|
56095
56148
|
"title": "Default",
|
|
56096
|
-
"code": "<Toggle @bind-Pressed=\"_bold\">\n <
|
|
56149
|
+
"code": "<Toggle @bind-Pressed=\"_bold\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n\n@code {\n private bool _bold;\n}"
|
|
56097
56150
|
},
|
|
56098
56151
|
{
|
|
56099
56152
|
"title": "Variants",
|
|
56100
|
-
"code": "<Toggle @bind-Pressed=\"_pressed1\">\n <
|
|
56153
|
+
"code": "<Toggle @bind-Pressed=\"_pressed1\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Variant=\"Toggle.ToggleVariant.Outline\" @bind-Pressed=\"_pressed2\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n</Toggle>"
|
|
56101
56154
|
},
|
|
56102
56155
|
{
|
|
56103
56156
|
"title": "Sizes",
|
|
56104
|
-
"code": "<Toggle Size=\"Lumeo.Size.Sm\" @bind-Pressed=\"_sm\">\n <
|
|
56157
|
+
"code": "<Toggle Size=\"Lumeo.Size.Sm\" @bind-Pressed=\"_sm\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-3 w-3\" />\n</Toggle>\n<Toggle @bind-Pressed=\"_md\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Size=\"Lumeo.Size.Lg\" @bind-Pressed=\"_lg\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-5 w-5\" />\n</Toggle>"
|
|
56105
56158
|
},
|
|
56106
56159
|
{
|
|
56107
56160
|
"title": "With Text",
|
|
56108
|
-
"code": "<Toggle @bind-Pressed=\"_pressed\">\n <
|
|
56161
|
+
"code": "<Toggle @bind-Pressed=\"_pressed\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n Bold\n</Toggle>"
|
|
56109
56162
|
}
|
|
56110
56163
|
],
|
|
56111
56164
|
"subComponents": {},
|
|
@@ -56279,15 +56332,15 @@
|
|
|
56279
56332
|
"examples": [
|
|
56280
56333
|
{
|
|
56281
56334
|
"title": "Single Selection",
|
|
56282
|
-
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n <ToggleGroupItem Value=\"bold\">\n <
|
|
56335
|
+
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n <ToggleGroupItem Value=\"bold\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"italic\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"underline\">\n <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n</ToggleGroup>"
|
|
56283
56336
|
},
|
|
56284
56337
|
{
|
|
56285
56338
|
"title": "Multiple Selection",
|
|
56286
|
-
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\n <ToggleGroupItem Value=\"bold\">\n <
|
|
56339
|
+
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\n <ToggleGroupItem Value=\"bold\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"italic\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"underline\">\n <SvgGlyph Svg=\"@(Lucide.Underline)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n</ToggleGroup>"
|
|
56287
56340
|
},
|
|
56288
56341
|
{
|
|
56289
56342
|
"title": "Outline Variant",
|
|
56290
|
-
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\n <ToggleGroupItem Value=\"left\">\n <
|
|
56343
|
+
"code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\n <ToggleGroupItem Value=\"left\">\n <SvgGlyph Svg=\"@(Lucide.AlignLeft)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"center\">\n <SvgGlyph Svg=\"@(Lucide.AlignCenter)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n <ToggleGroupItem Value=\"right\">\n <SvgGlyph Svg=\"@(Lucide.AlignRight)\" class=\"h-4 w-4\" />\n </ToggleGroupItem>\n</ToggleGroup>"
|
|
56291
56344
|
},
|
|
56292
56345
|
{
|
|
56293
56346
|
"title": "Sizes",
|
|
@@ -56514,7 +56567,7 @@
|
|
|
56514
56567
|
"examples": [
|
|
56515
56568
|
{
|
|
56516
56569
|
"title": "Basic Toolbar",
|
|
56517
|
-
"code": "<Toolbar>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <
|
|
56570
|
+
"code": "<Toolbar>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n </Button>\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n </Button>\n <ToolbarSeparator />\n <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n <SvgGlyph Svg=\"@(Lucide.AlignLeft)\" class=\"h-4 w-4\" />\n </Button>\n</Toolbar>"
|
|
56518
56571
|
},
|
|
56519
56572
|
{
|
|
56520
56573
|
"title": "With Spacer and Groups",
|
|
@@ -56894,7 +56947,7 @@
|
|
|
56894
56947
|
},
|
|
56895
56948
|
{
|
|
56896
56949
|
"title": "With Icons",
|
|
56897
|
-
"code": "<Tooltip>\n <TooltipTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n <
|
|
56950
|
+
"code": "<Tooltip>\n <TooltipTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n <SvgGlyph Svg=\"@(Lucide.Bold)\" class=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Bold</p>\n </TooltipContent>\n</Tooltip>\n\n<Tooltip>\n <TooltipTrigger>\n <Button Variant=\"Button.ButtonVariant.Outline\" Size=\"Button.ButtonSize.Icon\">\n <SvgGlyph Svg=\"@(Lucide.Italic)\" class=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Italic</p>\n </TooltipContent>\n</Tooltip>"
|
|
56898
56951
|
},
|
|
56899
56952
|
{
|
|
56900
56953
|
"title": "Placement",
|
|
@@ -58393,7 +58446,7 @@
|
|
|
58393
58446
|
"name": "Icon",
|
|
58394
58447
|
"type": "RenderFragment?",
|
|
58395
58448
|
"default": null,
|
|
58396
|
-
"description": "Custom leading icon. Defaults to
|
|
58449
|
+
"description": "Custom leading icon. Defaults to LumeoIcons.Upload.",
|
|
58397
58450
|
"isCascading": false,
|
|
58398
58451
|
"captureUnmatched": false,
|
|
58399
58452
|
"isEditorRequired": false
|
|
@@ -58456,7 +58509,7 @@
|
|
|
58456
58509
|
},
|
|
58457
58510
|
{
|
|
58458
58511
|
"title": "Custom Label and Icon",
|
|
58459
|
-
"code": "<UploadTrigger Variant=\"Button.ButtonVariant.Outline\" OnFilesSelected=\"@HandleFiles\">\n <Icon>\n <
|
|
58512
|
+
"code": "<UploadTrigger Variant=\"Button.ButtonVariant.Outline\" OnFilesSelected=\"@HandleFiles\">\n <Icon>\n <SvgGlyph Svg=\"@(Lucide.Image)\" class=\"h-4 w-4\" />\n </Icon>\n <ChildContent>\n <span>Replace photo</span>\n </ChildContent>\n</UploadTrigger>\n\n<UploadTrigger Size=\"Button.ButtonSize.Icon\" Variant=\"Button.ButtonVariant.Ghost\" OnFilesSelected=\"@HandleFiles\" aria-label=\"Attach file\">\n <Icon>\n <SvgGlyph Svg=\"@(Lucide.Paperclip)\" class=\"h-4 w-4\" />\n </Icon>\n @* Empty ChildContent suppresses the default text label *@\n <ChildContent></ChildContent>\n</UploadTrigger>"
|
|
58460
58513
|
}
|
|
58461
58514
|
],
|
|
58462
58515
|
"subComponents": {},
|