first commit

src/components/forms/FormCheckbox.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+
+interface FormCheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+}
+
+export const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxProps>(
+  ({ label, ...props }, ref) => (
+    <label className="flex items-center space-x-3 cursor-pointer group">
+      <input
+        type="checkbox"
+        ref={ref}
+        className="
+          w-5 h-5 rounded
+          border-gray-300 text-blue-600
+          focus:ring-2 focus:ring-blue-500
+          transition duration-150 ease-in-out
+          cursor-pointer
+        "
+        {...props}
+      />
+      <span className="text-sm text-gray-700 group-hover:text-gray-900">
+        {label}
+      </span>
+    </label>
+  ),
+);
+
+FormCheckbox.displayName = "FormCheckbox";

src/components/forms/FormInput.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+
+interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+  multiline?: boolean;
+}
+
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  ({ label, error, className = "", multiline, ...props }, ref) => {
+    const Component = multiline ? 'textarea' : 'input';
+    
+    return (
+      <div className={`${className} relative`}>
+        <label className="block text-sm font-semibold text-gray-700 mb-2">
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <Component
+          ref={ref}
+          className={`
+            w-full px-4 py-3 rounded-lg
+            border border-gray-300
+            bg-white text-gray-900
+            transition duration-150 ease-in-out
+            placeholder-gray-400
+            focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            hover:border-gray-400
+            ${error ? "border-red-300 focus:ring-red-500" : ""}
+          `}
+          {...props}
+        />
+        {error && (
+          <div className="absolute -bottom-5 left-0">
+            <p className="text-xs text-red-500">{error}</p>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+FormInput.displayName = "FormInput";

src/components/forms/FormSelect.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from "react";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface FormSelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label: string;
+  error?: string;
+  options: Option[];
+}
+
+export const FormSelect = forwardRef<HTMLSelectElement, FormSelectProps>(
+  ({ label, error, options, className = "", ...props }, ref) => (
+    <div className={`${className} relative`}>
+      <label className="block text-sm font-semibold text-gray-700 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
+          bg-white text-gray-900
+          transition duration-150 ease-in-out
+          focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          hover:border-gray-400
+          appearance-none
+          ${error ? "border-red-300 focus:ring-red-500" : ""}
+        `}
+        {...props}
+      >
+        <option value="">Selecione...</option>
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {error && (
+        <div className="absolute -bottom-5 left-0">
+          <p className="text-xs text-red-500">{error}</p>
+        </div>
+      )}
+    </div>
+  ),
+);
+
+FormSelect.displayName = "FormSelect";

src/components/forms/index.ts

@@ -0,0 +1,3 @@
+export { FormInput } from "./FormInput";
+export { FormSelect } from "./FormSelect";
+export { FormCheckbox } from "./FormCheckbox";

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