List Box

'use client';

import { ListBox, ListBoxItem } from '@/components/ui/list-box';

export default function ListBoxDemo() {
  return (
    <ListBox aria-label="Segmento" selectionMode="single" defaultSelectedKeys={['padaria']} className="w-64">
      <ListBoxItem id="padaria">Padaria</ListBoxItem>
      <ListBoxItem id="restaurante">Restaurante</ListBoxItem>
      <ListBoxItem id="oficina">Oficina mecânica</ListBoxItem>
      <ListBoxItem id="clinica">Clínica</ListBoxItem>
      <ListBoxItem id="salao" isDisabled>
        Salão de beleza (em breve)
      </ListBoxItem>
    </ListBox>
  );
}

'use client';

import { ListBox, ListBoxItem } from '@/components/ui/list-box';

export default function ListBoxMultiple() {
  return (
    <ListBox
      aria-label="Formas de pagamento"
      selectionMode="multiple"
      defaultSelectedKeys={['pix', 'cartao']}
      className="w-64"
    >
      <ListBoxItem id="pix">Pix</ListBoxItem>
      <ListBoxItem id="cartao">Cartão</ListBoxItem>
      <ListBoxItem id="boleto">Boleto</ListBoxItem>
      <ListBoxItem id="dinheiro">Dinheiro</ListBoxItem>
    </ListBox>
  );
}

'use client';

import { Store, Truck, Wallet } from 'lucide-react';
import { ListBox, ListBoxItem, ListBoxSection, ListBoxSeparator } from '@/components/ui/list-box';

export default function ListBoxSections() {
  return (
    <ListBox aria-label="Configurações" selectionMode="single" defaultSelectedKeys={['loja']} className="w-64">
      <ListBoxSection title="Vendas">
        <ListBoxItem id="loja" textValue="Loja">
          <Store /> Loja
        </ListBoxItem>
        <ListBoxItem id="pagamentos" textValue="Pagamentos">
          <Wallet /> Pagamentos
        </ListBoxItem>
      </ListBoxSection>
      <ListBoxSeparator />
      <ListBoxSection title="Logística">
        <ListBoxItem id="entregas" textValue="Entregas">
          <Truck /> Entregas
        </ListBoxItem>
      </ListBoxSection>
    </ListBox>
  );
}

'use client';

import { useState } from 'react';
import type { Selection } from 'react-aria-components';
import { ListBox, ListBoxItem } from '@/components/ui/list-box';

const profissionais = [
  { id: 'ana', nome: 'Dra. Ana Souza', especialidade: 'Ortodontia' },
  { id: 'bruno', nome: 'Dr. Bruno Lima', especialidade: 'Implantes' },
  { id: 'carla', nome: 'Dra. Carla Mendes', especialidade: 'Clínico geral' },
];

export default function ListBoxDynamic() {
  const [selecionado, setSelecionado] = useState<Selection>(new Set(['ana']));
  const id = [...(selecionado === 'all' ? [] : selecionado)][0];
  const atual = profissionais.find((p) => p.id === id);
  return (
    <div className="flex flex-col gap-3">
      <ListBox
        aria-label="Profissional"
        items={profissionais}
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={selecionado}
        onSelectionChange={setSelecionado}
        className="w-64"
      >
        {(p) => (
          <ListBoxItem textValue={p.nome}>
            <div className="flex flex-col gap-0.5">
              <span>{p.nome}</span>
              <span className="text-xs text-muted-foreground">{p.especialidade}</span>
            </div>
          </ListBoxItem>
        )}
      </ListBox>
      <p className="text-sm text-muted-foreground">Agendando com: {atual?.nome}</p>
    </div>
  );
}

'use client';

import { ListBox, ListBoxItem } from '@/components/ui/list-box';

const clientes: { id: string; nome: string }[] = [];

export default function ListBoxEmpty() {
  return (
    <ListBox
      aria-label="Clientes"
      items={clientes}
      renderEmptyState={() => 'Nenhum cliente cadastrado.'}
      className="w-64"
    >
      {(cliente) => <ListBoxItem>{cliente.nome}</ListBoxItem>}
    </ListBox>
  );
}