uup

app/components/ui/Input.tsx

@@ -0,0 +1,86 @@
+import { InputHTMLAttributes, forwardRef, useId } from 'react';
+import { getFormInputClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  className?: string;
+  config?: Partial<LayoutConfig>;
+  label?: string;
+  error?: string;
+  helperText?: string;
+  fullWidth?: boolean;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
+  className = '', 
+  config = {},
+  label,
+  error,
+  helperText,
+  fullWidth = true,
+  startIcon,
+  endIcon,
+  id,
+  ...props
+}, ref) => {
+  const layoutConfig = { ...defaultLayoutConfig, ...config };
+  const inputClasses = getFormInputClasses(!!error);
+  
+  const fullWidthClass = fullWidth ? 'w-full' : '';
+  const hasIconsClass = (startIcon || endIcon) ? 'relative' : '';
+  
+  const generatedId = useId();
+  const inputId = id || generatedId;
+  
+  return (
+    <div className={`${fullWidthClass} ${className}`} dir={layoutConfig.direction}>
+      {label && (
+        <label 
+          htmlFor={inputId}
+          className={`block text-sm font-medium mb-2 ${error ? 'text-red-700' : 'text-gray-700'} ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}
+        >
+          {label}
+        </label>
+      )}
+      
+      <div className={`relative ${hasIconsClass}`}>
+        {startIcon && (
+          <div className={`absolute inset-y-0 ${layoutConfig.direction === 'rtl' ? 'right-0 pr-3' : 'left-0 pl-3'} flex items-center pointer-events-none`}>
+            <span className="text-gray-400 sm:text-sm">
+              {startIcon}
+            </span>
+          </div>
+        )}
+        
+        <input
+          ref={ref}
+          id={inputId}
+          className={`${inputClasses} ${startIcon ? (layoutConfig.direction === 'rtl' ? 'pr-10' : 'pl-10') : ''} ${endIcon ? (layoutConfig.direction === 'rtl' ? 'pl-10' : 'pr-10') : ''}`}
+          dir={layoutConfig.direction}
+          {...props}
+        />
+        
+        {endIcon && (
+          <div className={`absolute inset-y-0 ${layoutConfig.direction === 'rtl' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center pointer-events-none`}>
+            <span className="text-gray-400 sm:text-sm">
+              {endIcon}
+            </span>
+          </div>
+        )}
+      </div>
+      
+      {error && (
+        <p className={`mt-2 text-sm text-red-600 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {error}
+        </p>
+      )}
+      
+      {helperText && !error && (
+        <p className={`mt-2 text-sm text-gray-500 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+});