Collapsible

1import { Card, CardContent } from "@/components/ui/card"2import {3  Collapsible,4  CollapsibleContent,5  CollapsibleTrigger,6} from "@/components/ui/collapsible"78function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {9  return (10    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>11      <path d="m6 9 6 6 6-6" />12    </svg>13  )14}1516export function Example() {17  return (18    <Card className="w-full py-0">19      <CardContent className="py-4">20        <Collapsible className="flex w-full flex-col">21          <div className="flex items-center justify-between gap-3">22            <h4 className="text-sm font-medium tracking-wide">23              Registry push #284124            </h4>25            <CollapsibleTrigger className="group gap-1.5 rounded-md px-2.5 py-1.5 hover:bg-accent hover:text-accent-foreground">26              Details27              <ChevronDownIcon className="size-4 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" />28            </CollapsibleTrigger>29          </div>30          <CollapsibleContent className="flex flex-col gap-2 pt-3 text-sm tracking-wide text-muted-foreground">31            <div className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2">32              <span>Status</span>33              <span className="text-foreground">Shipped</span>34            </div>35            <div className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2">36              <span>Namespace</span>37              <span className="text-foreground">@arctis-sh/ui</span>38            </div>39          </CollapsibleContent>40        </Collapsible>41      </CardContent>42    </Card>43  )44}

1import { Card, CardContent } from "@/components/ui/card"2import {3  Collapsible,4  CollapsibleContent,5  CollapsibleTrigger,6} from "@/components/ui/collapsible"78function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {9  return (10    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>11      <path d="m6 9 6 6 6-6" />12    </svg>13  )14}1516export function Example() {17  return (18    <Card className="w-full py-0">19      <CardContent className="py-4">20        <Collapsible className="flex w-full flex-col">21          <div className="flex items-center justify-between gap-3">22            <h4 className="text-sm font-medium tracking-wide">23              Registry push #284124            </h4>25            <CollapsibleTrigger className="group gap-1.5 rounded-md px-2.5 py-1.5 hover:bg-accent hover:text-accent-foreground">26              Details27              <ChevronDownIcon className="size-4 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" />28            </CollapsibleTrigger>29          </div>30          <CollapsibleContent className="flex flex-col gap-2 pt-3 text-sm tracking-wide text-muted-foreground">31            <div className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2">32              <span>Status</span>33              <span className="text-foreground">Shipped</span>34            </div>35            <div className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2">36              <span>Namespace</span>37              <span className="text-foreground">@arctis-sh/ui</span>38            </div>39          </CollapsibleContent>40        </Collapsible>41      </CardContent>42    </Card>43  )44}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import {4  Collapsible,5  CollapsibleContent,6  CollapsibleTrigger,7} from "@/components/ui/collapsible"89function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <path d="m6 9 6 6 6-6" />13    </svg>14  )15}1617export function Example() {18  const [open, setOpen] = React.useState(false)1920  return (21    <Card className="w-full bg-transparent py-0">22      <CardContent className="py-4">23        <Collapsible24          open={open}25          onOpenChange={setOpen}26          className="flex w-full flex-col"27        >28          <CollapsibleTrigger className="group w-full justify-between text-left">29            Theme tokens {open ? "(open)" : "(closed)"}30            <ChevronDownIcon className="size-4 transition-transform duration-200 ease-out group-data-[state=open]:rotate-180" />31          </CollapsibleTrigger>32          <CollapsibleContent className="pt-3 text-sm tracking-wide text-muted-foreground">33            CSS variables under globals.css drive light and dark surfaces for34            every component page.35          </CollapsibleContent>36        </Collapsible>37      </CardContent>38    </Card>39  )40}

1import { Card, CardContent } from "@/components/ui/card"2import {3  Collapsible,4  CollapsibleContent,5  CollapsibleTrigger,6} from "@/components/ui/collapsible"78function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {9  return (10    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>11      <path d="m6 9 6 6 6-6" />12    </svg>13  )14}1516export function Example() {17  return (18    <Card className="w-full bg-transparent py-0">19      <CardContent className="py-4">20        <Collapsible disabled className="flex w-full flex-col">21          <CollapsibleTrigger className="group w-full justify-between text-left">22            Publish package — unlock after review23            <ChevronDownIcon className="size-4" />24          </CollapsibleTrigger>25          <CollapsibleContent className="pt-3 text-sm tracking-wide text-muted-foreground">26            Shipping is locked until the changelog entry is approved.27          </CollapsibleContent>28        </Collapsible>29      </CardContent>30    </Card>31  )32}

1import * as React from "react"2import { Card, CardContent } from "@/components/ui/card"3import {4  Collapsible,5  CollapsibleContent,6  CollapsibleTrigger,7} from "@/components/ui/collapsible"89function CornersIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <path d="M8 3H5a2 2 0 0 0-2 2v3" />13      <path d="M16 3h3a2 2 0 0 1 2 2v3" />14      <path d="M8 21H5a2 2 0 0 1-2-2v-3" />15      <path d="M16 21h3a2 2 0 0 0 2-2v-3" />16    </svg>17  )18}1920function ShrinkCornersIcon(props: React.SVGProps<SVGSVGElement>) {21  return (22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>23      <g transform="rotate(180 5.5 5.5)">24        <path d="M8 3H5a2 2 0 0 0-2 2v3" />25      </g>26      <g transform="rotate(180 18.5 5.5)">27        <path d="M16 3h3a2 2 0 0 1 2 2v3" />28      </g>29      <g transform="rotate(180 5.5 18.5)">30        <path d="M8 21H5a2 2 0 0 1-2-2v-3" />31      </g>32      <g transform="rotate(180 18.5 18.5)">33        <path d="M16 21h3a2 2 0 0 0 2-2v-3" />34      </g>35    </svg>36  )37}3839export function Example() {40  const [open, setOpen] = React.useState(false)4142  return (43    <Card className="w-full bg-transparent py-0">44      <CardContent className="py-4">45        <Collapsible46          open={open}47          onOpenChange={setOpen}48          className="flex w-full flex-col gap-3"49        >50          <div className="grid gap-1">51            <p className="text-sm font-medium tracking-wide">Radius</p>52            <p className="text-sm text-muted-foreground">53              Set the corner radius of the element.54            </p>55          </div>56          <div className="flex items-start gap-2">57            <div className="min-w-0 flex-1">58              <div className="grid grid-cols-2 gap-2">59                <input defaultValue="0" className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide" />60                <input defaultValue="0" className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide" />61              </div>62              <CollapsibleContent className="pt-2">63                <div className="grid grid-cols-2 gap-2">64                  <input defaultValue="0" className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide" />65                  <input defaultValue="0" className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide" />66                </div>67              </CollapsibleContent>68            </div>69            <CollapsibleTrigger className="inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border hover:bg-accent hover:text-accent-foreground">70              {open ? (71                <ShrinkCornersIcon className="size-4" />72              ) : (73                <CornersIcon className="size-4" />74              )}75              <span className="sr-only">Toggle radius settings</span>76            </CollapsibleTrigger>77          </div>78        </Collapsible>79      </CardContent>80    </Card>81  )82}

1import type { ReactNode } from "react"2import {3  Collapsible,4  CollapsibleContent,5  CollapsibleTrigger,6} from "@/components/ui/collapsible"78function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {9  return (10    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>11      <path d="m9 18 6-6-6-6" />12    </svg>13  )14}1516function FolderIcon(props: React.SVGProps<SVGSVGElement>) {17  return (18    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>19      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.64 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />20    </svg>21  )22}2324function FileIcon(props: React.SVGProps<SVGSVGElement>) {25  return (26    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>27      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />28      <path d="M14 2v4a2 2 0 0 0 2 2h4" />29    </svg>30  )31}3233function TreeFolder({34  name,35  defaultOpen = false,36  children,37}: {38  name: string39  defaultOpen?: boolean40  children: ReactNode41}) {42  return (43    <Collapsible defaultOpen={defaultOpen} className="flex flex-col">44      <CollapsibleTrigger className="group w-fit justify-start gap-1.5 rounded-md px-1.5 py-1 text-left text-sm tracking-wide hover:bg-accent hover:text-accent-foreground">45        <ChevronRightIcon className="size-3.5 shrink-0 transition-transform duration-200 ease-out group-data-[state=open]:rotate-90" />46        <FolderIcon className="size-3.5 shrink-0 text-muted-foreground" />47        {name}48      </CollapsibleTrigger>49      <CollapsibleContent className="ms-3 flex flex-col gap-1 border-l border-border ps-2 pt-1">50        {children}51      </CollapsibleContent>52    </Collapsible>53  )54}5556function TreeFile({ name }: { name: string }) {57  return (58    <div className="inline-flex w-fit items-center gap-1.5 rounded-md px-1.5 py-1 text-sm tracking-wide text-muted-foreground hover:bg-accent hover:text-accent-foreground">59      <span className="size-3.5 shrink-0" />60      <FileIcon className="size-3.5 shrink-0" />61      {name}62    </div>63  )64}6566export function Example() {67  return (68    <div className="w-full rounded-md border border-border p-3">69      <p className="mb-2 px-1.5 text-xs tracking-wide text-muted-foreground">70        Explorer71      </p>72      <TreeFolder name="components" defaultOpen>73        <TreeFolder name="ui" defaultOpen>74          <TreeFile name="button.tsx" />75          <TreeFile name="card.tsx" />76          <TreeFile name="collapsible.tsx" />77        </TreeFolder>78        <TreeFile name="logo.tsx" />79      </TreeFolder>80      <TreeFolder name="lib">81        <TreeFile name="utils.ts" />82      </TreeFolder>83      <TreeFile name="globals.css" />84      <TreeFile name="package.json" />85    </div>86  )87}