carconnect-gatherleads-ui-lib 2.2.0 → 2.2.1

package/README.md

@@ -128,7 +128,7 @@ El layout por defecto, apila campos uno debajo del otro.
 - ❌ Todas las demás propiedades de layout se ignoran
 
 ```tsx
-const verticalExample = {
+const verticalExample: GatherFormBuilderProps['config'] = {
   layout: 'vertical', // o sin especificar (default)
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -164,7 +164,7 @@ Dispone los campos en línea horizontal con flexbox.
 - ❌ Propiedades de grid se ignoran
 
 ```tsx
-const horizontalExample = {
+const horizontalExample: GatherFormBuilderProps['config'] = {
   layout: 'horizontal',
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -200,7 +200,7 @@ const horizontalExample = {
 **Ejemplo con `noWrap`:**
 
 ```tsx
-const horizontalNoWrap = {
+const horizontalNoWrap: GatherFormBuilderProps['config'] = {
   layout: 'horizontal',
   noWrap: true, // NO permite que los elementos pasen a nueva línea
   alignment: 'start', // justify-start: alineados a la izquierda
@@ -236,7 +236,7 @@ Organiza campos en una cuadrícula con sistema de columnas.
 - ❌ Propiedades de flex se ignoran
 
 ```tsx
-const gridResponsive = {
+const gridResponsive: GatherFormBuilderProps['config'] = {
   layout: 'grid',
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -278,7 +278,7 @@ const gridResponsive = {
 **Ejemplo con `autoFit`:**
 
 ```tsx
-const gridAutoFit = {
+const gridAutoFit: GatherFormBuilderProps['config'] = {
   layout: 'grid',
   autoFit: true, // ACTIVA el auto-ajuste (min 250px por columna)
   gap: 'gap-4',
@@ -311,7 +311,7 @@ Similar a Pinterest, para campos de diferentes alturas.
 - ❌ Otras propiedades de grid/flex se ignoran
 
 ```tsx
-const masonryExample = {
+const masonryExample: GatherFormBuilderProps['config'] = {
   layout: 'masonry',
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -362,7 +362,7 @@ Campos en línea con wrap automático, centrados verticalmente.
 - ❌ Todas las demás propiedades se ignoran
 
 ```tsx
-const inlineExample = {
+const inlineExample: GatherFormBuilderProps['config'] = {
   layout: 'inline',
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -406,7 +406,7 @@ Vertical con opciones especiales de espaciado y divisores.
 - ❌ Propiedades de grid/flex se ignoran
 
 ```tsx
-const stackExample = {
+const stackExample: GatherFormBuilderProps['config'] = {
   layout: 'stack',
 
   // PROPIEDADES QUE FUNCIONAN:
@@ -470,7 +470,7 @@ const stackExample = {
 ## 🎯 Ejemplo Completo Combinando Propiedades
 
 ```tsx
-const complexFormConfig = {
+const complexFormConfig: GatherFormBuilderProps['config'] = {
   title: 'Formulario Complejo',
   layout: 'grid',
 
@@ -1743,7 +1743,7 @@ actionButton: {
 const FormularioConValidaciones = () => {
   const [isLoading, setIsLoading] = useState(false);
 
-  const config: FormConfig = {
+  const config: GatherFormBuilderProps['config'] = {
     title: 'Registro con Validaciones',
     layout: 'grid',
     gridCols: 2,

package/dist/carconnect-gatherleads-ui-lib.d.ts

@@ -485,6 +485,48 @@ export declare interface GatherDateFieldConfig extends BaseFieldConfig {
     size?: 'sm' | 'md' | 'lg';
 }
 
+/**
+ * Componente que construye un formulario dinámico en base a una configuración declarativa.
+ *
+ * @component
+ * @param {GatherFormBuilderProps} props - Propiedades para configurar el formulario.
+ *
+ * @property {Object} config - Configuración del formulario (campos, botones, layout, título, etc).
+ * @property {Function} onSubmit - Función asíncrona que se ejecuta al enviar el formulario.
+ * @property {Function} [onAction] - Función que se ejecuta al presionar el botón de acción (ej: limpiar).
+ * @property {boolean} [resetData=true] - Si `true`, resetea los datos después de enviar el formulario exitosamente.
+ * @property {Object} [defaultValues={}] - Valores iniciales para los campos del formulario.
+ * @property {boolean} [isLoading=false] - Indica si el formulario está en estado de carga.
+ * @property {string} [className=""] - Clases adicionales para el contenedor principal.
+ * @property {'onBlur' | 'onChange' | 'onSubmit' | 'onTouched' | 'all'} [validationMode='onChange'] - Modo de validación usado por React Hook Form.
+ *
+ * @example
+ * ```tsx
+ * <GatherFormBuilder
+ *   config={{
+ *     title: "Registro",
+ *     description: "Completa los siguientes campos",
+ *     layout: "grid",
+ *     fields: [
+ *       { name: "nombre", label: "Nombre", type: "text", required: true },
+ *       { name: "email", label: "Correo", type: "email", required: true },
+ *       { name: "mensaje", label: "Mensaje", type: "textarea" },
+ *     ],
+ *     submitButton: {
+ *       text: "Enviar",
+ *       variant: "gather-primary",
+ *     },
+ *     actionButton: {
+ *       text: "Limpiar",
+ *       variant: "gather-outline",
+ *     }
+ *   }}
+ *   onSubmit={(data) => console.log("Datos enviados:", data)}
+ * />
+ * ```
+ */
+export declare const GatherFormBuilder: default_2.FC<GatherFormBuilderProps>;
+
 /**
  * Props principales del componente GatherFormBuilder
  * @interface GatherFormBuilderProps