neogestify-ui-components 2.2.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert, con VenueMapEditor o editor de mapas basico",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/html/Button.tsx

@@ -1,72 +1,118 @@
 import { AnimateSpin } from '../icons/icons';
 import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
 
+type ButtonVariant = 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonShape = 'rounded' | 'pill' | 'square';
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+  variant?: ButtonVariant;
   children: ReactNode;
   isLoading?: boolean;
   loadingText?: string;
   isActive?: boolean;
+  size?: ButtonSize;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  fullWidth?: boolean;
+  shape?: ButtonShape;
 }
 
+const BASE = 'transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer inline-flex items-center gap-2';
+
+const SIZE_PAD: Record<ButtonSize, string> = {
+  sm: 'px-2.5 py-1.5 text-xs',
+  md: 'px-3 py-2 text-sm',
+  lg: 'px-4 py-2.5 text-base',
+};
+
+const SIZE_ICON_PAD: Record<ButtonSize, string> = {
+  sm: 'p-1.5',
+  md: 'p-2',
+  lg: 'p-2.5',
+};
+
+const SHAPE_CLASS: Record<ButtonShape, string> = {
+  rounded: 'rounded-md',
+  pill:    'rounded-full',
+  square:  'rounded-none',
+};
+
+const VARIANT_STYLE: Record<ButtonVariant, string> = {
+  primary:   'border border-indigo-600/20 dark:border-indigo-500/20 font-medium 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: 'font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 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:      'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 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:    'border border-red-600/20 dark:border-red-500/20 font-medium 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:   'border border-green-600/20 dark:border-green-500/20 font-medium 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:   'border border-gray-300 dark:border-gray-600 font-medium 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 px-4 py-2 text-sm font-medium 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 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:   'border border-yellow-600/20 dark:border-yellow-500/20 font-medium 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:    'font-medium 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',
+  ghost:     'font-medium text-indigo-600 dark:text-indigo-400 bg-transparent border border-indigo-200 dark:border-indigo-800 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 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',
+};
+
 export const Button: FC<ButtonProps> = ({
   variant = 'primary',
   children,
   isLoading = false,
   loadingText,
   isActive = false,
+  size = 'md',
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  shape,
   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'
-  };
+  const sizeCls = variant === 'icon'
+    ? SIZE_ICON_PAD[size]
+    : variant === 'nav' || variant === 'link' || variant === 'custom'
+      ? ''
+      : SIZE_PAD[size];
 
-  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+  const defaultShape: ButtonShape = variant === 'icon' ? 'pill' : 'rounded';
+  const shapeCls = variant === 'link' || variant === 'custom' ? '' : SHAPE_CLASS[shape ?? defaultShape];
 
-  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';
+  let stateCls = '';
+  if (variant === 'nav') {
+    stateCls = isActive
+      ? 'bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105'
+      : 'hover:bg-white dark:hover:bg-gray-700';
   }
-
-  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';
-    }
+    stateCls = isActive
+      ? 'bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700'
+      : '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';
   }
 
+  const classes = [
+    BASE,
+    VARIANT_STYLE[variant],
+    sizeCls,
+    shapeCls,
+    stateCls,
+    fullWidth ? 'w-full justify-center' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
   return (
-    <button
-      className={classes}
-      disabled={disabled || isLoading}
-      {...props}
-    >
+    <button className={classes} disabled={disabled || isLoading} {...props}>
       {isLoading ? (
         <>
-          <AnimateSpin className="h-5 w-5 mr-2 inline-block text-current" />
-          {loadingText || 'Cargando...'}
+          <AnimateSpin className="h-4 w-4 shrink-0 text-current" />
+          {loadingText ?? 'Cargando...'}
         </>
       ) : (
-        children
+        <>
+          {leftIcon && <span className="shrink-0">{leftIcon}</span>}
+          {children}
+          {rightIcon && <span className="shrink-0">{rightIcon}</span>}
+        </>
       )}
     </button>
   );
-};
+};

