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/
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { Card, CardContent } from "@/examples/radix/ui/card"
|
|
import { Checkbox } from "@/examples/radix/ui/checkbox"
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldLegend,
|
|
FieldSet,
|
|
FieldTitle,
|
|
} from "@/examples/radix/ui/field"
|
|
|
|
const options = [
|
|
{
|
|
label: "Social Media",
|
|
value: "social-media",
|
|
},
|
|
|
|
{
|
|
label: "Search Engine",
|
|
value: "search-engine",
|
|
},
|
|
{
|
|
label: "Referral",
|
|
value: "referral",
|
|
},
|
|
{
|
|
label: "Other",
|
|
value: "other",
|
|
},
|
|
]
|
|
|
|
export function FieldHear() {
|
|
return (
|
|
<Card className="py-4 shadow-none">
|
|
<CardContent className="px-4">
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet className="gap-4">
|
|
<FieldLegend>How did you hear about us?</FieldLegend>
|
|
<FieldDescription className="line-clamp-1">
|
|
Select the option that best describes how you heard about us.
|
|
</FieldDescription>
|
|
<FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
|
|
{options.map((option) => (
|
|
<FieldLabel
|
|
htmlFor={option.value}
|
|
key={option.value}
|
|
className="w-fit!"
|
|
>
|
|
<Field
|
|
orientation="horizontal"
|
|
className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
|
|
>
|
|
<Checkbox
|
|
value={option.value}
|
|
id={option.value}
|
|
defaultChecked={option.value === "social-media"}
|
|
className="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0"
|
|
/>
|
|
<FieldTitle>{option.label}</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
))}
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|