neogestify-ui-components 1.0.0

package/README.md

@@ -0,0 +1,350 @@
+# UI Components
+
+Biblioteca de componentes UI reutilizables con React, Tailwind CSS y SweetAlert2.
+
+## Características
+
+- Componentes HTML preestilizados (Button, Input, Form, Select, Table, Modal)
+- Colección de iconos SVG
+- Alertas preconfiguradas con SweetAlert2
+- Soporte para modo claro/oscuro
+- TypeScript incluido
+- Compatible con Tailwind CSS 4.1
+
+## Instalación
+
+### Opción 1: Workspace local (Monorepo)
+
+Si estás usando workspaces con npm/bun:
+
+```bash
+# En tu proyecto principal
+bun add @mi-empresa/ui-components@workspace:*
+```
+
+### Opción 2: Link local
+
+```bash
+# En la carpeta ui-components
+bun link
+
+# En tu proyecto
+bun link @mi-empresa/ui-components
+```
+
+### Opción 3: Repositorio Git
+
+```json
+{
+  "dependencies": {
+    "@mi-empresa/ui-components": "git+https://github.com/tu-usuario/ui-components.git"
+  }
+}
+```
+
+## Configuración
+
+### 1. Asegúrate de tener Tailwind CSS configurado en tu proyecto
+
+```bash
+bun add -D tailwindcss@4.1.0
+```
+
+Tu proyecto debe tener Tailwind configurado ya que los componentes solo usan clases de Tailwind (no incluyen CSS compilado).
+
+### 2. Configura Tailwind para escanear los componentes de la biblioteca
+
+En tu archivo de configuración de Tailwind:
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@mi-empresa/ui-components/dist/**/*.{js,mjs}"
+  ],
+  // ... resto de configuración
+}
+```
+
+### 3. Instala las dependencias peer
+
+```bash
+bun add react react-dom sweetalert2 sweetalert2-react-content
+```
+
+## Uso
+
+La biblioteca está organizada en módulos independientes:
+
+### Componentes HTML
+
+```tsx
+import { Button, Input, Form, Select, Table, Modal } from '@mi-empresa/ui-components/html';
+
+function MiComponente() {
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Input
+        label="Nombre"
+        placeholder="Tu nombre"
+        value={nombre}
+        onChange={(e) => setNombre(e.target.value)}
+      />
+
+      <Select
+        label="País"
+        options={[
+          { value: 'mx', label: 'México' },
+          { value: 'ar', label: 'Argentina' }
+        ]}
+      />
+
+      <Button variant="primary" type="submit">
+        Enviar
+      </Button>
+    </Form>
+  );
+}
+```
+
+### Iconos
+
+```tsx
+import {
+  HomeIcon,
+  SaveIcon,
+  DeleteIcon,
+  EditIcon
+} from '@mi-empresa/ui-components/icons';
+
+function MiComponente() {
+  return (
+    <div>
+      <HomeIcon className="w-6 h-6 text-blue-500" />
+      <SaveIcon className="w-5 h-5 text-green-600" />
+    </div>
+  );
+}
+```
+
+### Alertas
+
+```tsx
+import {
+  AlertaExito,
+  AlertaError,
+  AlertaAdvertencia,
+  AlertaConfirmacion,
+  AlertaToast
+} from '@mi-empresa/ui-components/alerts';
+
+function MiComponente() {
+  const handleGuardar = async () => {
+    try {
+      await guardarDatos();
+      AlertaExito('¡Guardado!', 'Los datos se guardaron correctamente');
+    } catch (error) {
+      AlertaError('Error', 'No se pudieron guardar los datos');
+    }
+  };
+
+  const handleEliminar = () => {
+    AlertaAdvertencia(
+      '¿Estás seguro?',
+      'Esta acción no se puede deshacer',
+      async () => {
+        await eliminarDatos();
+        AlertaToast('Eliminado', 'Registro eliminado', 'success');
+      }
+    );
+  };
+
+  return (
+    <Button variant="danger" onClick={handleEliminar}>
+      Eliminar
+    </Button>
+  );
+}
+```
+
+### Sistema de Tema
+
+El sistema de tema incluye un Context Provider y un componente toggle listo para usar.
+
+#### 1. Configurar el ThemeProvider
+
+Envuelve tu aplicación con el `ThemeProvider`:
+
+```tsx
+// main.tsx o App.tsx
+import { ThemeProvider } from '@mi-empresa/ui-components/context/theme';
+
+function Main() {
+  return (
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  );
+}
+```
+
+#### 2. Usar el ThemeToggle
+
+```tsx
+import { ThemeToggle } from '@mi-empresa/ui-components/theme';
+
+function Header() {
+  return (
+    <nav>
+      <ThemeToggle />
+    </nav>
+  );
+}
+```
+
+#### 3. Usar el hook useTheme
+
+```tsx
+import { useTheme } from '@mi-empresa/ui-components/context/theme';
+
+function MiComponente() {
+  const { theme, toggleTheme, setTheme } = useTheme();
+
+  return (
+    <div>
+      <p>Tema actual: {theme}</p>
+      <button onClick={toggleTheme}>Cambiar tema</button>
+      <button onClick={() => setTheme('dark')}>Modo oscuro</button>
+      <button onClick={() => setTheme('light')}>Modo claro</button>
+    </div>
+  );
+}
+```
+
+El tema se guarda automáticamente en `localStorage` y se aplica al cargar la página.
+
+## Componentes Disponibles
+
+### Button
+
+Variantes: `primary`, `secondary`, `danger`, `success`, `warning`, `outline`, `icon`, `nav`, `link`, `toggle`
+
+```tsx
+<Button variant="primary" isLoading loadingText="Guardando...">
+  Guardar
+</Button>
+```
+
+### Input
+
+Soporta tipos: `text`, `email`, `password`, `number`, `checkbox`, etc.
+
+```tsx
+<Input
+  label="Email"
+  type="email"
+  error="Email inválido"
+  helperText="Ingresa tu correo electrónico"
+/>
+```
+
+### Select
+
+```tsx
+<Select
+  label="Categoría"
+  placeholder="Selecciona..."
+  options={categorias}
+  variant="default"
+/>
+```
+
+### Table
+
+```tsx
+<Table
+  headers={['ID', 'Nombre', 'Email']}
+  rows={[
+    ['1', 'Juan', 'juan@ejemplo.com'],
+    ['2', 'María', 'maria@ejemplo.com']
+  ]}
+/>
+```
+
+### Modal
+
+```tsx
+const modalRef = useRef<ModalRef>(null);
+
+<Modal
+  ref={modalRef}
+  title="Mi Modal"
+  onClose={() => setShowModal(false)}
+  footer={
+    <Button onClick={() => modalRef.current?.handleClose()}>
+      Cerrar
+    </Button>
+  }
+>
+  <p>Contenido del modal</p>
+</Modal>
+```
+
+## Showcase / Demo
+
+Para ver todos los componentes en acción:
+
+```bash
+cd showcase
+bun install
+bun dev
+```
+
+Abre http://localhost:5173 en tu navegador.
+
+## Desarrollo
+
+### Build
+
+```bash
+bun install
+bun run build
+```
+
+### Estructura del proyecto
+
+```
+ui-components/
+├── src/
+│   ├── components/
+│   │   ├── html/        # Componentes HTML
+│   │   ├── icons/       # Iconos SVG
+│   │   └── alerts/      # Alertas SweetAlert2
+│   └── types/           # Tipos TypeScript
+├── showcase/            # Demo/Showcase
+└── dist/                # Build output
+```
+
+## Modo Oscuro
+
+Los componentes soportan modo oscuro automáticamente usando las clases `dark:` de Tailwind. Asegúrate de configurar el modo oscuro en tu proyecto:
+
+```js
+// tailwind.config.js
+export default {
+  darkMode: 'class', // o 'media'
+  // ...
+}
+```
+
+Para activar el modo oscuro:
+
+```tsx
+// Agregar/quitar la clase 'dark' en el html
+document.documentElement.classList.add('dark');
+```
+
+## Licencia
+
+MIT

package/dist/components/alerts/index.d.mts

@@ -0,0 +1,46 @@
+import * as sweetalert2 from 'sweetalert2';
+
+interface AlertaOptions {
+    title: string;
+    text: string;
+    icon: 'success' | 'error' | 'warning' | 'info' | 'question';
+    confirmButtonText?: string;
+    showCancelButton?: boolean;
+    cancelButtonText?: string;
+    showDenyButton?: boolean;
+    denyButtonText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onDeny?: () => void;
+    toast?: boolean;
+    timer?: number;
+    position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    input?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url';
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputValidator?: (value: unknown) => string | null | Promise<string | null>;
+    inputAttributes?: Record<string, string>;
+}
+declare function Alerta(options: AlertaOptions): Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaExito: (title: string, text: string, onConfirm?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaError: (title: string, text: string, onConfirm?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaAdvertencia: (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaConfirmacion: (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaToast: (title: string, text: string, icon?: "success" | "error" | "warning" | "info", timer?: number, position?: "top" | "top-start" | "top-end" | "center" | "center-start" | "center-end" | "bottom" | "bottom-start" | "bottom-end") => Promise<sweetalert2.SweetAlertResult<any>>;
+
+export { Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaToast };

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

@@ -0,0 +1,46 @@
+import * as sweetalert2 from 'sweetalert2';
+
+interface AlertaOptions {
+    title: string;
+    text: string;
+    icon: 'success' | 'error' | 'warning' | 'info' | 'question';
+    confirmButtonText?: string;
+    showCancelButton?: boolean;
+    cancelButtonText?: string;
+    showDenyButton?: boolean;
+    denyButtonText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onDeny?: () => void;
+    toast?: boolean;
+    timer?: number;
+    position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    input?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url';
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputValidator?: (value: unknown) => string | null | Promise<string | null>;
+    inputAttributes?: Record<string, string>;
+}
+declare function Alerta(options: AlertaOptions): Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaExito: (title: string, text: string, onConfirm?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaError: (title: string, text: string, onConfirm?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaAdvertencia: (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaConfirmacion: (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: {
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}) => Promise<sweetalert2.SweetAlertResult<any>>;
+declare const AlertaToast: (title: string, text: string, icon?: "success" | "error" | "warning" | "info", timer?: number, position?: "top" | "top-start" | "top-end" | "center" | "center-start" | "center-end" | "bottom" | "bottom-start" | "bottom-end") => Promise<sweetalert2.SweetAlertResult<any>>;
+
+export { Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaToast };

package/dist/components/alerts/index.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var Swal = require('sweetalert2');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Swal__default = /*#__PURE__*/_interopDefault(Swal);
+
+// src/components/alerts/alerta.ts
+async function Alerta(options) {
+  const theme = localStorage.getItem("theme");
+  const isDark = theme === "dark";
+  const result = await Swal__default.default.fire({
+    title: options.title,
+    text: options.text,
+    icon: options.icon,
+    confirmButtonText: options.confirmButtonText || "Aceptar",
+    showCancelButton: options.showCancelButton || false,
+    cancelButtonText: options.cancelButtonText || "Cancelar",
+    showDenyButton: options.showDenyButton || false,
+    denyButtonText: options.denyButtonText || "No",
+    background: isDark ? "#1f2937" : "#f9fafb",
+    color: isDark ? "#f9fafb" : "#1f2937",
+    customClass: {
+      popup: isDark ? "swal-dark-popup" : "swal-light-popup",
+      title: isDark ? "swal-dark-title" : "swal-light-title",
+      confirmButton: isDark ? "swal-dark-confirm" : "swal-light-confirm",
+      cancelButton: isDark ? "swal-dark-cancel" : "swal-light-cancel",
+      denyButton: isDark ? "swal-dark-deny" : "swal-light-deny"
+    },
+    toast: options.toast || false,
+    timer: options.timer,
+    position: options.position || "center",
+    showConfirmButton: !options.toast && !options.timer,
+    timerProgressBar: options.toast || !!options.timer,
+    allowOutsideClick: options.allowOutsideClick !== false,
+    // Por defecto true
+    allowEscapeKey: options.allowEscapeKey !== false,
+    // Por defecto true
+    input: options.input,
+    inputLabel: options.inputLabel,
+    inputPlaceholder: options.inputPlaceholder,
+    inputValue: options.inputValue,
+    inputValidator: options.inputValidator,
+    inputAttributes: options.inputAttributes
+  });
+  if (result.isConfirmed && options.onConfirm) {
+    options.onConfirm();
+  } else if (result.isDenied && options.onDeny) {
+    options.onDeny();
+  } else if (result.isDismissed && options.onCancel) {
+    options.onCancel();
+  }
+  return result;
+}
+var AlertaExito = (title, text, onConfirm, options) => Alerta({ title, text, icon: "success", confirmButtonText: "Aceptar", onConfirm, ...options });
+var AlertaError = (title, text, onConfirm, options) => Alerta({ title, text, icon: "error", confirmButtonText: "Aceptar", onConfirm, ...options });
+var AlertaAdvertencia = (title, text, onConfirm, onCancel, options) => Alerta({ title, text, icon: "warning", confirmButtonText: "S\xED, continuar", cancelButtonText: "Cancelar", showCancelButton: true, onConfirm, onCancel, ...options });
+var AlertaConfirmacion = (title, text, onConfirm, onCancel, options) => Alerta({ title, text, icon: "question", confirmButtonText: "S\xED", cancelButtonText: "No", showCancelButton: true, onConfirm, onCancel, ...options });
+var AlertaToast = (title, text, icon = "info", timer = 3e3, position = "top-end") => Alerta({ title, text, icon, toast: true, timer, position });
+
+exports.Alerta = Alerta;
+exports.AlertaAdvertencia = AlertaAdvertencia;
+exports.AlertaConfirmacion = AlertaConfirmacion;
+exports.AlertaError = AlertaError;
+exports.AlertaExito = AlertaExito;
+exports.AlertaToast = AlertaToast;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/alerts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alerts/alerta.ts"],"names":["Swal"],"mappings":"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","file":"index.js","sourcesContent":["import Swal from \"sweetalert2\";\n\ninterface AlertaOptions {\n    title: string;\n    text: string;\n    icon: 'success' | 'error' | 'warning' | 'info' | 'question';\n    confirmButtonText?: string;\n    showCancelButton?: boolean;\n    cancelButtonText?: string;\n    showDenyButton?: boolean;\n    denyButtonText?: string;\n    onConfirm?: () => void;\n    onCancel?: () => void;\n    onDeny?: () => void;\n    toast?: boolean;\n    timer?: number;\n    position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';\n    allowOutsideClick?: boolean;\n    allowEscapeKey?: boolean;\n    input?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url';\n    inputLabel?: string;\n    inputPlaceholder?: string;\n    inputValue?: string;\n    inputValidator?: (value: unknown) => string | null | Promise<string | null>;\n    inputAttributes?: Record<string, string>;\n}\n\nexport async function Alerta(options: AlertaOptions) {\n    const theme = localStorage.getItem('theme');\n\n    const isDark = theme === 'dark';\n\n    const result = await Swal.fire({\n        title: options.title,\n        text: options.text,\n        icon: options.icon,\n        confirmButtonText: options.confirmButtonText || 'Aceptar',\n        showCancelButton: options.showCancelButton || false,\n        cancelButtonText: options.cancelButtonText || 'Cancelar',\n        showDenyButton: options.showDenyButton || false,\n        denyButtonText: options.denyButtonText || 'No',\n        background: isDark ? '#1f2937' : '#f9fafb',\n        color: isDark ? '#f9fafb' : '#1f2937',\n        customClass: {\n            popup: isDark ? 'swal-dark-popup' : 'swal-light-popup',\n            title: isDark ? 'swal-dark-title' : 'swal-light-title',\n            confirmButton: isDark ? 'swal-dark-confirm' : 'swal-light-confirm',\n            cancelButton: isDark ? 'swal-dark-cancel' : 'swal-light-cancel',\n            denyButton: isDark ? 'swal-dark-deny' : 'swal-light-deny'\n        },\n        toast: options.toast || false,\n        timer: options.timer,\n        position: options.position || 'center',\n        showConfirmButton: !options.toast && !options.timer,\n        timerProgressBar: options.toast || !!options.timer,\n        allowOutsideClick: options.allowOutsideClick !== false, // Por defecto true\n        allowEscapeKey: options.allowEscapeKey !== false, // Por defecto true\n        input: options.input,\n        inputLabel: options.inputLabel,\n        inputPlaceholder: options.inputPlaceholder,\n        inputValue: options.inputValue,\n        inputValidator: options.inputValidator,\n        inputAttributes: options.inputAttributes\n    });\n\n    if (result.isConfirmed && options.onConfirm) {\n        options.onConfirm();\n    } else if (result.isDenied && options.onDeny) {\n        options.onDeny();\n    } else if (result.isDismissed && options.onCancel) {\n        options.onCancel();\n    }\n\n    return result;\n}\n\n// Funciones de conveniencia para casos comunes\nexport const AlertaExito = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'success', confirmButtonText: 'Aceptar', onConfirm, ...options });\n\nexport const AlertaError = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'error', confirmButtonText: 'Aceptar', onConfirm, ...options });\n\nexport const AlertaAdvertencia = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'warning', confirmButtonText: 'Sí, continuar', cancelButtonText: 'Cancelar', showCancelButton: true, onConfirm, onCancel, ...options });\n\nexport const AlertaConfirmacion = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'question', confirmButtonText: 'Sí', cancelButtonText: 'No', showCancelButton: true, onConfirm, onCancel, ...options });\n\nexport const AlertaToast = (title: string, text: string, icon: 'success' | 'error' | 'warning' | 'info' = 'info', timer: number = 3000, position: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end' = 'top-end') =>\n    Alerta({ title, text, icon, toast: true, timer, position });"]}

package/dist/components/alerts/index.mjs

@@ -0,0 +1,58 @@
+import Swal from 'sweetalert2';
+
+// src/components/alerts/alerta.ts
+async function Alerta(options) {
+  const theme = localStorage.getItem("theme");
+  const isDark = theme === "dark";
+  const result = await Swal.fire({
+    title: options.title,
+    text: options.text,
+    icon: options.icon,
+    confirmButtonText: options.confirmButtonText || "Aceptar",
+    showCancelButton: options.showCancelButton || false,
+    cancelButtonText: options.cancelButtonText || "Cancelar",
+    showDenyButton: options.showDenyButton || false,
+    denyButtonText: options.denyButtonText || "No",
+    background: isDark ? "#1f2937" : "#f9fafb",
+    color: isDark ? "#f9fafb" : "#1f2937",
+    customClass: {
+      popup: isDark ? "swal-dark-popup" : "swal-light-popup",
+      title: isDark ? "swal-dark-title" : "swal-light-title",
+      confirmButton: isDark ? "swal-dark-confirm" : "swal-light-confirm",
+      cancelButton: isDark ? "swal-dark-cancel" : "swal-light-cancel",
+      denyButton: isDark ? "swal-dark-deny" : "swal-light-deny"
+    },
+    toast: options.toast || false,
+    timer: options.timer,
+    position: options.position || "center",
+    showConfirmButton: !options.toast && !options.timer,
+    timerProgressBar: options.toast || !!options.timer,
+    allowOutsideClick: options.allowOutsideClick !== false,
+    // Por defecto true
+    allowEscapeKey: options.allowEscapeKey !== false,
+    // Por defecto true
+    input: options.input,
+    inputLabel: options.inputLabel,
+    inputPlaceholder: options.inputPlaceholder,
+    inputValue: options.inputValue,
+    inputValidator: options.inputValidator,
+    inputAttributes: options.inputAttributes
+  });
+  if (result.isConfirmed && options.onConfirm) {
+    options.onConfirm();
+  } else if (result.isDenied && options.onDeny) {
+    options.onDeny();
+  } else if (result.isDismissed && options.onCancel) {
+    options.onCancel();
+  }
+  return result;
+}
+var AlertaExito = (title, text, onConfirm, options) => Alerta({ title, text, icon: "success", confirmButtonText: "Aceptar", onConfirm, ...options });
+var AlertaError = (title, text, onConfirm, options) => Alerta({ title, text, icon: "error", confirmButtonText: "Aceptar", onConfirm, ...options });
+var AlertaAdvertencia = (title, text, onConfirm, onCancel, options) => Alerta({ title, text, icon: "warning", confirmButtonText: "S\xED, continuar", cancelButtonText: "Cancelar", showCancelButton: true, onConfirm, onCancel, ...options });
+var AlertaConfirmacion = (title, text, onConfirm, onCancel, options) => Alerta({ title, text, icon: "question", confirmButtonText: "S\xED", cancelButtonText: "No", showCancelButton: true, onConfirm, onCancel, ...options });
+var AlertaToast = (title, text, icon = "info", timer = 3e3, position = "top-end") => Alerta({ title, text, icon, toast: true, timer, position });
+
+export { Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaToast };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/alerts/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alerts/alerta.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import Swal from \"sweetalert2\";\n\ninterface AlertaOptions {\n    title: string;\n    text: string;\n    icon: 'success' | 'error' | 'warning' | 'info' | 'question';\n    confirmButtonText?: string;\n    showCancelButton?: boolean;\n    cancelButtonText?: string;\n    showDenyButton?: boolean;\n    denyButtonText?: string;\n    onConfirm?: () => void;\n    onCancel?: () => void;\n    onDeny?: () => void;\n    toast?: boolean;\n    timer?: number;\n    position?: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end';\n    allowOutsideClick?: boolean;\n    allowEscapeKey?: boolean;\n    input?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url';\n    inputLabel?: string;\n    inputPlaceholder?: string;\n    inputValue?: string;\n    inputValidator?: (value: unknown) => string | null | Promise<string | null>;\n    inputAttributes?: Record<string, string>;\n}\n\nexport async function Alerta(options: AlertaOptions) {\n    const theme = localStorage.getItem('theme');\n\n    const isDark = theme === 'dark';\n\n    const result = await Swal.fire({\n        title: options.title,\n        text: options.text,\n        icon: options.icon,\n        confirmButtonText: options.confirmButtonText || 'Aceptar',\n        showCancelButton: options.showCancelButton || false,\n        cancelButtonText: options.cancelButtonText || 'Cancelar',\n        showDenyButton: options.showDenyButton || false,\n        denyButtonText: options.denyButtonText || 'No',\n        background: isDark ? '#1f2937' : '#f9fafb',\n        color: isDark ? '#f9fafb' : '#1f2937',\n        customClass: {\n            popup: isDark ? 'swal-dark-popup' : 'swal-light-popup',\n            title: isDark ? 'swal-dark-title' : 'swal-light-title',\n            confirmButton: isDark ? 'swal-dark-confirm' : 'swal-light-confirm',\n            cancelButton: isDark ? 'swal-dark-cancel' : 'swal-light-cancel',\n            denyButton: isDark ? 'swal-dark-deny' : 'swal-light-deny'\n        },\n        toast: options.toast || false,\n        timer: options.timer,\n        position: options.position || 'center',\n        showConfirmButton: !options.toast && !options.timer,\n        timerProgressBar: options.toast || !!options.timer,\n        allowOutsideClick: options.allowOutsideClick !== false, // Por defecto true\n        allowEscapeKey: options.allowEscapeKey !== false, // Por defecto true\n        input: options.input,\n        inputLabel: options.inputLabel,\n        inputPlaceholder: options.inputPlaceholder,\n        inputValue: options.inputValue,\n        inputValidator: options.inputValidator,\n        inputAttributes: options.inputAttributes\n    });\n\n    if (result.isConfirmed && options.onConfirm) {\n        options.onConfirm();\n    } else if (result.isDenied && options.onDeny) {\n        options.onDeny();\n    } else if (result.isDismissed && options.onCancel) {\n        options.onCancel();\n    }\n\n    return result;\n}\n\n// Funciones de conveniencia para casos comunes\nexport const AlertaExito = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'success', confirmButtonText: 'Aceptar', onConfirm, ...options });\n\nexport const AlertaError = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'error', confirmButtonText: 'Aceptar', onConfirm, ...options });\n\nexport const AlertaAdvertencia = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'warning', confirmButtonText: 'Sí, continuar', cancelButtonText: 'Cancelar', showCancelButton: true, onConfirm, onCancel, ...options });\n\nexport const AlertaConfirmacion = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>\n    Alerta({ title, text, icon: 'question', confirmButtonText: 'Sí', cancelButtonText: 'No', showCancelButton: true, onConfirm, onCancel, ...options });\n\nexport const AlertaToast = (title: string, text: string, icon: 'success' | 'error' | 'warning' | 'info' = 'info', timer: number = 3000, position: 'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' | 'bottom-end' = 'top-end') =>\n    Alerta({ title, text, icon, toast: true, timer, position });"]}

package/dist/components/html/index.d.mts

@@ -0,0 +1,67 @@
+import React, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+    children: ReactNode;
+    isLoading?: boolean;
+    loadingText?: string;
+    isActive?: boolean;
+}
+declare const Button: FC<ButtonProps>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string | ReactNode;
+    error?: string;
+    helperText?: string;
+}
+declare const Input: FC<InputProps>;
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    children: ReactNode;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+}
+declare const Form: FC<FormProps>;
+
+interface Option {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    options: Option[];
+    placeholder?: string;
+    variant?: 'default' | 'small';
+    error?: boolean;
+    helperText?: string;
+    label?: string | ReactNode;
+}
+declare const Select: FC<SelectProps>;
+
+interface TableProps {
+    headers: ReactNode[];
+    rows: ReactNode[][];
+    variant?: 'default' | 'custom';
+    className?: string;
+    thClassName?: string;
+    tdClassName?: string;
+}
+declare function Table({ headers, rows, variant, className, thClassName, tdClassName }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    showCloseButton?: boolean;
+    zIndex?: number;
+}
+interface ModalRef {
+    handleClose: () => void;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalRef>>;
+
+export { Button, Form, Input, Modal, type ModalRef, Select, Table };