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

apps/v4/examples/radix/collapsible-settings.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { MaximizeIcon, MinimizeIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/styles/radix-nova/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/styles/radix-nova/ui/collapsible"
+import { Field, FieldGroup, FieldLabel } from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
+
+export function CollapsibleSettings() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Card className="mx-auto w-full max-w-xs" size="sm">
+      <CardHeader>
+        <CardTitle>Radius</CardTitle>
+        <CardDescription>Set the corner radius of the element.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className="flex items-start gap-2"
+        >
+          <FieldGroup className="grid w-full grid-cols-2 gap-2">
+            <Field>
+              <FieldLabel htmlFor="radius-x" className="sr-only">
+                Radius X
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="radius-y" className="sr-only">
+                Radius Y
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
+              <Field>
+                <FieldLabel htmlFor="radius-x" className="sr-only">
+                  Radius X
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="radius-y" className="sr-only">
+                  Radius Y
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+            </CollapsibleContent>
+          </FieldGroup>
+          <CollapsibleTrigger asChild>
+            <Button variant="outline" size="icon">
+              {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}
+            </Button>
+          </CollapsibleTrigger>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  )
+}