@form-instant/react-input-mapping 2.0.4 → 2.2.0

package/README.md

@@ -1,501 +1,577 @@
-# Install
+<!-- Documentación empaquetada para consumo por IA. Generado desde README.md + views/*.md -->
 
-## input-mapping
+## Quick start guide
 
-<!-- tabs:start -->
+### 1. Installation and dependency order
 
-#### **npm**
+Install in this order (or all at once in a monorepo):
 
-```shell
-npm i @form-instant/react-input-mapping
-```
+1. **React** (peer)
 
-#### **bun**
+   ```bash
+   bun add react react-dom
+   # or: npm i react react-dom
+   ```
+2. **Zod** (for defining schemas)
 
-```shell
-bun add @form-instant/react-input-mapping
-```
+   ```bash
+   bun add zod
+   # or: npm i zod
+   ```
+3. **@form-instant/react-input-mapping** (field → component mapping)
 
-<!-- tabs:end -->
+   ```bash
+   bun add @form-instant/react-input-mapping
+   # or: npm i @form-instant/react-input-mapping
+   ```
+4. **@form-instant/react-resolver-zod** (resolves Zod schema and provides `FormInstantProvider` / `FormInstantElement`)
 
-## resolvers
+   ```bash
+   bun add @form-instant/react-resolver-zod
+   # or: npm i @form-instant/react-resolver-zod
+   ```
 
-<!-- tabs:start -->
+   This package has as peers: `react`, `@form-instant/react-input-mapping`, and `zod`. Without the mapping installed first, the resolver cannot resolve fields.
 
-#### **zod**
+**Summary:** `react` → `zod` → `@form-instant/react-input-mapping` → `@form-instant/react-resolver-zod`.
 
-<!-- tabs:start -->
 
-#### **npm**
+`<span id="implementation">`
 
-```shell
-npm i @form-instant/react-resolver-zod
-```
+## Implementation in your project
 
-#### **bun**
-
-```shell
-bun add @form-instant/react-resolver-zod
-```
+### 2.1 Creating the Mapping
 
-<!-- tabs:end -->
+The **Mapping** is a dictionary that associates each `fieldType` (string) with a React component. You can use `InputMapping` or **`InputMappingStore`** (recommended: better support for granular re-renders).
 
-<!-- tabs:end -->
+- **Default keys** (`INPUT_COMPONENTS_KEYS`): `'checkbox' | 'date' | 'select' | 'radio' | 'switch' | 'textarea' | 'number' | 'file' | 'text' | 'fallback'`.
+- **Extra keys:** you can extend with your own types (e.g. `email`, `password`, `customSelect`).
+- Each component receives **ParsedField**: `name` (`current`, `history`), `fieldType`, `required`, `default`, `fieldConfig`, and for selects/enums `options` as `[value, label][]`.
 
-# Example
+Minimal example (in a file like `providers/input-mapping.tsx`):
 
-## react
-
-### constructor new InputMapping
-
-#### \* **_new Input Mapping_**
+```tsx
+import {
+  InputMappingStore,
+  createFormInstantContainer,
+  type ParsedField,
+  type FieldConfig,
+} from '@form-instant/react-input-mapping';
+import type { FC } from 'react';
+
+export type MyInputs = {
+  text: FieldConfig<{ placeholder?: string; label?: string }>;
+  number: FieldConfig<{ placeholder?: string; label?: string; min?: number; max?: number }>;
+  textarea: FieldConfig<{ placeholder?: string; label?: string }>;
+  date: FieldConfig;
+  email: FieldConfig<{ placeholder?: string; label?: string }>;
+  password: FieldConfig<{ placeholder?: string; label?: string }>;
+  checkbox: FieldConfig;
+  select: FieldConfig;
+  fallback: FieldConfig;
+};
 
-Is the pillar of this set of tools, it consists of an extraction of the native **_new Map_** method in **_javascript_**, which receives as a parameter an object which works as a mapping of the input types, it also accepts two types as a parameter **_P_** are the parameters that each **_input_** component will accept and **_K_** are additional keys that are added to the input glossary.
+const TextInput: FC<ParsedField<MyInputs['text']>> = ({ name, fieldConfig, required, ...props }) => (
+  <div>
+    <label htmlFor={name.current}>{(fieldConfig as any)?.label ?? name.current}{required && ' *'}</label>
+    <input id={name.current} name={name.history} type="text" required={required} {...props} />
+  </div>
+);
 
-```typescript
-import {
-  InputMapping
-} from "@form-instant/react-input-mapping";
-
-export type ExtendProps = React.InputHTMLAttributes<HTMLInputElement>;
-export type P = ParsedField<
-  ExtendProps,
-  string
->;
-export type K = "email" | "password";
-
-const inputMapping = new InputMapping<P, K>({
-  fallback: (props) => {
-    const { fieldConfig, name, ...prop } = props;
-
-    return <input {...prop} {...fieldConfig} />;
-  },
-  textarea: () => <textarea />,
-  number: (props) => {
-    const { fieldConfig, name, ...prop } = props;
-
-    return <input {...prop} {...fieldConfig} />;
-  },
-  text: (props) => {
-    const { fieldConfig, name, ...prop } = props;
-
-    return <input {...prop} {...fieldConfig} />;
-  },
-  date: () => <input type="date" />,
-  email: (props) => {
-    const { fieldConfig, name, ...prop } = props;
-
-    return <input {...prop} {...fieldConfig} />;
-  },
-  password: (props) => {
-    const { fieldConfig, name, ...prop } = props;
-
-    return <input {...prop} {...fieldConfig} />;
-  },
-  select: (props) => {
-    const { options } = props;
-
-    return (
-      <select>
-        {options?.map(([k, v]) => (
-          <option key={k} value={k}>
-            {v}
-          </option>
-        ))}
-      </select>
-    );
-  },
+// Define the rest: NumberInput, TextareaInput, DateInput, EmailInput, PasswordInput,
+// CheckboxInput, SelectInput (uses props.options as [value, label][]), FallbackInput...
+
+export const inputMapping = new InputMappingStore<MyInputs>({
+  text: TextInput,
+  number: NumberInput,
+  textarea: TextareaInput,
+  date: DateInput,
+  email: EmailInput,
+  password: PasswordInput,
+  checkbox: CheckboxInput,
+  select: SelectInput,
+  fallback: FallbackInput,
 });
-```
 
-default keys glossary, all values ​​entered by **_k_** will only understand the default listing.
-
-```typescript
-export type INPUT_COMPONENTS_KEYS =
-    | 'checkbox'
-    | 'date'
-    | 'select'
-    | 'radio'
-    | 'switch'
-    | 'textarea'
-    | 'number'
-    | 'file'
-    | 'text'
-    | 'fallback';
+export const { FormInstantInputsProvider, useInputMapping } =
+  createFormInstantContainer<MyInputs>(inputMapping);
 ```
 
-#### \* **_create global provider_**
-
-We created a global provider to be able to access input mapping.
-
-```typescript
-import { createFormInstantContainer } from '@form-instant/react-input-mapping';
-import { inputMapping, P, K } from './inputMapping.tsx';
-
-export const { FormInstantInputsProvider, useInputMapping } = createFormInstantContainer<P, K>(
-    inputMapping,
-);
-```
+- **Select:** the component receives `options?: [string, string][]`; you can populate them from an API (data fetch) and keep using the same mapping.
 
-we add our provider in the root of the **_vite_** project "./App.tsx" and **_next.js_** "layout.tsx" in the root.
+### 2.2 Setting up providers
 
-<!-- tabs:start -->
+- `createFormInstantContainer<MyInputs>(inputMapping)` returns:
+  - **`FormInstantInputsProvider`**: provider that should wrap your app (or at least the area where forms are used).
+  - **`useInputMapping`**: hook to access the mapping (e.g. for custom components that use `ElementMapping`).
 
-#### **next.js**
+Place it at the root (e.g. `App.tsx` or `layout.tsx`):
 
-```typescript
-import { ReactNode } from "react";
-import { FormInstantInputsProvider } from "./components/providers";
+```tsx
+import { FormInstantInputsProvider } from './providers/input-mapping';
 
-function Layout({ children }: { children: ReactNode }) {
+function App() {
   return (
     <FormInstantInputsProvider>
-      {children}
+      {/* routes, forms, etc. */}
     </FormInstantInputsProvider>
   );
 }
