mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +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/
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
|
|
import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
|
|
|
|
export function ToggleGroupFontWeightSelector() {
|
|
const [fontWeight, setFontWeight] = React.useState("normal")
|
|
return (
|
|
<Field>
|
|
<FieldLabel>Font Weight</FieldLabel>
|
|
<ToggleGroup
|
|
value={[fontWeight]}
|
|
onValueChange={(value) => setFontWeight(value[0])}
|
|
variant="outline"
|
|
spacing={2}
|
|
size="lg"
|
|
>
|
|
<ToggleGroupItem
|
|
value="light"
|
|
aria-label="Light"
|
|
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
|
>
|
|
<span className="text-2xl leading-none font-light">Aa</span>
|
|
<span className="text-xs text-muted-foreground">Light</span>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="normal"
|
|
aria-label="Normal"
|
|
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
|
>
|
|
<span className="text-2xl leading-none font-normal">Aa</span>
|
|
<span className="text-xs text-muted-foreground">Normal</span>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="medium"
|
|
aria-label="Medium"
|
|
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
|
>
|
|
<span className="text-2xl leading-none font-medium">Aa</span>
|
|
<span className="text-xs text-muted-foreground">Medium</span>
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="bold"
|
|
aria-label="Bold"
|
|
className="flex size-16 flex-col items-center justify-center rounded-xl"
|
|
>
|
|
<span className="text-2xl leading-none font-bold">Aa</span>
|
|
<span className="text-xs text-muted-foreground">Bold</span>
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<FieldDescription>
|
|
Use{" "}
|
|
<code className="rounded-md bg-muted px-1 py-0.5 font-mono">
|
|
font-{fontWeight}
|
|
</code>{" "}
|
|
to set the font weight.
|
|
</FieldDescription>
|
|
</Field>
|
|
)
|
|
}
|