first commit

src/components/forms/index.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+
+export const FormInput = forwardRef<HTMLInputElement, any>(
+  ({ label, error, className = "", ...props }, ref) => (
+    <div className={`${className} relative`}>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        {label}
+        {props.required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <input
+        ref={ref}
+        className={`
+          w-full px-4 py-2 rounded-lg
+          border border-gray-300 dark:border-gray-600
+          bg-white dark:bg-gray-700
+          text-gray-900 dark:text-white
+          placeholder-gray-400 dark:placeholder-gray-500
+          focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 
+          focus:border-transparent
+          transition-colors
+          ${error ? "border-red-300 focus:ring-red-500" : ""}
+        `}
+        {...props}
+      />
+      {error && (
+        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  )
+);
+
+export const FormSelect = forwardRef<HTMLSelectElement, any>(
+  ({ label, error, options, className = "", ...props }, ref) => (
+    <div className={`${className} relative`}>
+      <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+        {label}
+        {props.required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <select
+        ref={ref}
+        className={`
+        w-full px-4 py-3 rounded-lg
+        border border-gray-300 dark:border-gray-600
+        bg-white dark:bg-gray-700
+        text-gray-900 dark:text-white
+        transition duration-150 ease-in-out
+        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
+        focus:border-transparent
+        hover:border-gray-400 dark:hover:border-gray-500
+        appearance-none
+        ${error ? "border-red-300 focus:ring-red-500" : ""}
+      `}
+        {...props}
+      >
+        <option value="" className="dark:bg-gray-700">Selecione...</option>
+        {options?.map((opt: any) => (
+          <option key={opt.value} value={opt.value} className="dark:bg-gray-700">
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && (
+        <div className="absolute -bottom-5 left-0">
+          <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+        </div>
+      )}
+    </div>
+  ),
+);
+
+// Adicione classes dark mode similares para outros componentes de formulário