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/
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { Label } from "@/registry/new-york-v4/ui/label"
|
|
import {
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
} from "@/registry/new-york-v4/ui/radio-group"
|
|
|
|
const plans = [
|
|
{
|
|
id: "starter",
|
|
name: "Starter Plan",
|
|
description:
|
|
"Perfect for small businesses getting started with our platform",
|
|
price: "$10",
|
|
},
|
|
{
|
|
id: "pro",
|
|
name: "Pro Plan",
|
|
description: "Advanced features for growing businesses with higher demands",
|
|
price: "$20",
|
|
},
|
|
] as const
|
|
|
|
export function RadioGroupDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<RadioGroup defaultValue="comfortable">
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="default" id="r1" />
|
|
<Label htmlFor="r1">Default</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="comfortable" id="r2" />
|
|
<Label htmlFor="r2">Comfortable</Label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="compact" id="r3" />
|
|
<Label htmlFor="r3">Compact</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<RadioGroup defaultValue="starter" className="max-w-sm">
|
|
{plans.map((plan) => (
|
|
<Label
|
|
className="flex items-start gap-3 rounded-lg border p-4 hover:bg-accent/50 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
|
|
key={plan.id}
|
|
>
|
|
<RadioGroupItem
|
|
value={plan.id}
|
|
id={plan.name}
|
|
className="shadow-none data-[state=checked]:border-green-600 data-[state=checked]:bg-green-600 *:data-[slot=radio-group-indicator]:[&>svg]:fill-white *:data-[slot=radio-group-indicator]:[&>svg]:stroke-white"
|
|
/>
|
|
<div className="grid gap-1 font-normal">
|
|
<div className="font-medium">{plan.name}</div>
|
|
<div className="leading-snug text-muted-foreground">
|
|
{plan.description}
|
|
</div>
|
|
</div>
|
|
</Label>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
)
|
|
}
|