@vef-framework/starter 2.0.10 → 2.1.0

package/dist/types/src/components/crud/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useQueryObserver } from './use-query-observer';
+export { useSearchValues } from './use-search-values';
+export { useSelectedRows } from './use-selected-rows';

package/dist/types/src/components/crud/hooks/use-query-observer.d.ts

@@ -0,0 +1,6 @@
+import { ProTableRef } from '../../pro-table';
+import { RefObject } from 'react';
+/**
+ * Hook to observe and sync ProTable query state with Crud store.
+ */
+export declare function useQueryObserver(): RefObject<ProTableRef | null>;

package/dist/types/src/components/crud/hooks/use-search-values.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '@vef-framework/shared';
+export declare function useSearchValues<TSearchValues extends AnyObject>(): NoInfer<TSearchValues>;

package/dist/types/src/components/crud/hooks/use-selected-rows.d.ts

@@ -0,0 +1,2 @@
+import { AnyObject } from '@vef-framework/shared';
+export declare function useSelectedRows<TRow extends AnyObject>(): NoInfer<TRow[]>;

package/dist/types/src/components/crud/index.d.ts

@@ -0,0 +1,8 @@
+import { AnyObject } from '@vef-framework/shared';
+import { CrudProps } from './props';
+export declare function Crud<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject = never>({ defaultSearchValues, advancedSearch, sceneDefaultFormValues, renderForm, formMutationFns, formActionsRenderers, beforeFormSubmit, afterFormSubmit, deleteMutationFn, deleteManyMutationFn, mutationMeta, rowSelection, ...bodyProps }: CrudProps<TRow, TSearchValues, TSceneFormValues, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export type { ActionButtonGroupProps as CrudActionButtonGroupProps, OperationButtonGroupProps as CrudOperationButtonGroupProps } from './components';
+export { createCrudKit } from './helpers';
+export type { CrudKit } from './helpers';
+export type { CrudProps } from './props';
+export type * from './types';

package/dist/types/src/components/crud/props.d.ts

@@ -0,0 +1,171 @@
+import { TableColumn } from '@vef-framework/components';
+import { ApiResult, MutationFunction, MutationMeta, PaginationResult, QueryFunction } from '@vef-framework/core';
+import { AnyObject, Awaitable, DeepKeys, EmptyObject, If, IsNever, Key, MaybeUndefined, PartialDeep } from '@vef-framework/shared';
+import { ReactNode } from 'react';
+import { ColumnSettingsProp, OperationColumnConfig, ProTableProps, RowSelectionConfig } from '../pro-table';
+import { CrudFormActionsRenderers, CrudFormMutationFns, CrudFormScene, PaginatedQueryParams, QueryParams } from './types';
+/**
+ * Base props for the Crud component.
+ *
+ * @template TRow - Table row model type
+ * @template TSearchValues - Search/filters form values type
+ * @template TSceneFormValues - A map of scene key to its form values type
+ * @template TParams - Additional query parameters type
+ */
+export interface BaseCrudProps<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject> {
+    /**
+     * Table size
+     */
+    tableSize?: ProTableProps<TRow, TParams>["size"];
+    /**
+     * Table column definitions
+     */
+    tableColumns: Array<TableColumn<NoInfer<TRow>>>;
+    /**
+     * Column settings configuration.
+     * - `false`: Disable column settings feature
+     * - `{ storageKey?: string }`: Enable with optional localStorage persistence
+     *
+     * @default {}
+     */
+    columnSettings?: ColumnSettingsProp;
+    /**
+     * Operation column configuration for per-row actions
+     */
+    operationColumn?: OperationColumnConfig<NoInfer<TRow>>;
+    /**
+     * Whether to show the sequence (row number) column. Default is true.
+     */
+    showSequenceColumn?: boolean;
+    /**
+     * Row key extractor: either a deep key of the row model or a function
+     */
+    rowKey?: DeepKeys<NoInfer<TRow>> | ((row: NoInfer<TRow>) => Key);
+    /**
+     * Enable virtual scrolling for the table to improve performance with large datasets
+     *
+     * @default false
+     */
+    virtual?: boolean;
+    /**
+     * Title to be displayed above the table
+     */
+    title?: ReactNode;
+    /**
+     * Summary to be displayed below the table
+     */
+    summary?: ReactNode;
+    /**
+     * Row selection configuration.
+     * - `true`: Enable row selection with default configuration
+     * - `RowSelectionConfig<TRow>`: Enable row selection with custom configuration
+     * - `undefined`: Disable row selection (default)
+     */
+    rowSelection?: RowSelectionConfig<NoInfer<TRow>> | true;
+    /**
+     * Default search values for initializing the search forms
+     */
+    defaultSearchValues?: Partial<NoInfer<TSearchValues>>;
+    /**
+     * Node to render as the basic (inline) search area
+     */
+    basicSearch?: ReactNode;
+    /**
+     * Node to render as the advanced search panel
+     */
+    advancedSearch?: ReactNode;
+    /**
+     * Default form values map for scenes
+     */
+    sceneDefaultFormValues?: PartialDeep<NoInfer<TSceneFormValues>>;
+    /**
+     * Render function to provide a form for the specified scene
+     */
+    renderForm?: (scene: CrudFormScene<NoInfer<TSceneFormValues>>) => ReactNode;
+    /**
+     * Optional hook before submitting the form. Can transform values.
+     */
+    beforeFormSubmit?: (scene: CrudFormScene<NoInfer<TSceneFormValues>>, formValues: TSceneFormValues[CrudFormScene<NoInfer<TSceneFormValues>>]) => Awaitable<TSceneFormValues[CrudFormScene<NoInfer<TSceneFormValues>>]>;
+    /**
+     * Optional hook after submitting the form. Can be used for side effects.
+     */
+    afterFormSubmit?: (scene: CrudFormScene<NoInfer<TSceneFormValues>>, formValues: TSceneFormValues[CrudFormScene<NoInfer<TSceneFormValues>>], result: unknown) => Awaitable<void>;
+    /**
+     * Mutation functions for submitting different scenes
+     */
+    formMutationFns?: CrudFormMutationFns<TSceneFormValues>;
+    /**
+     * Custom render functions for form actions in different scenes
+     * Allows customization of footer action buttons for each form scene
+     */
+    formActionsRenderers?: CrudFormActionsRenderers<NoInfer<TSceneFormValues>>;
+    /**
+     * Mutation function to delete a single row
+     */
+    deleteMutationFn?: MutationFunction<ApiResult<unknown>, NoInfer<TRow>>;
+    /**
+     * Mutation function to delete multiple rows
+     */
+    deleteManyMutationFn?: MutationFunction<ApiResult<unknown>, Array<NoInfer<TRow>>>;
+    /**
+     * Meta information provider for mutations
+     */
+    mutationMeta?: (mutationKey: string) => MaybeUndefined<MutationMeta>;
+    /**
+     * Actions displayed on the table toolbar area
+     */
+    toolbarActions?: ReactNode;
+    /**
+     * Function to determine whether the query should be enabled
+     */
+    queryEnabled?: (params?: NoInfer<TSearchValues> & If<IsNever<TParams>, EmptyObject, NoInfer<TParams>>) => boolean;
+    /**
+     * Additional query parameters that trigger re-fetching when changed.
+     * These are merged with search, pagination, and sort parameters in the query function.
+     */
+    queryParams?: NoInfer<TParams>;
+}
+/**
+ * Props for paginated Crud.
+ *
+ * When `isPaginated` is true or omitted, the data source is fetched with pagination parameters.
+ *
+ * @template TRow - Table row model type
+ * @template TSearchValues - Search/filters form values type
+ * @template TSceneFormValues - A map of scene key to its form values type
+ * @template TParams - Additional query parameters type
+ */
+export interface PaginatedCrudProps<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject = never> extends BaseCrudProps<TRow, TSearchValues, TSceneFormValues, TParams> {
+    /**
+     * Enable pagination mode. Default is true.
+     */
+    isPaginated?: true;
+    /**
+     * Query function for fetching paginated data
+     */
+    queryFn: QueryFunction<PaginationResult<TRow>, PaginatedQueryParams<TSearchValues, TParams>>;
+}
+/**
+ * Props for non-paginated Crud.
+ *
+ * When `isPaginated` is false, the entire dataset is returned without pagination.
+ *
+ * @template TRow - Table row model type
+ * @template TSearchValues - Search/filters form values type
+ * @template TSceneFormValues - A map of scene key to its form values type
+ * @template TParams - Additional query parameters type
+ */
+export interface NonPaginatedCrudProps<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject = never> extends BaseCrudProps<TRow, TSearchValues, TSceneFormValues, TParams> {
+    /**
+     * Disable pagination mode for this variant
+     */
+    isPaginated: false;
+    /**
+     * Query function for fetching the full list data
+     */
+    queryFn: QueryFunction<TRow[], QueryParams<TSearchValues, TParams>>;
+}
+/**
+ * Discriminated union of paginated and non-paginated Crud props
+ */
+export type CrudProps<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject = never> = PaginatedCrudProps<TRow, TSearchValues, TSceneFormValues, TParams> | NonPaginatedCrudProps<TRow, TSearchValues, TSceneFormValues, TParams>;

package/dist/types/src/components/crud/store.d.ts

@@ -0,0 +1,146 @@
+import { Breakpoint, Length } from '@vef-framework/components';
+import { ApiResult, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework/core';
+import { AnyObject, Awaitable, Key, EventEmitter } from '@vef-framework/shared';
+import { ReactNode, ComponentType } from 'react';
+import { CrudEvents } from './event';
+import { CrudFormDrawerConfig, CrudFormMode, CrudFormScene } from './types';
+/**
+ * Options to open a scene form.
+ *
+ * TScene: the specific scene key to be opened
+ * TSceneFormValues: the map type for all scene form values
+ */
+export interface OpenFormOptions<TScene extends CrudFormScene<TSceneFormValues>, TSceneFormValues extends AnyObject> {
+    /**
+     * Target scene key to open.
+     */
+    scene: TScene;
+    /**
+     * Initial values for the target scene form.
+     */
+    values?: Partial<TSceneFormValues[TScene]>;
+    /**
+     * Custom form title. If omitted, a default title will be used.
+     */
+    title?: ReactNode;
+    /**
+     * Custom form width. If omitted, a default responsive width will be used.
+     */
+    width?: Length | Partial<Record<Breakpoint, Length>>;
+    /**
+     * Form display mode.
+     *
+     * @default "modal"
+     */
+    mode?: CrudFormMode;
+    /**
+     * Drawer-specific configuration when mode is "drawer".
+     */
+    drawerConfig?: CrudFormDrawerConfig;
+}
+/**
+ * State shape for the Crud component store.
+ *
+ * TRow: the row model type displayed in the table
+ * TSearchValues: the type of the search/filters form values
+ * TSceneFormValues: a map of scene key to its form values type
+ */
+export interface CrudState<TRow extends AnyObject = AnyObject, TSearchValues extends AnyObject = AnyObject, TSceneFormValues extends AnyObject = AnyObject> {
+    /**
+     * Internal event bus used for cross-part communication within Crud.
+     */
+    eventEmitter: EventEmitter<CrudEvents>;
+    /**
+     * Whether the advanced search panel is visible.
+     */
+    isAdvancedSearchVisible: boolean;
+    /**
+     * Toggle the visibility of the advanced search panel.
+     */
+    setIsAdvancedSearchVisible: (isAdvancedSearchVisible: boolean) => void;
+    /**
+     * Default search form values (initial state).
+     */
+    defaultSearchValues?: TSearchValues;
+    /**
+     * Current basic/advanced search form values.
+     */
+    searchValues?: TSearchValues;
+    /**
+     * Update the current search form values.
+     */
+    setSearchValues: (values?: TSearchValues) => void;
+    /**
+     * Whether the scene form (create/update or custom) is visible.
+     */
+    formVisible: boolean;
+    /**
+     * Current active form scene key.
+     */
+    formScene: CrudFormScene<TSceneFormValues>;
+    /**
+     * Title displayed on the scene form.
+     */
+    formTitle: ReactNode;
+    /**
+     * Width of the scene form. Can be a fixed length or responsive map by breakpoint.
+     */
+    formWidth: Length | Partial<Record<Breakpoint, Length>>;
+    /**
+     * Form display mode (modal or drawer).
+     */
+    formMode: CrudFormMode;
+    /**
+     * Drawer-specific configuration when formMode is "drawer".
+     */
+    drawerConfig?: CrudFormDrawerConfig;
+    /**
+     * Open the scene form with optional initial values, custom title and width.
+     */
+    openForm: <const TScene extends CrudFormScene<TSceneFormValues>>(options: OpenFormOptions<TScene, TSceneFormValues>) => void;
+    /**
+     * Close the scene form.
+     */
+    closeForm: () => void;
+    /**
+     * Default form values map for all scenes, usually provided by the component.
+     */
+    sceneDefaultFormValues: Partial<TSceneFormValues>;
+    /**
+     * Resolved default values for the currently active scene.
+     */
+    defaultFormValues: TSceneFormValues[CrudFormScene<TSceneFormValues>];
+    /**
+     * Delete a single row.
+     */
+    delete: (row: TRow) => Awaitable<ApiResult<unknown>>;
+    /**
+     * Delete multiple rows in batch.
+     */
+    deleteMany: (rows: TRow[]) => Awaitable<ApiResult<unknown>>;
+    /**
+     * Whether the list query is being fetched.
+     */
+    isQueryFetching: boolean;
+    /**
+     * Re-trigger the list query.
+     */
+    refetchQuery: () => void;
+    /**
+     * Currently selected row keys.
+     */
+    selectedRowKeys: Key[];
+    /**
+     * Update selected row keys.
+     */
+    setSelectedRowKeys: (selectedRowKeys: Key[]) => void;
+    /**
+     * Currently selected row models.
+     */
+    selectedRows: TRow[];
+    /**
+     * Update selected row models.
+     */
+    setSelectedRows: (selectedRows: TRow[]) => void;
+}
+export declare const CrudStoreProvider: ComponentType<StoreProviderProps<Pick<CrudState<AnyObject, AnyObject, AnyObject>, "selectedRowKeys" | "defaultSearchValues" | "sceneDefaultFormValues">>>, useCrudStore: UseStore<CrudState<AnyObject, AnyObject, AnyObject>>, useCrudStoreApi: <TStrictState extends CrudState<AnyObject, AnyObject, AnyObject> = CrudState<AnyObject, AnyObject, AnyObject>>() => UnboundStore<TStrictState>;

package/dist/types/src/components/crud/styles.d.ts

@@ -0,0 +1,3 @@
+import { SerializedStyles } from '@emotion/serialize';
+export declare const main: SerializedStyles;
+export declare const toolbar: SerializedStyles;

package/dist/types/src/components/crud/types.d.ts

@@ -0,0 +1,54 @@
+import { DrawerProps, FormApi } from '@vef-framework/components';
+import { ApiResult, MutationFunction } from '@vef-framework/core';
+import { AnyObject, EmptyObject, If, IsNever } from '@vef-framework/shared';
+import { ReactNode } from 'react';
+import { ParamsWithPagination, ParamsWithSort } from '../pro-table';
+export type CrudBasicFormScene = "create" | "update";
+export interface CrudBasicSceneFormValues<TCreateFormValues extends AnyObject, TUpdateFormValues extends AnyObject> {
+    create: TCreateFormValues;
+    update: TUpdateFormValues;
+}
+export type CrudFormScene<TSceneFormValues extends AnyObject> = keyof TSceneFormValues & string;
+export type CrudFormMutationFns<TSceneFormValues extends AnyObject> = {
+    [Scene in CrudFormScene<TSceneFormValues>]: MutationFunction<ApiResult<unknown>, TSceneFormValues[Scene]>;
+};
+export type CrudFormActionsRenderers<TSceneFormValues extends AnyObject> = {
+    [Scene in CrudFormScene<TSceneFormValues>]?: (formApi: FormApi<TSceneFormValues[Scene]>) => ReactNode;
+};
+/**
+ * Query parameters wrapper type for non-paginated queries.
+ *
+ * This type helps TypeScript correctly infer generic parameters by wrapping
+ * the intersection type in a named generic type constructor.
+ *
+ * @template TSearch - The search parameters type from user interactions
+ * @template TParams - Additional query parameters (defaults to never, which becomes EmptyObject)
+ */
+export type QueryParams<TSearch extends AnyObject, TParams extends AnyObject = never> = ParamsWithSort<TSearch & If<IsNever<TParams>, EmptyObject, TParams>>;
+/**
+ * Query parameters wrapper type for paginated queries.
+ *
+ * This type helps TypeScript correctly infer generic parameters by wrapping
+ * the intersection type in a named generic type constructor.
+ *
+ * @template TSearch - The search parameters type from user interactions
+ * @template TParams - Additional query parameters (defaults to never, which becomes EmptyObject)
+ */
+export type PaginatedQueryParams<TSearch extends AnyObject, TParams extends AnyObject = never> = ParamsWithPagination<ParamsWithSort<TSearch & If<IsNever<TParams>, EmptyObject, TParams>>>;
+/**
+ * Form display mode for CRUD operations.
+ * - "modal": Display form in a modal dialog (default)
+ * - "drawer": Display form in a drawer panel
+ */
+export type CrudFormMode = "modal" | "drawer";
+/**
+ * Configuration for drawer-specific properties when form mode is "drawer".
+ */
+export interface CrudFormDrawerConfig {
+    /**
+     * Placement of the drawer.
+     *
+     * @default "right"
+     */
+    placement?: DrawerProps["placement"];
+}

package/dist/types/src/components/crud-page/index.d.ts

@@ -0,0 +1,3 @@
+import { CrudPageProps } from './props';
+export declare function CrudPage<TRow extends object, TSearchValues extends object, TSceneFormValues extends Record<string, object>, TParams extends object = never>({ leftAside, leftAsideWidth, rightAside, rightAsideWidth, header, headerClassName, headerPosition, footer, footerClassName, footerPosition, ...crudProps }: CrudPageProps<TRow, TSearchValues, TSceneFormValues, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export type { CrudPageProps } from './props';

package/dist/types/src/components/crud-page/props.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { CrudProps } from '../crud';
+import { AsideWidth, Position } from '../page';
+/**
+ * Props for the CrudPage component, supporting both paginated and non-paginated modes.
+ *
+ * @template TRow - Table row model type
+ * @template TSearchValues - Search/filters form values type
+ * @template TSceneFormValues - A map of scene key to its form values type
+ * @template TParams - Additional query parameters type
+ */
+export type CrudPageProps<TRow extends object, TSearchValues extends object, TSceneFormValues extends Record<string, object>, TParams extends object = never> = CrudProps<TRow, TSearchValues, TSceneFormValues, TParams> & {
+    /**
+     * The left aside content of the page
+     */
+    leftAside?: ReactNode;
+    /**
+     * The width of the left aside
+     */
+    leftAsideWidth?: AsideWidth;
+    /**
+     * The right aside content of the page
+     */
+    rightAside?: ReactNode;
+    /**
+     * The width of the right aside
+     */
+    rightAsideWidth?: AsideWidth;
+    /**
+     * The header of the page
+     */
+    header?: ReactNode;
+    /**
+     * The class name of the header
+     */
+    headerClassName?: string;
+    /**
+     * The position of the header
+     *
+     * @default "inside"
+     */
+    headerPosition?: Position;
+    /**
+     * The footer of the page
+     */
+    footer?: ReactNode;
+    /**
+     * The class name of the footer
+     */
+    footerClassName?: string;
+    /**
+     * The position of the footer
+     *
+     * @default "inside"
+     */
+    footerPosition?: Position;
+};

package/dist/types/src/components/error/error-icon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare function ErrorIcon(props: SVGProps<SVGSVGElement>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/src/components/error/index.d.ts

@@ -0,0 +1,2 @@
+import { ErrorProps } from './props';
+export declare function Error({ error, info, reset }: ErrorProps): React.ReactNode;

package/dist/types/src/components/error/props.d.ts

@@ -0,0 +1,6 @@
+import { ErrorComponentProps } from '@tanstack/react-router';
+/**
+ * The props of the error component
+ */
+export interface ErrorProps extends ErrorComponentProps {
+}

package/dist/types/src/components/flex-card/index.d.ts

@@ -0,0 +1,3 @@
+import { FlexCardProps } from './props.js';
+export declare function FlexCard({ variant, ...props }: FlexCardProps): React.ReactElement;
+export type { FlexCardProps } from './props.js';

package/dist/types/src/components/flex-card/props.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from '@vef-framework/components';
+export type FlexCardProps = CardProps;

package/dist/types/src/components/flex-card/styles.d.ts

@@ -0,0 +1,2 @@
+import { SerializedStyles } from '@emotion/serialize';
+export declare const container: SerializedStyles;

package/dist/types/src/components/form-drawer/components/form-actions.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, MemoExoticComponent } from 'react';
+import { FormDrawerProps } from '../props';
+interface FormActionsProps {
+    /**
+     * Submit button props
+     */
+    submitButtonProps?: FormDrawerProps<never>["submitButtonProps"];
+    /**
+     * Reset button props, or false to hide the reset button
+     */
+    resetButtonProps?: FormDrawerProps<never>["resetButtonProps"];
+    /**
+     * Callback when reset is triggered
+     */
+    onReset?: () => void;
+}
+declare function FormActionsBase({ submitButtonProps, resetButtonProps, onReset }: FormActionsProps): ReactNode;
+export declare const FormActions: MemoExoticComponent<typeof FormActionsBase>;
+export {};

package/dist/types/src/components/form-drawer/components/index.d.ts

@@ -0,0 +1 @@
+export { FormActions } from './form-actions';

package/dist/types/src/components/form-drawer/index.d.ts

@@ -0,0 +1,5 @@
+import { Awaitable } from '@vef-framework/shared';
+import { FC, ReactNode } from 'react';
+import { FormDrawerProps } from './props';
+export declare const FormDrawer: (<TValues extends object, TData = unknown>(props: FormDrawerProps<TValues, TData>) => Awaitable<ReactNode>) & Pick<FC, "displayName">;
+export type { FormDrawerProps } from './props';

package/dist/types/src/components/form-drawer/props.d.ts

@@ -0,0 +1,78 @@
+import { DrawerProps, FormApi, Length, ResetButtonProps, SubmitButtonProps } from '@vef-framework/components';
+import { ApiResult, MutationFunction, MutationMeta } from '@vef-framework/core';
+import { Awaitable, Except } from '@vef-framework/shared';
+import { ReactNode } from 'react';
+/**
+ * Props for the FormDrawer component
+ *
+ * @template TValues - The type of the form values
+ * @template TData - The type of the mutation response data
+ */
+export interface FormDrawerProps<TValues extends object, TData = unknown> extends Pick<DrawerProps, "title" | "placement" | "resizable"> {
+    /**
+     * Whether the form drawer is visible
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Width of the form drawer
+     */
+    width?: Length;
+    /**
+     * Default form values
+     */
+    defaultValues?: TValues;
+    /**
+     * Whether to disable the form
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom render function for footer actions
+     * Return null to hide the footer entirely
+     * If not provided, will render default submit and reset buttons
+     */
+    renderActions?: (formApi: FormApi<TValues>) => ReactNode;
+    /**
+     * Submit button props (only used when renderActions is not provided)
+     */
+    submitButtonProps?: Except<SubmitButtonProps, "onSubmit" | "disabled" | "loading">;
+    /**
+     * Reset button props, or false to hide the reset button (only used when renderActions is not provided)
+     */
+    resetButtonProps?: Except<ResetButtonProps, "onReset" | "disabled" | "loading"> | false;
+    /**
+     * Mutation function to execute on submit
+     */
+    mutationFn?: MutationFunction<ApiResult<TData>, TValues>;
+    /**
+     * Mutation metadata
+     */
+    mutationMeta?: MutationMeta;
+    /**
+     * Form content, can be a ReactNode or a function that receives form API
+     */
+    children?: ReactNode | ((formApi: FormApi<TValues>) => ReactNode);
+    /**
+     * Callback before form submission
+     */
+    beforeSubmit?: (values: TValues) => Awaitable<TValues>;
+    /**
+     * Callback after successful submission
+     */
+    afterSubmit?: (values: TValues, data: TData) => Awaitable<void>;
+    /**
+     * Callback on form submit
+     */
+    onSubmit?: (values: TValues) => Awaitable<void>;
+    /**
+     * Callback on form reset
+     */
+    onReset?: (defaultValues?: TValues) => void;
+    /**
+     * Callback when drawer is closed
+     */
+    onClose?: () => void;
+}

package/dist/types/src/components/form-modal/components/draggable-wrapper.d.ts

@@ -0,0 +1,9 @@
+import { ModalProps } from '@vef-framework/components';
+import { ReactElement, ReactNode, MemoExoticComponent } from 'react';
+interface DraggableWrapperProps {
+    title: ReactNode;
+    children: ReactElement<ModalProps>;
+}
+declare function DraggableWrapperBase({ title, children }: DraggableWrapperProps): ReactElement;
+export declare const DraggableWrapper: MemoExoticComponent<typeof DraggableWrapperBase>;
+export {};

package/dist/types/src/components/form-modal/components/form-actions.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, MemoExoticComponent } from 'react';
+import { FormModalProps } from '../props';
+interface FormActionsProps {
+    /**
+     * Submit button props
+     */
+    submitButtonProps?: FormModalProps<never>["submitButtonProps"];
+    /**
+     * Reset button props, or false to hide the reset button
+     */
+    resetButtonProps?: FormModalProps<never>["resetButtonProps"];
+    /**
+     * Callback when reset is triggered
+     */
+    onReset?: () => void;
+}
+declare function FormActionsBase({ submitButtonProps, resetButtonProps, onReset }: FormActionsProps): ReactNode;
+export declare const FormActions: MemoExoticComponent<typeof FormActionsBase>;
+export {};

package/dist/types/src/components/form-modal/components/index.d.ts

@@ -0,0 +1,2 @@
+export { DraggableWrapper } from './draggable-wrapper';
+export { FormActions } from './form-actions';

package/dist/types/src/components/form-modal/index.d.ts

@@ -0,0 +1,5 @@
+import { Awaitable } from '@vef-framework/shared';
+import { FC, ReactNode } from 'react';
+import { FormModalProps } from './props';
+export declare const FormModal: (<TValues extends object, TData = unknown>(props: FormModalProps<TValues, TData>) => Awaitable<ReactNode>) & Pick<FC, "displayName">;
+export type { FormModalProps } from './props';