rhf-dynamic-forms 1.1.0

package/dist/index.cjs

@@ -0,0 +1,1611 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+let react_hook_form = require("react-hook-form");
+let react_jsx_runtime = require("react/jsx-runtime");
+let zod = require("zod");
+let _hookform_resolvers_zod = require("@hookform/resolvers/zod");
+let json_logic_js = require("json-logic-js");
+json_logic_js = __toESM(json_logic_js);
+
+//#region src/context/DynamicFormContext.tsx
+/**
+* Context for sharing form state and configuration with child components.
+*
+* This context is set up by the DynamicForm component and consumed by
+* field renderers and other internal components.
+*/
+const DynamicFormContext = (0, react.createContext)(null);
+DynamicFormContext.displayName = "DynamicFormContext";
+
+//#endregion
+//#region src/customComponents/ConfigurationError.ts
+var ConfigurationError$1 = class ConfigurationError$1 extends Error {
+	path;
+	component;
+	constructor(message, path, component) {
+		super(message);
+		this.name = "ConfigurationError";
+		this.path = path;
+		this.component = component;
+		const ErrorWithCapture = Error;
+		if (ErrorWithCapture.captureStackTrace) ErrorWithCapture.captureStackTrace(this, ConfigurationError$1);
+	}
+	static formatMessage(baseMessage, path, component) {
+		const parts = [];
+		if (component) parts.push(`Component "${component}"`);
+		if (path) parts.push(`at ${path}`);
+		if (parts.length > 0) return `${parts.join(" ")}: ${baseMessage}`;
+		return baseMessage;
+	}
+};
+
+//#endregion
+//#region src/customComponents/defineCustomComponent.ts
+/**
+* Type-safe helper for defining custom components.
+* Provides TypeScript inference for component props based on propsSchema.
+*
+* @example
+* ```ts
+* const RatingField = defineCustomComponent({
+*   component: RatingFieldComponent,
+*   propsSchema: z.object({ maxStars: z.number() }),
+*   defaultProps: { maxStars: 5 },
+* });
+* ```
+*/
+function defineCustomComponent(definition) {
+	return definition;
+}
+
+//#endregion
+//#region src/customComponents/types.ts
+const isCustomComponentDefinition = (entry) => {
+	return typeof entry === "object" && entry !== null && "component" in entry && typeof entry.component === "function";
+};
+const normalizeComponentDefinition = (entry, name) => {
+	if (isCustomComponentDefinition(entry)) return {
+		...entry,
+		displayName: entry.displayName ?? name
+	};
+	return {
+		component: entry,
+		displayName: name
+	};
+};
+
+//#endregion
+//#region src/customComponents/validateCustomElement.ts
+/**
+* Validate custom element against its component definition.
+*/
+function validateCustomElement(element, registry, path) {
+	const entry = registry[element.component];
+	if (!entry) {
+		const available = Object.keys(registry);
+		const availableMessage = available.length > 0 ? `Available components: ${available.join(", ")}` : "No custom components registered.";
+		throw new ConfigurationError$1(`Unknown custom component "${element.component}" at ${path}. ${availableMessage}`, path, element.component);
+	}
+	const definition = normalizeComponentDefinition(entry, element.component);
+	const mergedProps = {
+		...definition.defaultProps,
+		...element.componentProps
+	};
+	if (definition.propsSchema) {
+		const result = definition.propsSchema.safeParse(mergedProps);
+		if (!result.success) throw new ConfigurationError$1(`Invalid props for "${definition.displayName || element.component}" at ${path}:\n${result.error.issues.map((issue) => `  - ${issue.path.join(".") || "root"}: ${issue.message}`).join("\n")}`, path, element.component);
+		return {
+			...element,
+			componentProps: result.data,
+			__definition: definition
+		};
+	}
+	return {
+		...element,
+		componentProps: mergedProps,
+		__definition: definition
+	};
+}
+function isCustomElement(element) {
+	return typeof element === "object" && element !== null && "type" in element && element.type === "custom" && "component" in element && typeof element.component === "string";
+}
+
+//#endregion
+//#region src/customComponents/validateConfiguration.ts
+/**
+* Recursively validate all custom elements in a form configuration.
+*/
+function validateCustomComponents(config, registry = {}) {
+	const validatedElements = validateElements(config.elements, registry, "elements");
+	return {
+		...config,
+		elements: validatedElements
+	};
+}
+function validateElements(elements, registry, basePath) {
+	return elements.map((element, index) => {
+		return validateElement(element, registry, `${basePath}[${index}]`);
+	});
+}
+function validateElement(element, registry, path) {
+	if (isCustomElement(element)) return validateCustomElement(element, registry, path);
+	if (isContainerElement$1(element)) return validateContainer(element, registry, path);
+	if (isColumnElement$1(element)) return validateColumn(element, registry, path);
+	return element;
+}
+function validateContainer(container, registry, path) {
+	const validatedColumns = container.columns.map((column, index) => validateColumn(column, registry, `${path}.columns[${index}]`));
+	return {
+		...container,
+		columns: validatedColumns
+	};
+}
+function validateColumn(column, registry, path) {
+	const validatedElements = validateElements(column.elements, registry, `${path}.elements`);
+	return {
+		...column,
+		elements: validatedElements
+	};
+}
+function isContainerElement$1(element) {
+	return element.type === "container";
+}
+function isColumnElement$1(element) {
+	return element.type === "column";
+}
+
+//#endregion
+//#region src/types/elements.ts
+/**
+* Type guard to check if an element is a field element.
+*/
+const isFieldElement = (element) => element.type === "text" || element.type === "email" || element.type === "boolean" || element.type === "phone" || element.type === "date" || element.type === "select" || element.type === "array" || element.type === "custom";
+/**
+* Type guard to check if an element is an array field element.
+*/
+const isArrayFieldElement = (element) => element.type === "array";
+/**
+* Type guard to check if an element is a container element.
+*/
+const isContainerElement = (element) => element.type === "container";
+/**
+* Type guard to check if an element is a column element.
+*/
+const isColumnElement = (element) => element.type === "column";
+/**
+* Type guard to check if an element is a custom field element.
+*/
+const isCustomFieldElement = (element) => element.type === "custom";
+
+//#endregion
+//#region src/hooks/useDynamicFormContext.ts
+/**
+* Hook to access the DynamicForm context.
+*
+* Must be used within a DynamicForm component.
+* Throws an error if used outside of the form context.
+*
+* @returns The DynamicFormContext value
+* @throws Error if used outside of DynamicForm
+*
+* @example
+* ```tsx
+* function MyCustomField({ config }) {
+*   const { form, fieldComponents } = useDynamicFormContext();
+*
+*   const value = form.watch(config.name);
+*   // ... render field
+* }
+* ```
+*/
+const useDynamicFormContext = () => {
+	const context = (0, react.useContext)(DynamicFormContext);
+	if (!context) throw new Error("useDynamicFormContext must be used within a DynamicForm component. Make sure your component is a child of <DynamicForm>.");
+	return context;
+};
+/**
+* Hook to safely access the DynamicForm context.
+* Returns null if used outside of the form context instead of throwing.
+*
+* @returns The DynamicFormContext value or null
+*
+* @example
+* ```tsx
+* function MaybeInForm() {
+*   const context = useDynamicFormContextSafe();
+*
+*   if (!context) {
+*     return <span>Not in a form</span>;
+*   }
+*
+*   return <span>In a form!</span>;
+* }
+* ```
+*/
+const useDynamicFormContextSafe = () => {
+	return (0, react.useContext)(DynamicFormContext);
+};
+
+//#endregion
+//#region src/components/ContainerRenderer.tsx
+/**
+* Default container styles using flexbox.
+*/
+const defaultContainerStyle = {
+	display: "flex",
+	gap: "16px",
+	flexWrap: "wrap"
+};
+/**
+* Default container component used when no custom container is provided.
+* Receives config and children props as per ContainerProps interface.
+*/
+const DefaultContainer = ({ children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: defaultContainerStyle,
+		children
+	});
+};
+/**
+* Renders a container element with its columns.
+*
+* The ContainerRenderer:
+* 1. Checks visibility (Phase 4 - currently all containers are visible)
+* 2. Looks up custom container component if specified
+* 3. Renders columns as children using ColumnRenderer
+*
+* @example
+* ```tsx
+* <ContainerRenderer
+*   config={{
+*     type: 'container',
+*     columns: [
+*       { type: 'column', width: '50%', elements: [...] },
+*       { type: 'column', width: '50%', elements: [...] }
+*     ]
+*   }}
+* />
+* ```
+*/
+const ContainerRenderer = ({ config }) => {
+	const { customContainers } = useDynamicFormContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(customContainers?.default ?? DefaultContainer, {
+		config,
+		children: config.columns.map((column, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnRenderer, { config: column }, `column-${index}`))
+	});
+};
+ContainerRenderer.displayName = "ContainerRenderer";
+
+//#endregion
+//#region src/components/FieldRenderer.tsx
+const CustomFieldRenderer = ({ config, field, fieldState, formValues, setValue }) => {
+	const { customComponents } = useDynamicFormContext();
+	if (config.type !== "custom") return null;
+	const customConfig = config;
+	const entry = customComponents[customConfig.component];
+	if (!entry) {
+		console.warn(`No custom component registered for: "${customConfig.component}". Make sure to pass it in the customComponents prop.`);
+		return null;
+	}
+	const FieldComponent = normalizeComponentDefinition(entry, customConfig.component).component;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldComponent, {
+		componentProps: customConfig.componentProps ?? {},
+		config: customConfig,
+		field,
+		fieldState,
+		formValues,
+		setValue
+	});
+};
+const StandardFieldRenderer = ({ config, field, fieldState, formValues, setValue }) => {
+	const { fieldComponents } = useDynamicFormContext();
+	const FieldComponent = fieldComponents[config.type];
+	if (!FieldComponent) {
+		console.warn(`No field component registered for type: "${config.type}". Make sure to provide all field types in the fieldComponents prop.`);
+		return null;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldComponent, {
+		config,
+		field,
+		fieldState,
+		formValues,
+		setValue
+	});
+};
+const FieldRenderer = ({ config }) => {
+	const { form, visibility, fieldWrapper } = useDynamicFormContext();
+	const { field, fieldState } = (0, react_hook_form.useController)({
+		name: config.name,
+		control: form.control
+	});
+	if (!(visibility[config.name] !== false)) return null;
+	const formValues = form.getValues();
+	const setValue = (name, value) => form.setValue(name, value);
+	let fieldElement;
+	if (isCustomFieldElement(config)) fieldElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomFieldRenderer, {
+		config,
+		field,
+		fieldState,
+		formValues,
+		setValue
+	});
+	else fieldElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFieldRenderer, {
+		config,
+		field,
+		fieldState,
+		formValues,
+		setValue
+	});
+	if (fieldWrapper) return fieldWrapper({
+		name: config.name,
+		config,
+		fieldState,
+		value: field.value,
+		formValues,
+		setValue
+	}, fieldElement);
+	return fieldElement;
+};
+FieldRenderer.displayName = "FieldRenderer";
+
+//#endregion
+//#region src/components/ElementRenderer.tsx
+/**
+* Dispatches rendering to the appropriate component based on element type.
+*
+* Supports field elements (Phase 1) and container/column layouts (Phase 2).
+*
+* @example
+* ```tsx
+* // Field element
+* <ElementRenderer element={{ type: 'text', name: 'name', label: 'Name' }} />
+*
+* // Container element with columns
+* <ElementRenderer element={{
+*   type: 'container',
+*   columns: [
+*     { type: 'column', width: '50%', elements: [...] }
+*   ]
+* }} />
+* ```
+*/
+const ElementRenderer = ({ element }) => {
+	if (isFieldElement(element)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRenderer, { config: element });
+	if (isContainerElement(element)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerRenderer, { config: element });
+	if (isColumnElement(element)) {
+		console.warn("Column elements should not be rendered directly. They should be children of a container element.");
+		return null;
+	}
+	console.warn(`Unknown element type: ${element.type}`);
+	return null;
+};
+ElementRenderer.displayName = "ElementRenderer";
+
+//#endregion
+//#region src/components/ColumnRenderer.tsx
+/**
+* Renders a column element with its nested form elements.
+*
+* The ColumnRenderer:
+* 1. Applies the configured width to the column wrapper
+* 2. Recursively renders nested elements via ElementRenderer
+*
+* Columns support nested containers, enabling complex layout hierarchies.
+*
+* @example
+* ```tsx
+* <ColumnRenderer
+*   config={{
+*     type: 'column',
+*     width: '50%',
+*     elements: [
+*       { type: 'text', name: 'firstName', label: 'First Name' },
+*       { type: 'text', name: 'lastName', label: 'Last Name' }
+*     ]
+*   }}
+* />
+* ```
+*/
+const ColumnRenderer = ({ config }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			flex: `0 1 ${config.width}`,
+			maxWidth: config.width,
+			minWidth: 0,
+			boxSizing: "border-box"
+		},
+		children: config.elements.map((element, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ElementRenderer, { element }, "name" in element ? element.name : `element-${index}`))
+	});
+};
+ColumnRenderer.displayName = "ColumnRenderer";
+
+//#endregion
+//#region src/components/FormRenderer.tsx
+/**
+* Renders all form elements from the configuration.
+*
+* Maps over the elements array and renders each element using ElementRenderer.
+* Elements are rendered vertically (one under another) in Phase 1.
+*
+* @example
+* ```tsx
+* const elements = [
+*   { type: 'text', name: 'name', label: 'Name' },
+*   { type: 'email', name: 'email', label: 'Email' },
+* ];
+*
+* <FormRenderer elements={elements} />
+* ```
+*/
+const FormRenderer = ({ elements }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: elements.map((element, index) => {
+		const key = "name" in element && element.name ? element.name : `element-${index}`;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ElementRenderer, { element }, key);
+	}) });
+};
+FormRenderer.displayName = "FormRenderer";
+
+//#endregion
+//#region src/parser/configValidator.ts
+/**
+* JSON Logic rule schema - accepts any object structure.
+* Actual JSON Logic validation happens at runtime.
+*/
+const jsonLogicRuleSchema = zod.z.record(zod.z.string(), zod.z.unknown());
+/**
+* Validation configuration schema.
+*/
+const validationConfigSchema = zod.z.object({
+	required: zod.z.boolean().optional(),
+	type: zod.z.enum([
+		"number",
+		"email",
+		"date"
+	]).optional(),
+	minLength: zod.z.number().int().min(0).optional(),
+	maxLength: zod.z.number().int().min(0).optional(),
+	pattern: zod.z.string().optional(),
+	message: zod.z.string().optional(),
+	condition: jsonLogicRuleSchema.optional()
+}).strict().optional();
+/**
+* Base field element schema (common properties).
+*/
+const baseFieldSchema = zod.z.object({
+	name: zod.z.string().min(1, "Field name is required"),
+	label: zod.z.string().optional(),
+	placeholder: zod.z.string().optional(),
+	defaultValue: zod.z.union([
+		zod.z.string(),
+		zod.z.number(),
+		zod.z.boolean(),
+		zod.z.null(),
+		zod.z.array(zod.z.unknown()),
+		zod.z.record(zod.z.string(), zod.z.unknown())
+	]).optional(),
+	validation: validationConfigSchema,
+	visible: jsonLogicRuleSchema.optional(),
+	dependsOn: zod.z.string().optional(),
+	resetOnParentChange: zod.z.boolean().optional()
+});
+/**
+* Text field element schema.
+*/
+const textFieldSchema = baseFieldSchema.extend({ type: zod.z.literal("text") });
+/**
+* Email field element schema.
+*/
+const emailFieldSchema = baseFieldSchema.extend({ type: zod.z.literal("email") });
+/**
+* Boolean field element schema.
+*/
+const booleanFieldSchema = baseFieldSchema.extend({ type: zod.z.literal("boolean") });
+/**
+* Phone field element schema.
+*/
+const phoneFieldSchema = baseFieldSchema.extend({ type: zod.z.literal("phone") });
+/**
+* Date field element schema.
+*/
+const dateFieldSchema = baseFieldSchema.extend({ type: zod.z.literal("date") });
+/**
+* Select option schema.
+*/
+const selectOptionSchema = zod.z.object({
+	value: zod.z.union([zod.z.string(), zod.z.number()]),
+	label: zod.z.string(),
+	disabled: zod.z.boolean().optional()
+});
+/**
+* Options source schema - describes how to resolve options.
+*/
+const optionsSourceSchema = zod.z.discriminatedUnion("type", [
+	zod.z.object({ type: zod.z.literal("static") }),
+	zod.z.object({
+		type: zod.z.literal("map"),
+		key: zod.z.string()
+	}),
+	zod.z.object({
+		type: zod.z.literal("api"),
+		endpoint: zod.z.string()
+	}),
+	zod.z.object({
+		type: zod.z.literal("search"),
+		endpoint: zod.z.string(),
+		minChars: zod.z.number().optional()
+	}),
+	zod.z.object({
+		type: zod.z.literal("resolver"),
+		name: zod.z.string()
+	})
+]);
+/**
+* Select field element schema.
+* Options are required when optionsSource is not provided.
+*/
+const selectFieldSchema = baseFieldSchema.extend({
+	type: zod.z.literal("select"),
+	options: zod.z.array(selectOptionSchema).optional(),
+	optionsSource: optionsSourceSchema.optional(),
+	multiple: zod.z.boolean().optional(),
+	clearable: zod.z.boolean().optional(),
+	searchable: zod.z.boolean().optional(),
+	creatable: zod.z.boolean().optional()
+}).refine((data) => {
+	if (!data.optionsSource || data.optionsSource.type === "static") return data.options !== void 0 && data.options.length >= 0;
+	return true;
+}, { message: "Options are required when optionsSource is not provided" });
+/**
+* Custom field element schema.
+*/
+const customFieldSchema = baseFieldSchema.extend({
+	type: zod.z.literal("custom"),
+	component: zod.z.string().min(1, "Custom component name is required"),
+	componentProps: zod.z.record(zod.z.string(), zod.z.unknown()).optional()
+});
+/**
+* Array field element schema.
+* Contains repeatable group of fields.
+*/
+const arrayFieldSchema = baseFieldSchema.extend({
+	type: zod.z.literal("array"),
+	itemFields: zod.z.lazy(() => zod.z.array(fieldElementSchema)),
+	minItems: zod.z.number().int().min(0).optional(),
+	maxItems: zod.z.number().int().min(0).optional(),
+	addButtonLabel: zod.z.string().optional(),
+	sortable: zod.z.boolean().optional()
+}).refine((data) => {
+	if (data.minItems !== void 0 && data.maxItems !== void 0) return data.minItems <= data.maxItems;
+	return true;
+}, { message: "minItems must be less than or equal to maxItems" });
+/**
+* Field element schema - union of all field types.
+*/
+const fieldElementSchema = zod.z.discriminatedUnion("type", [
+	textFieldSchema,
+	emailFieldSchema,
+	booleanFieldSchema,
+	phoneFieldSchema,
+	dateFieldSchema,
+	selectFieldSchema,
+	customFieldSchema,
+	arrayFieldSchema
+]);
+/**
+* Form element schema - for Phase 1, only field elements are supported.
+* Phase 2 will add container and column schemas.
+*
+* We use a lazy schema to allow for future recursive definitions
+* (containers containing columns containing elements).
+*/
+const formElementSchema = zod.z.lazy(() => zod.z.union([
+	fieldElementSchema,
+	containerElementSchema,
+	columnElementSchema
+]));
+/**
+* Column element schema (for Phase 2, but defined here for type completeness).
+*/
+const columnElementSchema = zod.z.object({
+	type: zod.z.literal("column"),
+	width: zod.z.string().min(1, "Column width is required"),
+	elements: zod.z.array(zod.z.lazy(() => formElementSchema)),
+	visible: jsonLogicRuleSchema.optional()
+});
+/**
+* Container element schema (for Phase 2).
+*/
+const containerElementSchema = zod.z.object({
+	type: zod.z.literal("container"),
+	columns: zod.z.array(columnElementSchema),
+	visible: jsonLogicRuleSchema.optional()
+});
+/**
+* Custom component definition schema.
+*/
+const customComponentDefinitionSchema = zod.z.object({ defaultProps: zod.z.record(zod.z.string(), zod.z.unknown()).optional() });
+/**
+* Root form configuration schema.
+*/
+const formConfigurationSchema = zod.z.object({
+	name: zod.z.string().optional(),
+	elements: zod.z.array(formElementSchema).min(1, "At least one element is required"),
+	customComponents: zod.z.record(zod.z.string(), customComponentDefinitionSchema).optional()
+});
+/**
+* Validates a form configuration object.
+*
+* @param config - Configuration object to validate
+* @returns Validated and typed configuration
+* @throws ZodError if validation fails
+*/
+const validateConfiguration = (config) => {
+	return formConfigurationSchema.parse(config);
+};
+/**
+* Safely validates a form configuration object without throwing.
+*
+* @param config - Configuration object to validate
+* @returns Result object with success status and data or error
+*/
+const safeValidateConfiguration = (config) => {
+	return formConfigurationSchema.safeParse(config);
+};
+
+//#endregion
+//#region src/parser/configParser.ts
+/**
+* Error thrown when configuration parsing fails.
+*/
+var ConfigurationError = class extends Error {
+	/** The original validation errors */
+	errors;
+	constructor(message, errors) {
+		super(message);
+		this.name = "ConfigurationError";
+		this.errors = errors;
+	}
+};
+/**
+* Parses and validates a form configuration.
+*
+* @param config - Raw configuration object (typically from JSON)
+* @returns Validated FormConfiguration
+* @throws ConfigurationError if validation fails
+*
+* @example
+* ```typescript
+* try {
+*   const config = parseConfiguration({
+*     elements: [
+*       { type: 'text', name: 'name', label: 'Name' }
+*     ]
+*   });
+*   // config is now typed as FormConfiguration
+* } catch (error) {
+*   if (error instanceof ConfigurationError) {
+*     console.error('Invalid configuration:', error.errors);
+*   }
+* }
+* ```
+*/
+const parseConfiguration = (config) => {
+	try {
+		return validateConfiguration(config);
+	} catch (error) {
+		if (error && typeof error === "object" && "issues" in error) throw new ConfigurationError("Invalid form configuration", error.issues);
+		throw error;
+	}
+};
+/**
+* Safely parses and validates a form configuration without throwing.
+*
+* @param config - Raw configuration object
+* @returns ParseResult with success status and config or errors
+*
+* @example
+* ```typescript
+* const result = safeParseConfiguration(rawConfig);
+* if (result.success) {
+*   // result.config is available
+*   renderForm(result.config);
+* } else {
+*   // result.errors contains validation messages
+*   showErrors(result.errors);
+* }
+* ```
+*/
+const safeParseConfiguration = (config) => {
+	const result = safeValidateConfiguration(config);
+	if (result.success) return {
+		success: true,
+		config: result.data
+	};
+	return {
+		success: false,
+		errors: result.error.issues.map((issue) => {
+			const path = issue.path.join(".");
+			return path ? `${path}: ${issue.message}` : issue.message;
+		})
+	};
+};
+
+//#endregion
+//#region src/resolver/visibilityAwareResolver.ts
+/**
+* Check if a value is a leaf error node.
+* React-hook-form leaf errors have both 'type' and 'message' properties.
+*/
+const isLeafError = (value) => value !== null && typeof value === "object" && "type" in value && "message" in value;
+/**
+* Create a warning error from an existing error object.
+*/
+const createWarningError = (error) => ({
+	...error,
+	type: "warning"
+});
+/**
+* Process a single error entry based on visibility rules.
+* Returns the error to include or undefined to skip.
+*/
+const processLeafError = (value, path, visibility, warnMode) => {
+	if (visibility[path] !== false) return value;
+	if (warnMode) return createWarningError(value);
+};
+/**
+* Recursively filter errors based on field visibility.
+* Handles nested error structures for dot-notation paths.
+*/
+const filterErrorsByVisibility = (errors, visibility, warnMode, parentPath = "") => {
+	const acc = {};
+	for (const [key, value] of Object.entries(errors)) {
+		const path = parentPath ? `${parentPath}.${key}` : key;
+		if (!isLeafError(value) && value && typeof value === "object") {
+			const nested = filterErrorsByVisibility(value, visibility, warnMode, path);
+			if (Object.keys(nested).length > 0) acc[key] = nested;
+			continue;
+		}
+		const processed = processLeafError(value, path, visibility, warnMode);
+		if (processed !== void 0) acc[key] = processed;
+	}
+	return acc;
+};
+/**
+* Creates a resolver that respects field visibility.
+*
+* This resolver wraps the standard zodResolver and filters validation
+* errors based on field visibility. This is useful when fields are
+* conditionally shown/hidden and you want to skip validation for
+* hidden fields.
+*
+* @param options - Configuration for the resolver
+* @returns A react-hook-form resolver
+*
+* @example
+* ```typescript
+* const resolver = createVisibilityAwareResolver({
+*   schema: myZodSchema,
+*   getVisibility: () => ({ name: true, phone: false }),
+*   invisibleFieldValidation: "skip",
+* });
+*
+* const form = useForm({ resolver });
+* ```
+*/
+const createVisibilityAwareResolver = (options) => {
+	const baseResolver = (0, _hookform_resolvers_zod.zodResolver)(options.schema);
+	return async (values, context, resolverOptions) => {
+		const result = await baseResolver(values, context, resolverOptions);
+		if (!result.errors || options.invisibleFieldValidation === "validate") return result;
+		const visibility = options.getVisibility();
+		const warnMode = options.invisibleFieldValidation === "warn";
+		const filteredErrors = filterErrorsByVisibility(result.errors, visibility, warnMode);
+		return {
+			values: result.values,
+			errors: filteredErrors
+		};
+	};
+};
+
+//#endregion
+//#region src/schema/fieldSchemas.ts
+/**
+* Build the base Zod schema for a select field.
+*
+* @param field - Select field configuration
+* @returns Base Zod schema for the select field
+*/
+const buildSelectSchema = (field) => {
+	if (field.multiple) return zod.z.array(zod.z.union([zod.z.string(), zod.z.number()]));
+	return zod.z.union([
+		zod.z.string(),
+		zod.z.number(),
+		zod.z.null()
+	]);
+};
+/**
+* Build the base Zod schema for an array field.
+* Recursively generates schema from itemFields.
+*
+* @param field - Array field configuration
+* @returns Base Zod schema for the array field
+*/
+const buildArraySchema = (field) => {
+	const itemShape = {};
+	for (const itemField of field.itemFields) itemShape[itemField.name] = buildFieldSchema(itemField);
+	let arraySchema = zod.z.array(zod.z.object(itemShape));
+	if (field.minItems !== void 0) arraySchema = arraySchema.min(field.minItems, `At least ${field.minItems} item(s) required`);
+	if (field.maxItems !== void 0) arraySchema = arraySchema.max(field.maxItems, `Maximum ${field.maxItems} item(s) allowed`);
+	return arraySchema;
+};
+/**
+* Build the base Zod schema for a field based on its type.
+*
+* @param field - The field element configuration
+* @returns Base Zod schema for the field type
+*/
+const buildBaseSchema = (field) => {
+	switch (field.type) {
+		case "text":
+		case "phone": return zod.z.string();
+		case "email": return zod.z.string().email("Invalid email address");
+		case "boolean": return zod.z.boolean();
+		case "date": return zod.z.string();
+		case "select": return buildSelectSchema(field);
+		case "array": return buildArraySchema(field);
+		case "custom": return zod.z.unknown();
+		default: return zod.z.unknown();
+	}
+};
+/**
+* Apply validation rules to a string schema.
+*
+* @param schema - Base string schema
+* @param validation - Validation configuration
+* @returns Schema with validation rules applied
+*/
+const applyStringValidation = (schema, validation) => {
+	let result = schema;
+	if (validation.required) result = result.min(1, "This field is required");
+	if (validation.minLength !== void 0) result = result.min(validation.minLength, `Must be at least ${validation.minLength} characters`);
+	if (validation.maxLength !== void 0) result = result.max(validation.maxLength, `Must be no more than ${validation.maxLength} characters`);
+	if (validation.pattern) try {
+		const regex = new RegExp(validation.pattern);
+		result = result.regex(regex, validation.message || "Invalid format");
+	} catch {
+		console.warn(`Invalid regex pattern: ${validation.pattern}`);
+	}
+	return result;
+};
+/**
+* Apply validation rules to a boolean schema.
+*
+* @param schema - Base boolean schema
+* @param validation - Validation configuration
+* @returns Schema with validation rules applied
+*/
+const applyBooleanValidation = (schema, validation) => {
+	if (validation.required) return schema.refine((val) => val === true, { message: "This field is required" });
+	return schema;
+};
+/**
+* Apply validation rules to a select schema.
+*
+* @param schema - Base select schema
+* @param validation - Validation configuration
+* @param isMultiple - Whether this is a multi-select
+* @returns Schema with validation rules applied
+*/
+const applySelectValidation = (schema, validation, isMultiple) => {
+	if (validation.required && isMultiple) return schema.min(1, "At least one selection is required");
+	if (validation.required && !isMultiple) return schema.refine((val) => val !== null && val !== void 0, { message: "This field is required" });
+	return schema;
+};
+/**
+* Apply validation configuration to a Zod schema based on field type.
+*
+* @param schema - Base Zod schema
+* @param validation - Validation configuration
+* @param field - Field element configuration
+* @returns Schema with validation rules applied
+*/
+const applyValidationRules = (schema, validation, field) => {
+	const fieldType = field.type;
+	if (fieldType === "text" || fieldType === "phone" || fieldType === "email" || fieldType === "date") return applyStringValidation(schema, validation);
+	if (fieldType === "boolean") return applyBooleanValidation(schema, validation);
+	if (fieldType === "select") return applySelectValidation(schema, validation, field.multiple ?? false);
+	return schema;
+};
+/**
+* Build a complete Zod schema for a single field.
+*
+* @param field - Field element configuration
+* @returns Zod schema for the field
+*
+* @example
+* ```typescript
+* const textField = {
+*   type: 'text',
+*   name: 'name',
+*   validation: { required: true, minLength: 3 }
+* };
+*
+* const schema = buildFieldSchema(textField);
+* // schema is z.string().min(1, 'required').min(3, '...')
+* ```
+*/
+const buildFieldSchema = (field) => {
+	let schema = buildBaseSchema(field);
+	if (field.validation) schema = applyValidationRules(schema, field.validation, field);
+	return schema;
+};
+
+//#endregion
+//#region src/validation/jsonLogic.ts
+/**
+* Register custom JSON Logic operations.
+* Called once at module initialization.
+*/
+const registerCustomOperations = () => {
+	/**
+	* regex_match: Tests if a value matches a regex pattern.
+	*
+	* @example
+	* ```json
+	* { "regex_match": ["^[0-9]{10}$", { "var": "phone" }] }
+	* ```
+	*/
+	json_logic_js.default.add_operation("regex_match", (pattern, value) => {
+		if (typeof value !== "string" || typeof pattern !== "string") return false;
+		try {
+			return new RegExp(pattern).test(value);
+		} catch {
+			return false;
+		}
+	});
+};
+registerCustomOperations();
+/**
+* Evaluate a JSON Logic rule against form data.
+*
+* @param rule - JSON Logic rule to evaluate
+* @param data - Form data to evaluate against
+* @returns Result of the evaluation
+*
+* @example
+* ```typescript
+* const rule = { "==": [{ var: "status" }, "active"] };
+* const data = { status: "active" };
+* applyJsonLogic(rule, data); // true
+* ```
+*/
+const applyJsonLogic = (rule, data) => {
+	return json_logic_js.default.apply(rule, data);
+};
+/**
+* Evaluate a JSON Logic rule and return boolean result.
+* Returns true if rule evaluates to a truthy value.
+*
+* @param rule - JSON Logic condition
+* @param data - Form data
+* @returns true if condition passes, false otherwise
+*
+* @example
+* ```typescript
+* const rule = { "and": [{ var: "active" }, { var: "confirmed" }] };
+* evaluateCondition(rule, { active: true, confirmed: true }); // true
+* evaluateCondition(rule, { active: true, confirmed: false }); // false
+* ```
+*/
+const evaluateCondition = (rule, data) => {
+	const result = applyJsonLogic(rule, data);
+	return Boolean(result);
+};
+
+//#endregion
+//#region src/utils/calculateVisibility.ts
+/**
+* Compare two visibility states and return the new state only if changed.
+* Returns prev if no change (preserves reference equality for React).
+*/
+const getUpdatedVisibility = (prev, next) => {
+	const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+	for (const key of keys) if (prev[key] !== next[key]) return next;
+	return prev;
+};
+/**
+* Calculate visibility state for all fields based on their visibility rules.
+* Evaluates JSON Logic rules against current form data.
+*
+* @param elements - Array of form elements
+* @param formData - Current form values
+* @returns Visibility state for all fields
+*
+* @example
+* ```typescript
+* const elements = [
+*   { type: 'text', name: 'reason', visible: { "==": [{ "var": "type" }, "other"] } },
+*   { type: 'text', name: 'name' }
+* ];
+*
+* const visibility = calculateVisibility(elements, { type: 'other' });
+* // Returns: { reason: true, name: true }
+*
+* const visibility2 = calculateVisibility(elements, { type: 'standard' });
+* // Returns: { reason: false, name: true }
+* ```
+*/
+const calculateVisibility = (elements, formData) => {
+	const visibility = {};
+	const processElement = (element, parentVisible) => {
+		if (isFieldElement(element)) processField(element, parentVisible);
+		else if (isContainerElement(element)) processContainer(element, parentVisible);
+		else if (isColumnElement(element)) processColumn(element, parentVisible);
+	};
+	const processField = (field, parentVisible) => {
+		if (!parentVisible) {
+			visibility[field.name] = false;
+			return;
+		}
+		if (!field.visible) {
+			visibility[field.name] = true;
+			return;
+		}
+		visibility[field.name] = evaluateCondition(field.visible, formData);
+	};
+	const processContainer = (container, parentVisible) => {
+		let containerVisible = parentVisible;
+		if (container.visible && parentVisible) containerVisible = evaluateCondition(container.visible, formData);
+		for (const column of container.columns) processColumn(column, containerVisible);
+	};
+	const processColumn = (column, parentVisible) => {
+		let columnVisible = parentVisible;
+		if (column.visible && parentVisible) columnVisible = evaluateCondition(column.visible, formData);
+		for (const element of column.elements) processElement(element, columnVisible);
+	};
+	for (const element of elements) processElement(element, true);
+	return visibility;
+};
+
+//#endregion
+//#region src/utils/flattenFields.ts
+/**
+* Recursively extracts all field elements from a form configuration.
+* Traverses containers and columns to find nested fields.
+*
+* @param elements - Array of form elements (may include containers/columns)
+* @returns Flat array of all field elements
+*
+* @example
+* ```typescript
+* const config = {
+*   elements: [
+*     { type: 'text', name: 'name' },
+*     {
+*       type: 'container',
+*       columns: [{
+*         type: 'column',
+*         width: '50%',
+*         elements: [{ type: 'email', name: 'email' }]
+*       }]
+*     }
+*   ]
+* };
+*
+* const fields = flattenFields(config.elements);
+* // Returns: [{ type: 'text', name: 'name' }, { type: 'email', name: 'email' }]
+* ```
+*/
+const flattenFields = (elements) => {
+	const fields = [];
+	const processElement = (element) => {
+		if (isFieldElement(element)) fields.push(element);
+		else if (isContainerElement(element)) processContainer(element);
+		else if (isColumnElement(element)) processColumn(element);
+	};
+	const processContainer = (container) => {
+		for (const column of container.columns) processColumn(column);
+	};
+	const processColumn = (column) => {
+		for (const element of column.elements) processElement(element);
+	};
+	for (const element of elements) processElement(element);
+	return fields;
+};
+/**
+* Gets all field names from a form configuration.
+* Useful for initializing form state or visibility tracking.
+*
+* @param elements - Array of form elements
+* @returns Array of field names (including nested paths like 'source.name')
+*/
+const getFieldNames = (elements) => {
+	return flattenFields(elements).map((field) => field.name);
+};
+
+//#endregion
+//#region src/utils/dependencies.ts
+/**
+* Builds a dependency map from form elements.
+* Maps parent field names to their dependent children.
+*
+* @param elements - Array of form elements
+* @returns Map of parent field names to dependent field names
+*
+* @example
+* ```typescript
+* const elements = [
+*   { type: 'select', name: 'country', options: [...] },
+*   { type: 'select', name: 'city', dependsOn: 'country', options: [...] }
+* ];
+*
+* const map = buildDependencyMap(elements);
+* // Returns: { country: ['city'] }
+* ```
+*/
+const buildDependencyMap = (elements) => {
+	const map = {};
+	const fields = flattenFields(elements);
+	for (const field of fields) if (field.dependsOn) {
+		const parent = field.dependsOn;
+		if (!map[parent]) map[parent] = [];
+		map[parent].push(field.name);
+	}
+	return map;
+};
+/**
+* Finds a field by name in the form elements.
+*
+* @param elements - Array of form elements
+* @param name - Field name to find
+* @returns Field element if found, undefined otherwise
+*/
+const findFieldByName = (elements, name) => {
+	return flattenFields(elements).find((field) => field.name === name);
+};
+/**
+* Gets the default value for a field based on its type.
+* Used when resetting dependent fields.
+*
+* @param field - Field element
+* @returns Default value appropriate for the field type
+*/
+const getFieldTypeDefault = (field) => {
+	switch (field.type) {
+		case "boolean": return false;
+		case "select": return field.multiple ? [] : null;
+		case "array": return [];
+		default: return "";
+	}
+};
+/**
+* Gets the effective default value for a field.
+* Priority: config.defaultValue > type default
+*
+* @param field - Field element
+* @returns Default value to use when resetting
+*/
+const getFieldDefault = (field) => {
+	if (field.defaultValue !== void 0) return field.defaultValue;
+	return getFieldTypeDefault(field);
+};
+
+//#endregion
+//#region src/utils/mergeDefaults.ts
+/**
+* Sets a value in a nested object using dot notation path.
+*
+* @param obj - Object to modify
+* @param path - Dot-notation path (e.g., 'source.name')
+* @param value - Value to set
+*
+* @example
+* ```typescript
+* const obj = {};
+* setNestedValue(obj, 'source.name', 'John');
+* // obj is now { source: { name: 'John' } }
+* ```
+*/
+const setNestedValue = (obj, path, value) => {
+	const parts = path.split(".");
+	let current = obj;
+	for (let i = 0; i < parts.length - 1; i++) {
+		const part = parts[i];
+		if (!(part in current) || typeof current[part] !== "object" || current[part] === null) current[part] = {};
+		current = current[part];
+	}
+	const lastPart = parts.at(-1);
+	if (lastPart !== void 0) current[lastPart] = value;
+};
+/**
+* Gets a value from a nested object using dot notation path.
+*
+* @param obj - Object to read from
+* @param path - Dot-notation path (e.g., 'source.name')
+* @returns The value at the path, or undefined if not found
+*
+* @example
+* ```typescript
+* const obj = { source: { name: 'John' } };
+* getNestedValue(obj, 'source.name'); // 'John'
+* getNestedValue(obj, 'source.email'); // undefined
+* ```
+*/
+const getNestedValue = (obj, path) => {
+	const parts = path.split(".");
+	let current = obj;
+	for (const part of parts) {
+		if (current === null || current === void 0 || typeof current !== "object") return;
+		current = current[part];
+	}
+	return current;
+};
+/**
+* Deep merge two objects. Source values override target values.
+*
+* @param target - Base object
+* @param source - Object to merge in (takes precedence)
+* @returns New merged object
+*/
+const deepMerge = (target, source) => {
+	const result = { ...target };
+	for (const key in source) if (Object.hasOwn(source, key)) {
+		const sourceValue = source[key];
+		const targetValue = result[key];
+		if (sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue !== null && typeof targetValue === "object" && !Array.isArray(targetValue)) result[key] = deepMerge(targetValue, sourceValue);
+		else result[key] = sourceValue;
+	}
+	return result;
+};
+/**
+* Gets the default value for a field based on its type.
+*
+* @param field - Field element
+* @returns Appropriate default value for the field type
+*/
+const getTypeDefault = (field) => {
+	switch (field.type) {
+		case "boolean": return false;
+		case "select": return field.multiple ? [] : null;
+		case "array": return [];
+		case "text":
+		case "email":
+		case "phone":
+		case "date": return "";
+		default: return "";
+	}
+};
+/**
+* Merges configuration default values with initial data.
+* Priority: initialData > config.defaultValue > type default
+*
+* @param config - Form configuration containing field definitions
+* @param initialData - Initial data provided by the user
+* @returns Merged default values for react-hook-form
+*
+* @example
+* ```typescript
+* const config = {
+*   elements: [
+*     { type: 'text', name: 'source.name', defaultValue: 'Default Name' },
+*     { type: 'boolean', name: 'source.active' }
+*   ]
+* };
+*
+* const initialData = { source: { name: 'Provided Name' } };
+* const defaults = mergeDefaults(config, initialData);
+* // Result: { source: { name: 'Provided Name', active: false } }
+* ```
+*/
+const mergeDefaults = (config, initialData) => {
+	const defaults = {};
+	const fields = flattenFields(config.elements);
+	for (const field of fields) {
+		const typeDefault = getTypeDefault(field);
+		const configDefault = field.defaultValue ?? typeDefault;
+		setNestedValue(defaults, field.name, configDefault);
+	}
+	if (initialData) return deepMerge(defaults, initialData);
+	return defaults;
+};
+
+//#endregion
+//#region src/schema/nestedPaths.ts
+/**
+* Sets a nested schema value using dot notation path.
+* Builds nested z.object structures as needed.
+*
+* @param shape - The shape object to modify
+* @param path - Dot-notation path (e.g., 'source.name')
+* @param schema - Zod schema to set at the path
+*
+* @example
+* ```typescript
+* const shape = {};
+* setNestedSchema(shape, 'source.name', z.string());
+* // shape is now: { source: ZodObject({ name: ZodString }) }
+*
+* setNestedSchema(shape, 'source.email', z.string().email());
+* // shape is now: { source: ZodObject({ name: ZodString, email: ZodString }) }
+* ```
+*/
+const setNestedSchema = (shape, path, schema) => {
+	const parts = path.split(".");
+	if (parts.length === 1) {
+		shape[path] = schema;
+		return;
+	}
+	const [first, ...rest] = parts;
+	const remainingPath = rest.join(".");
+	if (!shape[first]) shape[first] = zod.z.object({});
+	const existingSchema = shape[first];
+	if (existingSchema instanceof zod.ZodObject) {
+		const innerShape = { ...existingSchema.shape };
+		setNestedSchema(innerShape, remainingPath, schema);
+		shape[first] = zod.z.object(innerShape);
+	} else {
+		const innerShape = {};
+		setNestedSchema(innerShape, remainingPath, schema);
+		shape[first] = zod.z.object(innerShape);
+	}
+};
+
+//#endregion
+//#region src/schema/generateSchema.ts
+/**
+* Extract all JSON Logic validation conditions from fields.
+*
+* @param fields - Array of field elements
+* @returns Array of field conditions to evaluate
+*/
+const collectConditions = (fields) => {
+	const conditions = [];
+	for (const field of fields) if (field.validation?.condition) conditions.push({
+		fieldPath: field.name,
+		condition: field.validation.condition,
+		message: field.validation.message || "Validation failed"
+	});
+	return conditions;
+};
+/**
+* Generate a Zod schema from form configuration.
+* Supports nested field paths via dot notation.
+*
+* This function is called once when the form initializes and the schema
+* is memoized. Visibility changes are handled at validation time, not
+* by regenerating the schema.
+*
+* @param config - Form configuration object
+* @returns Zod object schema for validating form data
+*
+* @example
+* ```typescript
+* const config = {
+*   elements: [
+*     { type: 'text', name: 'source.name', validation: { required: true } },
+*     { type: 'email', name: 'source.email' },
+*     { type: 'boolean', name: 'active' }
+*   ]
+* };
+*
+* const schema = generateZodSchema(config);
+*
+* // The generated schema is equivalent to:
+* // z.object({
+* //   source: z.object({
+* //     name: z.string().min(1, 'required'),
+* //     email: z.string().email()
+* //   }),
+* //   active: z.boolean()
+* // })
+*
+* schema.parse({
+*   source: { name: 'John', email: 'john@example.com' },
+*   active: true
+* }); // Valid
+* ```
+*/
+const generateZodSchema = (config) => {
+	const fields = flattenFields(config.elements);
+	const schemaShape = {};
+	for (const field of fields) {
+		const fieldSchema = buildFieldSchema(field);
+		setNestedSchema(schemaShape, field.name, fieldSchema);
+	}
+	let schema = zod.z.object(schemaShape);
+	const conditions = collectConditions(fields);
+	if (conditions.length > 0) schema = schema.superRefine((data, ctx) => {
+		for (const { fieldPath, condition, message } of conditions) if (!evaluateCondition(condition, data)) ctx.addIssue({
+			code: zod.z.ZodIssueCode.custom,
+			message,
+			path: fieldPath.split(".")
+		});
+	});
+	return schema;
+};
+/**
+* Extract field paths from a generated schema.
+* Returns all top-level and nested paths.
+*
+* @param schema - Generated Zod schema
+* @param prefix - Current path prefix (used in recursion)
+* @returns Array of all field paths
+*/
+const getSchemaFieldPaths = (schema, prefix = "") => {
+	const paths = [];
+	const shape = schema.shape;
+	for (const key in shape) if (Object.hasOwn(shape, key)) {
+		const fullPath = prefix ? `${prefix}.${key}` : key;
+		const fieldSchema = shape[key];
+		if (fieldSchema instanceof zod.ZodObject) paths.push(...getSchemaFieldPaths(fieldSchema, fullPath));
+		else paths.push(fullPath);
+	}
+	return paths;
+};
+
+//#endregion
+//#region src/DynamicForm.tsx
+const DynamicForm = ({ config, initialData, fieldComponents, customComponents = {}, customContainers = {}, onSubmit, onChange, onValidationChange, onReset, onError, mode = "onChange", invisibleFieldValidation = "skip", className, style, id, children, fieldWrapper, ref }) => {
+	const parsedConfig = (0, react.useMemo)(() => {
+		return validateCustomComponents(parseConfiguration(config), customComponents);
+	}, [config, customComponents]);
+	const zodSchema = (0, react.useMemo)(() => generateZodSchema(parsedConfig), [parsedConfig]);
+	const defaultValues = (0, react.useMemo)(() => mergeDefaults(parsedConfig, initialData), [parsedConfig, initialData]);
+	const [visibility, setVisibility] = (0, react.useState)(() => calculateVisibility(parsedConfig.elements, defaultValues));
+	const visibilityRef = (0, react.useRef)(visibility);
+	visibilityRef.current = visibility;
+	const onChangeRef = (0, react.useRef)(onChange);
+	onChangeRef.current = onChange;
+	const form = (0, react_hook_form.useForm)({
+		defaultValues,
+		resolver: (0, react.useMemo)(() => createVisibilityAwareResolver({
+			schema: zodSchema,
+			getVisibility: () => visibilityRef.current,
+			invisibleFieldValidation
+		}), [zodSchema, invisibleFieldValidation]),
+		mode
+	});
+	(0, react.useImperativeHandle)(ref, () => ({
+		getValues: () => form.getValues(),
+		setValue: (name, value) => form.setValue(name, value),
+		watchAll: () => form.watch(),
+		watchField: (name) => form.watch(name),
+		reset: (values) => form.reset(values ?? defaultValues),
+		trigger: (name) => form.trigger(name)
+	}), [form, defaultValues]);
+	const dependencyMap = (0, react.useMemo)(() => buildDependencyMap(parsedConfig.elements), [parsedConfig]);
+	const previousValuesRef = (0, react.useRef)({});
+	(0, react.useEffect)(() => {
+		const handleDependencyReset = (fieldName, formValues) => {
+			const dependents = dependencyMap[fieldName];
+			if (!dependents) return;
+			const currentValue = getNestedValue(formValues, fieldName);
+			if (currentValue === getNestedValue(previousValuesRef.current, fieldName)) return;
+			setNestedValue(previousValuesRef.current, fieldName, currentValue);
+			for (const dep of dependents) {
+				const field = findFieldByName(parsedConfig.elements, dep);
+				if (field && field.resetOnParentChange !== false) form.setValue(dep, getFieldDefault(field));
+			}
+		};
+		const subscription = form.watch((values, { name }) => {
+			const formValues = values;
+			const newVisibility = calculateVisibility(parsedConfig.elements, formValues);
+			setVisibility((prev) => getUpdatedVisibility(prev, newVisibility));
+			if (!name) return;
+			handleDependencyReset(name, formValues);
+			onChangeRef.current?.(values, name);
+		});
+		return () => subscription.unsubscribe();
+	}, [
+		form,
+		parsedConfig,
+		dependencyMap
+	]);
+	const { errors: formErrors, isValid: formIsValid } = (0, react_hook_form.useFormState)({ control: form.control });
+	(0, react.useEffect)(() => {
+		if (!onValidationChange) return;
+		onValidationChange(formErrors, formIsValid);
+	}, [
+		formErrors,
+		formIsValid,
+		onValidationChange
+	]);
+	const contextValue = (0, react.useMemo)(() => ({
+		form,
+		config: parsedConfig,
+		fieldComponents,
+		customComponents,
+		customContainers,
+		visibility,
+		fieldWrapper
+	}), [
+		form,
+		parsedConfig,
+		fieldComponents,
+		customComponents,
+		customContainers,
+		visibility,
+		fieldWrapper
+	]);
+	const handleSubmit = form.handleSubmit(onSubmit, (errors) => onError?.(errors));
+	const handleReset = (0, react.useCallback)(() => {
+		form.reset(defaultValues);
+		onReset?.();
+	}, [
+		defaultValues,
+		onReset,
+		form
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
+		...form,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicFormContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className,
+				id,
+				noValidate: true,
+				onReset: handleReset,
+				onSubmit: handleSubmit,
+				style,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormRenderer, { elements: parsedConfig.elements }), children]
+			})
+		})
+	});
+};
+DynamicForm.displayName = "DynamicForm";
+var DynamicForm_default = DynamicForm;
+
+//#endregion
+exports.ConfigurationError = ConfigurationError;
+exports.DynamicForm = DynamicForm;
+exports.DynamicFormContext = DynamicFormContext;
+exports.applyJsonLogic = applyJsonLogic;
+exports.buildFieldSchema = buildFieldSchema;
+exports.calculateVisibility = calculateVisibility;
+exports.createVisibilityAwareResolver = createVisibilityAwareResolver;
+exports.default = DynamicForm_default;
+exports.defineCustomComponent = defineCustomComponent;
+exports.evaluateCondition = evaluateCondition;
+exports.flattenFields = flattenFields;
+exports.generateZodSchema = generateZodSchema;
+exports.getFieldNames = getFieldNames;
+exports.getNestedValue = getNestedValue;
+exports.getSchemaFieldPaths = getSchemaFieldPaths;
+exports.isArrayFieldElement = isArrayFieldElement;
+exports.isColumnElement = isColumnElement;
+exports.isContainerElement = isContainerElement;
+exports.isCustomFieldElement = isCustomFieldElement;
+exports.isFieldElement = isFieldElement;
+exports.mergeDefaults = mergeDefaults;
+exports.parseConfiguration = parseConfiguration;
+exports.safeParseConfiguration = safeParseConfiguration;
+exports.setNestedValue = setNestedValue;
+exports.useDynamicFormContext = useDynamicFormContext;
+exports.useDynamicFormContextSafe = useDynamicFormContextSafe;