neogestify-ui-components 2.2.2 → 2.3.0

package/src/components/html/Modal.tsx

@@ -1,62 +1,109 @@
 import { Button } from './Button';
 import { CloseIcon } from '../icons/icons';
-import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalVariant = 'default' | 'danger' | 'success' | 'warning';
 
 interface ModalProps {
     onClose: () => void;
-    title: string;
+    title: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
+    /** @deprecated Use size instead */
     maxWidth?: string;
+    size?: ModalSize;
     showCloseButton?: boolean;
     zIndex?: number;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    variant?: ModalVariant;
 }
 
 export interface ModalRef {
     handleClose: () => void;
 }
 
+const SIZE_CLASS: Record<ModalSize, string> = {
+    sm:   'max-w-sm',
+    md:   'max-w-md',
+    lg:   'max-w-2xl',
+    xl:   'max-w-4xl',
+    full: 'max-w-[95vw] w-[95vw]',
+};
+
+const VARIANT_HEADER: Record<ModalVariant, string> = {
+    default: 'bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700',
+    danger:  'bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800',
+    success: 'bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800',
+    warning: 'bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800',
+};
+
+const VARIANT_TITLE: Record<ModalVariant, string> = {
+    default: 'text-gray-900 dark:text-white',
+    danger:  'text-red-700 dark:text-red-300',
+    success: 'text-green-700 dark:text-green-300',
+    warning: 'text-yellow-700 dark:text-yellow-300',
+};
+
 export const Modal = forwardRef<ModalRef, ModalProps>(({
     onClose,
     title,
     children,
     footer,
-    maxWidth = 'max-w-2xl',
+    maxWidth,
+    size,
     showCloseButton = true,
-    zIndex = 50
+    zIndex = 50,
+    closeOnBackdrop = false,
+    closeOnEsc = false,
+    variant = 'default',
 }, ref) => {
     const [show, setShow] = useState(false);
-
-    useEffect(() => {
-        setShow(true);
-    }, []);
+    const handleCloseRef = useRef<() => void>(() => {});
 
     const handleClose = () => {
         setShow(false);
-        setTimeout(() => {
-            onClose();
-        }, 300);
+        setTimeout(() => onClose(), 300);
     };
 
-    useImperativeHandle(ref, () => ({
-        handleClose
-    }));
+    handleCloseRef.current = handleClose;
+
+    useEffect(() => { setShow(true); }, []);
+
+    useEffect(() => {
+        if (!closeOnEsc) return;
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') handleCloseRef.current();
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [closeOnEsc]);
+
+    useImperativeHandle(ref, () => ({ handleClose }));
+
+    const widthCls = size ? SIZE_CLASS[size] : (maxWidth ?? 'max-w-2xl');
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        if (closeOnBackdrop && e.target === e.currentTarget) handleClose();
+    };
 
     return (
         <dialog
             open={show}
-            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && 'opacity-100'} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`}
+            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 transition-opacity duration-300 bg-gray-900/60 backdrop-blur-sm ${show ? 'opacity-100' : 'opacity-0'}`}
             style={{ zIndex: zIndex - 10 }}
+            onClick={handleBackdropClick}
         >
             <article
-                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`}
+                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${widthCls} max-h-[90vh] flex flex-col overflow-hidden`}
                 style={{ zIndex }}
             >
