Collapsible

npm install @volta/collapsible

import { Button } from '@volta/button';
import { ChevronDown } from 'lucide-react';
 
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@volta/collapsible';

<Collapsible className="w-72">
  <CollapsibleTrigger
    className="[&[data-state=open]>div>div>svg]:rotate-180"
    asChild
  >
    <Button variant="outline" className="w-full justify-start h-10">
      <div className="w-full items-center flex justify-between">
        <div className="flex items-center">
          <p>Toggle</p>
        </div>
        <div>
          <ChevronDown
            size={18}
            className="transition-transform duration-200"
          />
        </div>
      </div>
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
    <Button variant="outline" className="mt-1 w-full justify-start">
      Entry 1
    </Button>
    <Button variant="outline" className="mt-1 w-full justify-start">
      Entry 2
    </Button>
  </CollapsibleContent>
</Collapsible>