snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/radix/toggle-group-font-weight-selector.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/styles/radix-nova/ui/field"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/styles/radix-nova/ui/toggle-group"
+
+export function ToggleGroupFontWeightSelector() {
+  const [fontWeight, setFontWeight] = React.useState("normal")
+  return (
+    <Field>
+      <FieldLabel>Font Weight</FieldLabel>
+      <ToggleGroup
+        type="single"
+        value={fontWeight}
+        onValueChange={(value) => setFontWeight(value)}
+        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>
+  )
+}