package/src/components/html/Form.tsx

@@ -1,40 +1,60 @@
-import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode } from 'react';
+import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode, type CSSProperties } from 'react';
 
 interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+    /** Number of columns for a CSS grid layout. 1 = single column, >1 = multi-column grid. */
+    columns?: number;
 }
 
-export const Form: FC<FormProps> = ({ onSubmit, children, variant = 'default', className = '', ...props }) => {
+export const Form: FC<FormProps> = ({
+    onSubmit,
+    children,
+    variant = 'default',
+    columns,
+    className = '',
+    style,
+    ...props
+}) => {
     const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        if (onSubmit) {
-            onSubmit(e);
-        }
+        onSubmit?.(e);
     };
 
-    const getVariantClasses = () => {
+    const hasGrid = columns !== undefined && columns > 1;
+
+    const getVariantClasses = (): string => {
         switch (variant) {
             case 'modal':
                 return 'flex-1 px-6 py-4 overflow-y-auto';
             case 'card':
-                return 'p-6 space-y-6';
+                return `bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-6${hasGrid ? '' : ' space-y-6'}`;
             case 'inline':
-                return 'flex flex-wrap gap-4 items-end';
+                return hasGrid ? '' : 'flex flex-wrap gap-4 items-end';
             case 'compact':
-                return 'space-y-3';
+                return hasGrid ? '' : 'space-y-3';
             case 'default':
             default:
-                return 'space-y-4';
+                return hasGrid ? '' : 'space-y-4';
         }
     };
 
-    const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+    const gridStyle: CSSProperties = hasGrid
+        ? { display: 'grid', gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap: '1rem' }
+        : {};
+
+    const combinedClassName = [getVariantClasses(), className].filter(Boolean).join(' ');
+    const combinedStyle: CSSProperties = { ...gridStyle, ...style };
 
     return (
-        <form onSubmit={handleSubmit} className={combinedClassName} {...props}>
+        <form
+            onSubmit={handleSubmit}
+            className={combinedClassName}
+            style={Object.keys(combinedStyle).length > 0 ? combinedStyle : undefined}
+            {...props}
+        >
             {children}
         </form>
     );
-};
+};

package/src/components/html/Input.tsx

@@ -1,19 +1,48 @@
 import { type InputHTMLAttributes, type FC, type ReactNode } from 'react';
+import { CloseIcon } from '../icons/icons';
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+type InputVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type InputSize = 'sm' | 'md' | 'lg';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
   label?: string | ReactNode;
   error?: string;
   helperText?: string;
   icon?: ReactNode;
   iconSide?: 'left' | 'right';
+  variant?: InputVariant;
+  size?: InputSize;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  clearable?: boolean;
+  onClear?: () => void;
 }
 
