mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-02 17:08:39 +00:00
137b1c12b7
* feat: add phosphor icons to base ui * feat_ add phosphor to blocks * feat: add phosphor to radix blocks * feat: add phosphor to radix ui * feat: add phosphor to radix example * feat: add missing phosphor icons * fix: rename broken icons * chore: format files * fix: add missing phosphor icons * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>
26 lines
22 KiB
JSON
26 lines
22 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "button-group-example",
|
|
"title": "Button Group",
|
|
"registryDependencies": [
|
|
"button",
|
|
"button-group",
|
|
"dropdown-menu",
|
|
"field",
|
|
"input",
|
|
"input-group",
|
|
"label",
|
|
"popover",
|
|
"select",
|
|
"tooltip",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/button-group-example.tsx",
|
|
"content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n return (\n <ExampleWrapper>\n <ButtonGroupBasic />\n <ButtonGroupWithInput />\n <ButtonGroupWithText />\n <ButtonGroupWithDropdown />\n <ButtonGroupWithSelect />\n <ButtonGroupWithIcons />\n <ButtonGroupWithInputGroup />\n <ButtonGroupWithFields />\n <ButtonGroupWithLike />\n <ButtonGroupWithSelectAndInput />\n <ButtonGroupNested />\n <ButtonGroupPagination />\n <ButtonGroupPaginationSplit />\n <ButtonGroupNavigation />\n <ButtonGroupTextAlignment />\n <ButtonGroupVertical />\n <ButtonGroupVerticalNested />\n </ExampleWrapper>\n )\n}\n\nfunction ButtonGroupBasic() {\n return (\n <Example title=\"Basic\">\n <div className=\"flex flex-col gap-4\">\n <ButtonGroup>\n <Button variant=\"outline\">Button</Button>\n <Button variant=\"outline\">Another Button</Button>\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupWithInput() {\n return (\n <Example title=\"With Input\">\n <div className=\"flex flex-col gap-4\">\n <ButtonGroup>\n <Button variant=\"outline\">Button</Button>\n <Input placeholder=\"Type something here...\" />\n </ButtonGroup>\n <ButtonGroup>\n <Input placeholder=\"Type something here...\" />\n <Button variant=\"outline\">Button</Button>\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupWithText() {\n return (\n <Example title=\"With Text\">\n <div className=\"flex flex-col gap-4\">\n <ButtonGroup>\n <ButtonGroupText>Text</ButtonGroupText>\n <Button variant=\"outline\">Another Button</Button>\n </ButtonGroup>\n <ButtonGroup>\n <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n GPU Size\n </ButtonGroupText>\n <Input id=\"input-text\" placeholder=\"Type something here...\" />\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupWithDropdown() {\n return (\n <Example title=\"With Dropdown\">\n <div className=\"flex flex-col gap-4\">\n <ButtonGroup>\n <Button variant=\"outline\">Update</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" />}\n >\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem>Disable</DropdownMenuItem>\n <DropdownMenuItem variant=\"destructive\">\n Uninstall\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" />}\n >\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-50\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"VolumeX\"\n tabler=\"IconVolume\"\n hugeicons=\"VolumeOffIcon\"\n phosphor=\"SpeakerSlashIcon\"\n />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"AlertTriangleIcon\"\n tabler=\"IconAlertTriangle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"WarningIcon\"\n />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserRoundXIcon\"\n tabler=\"IconUserX\"\n hugeicons=\"UserRemove01Icon\"\n phosphor=\"UserMinusIcon\"\n />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"Share03Icon\"\n phosphor=\"ShareIcon\"\n />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"Delete02Icon\"\n phosphor=\"TrashIcon\"\n />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nconst currencyItems = [\n { label: \"$\", value: \"$\" },\n { label: \"€\", value: \"€\" },\n { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n return (\n <Example title=\"With Select\">\n <Field>\n <Label htmlFor=\"amount\">Amount</Label>\n <ButtonGroup>\n <Select items={currencyItems} defaultValue={currencyItems[0]}>\n <SelectTrigger>\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n {currencyItems.map((item) => (\n <SelectItem key={item.value} value={item}>\n {item.label}\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input placeholder=\"Enter amount to send\" />\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n </ButtonGroup>\n </Field>\n </Example>\n )\n}\n\nfunction ButtonGroupWithIcons() {\n return (\n <Example title=\"With Icons\">\n <div className=\"flex flex-col gap-4\">\n <ButtonGroup>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"FlipHorizontalIcon\"\n tabler=\"IconFlipHorizontal\"\n hugeicons=\"FlipHorizontalIcon\"\n phosphor=\"ArrowsHorizontalIcon\"\n />\n </Button>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"FlipVerticalIcon\"\n tabler=\"IconFlipVertical\"\n hugeicons=\"FlipVerticalIcon\"\n phosphor=\"ArrowsVerticalIcon\"\n />\n </Button>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"RotateCwIcon\"\n tabler=\"IconRotateClockwise2\"\n hugeicons=\"Rotate01Icon\"\n phosphor=\"ArrowClockwiseIcon\"\n />\n </Button>\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupWithInputGroup() {\n return (\n <Example title=\"With Input Group\">\n <div className=\"flex flex-col gap-4\">\n <InputGroup>\n <InputGroupInput placeholder=\"Type to search...\" />\n <InputGroupAddon\n align=\"inline-start\"\n className=\"text-muted-foreground\"\n >\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"Search01Icon\"\n phosphor=\"MagnifyingGlassIcon\"\n />\n </InputGroupAddon>\n </InputGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupWithFields() {\n return (\n <Example title=\"With Fields\">\n <FieldGroup className=\"grid grid-cols-3 gap-4\">\n <Field className=\"col-span-2\">\n <Label htmlFor=\"width\">Width</Label>\n <ButtonGroup>\n <InputGroup>\n <InputGroupInput id=\"width\" />\n <InputGroupAddon className=\"text-muted-foreground\">\n W\n </InputGroupAddon>\n <InputGroupAddon\n align=\"inline-end\"\n className=\"text-muted-foreground\"\n >\n px\n </InputGroupAddon>\n </InputGroup>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n />\n </Button>\n </ButtonGroup>\n </Field>\n </FieldGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupWithLike() {\n return (\n <Example title=\"With Like\">\n <ButtonGroup>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"HeartIcon\"\n tabler=\"IconBell\"\n hugeicons=\"Notification02Icon\"\n phosphor=\"HeartIcon\"\n data-icon=\"inline-start\"\n />{\" \"}\n Like\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"w-12\"\n render={<span />}\n nativeButton={false}\n >\n 1.2K\n </Button>\n </ButtonGroup>\n </Example>\n )\n}\n\nconst durationItems = [\n { label: \"Hours\", value: \"hours\" },\n { label: \"Days\", value: \"days\" },\n { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n return (\n <Example title=\"With Select and Input\">\n <ButtonGroup>\n <Select items={durationItems} defaultValue={durationItems[0]}>\n <SelectTrigger id=\"duration\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent align=\"start\">\n <SelectGroup>\n {durationItems.map((item) => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <Input />\n </ButtonGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupNested() {\n return (\n <Example title=\"Nested\">\n <ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"Send a message...\" />\n <Tooltip>\n <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n <IconPlaceholder\n lucide=\"AudioLinesIcon\"\n tabler=\"IconHeadphones\"\n hugeicons=\"AudioWave01Icon\"\n phosphor=\"MicrophoneIcon\"\n />\n </TooltipTrigger>\n <TooltipContent>Voice Mode</TooltipContent>\n </Tooltip>\n </InputGroup>\n </ButtonGroup>\n </ButtonGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupPagination() {\n return (\n <Example title=\"Pagination\">\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft02Icon\"\n phosphor=\"ArrowLeftIcon\"\n data-icon=\"inline-start\"\n />\n Previous\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 1\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 2\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 3\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 4\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 5\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Next\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Button>\n </ButtonGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupPaginationSplit() {\n return (\n <Example title=\"Pagination Split\">\n <ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n 1\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 2\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 3\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 4\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 5\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupNavigation() {\n return (\n <Example title=\"Navigation\">\n <ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n />\n </Button>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup aria-label=\"Single navigation button\">\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n </Example>\n )\n}\n\nfunction ButtonGroupTextAlignment() {\n return (\n <Example title=\"Text Alignment\">\n <Field>\n <Label id=\"alignment-label\">Text Alignment</Label>\n <ButtonGroup aria-labelledby=\"alignment-label\">\n <Button variant=\"outline\" size=\"sm\">\n Left\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Center\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Right\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Justify\n </Button>\n </ButtonGroup>\n </Field>\n </Example>\n )\n}\n\nfunction ButtonGroupVertical() {\n return (\n <Example title=\"Vertical\">\n <div className=\"flex gap-6\">\n <ButtonGroup\n orientation=\"vertical\"\n aria-label=\"Media controls\"\n className=\"h-fit\"\n >\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n />\n </Button>\n </ButtonGroup>\n </div>\n </Example>\n )\n}\n\nfunction ButtonGroupVerticalNested() {\n return (\n <Example title=\"Vertical Nested\">\n <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n <ButtonGroup orientation=\"vertical\">\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"Search01Icon\"\n phosphor=\"MagnifyingGlassIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"Share03Icon\"\n phosphor=\"ShareIcon\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup orientation=\"vertical\">\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"FlipHorizontalIcon\"\n tabler=\"IconFlipHorizontal\"\n hugeicons=\"FlipHorizontalIcon\"\n phosphor=\"ArrowsHorizontalIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"FlipVerticalIcon\"\n tabler=\"IconFlipVertical\"\n hugeicons=\"FlipVerticalIcon\"\n phosphor=\"ArrowsVerticalIcon\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"RotateCwIcon\"\n tabler=\"IconRotateClockwise2\"\n hugeicons=\"Rotate01Icon\"\n phosphor=\"ArrowClockwiseIcon\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"Delete02Icon\"\n phosphor=\"TrashIcon\"\n />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |