@classytic/formkit 1.0.3 → 1.2.0

package/dist/index.mjs

@@ -0,0 +1,1040 @@
+"use client";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/FormSystemContext.tsx
+const FormSystemContext = createContext(null);
+FormSystemContext.displayName = "FormSystemContext";
+/**
+* FormSystemProvider
+*
+* Root provider that enables the form system. Provides component and layout
+* registries to FormGenerator and its descendants.
+*
+* @example
+* ```tsx
+* import { FormSystemProvider } from '@classytic/formkit';
+*
+* const components = {
+*   text: TextInput,
+*   select: SelectInput,
+*   // Variant-specific components
+*   compact: {
+*     text: CompactTextInput,
+*   },
+* };
+*
+* const layouts = {
+*   section: SectionLayout,
+*   grid: GridLayout,
+* };
+*
+* function App() {
+*   return (
+*     <FormSystemProvider components={components} layouts={layouts}>
+*       <YourFormComponent />
+*     </FormSystemProvider>
+*   );
+* }
+* ```
+*/
+function FormSystemProvider({ components, layouts, children }) {
+	return /* @__PURE__ */ jsx(FormSystemContext, {
+		value: useMemo(() => ({
+			components: components ?? {},
+			layouts: layouts ?? {}
+		}), [components, layouts]),
+		children
+	});
+}
+/**
+* Hook to access the form system context.
+*
+* @throws {Error} If used outside FormSystemProvider
+* @returns Form system context value
+*
+* @example
+* ```tsx
+* const { components, layouts } = useFormSystem();
+* ```
+*/
+function useFormSystem() {
+	const context = useContext(FormSystemContext);
+	if (!context) throw new Error("[FormKit] useFormSystem must be used within a FormSystemProvider. Make sure to wrap your form components with <FormSystemProvider>.");
+	return context;
+}
+/**
+* Hook to get a field component by type and optional variant.
+*
+* Resolution order:
+* 1. Variant-specific component: `components[variant][type]`
+* 2. Type-specific component: `components[type]`
+* 3. Default component: `components["default"]`
+* 4. Text fallback: `components["text"]`
+*
+* @param type - Field type identifier
+* @param variant - Optional variant name
+* @returns Field component or fallback
+*
+* @internal
+*/
+function useFieldComponent(type, variant) {
+	const { components } = useFormSystem();
+	if (variant && typeof components[variant] === "object" && components[variant] !== null) {
+		const variantComponent = components[variant][type];
+		if (variantComponent) return variantComponent;
+	}
+	const typeComponent = components[type];
+	if (typeComponent && typeof typeComponent === "function") return typeComponent;
+	const defaultComponent = components["default"];
+	if (defaultComponent && typeof defaultComponent === "function") return defaultComponent;
+	const textComponent = components["text"];
+	if (textComponent && typeof textComponent === "function") return textComponent;
+	if (process.env.NODE_ENV !== "production") {
+		console.warn(`[FormKit] No component found for type "${type}"${variant ? ` (variant: "${variant}")` : ""}. Register a component for this type in your FormSystemProvider.`);
+		return MissingFieldComponent;
+	}
+	return NullComponent;
+}
+/**
+* Hook to get a layout component by type and optional variant.
+*
+* Resolution order:
+* 1. Variant-specific layout: `layouts[variant][type]`
+* 2. Type-specific layout: `layouts[type]`
+* 3. Default layout: `layouts["default"]`
+* 4. Built-in default layout
+*
+* @param type - Layout type identifier
+* @param variant - Optional variant name
+* @returns Layout component or fallback
+*
+* @internal
+*/
+function useLayoutComponent(type, variant) {
+	const { layouts } = useFormSystem();
+	if (variant && typeof layouts[variant] === "object" && layouts[variant] !== null) {
+		const variantLayout = layouts[variant][type];
+		if (variantLayout) return variantLayout;
+	}
+	const typeLayout = layouts[type];
+	if (typeLayout && typeof typeLayout === "function") return typeLayout;
+	const defaultLayout = layouts["default"];
+	if (defaultLayout && typeof defaultLayout === "function") return defaultLayout;
+	return DefaultLayout;
+}
+/**
+* Default layout component - simple div wrapper.
+* Used when no layout is registered.
+*/
+function DefaultLayout({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+/**
+* Null component for production fallback.
+*/
+function NullComponent() {
+	return null;
+}
+/**
+* Development placeholder for missing field components.
+*/
+function MissingFieldComponent({ field }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			color: "#dc2626",
+			padding: "8px 12px",
+			border: "1px dashed #dc2626",
+			borderRadius: "4px",
+			fontSize: "12px",
+			fontFamily: "monospace",
+			backgroundColor: "#fef2f2"
+		},
+		children: [
+			"Missing component: ",
+			/* @__PURE__ */ jsx("strong", { children: field.type }),
+			" (field: ",
+			field.name,
+			")"
+		]
+	});
+}
+
+//#endregion
+//#region src/utils.ts
+/**
+* Utility function to merge CSS classes with Tailwind CSS conflict resolution.
+*
+* Combines `clsx` for conditional class handling with `tailwind-merge`
+* for proper Tailwind CSS class conflict resolution.
+*
+* @param inputs - Class values to merge (strings, arrays, objects, or conditionals)
+* @returns Merged and deduplicated class string
+*
+* @example
+* ```tsx
+* // Basic usage
+* cn("px-2 py-1", "px-4") // "py-1 px-4"
+*
+* // Conditional classes
+* cn("base", isActive && "active", { "disabled": isDisabled })
+*
+* // Arrays
+* cn(["flex", "items-center"], "gap-2")
+* ```
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* Shallow equality check for arrays and primitives.
+* Used to stabilize useWatch output without JSON.stringify overhead.
+*/
+function shallowEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	if (Array.isArray(a) && Array.isArray(b)) {
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
+		return true;
+	}
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(a[key], b[key])) return false;
+	return true;
+}
+
+//#endregion
+//#region src/schema.ts
+/**
+* Resolves a dot-notation path against an object.
+* Handles array indices: "items.0.name" resolves through arrays correctly.
+*/
+function getNestedValue$1(obj, path) {
+	const parts = path.split(".");
+	let current = obj;
+	for (const part of parts) {
+		if (current == null || typeof current !== "object") return void 0;
+		if (Array.isArray(current)) {
+			const index = Number(part);
+			if (Number.isNaN(index)) return void 0;
+			current = current[index];
+		} else current = current[part];
+	}
+	return current;
+}
+/**
+* Evaluates a single condition rule against form values.
+* Supports both flat dotted keys ("address.city" as literal key) and
+* nested object resolution (values.address.city). Flat key takes priority
+* because DynamicFieldWrapper reconstructs watched values as flat keys.
+*/
+function evaluateRule(rule, formValues) {
+	const watchPath = rule.watch;
+	const obj = formValues;
+	const value = watchPath in obj ? obj[watchPath] : getNestedValue$1(obj, watchPath);
+	switch (rule.operator) {
+		case "===": return value === rule.value;
+		case "!==": return value !== rule.value;
+		case "in": return Array.isArray(rule.value) && rule.value.includes(value);
+		case "not-in": return Array.isArray(rule.value) && !rule.value.includes(value);
+		case "truthy": return Boolean(value);
+		case "falsy": return !value;
+		default: return false;
+	}
+}
+/**
+* Type guard: checks if a condition is a ConditionConfig (has `rules` array).
+*/
+function isConditionConfig(condition) {
+	return typeof condition === "object" && !Array.isArray(condition) && "rules" in condition;
+}
+/**
+* Extracts the rules array from any non-function condition shape.
+*/
+function toRules(condition) {
+	if (isConditionConfig(condition)) return {
+		rules: condition.rules,
+		logic: condition.logic ?? "and"
+	};
+	return {
+		rules: Array.isArray(condition) ? condition : [condition],
+		logic: "and"
+	};
+}
+/**
+* Evaluates a conditional rule, array of rules, or a ConditionConfig against form values.
+* Supports AND (default) and OR logic via ConditionConfig.
+*
+* @param condition - The condition function, rule(s), or config
+* @param formValues - The form values to evaluate against
+* @returns boolean indicating if condition matches
+*/
+function evaluateCondition(condition, formValues) {
+	if (!condition) return true;
+	if (typeof condition === "function") return condition(formValues);
+	const { rules, logic } = toRules(condition);
+	const evalFn = (rule) => evaluateRule(rule, formValues);
+	return logic === "or" ? rules.some(evalFn) : rules.every(evalFn);
+}
+/**
+* Extracts all watch names from a condition to optimize `useWatch`.
+* Handles single rules, arrays, and ConditionConfig objects.
+*/
+function extractWatchNames(condition) {
+	if (!condition || typeof condition === "function") return [];
+	const { rules } = toRules(condition);
+	return rules.map((r) => r.watch);
+}
+/**
+* Strictly types a comprehensive form schema, granting exact intellisense bounds across conditions and nested watches.
+*/
+function defineSchema(schema) {
+	return schema;
+}
+/**
+* Standard utility to strictly type a standalone field out-of-bounds, useful for externalizing massive schema structures.
+*/
+function defineField(field) {
+	return field;
+}
+/**
+* Standard utility to strictly type a standalone logic section layout block.
+*/
+function defineSection(section) {
+	return section;
+}
+/**
+* Extracts default values from a form schema.
+* Walks all sections and fields, respecting nameSpace prefixes and group nesting.
+*
+* @example
+* ```ts
+* const defaults = extractDefaultValues(schema);
+* const form = useForm({ defaultValues: defaults });
+* ```
+*/
+function extractDefaultValues(schema) {
+	const defaults = {};
+	for (const section of schema.sections) {
+		const prefix = section.nameSpace ? `${section.nameSpace}.` : "";
+		if (!section.fields) continue;
+		for (const field of section.fields) {
+			if (field.defaultValue !== void 0) defaults[`${prefix}${field.name}`] = field.defaultValue;
+			if (field.itemFields && field.type !== "array") {
+				for (const sub of field.itemFields) if (sub.defaultValue !== void 0) defaults[`${prefix}${field.name}.${sub.name}`] = sub.defaultValue;
+			}
+		}
+	}
+	return defaults;
+}
+/**
+* Generates react-hook-form `RegisterOptions`-compatible validation rules
+* from a field's schema props. Maps `required`, `min`, `max`, `minLength`,
+* `maxLength`, `pattern`, and `validate` to RHF rules.
+*
+* @example
+* ```tsx
+* import { buildValidationRules } from '@classytic/formkit';
+*
+* function FormInput({ field, control }: FieldComponentProps) {
+*   const rules = buildValidationRules(field);
+*   return <Controller name={field.name} control={control} rules={rules} render={...} />;
+* }
+* ```
+*/
+function buildValidationRules(field) {
+	const rules = {};
+	if (field.required) rules.required = `${field.label || field.name} is required`;
+	if (field.minLength !== void 0) rules.minLength = {
+		value: field.minLength,
+		message: `At least ${field.minLength} characters`
+	};
+	if (field.maxLength !== void 0) rules.maxLength = {
+		value: field.maxLength,
+		message: `At most ${field.maxLength} characters`
+	};
+	if (field.min !== void 0) rules.min = {
+		value: field.min,
+		message: `Must be at least ${field.min}`
+	};
+	if (field.max !== void 0) rules.max = {
+		value: field.max,
+		message: `Must be at most ${field.max}`
+	};
+	if (field.pattern) rules.pattern = {
+		value: new RegExp(field.pattern),
+		message: "Invalid format"
+	};
+	if (field.validate) rules.validate = field.validate;
+	return rules;
+}
+
+//#endregion
+//#region src/FormGenerator.tsx
+/** Generate a deterministic field ID for accessibility label-input association. */
+function toFieldId(name) {
+	return `formkit-field-${name.replace(/[.[\]]/g, "-")}`;
+}
+/**
+* Get nested value from an object using dot-notation path.
+* Handles array indices: "items.0.name" resolves through arrays correctly.
+*/
+function getNestedValue(obj, path) {
+	const parts = path.split(".");
+	let current = obj;
+	for (const part of parts) {
+		if (current == null || typeof current !== "object") return void 0;
+		if (Array.isArray(current)) {
+			const index = Number(part);
+			if (Number.isNaN(index)) return void 0;
+			current = current[index];
+		} else current = current[part];
+	}
+	return current;
+}
+/**
+* Get nested error from react-hook-form errors object.
+* Supports dot-notation paths like "address.street" and array paths like "items.0.name".
+*/
+function getNestedError(errors, path) {
+	const result = getNestedValue(errors, path);
+	if (result && typeof result === "object" && "message" in result) return result;
+}
+/**
+* Prefix field names with a namespace.
+* Memoization-friendly: returns the same shape for stable inputs.
+*/
+function prefixFields(fields, nameSpace) {
+	return fields.map((f) => ({
+		...f,
+		name: `${nameSpace}.${f.name}`,
+		itemFields: f.itemFields?.map((i) => ({
+			...i,
+			name: `${nameSpace}.${f.name}.${i.name}`
+		}))
+	}));
+}
+/**
+* FormGenerator - Headless Form Generator Component
+*
+* Renders a form based on a schema definition, using components registered
+* via FormSystemProvider. Supports conditional fields, dynamic layouts,
+* and component variants.
+*
+* @template TFieldValues - Form field values type for type safety
+*
+* @example
+* ```tsx
+* import { useFormKit, FormGenerator } from '@classytic/formkit';
+*
+* const { handleSubmit, generatorProps } = useFormKit({
+*   schema: formSchema,
+*   resolver: zodResolver(validationSchema),
+* });
+*
+* return (
+*   <form onSubmit={handleSubmit(onSubmit)}>
+*     <FormGenerator {...generatorProps} />
+*   </form>
+* );
+* ```
+*/
+function FormGenerator({ schema, control, disabled = false, variant, className, ref }) {
+	const formContext = useFormContext();
+	const activeControl = control ?? formContext?.control;
+	if (!activeControl) {
+		console.warn("[FormKit] FormGenerator requires a `control` prop or to be wrapped in a <FormProvider>.");
+		return null;
+	}
+	if (!schema?.sections || schema.sections.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("formkit-root", variant && `formkit-variant-${variant}`, className),
+		"data-formkit-root": "",
+		children: schema.sections.map((section, index) => /* @__PURE__ */ jsx(SectionRenderer, {
+			section,
+			control: activeControl,
+			disabled,
+			variant
+		}, section.id ?? `section-${index}`))
+	});
+}
+/**
+* Renders a single section with its fields.
+*/
+function SectionRenderer(props) {
+	if (props.section.condition) return /* @__PURE__ */ jsx(DynamicSectionRenderer, { ...props });
+	return /* @__PURE__ */ jsx(StaticSectionRenderer, { ...props });
+}
+/**
+* Section renderer that evaluates conditions reactively.
+* Scopes useWatch to only the fields referenced in the condition
+* to avoid re-rendering on every form change.
+*/
+function DynamicSectionRenderer(props) {
+	const conditionWatchNames = useMemo(() => extractWatchNames(props.section.condition), [props.section.condition]);
+	const watchedRaw = conditionWatchNames.length > 0 ? useWatch({
+		control: props.control,
+		name: conditionWatchNames
+	}) : useWatch({ control: props.control });
+	const sectionValues = useMemo(() => {
+		if (conditionWatchNames.length > 0 && Array.isArray(watchedRaw)) return conditionWatchNames.reduce((acc, name, i) => ({
+			...acc,
+			[name]: watchedRaw[i]
+		}), {});
+		return watchedRaw;
+	}, [conditionWatchNames, watchedRaw]);
+	if (!evaluateCondition(props.section.condition, sectionValues)) return null;
+	return /* @__PURE__ */ jsx(StaticSectionRenderer, { ...props });
+}
+function StaticSectionRenderer({ section, control, disabled, variant }) {
+	const activeVariant = section.variant ?? variant;
+	const SectionLayout = useLayoutComponent("section", activeVariant);
+	const resolvedFields = useMemo(() => {
+		if (section.nameSpace && section.fields) return prefixFields(section.fields, section.nameSpace);
+		return section.fields;
+	}, [section.nameSpace, section.fields]);
+	return /* @__PURE__ */ jsx(SectionLayout, {
+		title: section.title,
+		description: section.description,
+		icon: section.icon,
+		variant: activeVariant,
+		className: section.className,
+		collapsible: section.collapsible,
+		defaultCollapsed: section.defaultCollapsed,
+		children: section.render ? section.render({
+			control,
+			disabled,
+			section
+		}) : /* @__PURE__ */ jsx(GridRenderer, {
+			fields: resolvedFields,
+			cols: section.cols,
+			gap: section.gap,
+			control,
+			disabled,
+			variant: activeVariant
+		})
+	});
+}
+/**
+* Renders a grid of fields with specified column layout.
+*/
+function GridRenderer({ fields, cols = 1, gap, control, disabled, variant }) {
+	const GridLayout = useLayoutComponent("grid", variant);
+	if (!fields || fields.length === 0) return null;
+	return /* @__PURE__ */ jsx(GridLayout, {
+		cols,
+		gap,
+		children: fields.map((field, index) => /* @__PURE__ */ jsx(FieldWrapper, {
+			field,
+			control,
+			disabled,
+			variant
+		}, field.name || `field-${index}`))
+	});
+}
+/**
+* Wraps individual fields.
+* If the field requires conditional logic or dynamic options, it uses the Dynamic wrapper.
+* Otherwise, it uses the Static wrapper, vastly improving performance by skipping `useWatch`.
+*/
+function FieldWrapper(props) {
+	if (props.field.condition || props.field.loadOptions) return /* @__PURE__ */ jsx(DynamicFieldWrapper, { ...props });
+	return /* @__PURE__ */ jsx(StaticFieldWrapper, { ...props });
+}
+/**
+* Dynamic Field Wrapper
+* Conditionally calls `useWatch` to trigger re-renders only when form values change.
+* Can be optimized further by providing `watchNames` on the field.
+*/
+function DynamicFieldWrapper({ field, control, disabled, variant }) {
+	const ruleWatchNames = useMemo(() => extractWatchNames(field.condition), [field.condition]);
+	const explicitWatchNames = useMemo(() => {
+		if (Array.isArray(field.watchNames)) return field.watchNames;
+		if (field.watchNames) return [field.watchNames];
+		return [];
+	}, [field.watchNames]);
+	const allWatchNamesRef = useRef([]);
+	const allWatchNames = useMemo(() => {
+		const next = Array.from(new Set([...explicitWatchNames, ...ruleWatchNames]));
+		if (next.length === allWatchNamesRef.current.length && next.every((n, i) => n === allWatchNamesRef.current[i])) return allWatchNamesRef.current;
+		allWatchNamesRef.current = next;
+		return next;
+	}, [explicitWatchNames, ruleWatchNames]);
+	const watchedRaw = allWatchNames.length > 0 ? useWatch({
+		control,
+		name: allWatchNames
+	}) : useWatch({ control });
+	const prevWatchedRef = useRef(watchedRaw);
+	const stableWatched = useMemo(() => {
+		if (shallowEqual(prevWatchedRef.current, watchedRaw)) return prevWatchedRef.current;
+		prevWatchedRef.current = watchedRaw;
+		return watchedRaw;
+	}, [watchedRaw]);
+	const watchedValues = useMemo(() => {
+		if (allWatchNames.length > 0 && Array.isArray(stableWatched)) return allWatchNames.reduce((acc, name, i) => ({
+			...acc,
+			[name]: stableWatched[i]
+		}), {});
+		return stableWatched;
+	}, [allWatchNames, stableWatched]);
+	const [options, setOptions] = useState(field.options || []);
+	const [isLoading, setIsLoading] = useState(false);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		if (!field.loadOptions) return;
+		let isActive = true;
+		const executeLoad = () => {
+			const res = field.loadOptions(watchedValues);
+			if (res instanceof Promise) {
+				setIsLoading(true);
+				res.then((newOptions) => {
+					if (isActive) setOptions(newOptions);
+				}).catch((err) => {
+					if (isActive) if (field.onLoadError) field.onLoadError(err);
+					else console.error("[FormKit] loadOptions error:", err);
+				}).finally(() => {
+					if (isActive) setIsLoading(false);
+				});
+			} else {
+				setOptions(res);
+				setIsLoading(false);
+			}
+		};
+		if (field.debounceMs && field.debounceMs > 0) {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+			timeoutRef.current = setTimeout(executeLoad, field.debounceMs);
+		} else executeLoad();
+		return () => {
+			isActive = false;
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [
+		watchedValues,
+		field.loadOptions,
+		field.debounceMs,
+		field.onLoadError
+	]);
+	const loadingState = field.loadOptions ? isLoading : void 0;
+	const dynamicField = useMemo(() => ({
+		...field,
+		options: field.loadOptions ? options : field.options,
+		isLoading: loadingState
+	}), [
+		field,
+		options,
+		loadingState
+	]);
+	if (!evaluateCondition(field.condition, watchedValues)) return null;
+	return /* @__PURE__ */ jsx(StaticFieldWrapper, {
+		field: dynamicField,
+		control,
+		disabled,
+		variant,
+		isLoading: loadingState
+	});
+}
+/**
+* Static Field Wrapper
+* Handles rendering the actual component via the registry, or via a custom static `render`.
+* Does not use `useWatch` internally.
+*/
+function StaticFieldWrapper({ field, control, disabled, variant, isLoading }) {
+	const { components } = useFormSystem();
+	const fieldName = field.name;
+	const { errors, dirtyFields, touchedFields } = useFormState({
+		control,
+		name: fieldName
+	});
+	const isDisabled = disabled || field.disabled;
+	const fieldId = toFieldId(fieldName);
+	const fieldError = getNestedError(errors, fieldName);
+	const isDirty = Boolean(getNestedValue(dirtyFields, fieldName));
+	const isTouched = Boolean(getNestedValue(touchedFields, fieldName));
+	const fieldState = useMemo(() => ({
+		invalid: !!fieldError,
+		isDirty,
+		isTouched,
+		isValidating: false,
+		error: fieldError
+	}), [
+		fieldError,
+		isDirty,
+		isTouched
+	]);
+	const activeVariant = field.variant ?? variant;
+	if (field.render) return /* @__PURE__ */ jsx("div", {
+		className: cn("formkit-field", field.fullWidth && "col-span-full", field.className),
+		id: fieldId,
+		"data-formkit-field": fieldName,
+		"data-field-type": field.type,
+		children: field.render({
+			...field,
+			field,
+			control,
+			disabled: isDisabled,
+			variant: activeVariant,
+			error: fieldError,
+			fieldState,
+			fieldId,
+			isLoading
+		})
+	});
+	if (!Boolean(components[field.type] || activeVariant && components[activeVariant] && typeof components[activeVariant] === "object" && components[activeVariant][field.type]) && field.itemFields && field.itemFields.length > 0) {
+		if (field.type === "array") return /* @__PURE__ */ jsx(ArrayFieldFallback, {
+			field,
+			control,
+			disabled: isDisabled,
+			variant: activeVariant
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("formkit-field-group", field.fullWidth && "col-span-full", field.className),
+			"data-formkit-field": fieldName,
+			"data-field-type": field.type,
+			children: /* @__PURE__ */ jsx(GridRenderer, {
+				fields: field.itemFields,
+				control,
+				disabled: isDisabled,
+				variant: activeVariant
+			})
+		});
+	}
+	const FieldComponent = useFieldComponent(field.type, activeVariant);
+	if (!FieldComponent) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("formkit-field", field.fullWidth && "col-span-full", field.className),
+		id: fieldId,
+		"data-formkit-field": fieldName,
+		"data-field-type": field.type,
+		children: /* @__PURE__ */ jsx(FieldComponent, {
+			...field,
+			field,
+			control,
+			disabled: isDisabled,
+			variant: activeVariant,
+			error: fieldError,
+			fieldState,
+			fieldId,
+			isLoading
+		})
+	});
+}
+function ArrayFieldFallback({ field, control, disabled, variant }) {
+	const { fields, append, remove } = useFieldArray({
+		control,
+		name: field.name
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("formkit-field-array flex flex-col gap-4", field.fullWidth && "col-span-full", field.className),
+		"data-formkit-field": field.name,
+		"data-field-type": "array",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between",
+				children: field.label && /* @__PURE__ */ jsx("label", {
+					className: "font-semibold",
+					children: field.label
+				})
+			}),
+			fields.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				className: "relative formkit-array-item border p-4 rounded-md",
+				children: [/* @__PURE__ */ jsx(GridRenderer, {
+					fields: field.itemFields?.map((f) => ({
+						...f,
+						name: `${field.name}.${index}.${f.name}`
+					})),
+					control,
+					disabled,
+					variant
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => remove(index),
+					className: "absolute top-2 right-2 text-red-500 hover:text-red-700 text-sm font-medium",
+					children: "Remove"
+				})]
+			}, item.id)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => append({}),
+				disabled,
+				className: "self-start mt-2 px-4 py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100 disabled:opacity-50",
+				children: "+ Add Item"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/builders.ts
+/**
+* Type-safe field builder helpers for schema-driven forms.
+*
+* Provides shorthand methods for common field types with sensible defaults,
+* reducing boilerplate while maintaining full type safety.
+*
+* @example
+* ```ts
+* import { field, section } from '@classytic/formkit';
+*
+* const schema = {
+*   sections: [
+*     section("personal", "Personal Info", [
+*       field.text("firstName", "First Name", { required: true }),
+*       field.email("email", "Email"),
+*       field.select("role", "Role", [
+*         { label: "Admin", value: "admin" },
+*         { label: "User", value: "user" },
+*       ]),
+*     ], { cols: 2 }),
+*   ],
+* };
+* ```
+*/
+const field = {
+	text: (name, label, props = {}) => ({
+		type: "text",
+		name,
+		label,
+		...props
+	}),
+	email: (name, label, props = {}) => ({
+		type: "email",
+		name,
+		label,
+		placeholder: "example@email.com",
+		...props
+	}),
+	url: (name, label, props = {}) => ({
+		type: "url",
+		name,
+		label,
+		placeholder: "https://example.com",
+		...props
+	}),
+	tel: (name, label, props = {}) => ({
+		type: "tel",
+		name,
+		label,
+		placeholder: "+1 (555) 000-0000",
+		...props
+	}),
+	password: (name, label, props = {}) => ({
+		type: "password",
+		name,
+		label,
+		...props
+	}),
+	number: (name, label, props = {}) => ({
+		type: "number",
+		name,
+		label,
+		min: 0,
+		...props
+	}),
+	textarea: (name, label, props = {}) => ({
+		type: "textarea",
+		name,
+		label,
+		rows: 3,
+		...props
+	}),
+	select: (name, label, options, props = {}) => ({
+		type: "select",
+		name,
+		label,
+		options,
+		...props
+	}),
+	combobox: (name, label, options, props = {}) => ({
+		type: "combobox",
+		name,
+		label,
+		options,
+		...props
+	}),
+	multiselect: (name, label, options, props = {}) => ({
+		type: "multiselect",
+		name,
+		label,
+		options,
+		placeholder: "Select options...",
+		...props
+	}),
+	dependentSelect: (name, label, props = {}) => ({
+		type: "dependentSelect",
+		name,
+		label,
+		...props
+	}),
+	switch: (name, label, props = {}) => ({
+		type: "switch",
+		name,
+		label,
+		...props
+	}),
+	boolean: (name, label, props = {}) => ({
+		type: "switch",
+		name,
+		label,
+		...props
+	}),
+	checkbox: (name, label, props = {}) => ({
+		type: "checkbox",
+		name,
+		label,
+		...props
+	}),
+	radio: (name, label, options, props = {}) => ({
+		type: "radio",
+		name,
+		label,
+		options,
+		...props
+	}),
+	date: (name, label, props = {}) => ({
+		type: "date",
+		name,
+		label,
+		...props
+	}),
+	tags: (name, label, props = {}) => ({
+		type: "tags",
+		name,
+		label,
+		placeholder: "Add tags...",
+		...props
+	}),
+	slug: (name, label, props = {}) => ({
+		type: "slug",
+		name,
+		label,
+		placeholder: "my-page-slug",
+		...props
+	}),
+	file: (name, label, props = {}) => ({
+		type: "file",
+		name,
+		label,
+		...props
+	}),
+	hidden: (name, props = {}) => ({
+		type: "hidden",
+		name,
+		...props
+	}),
+	group: (name, label, itemFields, props = {}) => ({
+		type: "group",
+		name,
+		label,
+		itemFields,
+		...props
+	}),
+	array: (name, label, itemFields, props = {}) => ({
+		type: "array",
+		name,
+		label,
+		itemFields,
+		...props
+	}),
+	custom: (name, label, render, props = {}) => ({
+		type: "custom",
+		name,
+		label,
+		render,
+		...props
+	})
+};
+/**
+* Create a section definition with sensible defaults.
+*
+* @param id - Unique section identifier
+* @param title - Section title
+* @param fields - Array of field definitions
+* @param props - Additional section configuration
+*
+* @example
+* ```ts
+* section("personal", "Personal Info", [
+*   field.text("name", "Name", { required: true }),
+*   field.email("email", "Email"),
+* ], { cols: 2, variant: "card" })
+* ```
+*/
+function section(id, title, fields, props = {}) {
+	const { cols = 2, ...rest } = props;
+	return {
+		id,
+		title,
+		fields,
+		cols,
+		...rest
+	};
+}
+/**
+* Create a section without a title (transparent section).
+* Useful for grouping fields without visual separation.
+*/
+function sectionUntitled(fields, props = {}) {
+	const { cols = 1, ...rest } = props;
+	return {
+		fields,
+		cols,
+		variant: "transparent",
+		...rest
+	};
+}
+
+//#endregion
+//#region src/useFormKit.ts
+/**
+* Convenience hook that combines schema default extraction with react-hook-form setup.
+* Returns all useForm methods plus ready-to-spread `generatorProps`.
+*
+* @example
+* ```tsx
+* const { handleSubmit, generatorProps } = useFormKit({
+*   schema: formSchema,
+*   resolver: zodResolver(validationSchema),
+* });
+*
+* return (
+*   <form onSubmit={handleSubmit(onSubmit)}>
+*     <FormGenerator {...generatorProps} />
+*     <button type="submit">Submit</button>
+*   </form>
+* );
+* ```
+*/
+function useFormKit(options) {
+	const { schema, disabled, variant, className, defaultValues, ...formOptions } = options;
+	const mergedDefaults = {
+		...extractDefaultValues(schema),
+		...typeof defaultValues === "object" && defaultValues !== null ? defaultValues : {}
+	};
+	const form = useForm({
+		...formOptions,
+		defaultValues: mergedDefaults
+	});
+	return {
+		...form,
+		generatorProps: {
+			schema,
+			control: form.control,
+			disabled,
+			variant,
+			className
+		}
+	};
+}
+
+//#endregion
+export { FieldWrapper, FormGenerator, FormSystemProvider, GridRenderer, SectionRenderer, buildValidationRules, cn, defineField, defineSchema, defineSection, evaluateCondition, extractDefaultValues, extractWatchNames, field, section, sectionUntitled, shallowEqual, useFieldComponent, useFormKit, useFormSystem, useLayoutComponent };
+//# sourceMappingURL=index.mjs.map