+```
+
+### 2.3 Zod schema and `fieldConfig`
+
+- Define the schema with **Zod**. With **@form-instant/react-resolver-zod** the package already extends Zod with `.fieldConfig()` on the types used by the parser.
+- **`.fieldConfig(...)`** is used to specify `fieldType` and extra props (placeholder, label, min, max, etc.) that reach the component via `fieldConfig`.
 
-export default Layout;
+Example:
+
+```ts
+import { z } from 'zod';
+// If you use @form-instant/react-resolver-zod, you don't need to call extendZodWithFieldConfig:
+// the module applies the extension on import.
+
+const formSchema = z.object({
+  name: z.string().min(2).fieldConfig({ fieldType: 'text', placeholder: 'Name', label: 'Name' }),
+  email: z.email().fieldConfig({ fieldType: 'email', placeholder: 'email@example.com' }),
+  age: z.number().min(18).max(100).fieldConfig({ fieldType: 'number', min: 18, max: 100 }),
+  bio: z.string().min(10).fieldConfig({ fieldType: 'textarea' }),
+  role: z.enum(['admin', 'user']).fieldConfig({ fieldType: 'select' }),
+});
+
+export type FormSchemaType = z.infer<typeof formSchema>;
 ```
 
-#### **vite**
+- If you omit `fieldConfig`, the resolver infers `fieldType` from the Zod type (string → text, number → number, etc.).
 
-```typescript
-import "./App.css";
-import { Router } from "./router";
-import { FormInstantInputsProvider } from "./components/providers";
+### 2.4 Rendering forms
 
