neogestify-ui-components 1.2.18 → 1.2.19

package/src/components/alerts/InfoAlert.tsx

@@ -1,26 +1,26 @@
-import { AlertaInfo } from './alerta';
-import { QuestionIcon } from '../icons/icons';
-import { Button } from '../html';
-
-interface InfoAlertProps {
-    title: string;
-    text: string;
-}
-
-export default function InfoAlert({ title, text }: InfoAlertProps) {
-
-    const Question = async () => {
-        await AlertaInfo(title, text);
-    }
-
-    return (
-        <Button
-            type="button"
-            variant="custom"
-            onClick={() => Question()}
-            className="p-1 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-            <QuestionIcon className="w-4 h-4" />
-        </Button>
-    )
+import { AlertaInfo } from './alerta';
+import { QuestionIcon } from '../icons/icons';
+import { Button } from '../html';
+
+interface InfoAlertProps {
+    title: string;
+    text: string;
+}
+
+export default function InfoAlert({ title, text }: InfoAlertProps) {
+
+    const Question = async () => {
+        await AlertaInfo(title, text);
+    }
+
+    return (
+        <Button
+            type="button"
+            variant="custom"
+            onClick={() => Question()}
+            className="p-1 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
+        >
+            <QuestionIcon className="w-4 h-4" />
+        </Button>
+    )
 }

package/src/components/alerts/alerta.ts

@@ -1,94 +1,94 @@
-import Swal 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>;
-}
-
-export async function Alerta(options: AlertaOptions) {
-    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;
-}
-
-// Funciones de conveniencia para casos comunes
-export const AlertaExito = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
-    Alerta({ title, text, icon: 'success', confirmButtonText: 'Aceptar', onConfirm, ...options });
-
-export const AlertaError = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
-    Alerta({ title, text, icon: 'error', confirmButtonText: 'Aceptar', onConfirm, ...options });
-
-export const AlertaInfo = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
-    Alerta({ title, text, icon: 'info', confirmButtonText: 'Entendido', onConfirm, ...options });
-
-export const AlertaAdvertencia = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
-    Alerta({ title, text, icon: 'warning', confirmButtonText: 'Sí, continuar', cancelButtonText: 'Cancelar', showCancelButton: true, onConfirm, onCancel, ...options });
-
-export const AlertaConfirmacion = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
-    Alerta({ title, text, icon: 'question', confirmButtonText: 'Sí', cancelButtonText: 'No', showCancelButton: true, onConfirm, onCancel, ...options });
-
-export 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') =>
+import Swal 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>;
+}
+
+export async function Alerta(options: AlertaOptions) {
+    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;
+}
+
+// Funciones de conveniencia para casos comunes
+export const AlertaExito = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'success', confirmButtonText: 'Aceptar', onConfirm, ...options });
+
+export const AlertaError = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'error', confirmButtonText: 'Aceptar', onConfirm, ...options });
+
+export const AlertaInfo = (title: string, text: string, onConfirm?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'info', confirmButtonText: 'Entendido', onConfirm, ...options });
+
+export const AlertaAdvertencia = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'warning', confirmButtonText: 'Sí, continuar', cancelButtonText: 'Cancelar', showCancelButton: true, onConfirm, onCancel, ...options });
+
+export const AlertaConfirmacion = (title: string, text: string, onConfirm?: () => void, onCancel?: () => void, options?: { allowOutsideClick?: boolean; allowEscapeKey?: boolean }) =>
+    Alerta({ title, text, icon: 'question', confirmButtonText: 'Sí', cancelButtonText: 'No', showCancelButton: true, onConfirm, onCancel, ...options });
+
+export 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') =>
     Alerta({ title, text, icon, toast: true, timer, position });

package/src/components/alerts/index.ts

@@ -1,2 +1,2 @@
-export * from './alerta';
+export * from './alerta';
 export { default as InfoAlert } from './InfoAlert';

package/src/components/html/Button.tsx

