@k3-universe/react-kit 0.0.13 → 0.0.15

package/src/kit/builder/form/components/FormBuilderField.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
-import type { Control, FieldValues } from 'react-hook-form';
+import type { Control, FieldValues, Path } from 'react-hook-form';
 import { useController } from 'react-hook-form';
 import { cn } from '../../../../shadcn/lib/utils';
 import { Label } from '../../../../shadcn/ui/label';
-import type { FormBuilderFieldConfig } from './FormBuilder';
+import type { FormBuilderFieldConfig } from '../types';
 import {
   AutocompleteField,
   TextField,
@@ -27,29 +27,37 @@ import {
   ArrayField,
 } from './fields';
 
-export interface FormBuilderFieldProps {
-  field: FormBuilderFieldConfig;
-  control: Control<FieldValues>;
-  onChange?: (value: unknown) => void;
-  onFieldChange?: (name: string, value: unknown, allValues: Record<string, unknown>) => void;
+export interface FormBuilderFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>
+> {
+  field: FormBuilderFieldConfig<TFieldValues, TName>;
+  control: Control<TFieldValues>;
+  onChange?: (value: unknown, ...extras: unknown[]) => void;
+  onFieldChange?: (name: import('react-hook-form').Path<TFieldValues> | string, value: unknown, allValues: TFieldValues) => void;
   parentPath?: string;
 }
 
-export function FormBuilderField({ field, control, onChange, parentPath }: FormBuilderFieldProps) {
-  const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+export function FormBuilderField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>
+>({ field, control, onChange, parentPath }: FormBuilderFieldProps<TFieldValues, TName>) {
+  const fieldPath = parentPath ? `${parentPath}.${field.name}` : (field.name as string);
 
   const {
     field: controllerField,
     fieldState: { error },
-  } = useController({
-    name: fieldPath,
+  } = useController<TFieldValues>({
+    name: fieldPath as unknown as Path<TFieldValues>,
     control,
     disabled: field.disabled,
   });
 
-  const handleChange = useCallback((value: unknown) => {
+  const handleChange = useCallback((value: unknown, ...extras: unknown[]) => {
+    // Only patch the RHF value with the first argument (the canonical value)
     controllerField.onChange(value);
-    onChange?.(value);
+    // Forward any extra metadata upstream (e.g., option, raw)
+    onChange?.(value, ...extras);
   }, [controllerField, onChange]);
   const baseClassName = cn(
     error && 'border-destructive focus-visible:ring-destructive',
@@ -62,7 +70,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <AutocompleteField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -75,7 +83,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -86,7 +94,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <NumberField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -97,7 +105,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextareaField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -108,7 +116,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <SelectField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -119,7 +127,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <CheckboxField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -130,7 +138,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <SwitchField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -141,7 +149,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <RadioField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -152,7 +160,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -163,7 +171,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DatePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -174,7 +182,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -185,7 +193,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <MonthPickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -196,7 +204,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <MonthRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -207,7 +215,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TimePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -218,7 +226,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TimeRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -229,7 +237,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateTimePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -240,7 +248,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <DateTimeRangePickerField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -251,7 +259,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <FileField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -262,7 +270,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <ObjectField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -273,7 +281,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <ArrayField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}
@@ -284,7 +292,7 @@ export function FormBuilderField({ field, control, onChange, parentPath }: FormB
         return (
           <TextField
             field={field}
-            control={control}
+            control={control as unknown as Control<FieldValues>}
             fieldPath={fieldPath}
             value={controllerField.value}
             onChange={handleChange}

package/src/kit/builder/form/components/fields/AutocompleteField.tsx

@@ -5,7 +5,7 @@ import type { FieldRenderProps } from './types'
 export function AutocompleteField({ field, value, onChange, className }: FieldRenderProps) {
   const options: AutocompleteOption[] = (field.options ?? [])
     .filter((o): o is { label: string; value: string | number } => o.value !== null && o.value !== undefined)
-    .map(o => ({ label: o.label, value: o.value as string | number }))
+    .map(o => ({ label: o.label, value: o.value as string | number, raw: (o as unknown as AutocompleteOption).raw }))
 
   // Shape defaultValue according to single/multiple
   let defaultValueShaped: string | number | null | Array<string | number> | undefined = undefined
@@ -42,7 +42,7 @@ export function AutocompleteField({ field, value, onChange, className }: FieldRe
       initialSelectedOptions={field.initialSelectedOptions ?? null}
       loadSelected={field.loadSelected}
       value={field.multiple ? ((Array.isArray(value) ? value : (value ? [value] : [])) as Array<string | number>) : ((value as string | number | null) ?? null)}
-      onChange={(val) => onChange(val)}
+      onChange={(val, option, raw) => onChange(val, option, raw)}
       placeholder={field.placeholder}
       searchPlaceholder={field.searchPlaceholder}
       renderOption={field.renderOption}

package/src/kit/builder/form/components/fields/types.ts

@@ -1,12 +1,12 @@
 import type { Control, FieldValues } from 'react-hook-form'
-import type { FormBuilderFieldConfig } from '../FormBuilder'
+import type { FormBuilderFieldConfig } from '../../types'
 
 export interface FieldRenderProps {
-  field: FormBuilderFieldConfig
+  field: FormBuilderFieldConfig<any, any>
   control: Control<FieldValues>
   fieldPath: string
   value: unknown
-  onChange: (value: unknown) => void
+  onChange: (value: unknown, ...extras: unknown[]) => void
   className?: string
   disabled?: boolean
   errorMessage?: string

package/src/kit/builder/form/components/sectionNodes.tsx

@@ -0,0 +1,116 @@
+import type { FieldValues, Path, Control, UseFormGetValues } from 'react-hook-form'
+import type { SectionNode } from '../../section/types'
+import { FormBuilderField } from './FormBuilderField'
+import type { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../types'
+
+interface BuildSectionNodesOptions<TFieldValues extends FieldValues> {
+  sections: Array<FormBuilderSectionConfig<TFieldValues>>
+  control: Control<TFieldValues>
+  handleFieldDependencies: (
+    field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>
+  ) => { disabled?: boolean; hidden?: boolean } | Record<string, never>
+  handleFieldChange: (
+    field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>,
+    value: unknown,
+    ...extras: unknown[]
+  ) => void
+  onFieldChange?: (
+    name: Path<TFieldValues> | string,
+    value: unknown,
+    allValues: TFieldValues
+  ) => void
+  getValues: UseFormGetValues<TFieldValues>
+}
+
+export function buildSectionNodes<TFieldValues extends FieldValues>(
+  options: BuildSectionNodesOptions<TFieldValues>
+): SectionNode[] {
+  const {
+    sections,
+    control,
+    handleFieldDependencies,
+    handleFieldChange,
+    onFieldChange,
+    getValues,
+  } = options
+
+  const buildLeavesFromFields = (
+    fields?: Array<FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>>
+  ): SectionNode['children'] =>
+    (fields ?? [])
+      .map((field) => {
+        const fieldState = handleFieldDependencies(field)
+        if (field.hidden || fieldState.hidden) return null
+
+        const spanMd = Math.max(1, Math.min(12, field.gridCols ?? 1))
+
+        return {
+          key: field.name,
+          span: { base: 1, md: spanMd },
+          className: field.wrapperClassName,
+          hidden: field.hidden,
+          content: (
+            <FormBuilderField
+              key={field.name}
+              field={{
+                ...field,
+                disabled: field.disabled || fieldState.disabled,
+              }}
+              control={control}
+              onChange={(value, ...extras) => {
+                handleFieldChange(field, value, ...extras)
+                onFieldChange?.(field.name as Path<TFieldValues> | string, value, getValues())
+              }}
+              onFieldChange={onFieldChange}
+            />
+          ),
+        }
+      })
+      .filter(Boolean) as SectionNode['children']
+
+  const buildSectionNode = (
+    section: FormBuilderSectionConfig<TFieldValues>,
+    sectionIndex: number,
+  ): SectionNode => {
+    const baseNode: SectionNode = {
+      id: section.id ?? `section-${sectionIndex}`,
+      title: section.title,
+      subtitle: section.description,
+      variant: section.variant ?? 'plain',
+      className: section.className,
+      layout: section.layout ?? (section.tabs && section.tabs.length > 0 ? 'tabs' : 'grid'),
+      grid: section.grid ?? { cols: 1, mdCols: 2, gap: 'gap-4' },
+      flex: section.flex,
+      hidden: section.hidden,
+    }
+
+    if (baseNode.layout === 'tabs' && section.tabs && section.tabs.length > 0) {
+      baseNode.defaultTabId = section.defaultTabId ?? section.tabs[0]?.id
+      baseNode.tabsListClassName = section.tabsListClassName
+      baseNode.tabsContentClassName = section.tabsContentClassName
+      baseNode.tabs = section.tabs.map((tab, _tabIdx) => {
+        const nestedNodes = tab.sections.map((subSection, subIdx) => buildSectionNode(subSection, subIdx))
+        const containerNode: SectionNode = {
+          id: `${baseNode.id}-tab-${tab.id}`,
+          variant: 'plain',
+          layout: 'grid',
+          grid: section.grid ?? { cols: 1, mdCols: 2, gap: 'gap-4' },
+          children: nestedNodes,
+        }
+        return {
+          id: tab.id,
+          label: tab.label,
+          className: tab.className,
+          contentClassName: tab.contentClassName,
+          node: containerNode,
+        }
+      })
+      return baseNode
+    }
+
+    baseNode.children = buildLeavesFromFields(section.fields)
+    return baseNode
+  }
+
+  return sections.map((section, sectionIndex) => buildSectionNode(section, sectionIndex))
+}

package/src/kit/builder/form/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './types';

package/src/kit/builder/form/types.ts

@@ -0,0 +1,200 @@
+import type React from 'react'
+import type {
+  Control,
+  DeepPartial,
+  FieldValues,
+  Path,
+  UseFormGetValues,
+  UseFormReturn,
+  UseFormSetValue,
+  DefaultValues,
+} from 'react-hook-form'
+import type { z } from 'zod'
+import type { Accept } from 'react-dropzone'
+import type { SectionFlexOptions, SectionGridOptions, SectionLayout } from '../section/types'
+import type { AutocompleteFetcher, AutocompleteOption } from '../../components/autocomplete/types'
+import type { FileRecord, FileUploaderLayout } from '../../components/fileuploader/types'
+
+export type FieldType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'textarea'
+  | 'select'
+  | 'autocomplete'
+  | 'checkbox'
+  | 'switch'
+  | 'radio'
+  | 'date'
+  | 'date_picker'
+  | 'date_range'
+  | 'month'
+  | 'month_range'
+  | 'time'
+  | 'time_range'
+  | 'date_time'
+  | 'date_time_range'
+  | 'file'
+  | 'object'
+  | 'array'
+
+export interface Dependency<TFieldValues extends FieldValues> {
+  field: Path<TFieldValues>
+  condition: (value: unknown) => boolean
+  action: 'show' | 'hide' | 'enable' | 'disable' | 'setValue'
+  value?: unknown
+}
+
+export interface FormBuilderFieldConfig<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends Path<TFieldValues> | string = Path<TFieldValues>
+> {
+  id?: string
+  name: TName
+  label: string
+  type: FieldType
+  placeholder?: string
+  description?: string
+  required?: boolean
+  disabled?: boolean
+  options?: { label: string; value: string | number | null }[]
+  autocompleteMode?: 'client' | 'server'
+  fetcher?: AutocompleteFetcher
+  pageSize?: number
+  searchPlaceholder?: string
+  renderOption?: (option: AutocompleteOption, selected: boolean) => React.ReactNode
+  multiple?: boolean
+  allowCustomValue?: boolean
+  chipVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  chipClassName?: string
+  clearable?: boolean
+  initialSelectedOptions?: AutocompleteOption | AutocompleteOption[] | null
+  loadSelected?: (values: Array<string | number>) => Promise<AutocompleteOption[]>
+  validation?:
+    | z.ZodType<unknown>
+    | {
+        pattern?: { value: RegExp; message: string }
+        min?: { value: number; message: string }
+        max?: { value: number; message: string }
+        minLength?: { value: number; message: string }
+        maxLength?: { value: number; message: string }
+        minItems?: { value: number; message: string }
+        maxItems?: { value: number; message: string }
+      }
+  // Accept any for defaultValue to support relative string names for nested fields
+  defaultValue?: unknown
+  // For nested object/array fields, use relative names (eg. 'uomName')
+  fields?: Array<FormBuilderFieldConfig<TFieldValues, string>>
+  dependencies?: Array<Dependency<TFieldValues>>
+  onChange?: (
+    value: unknown,
+    extras: unknown,
+    setValue: UseFormSetValue<TFieldValues>,
+    getValues: UseFormGetValues<TFieldValues>
+  ) => void
+  className?: string
+  gridCols?: number
+  rows?: number
+  itemType?: string
+  arrayLayout?: 'card' | 'table' | 'custom'
+  arrayRender?: (params: {
+    field: FormBuilderFieldConfig<TFieldValues>
+    control: Control<TFieldValues>
+    fieldPath: string
+    value: unknown
+    onChange: (value: unknown) => void
+    addItem: () => void
+    removeItem: (index: number) => void
+    disabled?: boolean
+    rows?: { id: string }[]
+  }) => React.ReactNode
+  arrayColors?: {
+    headerBgClass?: string
+    headerTextClass?: string
+    rowAltBgClass?: string
+  }
+  conditional?: {
+    field: Path<TFieldValues>
+    value: unknown
+  }
+  hidden?: boolean
+  labelPlacement?: 'stacked' | 'inline' | 'hidden'
+  wrapperClassName?: string
+  minDate?: Date
+  maxDate?: Date
+  disabledDates?: Array<Date | { from: Date; to: Date }>
+  numberOfMonths?: number
+  popoverSide?: 'top' | 'right' | 'bottom' | 'left'
+  showFooter?: boolean
+  cancelLabel?: string
+  applyLabel?: string
+  timePrecision?: 'hour' | 'minute' | 'second'
+  hourCycle?: 12 | 24
+  minuteStep?: number
+  secondStep?: number
+  fileMultiple?: boolean
+  fileMaxFiles?: number
+  fileAccept?: Accept
+  fileLayout?: FileUploaderLayout
+  fileWithDownload?: boolean
+  fileUploader?: (file: File, onProgress: (pct: number) => void) => Promise<Partial<FileRecord>>
+  fileOnUploadSuccess?: (file: FileRecord) => void
+  fileOnUploadError?: (file: FileRecord, error: unknown) => void
+  fileOnRemove?: (file: FileRecord) => void | Promise<void>
+  fileOnRetry?: (file: FileRecord) => void
+  fileOnRetryAll?: (files: FileRecord[]) => void
+}
+
+export interface FormBuilderSectionConfig<TFieldValues extends FieldValues = FieldValues> {
+  id?: string
+  title?: string
+  description?: string
+  fields?: Array<FormBuilderFieldConfig<TFieldValues>>
+  variant?: 'card' | 'separator' | 'plain'
+  className?: string
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+  layout?: SectionLayout
+  grid?: SectionGridOptions
+  flex?: SectionFlexOptions
+  hidden?: boolean
+  tabs?: Array<{
+    id: string
+    label: React.ReactNode
+    sections: Array<FormBuilderSectionConfig<TFieldValues>>
+    className?: string
+    contentClassName?: string
+  }>
+  defaultTabId?: string
+  tabsListClassName?: string
+  tabsContentClassName?: string
+}
+
+export interface FormBuilderProps<TFieldValues extends FieldValues = FieldValues> {
+  sections: Array<FormBuilderSectionConfig<TFieldValues>>
+  schema?: z.ZodType<TFieldValues>
+  defaultValues?: DeepPartial<TFieldValues> | DefaultValues<TFieldValues> | null
+  onSubmit: (data: TFieldValues) => void | Promise<void>
+  onCancel?: () => void
+  onReset?: () => void
+  onFieldChange?: (
+    name: Path<TFieldValues> | string,
+    value: unknown,
+    allValues: TFieldValues
+  ) => void
+  submitLabel?: string
+  cancelLabel?: string
+  resetLabel?: string
+  isSubmitting?: boolean
+  className?: string
+  formClassName?: string
+  actionsClassName?: string
+  showActions?: boolean
+  customActions?: React.ReactNode
+  showActionsSeparator?: boolean
+  form?: UseFormReturn<TFieldValues>
+}
+
+// Re-export for external consumers that build custom section nodes
+export type { SectionNode } from '../section/types'

package/src/kit/builder/form/utils/common-forms.ts

@@ -1,4 +1,4 @@
-import { FormBuilderSectionConfig } from '../components/FormBuilder';
+import type { FormBuilderSectionConfig } from '../types';
 import { createField } from './field-factories';
 import { createSection } from './section-factories';
 import { commonValidations } from './validations';

package/src/kit/builder/form/utils/field-factories.ts

@@ -1,4 +1,4 @@
-import { FormBuilderFieldConfig } from '../components/FormBuilder';
+import type { FormBuilderFieldConfig } from '../types';
 import { commonValidations } from './validations';
 
 // Field factory functions
@@ -7,7 +7,7 @@ export const createField = {
     name: string,
     label: string,
     options: Partial<FormBuilderFieldConfig> = {},
-  ): FormBuilderFieldConfig => ({
+  ): FormBuilderFieldConfig<any> => ({
     name,
     label,
     type: 'text',
@@ -147,9 +147,9 @@ export const createField = {
   object: (
     name: string,
     label: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderFieldConfig> = {},
-  ): FormBuilderFieldConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderFieldConfig<any>> = {},
+  ): FormBuilderFieldConfig<any> => ({
     name,
     label,
     type: 'object',

package/src/kit/builder/form/utils/section-factories.ts

@@ -1,12 +1,12 @@
-import { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../components/FormBuilder';
+import type { FormBuilderFieldConfig, FormBuilderSectionConfig } from '../types';
 
 // Section factory functions
 export const createSection = {
   card: (
     title: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     title,
     fields,
     variant: 'card',
@@ -15,9 +15,9 @@ export const createSection = {
 
   separator: (
     title: string,
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     title,
     fields,
     variant: 'separator',
@@ -25,9 +25,9 @@ export const createSection = {
   }),
 
   plain: (
-    fields: FormBuilderFieldConfig[],
-    options: Partial<FormBuilderSectionConfig> = {},
-  ): FormBuilderSectionConfig => ({
+    fields: FormBuilderFieldConfig<any>[],
+    options: Partial<FormBuilderSectionConfig<any>> = {},
+  ): FormBuilderSectionConfig<any> => ({
     fields,
     variant: 'plain',
     ...options,