-function App() {
+- Wrap the form in **`FormInstantProvider`** with the schema. Pass a stable schema reference (e.g. defined outside the component or memoized with `useMemo`) so the provider does not re-parse the schema on every parent re-render.
+- Use **`FormInstantElement<FormSchemaType> name="..."`** for each **path** in the schema you want to render:
+  - **Primitive field:** `name="name"` → a single input.
+  - **Nested object:** `name="personalData"` → all fields of `personalData` are rendered (the provider parses the schema and exposes `field.schema`; `FormInstantElement` iterates and uses `ElementMapping` for each child).
+
+Minimal example:
+
+```tsx
+import { FormInstantProvider, FormInstantElement } from '@form-instant/react-resolver-zod';
+import { formSchema, type FormSchemaType } from './schema';
+
+export function MyForm() {
   return (
-    <FormInstantInputsProvider>
-      <Forms />
-    </FormInstantInputsProvider>
+    <form onSubmit={...}>
+      <FormInstantProvider schema={formSchema}>
+        <FormInstantElement<FormSchemaType> name="name" />
+        <FormInstantElement<FormSchemaType> name="email" />
+        <FormInstantElement<FormSchemaType> name="age" />
+        <FormInstantElement<FormSchemaType> name="bio" />
+        <FormInstantElement<FormSchemaType> name="role" />
+      </FormInstantProvider>
+    </form>
   );
 }
-
-export default App;
 ```
 
-<!-- tabs:end -->
+For **nested objects**, one `FormInstantElement` per object:
 
-#### **_use resolver_**
+```tsx
+<FormInstantProvider schema={objectFormSchema}>
+  <FormInstantElement<ObjectFormType> name="personalData" />
+  <FormInstantElement<ObjectFormType> name="address" />
+</FormInstantProvider>
+```
 
-To use our resolver we must add the function **_fieldConfig_**.
 
-<!-- tabs:start -->
+`<span id="form-types">`
 
-#### **zod**
+## Form types
 
-generate provider and hook by use resolver.
+### 3.1 Static form
 
-```typescript
-import { createFormInstantContainer } from '@form-instant/react-input-mapping';
-import { inputMapping, P, K, extendProps } from './inputMapping.tsx';
+Flat schema, fixed fields. You only need `FormInstantProvider` plus several `FormInstantElement` (one per field or per object group).
 
-export const { FormInstantInputsProvider, useInputMapping } = createFormInstantContainer<P, K>(
-    inputMapping,
-);
+```tsx
+const schema = z.object({
+  name: z.string().min(2),
+  email: z.email(),
+  age: z.number().min(18).max(100),
+});
+// ...
+<FormInstantProvider schema={schema}>
+  <FormInstantElement<FormType> name="name" />
+  <FormInstantElement<FormType> name="email" />
+  <FormInstantElement<FormType> name="age" />
+</FormInstantProvider>
 ```
 
-add **_fieldConfig_** in the zod schema.
-
-```typescript
-import { z } from 'zod';
+### 3.2 Inputs with data fetch (select / autocomplete)
 
-extendZodWithFieldConfig<React.InputHTMLAttributes<HTMLInputElement>>(z);
+- **Select:** in the schema use `z.enum([...])` or a type the parser turns into `options`; the mapping component receives `options` and can also receive data loaded from an API (store options in state and pass them via context or props to the component that renders the field).
+- **Autocomplete:** you can define your own `fieldType` (e.g. `autocomplete`), map it to a component that uses `useFields` and internally fetches and shows suggestions; the final value is still bound to the same `name`.
 
-export { z };
-```
+The select mapping already uses `options?: [string, string][]`; populating `options` from an API is compatible with the same flow.
 
-<!-- tabs:end -->
+### 3.3 Dynamic form with `discriminatedUnion`
 
-#### \* **_build form_**
+Schema that changes based on a discriminator (e.g. user type). Steps:
 
-- schema:
+1. Define the schema with **`z.discriminatedUnion('status', [ z.object({ status: z.literal('ok'), ... }), z.object({ status: z.literal('not'), ... }) ])`**.
+2. Use **`useSchema`** from `@form-instant/react-resolver-zod`: it receives a callback that returns the schema and a dependencies object; when the **reference** of the dependencies object changes, the schema and initial values are recalculated. Pass a stable dependencies object (e.g. from state or `useMemo`) to avoid unnecessary recalculations on parent re-renders.
+3. Keep **dependencies** in sync with the current discriminator value in the form (e.g. with `form.watch('data.status')` if you use react-hook-form, or your own state).
+4. The first field in the union is the discriminator; you can map that field to a select in your mapping (by `fieldType` or by the discriminator key) so the user can switch the variant.
 
-```typescript
-import { z } from 'zod';
+Structure example (submit and form provider depend on your form library):
 
+```tsx
 const formSchema = z.object({
-  data: z.object({
-    email: z.string().email(),
-    password: z.string(),,
-    confirm: z.string(),
-  })
+  data: z.discriminatedUnion('status', [
+    z.object({ status: z.literal('ok'), code: z.string() }),
+    z.object({ status: z.literal('not'), birthday: z.coerce.date() }),
+  ]),
 });
 
-export type formSchemaType = Zod.infer<typeof formSchema>;
-```
-
-- component
+const [dependencies, setDependencies] = useState({ status: 'ok' });
+const { schema } = useSchema(() => formSchema, dependencies);
 
-```typescript
-import {
-  FormInstantElement,
-  FormInstantProvider,
-} from "@form-instant/react-resolver-zod";
-import { z } from "zod";
-import { formSchema, formSchemaType } from "./schema";
+// In a useEffect or in the same flow as the form: when data.status changes,
+// update setDependencies({ status: newStatus }) so useSchema returns
+// the correct schema and FormInstantElement shows the fields for that variant.
 
-export const Forms = () => {
-  return (
-    <form>
-      <h1>your form</h1>
-      <FormInstantProvider schema={formSchema}>
-        <div>
-          <FormInstantElement<formSchemaType> name="security_data" />
-          <br />
-          <FormInstantElement<formSchemaType> name="personal_data" />
-        </div>
-      </FormInstantProvider>
-
-      <button type="submit">submit</button>
-    </form>
-  );
-};
+<FormInstantProvider schema={schema}>
+  <FormInstantElement<FormType> name="data" />
+</FormInstantProvider>
 ```
 
-## **_special inputs_**
+### 3.4 Array with dynamic input creation
 
-### **use-formInstantField**
+For **arrays of objects** (e.g. list of items or skills):
 
-#### **by object**
+1. Schema with **`z.array(z.object({ ... }))`** (optionally `.min()`/`.max()`).
+2. In the **array** component:
+   - **`useFields({ key: 'items' })`** (or the array field name) to get the parsed field.
+   - **`useInputArray(field)`** (from `@form-instant/react-input-mapping`): returns `inputs`, `append`, `remove`, `fieldConfig`, etc.
+3. Render each item: for each entry in `inputs`, iterate over properties and use **`ElementMapping formProps={...}`** for each. +/- buttons that call `append()` and `remove(index)`.
 
-```typescript
-import { Fragment } from "react";
-import { ElementMapping, ParsedField, useFormInstantField } from "@form-instant/react-input-mapping";
-import { P } from "@/providers";
+Condensed example:
+
+```tsx
+const arrayFormSchema = z.object({
+  items: z.array(z.object({
+    name: z.string().min(2),
+    quantity: z.number().min(1),
+    price: z.number().min(0),
+  })).min(1).max(10),
+});
 
-export const ObjectComp: FC<P> = (props) => {
-  const { fiends, fieldConfig, ...prop } = useFormInstantField<P>(props);
+function ArrayFieldComponent({ name }: { name: 'items' }) {
+  const field = useFields({ key: name });
+  const { inputs, append, remove, fieldConfig } = useInputArray(field);
   const id = useId();
 
   return (
-    <div {...{ ...fieldConfig, ...prop }}>
-      {fiends.map((prop) => {
-        return (
-          <Fragment key={`${id}-${prop.name.history}`}>
-            <ElementMapping formProps={prop} />
-          </Fragment>
-        );
-      })}
+    <div>
+      {inputs.map((inputFields, index) => (
+        <div key={`${id}-${index}`}>
+          {Object.entries(inputFields).map(([key, value]) => (
+            <ElementMapping key={key} formProps={value} />
+          ))}
+          <button type="button" onClick={() => remove(index)}>Remove</button>
+        </div>
+      ))}
+      <button type="button" onClick={append}>+ Add</button>
     </div>
   );
-};
+}
+
+<FormInstantProvider schema={arrayFormSchema}>
+  <ArrayFieldComponent name="items" />
+</FormInstantProvider>
 ```
 
-#### **by array**
+`fieldConfig?.min` / `fieldConfig?.max` can come from the schema (e.g. via `.fieldConfig({ min: 1, max: 10 })`) to disable buttons based on limits.
 
-```typescript
-import { Fragment, useId } from "react";
-import { ElementMapping, ParsedField, useFormInstantField } from "@form-instant/react-input-mapping";
-import { P } from "@/providers";
+### 3.5 Nested object
 
+Schema with **`z.object({ group: z.object({ a: z.string(), b: z.number() }) })`**. No custom component needed: a single **`FormInstantElement<FormType> name="group"`** makes the resolver render all fields of `group` (the parser fills `field.schema` and `FormInstantElement` walks those children with `ElementMapping`).
 
-export const ArrayComp: FC<P> = (props) => {
-  const { fiends, fieldConfig, ...prop } = useFormInstantField<P>(props);
-  const id = useId();
+```tsx
+const objectFormSchema = z.object({
+  personalData: z.object({
+    firstName: z.string().min(2),
+    lastName: z.string().min(2),
+    email: z.string().email(),
+  }),
+  address: z.object({
+    street: z.string(),
+    city: z.string(),
+    zipCode: z.string(),
+  }),
+});
 
-  return (
-    <div {...{ ...fieldConfig, ...prop }}>
-      {fiends.map((prop, index) => {
-        return (
-          <Fragment key={`${id}-${prop.name.history}`}>
-            <div>
-              <ElementMapping formProps={prop} />
-              <button onClick={() => append()}>+</button>
-              <button onClick={() => remove(index)}>-</button>
-            </div>
-            <br />
-            <br />
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-};
+<FormInstantProvider schema={objectFormSchema}>
+  <FormInstantElement<ObjectFormType> name="personalData" />
+  <FormInstantElement<ObjectFormType> name="address" />
+</FormInstantProvider>
 ```
 
-## **_reactive schemas_**
 
-### **fieldConfig**
+`<span id="full-example">`
 
-```typescript
-import { Fragment, useId } from "react";
-import { ElementMapping, useFormInstantField } from "@form-instant/react-input-mapping";
-import { FormInstantElement, FormInstantProvider } from "@form-instant/react-resolver-zod";
-import { P } from "@/providers";
-import { z } from '@/zod';
+## Full example: React Hook Form + Shadcn UI + Zod
 
-const formSchema = z.object({
-  data: z.object({
-    email: z.string().email().fieldConfig({
-      fieldType: "email",
-      placeholder: "example@mal.com",
-    }),
-    password: z.string().fieldConfig({
-      fieldType: "password",
-      placeholder: "******",
-    }),
-    confirm: z.string(),
-  })
+This example wires **react-hook-form**, **@hookform/resolvers** (Zod resolver), **Zod**, and **shadcn/ui** (or any similar UI primitives) with Form Instant. Validation runs via `zodResolver`; inputs are rendered from your schema and mapping.
+
+### Dependencies
+
+```bash
+bun add react-hook-form @hookform/resolvers zod
+# or: npm i react-hook-form @hookform/resolvers zod
+```
+
+Add **shadcn/ui** with your stack (e.g. `npx shadcn@latest init`) and install the components you need (e.g. `Input`, `Label`, `Button`). You can also use plain HTML elements or your own design system.
+
+### 1. Zod schema
+
+```ts
+// lib/schemas/profile.ts
+import { z } from 'zod';
+
+export const profileSchema = z.object({
+  username: z.string().min(2, 'At least 2 characters').fieldConfig({ fieldType: 'text', placeholder: 'Username', label: 'Username' }),
+  email: z.string().email('Invalid email').fieldConfig({ fieldType: 'email', placeholder: 'you@example.com', label: 'Email' }),
+  age: z.number().min(18, 'Must be 18+').max(120).fieldConfig({ fieldType: 'number', label: 'Age', min: 18, max: 120 }),
+  bio: z.string().min(10, 'At least 10 characters').fieldConfig({ fieldType: 'textarea', label: 'Bio', placeholder: 'Tell us about yourself' }),
 });
 
-export const FromComp = (props) => {
+export type ProfileFormValues = z.infer<typeof profileSchema>;
+```
+
+### 2. Input mapping (with react-hook-form registration)
+
+For react-hook-form to validate and submit correctly, each rendered input must be **registered**. Use `useFormContext()` inside your mapping components and spread `register(name.history)` (and optionally show errors from `formState.errors`).
+
+```tsx
+// components/input-mapping.tsx
+import {
+  InputMappingStore,
+  createFormInstantContainer,
+  type ParsedField,
+  type FieldConfig,
+} from '@form-instant/react-input-mapping';
+import { useFormContext } from 'react-hook-form';
+import type { FC } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+
+export type MyInputs = {
+  text: FieldConfig<{ placeholder?: string; label?: string }>;
+  number: FieldConfig<{ placeholder?: string; label?: string; min?: number; max?: number }>;
+  textarea: FieldConfig<{ placeholder?: string; label?: string }>;
+  email: FieldConfig<{ placeholder?: string; label?: string }>;
+  fallback: FieldConfig;
+};
+
+const TextInput: FC<ParsedField<MyInputs['text']>> = ({ name, fieldConfig, required, ...props }) => {
+  const { register, formState: { errors } } = useFormContext();
+  const label = (fieldConfig as any)?.label ?? name.current;
+  const placeholder = (fieldConfig as any)?.placeholder ?? '';
 
   return (
-    <>
-      <FormInstantProvider schema={schema}>
-        <h1>your form </h1>
-        <div>
-           <br />
-          <FormInstantElement<formSchemaType> name="data" />
-        </div>
-        <button>
-          submit
-        </button>
-      </FormInstantProvider>
-    </>
+    <div className="space-y-2">
+      <Label htmlFor={name.current}>{label}{required && ' *'}</Label>
+      <Input
+        id={name.current}
+        type="text"
+        placeholder={placeholder}
+        aria-invalid={!!errors[name.history]}
+        {...register(name.history)}
+        {...props}
+      />
+      {errors[name.history]?.message && (
+        <p className="text-sm text-destructive">{String(errors[name.history]?.message)}</p>
+      )}
+    </div>
   );
 };
-```
 
-### **use-schema**
+const NumberInput: FC<ParsedField<MyInputs['number']>> = ({ name, fieldConfig, required, ...props }) => {
+  const { register, formState: { errors } } = useFormContext();
+  const label = (fieldConfig as any)?.label ?? name.current;
 
-**useSchema** is a hook, receives two values, a callback and a dependencies object, the callback will be executed when the dependencies change, similar to a useEffect, the callback receives as a parameter the same dependencies object, the callback must always return a valid zod schema..
-
-```typescript
-  const [dependencies, setDependencies] = useState({ status: "ok" });
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name.current}>{label}{required && ' *'}</Label>
+      <Input
+        id={name.current}
+        type="number"
+        min={fieldConfig?.min}
+        max={fieldConfig?.max}
+        aria-invalid={!!errors[name.history]}
+        {...register(name.history, { valueAsNumber: true })}
+        {...props}
+      />
+      {errors[name.history]?.message && (
+        <p className="text-sm text-destructive">{String(errors[name.history]?.message)}</p>
+      )}
+    </div>
+  );
+};
 
