Componentes prontos para o HTML que você já escreve.
Escreva data-tuc-datepicker num input e ele vira calendário. O mesmo vale para select com
busca, máscaras, modais e tabelas — sem build e sem dependências. Funciona com qualquer back-end que devolve HTML:
Django, Laravel, Rails, Phoenix, ASP.NET, Go ou Node, e também com HTMX.
Instalação
Dois arquivos e nada mais. Escolha o caminho do seu projeto — em qualquer um deles, quem consome não precisa de build.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JuniorCarlini/tucano@v0.37.2/dist/tucano.min.css">
<script src="https://cdn.jsdelivr.net/gh/JuniorCarlini/tucano@v0.37.2/dist/tucano.min.js" defer></script>Prenda sempre a versão. @latest fica muito tempo em cache no jsDelivr e serve build antigo sem avisar.
Copie a pasta dist/ para os estáticos do projeto:
{% load static %}
<link rel="stylesheet" href="{% static 'tucano/tucano.min.css' %}">
<script src="{% static 'tucano/tucano.min.js' %}" defer></script>npm install tucanoimport { DatePicker, Select, toast } from 'tucano';
import 'tucano/css';Pelo npm o empacotador leva só o que foi importado: o date picker sozinho custa um terço do pacote.
Como funciona
O HTML que você já escreve continua sendo o dono do valor. O componente só troca o desenho e acrescenta o comportamento.
data-tuc-* no <input> ou no <select> do template.htmx:afterSwap — sem uma linha de JavaScript.name, required e getlist() funcionam.<input type="text" name="due_date" data-tuc-datepicker>
<select name="state" data-tuc-select>...</select>
<input type="text" name="document" data-tuc-mask="cpf-cnpj">Convive com o Tailwind do seu projeto
O pacote não envia o preflight, e os componentes têm reset próprio: nem o CSS do projeto quebra o componente, nem o componente mexe no projeto.
Textos em outros idiomas
Datas e números seguem o lang da página. Os textos que os componentes escrevem sozinhos — o "Limpar"
do calendário, o "Buscar..." do select, o "Fechar" do modal, os rótulos lidos pelo leitor de tela — vêm em
português, e Tucano.setTexts() troca qualquer um deles, por grupo. O que não for passado continua como
estava, e a opção de cada instância (data-placeholder, emptyText, prevText)
continua valendo por cima. Não há dicionário de idiomas no pacote.
// Antes de os componentes montarem. Com o script em defer, dentro do DOMContentLoaded.
document.addEventListener('DOMContentLoaded', () => {
Tucano.setTexts({
datepicker: { clear: 'Clear', apply: 'Apply', previousMonth: 'Previous month',
nextMonth: 'Next month', placeholderLetters: 'ymdhms' },
select: { searchPlaceholder: 'Search...', emptyText: 'No results',
remove: (label) => `Remove ${label}` },
modal: { close: 'Close' },
toast: { close: 'Close' },
});
});O texto é lido quando o componente monta, então o que já está na tela não muda. Onde a frase depende de um número
ou de um nome, o valor é uma função. Os grupos têm o nome dos componentes — datepicker,
select, colorpicker, upload, mask, toast,
modal, drawer, table, pagination, editor e
prose —, e Tucano.getTexts() devolve uma cópia de todos. As chaves, com o padrão de cada
uma, estão no llms.txt.
Componentes
Cada um tem a própria página, com exemplos, o jeito Django, teclado e a API completa.