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

apps/v4/registry/bases/aria/examples/collapsible-example.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { Button, buttonVariants } from "@/registry/bases/aria/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/aria/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/bases/aria/ui/collapsible"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/aria/ui/field"
+import { Input } from "@/registry/bases/aria/ui/input"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/aria/ui/tabs"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function CollapsibleExample() {
+  return (
+    <ExampleWrapper>
+      <CollapsibleFileTree />
+      <CollapsibleSettings />
+    </ExampleWrapper>
+  )
+}
+
+type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }
+
+function CollapsibleFileTree() {
+  const fileTree: FileTreeItem[] = [
+    {
+      name: "components",
+      items: [
+        {
+          name: "ui",
+          items: [
+            { name: "button.tsx" },
+            { name: "card.tsx" },
+            { name: "dialog.tsx" },
+            { name: "input.tsx" },
+            { name: "select.tsx" },
+            { name: "table.tsx" },
+          ],
+        },
+        { name: "login-form.tsx" },
+        { name: "register-form.tsx" },
+      ],
+    },
+    {
+      name: "lib",
+      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
+    },
+    {
+      name: "hooks",
+      items: [
+        { name: "use-media-query.ts" },
+        { name: "use-debounce.ts" },
+        { name: "use-local-storage.ts" },
+      ],
+    },
+    {
+      name: "types",
+      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],
+    },
+    {
+      name: "public",
+      items: [
+        { name: "favicon.ico" },
+        { name: "logo.svg" },
+        { name: "images" },
+      ],
+    },
+    { name: "app.tsx" },
+    { name: "layout.tsx" },
+    { name: "globals.css" },
+    { name: "package.json" },
+    { name: "tsconfig.json" },
+    { name: "README.md" },
+    { name: ".gitignore" },
+  ]
+
+  const renderItem = (fileItem: FileTreeItem) => {
+    if ("items" in fileItem) {
+      return (
+        <Collapsible key={fileItem.name}>
+          <CollapsibleTrigger
+            className={buttonVariants({
+              variant: "ghost",
+              size: "sm",
+              className:
+                "group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground",
+            })}
+          >
+            <IconPlaceholder
+              lucide="ChevronRightIcon"
+              tabler="IconChevronRight"
+              hugeicons="ArrowRight01Icon"
+              phosphor="CaretRightIcon"
+              remixicon="RiArrowRightSLine"
+              className="transition-transform group-aria-expanded:rotate-90"
+            />
+            <IconPlaceholder
+              lucide="FolderIcon"
+              tabler="IconFolder"
+              hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
+              remixicon="RiFolderLine"
+            />
+            {fileItem.name}
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">
+            <div className="flex flex-col gap-1">
+              {fileItem.items.map((child) => renderItem(child))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )
+    }
+    return (
+      <Button
+        key={fileItem.name}
+        variant="link"
+        size="sm"
+        className="w-full justify-start gap-2 text-foreground"
+      >
+        <IconPlaceholder
+          lucide="FileIcon"
+          tabler="IconFile"
+          hugeicons="File01Icon"
+          phosphor="FileIcon"
+          remixicon="RiFileLine"
+        />
+        <span>{fileItem.name}</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Example title="File Tree" className="items-center">
+      <Card className="mx-auto w-full max-w-[16rem] gap-2" size="sm">
+        <CardHeader>
+          <Tabs defaultSelectedKey="explorer">
+            <TabsList className="w-full">
+              <TabsTrigger id="explorer">Explorer</TabsTrigger>
+              <TabsTrigger id="settings">Outline</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-1">
+            {fileTree.map((item) => renderItem(item))}
+          </div>
+        </CardContent>
+      </Card>
+    </Example>
+  )
+}
+
+function CollapsibleSettings() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Example title="Settings" className="items-center">
+      <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
+            isExpanded={isOpen}
+            onExpandedChange={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
+              className={buttonVariants({ variant: "outline", size: "icon" })}
+            >
+              {isOpen ? (
+                <IconPlaceholder
+                  lucide="MinimizeIcon"
+                  tabler="IconMinimize"
+                  hugeicons="MinusSignIcon"
+                  phosphor="MinusIcon"
+                  remixicon="RiSubtractLine"
+                />
+              ) : (
+                <IconPlaceholder
+                  lucide="MaximizeIcon"
+                  tabler="IconMaximize"
+                  hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
+                  remixicon="RiAddLine"
+                />
+              )}
+            </CollapsibleTrigger>
+          </Collapsible>
+        </CardContent>
+      </Card>
+    </Example>
+  )
+}