Componentes listos para el HTML que ya escribes.
Escribe data-tuc-datepicker en un input y se convierte en calendario. Lo mismo vale para select
con búsqueda, máscaras, modales y tablas — sin build y sin dependencias. Funciona con cualquier back-end que devuelva
HTML: Django, Laravel, Rails, Phoenix, ASP.NET, Go o Node, y también con HTMX.
Instalación
Dos archivos y nada más. Elige el camino que encaje con tu proyecto — ninguno exige un paso de build de tu lado.
<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>Fija siempre la versión. @latest se queda mucho tiempo en la caché de jsDelivr y sirve un build antiguo sin avisar.
Copia la carpeta dist/ a los archivos estáticos de tu proyecto. En Django:
{% 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';Con npm tu empaquetador se queda solo con lo que importas: el date picker por sí solo es un tercio del paquete. Importar
desde tucano no inicializa los campos solo — llama a Tucano.init(document) o importa
tucano/auto.
Cómo funciona
El HTML que ya escribes sigue siendo el dueño del valor. El componente solo cambia el aspecto y añade el comportamiento.
data-tuc-* en el <input> o el <select> de tu plantilla.htmx:afterSwap — sin una línea de JavaScript.name, required y los valores múltiples funcionan como siempre.<input type="text" name="due_date" data-tuc-datepicker>
<select name="state" data-tuc-select>...</select>
<input type="text" name="card" data-tuc-mask="card">Fechas y números siguen el idioma de tu página
El date picker lee <html lang> para los nombres de los meses, los días de la semana y el formato de fecha, y las máscaras de moneda reciben un código de moneda. Las etiquetas y los placeholders pueden ir en tu plantilla, como data-placeholder="Buscar clientes...", y los textos que los componentes escriben por su cuenta — en portugués por defecto — se cambian con Tucano.setTexts().
Convive bien con el Tailwind de tu proyecto
El paquete no trae el preflight, y los componentes llevan su propio reset: tu CSS no rompe los componentes, y los componentes no tocan tu proyecto.
Textos en otros idiomas
Los textos que los componentes escriben por su cuenta — el "Limpar" del calendario, el "Buscar..." del select, el
"Fechar" del modal, las etiquetas que lee el lector de pantalla — vienen en portugués, y
Tucano.setTexts() reemplaza cualquiera de ellos, por grupo. Lo que no pases queda como estaba, y la
opción propia de cada instancia (data-placeholder, emptyText, prevText) sigue
ganando. El paquete no trae diccionarios de idiomas.
// Antes de que los componentes se monten. Con el script en defer, dentro de DOMContentLoaded.
document.addEventListener('DOMContentLoaded', () => {
Tucano.setTexts({
datepicker: { clear: 'Borrar', apply: 'Aplicar', previousMonth: 'Mes anterior',
nextMonth: 'Mes siguiente', placeholderLetters: 'amdhms' },
select: { searchPlaceholder: 'Buscar...', emptyText: 'Sin resultados',
remove: (label) => `Quitar ${label}` },
modal: { close: 'Cerrar' },
toast: { close: 'Cerrar' },
});
});El texto se lee cuando el componente se monta, así que lo que ya está en pantalla no cambia. Donde la frase depende
de un número o de un nombre, el valor es una función. Los grupos llevan el nombre de los componentes —
datepicker, select, colorpicker, upload, mask,
toast, modal, drawer, table, pagination,
editor y prose — y Tucano.getTexts() devuelve una copia de todos. Las claves,
con el valor por defecto de cada una, están en llms.txt. Este sitio
hace lo mismo: en todas las páginas en español, los componentes hablan español.
Componentes
Cada uno tiene su propia página con ejemplos, el camino de Django, el soporte de teclado y la API completa. Para un
asistente de IA, indícale la referencia llms.txt.