-  const { schema } = useSchema((dependencies /* is a dependencies object */) => {
-    return formSchema;
-  }, dependencies);
-```
+const TextareaInput: FC<ParsedField<MyInputs['textarea']>> = ({ name, fieldConfig, required, ...props }) => {
+  const { register, formState: { errors } } = useFormContext();
+  const label = (fieldConfig as any)?.label ?? name.current;
+  const placeholder = (fieldConfig as any)?.placeholder ?? '';
 
-Example with react-hook-form we must remember that they can use the form hook or form solution that the developer prefers, in this example shows the usage for conditional rendering using the **z.discriminatedUnion** method of **zod**.
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name.current}>{label}{required && ' *'}</Label>
+      <Textarea
+        id={name.current}
+        placeholder={placeholder}
+        aria-invalid={!!errors[name.history]}
+        {...register(name.history)}
+        {...props}
+      />
+      {errors[name.history]?.message && (
+        <p className="text-sm text-destructive">{String(errors[name.history]?.message)}</p>
+      )}
+    </div>
+  );
+};
 
-When used in **z.discriminatedUnion**, an array of objects is received, where the first object is the input of the discriminant condition and will have the **discriminator** type, with this key or the **fiendType** that you pass in the **fiendConfig** you can capture this value in the mapping.
+const EmailInput: FC<ParsedField<MyInputs['email']>> = ({ name, fieldConfig, required, ...props }) => {
+  const { register, formState: { errors } } = useFormContext();
+  const label = (fieldConfig as any)?.label ?? name.current;
+  const placeholder = (fieldConfig as any)?.placeholder ?? '';
 
-```typescript
-import { Fragment, useId } from "react";
-import { ElementMapping, ParsedField, useFormInstantField } from "@form-instant/react-input-mapping";
-import { FormInstantElement, FormInstantProvider, useSchema } from "@form-instant/react-resolver-zod";
-import { FormInstantInputsProvider, useInputMapping } from "@/resolver";
-import { P } from "@/providers";
-import { z } from '@/zod';
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name.current}>{label}{required && ' *'}</Label>
+      <Input
+        id={name.current}
+        type="email"
+        placeholder={placeholder}
+        aria-invalid={!!errors[name.history]}
+        {...register(name.history)}
+        {...props}
+      />
+      {errors[name.history]?.message && (
+        <p className="text-sm text-destructive">{String(errors[name.history]?.message)}</p>
+      )}
+    </div>
+  );
+};
 
