Collapsible

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Collapsible>
      <CollapsibleTrigger asChild>
        <Button variant="ghost" size="sm" trailingIcon={<Icon name="chevron-down" />}>
          Advanced settings
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p style={{ margin: '12px 0 0' }}>
          Relay host, port and TLS options are managed by your IT administrator.
        </p>
      </CollapsibleContent>
    </Collapsible>
  );
}

import * as React from 'react';
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bindshq/stance-react';

export function Controlled() {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <strong>3 mailboxes failed</strong>
        <CollapsibleTrigger asChild>
          <Button variant="link" size="sm">
            {open ? 'Hide' : 'Show'} details
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent>
        <ul style={{ margin: '8px 0 0', paddingLeft: 20 }}>
          <li>tomas@binds.si: mailbox not found</li>
          <li>oliver@binds.si: licence missing</li>
          <li>hana@binds.si: relay timeout</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bindshq/stance-react';

export function ForceMount() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger asChild>
        <Button variant="outline" size="sm">
          Toggle optional fields
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent forceMount>
        <label style={{ display: 'grid', gap: 4, marginTop: 12, maxWidth: 280 }}>
          Mobile number
          <input placeholder="+44 7700 900123" />
        </label>
      </CollapsibleContent>
    </Collapsible>
  );
}