mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
136 lines
5.2 KiB
TypeScript
136 lines
5.2 KiB
TypeScript
import {
|
|
NativeSelect,
|
|
NativeSelectOptGroup,
|
|
NativeSelectOption,
|
|
} from "@/registry/new-york-v4/ui/native-select"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/registry/new-york-v4/ui/select"
|
|
|
|
export function NativeSelectDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
Basic Select
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<NativeSelect>
|
|
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
|
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
|
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
|
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
|
|
<NativeSelectOption value="grapes" disabled>
|
|
Grapes
|
|
</NativeSelectOption>
|
|
<NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
|
|
</NativeSelect>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<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>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
With Groups
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<NativeSelect>
|
|
<NativeSelectOption value="">Select a food</NativeSelectOption>
|
|
<NativeSelectOptGroup label="Fruits">
|
|
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
|
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
|
<NativeSelectOption value="blueberry">
|
|
Blueberry
|
|
</NativeSelectOption>
|
|
</NativeSelectOptGroup>
|
|
<NativeSelectOptGroup label="Vegetables">
|
|
<NativeSelectOption value="carrot">Carrot</NativeSelectOption>
|
|
<NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
|
|
<NativeSelectOption value="spinach">Spinach</NativeSelectOption>
|
|
</NativeSelectOptGroup>
|
|
</NativeSelect>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a food" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Fruits</SelectLabel>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
|
</SelectGroup>
|
|
<SelectGroup>
|
|
<SelectLabel>Vegetables</SelectLabel>
|
|
<SelectItem value="carrot">Carrot</SelectItem>
|
|
<SelectItem value="broccoli">Broccoli</SelectItem>
|
|
<SelectItem value="spinach">Spinach</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
Disabled State
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<NativeSelect disabled>
|
|
<NativeSelectOption value="">Disabled</NativeSelectOption>
|
|
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
|
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
|
</NativeSelect>
|
|
<Select disabled>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Disabled" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="text-sm font-medium text-muted-foreground">
|
|
Error State
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<NativeSelect aria-invalid="true">
|
|
<NativeSelectOption value="">Error state</NativeSelectOption>
|
|
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
|
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
|
</NativeSelect>
|
|
<Select>
|
|
<SelectTrigger aria-invalid="true">
|
|
<SelectValue placeholder="Error state" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="apple">Apple</SelectItem>
|
|
<SelectItem value="banana">Banana</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|