@aleric.dev/ui 0.0.0-stage → 0.4.1

package/README.md

@@ -1,3 +1,121 @@
-# Temporary Holding Version
+# @aleric.dev/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> **Sistema de Diseño Atómico y Componentes UI Limpios para React 19 y Tailwind CSS**
+
+`@aleric.dev/ui` es una biblioteca de componentes visuales desacoplados, 100% tipados con TypeScript y listos para construir dashboards modernos, paneles SaaS y aplicaciones multi-tenant sin dependencias de marcas propietarias.
+
+---
+
+## 📦 Instalación
+
+```bash
+npm install @aleric.dev/ui
+# o con pnpm
+pnpm add @aleric.dev/ui
+```
+
+Importa la hoja de estilos en tu punto de entrada (`main.tsx` o `App.tsx`):
+
+```tsx
+import '@aleric.dev/ui/dist/styles.css';
+```
+
+---
+
+## 🧩 Catálogo de Componentes
+
+### 1. Átomos (`atoms`)
+- **`Button`**: Variantes (`primary`, `secondary`, `outline`, `ghost`, `danger`), tamaños (`sm`, `md`, `lg`), estados de carga (`loading`) y slots para iconos.
+- **`Badge`**: Variantes semánticas (`indigo`, `emerald`, `amber`, `rose`, `slate`), con soporte de indicador circular (`dot`).
+- **`Card`**: Contenedores estructurados (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`) con soporte de hover.
+- **`Input` / `Textarea`**: Entradas de formulario con estados de error, soporte monoespaciado y slots para iconos.
+- **`Select`**: Dropdown estilizado para opciones tipadas.
+- **`Toggle` / `StatusToggle`**: Interruptores accesibles para alternancia de estados de negocio.
+- **`Modal`**: Diálogos accesibles con animación de entrada, backdrop y cierre con tecla Escape.
+- **`Spinner`**: Indicador de carga animado.
+- **`SocialIcon`**: Iconografía vectorial para redes y plataformas.
+
+### 2. Moléculas (`molecules`)
+- **`FormField`**: Wrapper de campo con etiqueta, indicador de requerido, textos de ayuda y manejo de errores.
+- **`SearchInput`**: Input de búsqueda con icono de lupa y botón para limpiar texto.
+- **`ConfirmDialog`**: Diálogo modal preconfigurado para confirmaciones o acciones críticas.
+- **`EmptyState`**: Estado vacío elegante para listas y tablas con llamadas a la acción.
+- **`MetricStatCard`**: Tarjetas de indicadores KPI con valores y tendencias de crecimiento.
+- **`MetricStrip`**: Fila/rejilla responsive de métricas con separadores sutiles y acentos cromáticos.
+- **`StatusBadge`**: Badge que mapea estados de ciclo de vida (`active`, `pending`, `ready`, `resolved`) con estilos consistentes.
+- **`DatePicker`**: Selector de fechas con portal flotante y atajos rápidos (*"Hoy"*, *"Mañana"*, *"+1 Sem"*).
+- **`MarkdownRenderer`**: Renderizador de texto enriquecido en markdown sanitizado.
+
+### 3. Organismos (`organisms`)
+- **`Sidebar`**: Barra de navegación lateral colapsable a iconos con tooltips emergentes, grupos jerárquicos (`NavGroup[]`), soporte responsive (drawer móvil con backdrop) y slots libres para logo de marca y pie de usuario.
+- **`TopNav`**: Barra superior con navegación por migas de pan (`Breadcrumbs`), títulos dinámicos, botones de acción y switcher de tema.
+- **`NotificationCenter`**: Centro de notificaciones desplegable con conteo de no leídas y filtrado de eventos.
+
+### 4. Templates & Layouts (`templates`)
+- **`AppLayout`**: Ensamblador maestro de pantalla completa que combina `Sidebar` + `TopNav` + área de contenido con scroll independiente y tema oscuro slate.
+- **`StudioLayout`**: Layout de pantalla completa optimizado para editores y lienzos visuales.
+
+---
+
+## 🚀 Ejemplo de Uso: Dashboard Multi-Tenant
+
+```tsx
+import React, { useState } from 'react';
+import { 
+  AppLayout, 
+  Sidebar, 
+  TopNav, 
+  MetricStrip, 
+  Card, 
+  StatusBadge, 
+  Button 
+} from '@aleric.dev/ui';
+import { LayoutDashboard, Users, Activity } from 'lucide-react';
+
+export function DashboardExample() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <AppLayout
+      sidebar={
+        <Sidebar
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed(!collapsed)}
+          brand={{
+            name: 'Acme Cloud',
+            logo: <div className="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-bold">A</div>
+          }}
+          groups={[
+            {
+              label: 'General',
+              items: [
+                { id: 'dash', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" />, active: true },
+                { id: 'clients', label: 'Clientes', icon: <Users className="w-4 h-4" />, badge: 12 }
+              ]
+            }
+          ]}
+        />
+      }
+      topNav={<TopNav title="Panel Principal" />}
+    >
+      <div className="p-6 space-y-6">
+        <MetricStrip
+          items={[
+            { label: 'MRR Activo', value: '$24,500', color: 'emerald' },
+            { label: 'Usuarios Conectados', value: '1,280', color: 'indigo' }
+          ]}
+        />
+        <Card className="p-4">
+          <StatusBadge status="active" />
+        </Card>
+      </div>
+    </AppLayout>
+  );
+}
+```
+
+---
+
+## 📄 Licencia
+
+MIT © [Aleric Dev](https://aleric.dev)

package/bin/cli.cjs

@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const REGISTRY = {
+  // 1. Átomos
+  'button': { file: 'atoms/Button.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'badge': { file: 'atoms/Badge.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'card': { file: 'atoms/Card.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'input': { file: 'atoms/Input.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'textarea': { file: 'atoms/Textarea.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'select': { file: 'atoms/Select.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'toggle': { file: 'atoms/Toggle.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'status-toggle': { file: 'atoms/StatusToggle.tsx', deps: ['lucide-react'] },
+  'modal': { file: 'atoms/Modal.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'spinner': { file: 'atoms/Spinner.tsx', deps: [] },
+  'social-icons': { file: 'atoms/SocialIcons.tsx', deps: [] },
+
+  // 2. Moléculas
+  'form-field': { file: 'molecules/FormField.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'search-input': { file: 'molecules/SearchInput.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'confirm-dialog': { file: 'molecules/ConfirmDialog.tsx', deps: ['lucide-react'], requires: ['modal', 'button'] },
+  'empty-state': { file: 'molecules/EmptyState.tsx', deps: ['clsx', 'tailwind-merge'], requires: ['button'] },
+  'metric-stat-card': { file: 'molecules/MetricStatCard.tsx', deps: ['clsx', 'tailwind-merge'], requires: ['card'] },
+  'metric-strip': { file: 'molecules/MetricStrip.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'status-badge': { file: 'molecules/StatusBadge.tsx', deps: [], requires: ['badge'] },
+  'date-picker': { file: 'molecules/DatePicker.tsx', deps: ['lucide-react'] },
+  'markdown-renderer': { file: 'molecules/MarkdownRenderer.tsx', deps: ['marked'] },
+
+  // 3. Organismos
+  'sidebar': { file: 'organisms/Sidebar.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'top-nav': { file: 'organisms/TopNav.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+  'notification-center': { file: 'organisms/NotificationCenter.tsx', deps: ['clsx', 'tailwind-merge', 'lucide-react'] },
+
+  // 4. Templates
+  'app-layout': { file: 'templates/AppLayout.tsx', deps: ['clsx', 'tailwind-merge'] },
+  'studio-layout': { file: 'templates/StudioLayout.tsx', deps: ['clsx', 'tailwind-merge'] }
+};
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+console.log('\n💎 @aleric.dev/ui — Component Distribution CLI\n');
+
+if (!command || command === '--help' || command === '-h') {
+  console.log('Uso:');
+  console.log('  npx @aleric.dev/ui init               Inicializa el proyecto con la utilidad cn()');
+  console.log('  npx @aleric.dev/ui add <component>    Añade un componente a src/components/ui/');
+  console.log('  npx @aleric.dev/ui list               Lista todos los componentes disponibles\n');
+  console.log('Ejemplo:');
+  console.log('  npx @aleric.dev/ui add button');
+  console.log('  npx @aleric.dev/ui add sidebar');
+  console.log('  npx @aleric.dev/ui add metric-strip\n');
+  process.exit(0);
+}
+
+if (command === 'list') {
+  console.log('Componentes disponibles en el registro:');
+  console.log('---------------------------------------');
+  Object.keys(REGISTRY).forEach(name => {
+    const item = REGISTRY[name];
+    console.log(' • ' + name.padEnd(20) + '➔ src/components/' + item.file);
+  });
+  console.log('');
+  process.exit(0);
+}
+
+const targetCwd = process.cwd();
+
+if (command === 'init') {
+  console.log('🚀 Inicializando configuración en ' + targetCwd);
+  
+  // 1. Crear carpeta src/lib
+  const libDir = path.join(targetCwd, 'src', 'lib');
+  if (!fs.existsSync(libDir)) {
+    fs.mkdirSync(libDir, { recursive: true });
+  }
+
+  const utilsPath = path.join(libDir, 'utils.ts');
+  const utilsCode = 'import { clsx, type ClassValue } from "clsx";\nimport { twMerge } from "tailwind-merge";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n';
+  
+  fs.writeFileSync(utilsPath, utilsCode, 'utf8');
+  console.log('✅ Creado: src/lib/utils.ts con la función cn()');
+
+  // 2. Crear directorio de componentes destino
+  const uiDir = path.join(targetCwd, 'src', 'components', 'ui');
+  if (!fs.existsSync(uiDir)) {
+    fs.mkdirSync(uiDir, { recursive: true });
+  }
+  console.log('✅ Directorio listo: src/components/ui/');
+  console.log('\n✨ Proyecto listo. Ahora añade componentes con: npx @aleric.dev/ui add <componente>\n');
+  process.exit(0);
+}
+
+if (command === 'add') {
+  const componentName = args[1]?.toLowerCase();
+  if (!componentName) {
+    console.error('❌ Debes especificar un componente. Ej: npx @aleric.dev/ui add button');
+    process.exit(1);
+  }
+
+  const meta = REGISTRY[componentName];
+  if (!meta) {
+    console.error('❌ El componente "' + componentName + '" no existe en el registro.');
+    console.log('Ejecuta "npx @aleric.dev/ui list" para ver la lista completa.');
+    process.exit(1);
+  }
+
+  // Leer el componente fuente desde el paquete @aleric.dev/ui
+  const sourcePath = path.resolve(__dirname, '..', 'src', 'components', meta.file);
+  if (!fs.existsSync(sourcePath)) {
+    console.error('❌ Archivo fuente no encontrado: ' + sourcePath);
+    process.exit(1);
+  }
+
+  let code = fs.readFileSync(sourcePath, 'utf8');
+
+  // Adaptar imports relativos a la convención estándar @/lib/utils o local
+  code = code.replace(/\.\.\/\.\.\/utils\/cn/g, '@/lib/utils');
+  code = code.replace(/\.\.\/utils\/cn/g, '@/lib/utils');
+
+  const destDir = path.join(targetCwd, 'src', 'components', 'ui');
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true });
+  }
+
+  const destFile = path.basename(meta.file);
+  const destPath = path.join(destDir, destFile);
+
+  fs.writeFileSync(destPath, code, 'utf8');
+  console.log('✅ Componente instalado en: src/components/ui/' + destFile);
+
+  if (meta.deps && meta.deps.length > 0) {
+    console.log('📦 Asegúrate de tener instaladas las dependencias: ' + meta.deps.join(', '));
+  }
+  if (meta.requires && meta.requires.length > 0) {
+    console.log('🔗 Este componente utiliza otros átomos. Te recomendamos añadir también:');
+    meta.requires.forEach(req => console.log('   npx @aleric.dev/ui add ' + req));
+  }
+  console.log('');
+  process.exit(0);
+}
+
+console.error('❌ Comando no reconocido: ' + command);
+process.exit(1);

package/dist/components/atoms/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type BadgeVariant = 'default' | 'primary' | 'emerald' | 'indigo' | 'amber' | 'rose' | 'slate' | 'outline';
+export type BadgeSize = 'xs' | 'sm' | 'md';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atoms/Button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'emerald' | 'amber' | 'danger' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    loading?: boolean;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/atoms/Card.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    hover?: boolean;
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/atoms/Input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+    mono?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Modal.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    size?: ModalSize;
+    className?: string;
+    closeOnBackdropClick?: boolean;
+    asForm?: boolean;
+    onSubmit?: (e: React.FormEvent) => void;
+}
+export declare const Modal: React.FC<ModalProps>;
+export interface ModalHeaderProps {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    icon?: React.ReactNode;
+    onClose?: () => void;
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare const ModalHeader: React.FC<ModalHeaderProps>;
+export interface ModalBodyProps {
+    children: React.ReactNode;
+    className?: string;
+    noPadding?: boolean;
+}
+export declare const ModalBody: React.FC<ModalBodyProps>;
+export declare const ModalContent: React.FC<ModalBodyProps>;
+export interface ModalFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ModalFooter: React.FC<ModalFooterProps>;

package/dist/components/atoms/Select.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export type SelectChangeEvent = {
+    target: {
+        value: string;
+        name?: string;
+    };
+};
+export interface SelectProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: SelectChangeEvent) => void;
+    onValueChange?: (value: string) => void;
+    options?: SelectOption[];
+    children?: React.ReactNode;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+    className?: string;
+    buttonClassName?: string;
+    dropdownClassName?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    size?: 'sm' | 'md';
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/components/atoms/SocialIcons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SocialIconProps extends React.SVGAttributes<SVGSVGElement> {
+    name: 'github' | 'linkedin' | 'whatsapp' | 'x' | 'youtube';
+    size?: number;
+    className?: string;
+}
+export declare const SocialIcon: React.FC<SocialIconProps>;

package/dist/components/atoms/Spinner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/atoms/StatusToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type IdeaStatus = 'pending' | 'ready' | 'published';
+export interface StatusToggleProps {
+    status: IdeaStatus;
+    onChange: (status: IdeaStatus) => void;
+    compact?: boolean;
+    fullWidth?: boolean;
+}
+export declare const StatusToggle: React.FC<StatusToggleProps>;

package/dist/components/atoms/StepTimeline.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface StepItem {
+    id: string | number;
+    number: number;
+    title: string;
+    subtitle?: string;
+    badge?: React.ReactNode;
+}
+export interface StepTimelineProps {
+    steps: StepItem[];
+    currentStep: number;
+    completedSteps?: number[];
+    onStepClick?: (stepNumber: number) => void;
+    allowStepBack?: boolean;
+    className?: string;
+}
+export declare const StepTimeline: React.FC<StepTimelineProps>;

package/dist/components/atoms/Table.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    containerClassName?: string;
+    wrapper?: boolean;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;

package/dist/components/atoms/Tabs.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TabItem<T extends string = string> {
+    id: T;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export type TabsVariant = 'segmented' | 'underline' | 'pills';
+export type TabsSize = 'sm' | 'md' | 'lg';
+export interface TabsProps<T extends string = string> {
+    tabs: TabItem<T>[];
+    activeTab: T;
+    onChange: (tabId: T) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    fullWidth?: boolean;
+    className?: string;
+    tabClassName?: string;
+}
+export declare function Tabs<T extends string = string>({ tabs, activeTab, onChange, variant, size, fullWidth, className, tabClassName, }: TabsProps<T>): React.JSX.Element;

package/dist/components/atoms/Textarea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    mono?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/atoms/Toggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare const Toggle: React.FC<ToggleProps>;

package/dist/components/atoms/index.d.ts

@@ -0,0 +1,14 @@
+export * from './Button';
+export * from './Badge';
+export * from './Card';
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Toggle';
+export * from './StatusToggle';
+export * from './Modal';
+export * from './Spinner';
+export * from './SocialIcons';
+export * from './StepTimeline';
+export * from './Table';
+export * from './Tabs';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';

package/dist/components/molecules/ConfirmDialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ConfirmDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'danger' | 'primary' | 'warning';
+    loading?: boolean;
+}
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

package/dist/components/molecules/DatePicker.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DatePickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    minDate?: string;
+    maxDate?: string;
+    disabled?: boolean;
+    className?: string;
+    showShortcuts?: boolean;
+    align?: 'left' | 'right';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/components/molecules/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description: string;
+    actionText?: string;
+    onAction?: () => void;
+    className?: string;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/components/molecules/FormField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FormFieldProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const FormField: React.FC<FormFieldProps>;

package/dist/components/molecules/MarkdownRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MarkdownRendererProps {
+    content: string;
+    articleTitle?: string;
+    className?: string;
+}
+export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;

package/dist/components/molecules/MetricStatCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MetricStatCardProps {
+    label: string;
+    value: string | number;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    className?: string;
+}
+export declare const MetricStatCard: React.FC<MetricStatCardProps>;

package/dist/components/molecules/MetricStrip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface MetricItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    subtext?: React.ReactNode;
+    icon?: React.ElementType;
+    badge?: string;
+    color?: 'indigo' | 'emerald' | 'amber' | 'rose' | 'slate';
+}
+export interface MetricStripProps {
+    items: MetricItem[];
+    className?: string;
+}
+export declare const MetricStrip: React.FC<MetricStripProps>;

package/dist/components/molecules/ModalSplitLayout.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export type ModalSplitRatio = '5/7' | '6/6' | '4/8' | '7/5';
+export type ModalSplitMobileMode = 'tabs' | 'stack';
+export interface ModalSplitLayoutProps {
+    /** Título de la columna izquierda (o Tab 1 en móvil) */
+    leftTitle: React.ReactNode;
+    /** Icono opcional para la columna izquierda */
+    leftIcon?: React.ReactNode;
+    /** Badge o conteo opcional para la columna izquierda */
+    leftBadge?: React.ReactNode;
+    /** Título de la columna derecha (o Tab 2 en móvil) */
+    rightTitle: React.ReactNode;
+    /** Icono opcional para la columna derecha */
+    rightIcon?: React.ReactNode;
+    /** Badge o conteo opcional para la columna derecha */
+    rightBadge?: React.ReactNode;
+    /** Relación de columnas en Desktop (>= 1024px) */
+    ratio?: ModalSplitRatio;
+    /** Comportamiento en Mobile (< 1024px): 'tabs' (pestañas segmentadas) o 'stack' (vertical fluido) */
+    mobileMode?: ModalSplitMobileMode;
+    /** Pestaña activa controlada */
+    activeTab?: 'left' | 'right';
+    /** Pestaña activa inicial si no es controlada */
+    defaultActiveTab?: 'left' | 'right';
+    /** Callback al cambiar de pestaña en móvil */
+    onTabChange?: (tab: 'left' | 'right') => void;
+    /** Contenido de la columna izquierda */
+    leftContent: React.ReactNode;
+    /** Pie o barra de botones anclada en la columna izquierda */
+    leftFooter?: React.ReactNode;
+    /** Clases adicionales para la columna izquierda */
+    leftClassName?: string;
+    /** Cabecera opcional para la columna derecha */
+    rightHeader?: React.ReactNode;
+    /** Contenido de la columna derecha */
+    rightContent: React.ReactNode;
+    /** Pie opcional para la columna derecha */
+    rightFooter?: React.ReactNode;
+    /** Clases adicionales para la columna derecha */
+    rightClassName?: string;
+    /** Clases adicionales para el contenedor raíz */
+    className?: string;
+}
+export declare const ModalSplitLayout: React.FC<ModalSplitLayoutProps>;