leira-ui 1.0.0

package/README.md

@@ -0,0 +1,209 @@
+# Leira UI
+
+<p align="center">
+  <img src="./public/leira-ui.svg" alt="Leira UI Logo" width="200" />
+</p>
+
+<p align="center">
+  <strong>Biblioteca de componentes React + Tailwind CSS</strong>
+</p>
+
+<p align="center">
+  Componentes modernos, elegantes y listos para usar en tus proyectos.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/leira-ui"><img src="https://img.shields.io/npm/v/leira-ui?color=violet" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/leira-ui"><img src="https://img.shields.io/npm/dm/leira-ui?color=blue" alt="npm downloads" /></a>
+  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react" alt="React 19" />
+  <img src="https://img.shields.io/badge/Tailwind-4-38B2AC?logo=tailwindcss" alt="Tailwind CSS 4" />
+  <img src="https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript" alt="TypeScript" />
+</p>
+
+---
+
+## 📸 Vista Previa
+
+<p align="center">
+  <img src="./src/assets/image.png" alt="Leira UI Preview" width="100%" />
+</p>
+
+---
+
+## ✨ Características
+
+- 🎨 **Tema oscuro premium** por defecto
+- ⚡ **React 19** compatible
+- 🌊 **Tailwind CSS 4** optimizado  
+- 📦 **TypeScript** con tipos incluidos
+- 🎭 **Animaciones suaves** y transiciones elegantes
+- 📱 **Responsive** y accesible
+- 📋 **Copy & Paste** - Copia el código directamente
+
+---
+
+## 📦 Instalación
+
+### Opción 1: Paquete NPM (Recomendado)
+
+```bash
+npm install leira-ui
+```
+
+```bash
+pnpm add leira-ui
+```
+
+```bash
+yarn add leira-ui
+```
+
+### 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
+
+```bash
+npm install leira-ui lucide-react
+```
+
+### 2. Importa y usa los componentes
+
+```tsx
+import { Button, Card, CardBody, Input, Alert } from 'leira-ui'
+
+function App() {
+  return (
+    <Card hover>
+      <CardBody>
+        <Input label="Email" placeholder="tu@email.com" />
+        <Button variant="primary">Enviar</Button>
+        <Alert variant="success">¡Operación exitosa!</Alert>
+      </CardBody>
+    </Card>
+  )
+}
+```
+
+---
+
+## 🧩 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 | ✅ |
+
+---
+
+## 📖 Documentación
+
+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:
+
+```css
+: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;
+}
+```
+
+---
+
+## 🛠️ Desarrollo Local
+
+```bash
+# Clonar el repositorio
+git clone https://github.com/tu-usuario/leira-ui.git
+cd leira-ui
+
+# Instalar dependencias
+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
+
+---
+
+<p align="center">
+  Hecho con 💜 para la comunidad React
+</p>

package/dist-lib/Accordion.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+interface AccordionItem {
+    id: string;
+    title: string;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpenIds?: string[];
+    className?: string;
+}
+export declare function Accordion({ items, allowMultiple, defaultOpenIds, className }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Alert.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+type AlertVariant = 'success' | 'warning' | 'error' | 'info';
+interface AlertProps {
+    children: ReactNode;
+    variant?: AlertVariant;
+    title?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function Alert({ children, variant, title, dismissible, onDismiss, className }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Badge.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    className?: string;
+}
+export declare function Badge({ children, variant, size, dot, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Button.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+}
+export declare function Button({ children, variant, size, loading, icon, iconPosition, className, disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Card.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    hover?: boolean;
+    glow?: boolean;
+}
+interface CardHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+interface CardBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+interface CardFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function Card({ children, className, hover, glow }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ children, className }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardBody({ children, className }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ children, className }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+interface ImageCardProps {
+    image: string;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function ImageCard({ image, title, description, children, className }: ImageCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Carousel.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+interface CarouselItem {
+    id: string;
+    content: ReactNode;
+}
+interface CarouselProps {
+    items: CarouselItem[];
+    autoPlay?: boolean;
+    interval?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    variant?: 'default' | 'fade' | 'slide';
+    className?: string;
+}
+export declare function Carousel({ items, autoPlay, interval, showArrows, showDots, variant, className }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+interface ImageCarouselProps {
+    images: Array<{
+        src: string;
+        alt: string;
+        caption?: string;
+    }>;
+    autoPlay?: boolean;
+    interval?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    showCaption?: boolean;
+    aspectRatio?: 'video' | 'square' | 'wide';
+    className?: string;
+}
+export declare function ImageCarousel({ images, autoPlay, interval, showArrows, showDots, showCaption, aspectRatio, className }: ImageCarouselProps): import("react/jsx-runtime").JSX.Element;
+interface CardCarouselProps {
+    children: ReactNode[];
+    visibleCards?: number;
+    gap?: number;
+    showArrows?: boolean;
+    className?: string;
+}
+export declare function CardCarousel({ children, visibleCards, gap, showArrows, className }: CardCarouselProps): import("react/jsx-runtime").JSX.Element;
+interface Testimonial {
+    id: string;
+    content: string;
+    author: string;
+    role?: string;
+    avatar?: string;
+}
+interface TestimonialCarouselProps {
+    testimonials: Testimonial[];
+    autoPlay?: boolean;
+    interval?: number;
+    className?: string;
+}
+export declare function TestimonialCarousel({ testimonials, autoPlay, interval, className }: TestimonialCarouselProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Input.d.ts

@@ -0,0 +1,16 @@
+import { type InputHTMLAttributes, type TextareaHTMLAttributes, type ReactNode } from 'react';
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist-lib/Modal.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnOverlay?: boolean;
+    closeOnEscape?: boolean;
+}
+export declare function Modal({ isOpen, onClose, children, title, size, closeOnOverlay, closeOnEscape }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+interface ModalFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ModalFooter({ children, className }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Spinner.d.ts

@@ -0,0 +1,16 @@
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerVariant = 'default' | 'primary' | 'dots' | 'pulse';
+interface SpinnerProps {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+    className?: string;
+}
+export declare function Spinner({ size, variant, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    className?: string;
+}
+export declare function Skeleton({ width, height, rounded, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Tabs.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+interface TabItem {
+    id: string;
+    label: string;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    items: TabItem[];
+    defaultActiveId?: string;
+    onChange?: (id: string) => void;
+    variant?: 'underline' | 'pills' | 'boxed';
+    className?: string;
+}
+export declare function Tabs({ items, defaultActiveId, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    position?: TooltipPosition;
+    delay?: number;
+    className?: string;
+}
+export declare function Tooltip({ children, content, position, delay, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/index.d.ts

@@ -0,0 +1,12 @@
+export { Card, CardHeader, CardBody, CardFooter, ImageCard } from './Card';
+export { Button } from './Button';
+export { Input, Textarea } from './Input';
+export { Alert } from './Alert';
+export { Modal, ModalFooter } from './Modal';
+export { Spinner, Skeleton } from './Spinner';
+export { Tooltip } from './Tooltip';
+export { Tabs } from './Tabs';
+export { Accordion } from './Accordion';
+export { Badge } from './Badge';
+export { Carousel, ImageCarousel, CardCarousel, TestimonialCarousel } from './Carousel';
+export type { ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';