-const formSchema = z.object({
-  data: z.discriminatedUnion("status", [
-    z.object({
-      status: z.literal("ok"),
+const FallbackInput: FC<ParsedField<MyInputs['fallback']>> = ({ name, fieldConfig, required, ...props }) => {
+  const { register, formState: { errors } } = useFormContext();
+  const label = (fieldConfig as any)?.label ?? name.current;
 
-      code: z.string(),
-    }),
-    z.object({
-      status: z.literal("not"),
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name.current}>{label}{required && ' *'}</Label>
+      <Input
+        id={name.current}
+        type="text"
+        aria-invalid={!!errors[name.history]}
+        {...register(name.history)}
+        {...props}
+      />
+      {errors[name.history]?.message && (
+        <p className="text-sm text-destructive">{String(errors[name.history]?.message)}</p>
+      )}
+    </div>
+  );
+};
 
-      birthday: z.coerce.date(),
-    }),
-  ]),
+export const inputMapping = new InputMappingStore<MyInputs>({
+  text: TextInput,
+  number: NumberInput,
+  textarea: TextareaInput,
+  email: EmailInput,
+  fallback: FallbackInput,
 });
 
-export const FromComp = (props) => {
+export const { FormInstantInputsProvider, useInputMapping } =
+  createFormInstantContainer<MyInputs>(inputMapping);
+```
 
-  // define state by dependecys
-  const [dependencies, setDependencies] = useState({ status: "" });
+### 3. Form component
 
-  const { schema } = useSchema(() => {
-    return formSchema;
-  }, dependencies);
+Use **FormProvider** from react-hook-form, **zodResolver** with your schema, and **FormInstantProvider** + **FormInstantElement** so fields are rendered from the schema and your mapping.
 
-  const form = useForm<Zod.infer<typeof schema>>({
-    resolver: zodResolver(schema),
+```tsx
+// components/profile-form.tsx
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormInstantProvider, FormInstantElement } from '@form-instant/react-resolver-zod';
+import { profileSchema, type ProfileFormValues } from '@/lib/schemas/profile';
+import { Button } from '@/components/ui/button';
+
+export function ProfileForm() {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileSchema),
     defaultValues: {
-      data: {
-        status: "ok",
-      },
+      username: '',
+      email: '',
+      age: undefined,
+      bio: '',
     },
   });
 
-  useEffect(() => {
-
-    /* This way of capturing and formatting form data was
-    taken from the useFormValues ​​hook
-    recommended by react-hook-form */
-    const fromValues = {
-      ...form.getValues(),
-      ...form.watch(),
-    };
-
-    if (
-      !dependencies.status ||
-      dependencies.status !== fromValues.data.status
-    ) {
-
-      setDependencies((prev) => {
-        return {
-          ...prev,
-          status: fromValues.data.status,
-        };
-      });
-    }
-  }, [form.watch(), dependencies]);
-
-  const onSubmit = form.handleSubmit(
-    (data) => {
-      console.log("data", data);
-    },
-    (err) => {
-      console.log("err", err);
-    }
-  );
+  const onSubmit = (data: ProfileFormValues) => {
+    console.log(data);
+  };
 
   return (
-    <form onSubmit={onSubmit}>
-      <FormProvider {...form}>
-        <FormInstantProvider schema={schema}>
-          <h1>your form </h1>
-          <div>
-             <br />
-            <FormInstantElement<formSchemaType> name="data" />
-          </div>
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              const pre = form.getValues("personal_data.status");
-
-              form.setValue(
-                "personal_data.status",
-                pre === "not" ? "ok" : "not"
-              );
-            }}
-          >
-            switch
-          </button>
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormInstantProvider schema={profileSchema}>
+          <FormInstantElement<ProfileFormValues> name="username" />
+          <FormInstantElement<ProfileFormValues> name="email" />
+          <FormInstantElement<ProfileFormValues> name="age" />
+          <FormInstantElement<ProfileFormValues> name="bio" />
         </FormInstantProvider>
-      </FormProvider>
-    </form>
+        <Button type="submit">Submit</Button>
+      </form>
+    </FormProvider>
   );
-};
+}
 ```
 
-discriminator component example.
+### 4. App root
 
-```tsx
-import { FC } from "react";
-import { P } from "@/providers";
+Ensure **FormInstantInputsProvider** wraps the tree where forms use the mapping (e.g. root layout or App).
 
