Disclosure

import { Disclosure } from '@arbol-ai/ui';

<Disclosure className="max-w-sm" hint="Email, priority, notes" title="More details (optional)">
  <div className="flex flex-col gap-2 text-sm">
    <label className="flex flex-col gap-1">
      Email
      <input className="rounded-field h-8 border px-2" type="email" />
    </label>
    <label className="flex flex-col gap-1">
      Notes
      <textarea className="rounded-field border p-2" />
    </label>
  </div>
</Disclosure>

import { Disclosure, DisclosureGroup } from '@arbol-ai/ui';

<DisclosureGroup className="max-w-sm" defaultExpandedKeys={['hours']}>
  <Disclosure id="hours" title="Opening hours">
    <p className="text-sm">Monday to Friday, 7:00 to 19:00. Saturdays until 13:00.</p>
  </Disclosure>
  <Disclosure hint="3 days" id="holidays" title="Holidays">
    <p className="text-sm">December 25, January 1 and May 1: closed.</p>
  </Disclosure>
  <Disclosure id="reminders" title="Reminders">
    <p className="text-sm">A WhatsApp message the day before each appointment.</p>
  </Disclosure>
</DisclosureGroup>

import { SlidersHorizontalIcon } from '@phosphor-icons/react';
import { Disclosure, DisclosureCaret, DisclosurePanel, DisclosureTrigger } from '@arbol-ai/ui';

<Disclosure className="rounded-card bg-card max-w-sm border">
  <DisclosureTrigger className="data-hovered:bg-gray-a1 rounded-card flex w-full items-center gap-3 p-4 text-start">
    <SlidersHorizontalIcon aria-hidden className="text-muted-foreground size-5" />
    <span className="min-w-0 flex-1">
      <span className="block text-sm font-medium">Advanced settings</span>
      <span className="text-muted-foreground block text-xs">Line, retries and call limits</span>
    </span>
    <DisclosureCaret className="size-4" />
  </DisclosureTrigger>
  <DisclosurePanel className="space-y-2 px-4 pb-4 text-sm">
    <p>Calls from the clinic’s main line.</p>
    <p>Two retries, an hour apart.</p>
  </DisclosurePanel>
</Disclosure>

import { Disclosure, DisclosureCaret, DisclosurePanel, DisclosureTrigger } from '@arbol-ai/ui';

<Disclosure className="max-w-sm">
  <DisclosureTrigger className="text-muted-foreground data-hovered:text-foreground inline-flex items-center gap-1.5 text-sm font-medium">
    {({ isExpanded }) => (
      <>
        {isExpanded ? 'Hide advanced options' : 'Show advanced options'}
        <DisclosureCaret />
      </>
    )}
  </DisclosureTrigger>
  <DisclosurePanel className="pt-3 text-sm">Two retries, an hour apart.</DisclosurePanel>
</Disclosure>