@openg2p/registry-widgets 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1306 @@
+import { z } from 'zod';
+import * as _reduxjs_toolkit from '@reduxjs/toolkit';
+import * as redux_thunk from 'redux-thunk';
+import * as redux from 'redux';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode } from 'react';
+import * as i18next from 'i18next';
+import i18next__default from 'i18next';
+export { default as i18n } from 'i18next';
+
+/**
+ * Widget data path can be a string (single path) or object (multi-path)
+ */
+type WidgetDataPath = string | Record<string, string>;
+/**
+ * Data source types
+ */
+type DataSourceType = 'static' | 'api' | 'schema';
+/**
+ * Static data source configuration
+ */
+interface StaticDataSource {
+    type: 'static';
+    options: Array<{
+        value: string | number;
+        label: string;
+    }>;
+}
+/**
+ * API data source configuration
+ */
+interface ApiDataSource {
+    type: 'api';
+    url: string;
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+    dependsOn?: string;
+    valueKey?: string;
+    labelKey?: string;
+    headers?: Record<string, string>;
+    body?: Record<string, any>;
+}
+/**
+ * Schema reference data source configuration
+ */
+interface SchemaDataSource {
+    type: 'schema';
+    path: string;
+    valueKey?: string;
+    labelKey?: string;
+}
+type DataSource = StaticDataSource | ApiDataSource | SchemaDataSource;
+/**
+ * Allowed character types for text input
+ */
+type CharacterType = 'any' | 'alphabetic' | 'alphanumeric' | 'numeric' | 'numeric-decimal' | 'custom';
+/**
+ * Case control options
+ */
+type CaseControl = 'none' | 'lowercase' | 'uppercase' | 'capitalize';
+/**
+ * Input mask configuration
+ */
+interface InputMask {
+    pattern: string;
+    type?: 'static' | 'phone' | 'national-id' | 'custom';
+    placeholder?: string;
+}
+/**
+ * Validation type options for common patterns
+ */
+type ValidationType = 'email' | 'phone' | 'url';
+/**
+ * Validation configuration
+ */
+interface WidgetValidation {
+    required?: boolean;
+    validationType?: ValidationType;
+    pattern?: string;
+    patternMessage?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    custom?: string;
+    zodSchema?: z.ZodSchema;
+}
+/**
+ * Numeric type options
+ */
+type NumericType = 'integer' | 'decimal';
+/**
+ * Rounding mode for decimal numbers
+ */
+type RoundingMode = 'round' | 'truncate';
+/**
+ * Text alignment options
+ */
+type TextAlign = 'left' | 'right';
+/**
+ * Boolean representation options
+ */
+type BooleanRepresentation = 'true-false' | 'yes-no' | 'on-off' | 'custom';
+/**
+ * Boolean control type options
+ */
+type BooleanControlType = 'checkbox' | 'radio' | 'toggle';
+/**
+ * Format configuration
+ */
+interface WidgetFormat {
+    dateFormat?: string;
+    currency?: string;
+    locale?: string;
+    decimals?: number;
+    pattern?: string;
+    inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'file';
+    characterType?: CharacterType;
+    customCharset?: string;
+    caseControl?: CaseControl;
+    mask?: InputMask;
+    showCharCounter?: boolean;
+    rows?: number;
+    numericType?: NumericType;
+    decimalPlaces?: number;
+    roundingMode?: RoundingMode;
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    textAlign?: TextAlign;
+    allowSigned?: boolean;
+    formatOnBlur?: boolean;
+    booleanRepresentation?: BooleanRepresentation;
+    booleanControlType?: BooleanControlType;
+    booleanTrueLabel?: string;
+    booleanFalseLabel?: string;
+    allowUnset?: boolean;
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    sortOptions?: boolean;
+    inputMethod?: 'picker' | 'manual' | 'hybrid';
+    dateConstraint?: 'any' | 'past-only' | 'future-only';
+    dateTimeFormat?: string;
+    dateTimeConstraint?: 'any' | 'past-only' | 'future-only';
+}
+/**
+ * Condition operators
+ */
+type ConditionOperator = 'equals' | 'notEquals' | 'notEmpty' | 'empty' | 'greaterThan' | 'lessThan' | 'contains' | 'notContains';
+/**
+ * Condition configuration
+ */
+interface WidgetCondition {
+    field: string;
+    operator: ConditionOperator;
+    value?: any;
+}
+/**
+ * Widget options for conditional behavior
+ */
+interface WidgetOptions {
+    action?: 'show' | 'hide' | 'enable' | 'disable';
+    condition?: WidgetCondition;
+    minDate?: string;
+    maxDate?: string;
+    showCalendar?: boolean;
+    [key: string]: any;
+}
+/**
+ * Base widget configuration
+ */
+interface BaseWidgetConfig {
+    widget: string;
+    'widget-type'?: 'input' | 'layout' | 'table' | 'group';
+    'widget-label'?: string;
+    'widget-id': string;
+    'widget-orientation'?: 'horizontal' | 'vertical';
+    'widget-data-path'?: WidgetDataPath;
+    'widget-data-default'?: any;
+    'widget-required'?: boolean;
+    'widget-readonly'?: boolean;
+    'widget-data-validation'?: WidgetValidation;
+    'widget-data-format'?: WidgetFormat;
+    'widget-data-source'?: DataSource;
+    'widget-data-options'?: WidgetOptions;
+    'widget-data-placeholder'?: string;
+    'widget-data-helptext'?: string;
+    'widget-data-tooltip'?: string;
+    widgets?: BaseWidgetConfig[];
+    'widget-item'?: BaseWidgetConfig;
+    'widget-data-columns'?: Array<{
+        'column-key': string;
+        'widget-label': string;
+        widget?: string;
+        'widget-type'?: string;
+        'widget-data-path'?: string;
+        'widget-data-default'?: any;
+        'widget-data-format'?: WidgetFormat;
+        'widget-data-validation'?: WidgetValidation;
+        'widget-data-source'?: DataSource;
+        'widget-data-placeholder'?: string;
+        'widget-required'?: boolean;
+        'widget-readonly'?: boolean;
+        [key: string]: any;
+    }>;
+    'widget-data-operations'?: {
+        add?: boolean;
+        remove?: boolean;
+        edit?: boolean;
+    };
+    'widget-data-add-label'?: string;
+    'widget-data-collapsed'?: boolean;
+    'widget-column-span'?: number;
+    _comment?: string;
+    [key: string]: any;
+}
+/**
+ * Panel configuration - a layout container that can contain nested panels or widgets
+ */
+interface PanelConfig {
+    'panel-id': string;
+    'panel-orientation'?: 'horizontal' | 'vertical';
+    'panel-column-span'?: number;
+    panels?: PanelConfig[];
+    widgets?: BaseWidgetConfig[];
+}
+/**
+ * Supporting document configuration
+ */
+interface SupportingDocumentConfig {
+    'document-data-path': string;
+    'document-type'?: string;
+    'document-required'?: boolean;
+    'document-label'?: string;
+    'document-accept'?: string;
+    'document-max-size'?: number;
+}
+/**
+ * Section configuration
+ */
+interface SectionConfig {
+    'section-id': string;
+    'section-title'?: string;
+    'section-editable'?: boolean;
+    'section-column-span'?: number;
+    'section-supporting-documents'?: SupportingDocumentConfig[];
+    panels: PanelConfig[];
+}
+/**
+ * UI Schema structure
+ */
+interface UISchema {
+    sections: SectionConfig[];
+}
+/**
+ * Widget value type
+ */
+type WidgetValue = any;
+/**
+ * Widget state in Redux store
+ */
+interface WidgetState {
+    values: Record<string, WidgetValue>;
+    errors: Record<string, string[]>;
+    touched: Record<string, boolean>;
+    loading: Record<string, boolean>;
+    dataSources: Record<string, any[]>;
+}
+/**
+ * Widget context value
+ */
+interface WidgetContextValue {
+    widgetId: string;
+    value: WidgetValue;
+    error: string[];
+    touched: boolean;
+    loading: boolean;
+    onChange: (value: WidgetValue) => void;
+    onBlur: () => void;
+    setError: (errors: string[]) => void;
+    getFieldValue: (path: string) => any;
+    getDataSource: (widgetId: string) => any[];
+}
+/**
+ * Custom widget render function
+ */
+type WidgetRenderFunction = (config: BaseWidgetConfig, context: WidgetContextValue) => React.ReactNode;
+/**
+ * Widget registry entry
+ */
+interface WidgetRegistryEntry {
+    widget: string;
+    component: React.ComponentType<any> | WidgetRenderFunction;
+    defaultProps?: Record<string, any>;
+}
+/**
+ * API adapter function type
+ */
+type ApiAdapter = (url: string, options: {
+    method?: string;
+    headers?: Record<string, string>;
+    body?: any;
+    params?: Record<string, any>;
+}) => Promise<any>;
+
+declare const createWidgetStore: () => _reduxjs_toolkit.EnhancedStore<{
+    widget: WidgetState;
+}, redux.UnknownAction, _reduxjs_toolkit.Tuple<[redux.StoreEnhancer<{
+    dispatch: redux_thunk.ThunkDispatch<{
+        widget: WidgetState;
+    }, undefined, redux.UnknownAction>;
+}>, redux.StoreEnhancer]>>;
+type WidgetStore = ReturnType<typeof createWidgetStore>;
+type WidgetRootState = ReturnType<WidgetStore['getState']>;
+type WidgetDispatch = WidgetStore['dispatch'];
+
+declare const setValue: _reduxjs_toolkit.ActionCreatorWithPayload<{
+    widgetId: string;
+    value: WidgetValue;
+}, "widget/setValue">;
+declare const setValues: _reduxjs_toolkit.ActionCreatorWithPayload<Record<string, any>, "widget/setValues">;
+declare const setError: _reduxjs_toolkit.ActionCreatorWithPayload<{
+    widgetId: string;
+    errors: string[];
+}, "widget/setError">;
+declare const setTouched: _reduxjs_toolkit.ActionCreatorWithPayload<{
+    widgetId: string;
+    touched: boolean;
+}, "widget/setTouched">;
+declare const setLoading: _reduxjs_toolkit.ActionCreatorWithPayload<{
+    widgetId: string;
+    loading: boolean;
+}, "widget/setLoading">;
+declare const setDataSource: _reduxjs_toolkit.ActionCreatorWithPayload<{
+    widgetId: string;
+    data: any[];
+}, "widget/setDataSource">;
+declare const resetWidget: _reduxjs_toolkit.ActionCreatorWithPayload<string, "widget/resetWidget">;
+declare const resetAll: _reduxjs_toolkit.ActionCreatorWithoutPayload<"widget/resetAll">;
+
+interface UseBaseWidgetOptions {
+    config: BaseWidgetConfig;
+    apiAdapter?: ApiAdapter;
+    schemaData?: Record<string, any>;
+    onValueChange?: (widgetId: string, value: any) => void;
+}
+declare const useBaseWidget: (options: UseBaseWidgetOptions) => {
+    widgetId: string;
+    value: any;
+    formattedValue: any;
+    error: string[];
+    touched: boolean;
+    loading: boolean;
+    isVisible: boolean;
+    isEnabled: boolean;
+    onChange: (newValue: any, validate?: boolean) => void;
+    onBlur: () => void;
+    setError: (errors: string[]) => {
+        payload: {
+            widgetId: string;
+            errors: string[];
+        };
+        type: "widget/setError";
+    };
+    getFieldValue: (path: string) => any;
+    dataSourceOptions: any[];
+    config: BaseWidgetConfig;
+};
+
+interface WidgetRendererProps extends Omit<UseBaseWidgetOptions, 'config'> {
+    config: BaseWidgetConfig;
+    defaultComponent?: React$1.ComponentType<any>;
+}
+declare const WidgetRenderer: ({ config, apiAdapter: propApiAdapter, schemaData: propSchemaData, onValueChange, defaultComponent, }: WidgetRendererProps) => react_jsx_runtime.JSX.Element | null;
+
+interface WidgetProviderProps {
+    store?: WidgetStore;
+    apiAdapter?: ApiAdapter;
+    schemaData?: Record<string, any>;
+    translate?: (key: string, options?: any) => string;
+    children: ReactNode;
+}
+declare const useWidgetContext: () => {
+    apiAdapter?: ApiAdapter;
+    schemaData?: Record<string, any>;
+    translate?: (key: string, options?: any) => string;
+};
+declare const WidgetProvider: ({ store, apiAdapter, schemaData, translate, children, }: WidgetProviderProps) => react_jsx_runtime.JSX.Element;
+
+interface PanelRendererProps {
+    panel: PanelConfig;
+    apiAdapter?: UseBaseWidgetOptions['apiAdapter'];
+    schemaData?: UseBaseWidgetOptions['schemaData'];
+    onValueChange?: UseBaseWidgetOptions['onValueChange'];
+    isEditMode?: boolean;
+}
+/**
+ * Renders a panel with its nested panels or widgets
+ *
+ * Panels can contain:
+ * - Nested panels (for layout composition)
+ * - Widgets (for actual form inputs/controls)
+ */
+declare const PanelRenderer: ({ panel, apiAdapter, schemaData, onValueChange, isEditMode, }: PanelRendererProps) => react_jsx_runtime.JSX.Element;
+
+type SectionMode = 'RegistryView' | 'CRView';
+interface SectionsContainerProps {
+    sections: SectionConfig[];
+    apiAdapter?: UseBaseWidgetOptions['apiAdapter'];
+    schemaData?: UseBaseWidgetOptions['schemaData'];
+    onValueChange?: UseBaseWidgetOptions['onValueChange'];
+    className?: string;
+    onSectionSave?: (changes: SectionChanges) => Promise<void> | void;
+    hideEditButton?: boolean;
+    mode?: SectionMode;
+}
+/**
+ * Container component that renders multiple sections
+ *
+ * Layout behavior:
+ * - Uses CSS Grid for proper alignment
+ * - Each grid column = 200px (one vertical panel width)
+ * - Sections span columns based on their total vertical panel count
+ * - All sections align to the same grid, ensuring right-side alignment
+ * - Handles nested structure: multiple horizontal panels, each with multiple vertical panels
+ */
+declare const SectionsContainer: ({ sections, apiAdapter, schemaData, onValueChange, className, onSectionSave, hideEditButton, mode, }: SectionsContainerProps) => react_jsx_runtime.JSX.Element;
+
+interface SectionChanges {
+    section_id: string;
+    section_schema: SectionConfig;
+    old_section_value: unknown;
+    new_section_value: unknown;
+}
+interface SectionRendererProps {
+    section: SectionConfig;
+    apiAdapter?: UseBaseWidgetOptions['apiAdapter'];
+    schemaData?: UseBaseWidgetOptions['schemaData'];
+    onValueChange?: UseBaseWidgetOptions['onValueChange'];
+    gridColumnSpan?: number;
+    onSectionSave?: (changes: SectionChanges) => Promise<void> | void;
+    hideEditButton?: boolean;
+    mode?: SectionMode;
+}
+/**
+ * Renders a section with its panels
+ *
+ * Layout behavior:
+ * - Section width is based on max 3 panels (or more on high resolution)
+ * - Panels wrap when they exceed available width
+ * - Sections can sit side-by-side if there's space
+ */
+declare const SectionRenderer: ({ section, apiAdapter, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, }: SectionRendererProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Register all default/generic widgets
+ * This is called automatically when the package is imported
+ */
+declare const registerDefaultWidgets: () => void;
+
+declare class WidgetRegistry {
+    private widgets;
+    /**
+     * Register a widget
+     */
+    register(entry: WidgetRegistryEntry): void;
+    /**
+     * Register multiple widgets
+     */
+    registerMany(entries: WidgetRegistryEntry[]): void;
+    /**
+     * Get widget entry
+     */
+    get(widgetName: string): WidgetRegistryEntry | undefined;
+    /**
+     * Check if widget is registered
+     */
+    has(widgetName: string): boolean;
+    /**
+     * Get all registered widgets
+     */
+    getAll(): WidgetRegistryEntry[];
+    /**
+     * Unregister a widget
+     */
+    unregister(widgetName: string): boolean;
+    /**
+     * Clear all widgets
+     */
+    clear(): void;
+    /**
+     * Render widget component
+     */
+    render(config: BaseWidgetConfig, context: any, defaultComponent?: React$1.ComponentType<any>): React$1.ReactNode;
+}
+declare const widgetRegistry: WidgetRegistry;
+
+/**
+ * Generic text input widget with advanced features
+ * Supports all text-based inputs via configuration (text, email, password, number, tel, url, etc.)
+ *
+ * Features:
+ * - Allowed character types (any, alphabetic, alphanumeric, numeric, numeric-decimal, custom)
+ * - Case control (none, lowercase, uppercase, capitalize)
+ * - Length constraints with live character counter
+ * - Regular expression validation with custom messages
+ * - Input masking (static and dynamic)
+ * - Placeholder text with i18n support
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "text",
+ *   "widget-type": "input",
+ *   "widget-label": "Field Label",
+ *   "widget-id": "fieldId",
+ *   "widget-data-path": "person.name",
+ *   "widget-data-format": {
+ *     "inputType": "email",
+ *     "characterType": "alphanumeric",
+ *     "caseControl": "lowercase",
+ *     "mask": {
+ *       "pattern": "XXX-XXX-XXXX",
+ *       "type": "static"
+ *     },
+ *     "showCharCounter": true
+ *   },
+ *   "widget-data-validation": {
+ *     "validationType": "email",  // Predefined type: "email", "phone", or "url"
+ *     // OR use custom pattern:
+ *     // "pattern": "^[a-z0-9]+$",
+ *     // "patternMessage": "Only lowercase alphanumeric characters allowed",
+ *     "minLength": 5,
+ *     "maxLength": 20
+ *   },
+ *   "widget-required": true,
+ *   "widget-data-placeholder": "Enter your value"
+ * }
+ */
+interface TextInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const TextInputWidget: ({ config }: TextInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Number input widget with advanced numeric features
+ *
+ * Features:
+ * - Numeric type (integer/decimal, signed/unsigned)
+ * - Decimal precision control (0-6 places, rounding/truncation)
+ * - Value range validation (min/max)
+ * - Regular expression validation with custom messages
+ * - Maximum character limit
+ * - Numeric masking and formatting (thousand/decimal separators)
+ * - Text alignment (right by default, configurable)
+ * - Key input restrictions
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "number",
+ *   "widget-type": "input",
+ *   "widget-label": "Amount",
+ *   "widget-id": "amount",
+ *   "widget-data-path": "transaction.amount",
+ *   "widget-data-format": {
+ *     "numericType": "decimal",
+ *     "decimalPlaces": 2,
+ *     "roundingMode": "round",
+ *     "thousandSeparator": ",",
+ *     "decimalSeparator": ".",
+ *     "textAlign": "right",
+ *     "allowSigned": true,
+ *     "formatOnBlur": true
+ *   },
+ *   "widget-data-validation": {
+ *     "min": 0,
+ *     "max": 10000,
+ *     "pattern": "^[0-9]+(\\.[0-9]{1,2})?$",
+ *     "patternMessage": "Invalid number format"
+ *   },
+ *   "widget-required": true,
+ *   "widget-data-placeholder": "Enter amount"
+ * }
+ */
+interface NumberInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const NumberInputWidget: ({ config }: NumberInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Boolean widget with advanced features
+ *
+ * Features:
+ * - Boolean representation (true/false, yes/no, on/off, custom labels)
+ * - Control type (checkbox, radio buttons, toggle/switch)
+ * - Default value (true, false, unset/null)
+ * - Required vs optional
+ * - Layout options (horizontal/vertical)
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "boolean",
+ *   "widget-type": "input",
+ *   "widget-label": "Is Married",
+ *   "widget-id": "married",
+ *   "widget-data-path": "person.married",
+ *   "widget-data-default": false,
+ *   "widget-data-format": {
+ *     "booleanRepresentation": "yes-no",
+ *     "booleanControlType": "radio",
+ *     "allowUnset": true
+ *   },
+ *   "widget-data-validation": {},
+ *   "widget-required": false,
+ *   "widget-orientation": "horizontal"
+ * }
+ */
+interface BooleanWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const BooleanWidget: ({ config }: BooleanWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Date input widget with advanced features
+ *
+ * Features:
+ * - Configurable date format (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.)
+ * - Default value (none / today)
+ * - Date constraints (minDate, maxDate, any/past only/future only)
+ * - Required vs optional
+ * - Input method (date picker / manual / hybrid)
+ * - Placeholder text
+ * - Read-only & disabled
+ * - Canonical stored format (ISO 8601)
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "date",
+ *   "widget-type": "input",
+ *   "widget-label": "Date of Birth",
+ *   "widget-id": "dob",
+ *   "widget-data-path": "person.dob",
+ *   "widget-data-default": "today",
+ *   "widget-data-format": {
+ *     "dateFormat": "DD/MM/YYYY",
+ *     "inputMethod": "hybrid",
+ *     "dateConstraint": "past-only"
+ *   },
+ *   "widget-data-options": {
+ *     "minDate": "1900-01-01",
+ *     "maxDate": "today"
+ *   },
+ *   "widget-data-validation": {},
+ *   "widget-required": true,
+ *   "widget-data-placeholder": "DD/MM/YYYY"
+ * }
+ */
+interface DateInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const DateInputWidget: ({ config }: DateInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * DateTime input widget with advanced features
+ *
+ * Features:
+ * - Configurable datetime format (DD/MM/YYYY HH:mm, MM/DD/YYYY HH:mm:ss, etc.)
+ * - Default value (none / now)
+ * - DateTime constraints (minDateTime, maxDateTime, any/past only/future only)
+ * - Required vs optional
+ * - Input method (datetime picker / manual / hybrid)
+ * - Placeholder text
+ * - Read-only & disabled
+ * - Canonical stored format (ISO 8601 with time)
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "datetime",
+ *   "widget-type": "input",
+ *   "widget-label": "Appointment Time",
+ *   "widget-id": "appointment",
+ *   "widget-data-path": "appointment.datetime",
+ *   "widget-data-default": "now",
+ *   "widget-data-format": {
+ *     "dateTimeFormat": "DD/MM/YYYY HH:mm",
+ *     "inputMethod": "picker",
+ *     "dateTimeConstraint": "future-only"
+ *   },
+ *   "widget-data-options": {
+ *     "minDateTime": "2024-01-01T00:00",
+ *     "maxDateTime": "now"
+ *   },
+ *   "widget-data-validation": {},
+ *   "widget-required": true,
+ *   "widget-data-placeholder": "DD/MM/YYYY HH:mm"
+ * }
+ */
+interface DateTimeInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const DateTimeInputWidget: ({ config }: DateTimeInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Select/Dropdown widget with data source support
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "select",
+ *   "widget-type": "input",
+ *   "widget-label": "Country",
+ *   "widget-id": "country",
+ *   "widget-data-path": "address.country",
+ *   "widget-data-source": {
+ *     "type": "static" | "api" | "schema",
+ *     ...
+ *   }
+ * }
+ */
+interface SelectWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const SelectWidget: ({ config }: SelectWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Radio button widget with advanced features
+ *
+ * Features:
+ * - Static list of options
+ * - Dynamic options (from API / dataset)
+ * - Ordered options (preserve order or sort)
+ * - Option label & value separation
+ * - Display label
+ * - Stored value
+ * - Default selection (pre-selected option or unset)
+ * - Required vs optional
+ * - Layout options (vertical, horizontal, grid)
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "radio",
+ *   "widget-type": "input",
+ *   "widget-label": "Gender",
+ *   "widget-id": "gender",
+ *   "widget-data-path": "person.gender",
+ *   "widget-data-default": "male",
+ *   "widget-data-source": {
+ *     "type": "static",
+ *     "options": [
+ *       { "value": "male", "label": "Male" },
+ *       { "value": "female", "label": "Female" },
+ *       { "value": "other", "label": "Other" }
+ *     ]
+ *   },
+ *   "widget-data-format": {
+ *     "layout": "vertical",
+ *     "sortOptions": false
+ *   },
+ *   "widget-required": true
+ * }
+ */
+interface RadioWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const RadioWidget: ({ config }: RadioWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Checkbox widget with advanced features
+ *
+ * Features:
+ * - Single checkbox (boolean) - when no data source
+ * - Multiple checkboxes (array) - when data source provided
+ * - Static list of options
+ * - Dynamic options (from API / dataset)
+ * - Ordered options (preserve order or sort)
+ * - Option label & value separation
+ * - Display label
+ * - Stored value (array for multi-select)
+ * - Default selection (pre-selected options or empty array)
+ * - Required vs optional (at least one must be selected if required)
+ * - Layout options (vertical, horizontal, grid)
+ *
+ * Usage in schema (single checkbox):
+ * {
+ *   "widget": "checkbox",
+ *   "widget-type": "input",
+ *   "widget-label": "I agree to terms",
+ *   "widget-id": "agree",
+ *   "widget-data-path": "form.agree",
+ *   "widget-data-default": false
+ * }
+ *
+ * Usage in schema (multiple checkboxes):
+ * {
+ *   "widget": "checkbox",
+ *   "widget-type": "input",
+ *   "widget-label": "Interests",
+ *   "widget-id": "interests",
+ *   "widget-data-path": "person.interests",
+ *   "widget-data-default": ["sports"],
+ *   "widget-data-source": {
+ *     "type": "static",
+ *     "options": [
+ *       { "value": "sports", "label": "Sports" },
+ *       { "value": "music", "label": "Music" },
+ *       { "value": "reading", "label": "Reading" }
+ *     ]
+ *   },
+ *   "widget-data-format": {
+ *     "layout": "vertical",
+ *     "sortOptions": false
+ *   },
+ *   "widget-required": true
+ * }
+ */
+interface CheckboxWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const CheckboxWidget: ({ config }: CheckboxWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * File input widget
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "file",
+ *   "widget-type": "input",
+ *   "widget-label": "Upload Document",
+ *   "widget-id": "document",
+ *   "widget-data-path": "form.document",
+ *   "widget-data-options": {
+ *     "accept": ".pdf,.doc,.docx",
+ *     "multiple": false,
+ *     "maxSize": 5242880  // 5MB in bytes
+ *   }
+ * }
+ */
+interface FileInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const FileInputWidget: ({ config }: FileInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Simple table widget for structured data
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "simple-table",
+ *   "widget-type": "table",
+ *   "widget-label": "Education History",
+ *   "widget-id": "educationHistory",
+ *   "widget-data-path": "education.history",
+ *   "widget-data-columns": [
+ *     {
+ *       "column-key": "degree",
+ *       "widget-label": "Degree",
+ *       "widget": "text",
+ *       "widget-data-path": "degree"
+ *     }
+ *   ],
+ *   "widget-data-operations": {
+ *     "add": true,
+ *     "remove": true,
+ *     "edit": true
+ *   }
+ * }
+ */
+interface SimpleTableWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const SimpleTableWidget: ({ config }: SimpleTableWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Array widget for simple repeating values
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "array-widget",
+ *   "widget-type": "group",
+ *   "widget-label": "Skills",
+ *   "widget-id": "skills",
+ *   "widget-data-path": "person.skills",
+ *   "widget-item": {
+ *     "widget": "text",
+ *     "widget-type": "input",
+ *     "widget-label": "Skill"
+ *   },
+ *   "widget-data-add-label": "Add Skill",
+ *   "widget-data-operations": {
+ *     "add": true,
+ *     "remove": true
+ *   }
+ * }
+ */
+interface ArrayWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const ArrayWidget: ({ config }: ArrayWidgetProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Iterable accordion widget - expandable/collapsible container for widgets
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "iterable-accordion",
+ *   "widget-type": "group",
+ *   "widget-label": "Advanced Options",
+ *   "widget-id": "advancedOptions",
+ *   "widget-data-path": "person.notes",
+ *   "widget-data-collapsed": true,
+ *   "widget-item": {
+ *     "widget": "text",
+ *     "widget-type": "input",
+ *     "widget-label": "Additional Notes",
+ *     "widget-id": "notes",
+ *     ...
+ *   }
+ * }
+ *
+ * Note: widget-item can be any widget config. If it has nested widgets property,
+ * those will be rendered as well.
+ */
+interface IterableAccordionWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const IterableAccordionWidget: ({ config }: IterableAccordionWidgetProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Phone input widget with formatting
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "phone",
+ *   "widget-type": "input",
+ *   "widget-label": "Phone",
+ *   "widget-id": "phone",
+ *   "widget-data-path": "person.phone",
+ *   "widget-data-format": {
+ *     "pattern": "(XXX) XXX-XXXX"
+ *   }
+ * }
+ */
+interface PhoneInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const PhoneInputWidget: ({ config }: PhoneInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Currency input widget with formatting
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "currency",
+ *   "widget-type": "input",
+ *   "widget-label": "Salary",
+ *   "widget-id": "salary",
+ *   "widget-data-path": "person.salary",
+ *   "widget-data-format": {
+ *     "currency": "USD",
+ *     "locale": "en-US",
+ *     "decimals": 2
+ *   }
+ * }
+ */
+interface CurrencyInputWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const CurrencyInputWidget: ({ config }: CurrencyInputWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Display widget for readonly text display
+ * Used for displaying information in a card layout
+ */
+interface DisplayWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const DisplayWidget: ({ config }: DisplayWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Table widget with record-level inline editing
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "table",
+ *   "widget-type": "table",
+ *   "widget-label": "Education History",
+ *   "widget-id": "educationHistory",
+ *   "widget-data-path": "education.history",
+ *   "widget-data-columns": [
+ *     {
+ *       "column-key": "degree",
+ *       "widget-label": "Degree",
+ *       "widget": "text",
+ *       "widget-type": "input",
+ *       "widget-data-path": "degree",
+ *       "widget-data-format": {...}
+ *     },
+ *     {
+ *       "column-key": "year",
+ *       "widget-label": "Year",
+ *       "widget": "number",
+ *       "widget-type": "input",
+ *       "widget-data-path": "year"
+ *     }
+ *   ],
+ *   "widget-data-operations": {
+ *     "add": true,
+ *     "remove": true,
+ *     "edit": true
+ *   },
+ *   "widget-data-api": {
+ *     "add": { "url": "/api/records", "method": "POST" },
+ *     "edit": { "url": "/api/records/{id}", "method": "PUT" },
+ *     "delete": { "url": "/api/records/{id}", "method": "DELETE" }
+ *   }
+ * }
+ */
+interface TableWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const TableWidget: ({ config }: TableWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Profile widget for displaying user identity information
+ * Displays an image/avatar, display name, and ID in a vertical layout
+ *
+ * This is a display widget that groups related profile fields together.
+ * Recommended widget-type: 'group' (groups related data fields)
+ * Alternative: 'layout' (for display-only, no value storage)
+ *
+ * Configuration (Recommended - Multi-path data binding):
+ *
+ * - widget-data-path: Object with keys 'image', 'name', 'id' mapping to data paths
+ *   Example: { "image": "person.photo", "name": "person.name", "id": "person.id" }
+ *
+ * Alternative (Individual path properties - fallback):
+ * - widget-image-path?: string - Data path for the image/photo (e.g., "person.photo")
+ * - widget-name-path?: string - Data path for the display name (e.g., "person.name")
+ * - widget-id-path?: string - Data path for the ID (e.g., "person.id")
+ *
+ * Format options:
+ * - widget-data-format: Optional format configuration
+ *   - imageSize?: number - Size of the avatar image in pixels (default: 80)
+ *   - nameColor?: string - Color for the name text (default: '#ED7C22')
+ *   - showIdLabel?: boolean - Whether to show "ID :" label (default: true)
+ *
+ * Example usage (Recommended):
+ * ```json
+ * {
+ *   "widget": "profile",
+ *   "widget-type": "group",
+ *   "widget-id": "user-profile",
+ *   "widget-data-path": {
+ *     "image": "photo",
+ *     "name": "display_name",
+ *     "id": "national_id"
+ *   },
+ *   "widget-data-format": {
+ *     "imageSize": 80,
+ *     "nameColor": "#ED7C22",
+ *     "showIdLabel": true
+ *   }
+ * }
+ * ```
+ */
+interface ProfileWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const ProfileWidget: ({ config }: ProfileWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * TextArea widget for multi-line text input
+ * Supports 2 rows by default with configurable rows
+ *
+ * Features:
+ * - Multi-line text input
+ * - Character type filtering (any, alphabetic, alphanumeric, numeric, etc.)
+ * - Case control (none, lowercase, uppercase, capitalize)
+ * - Length constraints with live character counter
+ * - Regular expression validation with custom messages
+ * - Placeholder text with i18n support
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "textarea",
+ *   "widget-type": "input",
+ *   "widget-label": "Description",
+ *   "widget-id": "description",
+ *   "widget-data-path": "person.description",
+ *   "widget-data-format": {
+ *     "characterType": "any",
+ *     "caseControl": "none",
+ *     "showCharCounter": true,
+ *     "rows": 2
+ *   },
+ *   "widget-data-validation": {
+ *     "minLength": 10,
+ *     "maxLength": 500
+ *   },
+ *   "widget-required": true,
+ *   "widget-data-placeholder": "Enter description"
+ * }
+ */
+interface TextAreaWidgetProps {
+    config: BaseWidgetConfig;
+}
+declare const TextAreaWidget: ({ config }: TextAreaWidgetProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Get value from object using dot notation path
+ * Safely handles nested paths like "person.name" or "address.street.number"
+ */
+declare const getValueByPath: (obj: any, path: string) => any;
+/**
+ * Set value in object using dot notation path
+ * Safely creates nested objects as needed
+ */
+declare const setValueByPath: (obj: any, path: string, value: any) => any;
+/**
+ * Parse widget data path (can be string or object)
+ */
+declare const parseDataPath: (dataPath: string | Record<string, string> | undefined) => string | Record<string, string> | null;
+/**
+ * Get value from widget state using data path
+ */
+declare const getWidgetValue: (values: Record<string, any>, dataPath: string | Record<string, string> | undefined, widgetId: string) => any;
+/**
+ * Set value in widget state using data path
+ */
+declare const setWidgetValue: (currentValues: Record<string, any>, dataPath: string | Record<string, string> | undefined, widgetId: string, value: any) => Record<string, any>;
+
+/**
+ * Validate value against validation rules
+ */
+declare const validateWidget: (value: any, validation: WidgetValidation | undefined, required?: boolean) => string[];
+/**
+ * Create Zod schema from validation config
+ */
+declare const createZodSchema: (validation: WidgetValidation | undefined, required?: boolean) => z.ZodSchema | null;
+
+/**
+ * Format date value
+ */
+declare const formatDate: (value: any, format: WidgetFormat | undefined) => string;
+/**
+ * Format currency value
+ */
+declare const formatCurrency: (value: any, format: WidgetFormat | undefined) => string;
+/**
+ * Format phone number
+ */
+declare const formatPhone: (value: any, format: WidgetFormat | undefined) => string;
+/**
+ * Format value based on widget format config
+ */
+declare const formatValue: (value: any, format: WidgetFormat | undefined, widgetType?: string) => string;
+
+/**
+ * Evaluate condition against field value
+ */
+declare const evaluateCondition: (condition: WidgetCondition, allValues: Record<string, any>) => boolean;
+/**
+ * Check if widget should be visible based on conditions
+ */
+declare const shouldShowWidget: (options: {
+    action?: string;
+    condition?: WidgetCondition;
+} | undefined, allValues: Record<string, any>) => boolean;
+/**
+ * Check if widget should be enabled based on conditions
+ */
+declare const shouldEnableWidget: (options: {
+    action?: string;
+    condition?: WidgetCondition;
+} | undefined, allValues: Record<string, any>) => boolean;
+
+/**
+ * Get static data source options
+ */
+declare const getStaticDataSource: (dataSource: Extract<DataSource, {
+    type: "static";
+}>) => any[];
+/**
+ * Get API data source options
+ */
+declare const getApiDataSource: (dataSource: Extract<DataSource, {
+    type: "api";
+}>, allValues: Record<string, any>, apiAdapter: ApiAdapter | undefined) => Promise<any[]>;
+/**
+ * Get schema reference data source options
+ */
+declare const getSchemaDataSource: (dataSource: Extract<DataSource, {
+    type: "schema";
+}>, schemaData: Record<string, any>) => any[];
+/**
+ * Transform data source options to { value, label } format
+ */
+declare const transformDataSourceOptions: (data: any[], valueKey?: string, labelKey?: string) => Array<{
+    value: any;
+    label: string;
+}>;
+
+/**
+ * Filter input value based on allowed character type
+ */
+declare const filterByCharacterType: (value: string, characterType?: CharacterType, customCharset?: string) => string;
+/**
+ * Apply case transformation to text
+ */
+declare const applyCaseControl: (value: string, caseControl?: CaseControl) => string;
+/**
+ * Apply input mask to value
+ */
+declare const applyMask: (value: string, mask: InputMask) => {
+    displayValue: string;
+    rawValue: string;
+};
+/**
+ * Remove mask from value to get raw value
+ */
+declare const removeMask: (value: string, mask: InputMask) => string;
+
+/**
+ * Format number with thousand and decimal separators
+ */
+declare const formatNumber: (value: number | string, format: WidgetFormat | undefined) => string;
+/**
+ * Parse formatted number string to number
+ */
+declare const parseNumber: (value: string, format: WidgetFormat | undefined) => number | null;
+/**
+ * Apply decimal precision with rounding or truncation
+ */
+declare const applyDecimalPrecision: (value: number, format: WidgetFormat | undefined) => number;
+/**
+ * Validate numeric value against constraints
+ */
+declare const validateNumericValue: (value: number | null, format: WidgetFormat | undefined, validation?: {
+    min?: number;
+    max?: number;
+    pattern?: string;
+    patternMessage?: string;
+}) => string[];
+/**
+ * Check if a key is allowed for numeric input
+ */
+declare const isAllowedKey: (key: string, format: WidgetFormat | undefined, currentValue: string, event?: React.KeyboardEvent<HTMLInputElement>) => boolean;
+/**
+ * Calculate character count including separators and sign
+ */
+declare const getFormattedNumberLength: (value: number | string | null, format: WidgetFormat | undefined) => number;
+
+/**
+ * Initialize i18n for the widget library
+ * Can be customized by passing custom resources or configuration
+ *
+ * If no resources are provided, it will attempt to automatically load translations
+ * from the consuming project's locale directory.
+ *
+ * If options are provided and the default instance is already initialized,
+ * creates a new i18n instance to avoid reinitialization issues.
+ */
+declare const initI18n: (options?: {
+    resources?: Record<string, any>;
+    lng?: string;
+    fallbackLng?: string;
+    debug?: boolean;
+    loadPath?: string | string[];
+    autoLoad?: boolean;
+}) => Promise<i18next.i18n>;
+
+/**
+ * Custom hook for widget translations
+ * Provides translation function with widget-specific namespace and fallback support
+ */
+declare const useWidgetTranslation: () => {
+    t: (keyOrString: string | undefined | null, options?: {
+        defaultValue?: string;
+        [key: string]: any;
+    }) => string;
+    translate: (keyOrString: string | undefined | null, options?: {
+        defaultValue?: string;
+        [key: string]: any;
+    }) => string;
+    translateConfig: (value: string | undefined | null, fallback?: string) => string;
+};
+
+/**
+ * Recursively translate widget configuration using translation keys
+ * This utility helps transform a schema with translation keys into translated strings
+ *
+ * @param widgetConfig - Widget configuration that may contain translation keys
+ * @param translate - Translation function (from useWidgetTranslation or i18next)
+ * @returns Translated widget configuration
+ */
+declare const translateWidgetConfig: (widgetConfig: BaseWidgetConfig, translate: (key: string, options?: any) => string) => BaseWidgetConfig;
+/**
+ * Recursively translate panel configuration
+ */
+declare const translatePanelConfig: (panel: PanelConfig, translate: (key: string, options?: any) => string) => PanelConfig;
+/**
+ * Translate entire UI Schema
+ *
+ * @param schema - UI Schema with potential translation keys
+ * @param translate - Translation function
+ * @returns Translated UI Schema
+ */
+declare const translateUISchema: (schema: UISchema, translate: (key: string, options?: any) => string) => UISchema;
+
+export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DisplayWidget, FileInputWidget, IterableAccordionWidget, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, RadioWidget, SectionRenderer, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useWidgetContext, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
+export type { ApiAdapter, ApiDataSource, BaseWidgetConfig, BooleanControlType, BooleanRepresentation, CaseControl, CharacterType, ConditionOperator, DataSource, DataSourceType, InputMask, NumericType, PanelConfig, RoundingMode, SchemaDataSource, SectionChanges, SectionConfig, SectionMode, SectionsContainerProps, StaticDataSource, SupportingDocumentConfig, TextAlign, UISchema, UseBaseWidgetOptions, ValidationType, WidgetCondition, WidgetContextValue, WidgetDataPath, WidgetDispatch, WidgetFormat, WidgetOptions, WidgetRegistryEntry, WidgetRenderFunction, WidgetRootState, WidgetState, WidgetStore, WidgetValidation, WidgetValue };