rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-03 01:18:38 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fix/cli-validation
shadcn-ui/apps/v4/public/r/styles/base-nova/toggle-group-example.json
Dominik K. 137b1c12b7 feat(ui): add support for phosphor icons (#9044) 
* 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>
2025-12-17 21:36:46 +04:00

19 lines
14 KiB
JSON
Raw Permalink Blame History

{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toggle-group-example",
"title": "Toggle Group",
"registryDependencies": [
"input",
"select",
"toggle-group",
"example"
],
"files": [
{
"path": "registry/base-nova/examples/toggle-group-example.tsx",
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n return (\n <ExampleWrapper>\n <ToggleGroupBasic />\n <ToggleGroupOutline />\n <ToggleGroupOutlineWithIcons />\n <ToggleGroupSizes />\n <ToggleGroupSpacing />\n <ToggleGroupWithIcons />\n <ToggleGroupFilter />\n <ToggleGroupDateRange />\n <ToggleGroupSort />\n <ToggleGroupWithInputAndSelect />\n <ToggleGroupVertical />\n <ToggleGroupVerticalOutline />\n <ToggleGroupVerticalOutlineWithIcons />\n <ToggleGroupVerticalWithSpacing />\n </ExampleWrapper>\n )\n}\n\nfunction ToggleGroupBasic() {\n return (\n <Example title=\"Basic\">\n <ToggleGroup multiple spacing={1}>\n <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n <IconPlaceholder\n lucide=\"BoldIcon\"\n tabler=\"IconBold\"\n hugeicons=\"TextBoldIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n <IconPlaceholder\n lucide=\"ItalicIcon\"\n tabler=\"IconItalic\"\n hugeicons=\"TextItalicIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n <IconPlaceholder\n lucide=\"UnderlineIcon\"\n tabler=\"IconUnderline\"\n hugeicons=\"TextUnderlineIcon\"\n />\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupOutline() {\n return (\n <Example title=\"Outline\">\n <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n All\n </ToggleGroupItem>\n <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n Missed\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n return (\n <Example title=\"Outline With Icons\">\n <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n <IconPlaceholder\n lucide=\"BoldIcon\"\n tabler=\"IconBold\"\n hugeicons=\"TextBoldIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n <IconPlaceholder\n lucide=\"ItalicIcon\"\n tabler=\"IconItalic\"\n hugeicons=\"TextItalicIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n <IconPlaceholder\n lucide=\"UnderlineIcon\"\n tabler=\"IconUnderline\"\n hugeicons=\"TextUnderlineIcon\"\n />\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupSizes() {\n return (\n <Example title=\"Sizes\">\n <div className=\"flex flex-col gap-4\">\n <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n Top\n </ToggleGroupItem>\n <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n Bottom\n </ToggleGroupItem>\n <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n Left\n </ToggleGroupItem>\n <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n Right\n </ToggleGroupItem>\n </ToggleGroup>\n <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n Top\n </ToggleGroupItem>\n <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n Bottom\n </ToggleGroupItem>\n <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n Left\n </ToggleGroupItem>\n <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n Right\n </ToggleGroupItem>\n </ToggleGroup>\n </div>\n </Example>\n )\n}\n\nfunction ToggleGroupSpacing() {\n return (\n <Example title=\"With Spacing\">\n <ToggleGroup\n size=\"sm\"\n defaultValue={[\"top\"]}\n variant=\"outline\"\n spacing={2}\n >\n <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n Top\n </ToggleGroupItem>\n <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n Bottom\n </ToggleGroupItem>\n <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n Left\n </ToggleGroupItem>\n <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n Right\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupWithIcons() {\n return (\n <Example title=\"With Icons\">\n <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n <ToggleGroupItem\n value=\"star\"\n aria-label=\"Toggle star\"\n className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"StarIcon\"\n tabler=\"IconStar\"\n hugeicons=\"StarIcon\"\n phosphor=\"StarIcon\"\n />\n Star\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"heart\"\n aria-label=\"Toggle heart\"\n className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"HeartIcon\"\n tabler=\"IconHeart\"\n hugeicons=\"FavouriteIcon\"\n phosphor=\"HeartIcon\"\n />\n Heart\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"bookmark\"\n aria-label=\"Toggle bookmark\"\n className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n >\n <IconPlaceholder\n lucide=\"BookmarkIcon\"\n tabler=\"IconBookmark\"\n hugeicons=\"BookmarkIcon\"\n phosphor=\"BookmarkIcon\"\n />\n Bookmark\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupFilter() {\n return (\n <Example title=\"Filter\">\n <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n <ToggleGroupItem value=\"all\" aria-label=\"All\">\n All\n </ToggleGroupItem>\n <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n Active\n </ToggleGroupItem>\n <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n Completed\n </ToggleGroupItem>\n <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n Archived\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupDateRange() {\n return (\n <Example title=\"Date Range\">\n <ToggleGroup\n defaultValue={[\"today\"]}\n variant=\"outline\"\n size=\"sm\"\n spacing={2}\n >\n <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n Today\n </ToggleGroupItem>\n <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n This Week\n </ToggleGroupItem>\n <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n This Month\n </ToggleGroupItem>\n <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n This Year\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupSort() {\n return (\n <Example title=\"Sort\">\n <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n <IconPlaceholder\n lucide=\"ArrowDownIcon\"\n tabler=\"IconArrowDown\"\n hugeicons=\"ArrowDownIcon\"\n phosphor=\"ArrowDownIcon\"\n />\n Newest\n </ToggleGroupItem>\n <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n <IconPlaceholder\n lucide=\"ArrowUpIcon\"\n tabler=\"IconArrowUp\"\n hugeicons=\"ArrowUpIcon\"\n phosphor=\"ArrowUpIcon\"\n />\n Oldest\n </ToggleGroupItem>\n <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"TradeUpIcon\"\n phosphor=\"TrendUpIcon\"\n />\n Popular\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n const items = [\n { label: \"All\", value: \"all\" },\n { label: \"Active\", value: \"active\" },\n { label: \"Archived\", value: \"archived\" },\n ]\n return (\n <Example title=\"With Input and Select\">\n <div className=\"flex items-center gap-2\">\n <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n <Select items={items} defaultValue={items[0]}>\n <SelectTrigger className=\"w-32\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n {items.map((item) => (\n <SelectItem key={item.value} value={item.value}>\n {item.label}\n </SelectItem>\n ))}\n </SelectGroup>\n </SelectContent>\n </Select>\n <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n Grid\n </ToggleGroupItem>\n <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n List\n </ToggleGroupItem>\n </ToggleGroup>\n </div>\n </Example>\n )\n}\n\nfunction ToggleGroupVertical() {\n return (\n <Example title=\"Vertical\">\n <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n <IconPlaceholder\n lucide=\"BoldIcon\"\n tabler=\"IconBold\"\n hugeicons=\"TextBoldIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n <IconPlaceholder\n lucide=\"ItalicIcon\"\n tabler=\"IconItalic\"\n hugeicons=\"TextItalicIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n <IconPlaceholder\n lucide=\"UnderlineIcon\"\n tabler=\"IconUnderline\"\n hugeicons=\"TextUnderlineIcon\"\n />\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupVerticalOutline() {\n return (\n <Example title=\"Vertical Outline\">\n <ToggleGroup\n variant=\"outline\"\n defaultValue={[\"all\"]}\n orientation=\"vertical\"\n size=\"sm\"\n >\n <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n All\n </ToggleGroupItem>\n <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n Active\n </ToggleGroupItem>\n <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n Completed\n </ToggleGroupItem>\n <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n Archived\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n return (\n <Example title=\"Vertical Outline With Icons\">\n <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n <IconPlaceholder\n lucide=\"BoldIcon\"\n tabler=\"IconBold\"\n hugeicons=\"TextBoldIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n <IconPlaceholder\n lucide=\"ItalicIcon\"\n tabler=\"IconItalic\"\n hugeicons=\"TextItalicIcon\"\n />\n </ToggleGroupItem>\n <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n <IconPlaceholder\n lucide=\"UnderlineIcon\"\n tabler=\"IconUnderline\"\n hugeicons=\"TextUnderlineIcon\"\n />\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n return (\n <Example title=\"Vertical With Spacing\">\n <ToggleGroup\n size=\"sm\"\n defaultValue={[\"top\"]}\n variant=\"outline\"\n orientation=\"vertical\"\n spacing={1}\n >\n <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n Top\n </ToggleGroupItem>\n <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n Bottom\n </ToggleGroupItem>\n <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n Left\n </ToggleGroupItem>\n <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n Right\n </ToggleGroupItem>\n </ToggleGroup>\n </Example>\n )\n}\n",
"type": "registry:example"
}
],
"type": "registry:example"
}
Reference in New Issue View Git Blame Copy Permalink