mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 22:18: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>
547 lines
16 KiB
TypeScript
547 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/radix/components/example"
|
|
import { Button } from "@/registry/bases/radix/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/registry/bases/radix/ui/dialog"
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldError,
|
|
FieldLabel,
|
|
} from "@/registry/bases/radix/ui/field"
|
|
import { Input } from "@/registry/bases/radix/ui/input"
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemTitle,
|
|
} from "@/registry/bases/radix/ui/item"
|
|
import {
|
|
NativeSelect,
|
|
NativeSelectOption,
|
|
} from "@/registry/bases/radix/ui/native-select"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectSeparator,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/bases/radix/ui/select"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function SelectExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<SelectBasic />
|
|
<SelectWithIcons />
|
|
<SelectWithGroups />
|
|
<SelectLargeList />
|
|
<SelectSizes />
|
|
<SelectPlan />
|
|
<SelectWithButton />
|
|
<SelectItemAligned />
|
|
<SelectWithField />
|
|
<SelectInvalid />
|
|
<SelectInline />
|
|
<SelectDisabled />
|
|
<SelectInDialog />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function SelectBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes" disabled>
|
|
Grapes
|
|
</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<div className="flex flex-col gap-4">
|
|
<Select>
|
|
<SelectTrigger size="sm">
|
|
<SelectValue
|
|
placeholder={
|
|
<>
|
|
<IconPlaceholder
|
|
lucide="ChartLineIcon"
|
|
tabler="IconChartLine"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartLineIcon"
|
|
/>
|
|
Chart Type
|
|
</>
|
|
}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="line">
|
|
<IconPlaceholder
|
|
lucide="ChartLineIcon"
|
|
tabler="IconChartLine"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartBarIcon"
|
|
/>
|
|
Line
|
|
</SelectItem>
|
|
<SelectItem value="bar">
|
|
<IconPlaceholder
|
|
lucide="ChartBarIcon"
|
|
tabler="IconChartBar"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartBarIcon"
|
|
/>
|
|
Bar
|
|
</SelectItem>
|
|
<SelectItem value="pie">
|
|
<IconPlaceholder
|
|
lucide="ChartPieIcon"
|
|
tabler="IconChartPie"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartPieIcon"
|
|
/>
|
|
Pie
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select>
|
|
<SelectTrigger size="default">
|
|
<SelectValue
|
|
placeholder={
|
|
<>
|
|
<IconPlaceholder
|
|
lucide="ChartLineIcon"
|
|
tabler="IconChartLine"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartLineIcon"
|
|
/>
|
|
Chart Type
|
|
</>
|
|
}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="line">
|
|
<IconPlaceholder
|
|
lucide="ChartLineIcon"
|
|
tabler="IconChartLine"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartLineIcon"
|
|
/>
|
|
Line
|
|
</SelectItem>
|
|
<SelectItem value="bar">
|
|
<IconPlaceholder
|
|
lucide="ChartBarIcon"
|
|
tabler="IconChartBar"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartBarIcon"
|
|
/>
|
|
Bar
|
|
</SelectItem>
|
|
<SelectItem value="pie">
|
|
<IconPlaceholder
|
|
lucide="ChartPieIcon"
|
|
tabler="IconChartPie"
|
|
hugeicons="Chart03Icon"
|
|
phosphor="ChartPieIcon"
|
|
/>
|
|
Pie
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectWithGroups() {
|
|
return (
|
|
<Example title="With Groups & Labels">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Fruits</SelectLabel>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
<SelectSeparator />
|
|
<SelectGroup>
|
|
<SelectLabel>Vegetables</SelectLabel>
|
|
<SelectItem value="carrot">Carrot</SelectItem>
|
|
<SelectItem value="broccoli">Broccoli</SelectItem>
|
|
<SelectItem value="spinach">Spinach</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectLargeList() {
|
|
return (
|
|
<Example title="Large List">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select an item" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{Array.from({ length: 100 }).map((_, i) => (
|
|
<SelectItem key={i} value={`item-${i}`}>
|
|
Item {i}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectSizes() {
|
|
return (
|
|
<Example title="Sizes">
|
|
<div className="flex flex-col gap-4">
|
|
<Select>
|
|
<SelectTrigger size="sm">
|
|
<SelectValue placeholder="Small size" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select>
|
|
<SelectTrigger size="default">
|
|
<SelectValue placeholder="Default size" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectWithButton() {
|
|
return (
|
|
<Example title="With Button">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Select>
|
|
<SelectTrigger size="sm">
|
|
<SelectValue placeholder="Small" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" size="sm">
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Default" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline">Submit</Button>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectItemAligned() {
|
|
return (
|
|
<Example title="Popper">
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent position="popper">
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes" disabled>
|
|
Grapes
|
|
</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectWithField() {
|
|
return (
|
|
<Example title="With Field">
|
|
<Field>
|
|
<FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="select-fruit">
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldDescription>
|
|
Choose your favorite fruit from the list.
|
|
</FieldDescription>
|
|
</Field>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectInvalid() {
|
|
return (
|
|
<Example title="Invalid">
|
|
<div className="flex flex-col gap-4">
|
|
<Select>
|
|
<SelectTrigger aria-invalid="true">
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Field data-invalid>
|
|
<FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>
|
|
<Select>
|
|
<SelectTrigger id="select-fruit-invalid" aria-invalid>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldError errors={[{ message: "Please select a valid fruit." }]} />
|
|
</Field>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectInline() {
|
|
return (
|
|
<Example title="Inline with Input & NativeSelect">
|
|
<div className="flex items-center gap-2">
|
|
<Input placeholder="Search..." className="flex-1" />
|
|
<Select>
|
|
<SelectTrigger className="w-[140px]">
|
|
<SelectValue placeholder="Filter" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="all">All</SelectItem>
|
|
<SelectItem value="active">Active</SelectItem>
|
|
<SelectItem value="inactive">Inactive</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<NativeSelect className="w-[140px]">
|
|
<NativeSelectOption value="">Sort by</NativeSelectOption>
|
|
<NativeSelectOption value="name">Name</NativeSelectOption>
|
|
<NativeSelectOption value="date">Date</NativeSelectOption>
|
|
<NativeSelectOption value="status">Status</NativeSelectOption>
|
|
</NativeSelect>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectDisabled() {
|
|
return (
|
|
<Example title="Disabled">
|
|
<Select disabled>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Disabled" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes" disabled>
|
|
Grapes
|
|
</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
const plans = [
|
|
{
|
|
name: "Starter",
|
|
description: "Perfect for individuals getting started.",
|
|
},
|
|
{
|
|
name: "Professional",
|
|
description: "Ideal for growing teams and businesses.",
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
description: "Advanced features for large organizations.",
|
|
},
|
|
]
|
|
|
|
function SelectPlan() {
|
|
const [plan, setPlan] = React.useState<string>(plans[0].name)
|
|
|
|
const selectedPlan = plans.find((p) => p.name === plan)
|
|
|
|
return (
|
|
<Example title="Subscription Plan">
|
|
<Select value={plan} onValueChange={setPlan}>
|
|
<SelectTrigger className="h-auto! w-72">
|
|
<SelectValue>
|
|
{selectedPlan && <SelectPlanItem plan={selectedPlan} />}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{plans.map((plan) => (
|
|
<SelectItem key={plan.name} value={plan.name}>
|
|
<SelectPlanItem plan={plan} />
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
|
|
return (
|
|
<Item size="xs" className="w-full p-0">
|
|
<ItemContent className="gap-0">
|
|
<ItemTitle>{plan.name}</ItemTitle>
|
|
<ItemDescription className="text-xs">
|
|
{plan.description}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
)
|
|
}
|
|
|
|
function SelectInDialog() {
|
|
return (
|
|
<Example title="In Dialog">
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline">Open Dialog</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Select Example</DialogTitle>
|
|
<DialogDescription>
|
|
Use the select below to choose a fruit.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Example>
|
|
)
|
|
}
|