Collapsible

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Field, Input } from 'ferry-ui'
import { ChevronRight } from 'lucide-react'

export default function CollapsibleHero() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Project name">
        <Input defaultValue="Website redesign" />
      </Field>
      <Collapsible className="flex flex-col gap-4">
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            className="group w-fit"
            icon={<ChevronRight className="transition-transform group-data-[state=open]:rotate-90" />}
          >
            Advanced options
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="flex flex-col gap-4">
          <Field label="URL slug">
            <Input mono defaultValue="website-redesign" />
          </Field>
          <Field label="Task prefix">
            <Input mono defaultValue="WEB" />
          </Field>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}

import * as React from 'react'
import { Button, Card, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ferry-ui'

const MEMBERS = ['Maya Chen', 'Liam Novak', 'Sara Ortiz', 'Tom Becker', 'Aiko Tanaka', 'Omar Haddad']

export default function CollapsibleControlled() {
  const [open, setOpen] = React.useState(false)
  const first = MEMBERS.slice(0, 3)
  const rest = MEMBERS.slice(3)

  return (
    <Card className="w-full max-w-sm">
      <Collapsible open={open} onOpenChange={setOpen}>
        <ul className="divide-y text-[13px] text-foreground">
          {first.map((member) => (
            <li key={member} className="px-4 py-2.5">
              {member}
            </li>
          ))}
        </ul>
        <CollapsibleContent asChild>
          <ul className="divide-y border-t text-[13px] text-foreground">
            {rest.map((member) => (
              <li key={member} className="px-4 py-2.5">
                {member}
              </li>
            ))}
          </ul>
        </CollapsibleContent>
        <div className="border-t p-1.5">
          <CollapsibleTrigger asChild>
            <Button variant="ghost" size="tiny" className="w-full">
              {open ? 'Show less' : `Show ${rest.length} more`}
            </Button>
          </CollapsibleTrigger>
        </div>
      </Collapsible>
    </Card>
  )
}

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ferry-ui'
import { ChevronRight } from 'lucide-react'

export default function CollapsibleAnimated() {
  return (
    <Collapsible className="flex w-full max-w-sm flex-col">
      <CollapsibleTrigger asChild>
        <Button
          variant="ghost"
          className="group w-fit"
          icon={<ChevronRight className="transition-transform group-data-[state=open]:rotate-90" />}
        >
          Payment terms
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
        {/* The padding is on an inner element: the animation changes the height of the content. */}
        <p className="px-2.5 pt-2 text-[13px] text-foreground-light">
          The customer pays each invoice in 30 days. A late payment adds a fee of 2% to the next invoice.
        </p>
      </CollapsibleContent>
    </Collapsible>
  )
}

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ferry-ui'
import { ChevronRight } from 'lucide-react'

export default function CollapsibleDisabled() {
  return (
    <Collapsible disabled className="flex flex-col gap-2">
      <CollapsibleTrigger asChild>
        <Button variant="ghost" icon={<ChevronRight />}>
          Advanced options
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="text-[13px] text-foreground-light">
        The options of the project.
      </CollapsibleContent>
    </Collapsible>
  )
}