Os 16 componentes-base e os tokens do Lunamus

<button type="button" class="inline-flex items-center rounded-md bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-600">Salvar alterações</button>

<label class="flex max-w-xs flex-col gap-1.5">
  <span class="text-sm font-semibold text-gray-900">Nome completo</span>
  <input type="text" value="Ana Souza" placeholder="Digite seu nome" class="rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30" />
  <span class="text-xs text-gray-500">Como aparece no seu documento oficial.</span>
</label>

<label class="flex max-w-xs flex-col gap-1.5">
  <span class="text-sm font-semibold text-gray-900">Mensagem</span>
  <textarea rows="4" class="resize-y rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30">Obrigado pelo retorno rápido!</textarea>
</label>

<label class="flex max-w-[200px] flex-col gap-1.5">
  <span class="text-sm font-semibold text-gray-900">País</span>
  <select class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30">
    <option>Brasil</option>
    <option>Portugal</option>
    <option>Estados Unidos</option>
  </select>
</label>

<label class="inline-flex items-center gap-2 text-sm text-gray-900">
  <input type="checkbox" checked class="size-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500" />
  Aceito os termos de uso
</label>

<fieldset class="flex flex-col gap-2">
  <legend class="mb-1 text-sm font-semibold text-gray-900">Plano</legend>
  <label class="inline-flex items-center gap-2 text-sm text-gray-900">
    <input type="radio" name="tw-plano" checked class="size-4 border-gray-300 text-primary-500 focus:ring-primary-500" /> Mensal
  </label>
  <label class="inline-flex items-center gap-2 text-sm text-gray-900">
    <input type="radio" name="tw-plano" class="size-4 border-gray-300 text-primary-500 focus:ring-primary-500" /> Anual (2 meses grátis)
  </label>
</fieldset>

<label class="inline-flex cursor-pointer items-center gap-2.5">
  <input type="checkbox" checked class="peer sr-only" />
  <span class="relative h-6 w-11 rounded-full bg-gray-300 transition-colors peer-checked:bg-primary-500 after:absolute after:left-0.5 after:top-0.5 after:size-5 after:rounded-full after:bg-white after:transition-transform peer-checked:after:translate-x-5"></span>
  <span class="text-sm text-gray-900">Notificações ativas</span>
</label>

<input type="checkbox" id="tw-modal-toggle" class="peer hidden" />
<label for="tw-modal-toggle" class="inline-flex items-center rounded-md bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-600 cursor-pointer">Abrir modal</label>

<div class="fixed inset-0 hidden items-center justify-center bg-black/50 peer-checked:flex">
  <div class="w-full max-w-sm rounded-lg bg-white p-6 shadow-xl">
    <h3 class="mb-2 text-base font-bold text-gray-900">Confirmar exclusão</h3>
    <p class="mb-5 text-sm text-gray-600">Essa ação não pode ser desfeita. Deseja continuar?</p>
    <div class="flex gap-3">
      <label for="tw-modal-toggle" class="inline-flex items-center rounded-md border border-primary-500 px-5 py-2.5 text-sm font-semibold text-primary-500 hover:bg-primary-50 cursor-pointer">Cancelar</label>
      <label for="tw-modal-toggle" class="inline-flex items-center rounded-md bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-600 cursor-pointer">Confirmar</label>
    </div>
  </div>
</div>

<input type="checkbox" id="tw-toast-toggle" class="peer hidden" />
<label for="tw-toast-toggle" class="inline-flex items-center rounded-md bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-600 cursor-pointer">Mostrar notificação</label>

<div class="fixed bottom-4 right-4 hidden items-center gap-2.5 rounded-lg bg-gray-900 px-3.5 py-3 text-sm text-white shadow-xl peer-checked:flex">
  <span class="size-2 rounded-full bg-emerald-500"></span>
  <span>Alterações salvas com sucesso.</span>
  <label for="tw-toast-toggle" class="ml-2 cursor-pointer text-white/70 hover:text-white">×</label>
</div>

<article class="max-w-[280px] rounded-xl border border-gray-200 bg-white p-5">
  <header class="flex items-center justify-between gap-2">
    <h3 class="text-base font-bold text-gray-900">Plano Pro</h3>
    <span class="rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-bold uppercase text-primary-600">Popular</span>
  </header>
  <p class="mt-3 mb-4 text-sm leading-relaxed text-gray-600">Tudo que você precisa para escalar seu projeto, com suporte prioritário.</p>
  <footer>
    <button type="button" class="inline-flex items-center rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600">Assinar agora</button>
  </footer>