-const discriminator: FC<P> = (props) => {
-  const { options } = props;
+```tsx
+// App.tsx
+import { FormInstantInputsProvider } from '@/components/input-mapping';
+import { ProfileForm } from '@/components/profile-form';
 
+export default function App() {
   return (
-    <select>
-      {options?.map(([k, v]) => (
-        <option key={k} value={k}>
-          {v}
-        </option>
-      ))}
-    </select>
+    <FormInstantInputsProvider>
+      <ProfileForm />
+    </FormInstantInputsProvider>
   );
 }
 ```
+
+**Summary:** Use **Zod** for the schema, **zodResolver** in `useForm`, **FormProvider** (react-hook-form) around the form, and **FormInstantProvider** + **FormInstantElement** to render fields from the schema. In your mapping components, call **useFormContext()** and **register(name.history)** (and optionally **formState.errors**) so react-hook-form controls and validates the inputs.
+
+
+`<span id="api-reference">`
+
+## API reference (minimal)
+
+| Concept                                                        | Package                          | Description                                                           |
+| -------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------- |
+| `InputMapping` / `InputMappingStore`                       | react-input-mapping              | Maps fieldType → React component.                                    |
+| `createFormInstantContainer`                                 | react-input-mapping              | Creates `FormInstantInputsProvider` and `useInputMapping`.        |
+| `ParsedField`, `FieldConfig`                               | react-input-mapping              | Props types for mapping components.                                   |
+| `ElementMapping`                                             | react-input-mapping              | Renders a single field from `formProps` (fieldType, name, etc.).    |
+| `useInputArray`                                              | react-input-mapping              | For arrays:`inputs`, `append`, `remove`, `fieldConfig`.       |
+| `FormInstantProvider`, `FormInstantElement`, `useFields` | react-resolver-zod               | Schema provider, element per path, hook for a field.                  |
+| `useSchema`                                                  | react-resolver-zod               | Reactive schema (e.g. for `discriminatedUnion`) and initial values. Recalculates when the **reference** of the dependencies object changes; pass a stable object to avoid unnecessary recalculations. |
+| `.fieldConfig(...)`                                          | react-resolver-zod (extends Zod) | Associate `fieldType` and props with a schema field.                |
+

package/dist/index.js

@@ -1,3 +1,3 @@
-class Z extends Map{appendObj(R){for(let O in R)this.set(O,R[O])}constructor(R){super();if(!R)return;this.appendObj(R)}exists(R){if(!super.has(R))return"fallback";return R}get(R){return super.get(R)}set(R,O){if(!super.has(R))super.set(R,O);return this}extends(R){let O=Object.fromEntries(super.entries()),q=R(this);return new Z({...O,...q})}}import{createContext as x}from"react";var _=x(null);import{createElement as C,memo as I,use as m}from"react";class W{listeners=new Map;subscribe(R,O){if(!this.listeners.has(R))this.listeners.set(R,new Set);return this.listeners.get(R).add(O),()=>this.unsubscribe(R,O)}unsubscribe(R,O){this.listeners.get(R)?.delete(O)}getListeners(R){return this.listeners.get(R)}hasListeners(R){return this.listeners.has(R)&&this.listeners.get(R).size>0}clear(){this.listeners.clear()}}class Q{static notify(R,O){let q=R.getListeners(O);if(q)q.forEach((z)=>z())}static notifyMany(R,O){O.forEach((q)=>this.notify(R,q))}}class L extends Z{_subscriptionManager;get subscriptionManager(){if(!this._subscriptionManager)this._subscriptionManager=new W;return this._subscriptionManager}subscribe(R,O){return this.subscriptionManager.subscribe(R,O)}unsubscribe(R,O){this.subscriptionManager.unsubscribe(R,O)}set(R,O){let q=!super.has(R);if(super.set(R,O),q)Q.notify(this.subscriptionManager,String(R));return this}delete(R){let O=super.delete(R);if(O)Q.notify(this.subscriptionManager,String(R));return O}clear(){let R=Array.from(this.keys()).map((O)=>String(O));super.clear(),Q.notifyMany(this.subscriptionManager,R)}}import{use as M,useSyncExternalStore as h}from"react";function $(R){if(!(R instanceof L))throw Error("InputMapping must be an instance of InputMappingStore for granular rendering")}function T(R,O){let z=M(R);return $(z),h((B)=>z.subscribe(O,B),()=>z.get(O),()=>z.get(O))}import{use as b,useMemo as f}from"react";function N(R){let q=b(R);$(q);let z=q;return f(()=>({set:(B,J)=>{return z.set(B,J)},clear:()=>{z.clear()},delete:(B)=>{return z.delete(B)}}),[z])}function A(R){function O(z){return T(R,z)}function q(){return N(R)}return{useInputComponent:O,useInputMappingActions:q}}var w=A(_),UR=(R)=>{let O=R instanceof L?R:new L(Object.fromEntries(R.entries()));return{FormInstantInputsProvider:(B)=>C(_.Provider,{value:O},B.children),useInputMapping:()=>m(_)}},g=I(({formProps:R})=>{let O=w.useInputComponent(R.fieldType)||w.useInputComponent("fallback");if(!O)return null;return C(O,R)},(R,O)=>{return R.formProps.fieldType===O.formProps.fieldType&&R.formProps.name.history===O.formProps.name.history&&R.formProps.name.current===O.formProps.name.current});g.displayName="ElementMapping";import{useCallback as S,useState as y}from"react";function P(R){return R&&typeof R==="object"&&"name"in R&&"fieldType"in R}function X(R,O,q){if(!P(R)){let D={};for(let K in R){let Y=R[K];if(!Y)continue;D[K]=X(Y,O,q)}return D}let z=R.name.current,B=`${q}.${O}.${z}`,J={...R,name:{current:z,history:B}};if(R.schema&&Array.isArray(R.schema))J.schema=R.schema.map((D)=>X(D,O,q));return J}var jR=(R)=>{let{fieldConfig:O,name:q,...z}=R,B=q.history||q.current,J=z.schema.at(0),[D,K]=y([]),Y=S(()=>{let U=O?.max??1/0;if(Number(D?.length)>=U)return;K((G)=>{let V=G.length,j=X(J,V,B);return[...G,j]})},[D,O?.max,B,J]),v=S((U)=>{let E=O?.min??0;if((D?.length||0)>E)K((V)=>{return V.filter((F,H)=>H!==U).map((F,H)=>{return X(F,H,B)})})},[D,O?.min,B]);return{inputs:D,append:Y,remove:v,setInputs:K,fieldConfig:O,name:q,...z}};import{useReducer as u,useRef as c,use as k}from"react";function PR(R){return function(){let q=k(R);if(!q)throw Error("InputMappingContext not found");let z=c(q),[,B]=u((J)=>J+1,0);return{...z.current,set:(J,D)=>{let K=z.current.set(J,D);return B(),K},clear:()=>{z.current.clear(),B()},delete:(J)=>{let D=z.current.delete(J);return B(),D}}}}export{jR as useInputArray,PR as createInputMappingHook,A as createInputMappingGranularHook,UR as createFormInstantContainer,L as InputMappingStore,_ as InputMappingContext,Z as InputMapping,g as ElementMapping};
+class U extends Map{appendObj(R){for(let O in R)this.set(O,R[O])}constructor(R){super();if(!R)return;this.appendObj(R)}exists(R){if(!super.has(R))return"fallback";return R}get(R){return super.get(R)}set(R,O){if(!super.has(R))super.set(R,O);return this}extends(R){let O=Object.fromEntries(super.entries()),q=R(this);return new U({...O,...q})}}import{createContext as M}from"react";var G=M(null);import{createElement as S,memo as m,use as g}from"react";class E{listeners=new Map;subscribe(R,O){if(!this.listeners.has(R))this.listeners.set(R,new Set);return this.listeners.get(R).add(O),()=>this.unsubscribe(R,O)}unsubscribe(R,O){this.listeners.get(R)?.delete(O)}getListeners(R){return this.listeners.get(R)}hasListeners(R){return this.listeners.has(R)&&this.listeners.get(R).size>0}clear(){this.listeners.clear()}}class Z{static notify(R,O){let q=R.getListeners(O);if(q)q.forEach((z)=>z())}static notifyMany(R,O){O.forEach((q)=>this.notify(R,q))}}class X extends U{_subscriptionManager;get subscriptionManager(){if(!this._subscriptionManager)this._subscriptionManager=new E;return this._subscriptionManager}subscribe(R,O){return this.subscriptionManager.subscribe(R,O)}unsubscribe(R,O){this.subscriptionManager.unsubscribe(R,O)}set(R,O){let q=!super.has(R);if(super.set(R,O),q)Z.notify(this.subscriptionManager,String(R));return this}delete(R){let O=super.delete(R);if(O)Z.notify(this.subscriptionManager,String(R));return O}clear(){let R=Array.from(this.keys()).map((O)=>String(O));super.clear(),Z.notifyMany(this.subscriptionManager,R)}}import{use as b,useSyncExternalStore as h}from"react";function V(R){if(!(R instanceof X))throw Error("InputMapping must be an instance of InputMappingStore for granular rendering")}function w(R,O){let z=b(R);return V(z),h((B)=>z.subscribe(O,B),()=>z.get(O),()=>z.get(O))}import{use as f,useMemo as I}from"react";function C(R){let q=f(R);V(q);let z=q;return I(()=>({set:(B,J)=>{return z.set(B,J)},clear:()=>{z.clear()},delete:(B)=>{return z.delete(B)}}),[z])}function j(R){function O(z){return w(R,z)}function q(){return C(R)}return{useInputComponent:O,useInputMappingActions:q}}var P=j(G),VR=(R)=>{let O=R instanceof X?R:new X(Object.fromEntries(R.entries()));return{FormInstantInputsProvider:(B)=>S(G.Provider,{value:O},B.children),useInputMapping:()=>g(G)}},y=m(({formProps:R})=>{let O=P.useInputComponent(R.fieldType)||P.useInputComponent("fallback");if(!O)return null;return S(O,R)},(R,O)=>{return R.formProps.fieldType===O.formProps.fieldType&&R.formProps.name.history===O.formProps.name.history&&R.formProps.name.current===O.formProps.name.current});y.displayName="ElementMapping";import{useCallback as x,useState as u}from"react";function v(R){return R&&typeof R==="object"&&"name"in R&&"fieldType"in R}function _(R,O,q){if(!v(R)){let D={};for(let K in R){let Y=R[K];if(!Y)continue;D[K]=_(Y,O,q)}return D}let z=R.name.current,B=`${q}.${O}.${z}`,J={...R,name:{current:z,history:B}};if(R.schema&&Array.isArray(R.schema))J.schema=R.schema.map((D)=>_(D,O,q));return J}var TR=(R)=>{let{fieldConfig:O,name:q,...z}=R,B=q.history||q.current,J=z.schema.at(0),[D,K]=u([]),Y=x(()=>{let Q=O?.max??1/0;if(Number(D?.length)>=Q)return;K((H)=>{let W=H.length,T=_(J,W,B);return[...H,T]})},[D,O?.max,B,J]),L=x((Q)=>{let $=O?.min??0;if((D?.length||0)>$)K((W)=>{return W.filter((N,A)=>A!==Q).map((N,A)=>{return _(N,A,B)})})},[D,O?.min,B]);return{inputs:D,append:Y,remove:L,setInputs:K,fieldConfig:O,name:q,...z}};import{useCallback as F,useMemo as c,useReducer as k,useRef as d,use as l}from"react";function vR(R){return function(){let q=l(R);if(!q)throw Error("InputMappingContext not found");let z=d(q),[B,J]=k((L)=>L+1,0),D=F((L,Q)=>{let $=z.current.set(L,Q);return J(),$},[]),K=F(()=>{z.current.clear(),J()},[]),Y=F((L)=>{let Q=z.current.delete(L);return J(),Q},[]);return c(()=>({...z.current,set:D,clear:K,delete:Y}),[B])}}export{TR as useInputArray,vR as createInputMappingHook,j as createInputMappingGranularHook,VR as createFormInstantContainer,X as InputMappingStore,G as InputMappingContext,U as InputMapping,y as ElementMapping};
 
-//# debugId=FEDB4F6DC6D16F3364756E2164756E21
+//# debugId=CC948A0F1B63234064756E2164756E21

package/dist/index.js.map

@@ -15,9 +15,9 @@
     "import { useCallback, useState } from 'react';\nimport type { FieldMetadata } from '../../../InputMapping';\nimport type { UseInputArrayProps } from '../types';\nimport { cloneFieldWithIndex } from '../domain/services/cloneFieldWithIndex';\n\nexport const useInputArray = (data: FieldMetadata) => {\n    const { fieldConfig, name, ...prop } = data as UseInputArrayProps;\n    const arrayName = name.history || name.current;\n    const template = prop.schema.at(0)!;\n\n    // Ensure inputs is always an array type\n    const [inputs, setInputs] = useState<Record<string, FieldMetadata>[]>([]);\n\n    const append = useCallback(() => {\n        const max = fieldConfig?.max ?? Infinity;\n        // Inputs can be undefined if schema was undefined and initialInputs is [] casted to SchemaArray (which might be strict)\n        // But initialInputs is initialized to [] used as fallback.\n        const currentLength = Number(inputs?.length);\n        if (currentLength >= max) return;\n\n        setInputs((pre) => {\n            // Clone the template and update names with the new index\n            const newIndex = pre.length;\n            const newItem = cloneFieldWithIndex(template, newIndex, arrayName) as Record<\n                string,\n                FieldMetadata\n            >;\n\n            return [...pre, newItem];\n        });\n    }, [inputs, fieldConfig?.max, arrayName, template]); // Original deps: [inputs, fieldConfig?.max, arrayName]. Template is closed over. I should probably add it or leave it. Refactoring usually implies fixing linter errors. I'll Include template if linter complains, otherwise keep original. Original deps: [inputs, fieldConfig?.max, arrayName].\n\n    const remove = useCallback(\n        (index: number) => {\n            const min = fieldConfig?.min ?? 0;\n            const currentLength = inputs?.length || 0;\n            if (currentLength > min) {\n                setInputs((pre) => {\n                    // Ensure pre is always an array\n                    const filtered = pre.filter((_, i) => i !== index);\n                    // Update indices for remaining items\n                    return filtered.map((item, newIndex) => {\n                        return cloneFieldWithIndex(item, newIndex, arrayName) as Record<\n                            string,\n                            FieldMetadata\n                        >;\n                    });\n                });\n            }\n        },\n        [inputs, fieldConfig?.min, arrayName],\n    );\n\n    return { inputs, append, remove, setInputs, fieldConfig, name, ...prop };\n};\n",
     "import type { ParsedField } from '../../../../InputMapping';\n\n/**\n * Type guard to check if a value is a ParsedField\n * @param item - The item to check\n * @returns True if item is a ParsedField\n */\nexport function isParsedField(item: any): item is ParsedField<any, string> {\n    return item && typeof item === 'object' && 'name' in item && 'fieldType' in item;\n}\n",
     "import type { FieldMetadata, ParsedField } from '../../../../InputMapping';\nimport { isParsedField } from '../guards/isParsedField';\n\n/**\n * Helper function to deep clone a ParsedField and update names with new index\n * @param field - The field to clone\n * @param newIndex - The new index to apply\n * @param arrayName - The name of the array\n * @returns The cloned field or record of fields with updated index\n */\nexport function cloneFieldWithIndex(\n    field:\n        | ParsedField<any, string>\n        | Record<string, ParsedField<any, string>>\n        | FieldMetadata\n        | Record<string, FieldMetadata>,\n    newIndex: number,\n    arrayName: string,\n): ParsedField<any, string> | Record<string, ParsedField<any, string>> {\n    // Handle Record<string, ParsedField>\n    if (!isParsedField(field)) {\n        const newStructure: Record<string, ParsedField<any, string>> = {};\n        for (const key in field) {\n            const val = (field as any)[key];\n            if (!val) continue;\n            // Recursive call - result is ParsedField because val is ParsedField\n            // (assuming structure is Record<string, ParsedField>)\n            newStructure[key] = cloneFieldWithIndex(val, newIndex, arrayName) as ParsedField<\n                any,\n                string\n            >;\n        }\n        return newStructure;\n    }\n\n    // Handle ParsedField\n    // Extract the field name from the current history (e.g., \"items.0.name\" -> \"name\")\n    const fieldName = field.name.current;\n    const newHistory = `${arrayName}.${newIndex}.${fieldName}`;\n\n    const cloned = {\n        ...field,\n        name: {\n            current: fieldName,\n            history: newHistory,\n        },\n    } as ParsedField<any, string>;\n\n    if (field.schema && Array.isArray(field.schema)) {\n        cloned.schema = field.schema.map((subField) =>\n            cloneFieldWithIndex(subField as ParsedField<any, string>, newIndex, arrayName),\n        );\n    }\n\n    return cloned;\n}\n",
-    "import { useReducer, useRef, use } from 'react';\nimport { InputMapping } from '../InputMapping/class';\n\nexport function createInputMappingHook<Ob extends Record<string, any>>(\n\tInputMappingContext: React.Context<InputMapping<Ob> | null>,\n) {\n\treturn function useInputMapping() {\n\t\tconst initialState = use(InputMappingContext);\n\t\tif (!initialState) throw new Error('InputMappingContext not found');\n\t\tconst mapRef = useRef(initialState);\n\t\tconst [, reRender] = useReducer((x) => x + 1, 0);\n\n\t\treturn {\n\t\t\t...mapRef.current,\n\t\t\tset: (key: keyof Ob | string, value: React.FC<any>) => {\n\t\t\t\tconst result = mapRef.current.set(key, value);\n\t\t\t\treRender();\n\t\t\t\treturn result;\n\t\t\t},\n\t\t\tclear: () => {\n\t\t\t\tmapRef.current.clear();\n\t\t\t\treRender();\n\t\t\t},\n\t\t\tdelete: (key: keyof Ob | string) => {\n\t\t\t\tconst result = mapRef.current.delete(key);\n\t\t\t\treRender();\n\t\t\t\treturn result;\n\t\t\t},\n\t\t};\n\t};\n}\n"
+    "import { useCallback, useMemo, useReducer, useRef, use } from 'react';\nimport { InputMapping } from '../InputMapping/class';\n\nexport function createInputMappingHook<Ob extends Record<string, any>>(\n\tInputMappingContext: React.Context<InputMapping<Ob> | null>,\n) {\n\treturn function useInputMapping() {\n\t\tconst initialState = use(InputMappingContext);\n\t\tif (!initialState) throw new Error('InputMappingContext not found');\n\t\tconst mapRef = useRef(initialState);\n\t\tconst [version, reRender] = useReducer((x) => x + 1, 0);\n\n\t\tconst set = useCallback((key: keyof Ob | string, value: React.FC<any>) => {\n\t\t\tconst result = mapRef.current.set(key, value);\n\t\t\treRender();\n\t\t\treturn result;\n\t\t}, []);\n\n\t\tconst clear = useCallback(() => {\n\t\t\tmapRef.current.clear();\n\t\t\treRender();\n\t\t}, []);\n\n\t\tconst del = useCallback((key: keyof Ob | string) => {\n\t\t\tconst result = mapRef.current.delete(key);\n\t\t\treRender();\n\t\t\treturn result;\n\t\t}, []);\n\n\t\treturn useMemo(\n\t\t\t() => ({\n\t\t\t\t...mapRef.current,\n\t\t\t\tset,\n\t\t\t\tclear,\n\t\t\t\tdelete: del,\n\t\t\t}),\n\t\t\t[version],\n\t\t);\n\t};\n}\n"
   ],
-  "mappings": "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",
-  "debugId": "FEDB4F6DC6D16F3364756E2164756E21",
+  "mappings": "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",
+  "debugId": "CC948A0F1B63234064756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@form-instant/react-input-mapping",
-    "version": "2.0.4",
+    "version": "2.2.0",
     "author": {
         "name": "leomerida15",
         "email": "dimasmerida15@gmail.com",