+const SIZE_CLASSES: Record<InputSize, string> = {
+  sm: 'px-2.5 py-1.5 text-xs',
+  md: 'px-3 py-2 text-sm',
+  lg: 'px-4 py-2.5 text-base',
+};
+
+const VARIANT_CLASSES: Record<InputVariant, string> = {
+  default: 'border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800',
+  outline: 'border-2 border-indigo-300 dark:border-indigo-600 bg-transparent',
+  filled:  'border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700',
+  minimal: 'border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent rounded-none focus:ring-0',
+};
+
 export const Input: FC<InputProps> = ({
   label,
   error,
   helperText,
   icon,
   iconSide = 'left',
+  variant = 'default',
+  size = 'md',
+  prefix,
+  suffix,
+  clearable = false,
+  onClear,
   className = '',
   id,
   type,
@@ -21,32 +50,57 @@ export const Input: FC<InputProps> = ({
 }) => {
   const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
 
-  // ── Default text input ────────────────────────────────────────────────────
-  const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
-  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
-  const iconPaddingLeft = icon && iconSide === 'left' ? 'pl-9' : '';
-  const iconPaddingRight = icon && iconSide === 'right' ? 'pr-9' : '';
-  const classes = `${baseClasses} ${errorClasses} ${iconPaddingLeft} ${iconPaddingRight} ${className}`.trim();
+  const errorCls = error
+    ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500'
+    : '';
+
+  const showClear = clearable && !props.disabled && props.value !== undefined && props.value !== '';
+  const hasRightSlot = (icon && iconSide === 'right') || showClear;
+
+  const baseCls = 'appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
+
+  const inputCls = [
+    baseCls,
+    SIZE_CLASSES[size],
+    VARIANT_CLASSES[variant],
+    errorCls,
+    icon && iconSide === 'left' ? 'pl-9' : '',
+    hasRightSlot ? 'pr-9' : '',
+    prefix ? 'rounded-l-none' : '',
+    suffix ? 'rounded-r-none' : '',
+    className,
+  ].filter(Boolean).join(' ');
 
   // ── Checkbox / Radio ──────────────────────────────────────────────────────
-  const toggleShape = type === 'radio' ? 'rounded-full' : 'rounded';
-  const toggleBaseClasses = `h-4 w-4 ${toggleShape} border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer`;
-  const toggleErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : '';
-  const toggleClasses = `${toggleBaseClasses} ${toggleErrorClasses}`.trim();
+  const toggleCls = [
+    `h-4 w-4 ${type === 'radio' ? 'rounded-full' : 'rounded'} border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800`,
+    'text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400',
+    'focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900',
+    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer',
+    error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : '',
+  ].filter(Boolean).join(' ');
 
   // ── File input ────────────────────────────────────────────────────────────
-  const fileBaseClasses = 'block w-full sm:text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer';
-  const fileErrorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-600';
-  const fileClasses = `${fileBaseClasses} ${fileErrorClasses} ${className}`.trim();
+  const fileCls = [
+    'block w-full text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md',
+    'focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500',
+    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200',
+    'file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium',
+    'file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300',
+    'hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer',
+    SIZE_CLASSES[size],
+    error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400' : 'border-gray-300 dark:border-gray-600',
+    className,
+  ].filter(Boolean).join(' ');
 
   const hasHidden = Boolean(className && /\bhidden\b/.test(className));
-  const wrapperBase = 'space-y-1 w-full';
-  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
+  const wrapperCls = `space-y-1 w-full${hasHidden ? ' hidden' : ''}`;
 
   const labelNode = label && (
     typeof label === 'string' ? (
       <label htmlFor={inputId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
         {label}
+        {props.required && <span className="ml-1 text-red-500" aria-hidden="true">*</span>}
       </label>
     ) : label
   );
@@ -61,9 +115,9 @@ export const Input: FC<InputProps> = ({
 
   if (type === 'checkbox' || type === 'radio') {
     return (
-      <div className={wrapperClasses}>
+      <div className={wrapperCls}>
         <div className="flex items-center space-x-2">
-          <input id={inputId} type={type} className={toggleClasses} {...props} />
+          <input id={inputId} type={type} className={toggleCls} {...props} />
           {labelNode}
         </div>
         {errorNode}
@@ -74,29 +128,54 @@ export const Input: FC<InputProps> = ({
 
   if (type === 'file') {
     return (
-      <div className={wrapperClasses}>
+      <div className={wrapperCls}>
         {labelNode}
-        <input id={inputId} type="file" className={fileClasses} {...props} />
+        <input id={inputId} type="file" className={fileCls} {...props} />
         {errorNode}
         {helperNode}
       </div>
     );
   }
 
+  const prefixBorderCls = error ? 'border-red-300 dark:border-red-600' : 'border-gray-300 dark:border-gray-600';
+
   return (
-    <div className={wrapperClasses}>
+    <div className={wrapperCls}>
       {labelNode}
-      <div className="relative">
-        {icon && iconSide === 'left' && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500">
-            {icon}
-          </div>
+      <div className="flex">
+        {prefix && (
+          <span className={`inline-flex shrink-0 items-center px-3 border border-r-0 ${prefixBorderCls} bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-l-md text-sm`}>
+            {prefix}
+          </span>
         )}
-        <input id={inputId} className={classes} type={type} {...props} />
-        {icon && iconSide === 'right' && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500">
-            {icon}
-          </div>
+        <div className="relative flex-1">
+          {icon && iconSide === 'left' && (
+            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500">
+              {icon}
+            </div>
+          )}
+          <input id={inputId} className={inputCls} type={type} {...props} />
+          {icon && iconSide === 'right' && !showClear && (
+            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500">
+              {icon}
+            </div>
+          )}
+          {showClear && (
+            <button
+              type="button"
+              onClick={onClear}
+              tabIndex={-1}
+              aria-label="Limpiar"
+              className="absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <CloseIcon className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+        {suffix && (
+          <span className={`inline-flex shrink-0 items-center px-3 border border-l-0 ${prefixBorderCls} bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-r-md text-sm`}>
+            {suffix}
+          </span>
         )}
       </div>
       {errorNode}

package/src/components/html/Loading.tsx

@@ -6,6 +6,10 @@ interface LoadingProps {
   color?: 'primary' | 'white' | 'gray' | 'success' | 'danger' | 'warning';
   label?: string;
   className?: string;
+  /** Renders over the nearest positioned ancestor (parent needs position: relative) */
+  overlay?: boolean;
+  /** Renders as a fixed full-page overlay */
+  fullPage?: boolean;
 }
 
 export const Loading: FC<LoadingProps> = ({
@@ -14,20 +18,22 @@ export const Loading: FC<LoadingProps> = ({
   color = 'primary',
   label,
   className = '',
+  overlay = false,
+  fullPage = false,
 }) => {
   const sizeClasses = {
-    small: 'h-4 w-4',
+    small:  'h-4 w-4',
     medium: 'h-8 w-8',
-    large: 'h-12 w-12',
-    xl: 'h-16 w-16',
+    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',
+    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',
+    danger:  'text-red-600 dark:text-red-400',
     warning: 'text-yellow-600 dark:text-yellow-400',
   };
 
@@ -35,69 +41,88 @@ export const Loading: FC<LoadingProps> = ({
     const commonClass = `${sizeClasses[size]} ${colorClasses[color]}`;
 
     switch (variant) {
-      case 'dots':
+      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 className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0s' }} />
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.15s' }} />
+            <div className={`rounded-full bg-current animate-bounce ${dotSize}`} style={{ animationDelay: '0.3s' }} />
           </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 className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0s' }} />
+            <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '100%', animationDelay: '0.2s' }} />
+            <div className="w-1/4 bg-current animate-[pulse_1s_ease-in-out_infinite]" style={{ height: '60%', animationDelay: '0.4s' }} />
           </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 className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-current" />
+            <span className="relative inline-flex rounded-full h-full w-full bg-current" />
           </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>
+          <div className={`${commonClass} grid grid-cols-2 gap-1`}>
+            <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0s' }} />
+            <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '0.5s' }} />
+            <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1.5s' }} />
+            <div className="bg-current animate-[pulse_2s_ease-in-out_infinite]" style={{ animationDelay: '1s' }} />
+          </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>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <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" />
           </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>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
           </svg>
         );
     }
   };
 
+  const inner = (
+    <div className={`flex flex-col items-center justify-center ${className}`} role="status">
+      {renderIcon()}
+      {label && (
+        <span className={`mt-3 text-sm font-medium ${colorClasses[color]}`}>{label}</span>
+      )}
+    </div>
+  );
+
+  if (fullPage) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm">
+        {inner}
+      </div>
+    );
+  }
+
+  if (overlay) {
+    return (
+      <div className="absolute inset-0 z-10 flex items-center justify-center bg-gray-900/40 backdrop-blur-sm rounded-[inherit]">
+        {inner}
+      </div>
+    );
+  }
+
   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>
+        <span className={`mt-3 text-sm font-medium ${colorClasses[color]}`}>{label}</span>
       )}
     </div>
   );