neogestify-ui-components 1.2.9 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/html/Select.tsx

@@ -30,7 +30,7 @@ export const Select: FC<SelectProps> = ({
   const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
 
   const getVariantClasses = () => {
-    const baseClasses = 'w-full bg-white dark:bg-gray-700 border rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-colors [&>option]:bg-white [&>option]:dark:bg-gray-800 [&>option]:text-gray-900 [&>option]:dark:text-white [&>option]:py-2 [&>option:checked]:bg-indigo-50 [&>option:checked]:dark:bg-indigo-900/50 [&>option:disabled]:opacity-50 [&>option:disabled]:cursor-not-allowed';
+    const baseClasses = 'w-full bg-white dark:bg-gray-700 border rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-colors';
 
     if (variant === 'small') {
       return `${baseClasses} px-2.5 py-1.5 text-sm border-gray-300 dark:border-gray-600`;
@@ -39,6 +39,10 @@ export const Select: FC<SelectProps> = ({
     return `${baseClasses} px-3 py-2 border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500' : ''}`;
   };
 
+  const getOptionClasses = (option: Option) => {
+    return `bg-white dark:bg-gray-800 text-gray-900 dark:text-white py-2 ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}`;
+  };
+
   const combinedClassName = `${getVariantClasses()} ${className}`.trim();
 
   return (
@@ -52,7 +56,7 @@ export const Select: FC<SelectProps> = ({
       )}
       <select id={selectId} className={combinedClassName} {...props}>
         {placeholder && placeholder.trim() && (
-          <option value="" disabled>
+          <option value="" disabled className="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2">
             {placeholder}
           </option>
         )}
@@ -62,6 +66,7 @@ export const Select: FC<SelectProps> = ({
             value={option.value}
             disabled={option.disabled}
             selected={option.selected}
+            className={getOptionClasses(option)}
           >
             {option.label}
           </option>

package/src/components/html/index.ts

@@ -3,7 +3,6 @@ export { Input } from './Input';
 export { TextArea } from './TextArea';
 export { Form } from './Form';
 export { Select } from './Select';
-export { CustomSelect } from './CustomSelect';
 export { Table } from './Table';
 export { Modal, type ModalRef } from './Modal';
 export { Loading } from './Loading';

package/src/components/html/CustomSelect.tsx

@@ -1,324 +0,0 @@
-import { type FC, type ReactNode, useState, useRef, useEffect } from 'react';
-
-interface Option {
-  value: string | number;
-  label: string;
-  disabled?: boolean;
-  selected?: boolean;
-}
-
-interface CustomSelectProps {
-  options: Option[];
-  placeholder?: string;
-  variant?: 'default' | 'small';
-  error?: boolean;
-  helperText?: string;
-  label?: string | ReactNode;
-  className?: string;
-  id?: string;
-  disabled?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  onChange?: (value: string | number) => void;
-  name?: string;
-  required?: boolean;
-  // Styling props for customization
-  optionClassName?: string;
-  optionSelectedClassName?: string;
-  optionHoverClassName?: string;
-  optionDisabledClassName?: string;
-  dropdownClassName?: string;
-}
-
-export const CustomSelect: FC<CustomSelectProps> = ({
-  options,
-  placeholder,
-  variant = 'default',
-  error = false,
-  helperText,
-  label,
-  className = '',
-  id,
-  disabled = false,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  name,
-  required,
-  optionClassName = '',
-  optionSelectedClassName = '',
-  optionHoverClassName = '',
-  optionDisabledClassName = '',
-  dropdownClassName = '',
-}) => {
-  const selectId = id || `custom-select-${Math.random().toString(36).substring(2, 9)}`;
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<string | number | undefined>(
-    controlledValue ?? defaultValue ?? options.find(opt => opt.selected)?.value
-  );
-  const [hoveredIndex, setHoveredIndex] = useState<number>(-1);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const isControlled = controlledValue !== undefined;
-  const currentValue = isControlled ? controlledValue : selectedValue;
-
-  useEffect(() => {
-    if (isControlled) {
-      setSelectedValue(controlledValue);
-    }
-  }, [controlledValue, isControlled]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        setSearchTerm('');
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (isOpen && hoveredIndex >= 0 && dropdownRef.current) {
-      const hoveredElement = dropdownRef.current.children[hoveredIndex] as HTMLElement;
-      if (hoveredElement) {
-        hoveredElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }
-  }, [hoveredIndex, isOpen]);
-
-  const selectedOption = options.find(opt => opt.value === currentValue);
-
-  const handleSelect = (option: Option) => {
-    if (option.disabled) return;
-
-    if (!isControlled) {
-      setSelectedValue(option.value);
-    }
-
-    onChange?.(option.value);
-    setIsOpen(false);
-    setSearchTerm('');
-    setHoveredIndex(-1);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          const selectedIdx = options.findIndex(opt => opt.value === currentValue);
-          setHoveredIndex(selectedIdx >= 0 ? selectedIdx : 0);
-        } else if (hoveredIndex >= 0) {
-          handleSelect(options[hoveredIndex]);
-        }
-        break;
-
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          const selectedIdx = options.findIndex(opt => opt.value === currentValue);
-          setHoveredIndex(selectedIdx >= 0 ? selectedIdx : 0);
-        } else {
-          setHoveredIndex(prev => {
-            let next = prev + 1;
-            while (next < options.length && options[next].disabled) {
-              next++;
-            }
-            return next < options.length ? next : prev;
-          });
-        }
-        break;
-
-      case 'ArrowUp':
-        e.preventDefault();
-        if (isOpen) {
-          setHoveredIndex(prev => {
-            let next = prev - 1;
-            while (next >= 0 && options[next].disabled) {
-              next--;
-            }
-            return next >= 0 ? next : prev;
-          });
-        }
-        break;
-
-      case 'Escape':
-        e.preventDefault();
-        setIsOpen(false);
-        setSearchTerm('');
-        break;
-
-      case 'Tab':
-        if (isOpen) {
-          setIsOpen(false);
-          setSearchTerm('');
-        }
-        break;
-
-      default:
-        // Type-ahead search
-        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-          e.preventDefault();
-          const newSearchTerm = searchTerm + e.key.toLowerCase();
-          setSearchTerm(newSearchTerm);
-
-          const matchIndex = options.findIndex(opt => 
-            !opt.disabled && opt.label.toLowerCase().startsWith(newSearchTerm)
-          );
-
-          if (matchIndex >= 0) {
-            setHoveredIndex(matchIndex);
-            if (!isOpen) {
-              handleSelect(options[matchIndex]);
-            }
-          }
-
-          if (searchTimeout) clearTimeout(searchTimeout);
-          const timeout = setTimeout(() => setSearchTerm(''), 1000);
-          setSearchTimeout(timeout);
-        }
-        break;
-    }
-  };
-
-  const getButtonClasses = () => {
-    const baseClasses = 'w-full bg-white dark:bg-gray-700 border rounded-lg text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-colors';
-
-    if (variant === 'small') {
-      return `${baseClasses} px-2.5 py-1.5 text-sm border-gray-300 dark:border-gray-600`;
-    }
-
-    return `${baseClasses} px-3 py-2 border-gray-300 dark:border-gray-600 ${
-      error ? 'border-red-300 dark:border-red-600 focus:ring-red-500' : ''
-    }`;
-  };
-
-  const getOptionClasses = (option: Option, index: number) => {
-    const isSelected = option.value === currentValue;
-    const isHovered = index === hoveredIndex;
-    
-    let classes = 'px-3 py-2 cursor-pointer transition-colors';
-
-    if (option.disabled) {
-      classes += ' opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800';
-      if (optionDisabledClassName) {
-        classes += ` ${optionDisabledClassName}`;
-      }
-    } else {
-      if (isSelected) {
-        classes += ' bg-indigo-50 dark:bg-indigo-900/50 text-indigo-900 dark:text-indigo-100 font-medium';
-        if (optionSelectedClassName) {
-          classes += ` ${optionSelectedClassName}`;
-        }
-      } else if (isHovered) {
-        classes += ' bg-gray-100 dark:bg-gray-600';
-        if (optionHoverClassName) {
-          classes += ` ${optionHoverClassName}`;
-        }
-      } else {
-        classes += ' text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600';
-      }
-    }
-
-    if (optionClassName) {
-      classes += ` ${optionClassName}`;
-    }
-
-    return classes;
-  };
-
-  const combinedButtonClassName = `${getButtonClasses()} ${className}`.trim();
-  const combinedDropdownClassName = `absolute z-50 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto ${dropdownClassName}`.trim();
-
-  return (
-    <div className="space-y-1 w-full">
-      {label && typeof label === 'string' ? (
-        <label htmlFor={selectId} className="block text-xs font-normal text-gray-700 dark:text-gray-300">
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-      ) : (
-        label
-      )}
-      
-      <div ref={containerRef} className="relative w-full">
-        <button
-          id={selectId}
-          type="button"
-          role="combobox"
-          aria-expanded={isOpen}
-          aria-haspopup="listbox"
-          aria-labelledby={label ? `${selectId}-label` : undefined}
-          aria-required={required}
-          disabled={disabled}
-          className={combinedButtonClassName}
-          onClick={() => !disabled && setIsOpen(!isOpen)}
-          onKeyDown={handleKeyDown}
-        >
-          <span className={selectedOption ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}>
-            {selectedOption ? selectedOption.label : placeholder || 'Seleccionar...'}
-          </span>
-          <svg
-            className={`w-5 h-5 transition-transform text-gray-400 ${isOpen ? 'transform rotate-180' : ''}`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-
-        {isOpen && (
-          <div
-            ref={dropdownRef}
-            role="listbox"
-            aria-labelledby={label ? `${selectId}-label` : undefined}
-            className={combinedDropdownClassName}
-          >
-            {options.map((option, index) => (
-              <div
-                key={option.value}
-                role="option"
-                aria-selected={option.value === currentValue}
-                aria-disabled={option.disabled}
-                className={getOptionClasses(option, index)}
-                onClick={() => handleSelect(option)}
-                onMouseEnter={() => !option.disabled && setHoveredIndex(index)}
-              >
-                {option.label}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Hidden input for form submission */}
-        {name && (
-          <input
-            type="hidden"
-            name={name}
-            value={currentValue ?? ''}
-          />
-        )}
-      </div>
-
-      {helperText && (
-        <p className={`mt-1 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400'}`}>
-          {helperText}
-        </p>
-      )}
-    </div>
-  );
-};