@@ -1,72 +1,72 @@
-import { AnimateSpin } from '../icons/icons';
-import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
-
-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;
-}
-
-export const Button: FC<ButtonProps> = ({
-  variant = 'primary',
-  children,
-  isLoading = false,
-  loadingText,
-  isActive = false,
-  className = '',
-  disabled,
-  ...props
-}) => {
-  const baseClasses = 'transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
-
-  const variantClasses = {
-    primary: 'py-2 px-2 border border-indigo-600/20 dark:border-indigo-500/20 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    danger: 'py-2 px-2 border border-red-600/20 dark:border-red-500/20 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    success: 'py-2 px-2 border border-green-600/20 dark:border-green-500/20 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    custom: "",
-    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    warning: 'py-2 px-2 border border-yellow-600/20 dark:border-yellow-500/20 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
-    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900'
-  };
-
-  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
-
-  if (variant === 'nav' && isActive) {
-    classes += ' bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105';
-  }
-
-  if (variant === 'nav' && !isActive) {
-    classes += ' hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg';
-  }
-
-  if (variant === 'toggle') {
-    if (isActive) {
-      classes += ' bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700';
-    } else {
-      classes += ' bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500';
-    }
-  }
-
-  return (
-    <button
-      className={classes}
-      disabled={disabled || isLoading}
-      {...props}
-    >
-      {isLoading ? (
-        <>
-          <AnimateSpin className="h-5 w-5 mr-2 inline-block text-current" />
-          {loadingText || 'Cargando...'}
-        </>
-      ) : (
-        children
-      )}
-    </button>
-  );
+import { AnimateSpin } from '../icons/icons';
+import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
+
+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;
+}
+
+export const Button: FC<ButtonProps> = ({
+  variant = 'primary',
+  children,
+  isLoading = false,
+  loadingText,
+  isActive = false,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseClasses = 'transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
+
+  const variantClasses = {
+    primary: 'py-2 px-2 border border-indigo-600/20 dark:border-indigo-500/20 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    danger: 'py-2 px-2 border border-red-600/20 dark:border-red-500/20 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    success: 'py-2 px-2 border border-green-600/20 dark:border-green-500/20 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    custom: "",
+    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 rounded-lg px-2',
+    warning: 'py-2 px-2 border border-yellow-600/20 dark:border-yellow-500/20 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900'
+  };
+
+  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+  if (variant === 'nav' && isActive) {
+    classes += ' bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105';
+  }
+
+  if (variant === 'nav' && !isActive) {
+    classes += ' hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg';
+  }
+
+  if (variant === 'toggle') {
+    if (isActive) {
+      classes += ' bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700';
+    } else {
+      classes += ' bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500';
+    }
+  }
+
+  return (
+    <button
+      className={classes}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <>
+          <AnimateSpin className="h-5 w-5 mr-2 inline-block text-current" />
+          {loadingText || 'Cargando...'}
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
 };

package/src/components/html/Form.tsx

@@ -1,40 +1,40 @@
-import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode } from 'react';
-
-interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
-    children: ReactNode;
-    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
-    variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
-}
-
-export const Form: FC<FormProps> = ({ onSubmit, children, variant = 'default', className = '', ...props }) => {
-    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onSubmit) {
-            onSubmit(e);
-        }
-    };
-
-    const getVariantClasses = () => {
-        switch (variant) {
-            case 'modal':
-                return 'flex-1 px-6 py-4 overflow-y-auto';
-            case 'card':
-                return 'p-6 space-y-6';
-            case 'inline':
-                return 'flex flex-wrap gap-4 items-end';
-            case 'compact':
-                return 'space-y-3';
-            case 'default':
-            default:
-                return 'space-y-4';
-        }
-    };
-
-    const combinedClassName = `${getVariantClasses()} ${className}`.trim();
-
-    return (
-        <form onSubmit={handleSubmit} className={combinedClassName} {...props}>
-            {children}
-        </form>
-    );
+import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode } from 'react';
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    children: ReactNode;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+}
+
+export const Form: FC<FormProps> = ({ onSubmit, children, variant = 'default', className = '', ...props }) => {
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(e);
+        }
+    };
+
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'modal':
+                return 'flex-1 px-6 py-4 overflow-y-auto';
+            case 'card':
+                return 'p-6 space-y-6';
+            case 'inline':
+                return 'flex flex-wrap gap-4 items-end';
+            case 'compact':
+                return 'space-y-3';
+            case 'default':
+            default:
+                return 'space-y-4';
+        }
+    };
+
+    const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+    return (
+        <form onSubmit={handleSubmit} className={combinedClassName} {...props}>
+            {children}
+        </form>
+    );
 };