🧰 field-kit

Field Kit es una librería de componentes de formularios accesibles y reutilizables para React, basada en React Hook Form , shadcn y TailwindCSS. Su objetivo es acelerar el desarrollo de formularios modernos, validables y accesibles desde el primer momento.

✨ Características

• Integración directa con react-hook-form
• Componentes de shadcn.ui estilizados con TailwindCSS y listos para producción
• Accesibilidad mejorada con soporte para ARIA
• Preparado para validaciones dinámicas
• Fácil de extender con nuevos componentes

🚀 Instalación

npm install @marlon-chaviano/field-kit"

o

pnpm install @marlon-chaviano/field-kit"

También asegúrate de tener instaladas las peer dependencies requeridas en tu proyecto:

npm install react react-dom react-hook-form tailwindcss

o

npm install react react-dom react-hook-form tailwindcss

🧪 Uso Básico

📥 InputField

Este es el componente base para campos de entrada de texto, ya integrado con react-hook-form.

📌 Ejemplo de uso

import { InputField } from "field-kit";
import { useForm, FormProvider } from "react-hook-form";

function MyForm() {
	const methods = useForm();

	const onSubmit = (data: any) => {
		console.log(data);
	};

	return (
		<FormProvider {...methods}>
			<form
				onSubmit={methods.handleSubmit(onSubmit)}
				className="space-y-4"
			>
				<InputField
					name="email"
					label="Email Address"
					type="email"
					rules={{ required: "This field is required" }}
					placeholder="Enter your email"
				/>
				<button
					type="submit"
					className="px-4 py-2 bg-blue-500 text-white rounded"
				>
					Submit
				</button>
			</form>
		</FormProvider>
	);
}

🔧 Props del componente

| Prop | Tipo | Descripción | | ---------------- | --------------------------------------- | ------------------------------------------------- | | name | string | Nombre del campo (requerido para React Hook Form) | | label | string (opcional) | Etiqueta del campo | | rules | RegisterOptions (opcional) | Reglas de validación | | errorClassName | string | Tailwind or css className for error message | | ...props | InputHTMLAttributes<HTMLInputElement> | Any other valid <input /> props |

📦 Roadmap

Próximamente se incluirán más componentes como:

• SelectField (con múltiples opciones)
• DatePickerField
• TextAreaField
• CheckboxField
• SwitchField
• Y más...

🤝 Contribuciones

¡Contribuciones, ideas y sugerencias son bienvenidas! Siéntete libre de abrir un issue o enviar un pull request.

📄 Licencia

ISC