dynamic-formik-form 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,952 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FormikProps, FormikValues } from 'formik';
+import { ObjectSchema } from 'yup';
+import React$1, { ComponentType, ReactNode } from 'react';
+
+/**
+ * Icon component interface
+ * Allows any icon library to be used
+ */
+type IconComponent = ComponentType<{
+    className?: string;
+    size?: string | number;
+    [key: string]: unknown;
+}>;
+/**
+ * Icon library configuration
+ */
+interface IconLibrary {
+    Info: IconComponent;
+    Visibility: IconComponent;
+    VisibilityOff: IconComponent;
+    Copy: IconComponent;
+    Add: IconComponent;
+    Delete: IconComponent;
+    [key: string]: IconComponent;
+}
+/**
+ * Base UI component props that all UI libraries must support
+ */
+interface BaseUIComponentProps {
+    className?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * UI Library Adapter Interface
+ * Each UI library (MUI, Bootstrap, etc.) must implement this interface
+ */
+interface UILibraryAdapter {
+    Input: ComponentType<BaseUIComponentProps & {
+        type?: string;
+        name: string;
+        value: string | number;
+        placeholder?: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+        autoComplete?: string;
+        readOnly?: boolean;
+    }>;
+    Textarea: ComponentType<BaseUIComponentProps & {
+        name: string;
+        value: string;
+        placeholder?: string;
+        rows?: number;
+        onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    }>;
+    Select: ComponentType<BaseUIComponentProps & {
+        name: string;
+        value: string | number;
+        onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLSelectElement>) => void;
+        children: ReactNode;
+    }>;
+    Checkbox: ComponentType<BaseUIComponentProps & {
+        name: string;
+        checked: boolean;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        label?: ReactNode;
+    }>;
+    Radio: ComponentType<BaseUIComponentProps & {
+        name: string;
+        value: string | number;
+        checked: boolean;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        label?: ReactNode;
+    }>;
+    Switch: ComponentType<BaseUIComponentProps & {
+        name: string;
+        checked: boolean;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    }>;
+    Button: ComponentType<BaseUIComponentProps & {
+        type?: 'button' | 'submit' | 'reset';
+        onClick?: () => void;
+        children: ReactNode;
+        variant?: string;
+    }>;
+    FormControl: ComponentType<{
+        className?: string;
+        required?: boolean;
+        error?: boolean;
+        children: ReactNode;
+    }>;
+    FormHelperText: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+    Label: ComponentType<{
+        htmlFor?: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    Box: ComponentType<{
+        className?: string;
+        sx?: Record<string, unknown>;
+        children?: ReactNode;
+        [key: string]: unknown;
+    }>;
+    Paper: ComponentType<{
+        className?: string;
+        elevation?: number;
+        children: ReactNode;
+    }>;
+    Popover: ComponentType<{
+        open: boolean;
+        anchorEl: HTMLElement | null;
+        onClose: () => void;
+        anchorOrigin?: {
+            vertical: string;
+            horizontal: string;
+        };
+        children: ReactNode;
+    }>;
+    MenuItem: ComponentType<{
+        className?: string;
+        onClick: () => void;
+        children: ReactNode;
+    }>;
+    Typography: ComponentType<{
+        className?: string;
+        variant?: string;
+        color?: string;
+        children: ReactNode;
+    }>;
+    IconButton: ComponentType<{
+        className?: string;
+        size?: 'small' | 'medium' | 'large';
+        onClick?: () => void;
+        children: ReactNode;
+        [key: string]: unknown;
+    }>;
+    DatePicker?: ComponentType<{
+        value: unknown;
+        onChange: (value: unknown) => void;
+        format?: string;
+        disabled?: boolean;
+        [key: string]: unknown;
+    }>;
+    DateTimePicker?: ComponentType<{
+        value: unknown;
+        onChange: (value: unknown) => void;
+        format?: string;
+        disabled?: boolean;
+        views?: string[];
+        [key: string]: unknown;
+    }>;
+    TextField?: ComponentType<{
+        inputRef?: React.Ref<HTMLInputElement>;
+        inputProps?: Record<string, unknown>;
+        label?: string;
+        id?: string;
+        error?: boolean;
+        helperText?: string;
+        [key: string]: unknown;
+    }>;
+}
+/**
+ * UI Library configuration
+ */
+interface UILibraryConfig {
+    adapter: UILibraryAdapter;
+    icons?: IconLibrary;
+    name: string;
+}
+
+/**
+ * Field type definitions matching production code
+ */
+type FieldType = 'inputfield' | 'editablediv' | 'multiSelect' | 'singleSelect' | 'asyncSelect' | 'fieldArray' | 'emptyField' | 'attribute' | 'toggle' | 'component' | 'link' | 'radiobtn' | 'textarea' | 'checkbox' | 'text' | 'fileupload' | 'dropdown' | 'delete' | 'dateTimePicker' | 'counter' | 'custom' | 'datePicker';
+/**
+ * Base field configuration shared by all field types
+ */
+interface BaseFieldConfig {
+    name: string;
+    type: FieldType;
+    label?: string;
+    placeholder?: string;
+    desc?: string;
+    info?: string;
+    required?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    readonly?: boolean;
+    customClass?: string;
+    customLabelClass?: string;
+    customComponentClass?: string;
+    customDescClass?: string;
+    customAttrClass?: string;
+    dataTestId?: string;
+    noIndent?: boolean;
+    showOptional?: boolean;
+    isButtonVisible?: boolean;
+    showCustomError?: boolean;
+    shouldHide?: (params: {
+        formik: FormikProps<Record<string, unknown>>;
+        name: string;
+        index?: number;
+    }) => boolean;
+    child?: FieldConfig[];
+    hiddenlabel?: string;
+    targetType?: string;
+    component?: ReactNode;
+    blockComponent?: ReactNode;
+    customHandleChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, type: string, index?: number) => void;
+    customFormChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, type: string) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    onClickLink?: () => void;
+    isVisibleEnable?: boolean;
+    isCopyEnable?: boolean;
+    customIcon?: ReactNode;
+    ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    formik?: FormikProps<Record<string, unknown>>;
+    index?: number | string;
+    isChild?: boolean;
+    setFieldValuesRecursive?: (child: FieldConfig[], parentValue?: string) => void;
+}
+/**
+ * Input field specific configuration
+ */
+interface InputFieldConfig extends BaseFieldConfig {
+    type: 'inputfield';
+    fieldType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    autocomplete?: string;
+    min?: number;
+    max?: number;
+    suffix?: string;
+    ignoreChar?: boolean;
+}
+/**
+ * Select field specific configuration
+ */
+interface SelectFieldConfig extends BaseFieldConfig {
+    type: 'singleSelect' | 'multiSelect' | 'asyncSelect' | 'dropdown';
+    values?: Array<{
+        value: string | number;
+        label: string;
+        desc?: string;
+    }> | Record<string, string>;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    loaderCall?: (inputValue: string) => Promise<{
+        apps: unknown[];
+        error?: string;
+    }>;
+    headerKey?: string;
+    optionsLabel?: boolean;
+    disabledDropdownOption?: boolean;
+    disabledOptionText?: string;
+    searchField?: string;
+    resetChild?: boolean;
+    ignoreChar?: boolean;
+}
+/**
+ * Checkbox field configuration
+ */
+interface CheckboxFieldConfig extends BaseFieldConfig {
+    type: 'checkbox';
+    values?: Record<string, string>;
+}
+/**
+ * Radio field configuration
+ */
+interface RadioFieldConfig extends BaseFieldConfig {
+    type: 'radiobtn';
+    values?: Record<string, string>;
+}
+/**
+ * Textarea field configuration
+ */
+interface TextareaFieldConfig extends BaseFieldConfig {
+    type: 'textarea';
+    rows?: number;
+}
+/**
+ * File upload field configuration
+ */
+interface FileUploadFieldConfig extends BaseFieldConfig {
+    type: 'fileupload';
+}
+/**
+ * Date picker field configuration
+ */
+interface DatePickerFieldConfig extends BaseFieldConfig {
+    type: 'datePicker' | 'dateTimePicker';
+    dateFormat?: string;
+    disablePast?: boolean;
+    views?: string[];
+}
+/**
+ * Field array configuration
+ */
+interface FieldArrayConfig extends BaseFieldConfig {
+    type: 'fieldArray';
+    properties?: {
+        isKeyValue?: boolean;
+        keyPlaceholder?: string;
+        valuePlaceholder?: string;
+    };
+    buttonLabel?: string;
+    addNewFieldBtnLabel?: string;
+    minimumValuePresent?: boolean;
+    showAddNewFieldBtn?: boolean;
+}
+/**
+ * Attribute field configuration
+ */
+interface AttributeFieldConfig extends BaseFieldConfig {
+    type: 'attribute';
+    properties?: FieldConfig[];
+    addNewField?: Record<string, unknown>;
+    showIllustration?: boolean;
+    showAddNewFieldBtn?: boolean;
+    addNewFieldBtnLabel?: string;
+    minimumValuePresent?: boolean;
+}
+/**
+ * Editable div field configuration
+ */
+interface EditableDivFieldConfig extends BaseFieldConfig {
+    type: 'editablediv';
+    availableFields?: Array<{
+        key: string;
+        label: string;
+    }>;
+}
+/**
+ * Counter field configuration
+ */
+interface CounterFieldConfig extends BaseFieldConfig {
+    type: 'counter';
+    min?: number;
+    max?: number;
+    suffix?: string;
+}
+/**
+ * Union type for all field configurations
+ */
+type FieldConfig = InputFieldConfig | SelectFieldConfig | CheckboxFieldConfig | RadioFieldConfig | TextareaFieldConfig | FileUploadFieldConfig | DatePickerFieldConfig | FieldArrayConfig | AttributeFieldConfig | EditableDivFieldConfig | CounterFieldConfig | BaseFieldConfig;
+/**
+ * Props for the DynamicForm component
+ *
+ * NOTE: This component expects Formik to be passed as a prop (not wrapped internally)
+ * This matches the production usage pattern where Formik is managed externally
+ */
+interface DynamicFormProps<T extends FormikValues = FormikValues> {
+    fields: (FieldConfig | false)[];
+    formik: FormikProps<T>;
+    firstInitialValues?: T;
+    onUpdateFormFields?: (fields: FieldConfig[]) => void;
+    fieldCount?: number;
+    attributeFields?: FieldConfig[];
+    handleDeleteChange?: (count: number) => void;
+    customFormChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, type: string) => void;
+    RadiusTab?: boolean;
+    value?: number;
+    uiLibrary?: {
+        adapter: any;
+        icons?: IconLibrary;
+        name: string;
+    };
+}
+interface DynamicFormPropsWithFormik<T extends FormikValues = FormikValues> {
+    fields: FieldConfig[];
+    initialValues?: T;
+    validationSchema?: ObjectSchema<T>;
+    onSubmit: (values: T) => void | Promise<void>;
+}
+
+/**
+ * Default HTML adapter - uses native HTML elements
+ * This is a fallback when no UI library is provided
+ */
+declare const defaultAdapter: UILibraryAdapter;
+
+/**
+ * Material-UI Adapter Example
+ *
+ * This is an example adapter showing how to integrate Material-UI components.
+ * Users need to install @mui/material and @mui/x-date-pickers as peer dependencies.
+ *
+ * Usage:
+ * import { muiAdapter } from 'dynamic-formik-form/adapters/mui';
+ * import { muiIcons } from 'dynamic-formik-form/icons/mui';
+ *
+ * <DynamicForm
+ *   uiLibrary={{ adapter: muiAdapter, icons: muiIcons, name: 'mui' }}
+ *   ...
+ * />
+ */
+
+type MUIComponent = ComponentType<any>;
+/**
+ * Material-UI Adapter
+ *
+ * NOTE: This is a template. In actual usage, you would:
+ * 1. Install @mui/material, @mui/x-date-pickers as peer dependencies
+ * 2. Import actual MUI components
+ * 3. Map them to the adapter interface
+ */
+declare const createMUIAdapter: (Box: MUIComponent, Button: MUIComponent, Checkbox: MUIComponent, FormControl: MUIComponent, FormControlLabel: MUIComponent, FormHelperText: MUIComponent, IconButton: MUIComponent, MenuItem: MUIComponent, Paper: MUIComponent, Popover: MUIComponent, Radio: MUIComponent, RadioGroup: MUIComponent, Switch: MUIComponent, TextField: MUIComponent, Typography: MUIComponent, DatePicker?: MUIComponent, DateTimePicker?: MUIComponent) => UILibraryAdapter;
+
+/**
+ * Bootstrap React Adapter Example
+ *
+ * This is an example adapter showing how to integrate Bootstrap React components.
+ * Users need to install react-bootstrap or reactstrap as peer dependencies.
+ *
+ * Usage:
+ * import { bootstrapAdapter } from 'dynamic-formik-form/adapters/bootstrap';
+ * import { bootstrapIcons } from 'dynamic-formik-form/icons/bootstrap';
+ *
+ * <DynamicForm
+ *   uiLibrary={{ adapter: bootstrapAdapter, icons: bootstrapIcons, name: 'bootstrap' }}
+ *   ...
+ * />
+ */
+
+type BootstrapComponent = ComponentType<any>;
+/**
+ * Bootstrap Adapter
+ *
+ * NOTE: This is a template. In actual usage, you would:
+ * 1. Install react-bootstrap or reactstrap as peer dependencies
+ * 2. Import actual Bootstrap components
+ * 3. Map them to the adapter interface
+ */
+declare const createBootstrapAdapter: (Form: BootstrapComponent, FormControl: BootstrapComponent, FormLabel: BootstrapComponent, FormText: BootstrapComponent, FormCheck: BootstrapComponent, FormSelect: BootstrapComponent, ButtonComponent: BootstrapComponent, InputGroup: BootstrapComponent, OverlayTrigger: BootstrapComponent, Popover: BootstrapComponent, ListGroup: BootstrapComponent, ListGroupItem: BootstrapComponent) => UILibraryAdapter;
+
+/**
+ * Ant Design Adapter
+ *
+ * This adapter integrates Ant Design components with dynamic-formik-form.
+ * Users need to install antd as a peer dependency.
+ *
+ * Usage:
+ * import { createAntDesignAdapter } from 'dynamic-formik-form';
+ * import { Input, Button, Form, ... } from 'antd';
+ *
+ * const antdAdapter = createAntDesignAdapter(
+ *   Input, Button, Checkbox, Radio, Switch, Select, Form, Typography, Popover, DatePicker
+ * );
+ *
+ * <DynamicForm
+ *   uiLibrary={{ adapter: antdAdapter, icons: antdIcons, name: 'antd' }}
+ *   ...
+ * />
+ */
+
+type AntDComponent = ComponentType<any>;
+/**
+ * Ant Design Adapter Factory
+ *
+ * Creates an adapter for Ant Design components.
+ * Users pass their Ant Design component imports to this factory function.
+ */
+declare const createAntDesignAdapter: (Input: AntDComponent, Button: AntDComponent, Checkbox: AntDComponent, Radio: AntDComponent, Switch: AntDComponent, Select: AntDComponent, Form: AntDComponent, Typography: AntDComponent, Popover: AntDComponent, DatePicker?: AntDComponent, DateTimePicker?: AntDComponent, Space?: AntDComponent, Card?: AntDComponent) => UILibraryAdapter;
+
+declare const defaultIcons: IconLibrary;
+
+/**
+ * DynamicForm Component
+ *
+ * Orchestrator component that renders fields dynamically based on configuration.
+ * Supports conditional field rendering, child fields, and all production features.
+ */
+declare const DynamicForm: <T extends Record<string, unknown>>({ fields, formik, firstInitialValues, fieldCount, attributeFields, customFormChange, RadiusTab, uiLibrary, }: DynamicFormProps<T> & {
+    formik: FormikProps<T>;
+    uiLibrary?: {
+        adapter: typeof defaultAdapter;
+        icons?: typeof defaultIcons;
+        name: string;
+    };
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Material-UI Icons Example
+ *
+ * This shows how to use Material-UI icons with the library.
+ * Users need to install @mui/icons-material as a peer dependency.
+ *
+ * Usage:
+ * import { muiIcons } from 'dynamic-formik-form/icons/mui';
+ *
+ * <DynamicForm
+ *   uiLibrary={{ adapter: muiAdapter, icons: muiIcons, name: 'mui' }}
+ *   ...
+ * />
+ */
+
+/**
+ * Material-UI Icons
+ *
+ * NOTE: This is a template. In actual usage, you would:
+ * 1. Install @mui/icons-material as a peer dependency
+ * 2. Import actual MUI icons
+ * 3. Export them as IconLibrary
+ *
+ * Example:
+ * import {
+ *   Info as InfoIcon,
+ *   Visibility as VisibilityIcon,
+ *   VisibilityOff as VisibilityOffIcon,
+ *   ContentCopy as CopyIcon,
+ *   AddCircleOutline as AddIcon,
+ *   DeleteOutline as DeleteIcon,
+ * } from '@mui/icons-material';
+ *
+ * export const muiIcons: IconLibrary = {
+ *   Info: InfoIcon,
+ *   Visibility: VisibilityIcon,
+ *   VisibilityOff: VisibilityOffIcon,
+ *   Copy: CopyIcon,
+ *   Add: AddIcon,
+ *   Delete: DeleteIcon,
+ * };
+ */
+declare const createMUIIcons: (Info: React.ComponentType<any>, Visibility: React.ComponentType<any>, VisibilityOff: React.ComponentType<any>, Copy: React.ComponentType<any>, Add: React.ComponentType<any>, Delete: React.ComponentType<any>) => IconLibrary;
+
+/**
+ * Bootstrap Icons Example
+ *
+ * This shows how to use Bootstrap Icons with the library.
+ * Users can use react-bootstrap-icons or bootstrap-icons package.
+ *
+ * Usage:
+ * import { bootstrapIcons } from 'dynamic-formik-form/icons/bootstrap';
+ *
+ * <DynamicForm
+ *   uiLibrary={{ adapter: bootstrapAdapter, icons: bootstrapIcons, name: 'bootstrap' }}
+ *   ...
+ * />
+ */
+
+/**
+ * Bootstrap Icons
+ *
+ * NOTE: This is a template. In actual usage, you would:
+ * 1. Install react-bootstrap-icons or bootstrap-icons as a peer dependency
+ * 2. Import actual Bootstrap icons
+ * 3. Export them as IconLibrary
+ *
+ * Example with react-bootstrap-icons:
+ * import {
+ *   InfoCircle as InfoIcon,
+ *   Eye as VisibilityIcon,
+ *   EyeSlash as VisibilityOffIcon,
+ *   Clipboard as CopyIcon,
+ *   PlusCircle as AddIcon,
+ *   Trash as DeleteIcon,
+ * } from 'react-bootstrap-icons';
+ *
+ * export const bootstrapIcons: IconLibrary = {
+ *   Info: InfoIcon,
+ *   Visibility: VisibilityIcon,
+ *   VisibilityOff: VisibilityOffIcon,
+ *   Copy: CopyIcon,
+ *   Add: AddIcon,
+ *   Delete: DeleteIcon,
+ * };
+ */
+declare const createBootstrapIcons: (Info: React.ComponentType<any>, Visibility: React.ComponentType<any>, VisibilityOff: React.ComponentType<any>, Copy: React.ComponentType<any>, Add: React.ComponentType<any>, Delete: React.ComponentType<any>) => IconLibrary;
+
+/**
+ * Ant Design Icons
+ *
+ * This shows how to use Ant Design Icons with the library.
+ * Users can use @ant-design/icons package.
+ *
+ * Usage:
+ * import { createAntDesignIcons } from 'dynamic-formik-form';
+ * import {
+ *   InfoCircleOutlined as InfoIcon,
+ *   EyeOutlined as VisibilityIcon,
+ *   EyeInvisibleOutlined as VisibilityOffIcon,
+ *   CopyOutlined as CopyIcon,
+ *   PlusCircleOutlined as AddIcon,
+ *   DeleteOutlined as DeleteIcon,
+ * } from '@ant-design/icons';
+ *
+ * const antdIcons = createAntDesignIcons(
+ *   InfoIcon,
+ *   VisibilityIcon,
+ *   VisibilityOffIcon,
+ *   CopyIcon,
+ *   AddIcon,
+ *   DeleteIcon
+ * );
+ */
+
+/**
+ * Ant Design Icons Factory
+ *
+ * Creates an icon library configuration for Ant Design icons.
+ * Users pass their @ant-design/icons imports to this factory function.
+ */
+declare const createAntDesignIcons: (Info: React$1.ComponentType<any>, Visibility: React$1.ComponentType<any>, VisibilityOff: React$1.ComponentType<any>, Copy: React$1.ComponentType<any>, Add: React$1.ComponentType<any>, Delete: React$1.ComponentType<any>) => IconLibrary;
+
+interface FieldLabelProps {
+    name: string;
+    label?: string;
+    required?: boolean;
+    showOptional?: boolean;
+    info?: string;
+    htmlFor?: string;
+    className?: string;
+    customLabelClass?: string;
+}
+/**
+ * FieldLabel component
+ * Renders label with required indicator, optional text, and info tooltip
+ */
+declare const FieldLabel: React$1.FC<FieldLabelProps>;
+
+interface FieldDescriptionProps {
+    desc?: string;
+    className?: string;
+    customDescClass?: string;
+}
+/**
+ * FieldDescription component
+ * Renders field description/helper text
+ */
+declare const FieldDescription: React$1.FC<FieldDescriptionProps>;
+
+interface FieldErrorProps {
+    name: string;
+    error?: string;
+    touched?: boolean;
+    showCustomError?: boolean;
+    dataTestId?: string;
+    className?: string;
+}
+/**
+ * FieldError component
+ * Displays validation error messages
+ */
+declare const FieldError: React$1.FC<FieldErrorProps>;
+
+interface FieldWrapperProps {
+    children: ReactNode;
+    className?: string;
+    customClass?: string;
+    isChild?: boolean;
+    noIndent?: boolean;
+    hidden?: boolean;
+    index?: number | string;
+}
+/**
+ * FieldWrapper component
+ * Provides consistent styling and layout for field components
+ */
+declare const FieldWrapper: React$1.FC<FieldWrapperProps>;
+
+interface EmptyFieldProps extends BaseFieldConfig {
+    type: 'emptyField';
+}
+/**
+ * EmptyField Component
+ * Renders a hidden input field (useful for form state management)
+ */
+declare const EmptyField: React$1.FC<EmptyFieldProps>;
+
+interface TextFieldProps extends BaseFieldConfig {
+    type: 'text';
+    error?: string;
+}
+/**
+ * TextField Component
+ * Displays read-only text (not an input field)
+ */
+declare const TextField: React$1.FC<TextFieldProps>;
+
+interface LinkFieldProps extends BaseFieldConfig {
+    type: 'link';
+    onClickLink?: () => void;
+}
+/**
+ * LinkField Component
+ * Renders a clickable link/button field
+ */
+declare const LinkField: React$1.FC<LinkFieldProps>;
+
+interface ComponentFieldProps extends BaseFieldConfig {
+    type: 'component';
+    component?: React$1.ReactNode;
+    blockComponent?: React$1.ReactNode;
+}
+/**
+ * ComponentField Component
+ * Wrapper for custom components
+ */
+declare const ComponentField: React$1.FC<ComponentFieldProps>;
+
+interface CustomFieldProps extends BaseFieldConfig {
+    type: 'custom';
+    component?: React$1.ReactNode;
+}
+/**
+ * CustomField Component
+ * Custom field wrapper with label and description
+ */
+declare const CustomField: React$1.FC<CustomFieldProps>;
+
+/**
+ * InputField Component
+ * Renders text input fields with various types (text, email, password, etc.)
+ */
+declare const InputField: React$1.FC<InputFieldConfig>;
+
+/**
+ * TextareaField Component
+ * Renders a textarea input field
+ */
+declare const TextareaField: React$1.FC<TextareaFieldConfig>;
+
+/**
+ * CheckboxField Component
+ * Renders a checkbox input field
+ */
+declare const CheckboxField: React$1.FC<CheckboxFieldConfig>;
+
+/**
+ * RadioField Component
+ * Renders a radio button group
+ */
+declare const RadioField: React$1.FC<RadioFieldConfig>;
+
+/**
+ * DropdownField Component
+ * Renders a native HTML select dropdown
+ */
+declare const DropdownField: React$1.FC<SelectFieldConfig & {
+    type: 'dropdown';
+}>;
+
+interface ToggleFieldProps extends BaseFieldConfig {
+    type: 'toggle';
+}
+/**
+ * ToggleField Component
+ * Renders a switch/toggle component
+ */
+declare const ToggleField: React$1.FC<ToggleFieldProps>;
+
+/**
+ * FileUploadField Component
+ * Renders a file upload input field
+ */
+declare const FileUploadField: React$1.FC<FileUploadFieldConfig>;
+
+/**
+ * SingleSelectField Component
+ * Renders a single-select dropdown using react-select
+ *
+ * NOTE: This requires react-select as a peer dependency
+ * Users must install: npm install react-select
+ */
+declare const SingleSelectField: React$1.FC<SelectFieldConfig & {
+    type: 'singleSelect';
+}>;
+
+/**
+ * MultiSelectField Component
+ * Renders a multi-select dropdown using react-select
+ *
+ * NOTE: This requires react-select as a peer dependency
+ */
+declare const MultiSelectField: React$1.FC<SelectFieldConfig & {
+    type: 'multiSelect';
+}>;
+
+/**
+ * AsyncSelectField Component
+ * Renders an async-loading select dropdown using react-select/async
+ *
+ * NOTE: This requires react-select as a peer dependency
+ */
+declare const AsyncSelectField: React$1.FC<SelectFieldConfig & {
+    type: 'asyncSelect';
+}>;
+
+/**
+ * DatePickerField Component
+ * Renders a date picker component
+ *
+ * NOTE: This requires a date picker library (e.g., @mui/x-date-pickers, react-datepicker)
+ * Users must provide a DatePicker component in their UI adapter
+ */
+declare const DatePickerField: React$1.FC<DatePickerFieldConfig & {
+    type: 'datePicker';
+}>;
+
+/**
+ * DateTimePickerField Component
+ * Renders a date-time picker component
+ *
+ * NOTE: This requires a date-time picker library (e.g., @mui/x-date-pickers)
+ * Users must provide a DateTimePicker component in their UI adapter
+ */
+declare const DateTimePickerField: React$1.FC<DatePickerFieldConfig & {
+    type: 'dateTimePicker';
+}>;
+
+interface DeleteFieldProps extends BaseFieldConfig {
+    type: 'delete';
+    handleDeleteAttribute?: (name: string) => void;
+}
+/**
+ * DeleteField Component
+ * Renders a delete button/icon
+ */
+declare const DeleteField: React$1.FC<DeleteFieldProps>;
+
+/**
+ * CounterField Component
+ * Renders a counter component with increment/decrement buttons
+ *
+ * NOTE: This is a simplified version. Users can provide a custom Counter component
+ * via the component prop or extend the adapter
+ */
+declare const CounterField: React$1.FC<CounterFieldConfig>;
+
+/**
+ * FieldArrayField Component
+ * Renders dynamic array fields (key-value pairs or simple arrays)
+ */
+declare const FieldArrayField: React$1.FC<FieldArrayConfig>;
+
+/**
+ * AttributeField Component
+ * Renders complex nested attribute mapping fields
+ */
+declare const AttributeField: React$1.FC<AttributeFieldConfig & {
+    setFieldValuesRecursive?: (child: FieldConfig[], parentValue?: string) => void;
+    customFormChange?: (event: any, type: string) => void;
+}>;
+
+/**
+ * EditableDivField Component
+ * Renders a contentEditable div with field insertion capabilities
+ *
+ * This is a complex component that allows users to insert field references
+ * (like {{fieldName}}) into editable text content
+ */
+declare const EditableDivField: React$1.FC<EditableDivFieldConfig>;
+
+/**
+ * Formik utility functions extracted from production code
+ * These handle nested property access, error extraction, etc.
+ */
+/**
+ * Get nested property from object using dot notation or bracket notation
+ * Supports paths like "user.name" or "users[0].name"
+ */
+declare const getNestedProperty: (obj: Record<string, unknown> | undefined | null, path: string | undefined | null) => unknown;
+/**
+ * Alternative nested property getter (simpler version)
+ * Only supports dot notation
+ */
+declare const getNestedValueNew: (obj: Record<string, unknown> | undefined | null, path: string) => unknown;
+/**
+ * Extract field value from Formik values using nested path
+ */
+declare const getFieldValue: (formik: {
+    values: Record<string, unknown>;
+}, name: string) => unknown;
+/**
+ * Extract field error from Formik errors using nested path
+ */
+declare const getFieldError: (formik: {
+    errors: Record<string, unknown>;
+}, name: string) => string | undefined;
+/**
+ * Extract field touched state from Formik touched using nested path
+ */
+declare const getFieldTouched: (formik: {
+    touched: Record<string, unknown>;
+}, name: string) => boolean;
+
+/**
+ * Field utility functions
+ */
+/**
+ * Format string for use in data-testid attributes
+ * Converts camelCase, snake_case, and spaces to kebab-case
+ */
+declare const formatString: (inputStr: string | undefined | null, ignoreChar?: boolean) => string;
+/**
+ * Convert camelCase to kebab-case
+ */
+declare const camelToKebabCase: (str: string) => string;
+/**
+ * Sanitize label for CSS class names
+ */
+declare const sanitizeLabelForCSS: (label: string | undefined | null) => string;
+/**
+ * Check if value is blank (null, undefined, or empty string)
+ */
+declare const isBlank: (value: unknown) => boolean;
+/**
+ * Check if value is not blank
+ */
+declare const isNotBlank: (value: unknown) => boolean;
+
+/**
+ * Validation utility functions
+ */
+/**
+ * Validate email address
+ */
+declare const validateEmail: (email: string | undefined | null) => boolean;
+/**
+ * Validate URL
+ */
+declare const isValidUrl: (url: string | undefined | null) => boolean;
+/**
+ * Check if username is valid
+ */
+declare const checkValidUsername: (username: string, minLength: number, maxLength: number) => boolean;
+
+/**
+ * Form context that provides:
+ * - UI library adapter
+ * - Icon library
+ * - Formik instance
+ */
+interface FormContextValue {
+    uiLibrary: UILibraryConfig;
+    formik: FormikProps<Record<string, unknown>>;
+}
+interface FormProviderProps {
+    children: ReactNode;
+    uiLibrary: UILibraryConfig;
+    formik: FormikProps<Record<string, unknown>>;
+}
+declare const FormProvider: React$1.FC<FormProviderProps>;
+declare const useFormContext: () => FormContextValue;
+
+export { AsyncSelectField, AttributeField, type AttributeFieldConfig, type BaseFieldConfig, CheckboxField, type CheckboxFieldConfig, ComponentField, CounterField, type CounterFieldConfig, CustomField, DatePickerField, type DatePickerFieldConfig, DateTimePickerField, DeleteField, DropdownField, DynamicForm, type DynamicFormProps, type DynamicFormPropsWithFormik, EditableDivField, type EditableDivFieldConfig, EmptyField, type FieldArrayConfig, FieldArrayField, type FieldConfig, FieldDescription, FieldError, FieldLabel, type FieldType, FieldWrapper, FileUploadField, type FileUploadFieldConfig, FormProvider, type IconLibrary, InputField, type InputFieldConfig, LinkField, MultiSelectField, RadioField, type RadioFieldConfig, type SelectFieldConfig, SingleSelectField, TextField, TextareaField, type TextareaFieldConfig, ToggleField, type UILibraryAdapter, type UILibraryConfig, camelToKebabCase, checkValidUsername, createAntDesignAdapter, createAntDesignIcons, createBootstrapAdapter, createBootstrapIcons, createMUIAdapter, createMUIIcons, defaultAdapter, defaultIcons, formatString, getFieldError, getFieldTouched, getFieldValue, getNestedProperty, getNestedValueNew, isBlank, isNotBlank, isValidUrl, sanitizeLabelForCSS, useFormContext, validateEmail };