</article>

<table class="w-full border-collapse text-sm">
  <thead>
    <tr class="border-b border-gray-200 text-left text-xs uppercase tracking-wide text-gray-500">
      <th class="py-2.5 pr-4 font-medium">Nome</th>
      <th class="py-2.5 pr-4 font-medium">Cargo</th>
      <th class="py-2.5 font-medium">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b border-gray-100">
      <td class="py-2.5 pr-4 text-gray-900">Ana Souza</td>
      <td class="py-2.5 pr-4 text-gray-600">Designer</td>
      <td class="py-2.5"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Ativo</span></td>
    </tr>
    <tr>
      <td class="py-2.5 pr-4 text-gray-900">Bruno Lima</td>
      <td class="py-2.5 pr-4 text-gray-600">Desenvolvedor</td>
      <td class="py-2.5"><span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700">Pendente</span></td>
    </tr>
  </tbody>
</table>

<span class="rounded-full bg-primary-100 px-3 py-1 text-xs font-semibold text-primary-600">Novo</span>

<span class="flex size-9 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-white">AS</span>

<div class="max-w-sm">
  <input type="radio" name="tw-tabs" id="tw-tab-1" checked class="tw-tab-input hidden" />
  <input type="radio" name="tw-tabs" id="tw-tab-2" class="tw-tab-input hidden" />
  <input type="radio" name="tw-tabs" id="tw-tab-3" class="tw-tab-input hidden" />

  <div class="tw-tab-list flex gap-1 border-b border-gray-200">
    <label for="tw-tab-1" class="cursor-pointer border-b-2 border-transparent px-3.5 py-2 text-sm font-semibold text-gray-500">Visão geral</label>
    <label for="tw-tab-2" class="cursor-pointer border-b-2 border-transparent px-3.5 py-2 text-sm font-semibold text-gray-500">Detalhes</label>
    <label for="tw-tab-3" class="cursor-pointer border-b-2 border-transparent px-3.5 py-2 text-sm font-semibold text-gray-500">Histórico</label>
  </div>

  <div class="tw-tab-panel-1 hidden py-3.5 text-sm text-gray-700">Resumo geral do projeto selecionado.</div>
  <div class="tw-tab-panel-2 hidden py-3.5 text-sm text-gray-700">Informações detalhadas e especificações técnicas.</div>
  <div class="tw-tab-panel-3 hidden py-3.5 text-sm text-gray-700">Linha do tempo das últimas alterações.</div>
</div>

#tw-tab-1:checked ~ .tw-tab-panel-1,
#tw-tab-2:checked ~ .tw-tab-panel-2,
#tw-tab-3:checked ~ .tw-tab-panel-3 { display: block; }
#tw-tab-1:checked ~ .tw-tab-list label[for="tw-tab-1"],
#tw-tab-2:checked ~ .tw-tab-list label[for="tw-tab-2"],
#tw-tab-3:checked ~ .tw-tab-list label[for="tw-tab-3"] { color: #A7CF22; border-bottom-color: #A7CF22; }

<span class="group relative inline-block">
  <button type="button" class="inline-flex items-center rounded-md border border-primary-500 px-5 py-2.5 text-sm font-semibold text-primary-500 hover:bg-primary-50">Ajuda</button>
  <span class="absolute bottom-full left-1/2 mb-2 hidden w-max max-w-[200px] -translate-x-1/2 rounded-md bg-gray-900 px-2.5 py-2 text-xs leading-snug text-white group-hover:block group-focus-within:block">Clique para ver mais informações sobre este recurso.</span>
</span>

<input type="checkbox" id="tw-alert-dismiss" class="peer hidden" />
<div class="flex max-w-md items-center justify-between gap-3 rounded-lg border border-amber-200 bg-amber-50 px-3.5 py-3 text-sm text-amber-800 peer-checked:hidden">
  <span>Sua assinatura vence em 3 dias. Renove para não perder o acesso.</span>
  <label for="tw-alert-dismiss" class="cursor-pointer text-base leading-none text-amber-700/70 hover:text-amber-700">×</label>
</div>