@sromero1905/bina-ui

Librería de componentes UI para Bina con Tailwind CSS preconfigurado.

🚀 Instalación

npm install @sromero1905/bina-ui
# o
yarn add @sromero1905/bina-ui

⚡ Configuración Rápida

1. Configurar Tailwind CSS

En tu tailwind.config.js, extiende el preset de Bina:

// tailwind.config.js
import binaPreset from '@sromero1905/bina-ui/tailwind.preset.js';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [binaPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Importante: incluir los componentes de la librería
    "./node_modules/@sromero1905/bina-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Tu configuración adicional aquí
    },
  },
  plugins: [],
}

2. Importar las fuentes

Agrega estas fuentes en tu HTML o CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

🎯 Uso

import { Button, Card, Badge } from '@sromero1905/bina-ui';

function App() {
  return (
    <Card>
      <h1>Hola Mundo</h1>
      <Button variant="solid" size="md">
        Botón de Bina
      </Button>
      <Badge variant="success">Activo</Badge>
    </Card>
  );
}

📦 Componentes Disponibles

Atoms

• Button, LoadingButton, DangerButton, ArrowButton, BackButton
• Input, Switch, Checkbox, Calendar
• Card, Badge, Alert, Spinner, SpinnerSuccess
• PageHeader, SectionTitle, DashboardTitle

Molecules

• FormField, EmailInput, PhoneInput, SearchInput
• Stepper, MobileStepper, ProgressBar
• StatusMenu, StatsMenu

🎨 Sistema de Diseño

La librería incluye:

• Paleta de colores completa de Bina
• Tipografías optimizadas (Nunito, Nunito Sans, Manrope)
• Sombras y espaciado consistente
• Componentes responsive y accesibles

📖 Documentación

Visita nuestra documentación completa para ver todos los componentes y ejemplos.

🤝 Contribuir

1. Fork el proyecto
2. Crea tu feature branch (git checkout -b feature/nuevo-componente)
3. Commit tus cambios (git commit -am 'Agregar nuevo componente')
4. Push a la branch (git push origin feature/nuevo-componente)
5. Abre un Pull Request

📄 Licencia

sromero1905 © Bina