neogestify-ui-components 1.1.1 → 1.1.3

package/src/components/html/Loading.tsx

@@ -0,0 +1,104 @@
+import { type FC } from 'react';
+
+interface LoadingProps {
+  variant?: 'spinner' | 'dots' | 'pulse' | 'bars' | 'ring' | 'cube';
+  size?: 'small' | 'medium' | 'large' | 'xl';
+  color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
+  label?: string;
+  className?: string;
+}
+
+export const Loading: FC<LoadingProps> = ({
+  variant = 'spinner',
+  size = 'medium',
+  color = 'primary',
+  label,
+  className = '',
+}) => {
+  const sizeClasses = {
+    small: 'h-4 w-4',
+    medium: 'h-8 w-8',
+    large: 'h-12 w-12',
+    xl: 'h-16 w-16',
+  };
+
+  const colorClasses = {
+    primary: 'text-indigo-600 dark:text-indigo-400',
+    white: 'text-white',
+    gray: 'text-gray-500 dark:text-gray-400',
+    success: 'text-green-600 dark:text-green-400',
+    danger: 'text-red-600 dark:text-red-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+  };
+
+  const renderIcon = () => {
+    const commonClass = `${sizeClasses[size]} ${colorClasses[color]}`;
+
+    switch (variant) {
+      case 'dots':
+        const dotSize = size === 'small' ? 'h-1 w-1' : size === 'medium' ? 'h-2 w-2' : size === 'large' ? 'h-3 w-3' : 'h-4 w-4';
+        return (
+          <div className={`flex space-x-1 ${colorClasses[color]}`}>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0s' }}></div>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.15s' }}></div>
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.3s' }}></div>
+          </div>
+        );
+      
+      case 'bars':
+        return (
+          <div className={`flex items-end space-x-1 ${sizeClasses[size]} ${colorClasses[color]}`}>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0s' }}></div>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '100%', animationDelay: '0.2s' }}></div>
+             <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0.4s' }}></div>
+          </div>
+        );
+
+      case 'pulse':
+        return (
+          <span className={`relative flex ${commonClass}`}>
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-current"></span>
+            <span className="relative inline-flex rounded-full h-full w-full bg-current"></span>
+          </span>
+        );
+
+      case 'cube':
+        return (
+            <div className={`${commonClass} grid grid-cols-2 gap-1`}>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0.5s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1.5s' }}></div>
+                <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1s' }}></div>
+            </div>
+        );
+
+      case 'ring':
+        return (
+          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        );
+
+      case 'spinner':
+      default:
+        return (
+          <svg className={`${commonClass} animate-spin`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <div className={`flex flex-col items-center justify-center w-full h-full min-h-[inherit] ${className}`} role="status">
+      {renderIcon()}
+      {label && (
+        <span className={`mt-3 text-sm font-medium ${colorClasses[color]}`}>
+          {label}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/html/index.ts

@@ -4,4 +4,5 @@ export { TextArea } from './TextArea';
 export { Form } from './Form';
 export { Select } from './Select';
 export { Table } from './Table';
-export { Modal, type ModalRef } from './Modal';
+export { Modal, type ModalRef } from './Modal';
+export { Loading } from './Loading';

package/src/components/icons/icons.tsx

@@ -468,9 +468,7 @@ export function FacturacionIcon({ className }: Props) {
 
 export function WhatsAppIcon({ className }: Props) {
     return (
-        <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className={className} viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52s.198-.298.298-.497c.099-.198.05-.371-.025-.52s-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a13 13 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074s2.096 3.2 5.077 4.487c.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413s.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.82 9.82 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.82 11.82 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.9 11.9 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.478-8.413" /></svg>
     )
 }
 
@@ -500,9 +498,7 @@ export function PasteIcon({ className }: Props) {
 
 export function RestaurantMenuIcon({ className }: Props) {
     return (
-        <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3v18h18V3H3zm16 16H5V5h14v14zM7 8h10v2H7V8zm0 4h10v2H7v-2zm0 4h7v2H7v-2z" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20v-2q-.425 0-.712-.288T3 17t.288-.712T4 16v-3q-.425 0-.712-.288T3 12t.288-.712T4 11V8q-.425 0-.712-.288T3 7t.288-.712T4 6V4q0-.825.588-1.412T6 2h12q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4H6v2q.425 0 .713.288T7 7t-.288.713T6 8v3q.425 0 .713.288T7 12t-.288.713T6 13v3q.425 0 .713.288T7 17t-.288.713T6 18zm3.5-7v3.25q0 .325.213.538t.537.212.538-.213.212-.537V13q.65-.175 1.075-.712t.425-1.213V7.5q0-.2-.15-.35T12 7t-.35.15-.15.35v3.275h-.75V7.5q0-.2-.15-.35T10.25 7t-.35.15-.15.35v3.275H9V7.5q0-.2-.15-.35T8.5 7t-.35.15T8 7.5v3.575q0 .675.425 1.213T9.5 13m5.5 0v3.25q0 .325.213.538t.537.212.538-.213.212-.537V7.575q0-.275-.187-.425T15.825 7q-.325 0-.712.175t-.738.525q-.425.425-.65.963T13.5 9.825V12q0 .425.288.713T14.5 13zm-9 7V4z"/></svg>
     )
 }