<Button variant="primary">Confirmar</Button>
<Button variant="accent">Reservar turno</Button>
<Button variant="secondary">Ver programação</Button>
<Button variant="outline">Filtrar</Button>
<Button variant="text">Cancelar</Button>
<Button variant="destructive">Confirmar presença</Button>

<Button size="sm">Pequeno</Button>
<Button size="md">Médio</Button>
<Button size="lg">Grande</Button>
<Button size="xl">Extra grande</Button>

<Button leadingIcon={<BookOpen />}>Nova leitura</Button>
<Button variant="accent" trailingIcon={<ArrowRight />}>Continuar</Button>
<Button variant="outline" leadingIcon={<SlidersHorizontal />}>Filtros</Button>
<Button variant="secondary" leadingIcon={<MapPin />}>Guadalupe, RJ</Button>

import { IconButton } from "@/components/ui/icon-button"

<IconButton icon={<Heart />} aria-label="Favoritar versículo" />
<IconButton icon={<Share2 />} variant="secondary" aria-label="Compartilhar" />
<IconButton icon={<Plus />} variant="primary" aria-label="Criar publicação" />
<IconButton icon={<Plus />} variant="accent" size="lg" aria-label="Adicionar" />

const [phase, setPhase] = useState<"idle" | "loading" | "success">("idle")

<Button
  variant="primary"
  size="lg"
  loading={phase === "loading"}
  loadingText="Confirmando presença…"
  success={phase === "success"}
  successText="Presença confirmada!"
  onClick={confirmarPresenca}
  className="min-w-64"
>
  Confirmar presença
</Button>

<div className="flex w-full max-w-sm flex-col gap-2">
  <Button variant="primary" size="xl" fullWidth>Vou no culto!</Button>
  <Button variant="text" size="lg" fullWidth>Agora não</Button>
</div>

<TextField label="Nome completo" placeholder="Ex: Filipe" />
<TextField label="Busca" leadingIcon={<Search />} clearable />
<TextField label="Senha" type="password" />

<TextField mask="phone" placeholder="(21) 98765-4321" />
<TextField mask="currency" placeholder="R$ 0,00" />
<TextField mask="cpf" placeholder="000.000.000-00" />
<TextField mask="cep" placeholder="00000-000" />

<TextField
  label="E-mail"
  value={email}
  onChange={setEmail}
  error={isTouched && !isValid ? "Confira o e-mail: formato inválido." : undefined}
  success={isValid ? "E-mail válido e pronto para uso." : undefined}
/>

<TextareaField
  label="Edificação para a igreja"
  maxLength={500}
  showCount
  rows={3}
  autoGrow
/>

<Select value={version} onChange={setVersion}>
  <SelectTrigger>
    <SelectValue placeholder="Selecione a versão" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="NAA">Nova Almeida Atualizada</SelectItem>
    <SelectItem value="ARC">Almeida Revista e Corrigida</SelectItem>
    <SelectItem value="NVI">Nova Versão Internacional</SelectItem>
    <SelectItem value="KJA">King James Atualizada</SelectItem>
  </SelectContent>
</Select>

<Switch checked={notif} onChange={setNotif} />

<Switch size="sm" checked={val} onChange={setVal} />
<Switch size="md" checked={val} onChange={setVal} />

<SwitchField
  label="Lembrete de culto aos domingos"
  description="Aviso às 16h com link de caronas"
  checked={lembrete}
  onChange={setLembrete}
/>

<Checkbox
  checked={lido}
  onChange={setLido}
  label="Jeremias 38–39"
/>

<RadioGroup value={visibilidade} onChange={setVisibilidade}>
  <RadioCard value="equipe" label="Só a equipe de oração" description="Confidencialidade total" />
  <RadioCard value="feed" label="Também no feed" description="A igreja inteira ora junta" />
</RadioGroup>

<DropdownMenu>
  <DropdownTrigger>
    <IconButton icon={<MoreVertical />} aria-label="Mais opções" />
  </DropdownTrigger>
  <DropdownContent>
    <DropdownItem icon={<Share2 />}>Compartilhar</DropdownItem>
    <DropdownItem icon={<Copy />}>Copiar versículo</DropdownItem>
    <DropdownSeparator />
    <DropdownItem icon={<Flag />} destructive>Reportar</DropdownItem>
  </DropdownContent>
