⚡️ Zuper UI

Zuper UI es una librería de componentes de React moderna, minimalista y de alto rendimiento, diseñada para construir interfaces premium con facilidad. Basada en TypeScript, Next.js ready y con un sistema de diseño atómico profundamente personalizable.

✨ Características

• 🌑 Theme Aware: Soporte nativo para modo claro y oscuro con detección automática de contexto.
• 🏗️ Diseño Atómico: Componentes modulares y reutilizables desglosados en pequeñas unidades.
• 🎨 Tokens de Diseño: Sistema completo de variables CSS para colores, espaciados y tipografía.
• 🪄 Micro-animaciones: Transiciones fluidas y feedback visual premium integrados.
• 🛠️ Fully Typed: Escrita totalmente en TypeScript para una experiencia de desarrollo robusta.
• 📦 Tree Shakeable: Solo importa lo que realmente usas.

🚀 Instalación

npm install zuper-ui
# o
yarn add zuper-ui

📖 Inicio Rápido

Para utilizar la librería, asegúrate de importar los estilos globales en el punto de entrada de tu aplicación (ej. layout.tsx o _app.tsx):

import 'zuper-ui/dist/style.css';

Luego, simplemente importa y usa tus componentes:

import { ZButton, ZCard, ZFormatedText } from 'zuper-ui';

function MyComponent() {
  return (
    <ZCard elevated paddingX="lg" paddingY="lg">
      <ZFormatedText type="heading-3">¡Hola Mundo!</ZFormatedText>
      <ZButton label="Empezar" color="primary" elevated />
    </ZCard>
  );
}

🧱 Componentes Incluidos

Zuper UI viene cargada con una suite de componentes listos para producción:

🧩 Core

• ZButton: Botones versátiles con variantes, iconos y estados de carga.
• ZCard: Contenedores premium con sombras dinámicas y control de temas.
• ZIcon: Integración fluida con Lucide React.
• ZChip: Etiquetas informativas y decorativas.

📝 Formularios & Entrada

• ZInput: Entradas de texto inteligentes con validación y temas dinámicos.
• ZSelect: Dropdowns personalizados con búsqueda (searchable) y soporte de nulos.
• ZSearch: Barra de búsqueda optimizada.

📊 Datos & Navegación

• ZTable: Tablas de datos estructuradas.
• ZPagination: Control de navegación para grandes conjuntos de datos.
• ZList & ZListItem: Listas de navegación ultra-estilizadas.
• ZDropdownButton: Menús contextuales desplegables.

🎭 Feedback & Overlays

• ZToast & ZSnackbar: Notificaciones efímeras y feedback rápido.
• ZModal: Diálogos modales accesibles.
• ZCircularProgress: Indicadores de carga fluidos.
• LoaderOverlay: Pantallas de carga para bloqueo de interfaz.

🎨 Tipografía Inteligente

El componente ZFormatedText es el corazón tipográfico del sistema:

<ZFormatedText 
  type="currency" 
  text={25000} 
  currencyCode="USD" 
  locale="en-US" 
  textColor="success" 
  bold 
/>

Soporta jerarquía completa de headings (H1-H6), body text, captions, overlines y formateo internacional de monedas.

🛠️ Desarrollo & Contribución

Si deseas contribuir a Zuper UI:

1. Clona el repositorio.
2. Instala dependencias con npm install.
3. Ejecuta npm run build para generar el paquete distribuible.

📄 Licencia

Este proyecto está bajo la licencia MIT.