mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-26 22:26:05 +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>
471 lines
14 KiB
TypeScript
471 lines
14 KiB
TypeScript
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import { Input } from "@/registry/bases/base/ui/input"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/base/ui/select"
|
|
import {
|
|
ToggleGroup,
|
|
ToggleGroupItem,
|
|
} from "@/registry/bases/base/ui/toggle-group"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function ToggleGroupExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<ToggleGroupBasic />
|
|
<ToggleGroupOutline />
|
|
<ToggleGroupOutlineWithIcons />
|
|
<ToggleGroupSizes />
|
|
<ToggleGroupSpacing />
|
|
<ToggleGroupWithIcons />
|
|
<ToggleGroupFilter />
|
|
<ToggleGroupDateRange />
|
|
<ToggleGroupSort />
|
|
<ToggleGroupWithInputAndSelect />
|
|
<ToggleGroupVertical />
|
|
<ToggleGroupVerticalOutline />
|
|
<ToggleGroupVerticalOutlineWithIcons />
|
|
<ToggleGroupVerticalWithSpacing />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<ToggleGroup multiple spacing={1}>
|
|
<ToggleGroupItem value="bold" aria-label="Toggle bold">
|
|
<IconPlaceholder
|
|
lucide="BoldIcon"
|
|
tabler="IconBold"
|
|
hugeicons="TextBoldIcon"
|
|
phosphor="TextBIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Toggle italic">
|
|
<IconPlaceholder
|
|
lucide="ItalicIcon"
|
|
tabler="IconItalic"
|
|
hugeicons="TextItalicIcon"
|
|
phosphor="TextItalicIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="underline" aria-label="Toggle underline">
|
|
<IconPlaceholder
|
|
lucide="UnderlineIcon"
|
|
tabler="IconUnderline"
|
|
hugeicons="TextUnderlineIcon"
|
|
phosphor="TextUnderlineIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupOutline() {
|
|
return (
|
|
<Example title="Outline">
|
|
<ToggleGroup variant="outline" defaultValue={["all"]}>
|
|
<ToggleGroupItem value="all" aria-label="Toggle all">
|
|
All
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="missed" aria-label="Toggle missed">
|
|
Missed
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupOutlineWithIcons() {
|
|
return (
|
|
<Example title="Outline With Icons">
|
|
<ToggleGroup variant="outline" multiple size="sm">
|
|
<ToggleGroupItem value="bold" aria-label="Toggle bold">
|
|
<IconPlaceholder
|
|
lucide="BoldIcon"
|
|
tabler="IconBold"
|
|
hugeicons="TextBoldIcon"
|
|
phosphor="TextBIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Toggle italic">
|
|
<IconPlaceholder
|
|
lucide="ItalicIcon"
|
|
tabler="IconItalic"
|
|
hugeicons="TextItalicIcon"
|
|
phosphor="TextItalicIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="underline" aria-label="Toggle underline">
|
|
<IconPlaceholder
|
|
lucide="UnderlineIcon"
|
|
tabler="IconUnderline"
|
|
hugeicons="TextUnderlineIcon"
|
|
phosphor="TextUnderlineIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupSizes() {
|
|
return (
|
|
<Example title="Sizes">
|
|
<div className="flex flex-col gap-4">
|
|
<ToggleGroup size="sm" defaultValue={["top"]} variant="outline">
|
|
<ToggleGroupItem value="top" aria-label="Toggle top">
|
|
Top
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
|
|
Bottom
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="left" aria-label="Toggle left">
|
|
Left
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="Toggle right">
|
|
Right
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<ToggleGroup defaultValue={["top"]} variant="outline">
|
|
<ToggleGroupItem value="top" aria-label="Toggle top">
|
|
Top
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
|
|
Bottom
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="left" aria-label="Toggle left">
|
|
Left
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="Toggle right">
|
|
Right
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupSpacing() {
|
|
return (
|
|
<Example title="With Spacing">
|
|
<ToggleGroup
|
|
size="sm"
|
|
defaultValue={["top"]}
|
|
variant="outline"
|
|
spacing={2}
|
|
>
|
|
<ToggleGroupItem value="top" aria-label="Toggle top">
|
|
Top
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
|
|
Bottom
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="left" aria-label="Toggle left">
|
|
Left
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="Toggle right">
|
|
Right
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<ToggleGroup multiple variant="outline" spacing={2} size="sm">
|
|
<ToggleGroupItem
|
|
value="star"
|
|
aria-label="Toggle star"
|
|
className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
|
|
>
|
|
<IconPlaceholder
|
|
lucide="StarIcon"
|
|
tabler="IconStar"
|
|
hugeicons="StarIcon"
|
|
phosphor="StarIcon"
|
|
/>
|
|
Star
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="heart"
|
|
aria-label="Toggle heart"
|
|
className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
|
|
>
|
|
<IconPlaceholder
|
|
lucide="HeartIcon"
|
|
tabler="IconHeart"
|
|
hugeicons="FavouriteIcon"
|
|
phosphor="HeartIcon"
|
|
/>
|
|
Heart
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="bookmark"
|
|
aria-label="Toggle bookmark"
|
|
className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
|
|
>
|
|
<IconPlaceholder
|
|
lucide="BookmarkIcon"
|
|
tabler="IconBookmark"
|
|
hugeicons="BookmarkIcon"
|
|
phosphor="BookmarkIcon"
|
|
/>
|
|
Bookmark
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupFilter() {
|
|
return (
|
|
<Example title="Filter">
|
|
<ToggleGroup defaultValue={["all"]} variant="outline" size="sm">
|
|
<ToggleGroupItem value="all" aria-label="All">
|
|
All
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="active" aria-label="Active">
|
|
Active
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="completed" aria-label="Completed">
|
|
Completed
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="archived" aria-label="Archived">
|
|
Archived
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupDateRange() {
|
|
return (
|
|
<Example title="Date Range">
|
|
<ToggleGroup
|
|
defaultValue={["today"]}
|
|
variant="outline"
|
|
size="sm"
|
|
spacing={2}
|
|
>
|
|
<ToggleGroupItem value="today" aria-label="Today">
|
|
Today
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="week" aria-label="This Week">
|
|
This Week
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="month" aria-label="This Month">
|
|
This Month
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="year" aria-label="This Year">
|
|
This Year
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupSort() {
|
|
return (
|
|
<Example title="Sort">
|
|
<ToggleGroup defaultValue={["newest"]} variant="outline" size="sm">
|
|
<ToggleGroupItem value="newest" aria-label="Newest">
|
|
<IconPlaceholder
|
|
lucide="ArrowDownIcon"
|
|
tabler="IconArrowDown"
|
|
hugeicons="ArrowDownIcon"
|
|
phosphor="ArrowDownIcon"
|
|
/>
|
|
Newest
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="oldest" aria-label="Oldest">
|
|
<IconPlaceholder
|
|
lucide="ArrowUpIcon"
|
|
tabler="IconArrowUp"
|
|
hugeicons="ArrowUpIcon"
|
|
phosphor="ArrowUpIcon"
|
|
/>
|
|
Oldest
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="popular" aria-label="Popular">
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="TradeUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
/>
|
|
Popular
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupWithInputAndSelect() {
|
|
const items = [
|
|
{ label: "All", value: "all" },
|
|
{ label: "Active", value: "active" },
|
|
{ label: "Archived", value: "archived" },
|
|
]
|
|
return (
|
|
<Example title="With Input and Select">
|
|
<div className="flex items-center gap-2">
|
|
<Input type="search" placeholder="Search..." className="flex-1" />
|
|
<Select items={items} defaultValue={items[0]}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{items.map((item) => (
|
|
<SelectItem key={item.value} value={item.value}>
|
|
{item.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<ToggleGroup defaultValue={["grid"]} variant="outline">
|
|
<ToggleGroupItem value="grid" aria-label="Grid view">
|
|
Grid
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="list" aria-label="List view">
|
|
List
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupVertical() {
|
|
return (
|
|
<Example title="Vertical">
|
|
<ToggleGroup multiple orientation="vertical" spacing={1}>
|
|
<ToggleGroupItem value="bold" aria-label="Toggle bold">
|
|
<IconPlaceholder
|
|
lucide="BoldIcon"
|
|
tabler="IconBold"
|
|
hugeicons="TextBoldIcon"
|
|
phosphor="TextBIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Toggle italic">
|
|
<IconPlaceholder
|
|
lucide="ItalicIcon"
|
|
tabler="IconItalic"
|
|
hugeicons="TextItalicIcon"
|
|
phosphor="TextItalicIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="underline" aria-label="Toggle underline">
|
|
<IconPlaceholder
|
|
lucide="UnderlineIcon"
|
|
tabler="IconUnderline"
|
|
hugeicons="TextUnderlineIcon"
|
|
phosphor="TextUnderlineIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupVerticalOutline() {
|
|
return (
|
|
<Example title="Vertical Outline">
|
|
<ToggleGroup
|
|
variant="outline"
|
|
defaultValue={["all"]}
|
|
orientation="vertical"
|
|
size="sm"
|
|
>
|
|
<ToggleGroupItem value="all" aria-label="Toggle all">
|
|
All
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="active" aria-label="Toggle active">
|
|
Active
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="completed" aria-label="Toggle completed">
|
|
Completed
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="archived" aria-label="Toggle archived">
|
|
Archived
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupVerticalOutlineWithIcons() {
|
|
return (
|
|
<Example title="Vertical Outline With Icons">
|
|
<ToggleGroup variant="outline" multiple orientation="vertical" size="sm">
|
|
<ToggleGroupItem value="bold" aria-label="Toggle bold">
|
|
<IconPlaceholder
|
|
lucide="BoldIcon"
|
|
tabler="IconBold"
|
|
hugeicons="TextBoldIcon"
|
|
phosphor="TextBIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Toggle italic">
|
|
<IconPlaceholder
|
|
lucide="ItalicIcon"
|
|
tabler="IconItalic"
|
|
hugeicons="TextItalicIcon"
|
|
phosphor="TextItalicIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="underline" aria-label="Toggle underline">
|
|
<IconPlaceholder
|
|
lucide="UnderlineIcon"
|
|
tabler="IconUnderline"
|
|
hugeicons="TextUnderlineIcon"
|
|
phosphor="TextUnderlineIcon"
|
|
/>
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ToggleGroupVerticalWithSpacing() {
|
|
return (
|
|
<Example title="Vertical With Spacing">
|
|
<ToggleGroup
|
|
size="sm"
|
|
defaultValue={["top"]}
|
|
variant="outline"
|
|
orientation="vertical"
|
|
spacing={1}
|
|
>
|
|
<ToggleGroupItem value="top" aria-label="Toggle top">
|
|
Top
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
|
|
Bottom
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="left" aria-label="Toggle left">
|
|
Left
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="Toggle right">
|
|
Right
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Example>
|
|
)
|
|
}
|