-                <header className="shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
-                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
+                <header className={`shrink-0 px-6 py-4 flex items-center justify-between ${VARIANT_HEADER[variant]}`}>
+                    <h2 className={`text-2xl font-bold ${VARIANT_TITLE[variant]}`}>{title}</h2>
                     {showCloseButton && (
                         <Button
-                            variant='icon'
+                            variant="icon"
                             onClick={handleClose}
                             className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                         >
@@ -77,4 +124,4 @@ export const Modal = forwardRef<ModalRef, ModalProps>(({
     );
 });
 
-Modal.displayName = 'Modal';
+Modal.displayName = 'Modal';

package/src/components/html/Select.tsx

@@ -1,4 +1,8 @@
 import { type SelectHTMLAttributes, type FC, type ReactNode } from 'react';
+import { ChevronDownIcon } from '../icons/icons';
+
+type SelectVariant = 'default' | 'outline' | 'filled' | 'minimal' | 'custom' | 'small';
+type SelectSize = 'sm' | 'md' | 'lg';
 
 interface Option {
   value: string | number;
@@ -10,73 +14,122 @@ interface Option {
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   options: Option[];
   placeholder?: string;
-  variant?: 'default' | 'small';
-  error?: boolean;
+  variant?: SelectVariant;
+  size?: SelectSize;
+  error?: string | boolean;
   helperText?: string;
   label?: string | ReactNode;
+  icon?: ReactNode;
 }
 
+const SIZE_CLASSES: Record<SelectSize, string> = {
+  sm: 'py-1.5 text-xs',
+  md: 'py-2 text-sm',
+  lg: 'py-2.5 text-base',
+};
+
+const VARIANT_CLASSES: Record<Exclude<SelectVariant, 'small'>, 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',
+  custom:  '',
+};
+
 export const Select: FC<SelectProps> = ({
   options,
   placeholder,
   variant = 'default',
+  size = 'md',
   error = false,
   helperText,
   label,
+  icon,
   className = '',
   id,
   ...props
 }) => {
   const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
 
-  const getVariantClasses = () => {
-    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';
+  // backward compat: variant='small' → size='sm'
+  const effectiveSize: SelectSize = variant === 'small' ? 'sm' : size;
+  const effectiveVariant: Exclude<SelectVariant, 'small'> = variant === 'small' ? 'default' : variant;
 
-    if (variant === 'small') {
-      return `${baseClasses.replace('px-3 py-2', 'px-2.5 py-1.5 text-sm')} border-gray-300 dark:border-gray-600`;
-    }
+  const hasError = Boolean(error);
+  const errorMsg = typeof error === 'string' ? error : '';
 
-    return `${baseClasses} border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : ''}`;
-  };
+  // Compute defaultValue from options[].selected when no controlled value provided
+  const computedDefaultValue =
+    props.value === undefined && props.defaultValue === undefined
+      ? options.find((o) => o.selected)?.value?.toString()
+      : undefined;
 
-  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 baseCls =
+    'appearance-none relative block w-full pl-3 pr-9 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 combinedClassName = `${getVariantClasses()} ${className}`.trim();
+  const errorCls = hasError
+    ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500'
+    : '';
+
+  const selectCls = [
+    baseCls,
+    SIZE_CLASSES[effectiveSize],
+    VARIANT_CLASSES[effectiveVariant],
+    errorCls,
+    icon ? 'pl-9' : '',
+    className,
+  ].filter(Boolean).join(' ');
 
   return (
     <div className="space-y-1 w-full">
-      {label && typeof label === 'string' ? (
-        <label htmlFor={selectId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-          {label}
-        </label>
-      ) : (
-        label
+      {label && (
+        typeof label === 'string' ? (
+          <label htmlFor={selectId} 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
       )}
-      <select id={selectId} className={combinedClassName} {...props}>
-        {placeholder && placeholder.trim() && (
-          <option value="" disabled selected className="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2">
-            {placeholder}
-          </option>
+      <div className="relative">
+        {icon && (
+          <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>
         )}
-        {options.map((option) => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-            selected={option.selected}
-            className={getOptionClasses(option)}
-          >
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {helperText && (
-        <p className={`text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
+        <select
+          id={selectId}
+          className={selectCls}
+          defaultValue={computedDefaultValue}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled className="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+              className={`bg-white dark:bg-gray-800 text-gray-900 dark:text-white${option.disabled ? ' opacity-50' : ''}`}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5 text-gray-400 dark:text-gray-500">
+          <ChevronDownIcon className="w-4 h-4" />
+        </div>
+      </div>
+      {errorMsg && (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">{errorMsg}</p>
+      )}
+      {helperText && !errorMsg && (
+        <p className={`text-sm ${hasError ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
           {helperText}
         </p>
       )}
     </div>
   );
-};
+};