leira-ui 1.1.0 → 1.2.0

package/README.md

@@ -20,6 +20,11 @@
   <img src="https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript" alt="TypeScript" />
 </p>
 
+<p align="center">
+  <a href="https://github.com/citylightsnewer/leira-ui"><img src="https://img.shields.io/badge/GitHub-Repositorio-181717?logo=github" alt="GitHub" /></a>
+  <a href="https://ko-fi.com/leira_qc"><img src="https://img.shields.io/badge/Ko--fi-Donar-FF5E5B?logo=kofi" alt="Ko-fi" /></a>
+</p>
+
 ---
 
 ## 📸 Vista Previa
@@ -44,35 +49,29 @@
 
 ## 📦 Instalación
 
-### Opción 1: Paquete NPM (Recomendado)
-
 ```bash
-npm install leira-ui
+npm install leira-ui lucide-react
 ```
 
 ```bash
-pnpm add leira-ui
+pnpm add leira-ui lucide-react
 ```
 
 ```bash
-yarn add leira-ui
+yarn add leira-ui lucide-react
 ```
 
-### Opción 2: Copiar y Pegar
-
-Visita la [documentación](https://leira-ui.vercel.app) y copia el código de cada componente directamente a tu proyecto.
-
 ---
 
 ## ⚡ Inicio Rápido
 
-### 1. Instala las dependencias
+### 1. Importa los estilos en tu archivo principal (main.tsx o App.tsx)
 
-```bash
-npm install leira-ui lucide-react
+```tsx
+import 'leira-ui/styles.css'
 ```
 
-### 2. Importa y usa los componentes
+### 2. Usa los componentes
 
 ```tsx
 import { Button, Card, CardBody, Input, Alert } from 'leira-ui'
@@ -94,20 +93,55 @@ function App() {
 
 ## 🧩 Componentes Disponibles
 
-| Componente | Descripción | Requiere lucide-react |
-|------------|-------------|:---------------------:|
-| `Button` | Botones con variantes, tamaños y estados de carga | ❌ |
-| `Card` | Tarjetas con header, body, footer y hover effects | ❌ |
-| `Input` | Campos de entrada con validación e iconos | ❌ |
-| `Textarea` | Área de texto con validación | ❌ |
-| `Alert` | Alertas de notificación con variantes | ✅ |
-| `Modal` | Modales con animaciones | ✅ |
-| `Badge` | Etiquetas y badges con estilos | ❌ |
-| `Tabs` | Pestañas con estilos pill y underline | ❌ |
-| `Accordion` | Acordeones colapsables con animaciones | ✅ |
-| `Tooltip` | Tooltips con posicionamiento flexible | ❌ |
-| `Spinner` | Indicadores de carga y skeletons | ❌ |
-| `Carousel` | Carruseles de imágenes, cards y testimonios | ✅ |
+### Formularios
+| Componente | Descripción |
+|------------|-------------|
+| `Button` | Botones con variantes, tamaños y estados de carga |
+| `Input` | Campos de entrada con validación e iconos |
+| `Textarea` | Área de texto con validación |
+
+### Layout
+| Componente | Descripción |
+|------------|-------------|
+| `Card` | Tarjetas con header, body, footer y hover effects |
+| `ImageCard` | Cards con imagen destacada |
+
+### Navegación
+| Componente | Descripción |
+|------------|-------------|
+| `Navbar` | Barra de navegación responsive con dropdowns |
+| `Sidebar` | Menú lateral colapsable |
+| `DropdownMenu` | Menú desplegable |
+| `Breadcrumb` | Navegación de migas de pan |
+| `Tabs` | Pestañas con estilos pill y underline |
+
+### Feedback
+| Componente | Descripción |
+|------------|-------------|
+| `Alert` | Alertas de notificación con variantes |
+| `Modal` | Modales con animaciones |
+| `Tooltip` | Tooltips con posicionamiento flexible |
+| `Spinner` | Indicadores de carga |
+| `Skeleton` | Placeholders de carga |
+
+### Secciones
+| Componente | Descripción |
+|------------|-------------|
+| `SimpleFooter` | Footer minimalista |
+| `MultiColumnFooter` | Footer con múltiples columnas |
+| `CenteredFooter` | Footer centrado |
+| `NewsletterFooter` | Footer con suscripción |
+
+### Data Display
+| Componente | Descripción |
+|------------|-------------|
+| `Badge` | Etiquetas y badges con estilos |
+| `Accordion` | Acordeones colapsables con animaciones |
+| `Carousel` | Carrusel básico |
+| `ImageCarousel` | Carrusel de imágenes |
+| `CardCarousel` | Carrusel de cards |
+| `CoverflowCarousel` | Carrusel 3D con perspectiva |
+| `TestimonialCarousel` | Carrusel de testimonios |
 
 ---
 
@@ -117,17 +151,11 @@ Visita nuestra documentación completa con ejemplos interactivos:
 
 🔗 **[leira-ui.vercel.app](https://leira-ui.vercel.app)**
 
-En la documentación encontrarás:
-- ✅ Ejemplos interactivos de cada componente
-- ✅ Código completo para copiar
-- ✅ Guía de instalación paso a paso
-- ✅ Props y variantes de cada componente
-
 ---
 
 ## 🎨 Personalización
 
-Los componentes usan variables CSS que puedes personalizar en tu proyecto:
+Los componentes usan variables CSS que puedes personalizar:
 
 ```css
 :root {
@@ -157,47 +185,12 @@ pnpm install
 # Iniciar servidor de desarrollo
 pnpm dev
 
-# Build documentación (Vercel)
-pnpm build
-
 # Build paquete NPM
 pnpm build:lib
 ```
 
 ---
 
-## 📁 Estructura del Proyecto
-
-```
-leira-ui/
-├── src/
-│   ├── components/
-│   │   ├── ui/              # 📦 Componentes (NPM)
-│   │   │   ├── Button.tsx
-│   │   │   ├── Card.tsx
-│   │   │   ├── Input.tsx
-│   │   │   └── ...
-│   │   └── docs/            # 🌐 Solo documentación
-│   └── pages/               # 🌐 Páginas de docs
-├── dist/                    # Build Vercel
-├── dist-lib/                # Build NPM
-└── package.json
-```
-
----
-
-## 🤝 Contribuir
-
-¡Las contribuciones son bienvenidas! Si tienes ideas para nuevos componentes o mejoras:
-
-1. Haz fork del repositorio
-2. Crea una rama (`git checkout -b feature/nuevo-componente`)
-3. Haz commit de tus cambios (`git commit -m 'Agregar nuevo componente'`)
-4. Push a la rama (`git push origin feature/nuevo-componente`)
-5. Abre un Pull Request
-
----
-
 ## 📄 Licencia
 
 MIT © Leira UI

package/dist-lib/Carousel.d.ts

@@ -50,4 +50,15 @@ interface TestimonialCarouselProps {
     className?: string;
 }
 export declare function TestimonialCarousel({ testimonials, autoPlay, interval, className }: TestimonialCarouselProps): import("react/jsx-runtime").JSX.Element;
+interface CoverflowCarouselProps {
+    images: Array<{
+        src: string;
+        alt: string;
+        caption?: string;
+    }>;
+    autoPlay?: boolean;
+    interval?: number;
+    className?: string;
+}
+export declare function CoverflowCarousel({ images, autoPlay, interval, className }: CoverflowCarouselProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist-lib/Footer.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+interface FooterLink {
+    label: string;
+    href: string;
+}
+interface FooterSection {
+    title: string;
+    links: FooterLink[];
+}
+interface SocialLink {
+    icon: ReactNode;
+    href: string;
+    label: string;
+}
+interface SimpleFooterProps {
+    logo?: ReactNode;
+    copyright?: string;
+    links?: FooterLink[];
+    className?: string;
+}
+export declare function SimpleFooter({ logo, copyright, links, className }: SimpleFooterProps): import("react/jsx-runtime").JSX.Element;
+interface MultiColumnFooterProps {
+    logo?: ReactNode;
+    description?: string;
+    sections: FooterSection[];
+    socialLinks?: SocialLink[];
+    copyright?: string;
+    className?: string;
+}
+export declare function MultiColumnFooter({ logo, description, sections, socialLinks, copyright, className }: MultiColumnFooterProps): import("react/jsx-runtime").JSX.Element;
+interface CenteredFooterProps {
+    logo?: ReactNode;
+    tagline?: string;
+    links?: FooterLink[];
+    socialLinks?: SocialLink[];
+    copyright?: string;
+    className?: string;
+}
+export declare function CenteredFooter({ logo, tagline, links, socialLinks, copyright, className }: CenteredFooterProps): import("react/jsx-runtime").JSX.Element;
+interface NewsletterFooterProps {
+    logo?: ReactNode;
+    title?: string;
+    description?: string;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    onSubmit?: (email: string) => void;
+    sections?: FooterSection[];
+    copyright?: string;
+    className?: string;
+}
+export declare function NewsletterFooter({ logo, title, description, inputPlaceholder, buttonText, onSubmit, sections, copyright, className }: NewsletterFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Menu.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+interface MenuItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    children?: MenuItem[];
+    disabled?: boolean;
+}
+interface NavbarProps {
+    logo?: ReactNode;
+    items: MenuItem[];
+    variant?: 'default' | 'transparent' | 'bordered';
+    sticky?: boolean;
+    className?: string;
+    actions?: ReactNode;
+}
+interface DropdownMenuProps {
+    trigger: ReactNode;
+    items: MenuItem[];
+    position?: 'left' | 'right';
+    className?: string;
+}
+export declare function Navbar({ logo, items, variant, sticky, className, actions }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ trigger, items, position, className }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+interface SidebarProps {
+    items: MenuItem[];
+    header?: ReactNode;
+    footer?: ReactNode;
+    collapsed?: boolean;
+    className?: string;
+}
+export declare function Sidebar({ items, header, footer, collapsed, className }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+}
+export declare function Breadcrumb({ items, separator, className }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/index.d.ts

@@ -8,6 +8,8 @@ export { Spinner, Skeleton } from './Spinner';
 export { Tooltip } from './Tooltip';
 export { Tabs } from './Tabs';
 export { Accordion } from './Accordion';
+export { Navbar, DropdownMenu, Sidebar, Breadcrumb } from './Menu';
+export { SimpleFooter, MultiColumnFooter, CenteredFooter, NewsletterFooter } from './Footer';
 export { Badge } from './Badge';
-export { Carousel, ImageCarousel, CardCarousel, TestimonialCarousel } from './Carousel';
+export { Carousel, ImageCarousel, CardCarousel, TestimonialCarousel, CoverflowCarousel } from './Carousel';
 export type { ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';

package/dist-lib/leira-ui.css

@@ -1 +1 @@
-:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #16161f;--bg-hover: #1e1e2a;--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #666680;--border-color: #2a2a3a}.gradient-text{background:linear-gradient(135deg,#8b5cf6,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .2s ease-out}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scale-in{animation:scale-in .2s ease-out}
+:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #16161f;--bg-hover: #1e1e2a;--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #666680;--border-color: #2a2a3a}.gradient-text{background:linear-gradient(135deg,#8b5cf6,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .2s ease-out}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scale-in{animation:scale-in .2s ease-out}@keyframes slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.animate-slide-in-right{animation:slide-in-right .3s ease-out}