@dragonmastery/zinia-forms-core 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,2163 @@
+import * as vue from 'vue';
+import { FunctionalComponent, Ref, App } from 'vue';
+import { z } from 'zod';
+
+type BrowserNativeObject = Date | FileList | File;
+type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+/**
+ * Checks whether T1 can be exactly (mutually) assigned to T2
+ * @typeParam T1 - type to check
+ * @typeParam T2 - type to check against
+ * ```
+ * IsEqual<string, string> = true
+ * IsEqual<'foo', 'foo'> = true
+ * IsEqual<string, number> = false
+ * IsEqual<string, number> = false
+ * IsEqual<string, 'foo'> = false
+ * IsEqual<'foo', string> = false
+ * IsEqual<'foo' | 'bar', 'foo'> = boolean // 'foo' is assignable, but 'bar' is not (true | false) -> boolean
+ * ```
+ */
+type IsEqual<T1, T2> = T1 extends T2 ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2 ? true : false : false;
+/**
+ * Type to query whether an array type T is a tuple type.
+ * @typeParam T - type which may be an array or tuple
+ * @example
+ * ```
+ * IsTuple<[number]> = true
+ * IsTuple<number[]> = false
+ * ```
+ */
+type IsTuple<T extends ReadonlyArray<any>> = number extends T['length'] ? false : true;
+/**
+ * Type which can be used to index an array or tuple type.
+ */
+type ArrayKey = number;
+/**
+ * Helper function to break apart T1 and check if any are equal to T2
+ *
+ * See {@link IsEqual}
+ */
+type AnyIsEqual<T1, T2> = T1 extends T2 ? (IsEqual<T1, T2> extends true ? true : never) : never;
+/**
+ * Type which given a tuple type returns its own keys, i.e. only its indices.
+ * @typeParam T - tuple type
+ * @example
+ * ```
+ * TupleKeys<[number, string]> = '0' | '1'
+ * ```
+ */
+type TupleKeys<T extends ReadonlyArray<any>> = Exclude<keyof T, keyof any[]>;
+/**
+ * Helper type for recursively constructing paths through a type.
+ * This actually constructs the strings and recurses into nested
+ * object types.
+ *
+ * See {@link Path}
+ */
+type PathImpl<K extends string | number, V, TraversedTypes> = V extends Primitive | BrowserNativeObject ? `${K}` : true extends AnyIsEqual<TraversedTypes, V> ? `${K}` : `${K}` | `${K}.${PathInternal<V, TraversedTypes | V>}`;
+/**
+ * Helper type for recursively constructing paths through a type.
+ * This obscures the internal type param TraversedTypes from ed contract.
+ *
+ * See {@link Path}
+ */
+type PathInternal<T, TraversedTypes = T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
+    [K in TupleKeys<T>]-?: PathImpl<K & string, T[K], TraversedTypes>;
+}[TupleKeys<T>] : PathImpl<ArrayKey, V, TraversedTypes> : {
+    [K in keyof T]-?: PathImpl<K & string, T[K], TraversedTypes>;
+}[keyof T];
+/**
+ * Type which eagerly collects all paths through a type
+ * @typeParam T - type which should be introspected
+ * @example
+ * ```
+ * Path<{foo: {bar: string}}> = 'foo' | 'foo.bar'
+ * ```
+ */
+type Path<T> = T extends any ? PathInternal<T> : never;
+
+/**
+ * Represents a dynamic path that can be constructed at runtime
+ * This includes both static schema paths and dynamic array paths
+ *
+ * @example
+ * // Static paths (from schema)
+ * type StaticPaths = Path<FormType>; // "name" | "description" | "tasks"
+ *
+ * // Dynamic paths (constructed at runtime)
+ * type DynamicPaths = DynamicPath<FormType>; // "name" | "description" | "tasks" | "tasks.0.title" | "tasks.0.subtasks.1.completed"
+ */
+type DynamicPath<T> = Path<T> | string;
+/**
+ * Helper type for field components that need to accept both static and dynamic paths
+ * This is the key to solving the `as any` problem
+ */
+type FlexiblePath<T> = DynamicPath<T>;
+
+interface ArrayFieldProps<FormType, ItemType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    availableItems?: ItemType[];
+    itemsSource?: () => ItemType[];
+    itemRenderer?: (item: ItemType, index: number) => any;
+    availableItemRenderer?: (item: ItemType, index: number) => any;
+    createItem?: () => ItemType;
+    onAddItem?: (item: ItemType) => void;
+    onRemoveItem?: (index: number) => void;
+    onUpdateItem?: (index: number, item: ItemType) => void;
+    onSwapItems?: (indexA: number, indexB: number) => void;
+    minItems?: number;
+    maxItems?: number;
+    allowReordering?: boolean;
+    autoPrefixFields?: boolean;
+    ariaLabels?: {
+        addButton?: string;
+        removeButton?: string;
+        moveUpButton?: string;
+        moveDownButton?: string;
+        item?: string;
+    };
+}
+
+interface CheckboxFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+}
+
+interface CurrencyFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+interface DateFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: string;
+    max?: string;
+    formatter?: (date: string) => unknown;
+}
+
+interface DateTimeLocalFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+}
+
+interface EmailFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+}
+
+interface FileFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    accept?: string;
+    multiple?: boolean;
+}
+
+/**
+ * Props for the FormErrorsSummary component
+ */
+interface FormErrorsSummaryProps {
+    /**
+     * Custom title for the errors section
+     */
+    title?: string;
+    /**
+     * Whether to show the component only after form submission has been attempted
+     * @default true
+     */
+    showOnlyAfterSubmitAttempt?: boolean;
+    /**
+     * Custom CSS class for the container
+     */
+    className?: string;
+    /**
+     * Icon to display next to the title
+     * @default 'exclamation-circle'
+     */
+    icon?: string;
+}
+
+interface FormProps<FormType> {
+    title?: string;
+    subtitle?: string;
+    className?: string;
+    /**
+     * Custom submission handler - optional, if not provided will use default behavior.
+     * This is the preferred way to handle form submission as it avoids conflicts with native events.
+     */
+    onHandleSubmit?: (data: FormType) => Promise<any> | any;
+    onSuccess?: (result: any) => void;
+    onError?: (error: any) => void;
+    onBeforeValidate?: () => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    children?: any;
+}
+
+interface NumberFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+interface PasswordFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+}
+
+interface RadioFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    inline?: boolean;
+}
+
+interface RangeFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+}
+
+interface ResetButtonProps<FormType> {
+    resetText?: string;
+    className?: string;
+    disabled?: boolean;
+    onReset?: () => void;
+}
+
+interface SearchFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+}
+
+/**
+ * Option item for select fields
+ */
+interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Type for a mapping of enum values to labels
+ */
+type EnumValueToLabelMap<T extends string> = Record<T, string>;
+/**
+ * Type for a value-to-label mapping that can be either a function or an object map
+ */
+type ValueToLabelMapping<T extends string = string> = ((value: string) => string) | EnumValueToLabelMap<T>;
+/**
+ * Helper type to extract the type of a field at a given path
+ */
+type FieldType<T, P extends string> = P extends keyof T ? T[P] : P extends `${infer A}.${infer B}` ? A extends keyof T ? FieldType<T[A], B> : never : never;
+/**
+ * Helper type to extract enum values from a field type
+ */
+type EnumValuesFromField<T> = T extends string ? T : never;
+/**
+ * Type that maps field paths to their corresponding enum types
+ */
+type FieldPathToEnum$1<T, P extends Path<T>> = EnumValuesFromField<FieldType<T, P & string>>;
+/**
+ * Props for the SelectField component
+ */
+interface SelectFieldProps<FormType, P extends Path<FormType> = Path<FormType>> {
+    /**
+     * Field name (path in the form state)
+     * Accepts both static paths and dynamic paths for use in array fields
+     */
+    name: FlexiblePath<FormType>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Whether to hide the label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field description
+     */
+    description?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly?: boolean;
+    /**
+     * CSS classes to apply to the field
+     */
+    class?: string | string[];
+    /**
+     * Field size
+     */
+    size?: string;
+    /**
+     * Field variant
+     */
+    variant?: string;
+    /**
+     * Select options (overrides options from schema)
+     * Using selectOptions instead of options to avoid conflicts with HTML select element
+     */
+    selectOptions?: SelectOption[];
+    /**
+     * Custom mapping function to convert values to labels
+     * This is useful when you want to customize how labels are displayed
+     * without providing a full options array
+     *
+     * Can be provided as either:
+     * 1. A function that takes a value and returns a label
+     * 2. An object map where keys are enum values and values are labels
+     */
+    valueToLabel?: ValueToLabelMapping<FieldPathToEnum$1<FormType, P>>;
+    /**
+     * Whether to use options from the schema (default: true)
+     * Set to false to ignore schema options even when no options prop is provided
+     */
+    useSchemaOptions?: boolean;
+}
+
+interface SubmitButtonProps<FormType> {
+    submitText?: string;
+    submittingText?: string;
+    className?: string;
+    disabled?: boolean;
+}
+
+interface TelFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    pattern?: string;
+}
+
+interface TextareaFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    rows?: number;
+}
+
+interface TextFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+}
+
+interface TimeFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+}
+
+/**
+ * Props for the ToppingsField component
+ */
+interface ToppingsFieldProps<FormType, ToppingType = any> {
+    /**
+     * Field name (path in the form state)
+     */
+    name: FlexiblePath<FormType>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Whether to hide the label
+     */
+    hideLabel?: boolean;
+    /**
+     * Help text to display below the field
+     */
+    helpText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly?: boolean;
+    /**
+     * CSS classes to apply to the field
+     */
+    class?: string | string[];
+    /**
+     * Field size
+     */
+    size?: string;
+    /**
+     * Field variant
+     */
+    variant?: string;
+    /**
+     * All available toppings to choose from
+     */
+    allAvailableToppings: ToppingType[];
+    /**
+     * Function to get the name of a topping
+     */
+    getToppingName?: (topping: ToppingType) => string;
+    /**
+     * Function to get the price of a topping
+     */
+    getToppingPrice?: (topping: ToppingType) => number;
+    /**
+     * Function to get the placement of a topping (left, whole, right)
+     */
+    getToppingPlacement?: (topping: ToppingType) => string;
+    /**
+     * Function to set the placement of a topping
+     */
+    setToppingPlacement?: (topping: ToppingType, placement: string) => void;
+    /**
+     * Function to check if a topping has extra amount
+     */
+    getIsExtraTopping?: (topping: ToppingType) => boolean;
+    /**
+     * Function to toggle the extra amount of a topping
+     */
+    toggleExtraTopping?: (topping: ToppingType, isExtra: boolean) => void;
+    /**
+     * Maximum number of toppings allowed
+     */
+    maxToppings?: number;
+    /**
+     * Custom renderer for topping items
+     */
+    toppingRenderer?: (topping: ToppingType, isSelected: boolean, placement: string, isExtra: boolean) => any;
+    /**
+     * ARIA labels for accessibility
+     */
+    ariaLabels?: {
+        toppingsList?: string;
+        addTopping?: string;
+        removeTopping?: string;
+        leftSide?: string;
+        wholePizza?: string;
+        rightSide?: string;
+        extraTopping?: string;
+    };
+}
+
+interface TransferListFieldProps<FormType, ItemType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string | string[];
+    allAvailableItems: ItemType[];
+    itemIdentifier?: (item: ItemType) => string | number;
+    availableItemRenderer?: (item: ItemType, index: number) => any;
+    selectedItemRenderer?: (item: ItemType, index: number) => any;
+    allowReordering?: boolean;
+    autoPrefixFields?: boolean;
+    ariaLabels?: {
+        addButton?: string;
+        removeButton?: string;
+        moveUpButton?: string;
+        moveDownButton?: string;
+        availableItems?: string;
+        selectedItems?: string;
+    };
+}
+
+interface UrlFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autocomplete?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    pattern?: string;
+}
+
+interface DisplayProps<_FormType> {
+    loading?: boolean;
+    error?: string | null;
+    class?: string | string[];
+    variant?: 'default' | 'card' | 'bordered' | 'compact';
+    showLabels?: boolean;
+    layout?: 'vertical' | 'horizontal' | 'grid' | 'card-grid';
+    columns?: number;
+    title?: string;
+    loadingMessage?: string;
+    noDataMessage?: string;
+    cardClass?: string;
+    cardBodyClass?: string;
+    gap?: 'sm' | 'md' | 'lg';
+    fieldBorders?: boolean;
+    responsive?: boolean;
+}
+
+interface DisplayFieldProps<FormType> {
+    name: FlexiblePath<FormType>;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    format?: 'default' | 'currency' | 'date' | 'datetime' | 'boolean' | 'email' | 'url' | 'phone' | 'number' | 'badge' | 'status';
+    emptyText?: string;
+    class?: string | string[];
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'bordered' | 'compact' | 'highlighted';
+    copyable?: boolean;
+    labelClass?: string;
+    valueClass?: string;
+    containerClass?: string;
+    badgeClass?: string;
+    statusMapping?: Record<string, {
+        class: string;
+        label?: string;
+    }>;
+    valueToLabel?: Record<string, string>;
+    separator?: string;
+    itemRenderer?: (item: any, index: number) => string;
+    maxItems?: number;
+}
+
+interface DeleteModalProps<FormType = any> {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+}
+
+interface DataTableProps<FormType> {
+    class?: string;
+    name?: string;
+}
+
+/**
+ * Type to convert underscores to PascalCase
+ * This helper type processes a single segment by capitalizing after underscores
+ */
+type SegmentToPascalCase<S extends string> = S extends `${infer First}_${infer Rest}` ? `${Capitalize<First>}${SegmentToPascalCase<Rest>}` : Capitalize<S>;
+/**
+ * Type to convert a dot-separated path to PascalCase
+ * This uses recursion to handle any level of nesting
+ * Also handles underscores by removing them and capitalizing each segment
+ */
+type PathToPascalCase<P extends string> = P extends `${infer A}.${infer B}` ? `${SegmentToPascalCase<A>}${PathToPascalCase<B>}` : `${SegmentToPascalCase<P>}Field`;
+/**
+ * Type that maps field paths to their corresponding enum types
+ */
+type FieldPathToEnum<T, P extends Path<T>> = P extends keyof T ? T[P] extends string ? T[P] : string : string;
+/**
+ * Type that extracts the array element type from a field path
+ * If the path points to an array, it extracts the element type
+ * @example
+ * ArrayItemType<{users: User[]}, 'users'> = User
+ * ArrayItemType<{tasks: Task[]}, 'tasks'> = Task
+ */
+type ArrayItemType<T, P extends Path<T>> = P extends keyof T ? T[P] extends ReadonlyArray<infer Item> ? Item : T[P] extends Array<infer Item> ? Item : never : never;
+/**
+ * Type for array field components with properly typed slots
+ */
+type ArrayFieldComponent<T, P extends Path<T>> = vue.FunctionalComponent<Omit<ArrayFieldProps<T, ArrayItemType<T, P>>, 'name'>, {}, {
+    itemRenderer: (props: {
+        item: ArrayItemType<T, P>;
+        index: number;
+        getFieldName: (fieldPath: string) => string;
+    }) => any;
+    availableItemRenderer: (props: {
+        item: ArrayItemType<T, P>;
+        index: number;
+    }) => any;
+    default: () => any;
+}, {}>;
+/**
+ * Type for enum field components that require valueToLabel
+ */
+type EnumFieldComponent<T, P extends Path<T>> = (props: Omit<SelectFieldProps<T>, 'name' | 'valueToLabel'> & {
+    valueToLabel: Record<FieldPathToEnum<T, P>, string>;
+}, context?: any) => any;
+/**
+ * Type for text field components
+ */
+type TextFieldComponent<T> = (props: Omit<TextFieldProps<T>, 'name'>, context?: any) => any;
+/**
+ * Type for select field components (can work with string or enum fields)
+ */
+type SelectFieldComponent<T, P extends Path<T>> = (props: Omit<SelectFieldProps<T>, 'name'>, context?: any) => any;
+/**
+ * Type for number field components
+ */
+type NumberFieldComponent<T> = (props: Omit<NumberFieldProps<T>, 'name'>, context?: any) => any;
+/**
+ * Type for checkbox field components
+ */
+type CheckboxFieldComponent<T> = (props: Omit<CheckboxFieldProps<T>, 'name'>, context?: any) => any;
+/**
+ * Type for date field components
+ */
+type DateFieldComponent<T> = (props: Omit<DateFieldProps<T>, 'name'>, context?: any) => any;
+/**
+ * Generic field component type - fallback for any other field types
+ */
+type GenericFieldComponent = (props: any, context?: any) => any;
+/**
+ * Maps a field path to its component type based on the field's actual type
+ * Enums are explicitly passed as FieldType = 'enum' since they can't be auto-detected
+ * Everything else is inferred from the actual TypeScript type at the path
+ *
+ * For string fields, we allow both TextFieldComponent and SelectFieldComponent
+ * because string fields can use inputType: 'select' in metadata to become SelectFields
+ */
+type FieldComponentType<T, P extends Path<T>, FieldType extends string = 'string'> = FieldType extends 'enum' ? EnumFieldComponent<T, P> : P extends keyof T ? T[P] extends Array<any> | ReadonlyArray<any> ? ArrayFieldComponent<T, P> : T[P] extends number ? NumberFieldComponent<T> : T[P] extends boolean ? CheckboxFieldComponent<T> : T[P] extends Date ? DateFieldComponent<T> : T[P] extends string ? // String fields can be either TextField or SelectField depending on inputType metadata
+TextFieldComponent<T> | SelectFieldComponent<T, P> : GenericFieldComponent : GenericFieldComponent;
+/**
+ * Type for the components object with PascalCase keys derived from field paths
+ * Each component gets the right type based on what the field actually is
+ */
+type ComponentsType<T> = {
+    [K in Path<T> as PathToPascalCase<K & string>]: FieldComponentType<T, K>;
+};
+
+/**
+ * Types for field metadata in the form system
+ */
+/**
+ * Metadata about a form field
+ * This interface defines all the properties that describe a field's behavior and appearance
+ */
+interface FieldMetadata {
+    /** The full path to the field (e.g., 'user.firstName') */
+    path: string;
+    /** Whether the field is required (false if optional) */
+    isRequired: boolean;
+    /** The data type of the field */
+    type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'enum' | 'date' | 'union';
+    /** The input type for rendering the field */
+    inputType?: 'text' | 'email' | 'url' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'array' | 'currency' | 'date' | 'time' | 'datetime-local' | 'file' | 'range' | 'search';
+    /** The display label for the field */
+    label?: string;
+    /** Placeholder text for the field */
+    placeholder?: string;
+    /** Minimum value (for number fields) or length (for string/array fields) */
+    min?: number;
+    /** Maximum value (for number fields) or length (for string/array fields) */
+    max?: number;
+    /** Regular expression pattern for validation */
+    pattern?: RegExp;
+    /** Options for enum fields */
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Default value for the field */
+    defaultValue?: any;
+    /** Whether the field is an array */
+    isArray?: boolean;
+    /** Metadata for array element type */
+    arrayOf?: FieldMetadata;
+    /** Child field metadata for object types */
+    children?: Record<string, FieldMetadata>;
+    /** Available items for array fields */
+    availableItems?: any[];
+    /** Help text to display with the field */
+    helpText?: string;
+    /** For textarea fields, number of rows to display */
+    rows?: number;
+    /** For textarea fields, number of columns to display */
+    cols?: number;
+    /** For enum fields, map values to display labels */
+    valueToLabel?: Record<string, string>;
+    /** Whether the field should be disabled */
+    disabled?: boolean;
+    /** Whether the field should be hidden */
+    hidden?: boolean;
+    /** CSS class to apply to the field */
+    className?: string;
+    /** Whether the field should be focused on load */
+    autofocus?: boolean;
+    /** For number fields, the step value */
+    step?: number;
+    /** Autocomplete attribute for the field */
+    autocomplete?: string;
+}
+
+/**
+ * Types for schema metadata in the form system
+ */
+
+/**
+ * Additional metadata that can be associated with schema fields
+ * This interface defines properties that can be attached to schema fields
+ * to customize their behavior and appearance
+ */
+interface SchemaFieldMetadata {
+    /** The input type for rendering the field */
+    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local';
+    /** Placeholder text for the field */
+    placeholder?: string;
+    /** The display label for the field */
+    label?: string;
+    /** Help text to display with the field */
+    helpText?: string;
+    /** For textarea fields, number of rows to display */
+    rows?: number;
+    /** For textarea fields, number of columns to display */
+    cols?: number;
+    /** For enum fields, map values to display labels */
+    valueToLabel?: Record<string, string>;
+    /** Whether to hide validation errors */
+    hideError?: boolean;
+    /** Step value for numeric fields */
+    step?: number;
+    /** Any other custom properties */
+    [key: string]: any;
+}
+/**
+ * Type for the registry mapping field paths to their metadata
+ */
+type MetadataRegistry = Record<string, SchemaFieldMetadata>;
+/**
+ * Type helper to extract all possible paths from a Zod schema
+ */
+type PathsOf<T extends z.ZodTypeAny> = Path<z.infer<T>>;
+
+/**
+ * Types for style creators in the form system
+ */
+
+/**
+ * Interface for style creators that define how form components are rendered
+ * Each style creator is responsible for creating functional components for different form elements
+ */
+interface StyleCreators {
+    createForm: <FormType>() => FunctionalComponent<FormProps<FormType>, {}, any, {}>;
+    createSubmitButton: <FormType>() => FunctionalComponent<SubmitButtonProps<FormType>, {}, any, {}>;
+    createResetButton: <FormType>() => FunctionalComponent<ResetButtonProps<FormType>, {}, any, {}>;
+    createTextField: <FormType>() => FunctionalComponent<TextFieldProps<FormType>, {}, any, {}>;
+    createNumberField: <FormType>() => FunctionalComponent<NumberFieldProps<FormType>, {}, any, {}>;
+    createCurrencyField: <FormType>() => FunctionalComponent<CurrencyFieldProps<FormType>, {}, any, {}>;
+    createSelectField: <FormType>() => FunctionalComponent<SelectFieldProps<FormType>, {}, any, {}>;
+    createCheckboxField: <FormType>() => FunctionalComponent<CheckboxFieldProps<FormType>, {}, any, {}>;
+    createTextareaField: <FormType>() => FunctionalComponent<TextareaFieldProps<FormType>, {}, any, {}>;
+    createRadioField: <FormType>() => FunctionalComponent<RadioFieldProps<FormType>, {}, any, {}>;
+    createPasswordField: <FormType>() => FunctionalComponent<PasswordFieldProps<FormType>, {}, any, {}>;
+    createEmailField: <FormType>() => FunctionalComponent<EmailFieldProps<FormType>, {}, any, {}>;
+    createDateField: <FormType>() => FunctionalComponent<DateFieldProps<FormType>, {}, any, {}>;
+    createTelField: <FormType>() => FunctionalComponent<TelFieldProps<FormType>, {}, any, {}>;
+    createFileField: <FormType>() => FunctionalComponent<FileFieldProps<FormType>, {}, any, {}>;
+    createRangeField: <FormType>() => FunctionalComponent<RangeFieldProps<FormType>, {}, any, {}>;
+    createUrlField: <FormType>() => FunctionalComponent<UrlFieldProps<FormType>, {}, any, {}>;
+    createSearchField: <FormType>() => FunctionalComponent<SearchFieldProps<FormType>, {}, any, {}>;
+    createTimeField: <FormType>() => FunctionalComponent<TimeFieldProps<FormType>, {}, any, {}>;
+    createDateTimeLocalField: <FormType>() => FunctionalComponent<DateTimeLocalFieldProps<FormType>, {}, any, {}>;
+    createArrayField: <FormType, ItemType = any>() => FunctionalComponent<ArrayFieldProps<FormType, ItemType>, {}, {
+        itemRenderer: (props: {
+            item: ItemType;
+            index: number;
+            getFieldName: (fieldPath: string) => string;
+        }) => any;
+        availableItemRenderer: (props: {
+            item: ItemType;
+            index: number;
+        }) => any;
+        default: () => any;
+    }, {}>;
+    createTransferListField: <FormType, ItemType = any>() => FunctionalComponent<TransferListFieldProps<FormType, ItemType>, {}, {
+        itemRenderer: (props: {
+            item: ItemType;
+            index: number;
+            getFieldName: (fieldPath: string) => string;
+        }) => any;
+        availableItemRenderer: (props: {
+            item: ItemType;
+            index: number;
+        }) => any;
+        selectedItemRenderer: (props: {
+            item: ItemType;
+            index: number;
+            getFieldName: (fieldPath: string) => string;
+        }) => any;
+        default: () => any;
+    }, {}>;
+    createToppingsField: <FormType, ItemType = any>() => FunctionalComponent<ToppingsFieldProps<FormType, ItemType>, {}, {
+        itemRenderer: (props: {
+            item: ItemType;
+            index: number;
+            getFieldName: (fieldPath: string) => string;
+        }) => any;
+        availableItemRenderer: (props: {
+            item: ItemType;
+            index: number;
+        }) => any;
+        toppingRenderer: (props: {
+            topping: ItemType;
+            isSelected: boolean;
+            placement: string;
+            isExtra: boolean;
+        }) => any;
+        default: () => any;
+    }, {}>;
+    createFormErrorsSummary: () => FunctionalComponent<FormErrorsSummaryProps, {}, any, {}>;
+    createDisplay: <FormType>() => FunctionalComponent<DisplayProps<FormType>, {}, any, {}>;
+    createDisplayField: <FormType>() => FunctionalComponent<DisplayFieldProps<FormType>, {}, any, {}>;
+    createDeleteModal: <FormType>() => FunctionalComponent<DeleteModalProps<FormType>, {}, any, {}>;
+    createDataTable: <FormType>() => FunctionalComponent<DataTableProps<FormType>, {}, {
+        [key: `cell-${string}`]: (props: {
+            value: any;
+            row: FormType;
+            field: string;
+            formattedValue: string;
+        }) => any;
+        'selection-actions': (props: {
+            hasSelection: boolean;
+            selectedCount: number;
+            selectedRows: FormType[];
+            onClearSelection: () => void;
+            triggerBulkAction: (action: string) => void;
+        }) => any;
+        default: () => any;
+    }, {}>;
+}
+
+/**
+ * Options for merging server data with local changes
+ */
+interface MergeOptions<T> {
+    /**
+     * Fields to preserve from local storage when merging with server data
+     * If not provided, all fields will be merged with local data taking precedence
+     */
+    preserveLocalFields?: (keyof T)[];
+    /**
+     * Custom merge function to handle complex merging logic
+     * If provided, this will be used instead of the default merge strategy
+     */
+    customMergeFunction?: (serverData: T, localData: T) => T;
+}
+
+/**
+ * Types for registered styles
+ * This allows for autocomplete of registered style names
+ */
+/**
+ * Union type of all registered style names
+ * Update this when adding new built-in styles
+ */
+type BuiltInStyleName = 'daisy_ui' | 'plain';
+/**
+ * Type for custom registered style names
+ * This is a string literal type that can be extended by users
+ */
+type CustomStyleName = string;
+/**
+ * Union type of all possible style names
+ * This includes both built-in styles and custom styles
+ */
+type RegisteredStyleName = BuiltInStyleName | CustomStyleName;
+
+declare const ZINIA_FORM_KEY = "ziniaForm";
+declare const ZINIA_FIELDS_KEY = "ziniaFields";
+declare const ZINIA_FIELDS_GENERIC_KEY = "ziniaFieldsGeneric";
+declare const ZINIA_FORM_SCHEMA_KEY = "ziniaFormSchema";
+type DataLoaderReturnTypes<T> = {
+    [K in keyof T]: T[K] extends () => Promise<infer R> ? R : never;
+};
+/**
+ * Create a type-safe form system using functional components
+ *
+ * @param schema The Zod schema for the form
+ * @param options Form options
+ * @returns Form API and components
+ */
+declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer<T>, extraData?: DataLoaderReturnTypes<Record<string, () => Promise<any>>>) => any, ExtraDataType = DataLoaderReturnTypes<Record<string, () => Promise<any>>>>(schema: T, options: {
+    storeName: string;
+    schemaId?: string;
+    persistToLocalStorage?: boolean;
+    initialValues?: Partial<z.infer<typeof schema>>;
+    renderStyle?: RegisteredStyleName;
+    autoProvide?: boolean;
+    validateOnMount?: boolean;
+    mergeOptions?: MergeOptions<z.infer<typeof schema>>;
+    dataLoaders?: {
+        [K in keyof ExtraDataType]?: () => Promise<ExtraDataType[K]>;
+    };
+    fetchData?: () => Promise<z.infer<typeof schema>>;
+    calculationFn?: (values: z.infer<T>, extraData?: ExtraDataType) => CalcType;
+    debug?: {
+        all?: boolean;
+        formState?: boolean;
+        validation?: boolean;
+        calculations?: boolean;
+        persistence?: boolean;
+        reactivity?: boolean;
+    };
+}): {
+    form: {
+        storeName: string;
+        values: z.TypeOf<T>;
+        readonly calculatedValues: CalcType;
+        readonly extraData: ExtraDataType;
+        readonly isValid: boolean;
+        readonly isDirty: boolean;
+        isSubmitting: boolean;
+        readonly hasAttemptedSubmit: boolean;
+        readonly submitAttemptsCount: number;
+        readonly errors: Record<string, string>;
+        readonly touched: Record<string, boolean>;
+        readonly dirty: Record<string, boolean>;
+        fieldsMetadata: Record<string, FieldMetadata>;
+        validate: (options?: {
+            markErrorsAsTouched: boolean;
+        }) => boolean;
+        validateField: (path: string) => boolean;
+        reset: (newInitialData?: z.TypeOf<T> | undefined) => void;
+        setSubmitting: (value: boolean) => void;
+        incrementSubmitAttempts: () => void;
+        setSubmitError: (error: string | null) => void;
+        readonly isReady: boolean;
+        readonly isLoading: boolean;
+        readonly loadError: string | null;
+        readonly submitError: string | null;
+        setLoading: (value: boolean) => void;
+        setReady: (value: boolean) => void;
+        setLoadError: (error: string | null) => void;
+        getValue: (path: string) => any;
+        setValue: (path: string, value: any) => void;
+        touchField: (path: string) => void;
+        isTouched: (path: string) => boolean;
+        isDirtyField: (path: string) => boolean;
+        resetField: (path: string) => void;
+        hasError: (path: string) => boolean;
+        getError: (path: string) => string;
+    };
+    ZiniaForm: vue.FunctionalComponent<FormProps<z.TypeOf<T>>, {}, any, {}>;
+    ZiniaSubmitButton: vue.FunctionalComponent<SubmitButtonProps<z.TypeOf<T>>, {}, any, {}>;
+    ZiniaResetButton: vue.FunctionalComponent<ResetButtonProps<z.TypeOf<T>>, {}, any, {}>;
+    ZiniaFormErrorsSummary: vue.FunctionalComponent<FormErrorsSummaryProps, {}, any, {}>;
+    zinia: ComponentsType<z.TypeOf<T>>;
+    ziniaGeneric: {
+        TextField: vue.FunctionalComponent<TextFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        NumberField: vue.FunctionalComponent<NumberFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        SelectField: vue.FunctionalComponent<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, {}, any, {}>;
+        CheckboxField: vue.FunctionalComponent<CheckboxFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TextareaField: vue.FunctionalComponent<TextareaFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        RadioField: vue.FunctionalComponent<RadioFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        FileField: vue.FunctionalComponent<FileFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        DateField: vue.FunctionalComponent<DateFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TimeField: vue.FunctionalComponent<TimeFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        DateTimeLocalField: vue.FunctionalComponent<DateTimeLocalFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        RangeField: vue.FunctionalComponent<RangeFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        PasswordField: vue.FunctionalComponent<PasswordFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        EmailField: vue.FunctionalComponent<EmailFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        UrlField: vue.FunctionalComponent<UrlFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TelField: vue.FunctionalComponent<TelFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        SearchField: vue.FunctionalComponent<SearchFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        ArrayField: vue.FunctionalComponent<ArrayFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        TransferListField: vue.FunctionalComponent<TransferListFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            selectedItemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        ToppingsField: vue.FunctionalComponent<ToppingsFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            toppingRenderer: (props: {
+                topping: any;
+                isSelected: boolean;
+                placement: string;
+                isExtra: boolean;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        createTypedSelectField: <P extends Path<z.TypeOf<T>>>(fieldPath: P) => <E extends FieldPathToEnum<z.TypeOf<T>, P> = FieldPathToEnum<z.TypeOf<T>, P>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, "name" | "valueToLabel"> & {
+            valueToLabel: Record<E, string>;
+        }, context?: any) => any;
+        typedSelectFields: { [K in Path<z.TypeOf<T>>]?: (<E extends FieldPathToEnum<z.TypeOf<T>, K> = FieldPathToEnum<z.TypeOf<T>, K>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, "name" | "valueToLabel"> & {
+            valueToLabel: Record<E, string>;
+        }, context?: any) => any) | undefined; };
+        fields: Record<Path<z.TypeOf<T>>, any>;
+        field: <P extends Path<z.TypeOf<T>>>(path: P) => any;
+    };
+    load: () => Promise<void>;
+    loadAllData: () => Promise<void>;
+    refreshFormData: () => Promise<void>;
+    clearSavedFormState: () => void;
+    refreshData: (keys?: Array<keyof ExtraDataType>) => Promise<void>;
+};
+type UseFormType = ReturnType<typeof useForm>;
+type ZiniaForm = UseFormType['form'];
+type ZiniaFormFields = UseFormType['zinia'];
+type ZiniaFormGenericFields = UseFormType['ziniaGeneric'];
+type UseFormTyped<T extends z.ZodObject<any>, CalcType = any, ExtraDataType extends Record<string, any> = Record<string, any>> = ReturnType<typeof useForm<T, CalcType, ExtraDataType>>;
+
+/**
+ * Create base form components for a schema
+ *
+ * @param schema The Zod schema for the form
+ * @param renderStyle The style to use for rendering
+ * @returns Base form components (Form, SubmitButton, ResetButton)
+ */
+declare function createBaseComponents<T extends z.ZodObject<any>>(schema: T, styleName?: RegisteredStyleName): {
+    Form: vue.FunctionalComponent<FormProps<z.TypeOf<T>>, {}, any, {}>;
+    SubmitButton: vue.FunctionalComponent<SubmitButtonProps<z.TypeOf<T>>, {}, any, {}>;
+    ResetButton: vue.FunctionalComponent<ResetButtonProps<z.TypeOf<T>>, {}, any, {}>;
+    FormErrorsSummary: vue.FunctionalComponent<FormErrorsSummaryProps, {}, any, {}>;
+};
+
+/**
+ * Functions for creating type-safe select fields
+ */
+
+/**
+ * Create a factory function that returns a properly typed SelectField based on the field path
+ *
+ * @param baseSelectField The base select field component
+ * @param fieldPath The field path to create a select field for
+ * @returns A factory function that creates a type-safe select field
+ */
+declare function createTypedSelectField<T, P extends Path<T>>(baseSelectField: FunctionalComponent<SelectFieldProps<T>>, fieldPath: P): <E extends FieldPathToEnum<T, P> = FieldPathToEnum<T, P>>(props: Omit<SelectFieldProps<T>, "name" | "valueToLabel"> & {
+    valueToLabel: Record<E, string>;
+}, context?: any) => any;
+/**
+ * Type-safe select field component with valueToLabel based on field path
+ */
+interface TypedSelectFieldComponent<T> {
+    <P extends Path<T>>(props: Omit<SelectFieldProps<T>, 'valueToLabel'> & {
+        name: P;
+        valueToLabel?: Record<string, string>;
+    }): ReturnType<FunctionalComponent>;
+}
+
+/**
+ * Functions for creating type-safe array fields
+ */
+
+/**
+ * Create a factory function that returns a properly typed ArrayField based on the field path
+ * This preserves the ItemType so that Vue's template slots are properly typed
+ *
+ * @param baseArrayField The base array field component
+ * @param fieldPath The field path to create an array field for
+ * @param metadata Optional metadata to apply to the field
+ * @returns A properly typed array field component with slot types preserved
+ */
+declare function createTypedArrayField<T, P extends Path<T>>(baseArrayField: FunctionalComponent<ArrayFieldProps<T, any>, {}, any, {}>, fieldPath: P, metadata?: FieldMetadata): FunctionalComponent<Omit<ArrayFieldProps<T, ArrayItemType<T, P>>, "name">, {}, {
+    itemRenderer: (props: {
+        item: ArrayItemType<T, P>;
+        index: number;
+        getFieldName: (fieldPath: string) => string;
+    }) => any;
+    availableItemRenderer: (props: {
+        item: ArrayItemType<T, P>;
+        index: number;
+    }) => any;
+    default: () => any;
+}, {}>;
+
+/**
+ * Generate field components for a schema based on metadata
+ *
+ * @param schema The Zod schema for the form
+ * @param fieldsMetadata Metadata for form fields
+ * @param renderStyle The style to use for rendering
+ * @returns Generated field components
+ */
+declare function generateFieldComponents<T extends z.ZodObject<any>>(schema: T, fieldsMetadata: Record<string, FieldMetadata>, styleName?: RegisteredStyleName): {
+    generic: {
+        TextField: vue.FunctionalComponent<TextFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        NumberField: vue.FunctionalComponent<NumberFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        SelectField: vue.FunctionalComponent<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, {}, any, {}>;
+        CheckboxField: vue.FunctionalComponent<CheckboxFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TextareaField: vue.FunctionalComponent<TextareaFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        RadioField: vue.FunctionalComponent<RadioFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        FileField: vue.FunctionalComponent<FileFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        DateField: vue.FunctionalComponent<DateFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TimeField: vue.FunctionalComponent<TimeFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        DateTimeLocalField: vue.FunctionalComponent<DateTimeLocalFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        RangeField: vue.FunctionalComponent<RangeFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        PasswordField: vue.FunctionalComponent<PasswordFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        EmailField: vue.FunctionalComponent<EmailFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        UrlField: vue.FunctionalComponent<UrlFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        TelField: vue.FunctionalComponent<TelFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        SearchField: vue.FunctionalComponent<SearchFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        ArrayField: vue.FunctionalComponent<ArrayFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        TransferListField: vue.FunctionalComponent<TransferListFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            selectedItemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        ToppingsField: vue.FunctionalComponent<ToppingsFieldProps<z.TypeOf<T>, any>, {}, {
+            itemRenderer: (props: {
+                item: any;
+                index: number;
+                getFieldName: (fieldPath: string) => string;
+            }) => any;
+            availableItemRenderer: (props: {
+                item: any;
+                index: number;
+            }) => any;
+            toppingRenderer: (props: {
+                topping: any;
+                isSelected: boolean;
+                placement: string;
+                isExtra: boolean;
+            }) => any;
+            default: () => any;
+        }, {}>;
+        createTypedSelectField: <P extends Path<z.TypeOf<T>>>(fieldPath: P) => <E extends FieldPathToEnum<z.TypeOf<T>, P> = FieldPathToEnum<z.TypeOf<T>, P>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, "name" | "valueToLabel"> & {
+            valueToLabel: Record<E, string>;
+        }, context?: any) => any;
+        typedSelectFields: { [K in Path<z.TypeOf<T>>]?: (<E extends FieldPathToEnum<z.TypeOf<T>, K> = FieldPathToEnum<z.TypeOf<T>, K>>(props: Omit<SelectFieldProps<z.TypeOf<T>, Path<z.TypeOf<T>>>, "name" | "valueToLabel"> & {
+            valueToLabel: Record<E, string>;
+        }, context?: any) => any) | undefined; };
+        fields: Record<Path<z.TypeOf<T>>, any>;
+        field: <P extends Path<z.TypeOf<T>>>(path: P) => any;
+    };
+    typed: ComponentsType<z.TypeOf<T>>;
+};
+
+/**
+ * Create base display components using registered styles
+ *
+ * @param schema The Zod schema for the data
+ * @param styleName The style to use for rendering
+ * @returns Base display components
+ */
+declare function createBaseDisplayComponents<T extends z.ZodObject<any>>(schema: T, styleName?: RegisteredStyleName): {
+    ZiniaDisplay: vue.FunctionalComponent<DisplayProps<z.TypeOf<T>>, {}, any, {}>;
+};
+
+/**
+ * Type for display field components
+ */
+type DisplayFieldComponent<T, P extends Path<T>, _FieldType extends string = 'string'> = (props: {
+    name?: P;
+    label?: string;
+    hideLabel?: boolean;
+    description?: string;
+    format?: 'default' | 'currency' | 'date' | 'datetime' | 'boolean' | 'email' | 'url' | 'phone' | 'number';
+    emptyText?: string;
+    class?: string | string[];
+    size?: string;
+    variant?: string;
+    copyable?: boolean;
+    valueToLabel?: Record<string, string>;
+    separator?: string;
+    itemRenderer?: (item: any, index: number) => string;
+    maxItems?: number;
+}, context?: any) => any;
+/**
+ * Type for the display components object with PascalCase keys derived from field paths
+ * This mirrors the ComponentsType from the form system but with Display suffix
+ */
+type DisplayComponentsType<T> = {
+    [K in Path<T> as `${PathToPascalCase<K & string>}` extends `${infer Base}Field` ? `${Base}Display` : `${PathToPascalCase<K & string>}Display`]: DisplayFieldComponent<T, K>;
+};
+/**
+ * Generate display field components for a schema based on metadata
+ *
+ * @param schema The Zod schema for the data
+ * @param fieldsMetadata Metadata for fields
+ * @param renderStyle The style to use for rendering
+ * @returns Generated display field components
+ */
+declare function generateDisplayComponents<T extends z.ZodObject<any>>(schema: T, fieldsMetadata: Record<string, FieldMetadata>, styleName?: RegisteredStyleName): {
+    generic: {
+        DisplayField: vue.FunctionalComponent<DisplayFieldProps<z.TypeOf<T>>, {}, any, {}>;
+        fields: { [K in Path<z.TypeOf<T>>]: DisplayFieldComponent<z.TypeOf<T>, K, string>; };
+        field: <P extends Path<z.TypeOf<T>>>(path: P) => any;
+    };
+    typed: DisplayComponentsType<z.TypeOf<T>>;
+};
+
+interface NoDataDisplayProps {
+    message?: string;
+    class?: string;
+    variant?: 'info' | 'warning';
+}
+declare const NoDataDisplay: FunctionalComponent<NoDataDisplayProps>;
+
+interface ErrorDisplayProps {
+    error: string | Error | unknown;
+    class?: string;
+    variant?: 'error' | 'warning' | 'info';
+}
+declare const ErrorDisplay: FunctionalComponent<ErrorDisplayProps>;
+
+interface LoadingDisplayProps {
+    message?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const LoadingDisplay: FunctionalComponent<LoadingDisplayProps>;
+
+declare const ZINIA_DISPLAY_KEY = "ziniaDisplay";
+declare const ZINIA_DISPLAY_FIELDS_KEY = "ziniaDisplayFields";
+declare const ZINIA_DISPLAY_FIELDS_GENERIC_KEY = "ziniaDisplayFieldsGeneric";
+declare const ZINIA_DISPLAY_SCHEMA_KEY = "ziniaDisplaySchema";
+interface DisplayOptions<TData, TExtra extends Record<string, any>> {
+    data?: TData | Ref<TData>;
+    schemaId?: string;
+    storeName?: string;
+    renderStyle?: RegisteredStyleName;
+    autoProvide?: boolean;
+    loading?: boolean | Ref<boolean>;
+    error?: string | null | Ref<string | null>;
+    fetchData?: () => Promise<TData>;
+    dataLoaders?: {
+        [K in keyof TExtra]?: () => Promise<TExtra[K]>;
+    };
+    autoLoad?: boolean;
+    onLoad?: (data: TData) => void;
+    onError?: (error: Error) => void;
+    debug?: boolean;
+}
+declare function useDisplay<TSchema extends z.ZodObject<any>, TExtra extends Record<string, any> = Record<string, any>>(schema: TSchema, options?: DisplayOptions<z.infer<TSchema>, TExtra>): {
+    display: {
+        storeName: string;
+        readonly data: z.TypeOf<TSchema> | null;
+        readonly extraData: TExtra;
+        readonly isLoading: boolean;
+        readonly isReady: boolean;
+        readonly error: string | null;
+        readonly lastLoadTime: number | null;
+        fieldsMetadata: Record<string, FieldMetadata>;
+        readonly isAsyncMode: boolean;
+        load: (options_?: {
+            data?: boolean;
+            extra?: boolean;
+            specificLoaders?: Array<keyof TExtra>;
+        }) => Promise<void>;
+        loadData: () => Promise<void>;
+        loadExtraData: (keys?: Array<keyof TExtra>) => Promise<void>;
+        loadAllData: () => Promise<void>;
+        refreshData: () => Promise<void>;
+        clear: () => void;
+        getValue: (path: string) => any;
+    };
+    ZiniaDisplay: vue.FunctionalComponent<DisplayProps<z.TypeOf<TSchema>>, {}, any, {}>;
+    LoadingDisplay: vue.FunctionalComponent<LoadingDisplayProps, {}, any, {}>;
+    ErrorDisplay: vue.FunctionalComponent<ErrorDisplayProps, {}, any, {}>;
+    NoDataDisplay: vue.FunctionalComponent<NoDataDisplayProps, {}, any, {}>;
+    zinia: DisplayComponentsType<z.TypeOf<TSchema>>;
+    ziniaGeneric: {
+        DisplayField: vue.FunctionalComponent<DisplayFieldProps<z.TypeOf<TSchema>>, {}, any, {}>;
+        fields: { [K in Path<z.TypeOf<TSchema>>]: DisplayFieldComponent<z.TypeOf<TSchema>, K, string>; };
+        field: <P extends Path<z.TypeOf<TSchema>>>(path: P) => any;
+    };
+    load: (options_?: {
+        data?: boolean;
+        extra?: boolean;
+        specificLoaders?: Array<keyof TExtra>;
+    }) => Promise<void>;
+    loadData: () => Promise<void>;
+    loadExtraData: (keys?: Array<keyof TExtra>) => Promise<void>;
+    loadAllData: () => Promise<void>;
+    refreshData: () => Promise<void>;
+    clear: () => void;
+};
+type UseDisplayType<TSchema extends z.ZodObject<any>, TExtra extends Record<string, any> = Record<string, any>> = ReturnType<typeof useDisplay<TSchema, TExtra>>;
+type ZiniaDisplay<TSchema extends z.ZodObject<any> = z.ZodObject<any>, TExtra extends Record<string, any> = Record<string, any>> = UseDisplayType<TSchema, TExtra>['display'];
+type ZiniaDisplayFields<TSchema extends z.ZodObject<any>, TExtra extends Record<string, any> = Record<string, any>> = UseDisplayType<TSchema, TExtra>['zinia'];
+type ZiniaDisplayGenericFields<TSchema extends z.ZodObject<any>, TExtra extends Record<string, any> = Record<string, any>> = UseDisplayType<TSchema, TExtra>['ziniaGeneric'];
+
+declare const ZINIA_DATA_TABLE_KEY = "ziniaDataTable";
+declare const ZINIA_DATA_TABLE_COLUMNS_KEY = "ziniaDataTableColumns";
+declare const ZINIA_DATA_TABLE_OPTIONS_KEY = "ziniaDataTableOptions";
+declare const ZINIA_DATA_TABLE_ACTIONS_KEY = "ziniaDataTableActions";
+declare const ZINIA_DATA_TABLE_SEARCH_INPUT_KEY = "ziniaDataTableSearchInput";
+declare const ZINIA_DATA_TABLE_FILTER_INPUTS_KEY = "ziniaDataTableFilterInputs";
+declare const ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY = "ziniaDataTableFilterOperators";
+declare const ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY = "ziniaDataTableFilterOptionsState";
+declare const ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY = "ziniaDataTableFilterOptionsLoading";
+declare const ZINIA_DATA_TABLE_NAME_KEY = "ziniaDataTableName";
+interface FilterValue {
+    value: any;
+    operator: 'eq' | 'contains' | 'gt' | 'lt' | 'in' | 'between';
+}
+interface BaseActionItem<TData> {
+    key: string;
+    /**
+     * Label for the action. Optional - you can have icon-only, label-only, or both.
+     * At least one of label or icon must be provided.
+     */
+    label?: string;
+    /**
+     * Icon for the action. Optional - you can have icon-only, label-only, or both.
+     * At least one of label or icon must be provided.
+     *
+     * Supports multiple formats:
+     * - SVG string: ActionIcons.edit or '<svg>...</svg>'
+     * - Vue component: import { PencilIcon } from '@heroicons/vue/24/outline'; then use PencilIcon
+     * - Function: (row) => row.status === 'active' ? EditIcon : ViewIcon
+     */
+    icon?: string | any | ((row: TData) => any);
+    variant?: 'primary' | 'secondary' | 'accent' | 'ghost' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    visible?: (row: TData) => boolean;
+    disabled?: (row: TData) => boolean;
+}
+interface ButtonActionItem<TData> extends BaseActionItem<TData> {
+    type?: 'button';
+    onClick: (row: TData, action: ActionItem<TData>) => void | Promise<void>;
+}
+interface LinkActionItem<TData> extends BaseActionItem<TData> {
+    type: 'link';
+    href: (row: TData) => string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+}
+type ActionItem<TData> = ButtonActionItem<TData> | LinkActionItem<TData>;
+interface ActionsConfig<TData> {
+    column?: {
+        label?: string;
+        align?: 'left' | 'center' | 'right';
+        width?: number;
+    };
+    items: ActionItem<TData>[];
+}
+interface ColumnDefinition<TData, TField extends keyof TData> {
+    field?: TField;
+    label: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    searchable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    textWrap?: 'truncate' | 'wrap';
+    format?: (value: TData[TField], row: TData) => string;
+    render?: (value: TData[TField], row: TData) => any;
+    filterType?: 'text' | 'select' | 'number' | 'boolean';
+    filterOptions?: any[];
+    filterOptionsLoader?: () => Promise<any[]>;
+    sortLabels?: {
+        asc: string;
+        desc: string;
+    };
+}
+interface FetchDataParams<TData> {
+    page: number;
+    pageSize: number;
+    sort: {
+        field: keyof TData;
+        direction: 'asc' | 'desc';
+    } | null;
+    filters: Record<string, FilterValue>;
+    search: {
+        query: string;
+        searchableFields: Array<keyof TData>;
+    };
+}
+interface FetchDataResult<TData> {
+    data: TData[];
+    total: number;
+}
+interface DataTableOptions<TData> {
+    fetchData: (params: FetchDataParams<TData>) => Promise<FetchDataResult<TData>>;
+    columns: {
+        [K in keyof TData]?: ColumnDefinition<TData, K>;
+    } & {
+        [key: string]: ColumnDefinition<TData, any>;
+    };
+    actions?: ActionsConfig<TData>;
+    pagination?: {
+        pageSize?: number;
+        pageSizeOptions?: number[];
+    };
+    selection?: {
+        mode?: 'single' | 'multiple' | 'none';
+        rowKey?: keyof TData;
+    };
+    sorting?: {
+        default?: {
+            field: keyof TData;
+            direction: 'asc' | 'desc';
+        };
+    };
+    search?: {
+        searchableFields?: Array<keyof TData>;
+    };
+    renderStyle?: RegisteredStyleName;
+    schemaId?: string;
+    name?: string;
+    autoProvide?: boolean;
+    debug?: boolean;
+    onLoad?: (data: TData[]) => void;
+    onError?: (error: Error) => void;
+    onSelectionChange?: (selectedItems: TData[], selectionInfo: {
+        count: number;
+        isAllSelected: boolean;
+    }) => void;
+    onBulkAction?: (action: string, selectedItems: TData[]) => void;
+}
+declare function useDataTable<TSchema extends z.ZodObject<any>>(schema: TSchema, options: DataTableOptions<z.infer<TSchema>>): {
+    table: {
+        readonly data: z.TypeOf<TSchema>[];
+        readonly isLoading: boolean;
+        readonly error: string | null;
+        readonly hasData: boolean;
+        readonly isEmpty: boolean;
+        readonly hasError: boolean;
+        readonly lastLoadTime: number | null;
+        pagination: {
+            readonly currentPage: number;
+            readonly pageSize: number;
+            readonly totalPages: number;
+            readonly totalRows: number;
+            readonly canGoNext: boolean;
+            readonly canGoPrev: boolean;
+            readonly currentPageStart: number;
+            readonly currentPageEnd: number;
+            readonly hasTotal: boolean;
+        };
+        sorting: {
+            readonly field: keyof z.TypeOf<TSchema> | null;
+            readonly direction: "asc" | "desc";
+        };
+        filters: {
+            readonly active: Record<string, FilterValue>;
+            readonly count: number;
+        };
+        search: {
+            readonly query: string;
+            readonly searchableFields: Array<keyof z.TypeOf<TSchema>>;
+        };
+        selection: {
+            readonly selectedRows: z.TypeOf<TSchema>[];
+            readonly selectedCount: number;
+            readonly isAllSelected: boolean;
+            readonly hasSelection: boolean;
+        };
+        load: () => Promise<void>;
+        refresh: () => Promise<void>;
+        sort: (field: keyof z.TypeOf<TSchema>, direction?: "asc" | "desc") => Promise<void>;
+        clearSort: () => Promise<void>;
+        setFilter: (field: keyof z.TypeOf<TSchema>, value: any, operator?: FilterValue["operator"]) => Promise<void>;
+        clearFilter: (field: keyof z.TypeOf<TSchema>) => Promise<void>;
+        clearAllFilters: () => Promise<void>;
+        setSearch: (query: string) => Promise<void>;
+        clearSearch: () => Promise<void>;
+        goToPage: (page: number) => Promise<void>;
+        setPageSize: (size: number) => Promise<void>;
+        nextPage: () => Promise<void>;
+        prevPage: () => Promise<void>;
+        selectRow: (row: z.TypeOf<TSchema>) => void;
+        selectAll: () => void;
+        clearSelection: () => void;
+        isRowSelected: (row: z.TypeOf<TSchema>) => boolean;
+        triggerBulkAction: (action: string) => void;
+        ui: {
+            sortDrawerOpen: vue.Ref<boolean, boolean>;
+            openSortDrawer: () => boolean;
+            closeSortDrawer: () => boolean;
+        };
+        fieldsMetadata: Record<string, FieldMetadata>;
+        columns: (z.TypeOf<TSchema> extends infer T ? { [K in keyof T]?: ColumnDefinition<z.TypeOf<TSchema>, K> | undefined; } : never) & {
+            [key: string]: ColumnDefinition<z.TypeOf<TSchema>, any>;
+        };
+    };
+    ZiniaDataTable: vue.FunctionalComponent<DataTableProps<z.TypeOf<TSchema>>, {}, {
+        [key: `cell-${string}`]: (props: {
+            value: any;
+            row: z.TypeOf<TSchema>;
+            field: string;
+            formattedValue: string;
+        }) => any;
+        'selection-actions': (props: {
+            hasSelection: boolean;
+            selectedCount: number;
+            selectedRows: z.TypeOf<TSchema>[];
+            onClearSelection: () => void;
+            triggerBulkAction: (action: string) => void;
+        }) => any;
+        default: () => any;
+    }, {}>;
+    load: () => Promise<void>;
+    refresh: () => Promise<void>;
+    sort: (field: keyof z.TypeOf<TSchema>, direction?: "asc" | "desc") => Promise<void>;
+    clearSort: () => Promise<void>;
+    setFilter: (field: keyof z.TypeOf<TSchema>, value: any, operator?: FilterValue["operator"]) => Promise<void>;
+    clearFilter: (field: keyof z.TypeOf<TSchema>) => Promise<void>;
+    clearAllFilters: () => Promise<void>;
+    setSearch: (query: string) => Promise<void>;
+    clearSearch: () => Promise<void>;
+    goToPage: (page: number) => Promise<void>;
+    setPageSize: (size: number) => Promise<void>;
+    nextPage: () => Promise<void>;
+    prevPage: () => Promise<void>;
+    selectRow: (row: z.TypeOf<TSchema>) => void;
+    selectAll: () => void;
+    clearSelection: () => void;
+    isRowSelected: (row: z.TypeOf<TSchema>) => boolean;
+};
+type UseDataTableType<TSchema extends z.ZodObject<any>> = ReturnType<typeof useDataTable<TSchema>>;
+type ZiniaDataTable<TSchema extends z.ZodObject<any>> = UseDataTableType<TSchema>['table'];
+type DataTableColumns<TData> = {
+    [K in keyof TData]?: ColumnDefinition<TData, K>;
+};
+
+interface CursorFetchParams<TData> {
+    cursor?: string;
+    pageSize: number;
+    sort: {
+        field: keyof TData;
+        direction: 'asc' | 'desc';
+    } | null;
+    filters: Record<string, any>;
+    search: {
+        query: string;
+        searchableFields: Array<keyof TData>;
+    };
+}
+interface CursorFetchResult<TData> {
+    data: TData[];
+    total?: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    prevPageCursor?: string;
+    nextPageCursor?: string;
+}
+interface CursorDataTableOptions<TData> {
+    fetchData: (params: CursorFetchParams<TData>) => Promise<CursorFetchResult<TData>>;
+    columns: {
+        [K in keyof TData]?: ColumnDefinition<TData, K>;
+    } & {
+        [key: string]: ColumnDefinition<TData, any>;
+    };
+    actions?: ActionsConfig<TData>;
+    pagination?: {
+        pageSize?: number;
+        pageSizeOptions?: number[];
+    };
+    selection?: {
+        mode?: 'single' | 'multiple' | 'none';
+        rowKey?: keyof TData;
+    };
+    sorting?: {
+        default?: {
+            field: keyof TData;
+            direction: 'asc' | 'desc';
+        };
+    };
+    search?: {
+        searchableFields?: Array<keyof TData>;
+    };
+    renderStyle?: RegisteredStyleName;
+    schemaId?: string;
+    name?: string;
+    autoProvide?: boolean;
+    debug?: boolean;
+    onLoad?: (data: TData[]) => void;
+    onError?: (error: Error) => void;
+    onSelectionChange?: (selectedItems: TData[], selectionInfo: {
+        count: number;
+        isAllSelected: boolean;
+    }) => void;
+    onBulkAction?: (action: string, selectedItems: TData[]) => void;
+}
+declare function useCursorDataTable<TSchema extends z.ZodObject<any>>(schema: TSchema, options: CursorDataTableOptions<z.infer<TSchema>>): {
+    table: {
+        readonly data: z.TypeOf<TSchema>[];
+        readonly isLoading: boolean;
+        readonly error: string | null;
+        readonly hasData: boolean;
+        readonly isEmpty: boolean;
+        readonly hasError: boolean;
+        readonly lastLoadTime: number | null;
+        pagination: {
+            readonly currentPage: number;
+            readonly pageSize: number;
+            readonly totalPages: number;
+            readonly totalRows: number;
+            readonly hasTotal: boolean;
+            readonly canGoNext: boolean;
+            readonly canGoPrev: boolean;
+            readonly currentPageStart: number;
+            readonly currentPageEnd: number;
+        };
+        sorting: {
+            readonly field: keyof z.TypeOf<TSchema> | null;
+            readonly direction: "asc" | "desc";
+        };
+        filters: {
+            readonly active: Record<string, any>;
+            readonly count: number;
+        };
+        search: {
+            readonly query: string;
+            readonly searchableFields: Array<keyof z.TypeOf<TSchema>>;
+        };
+        selection: {
+            readonly selectedRows: z.TypeOf<TSchema>[];
+            readonly selectedCount: number;
+            readonly isAllSelected: boolean;
+            readonly hasSelection: boolean;
+        };
+        load: () => Promise<void>;
+        refresh: () => Promise<void>;
+        sort: (field: keyof z.TypeOf<TSchema>, direction?: "asc" | "desc") => Promise<void>;
+        clearSort: () => Promise<void>;
+        setFilter: (field: keyof z.TypeOf<TSchema>, value: any, operator?: any) => Promise<void>;
+        clearFilter: (field: keyof z.TypeOf<TSchema>) => Promise<void>;
+        clearAllFilters: () => Promise<void>;
+        setSearch: (query: string) => Promise<void>;
+        clearSearch: () => Promise<void>;
+        nextPage: () => Promise<void>;
+        prevPage: () => Promise<void>;
+        firstPage: () => Promise<void>;
+        setPageSize: (size: number) => Promise<void>;
+        selectRow: (row: z.TypeOf<TSchema>) => void;
+        selectAll: () => void;
+        clearSelection: () => void;
+        isRowSelected: (row: z.TypeOf<TSchema>) => boolean;
+        triggerBulkAction: (action: string) => void;
+        ui: {
+            sortDrawerOpen: vue.Ref<boolean, boolean>;
+            openSortDrawer: () => boolean;
+            closeSortDrawer: () => boolean;
+        };
+        fieldsMetadata: Record<string, FieldMetadata>;
+        columns: (z.TypeOf<TSchema> extends infer T ? { [K in keyof T]?: ColumnDefinition<z.TypeOf<TSchema>, K> | undefined; } : never) & {
+            [key: string]: ColumnDefinition<z.TypeOf<TSchema>, any>;
+        };
+    };
+    ZiniaDataTable: vue.FunctionalComponent<DataTableProps<z.TypeOf<TSchema>>, {}, {
+        [key: `cell-${string}`]: (props: {
+            value: any;
+            row: z.TypeOf<TSchema>;
+            field: string;
+            formattedValue: string;
+        }) => any;
+        'selection-actions': (props: {
+            hasSelection: boolean;
+            selectedCount: number;
+            selectedRows: z.TypeOf<TSchema>[];
+            onClearSelection: () => void;
+            triggerBulkAction: (action: string) => void;
+        }) => any;
+        default: () => any;
+    }, {}>;
+    load: () => Promise<void>;
+    refresh: () => Promise<void>;
+    sort: (field: keyof z.TypeOf<TSchema>, direction?: "asc" | "desc") => Promise<void>;
+    clearSort: () => Promise<void>;
+    setFilter: (field: keyof z.TypeOf<TSchema>, value: any, operator?: any) => Promise<void>;
+    clearFilter: (field: keyof z.TypeOf<TSchema>) => Promise<void>;
+    clearAllFilters: () => Promise<void>;
+    setSearch: (query: string) => Promise<void>;
+    clearSearch: () => Promise<void>;
+    nextPage: () => Promise<void>;
+    prevPage: () => Promise<void>;
+    firstPage: () => Promise<void>;
+    setPageSize: (size: number) => Promise<void>;
+    selectRow: (row: z.TypeOf<TSchema>) => void;
+    selectAll: () => void;
+    clearSelection: () => void;
+    isRowSelected: (row: z.TypeOf<TSchema>) => boolean;
+};
+type UseCursorDataTableType<TSchema extends z.ZodObject<any>> = ReturnType<typeof useCursorDataTable<TSchema>>;
+
+declare const ZINIA_DELETE_MODAL_KEY = "ziniaDeleteModal";
+declare const ZINIA_DELETE_MODAL_FIELDS_KEY = "ziniaDeleteModalFields";
+declare const ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY = "ziniaDeleteModalFieldsGeneric";
+declare const ZINIA_DELETE_MODAL_SCHEMA_KEY = "ziniaDeleteModalSchema";
+interface DeleteModalOptions<TData> {
+    data: TData | Ref<TData>;
+    schemaId?: string;
+    renderStyle?: RegisteredStyleName;
+    autoProvide?: boolean;
+    loading?: boolean | Ref<boolean>;
+    error?: string | null | Ref<string | null>;
+    onDeleteConfirm: (data: TData) => Promise<void>;
+    onDeleteSuccess?: () => void;
+    onDeleteError?: (error: Error) => void;
+    debug?: boolean;
+}
+declare function useDeleteModal<TSchema extends z.ZodObject<any>>(schema: TSchema, options: DeleteModalOptions<z.infer<TSchema>>): {
+    deleteModal: {
+        readonly data: z.TypeOf<TSchema>;
+        readonly isLoading: boolean;
+        readonly error: string | null;
+        fieldsMetadata: Record<string, FieldMetadata>;
+        confirmDelete: () => Promise<void>;
+        clearError: () => void;
+        getValue: (path: string) => any;
+    };
+    ZiniaDeleteModal: vue.FunctionalComponent<DeleteModalProps<unknown>, {}, any, {}>;
+    LoadingDisplay: vue.FunctionalComponent<LoadingDisplayProps, {}, any, {}>;
+    ErrorDisplay: vue.FunctionalComponent<ErrorDisplayProps, {}, any, {}>;
+    NoDataDisplay: vue.FunctionalComponent<NoDataDisplayProps, {}, any, {}>;
+    zinia: DisplayComponentsType<z.TypeOf<TSchema>>;
+    ziniaGeneric: {
+        DisplayField: vue.FunctionalComponent<DisplayFieldProps<z.TypeOf<TSchema>>, {}, any, {}>;
+        fields: { [K in Path<z.TypeOf<TSchema>>]: DisplayFieldComponent<z.TypeOf<TSchema>, K, string>; };
+        field: <P extends Path<z.TypeOf<TSchema>>>(path: P) => any;
+    };
+    confirmDelete: () => Promise<void>;
+    clearError: () => void;
+};
+type UseDeleteModalType<TSchema extends z.ZodObject<any>> = ReturnType<typeof useDeleteModal<TSchema>>;
+type ZiniaDeleteModal<TSchema extends z.ZodObject<any>> = UseDeleteModalType<TSchema>['deleteModal'];
+type ZiniaDeleteModalFields<TSchema extends z.ZodObject<any>> = UseDeleteModalType<TSchema>['zinia'];
+type ZiniaDeleteModalGenericFields<TSchema extends z.ZodObject<any>> = UseDeleteModalType<TSchema>['ziniaGeneric'];
+
+/**
+ * Registry for storing schema metadata
+ */
+
+/**
+ * Get metadata for a specific field in a schema
+ *
+ * @param schemaId Unique identifier for the schema
+ * @param path Path to the field
+ * @returns Metadata for the field or undefined if not found
+ */
+declare function getFieldMetadata(schemaId: string, path: string): SchemaFieldMetadata | undefined;
+/**
+ * Get all metadata for a schema
+ *
+ * @param schemaId Unique identifier for the schema
+ * @returns All metadata for the schema or an empty object if not found
+ */
+declare function getAllSchemaMetadata(schemaId: string): MetadataRegistry;
+/**
+ * Set metadata for a schema
+ *
+ * @param schemaId Unique identifier for the schema
+ * @param metadata Object mapping field paths to their metadata
+ */
+declare function setSchemaMetadata(schemaId: string, metadata: MetadataRegistry): void;
+/**
+ * Check if a schema has metadata
+ *
+ * @param schemaId Unique identifier for the schema
+ * @returns True if the schema has metadata, false otherwise
+ */
+declare function hasSchemaMetadata(schemaId: string): boolean;
+/**
+ * Clear metadata for a schema
+ *
+ * @param schemaId Unique identifier for the schema
+ */
+declare function clearSchemaMetadata(schemaId: string): void;
+/**
+ * Clear all metadata from the registry
+ */
+declare function clearAllMetadata(): void;
+
+/**
+ * Functions for registering schema metadata
+ */
+
+/**
+ * Register metadata for a schema
+ *
+ * @param schemaId Unique identifier for the schema
+ * @param metadata Object mapping field paths to their metadata
+ */
+declare function registerSchemaMetadata(schemaId: string, metadata: MetadataRegistry): void;
+/**
+ * Register metadata for a schema with type checking for field paths
+ *
+ * @param schema The Zod schema
+ * @param schemaId Unique identifier for the schema
+ * @param metadata Object mapping field paths to their metadata
+ */
+declare function registerSchemaMetadata<T extends z.ZodObject<any>>(schema: T, schemaId: string, metadata: {
+    [K in PathsOf<T>]?: SchemaFieldMetadata;
+}): void;
+
+/**
+ * Functions for attaching metadata to schemas
+ */
+
+declare const SCHEMA_ID_SYMBOL: unique symbol;
+/**
+ * Helper function to get the schema ID from a schema object
+ *
+ * @param schema Zod schema that might have a schema ID attached
+ * @returns The schema ID or undefined if not found
+ */
+declare function getSchemaId(schema: z.ZodTypeAny): string | undefined;
+/**
+ * Helper function to create a schema with associated metadata
+ *
+ * @param schema Zod schema
+ * @param schemaId Unique identifier for the schema
+ * @param metadata Metadata for the schema fields
+ * @returns The original schema with the schema ID attached
+ */
+declare function withMetadata<T extends z.ZodObject<any>>(schema: T, schemaId: string, metadata: {
+    [K in PathsOf<T>]?: SchemaFieldMetadata;
+}): T;
+
+/**
+ * Zinia Forms Plugin
+ * Allows registering custom render styles at the application level
+ */
+
+/**
+ * Plugin options for Zinia
+ */
+interface ZiniaPluginOptions {
+    /**
+     * Map of style names to style creators
+     */
+    styles?: Record<string, StyleCreators>;
+    /**
+     * Default style to use if none specified in useForm
+     */
+    defaultStyle?: string;
+}
+/**
+ * Vue plugin for Zinia Forms
+ */
+declare const ZiniaPlugin: {
+    install(app: App, options?: ZiniaPluginOptions): void;
+};
+/**
+ * Get a registered style by name
+ *
+ * @param styleName Name of the style to get
+ * @returns Style creators for the requested style or undefined if not found
+ */
+declare function getRegisteredStyle(styleName?: string): StyleCreators | undefined;
+/**
+ * Check if a style is registered
+ *
+ * @param styleName Name of the style to check
+ * @returns True if the style is registered
+ */
+declare function hasRegisteredStyle(styleName: string): boolean;
+/**
+ * Get the default style name
+ *
+ * @returns Name of the default style
+ */
+declare function getDefaultStyle(): string;
+/**
+ * Get all registered style names
+ *
+ * @returns Array of registered style names
+ */
+declare function getRegisteredStyleNames(): string[];
+/**
+ * Register a style at runtime
+ * Useful for dynamically loading styles
+ *
+ * @param styleName Name of the style to register
+ * @param creators Style creators for the style
+ */
+declare function registerStyle(styleName: string, creators: StyleCreators): void;
+
+/**
+ * DaisyUI style package
+ * Provides all component creators for the DaisyUI style
+ */
+
+/**
+ * Complete set of DaisyUI style creators
+ * Can be registered with the Zinia plugin
+ */
+declare const daisyUIStyle: StyleCreators;
+
+/**
+ * Plain style package
+ * Provides all component creators for the Plain style (minimal styling)
+ */
+
+/**
+ * Complete set of Plain style creators
+ * Can be registered with the Zinia plugin
+ */
+declare const plainStyle: StyleCreators;
+
+/**
+ * Helper functions for creating and extending render styles
+ */
+
+/**
+ * Extend an existing style with custom overrides
+ *
+ * @param baseStyle The base style to extend
+ * @param overrides Custom overrides for specific components
+ * @returns A new style that combines the base style with the overrides
+ */
+declare function extendStyle(baseStyle: StyleCreators, overrides: Partial<StyleCreators>): StyleCreators;
+/**
+ * Merge multiple styles together
+ * Later styles will override earlier ones for any overlapping components
+ *
+ * @param styles Array of styles to merge
+ * @returns A new style that combines all the provided styles
+ */
+declare function mergeStyles(...styles: Array<Partial<StyleCreators>>): StyleCreators;
+/**
+ * Create a partial style with only the components you need
+ * Useful when you want to override just a few components in a base style
+ *
+ * @param creators Object containing only the component creators you want to override
+ * @returns A partial style object that can be used with extendStyle
+ */
+declare function createPartialStyle<T extends Partial<StyleCreators>>(creators: T): T;
+/**
+ * Create a style template with placeholder implementations
+ * Useful as a starting point for creating a completely new style
+ *
+ * @returns A style object with placeholder implementations that throw errors
+ */
+declare function createStyleTemplate(): StyleCreators;
+
+/**
+ * Common action icons as SVG strings
+ * These are Heroicons (heroicons.com) in SVG format for easy use in actions
+ */
+declare const ActionIcons: {
+    readonly edit: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" /></svg>";
+    readonly pencil: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\" /></svg>";
+    readonly delete: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>";
+    readonly trash: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>";
+    readonly view: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" /></svg>";
+    readonly eye: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" /></svg>";
+    readonly copy: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" /></svg>";
+    readonly duplicate: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" /></svg>";
+    readonly download: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" /></svg>";
+    readonly share: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z\" /></svg>";
+    readonly settings: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" /></svg>";
+    readonly plus: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6v6m0 0v6m0-6h6m-6 0H6\" /></svg>";
+    readonly external: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" /></svg>";
+    readonly arrowRight: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\" /></svg>";
+    readonly dots: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z\" /></svg>";
+    readonly dotsHorizontal: "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z\" /></svg>";
+};
+
+export { ActionIcons, type ActionItem, type ActionsConfig, type ButtonActionItem, type ColumnDefinition, type CursorDataTableOptions, type CursorFetchParams, type CursorFetchResult, type DataTableColumns, type DataTableOptions, type DisplayComponentsType, type DisplayFieldComponent, ErrorDisplay, type FetchDataParams, type FetchDataResult, type FilterValue, type LinkActionItem, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, type TypedSelectFieldComponent, type UseCursorDataTableType, type UseDataTableType, type UseDeleteModalType, type UseDisplayType, type UseFormType, type UseFormTyped, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, type ZiniaDataTable, type ZiniaDeleteModal, type ZiniaDeleteModalFields, type ZiniaDeleteModalGenericFields, type ZiniaDisplay, type ZiniaDisplayFields, type ZiniaDisplayGenericFields, type ZiniaForm, type ZiniaFormFields, type ZiniaFormGenericFields, ZiniaPlugin, type ZiniaPluginOptions, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };