rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-07 14:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
shadcn
2026-01-08 13:13:10 +04:00
parent e003cf74d2
commit b309b1a060
79 changed files with 75 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/v4/public/r/styles/base-lyra/button-group-demo.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-lyra/demo/button-group-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-lyra/demo/button-group-dropdown.tsx",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"!pl-2\" />}\n >\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/button-group-popover.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-lyra/demo/button-group-popover.tsx",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n }\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/combobox-popover.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-lyra/demo/combobox-popover.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n }\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/dialog-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-lyra/demo/dialog-demo.tsx",
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/drawer-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-lyra/demo/drawer-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n Open Drawer\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/drawer-dialog.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-lyra/demo/drawer-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n Edit Profile\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/dropdown-menu-dialog.json
View File

@@ -14,7 +14,7 @@
"files": [
{
"path": "registry/base-lyra/demo/dropdown-menu-dialog.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/input-group-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-lyra/demo/input-group-demo.tsx",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/input-group-tooltip.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-lyra/demo/input-group-tooltip.tsx",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n >\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/item-dropdown.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-lyra/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/sheet-side.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-lyra/demo/sheet-side.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>\n {side}\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-lyra/tooltip-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-lyra/demo/tooltip-demo.tsx",
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>\n Hover\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/button-group-demo.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-maia/demo/button-group-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/button-group-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-maia/demo/button-group-dropdown.tsx",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"!pl-2\" />}\n >\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/button-group-popover.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-maia/demo/button-group-popover.tsx",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n }\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/combobox-popover.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-maia/demo/combobox-popover.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n }\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/dialog-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-maia/demo/dialog-demo.tsx",
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/drawer-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-maia/demo/drawer-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n Open Drawer\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/drawer-dialog.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-maia/demo/drawer-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n Edit Profile\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/dropdown-menu-dialog.json
View File

@@ -14,7 +14,7 @@
"files": [
{
"path": "registry/base-maia/demo/dropdown-menu-dialog.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/input-group-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-maia/demo/input-group-demo.tsx",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/input-group-tooltip.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-maia/demo/input-group-tooltip.tsx",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n >\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/item-dropdown.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-maia/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/sheet-side.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-maia/demo/sheet-side.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>\n {side}\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-maia/tooltip-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-maia/demo/tooltip-demo.tsx",
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>\n Hover\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/button-group-demo.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-mira/demo/button-group-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/button-group-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-mira/demo/button-group-dropdown.tsx",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"!pl-2\" />}\n >\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/button-group-popover.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-mira/demo/button-group-popover.tsx",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n }\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/combobox-popover.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-mira/demo/combobox-popover.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n }\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/dialog-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-mira/demo/dialog-demo.tsx",
"content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/drawer-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-mira/demo/drawer-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n Open Drawer\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/drawer-dialog.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-mira/demo/drawer-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n Edit Profile\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/dropdown-menu-dialog.json
View File

@@ -14,7 +14,7 @@
"files": [
{
"path": "registry/base-mira/demo/dropdown-menu-dialog.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/input-group-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-mira/demo/input-group-demo.tsx",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/input-group-tooltip.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-mira/demo/input-group-tooltip.tsx",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n >\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/item-dropdown.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-mira/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/sheet-side.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-mira/demo/sheet-side.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>\n {side}\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-mira/tooltip-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-mira/demo/tooltip-demo.tsx",
"content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>\n Hover\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/button-group-demo.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-nova/demo/button-group-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/button-group-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-nova/demo/button-group-dropdown.tsx",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"!pl-2\" />}\n >\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/button-group-popover.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-nova/demo/button-group-popover.tsx",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n }\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/combobox-popover.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-nova/demo/combobox-popover.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n }\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/dialog-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-nova/demo/dialog-demo.tsx",
"content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/drawer-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-nova/demo/drawer-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n Open Drawer\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/drawer-dialog.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-nova/demo/drawer-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n Edit Profile\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/dropdown-menu-dialog.json
View File

