Collapsible

<x-ui.collapsible class="flex w-[350px] flex-col gap-2">
    <div class="flex items-center justify-between gap-4 px-4">
        <h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
        <x-ui.collapsible-trigger class="inline-flex size-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground">
            <x-lucide-chevrons-up-down class="size-4" />
            <span class="sr-only">Toggle</span>
        </x-ui.collapsible-trigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">
        @radix-ui/primitives
    </div>
    <x-ui.collapsible-content class="flex flex-col gap-2">
        <div class="rounded-md border px-4 py-2 font-mono text-sm">
            @radix-ui/colors
        </div>
        <div class="rounded-md border px-4 py-2 font-mono text-sm">
            @stitches/react
        </div>
    </x-ui.collapsible-content>
</x-ui.collapsible>

{{-- An expandable member list with avatars. --}}
<x-ui.collapsible class="w-[320px] rounded-lg border">
    <x-ui.collapsible-trigger class="flex w-full items-center justify-between gap-2 p-3 text-sm font-medium">
        <span class="flex items-center gap-2"><x-lucide-users class="text-muted-foreground size-4" aria-hidden="true" /> 3 team members</span>
        <x-lucide-chevron-down class="text-muted-foreground size-4 transition-transform [[data-state=open]>&]:rotate-180" aria-hidden="true" />
    </x-ui.collapsible-trigger>
    <x-ui.collapsible-content class="divide-y border-t">
        @foreach ([['CN', 'shadcn', '[email protected]'], ['LR', 'leerob', '[email protected]'], ['ER', 'evilrabbit', '[email protected]']] as [$initials, $name, $email])
            <div class="flex items-center gap-3 p-3">
                <x-ui.avatar class="size-8"><x-ui.avatar-fallback>{{ $initials }}</x-ui.avatar-fallback></x-ui.avatar>
                <div class="grid">
                    <span class="text-sm font-medium">{{ $name }}</span>
                    <span class="text-muted-foreground text-xs">{{ $email }}</span>
                </div>
            </div>
        @endforeach
    </x-ui.collapsible-content>
</x-ui.collapsible>

<x-ui.collapsible class="w-full max-w-sm">
    <x-ui.card variant="sectioned">
        <x-ui.card-header>
            <x-ui.card-title>Deployment</x-ui.card-title>
            <x-ui.card-description>Production build · 2 minutes ago</x-ui.card-description>
            <x-ui.card-action>
                <x-ui.collapsible-trigger class="hover:bg-accent inline-flex size-8 items-center justify-center rounded-md">
                    <x-lucide-chevrons-up-down class="size-4" aria-hidden="true" />
                    <span class="sr-only">Toggle details</span>
                </x-ui.collapsible-trigger>
            </x-ui.card-action>
        </x-ui.card-header>
        <x-ui.collapsible-content>
            <x-ui.card-content class="text-muted-foreground flex flex-col gap-2 text-sm">
                <div class="flex justify-between"><span>Commit</span><span class="font-mono">a1b2c3d</span></div>
                <div class="flex justify-between"><span>Branch</span><span class="font-mono">main</span></div>
                <div class="flex justify-between"><span>Duration</span><span>48s</span></div>
            </x-ui.card-content>
        </x-ui.collapsible-content>
    </x-ui.card>
</x-ui.collapsible>

{{-- Nested collapsibles as a file explorer; folders swap icon + chevron rotates. --}}
@php
    $row = 'group flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground';
    $file = 'flex items-center gap-1.5 rounded-md px-2 py-1 text-sm ml-5.5';
@endphp

<x-ui.collapsible open class="w-[300px]">
    <x-ui.collapsible-trigger class="{{ $row }}">
        <x-lucide-chevron-right class="text-muted-foreground size-4 shrink-0 transition-transform [[data-state=open]>&]:rotate-90" aria-hidden="true" />
        <x-lucide-folder class="size-4 shrink-0 text-sky-600 [[data-state=open]>&]:hidden dark:text-sky-400" aria-hidden="true" />
        <x-lucide-folder-open class="hidden size-4 shrink-0 text-sky-600 [[data-state=open]>&]:block dark:text-sky-400" aria-hidden="true" />
        <span class="font-medium">app</span>
    </x-ui.collapsible-trigger>
    <x-ui.collapsible-content class="ms-3.5 mt-0.5 flex flex-col gap-0.5 border-s ps-2">
        <x-ui.collapsible class="flex flex-col gap-0.5">
            <x-ui.collapsible-trigger class="{{ $row }}">
                <x-lucide-chevron-right class="text-muted-foreground size-4 shrink-0 transition-transform [[data-state=open]>&]:rotate-90" aria-hidden="true" />
                <x-lucide-folder class="size-4 shrink-0 text-sky-600 [[data-state=open]>&]:hidden dark:text-sky-400" aria-hidden="true" />
                <x-lucide-folder-open class="hidden size-4 shrink-0 text-sky-600 [[data-state=open]>&]:block dark:text-sky-400" aria-hidden="true" />
                <span>Http</span>
            </x-ui.collapsible-trigger>
            <x-ui.collapsible-content class="ms-3.5 flex flex-col gap-0.5 border-s ps-2">
                <div class="{{ $file }}"><x-lucide-file class="text-muted-foreground size-4 shrink-0" aria-hidden="true" /> Kernel.php</div>
                <div class="{{ $file }}"><x-lucide-file class="text-muted-foreground size-4 shrink-0" aria-hidden="true" /> Middleware.php</div>
            </x-ui.collapsible-content>
        </x-ui.collapsible>
        <div class="{{ $file }}"><x-lucide-file class="text-muted-foreground size-4 shrink-0" aria-hidden="true" /> Models/User.php</div>
        <div class="{{ $file }}"><x-lucide-file class="text-muted-foreground size-4 shrink-0" aria-hidden="true" /> Providers/AppServiceProvider.php</div>
    </x-ui.collapsible-content>
</x-ui.collapsible>

<x-ui.collapsible open class="flex w-[350px] flex-col gap-2">
    <div class="flex items-center justify-between gap-4 px-4">
        <h4 class="text-sm font-semibold">Started 24 repositories</h4>
        <x-ui.collapsible-trigger class="hover:bg-accent hover:text-accent-foreground inline-flex size-8 items-center justify-center rounded-md">
            <x-lucide-chevrons-up-down class="size-4" aria-hidden="true" />
            <span class="sr-only">Toggle</span>
        </x-ui.collapsible-trigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@laravel/framework</div>
    <x-ui.collapsible-content class="flex flex-col gap-2">
        <div class="rounded-md border px-4 py-2 font-mono text-sm">@livewire/livewire</div>
        <div class="rounded-md border px-4 py-2 font-mono text-sm">@alpinejs/alpine</div>
    </x-ui.collapsible-content>
</x-ui.collapsible>