Collapsible

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Default() {
  return (
    <Collapsible>
      <Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
        eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
      </Collapsible.Content>
    </Collapsible>
  );
}

import { Collapsible } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={(details) => setOpen(details.open)}>
      <Collapsible.Trigger className="btn preset-filled">{open ? 'Close' : 'Open'}</Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
        eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
      </Collapsible.Content>
    </Collapsible>
  );
}

import { Collapsible } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Default() {
  return (
    <Collapsible>
      <Collapsible.Trigger className="btn preset-filled">
        <span>Toggle</span>
        <Collapsible.Indicator className="group">
          <MinusIcon className="size-4 group-data-[state=open]:block hidden" />
          <PlusIcon className="size-4 group-data-[state=open]:hidden block" />
        </Collapsible.Indicator>
      </Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam assumenda veritatis modi repellendus enim accusantium inventore
        architecto maxime voluptates quibusdam velit perferendis mollitia, quas, aliquam sapiente adipisci illo nostrum vitae?
      </Collapsible.Content>
    </Collapsible>
  );
}

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Disabled() {
  return (
    <Collapsible disabled>
      <Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas maxime in praesentium reiciendis eveniet modi mollitia? Odio
        accusantium veritatis accusamus quia placeat sapiente reiciendis? Consectetur, quis! Voluptatem omnis accusantium blanditiis.
      </Collapsible.Content>
    </Collapsible>
  );
}

import { Collapsible } from '@skeletonlabs/skeleton-react';

export default function Alignment() {
  return (
    <Collapsible className="flex flex-col items-center">
      <Collapsible.Trigger className="btn preset-filled">Toggle</Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit pariatur error soluta voluptate, accusantium modi repudiandae omnis
        eligendi, suscipit repellat impedit architecto neque sequi mollitia autem dicta quae ipsum et?
      </Collapsible.Content>
    </Collapsible>
  );
}