@@ -14,7 +14,7 @@
"files": [
{
"path": "registry/base-nova/demo/dropdown-menu-dialog.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/input-group-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-nova/demo/input-group-demo.tsx",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/input-group-tooltip.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-nova/demo/input-group-tooltip.tsx",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n >\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/item-dropdown.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-nova/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/sheet-side.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-nova/demo/sheet-side.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>\n {side}\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-nova/tooltip-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-nova/demo/tooltip-demo.tsx",
"content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>\n Hover\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/button-group-demo.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-vega/demo/button-group-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/button-group-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-vega/demo/button-group-dropdown.tsx",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"!pl-2\" />}\n >\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/button-group-popover.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-vega/demo/button-group-popover.tsx",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n }\n >\n <ChevronDownIcon />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/combobox-popover.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/base-vega/demo/combobox-popover.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger\n render={\n <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n }\n >\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/dialog-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-vega/demo/dialog-demo.tsx",
"content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DialogDemo() {\n return (\n <Dialog>\n <form>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-3\">\n <Label htmlFor=\"name-1\">Name</Label>\n <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username-1\">Username</Label>\n <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n </div>\n </div>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </form>\n </Dialog>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/drawer-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-vega/demo/drawer-demo.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n Open Drawer\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/drawer-dialog.json
View File

@@ -12,7 +12,7 @@
"files": [
{
"path": "registry/base-vega/demo/drawer-dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n Edit Profile\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n Cancel\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Edit Profile\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you&apos;re done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-6\", className)}>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-3\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/dropdown-menu-dialog.json
View File

@@ -14,7 +14,7 @@
"files": [
{
"path": "registry/base-vega/demo/dropdown-menu-dialog.tsx",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n const [showNewDialog, setShowNewDialog] = useState(false)\n const [showShareDialog, setShowShareDialog] = useState(false)\n\n return (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger\n render={\n <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n }\n >\n <MoreHorizontalIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-40\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n New File...\n </DropdownMenuItem>\n <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n Share...\n </DropdownMenuItem>\n <DropdownMenuItem disabled>Download</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Create New File</DialogTitle>\n <DialogDescription>\n Provide a name for your new file. Click create when you&apos;re\n done.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"pb-3\">\n <Field>\n <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Create</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Share File</DialogTitle>\n <DialogDescription>\n Anyone with the link will be able to view this file.\n </DialogDescription>\n </DialogHeader>\n <FieldGroup className=\"py-3\">\n <Field>\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"shadcn@vercel.com\"\n autoComplete=\"off\"\n />\n </Field>\n <Field>\n <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n <Textarea\n id=\"message\"\n name=\"message\"\n placeholder=\"Check out this file\"\n />\n </Field>\n </FieldGroup>\n <DialogFooter>\n <DialogClose render={<Button variant=\"outline\" />}>\n Cancel\n </DialogClose>\n <Button type=\"submit\">Send Invite</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/input-group-demo.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-vega/demo/input-group-demo.tsx",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n return (\n <div className=\"grid w-full max-w-sm gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconInfoCircle />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlus />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"rounded-full\"\n size=\"icon-xs\"\n disabled\n >\n <ArrowUpIcon />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"@shadcn\" />\n <InputGroupAddon align=\"inline-end\">\n <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n <IconCheck className=\"size-3\" />\n </div>\n </InputGroupAddon>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/input-group-tooltip.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-vega/demo/input-group-tooltip.tsx",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n >\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n return (\n <div className=\"grid w-full max-w-sm gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Info\"\n size=\"icon-xs\"\n />\n }\n >\n <InfoIcon />\n </TooltipTrigger>\n <TooltipContent>\n <p>Password must be at least 8 characters</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Your email address\" />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n aria-label=\"Help\"\n size=\"icon-xs\"\n />\n }\n >\n <HelpCircle />\n </TooltipTrigger>\n <TooltipContent>\n <p>We&apos;ll use this to send you notifications</p>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Enter API key\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon />}>\n <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n <HelpCircle />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n <p>Click for help with API keys</p>\n </TooltipContent>\n </Tooltip>\n </InputGroup>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/item-dropdown.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-vega/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n >\n Select <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/sheet-side.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/base-vega/demo/sheet-side.tsx",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n return (\n <div className=\"grid grid-cols-2 gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger render={<Button variant=\"outline\" />}>\n {side}\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you&apos;re\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose render={<Button type=\"submit\" />}>\n Save changes\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/base-vega/tooltip-demo.json
View File

@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-vega/demo/tooltip-demo.tsx",
"content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport function TooltipDemo() {\n return (\n <Tooltip>\n <TooltipTrigger render={<Button variant=\"outline\" />}>\n Hover\n </TooltipTrigger>\n <TooltipContent>\n <p>Add to library</p>\n </TooltipContent>\n </Tooltip>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-lyra/button-group-select.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/radix-lyra/demo/button-group-select.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-lyra/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-lyra/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">\n {currency.label}\n </span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-lyra/item-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/radix-lyra/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-maia/button-group-select.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/radix-maia/demo/button-group-select.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-maia/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-maia/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">\n {currency.label}\n </span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-maia/item-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/radix-maia/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-mira/button-group-select.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/radix-mira/demo/button-group-select.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-mira/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-mira/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">\n {currency.label}\n </span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-mira/item-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/radix-mira/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-nova/button-group-select.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/radix-nova/demo/button-group-select.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-nova/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-nova/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">\n {currency.label}\n </span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-nova/item-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/radix-nova/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-vega/button-group-select.json
View File

@@ -11,7 +11,7 @@
"files": [
{
"path": "registry/radix-vega/demo/button-group-select.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-vega/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/radix-vega/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n <SelectGroup>\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">\n {currency.label}\n </span>\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/public/r/styles/radix-vega/item-dropdown.json
View File

@@ -10,7 +10,7 @@
"files": [
{
"path": "registry/radix-vega/demo/item-dropdown.tsx",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\n\nconst people = [\n {\n username: \"shadcn\",\n avatar: \"https://github.com/shadcn.png\",\n email: \"shadcn@vercel.com\",\n },\n {\n username: \"maxleiter\",\n avatar: \"https://github.com/maxleiter.png\",\n email: \"maxleiter@vercel.com\",\n },\n {\n username: \"evilrabbit\",\n avatar: \"https://github.com/evilrabbit.png\",\n email: \"evilrabbit@vercel.com\",\n },\n]\n\nexport function ItemDropdown() {\n return (\n <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n Select <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n <DropdownMenuGroup>\n {people.map((person) => (\n <DropdownMenuItem key={person.username} className=\"p-0\">\n <Item size=\"sm\" className=\"w-full p-2\">\n <ItemMedia>\n <Avatar className=\"size-8\">\n <AvatarImage src={person.avatar} className=\"grayscale\" />\n <AvatarFallback>\n {person.username.charAt(0)}\n </AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0.5\">\n <ItemTitle>{person.username}</ItemTitle>\n <ItemDescription>{person.email}</ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
"type": "registry:internal"
}
],

2
apps/v4/registry/base-nova/demo/drawer-demo.tsx
View File

@@ -69,7 +69,6 @@ export function DrawerDemo() {
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Open Drawer</Button>
Open Drawer
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
@@ -128,7 +127,6 @@ export function DrawerDemo() {
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
Cancel
</DrawerClose>
</DrawerFooter>
</div>

2
apps/v4/registry/base-nova/demo/drawer-dialog.tsx
View File

@@ -54,7 +54,6 @@ export function DrawerDialogDemo() {
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button variant="outline">Edit Profile</Button>
Edit Profile
</DrawerTrigger>
<DrawerContent>
<DrawerHeader className="text-left">
@@ -67,7 +66,6 @@ export function DrawerDialogDemo() {
<DrawerFooter className="pt-2">
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
Cancel
</DrawerClose>
</DrawerFooter>
</DrawerContent>

2
apps/v4/registry/bases/base/demo/drawer-demo.tsx
View File

@@ -69,7 +69,6 @@ export function DrawerDemo() {
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Open Drawer</Button>
Open Drawer
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
@@ -128,7 +127,6 @@ export function DrawerDemo() {
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
Cancel
</DrawerClose>
</DrawerFooter>
</div>

2
apps/v4/registry/bases/base/demo/drawer-dialog.tsx
View File

@@ -54,7 +54,6 @@ export function DrawerDialogDemo() {
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button variant="outline">Edit Profile</Button>
Edit Profile
</DrawerTrigger>
<DrawerContent>
<DrawerHeader className="text-left">
@@ -67,7 +66,6 @@ export function DrawerDialogDemo() {
<DrawerFooter className="pt-2">
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
Cancel
</DrawerClose>
</DrawerFooter>
</DrawerContent>