Initial commit

docs/components/collapsible.md

@@ -0,0 +1,58 @@
+- Home
+- Components
+- Collapsible
+
+# Collapsible
+
+An interactive component which expands/collapses a panel.
+
+## Props
+
+All parts mirror Radix Collapsible props:
+
+- Collapsible: root container
+- CollapsibleTrigger: toggles state (supports asChild)
+- CollapsibleContent: animated content area
+
+### Example
+
+```
+<Collapsible>
+  <CollapsibleTrigger asChild>
+    <Button variant="ghost">Toggle</Button>
+  </CollapsibleTrigger>
+  <CollapsibleContent>Hidden content</CollapsibleContent>
+</Collapsible>
+```
+
+## Usage
+
+#### @peduarte starred 3 repositories
+
+```
+<Collapsible className="flex w-[350px] flex-col gap-2">
+  <div className="flex items-center justify-between gap-4 px-4">
+    <h4 className="text-sm font-semibold">
+      @peduarte starred 3 repositories
+    </h4>
+    <CollapsibleTrigger asChild>
+      <Button title="This is a collapsible trigger" variant="ghost" size="icon" className="size-8">
+        <ChevronsUpDown/>
+        <span className="sr-only">Toggle</span>
+      </Button>
+    </CollapsibleTrigger>
+  </div>
+  <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
+    @radix-ui/primitives
+  </div>
+  <CollapsibleContent className="flex flex-col gap-2">
+    <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
+      @radix-ui/colors
+    </div>
+    <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
+      @stitches/react
+    </div>
+  </CollapsibleContent>
+</Collapsible>
+```
+