</DropdownMenu>

<ChipGroup value={filter} onChange={setFilter}>
  <Chip value="todas">Todas</Chip>
  <Chip value="proximas">Próximas</Chip>
  <Chip value="gravacao">Com gravação</Chip>
</ChipGroup>

<DayPicker selectedDate={day} onSelectDate={setDay} />
<TimeSlots
  slots={availableSlots}
  selectedTime={slot}
  onSelectTime={setSlot}
  durationMinutes={60}
/>

<Card variant="accent">
  <VerseCard verse="Salmos 23.1" text="O Senhor é o meu pastor..." />
</Card>

<Card variant="surface">
  <EventCard title="Estudo: Romanos 8" date="Quarta, 20h" />
</Card>

<Badge variant="primary">DEVOCIONAL</Badge>
<Badge variant="outline">TESTEMUNHO</Badge>
<StatusBadge status="confirmed" label="Confirmado" />
<StatusBadge status="live" label="Ao vivo" />

<BottomSheet open={open} onOpenChange={setOpen}>
  <BottomSheetContent>
    <BottomSheetHeader title="Escolha a versão da Bíblia" />
    <VersionPicker onSelect={handleSelect} />
  </BottomSheetContent>
</BottomSheet>

import { toast } from "@/components/ui/toast"

// Disparo simples
toast.success("Turno agendado na Sala de Oração");

// Com ação rápida
toast("Chave Pix copiada", {
  action: { label: "Ver QR Code", onClick: openQR }
});

<SegmentedControl value={tab} onChange={setTab}>
  <SegmentedControlItem value="capitulos">Capítulos</SegmentedControlItem>
  <SegmentedControlItem value="artigos">Artigos de Fé</SegmentedControlItem>
</SegmentedControl>

<Navbar>
  <Navbar.Brand logo={<ManifestoIcon />} name="Manifesto" />
  <Navbar.Nav>
    <Navbar.Link href="/" active>Início</Navbar.Link>
    <Navbar.Link href="/biblia">Bíblia</Navbar.Link>
    <Navbar.Link href="/estudos">Estudos</Navbar.Link>
    <Navbar.Link href="/saladeoracao">Sala de Oração</Navbar.Link>
  </Navbar.Nav>
  <Navbar.Actions>
    <Navbar.Search shortcut="⌘K" />
    <Navbar.Notifications unreadCount={2} />
    <Avatar name="Filipe Manifesto" fallback="FM" />
  </Navbar.Actions>
</Navbar>

// Raiz do app
<NavbarMobile>
  <Avatar fallback="FM" />
  <NavbarTitle>Comunidade Manifesto</NavbarTitle>
  <NotificationsButton hasUnread />
</NavbarMobile>

// Tela interna de leitura
<NavbarMobile>
  <BackButton onClick={() => router.back()} />
  <NavbarTitle>Romanos 8 · NAA</NavbarTitle>
  <ShareButton />
</NavbarMobile>

<Avatar size="md" fallback="FM" status="online" />

<AvatarGroup max={4} total={22}>
  <Avatar name="Filipe Manifesto" fallback="FM" />
  <Avatar name="Marina Lima" fallback="ML" />
  <Avatar name="André Ramos" fallback="AR" />
  <Avatar name="Carla Souza" fallback="CS" />
</AvatarGroup>

<SkeletonGroup loading={isLoading}>
  <SkeletonCard />
</SkeletonGroup>

<VerseCard
  verse="2 Coríntios 2.14"
  translation="NAA"
  text="Graças, porém, a Deus, que, em Cristo, sempre nos conduz em triunfo..."
  onShare={shareVerse}
/>

<ReadingPlanCard
  dayNumber={275}
  readings={[
    { reference: "Jeremias 38–39", completed: true },
    { reference: "2 Reis 25", completed: false },
    { reference: "Salmo 23", completed: false }
  ]}
  onToggleReading={handleCheck}
/>

<CommunityPostCard
  author="Rafael Lima"
  category="ORAÇÃO"
  content="Igreja, peço oração pela cirurgia da minha mãe..."
  prayCount={22}
  onPray={handlePray}
/>

<GiveCheckout
  purpose="dizimo"
  amount={100}
  pixKey="34.123.456/0001-78"
  onCopyPix={handleCopy}
/>