@ostack.tech/ui-kform 0.1.0

package/dist/types/components/FileControl/FileControl.d.ts

@@ -0,0 +1,68 @@
+import { type File as KFormFile, type Path } from "@ostack.tech/kform";
+import { type FileInputController, type FileInputOptions } from "@ostack.tech/kform-react";
+import { Input } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+/**
+ * File control's interaction with the selected file:
+ *
+ * - `view`: A button is added which opens a dialog to view and optionally
+ *   download the file. A fallback alert is displayed when the file cannot be
+ *   viewed.
+ * - `download`: A button is added to download the file. Useful if you know that
+ *   the accepted file types aren't viewable in the browser.
+ * - `none`: No interaction with the selected file is added.
+ */
+export type FileControlFileInteraction = "view" | "download" | "none";
+/** Properties of the file control component. */
+export interface FileControlProps<T extends KFormFile | null = KFormFile | null> extends Omit<FileInputOptions<T, FileList, React.ComponentRef<typeof Input>>, "enabled" | "formatFromFileList" | "parseToFileList">, Omit<React.ComponentPropsWithoutRef<typeof Input>, "type" | "multiple" | "defaultValue" | "value" | "onValueChange" | "status" | "align"> {
+    /** Path to the value. */
+    path?: string | Path;
+    /**
+     * Issue messages of this control.
+     *
+     * Mapping from an issue's code to its message.
+     */
+    issueMessages?: IssueMessagesByCode;
+    /**
+     * Label to use in the issues panel when displaying issues associated with
+     * this field.
+     *
+     * This label has priority over the field's `ControlLabel`.
+     */
+    issuesPanelLabel?: React.ReactNode;
+    /**
+     * Whether to display the issues associated with this control.
+     *
+     * @default true
+     */
+    displayIssues?: boolean;
+    /**
+     * Whether to prevent the auto-focusing behaviour that causes this control to
+     * be focused when the form app's `focus` is called with this control's path.
+     *
+     * Preventing this behaviour is useful when multiple controls for the same
+     * path are rendered at once, and only one of them should be focused.
+     *
+     * @default false
+     */
+    preventAutoFocus?: boolean;
+    /** Reference to the control's API. */
+    apiRef?: React.Ref<FileInputController<T, FileList, React.ComponentRef<typeof Input>> | undefined>;
+    /**
+     * Type of interaction with the selected file.
+     *
+     * @default view
+     */
+    fileInteraction?: FileControlFileInteraction;
+    /** Label of the button used to open the file viewer. */
+    viewFileButtonLabel?: React.ReactNode;
+    /** Label of the button used to download the file. */
+    downloadFileButtonLabel?: React.ReactNode;
+    /** Text displayed when the file cannot be viewed. */
+    fallbackText?: React.ReactNode;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/** File control component supporting (possibly nullable) file schemas. */
+export declare const FileControl: React.ForwardRefExoticComponent<FileControlProps<KFormFile | null> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/FileControl/index.d.ts

@@ -0,0 +1 @@
+export * from "./FileControl.tsx";

package/dist/types/components/FormApp/FormApp.d.ts

@@ -0,0 +1,210 @@
+import { AbsolutePath, type Path, type Schema, type SchemaKt } from "@ostack.tech/kform";
+import { type Controller, type FormOptions } from "@ostack.tech/kform-react";
+import { type Responsive, Root } from "@ostack.tech/ui";
+import * as React from "react";
+import { type LocalizationObject } from "../../locale/LocalizationObject.ts";
+import { type IssueMessagesByCode } from "../IssueMessages";
+/** Mode of displaying issue messages. */
+export type IssuesDisplayMode = "inline" | "panel";
+/** Properties of the form app component. */
+export type FormAppProps<T = any> = Pick<React.ComponentPropsWithoutRef<typeof Root>, "enableErrorReporting" | "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & FormOptions<T> & Omit<React.ComponentPropsWithoutRef<"form">, "onSubmit" | "onReset"> & {
+    /** Schema of the form. */
+    schema: Schema<T> | SchemaKt;
+    /**
+     * Label to use in the issues panel when displaying issues associated with
+     * the form app.
+     */
+    issuesPanelLabel?: React.ReactNode;
+    /** Whether to disable the whole form. */
+    disabled?: boolean;
+    /** Whether to set the whole form as read-only. */
+    readOnly?: boolean;
+    /**
+     * Custom suffix to add to the ostack/UI's prefix when prefixing all
+     * component classes, styles, _etc._
+     *
+     * This prefix-suffix should match the `$prefix-suffix` SCSS variable.
+     */
+    prefixSuffix?: string;
+    /**
+     * Form app locale.
+     *
+     * @default defaultLocale
+     */
+    locale?: LocalizationObject;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their
+     * code).
+     *
+     * Provided paths may contain wildcards, which will have a lower priority
+     * when matched against.
+     *
+     * These messages are used by the `IssueMessages` component.
+     *
+     * **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * efficient. Please make sure that the identity of the provided value
+     * doesn't change at every render.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "/**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "/my/field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /**
+     * Mode of displaying issues:
+     *
+     * - `inline` mode dispays issue messages near the component containing the
+     *   issues. In this mode the bottom issues panel only functions as an aid
+     *   for navigating issues.
+     * - `panel` mode displays issue messages within the bottom issues panel.
+     *
+     * @default inline
+     */
+    issuesDisplayMode?: IssuesDisplayMode;
+    /**
+     * Global setting which specifies whether issue codes should be added to
+     * each issue message.
+     *
+     * @default false
+     */
+    displayIssueCodes?: boolean;
+    /**
+     * Function called when a form path is focused.
+     *
+     * @param path Focused path.
+     */
+    onPathFocus?: (path: AbsolutePath) => void;
+    /**
+     * Minimum height of the form app. Values should **not** be percentages.
+     *
+     * @default "100dvh"
+     */
+    minHeight?: Responsive<number | string>;
+    /** Reference to the form app's API. */
+    apiRef?: React.Ref<FormAppApi<T> | undefined>;
+};
+/** Imperative form app API. */
+export type FormAppApi<T = unknown> = Controller<T> & {
+    /**
+     * Focuses the form element at the provided path.
+     *
+     * @param path Path of element to focus.
+     */
+    focus: (path: string | Path) => void;
+    /**
+     * Starts issues navigation (when an `IssuesPanel` component exists within).
+     *
+     * @param options Options used when starting issues validation.
+     */
+    startIssuesNavigation: (options: {
+        validate?: boolean;
+        setTouched?: boolean;
+    }) => PromiseLike<void>;
+};
+/**
+ * Root component of a form application.
+ *
+ * This component automatically renders the ostack/UI's `Root` component when
+ * not rendered inside of one, in which case it accepts properties that would
+ * otherwise be passed to the ostack/UI `Root` component. In this scenario, the
+ * ostack/UI's `locale` is automatically provided to the ostack/UI `Root`
+ * component from the provided `FormApp` `locale`.
+ */
+export declare const FormApp: React.ForwardRefExoticComponent<Pick<Omit<import("@ostack.tech/ui").RootProps & React.RefAttributes<HTMLDivElement>, "ref">, "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions" | "baseDocumentTitle" | "enableErrorReporting" | "documentTitleBaseSeparator" | "documentTitleBreadcrumbsSeparator" | "portalsContainer" | "tooltipsDelayDuration" | "tooltipsSkipDelayDuration" | "disableTooltipsHoverableContent" | "toastsLabel" | "toastsDuration" | "toastsSwipeDirection" | "toastsSwipeThreshold" | "toastViewportHotkey" | "toastViewportLabel" | "toastViewportProps" | "errorBoundaryProps"> & Omit<import("@ostack.tech/kform-react").ControllerOptions<any, import("@ostack.tech/kform-react").FormControllerState<any>>, "formManager"> & import("@ostack.tech/kform-react").FormOwnOptions<any, unknown> & Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onReset" | "onSubmit"> & {
+    /** Schema of the form. */
+    schema: SchemaKt | Schema<any>;
+    /**
+     * Label to use in the issues panel when displaying issues associated with
+     * the form app.
+     */
+    issuesPanelLabel?: React.ReactNode;
+    /** Whether to disable the whole form. */
+    disabled?: boolean;
+    /** Whether to set the whole form as read-only. */
+    readOnly?: boolean;
+    /**
+     * Custom suffix to add to the ostack/UI's prefix when prefixing all
+     * component classes, styles, _etc._
+     *
+     * This prefix-suffix should match the `$prefix-suffix` SCSS variable.
+     */
+    prefixSuffix?: string;
+    /**
+     * Form app locale.
+     *
+     * @default defaultLocale
+     */
+    locale?: LocalizationObject;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their
+     * code).
+     *
+     * Provided paths may contain wildcards, which will have a lower priority
+     * when matched against.
+     *
+     * These messages are used by the `IssueMessages` component.
+     *
+     * **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * efficient. Please make sure that the identity of the provided value
+     * doesn't change at every render.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "/**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "/my/field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /**
+     * Mode of displaying issues:
+     *
+     * - `inline` mode dispays issue messages near the component containing the
+     *   issues. In this mode the bottom issues panel only functions as an aid
+     *   for navigating issues.
+     * - `panel` mode displays issue messages within the bottom issues panel.
+     *
+     * @default inline
+     */
+    issuesDisplayMode?: IssuesDisplayMode;
+    /**
+     * Global setting which specifies whether issue codes should be added to
+     * each issue message.
+     *
+     * @default false
+     */
+    displayIssueCodes?: boolean;
+    /**
+     * Function called when a form path is focused.
+     *
+     * @param path Focused path.
+     */
+    onPathFocus?: (path: AbsolutePath) => void;
+    /**
+     * Minimum height of the form app. Values should **not** be percentages.
+     *
+     * @default "100dvh"
+     */
+    minHeight?: Responsive<number | string>;
+    /** Reference to the form app's API. */
+    apiRef?: React.Ref<FormAppApi<any> | undefined> | undefined;
+} & React.RefAttributes<HTMLFormElement>>;

package/dist/types/components/FormApp/FormAppContext.d.ts

@@ -0,0 +1,181 @@
+import { AbsolutePath, type Path, PathMultimap, type PathMultimapEntryId } from "@ostack.tech/kform";
+import { type Controller } from "@ostack.tech/kform-react";
+import * as React from "react";
+import { type IssueMessagesByCode, type IssueMessageValue } from "../IssueMessages";
+import { type IssuesDisplayMode } from "./FormApp.tsx";
+/** Value of the form app context. */
+export interface FormAppContextValue<T = unknown> {
+    disabled: boolean;
+    readOnly: boolean;
+    issuesDisplayMode: IssuesDisplayMode;
+    displayIssueCodes: boolean;
+    formAppElement: HTMLFormElement | null;
+    store: FormAppStore<T>;
+}
+/** State of the form app. */
+export interface FormAppState<T> {
+    controller: Controller<T>;
+    focusedPath: AbsolutePath | null;
+    focusCounter: number;
+    issuesPanelPath: AbsolutePath | null;
+    topBarHeight: number;
+    leftSidebarWidth: number;
+    bottomPanelHeight: number;
+    startIssuesNavigation?: () => void;
+    activePath: AbsolutePath;
+    registeredControllers: [PathMultimap<Controller>];
+    registeredIssueMessages: [
+        PathMultimap<{
+            messages: IssueMessagesByCode;
+            priority: number;
+        }>
+    ];
+    deferredIssueMessageRemovalEntryIds: PathMultimapEntryId[];
+    registeredLabels: [
+        PathMultimap<{
+            label: React.ReactNode;
+            priority: number;
+        }>
+    ];
+    deferredLabelRemovalEntryIds: PathMultimapEntryId[];
+    actions: FormAppActions;
+}
+/** Item of a breadcrumb. */
+export interface BreadcrumbItem {
+    path: AbsolutePath;
+    label: React.ReactNode;
+}
+/** Actions of the form app. */
+export interface FormAppActions {
+    setIssuesPanelPath: (path: AbsolutePath | null) => void;
+    focus: (path: string | Path) => void;
+    resetFocus: () => void;
+    registerController: (path: AbsolutePath, controller?: Controller<any> | null) => (() => void) | void;
+    isRegistered: (path: AbsolutePath) => boolean;
+    setActivePath: (path: AbsolutePath) => void;
+    registerIssueMessages: (basePath: AbsolutePath, issueMessages?: Record<string, IssueMessagesByCode>, priority?: number) => (() => void) | void;
+    getRegisteredIssueMessage: (path: AbsolutePath, code: string) => IssueMessageValue | null;
+    registerLabel: (path: AbsolutePath, label: React.ReactNode, priority?: number) => (() => void) | void;
+    getRegisteredLabel: (path: AbsolutePath) => React.ReactNode;
+    getActiveIssuesPanelBreadcrumb: () => BreadcrumbItem[] | null;
+    startIssuesNavigation: (options?: {
+        validate?: boolean;
+        setTouched?: boolean;
+    }) => PromiseLike<void>;
+}
+/** Form app store. */
+export type FormAppStore<T> = ReturnType<typeof useCreateFormAppContext<T>>["store"];
+/** Form app context. */
+export declare const FormAppContext: React.Context<FormAppContextValue<unknown> | null>;
+/** Options used to create the data table context value. */
+export interface UseCreateFormAppContextOptions<T> extends Omit<FormAppContextValue<T>, "store"> {
+    controller: Controller<T>;
+    onPathFocus?: (path: AbsolutePath) => void;
+}
+/** Hook which creates the form app context. */
+export declare function useCreateFormAppContext<T>({ controller, disabled, readOnly, issuesDisplayMode, displayIssueCodes, formAppElement, onPathFocus, }: UseCreateFormAppContextOptions<T>): {
+    disabled: boolean;
+    readOnly: boolean;
+    issuesDisplayMode: IssuesDisplayMode;
+    displayIssueCodes: boolean;
+    formAppElement: HTMLFormElement | null;
+    store: Omit<import("zustand").StoreApi<FormAppState<T>>, "subscribe"> & {
+        subscribe: {
+            (listener: (selectedState: FormAppState<T>, previousSelectedState: FormAppState<T>) => void): () => void;
+            <U>(selector: (state: FormAppState<T>) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+                equalityFn?: ((a: U, b: U) => boolean) | undefined;
+                fireImmediately?: boolean;
+            } | undefined): () => void;
+        };
+    };
+};
+/** Returns the context of the form app. */
+export declare function useFormAppContext<T = unknown>(): FormAppContextValue<T>;
+/** Returns a boolean representing whether the form is disabled. */
+export declare function useFormIsDisabled(): boolean;
+/** Returns a boolean representing whether the form is read-only. */
+export declare function useFormIsReadOnly(): boolean;
+/** Returns the form app's display mode for issue messages. */
+export declare function useIssuesDisplayMode(): IssuesDisplayMode;
+/**
+ * Returns whether issue codes should be displayed (by default) within issue
+ * messages.
+ */
+export declare function useDisplayIssueCodesInIssueMessages(): boolean;
+/** Hook providing access to the form app's HTML form element. */
+export declare function useFormAppElement(): HTMLFormElement;
+/**
+ * Hook exposing a function that can be used to specify the height of the form
+ * app's top bar.
+ */
+export declare function useSetTopBarHeight(): (height?: number) => void;
+/**
+ * Hook exposing a function that can be used to specify the width of the form
+ * app's left panel.
+ */
+export declare function useSetLeftSidebarWidth(): (width?: number) => void;
+/**
+ * Hook exposing a function that can be used to specify the height of the form
+ * app's bottom panel.
+ */
+export declare function useSetBottomPanelHeight(): (height?: number) => void;
+/**
+ * Returns the current active path of the form app and a function that can be
+ * used to set it, ala React.useState.
+ */
+export declare function useIssuesPanelPath(): [
+    AbsolutePath | null,
+    FormAppActions["setIssuesPanelPath"]
+];
+/** Hook exposing a function that can be used to focus a path within a form app. */
+export declare function useFocus(): FormAppActions["focus"];
+/** Hook exposing a function that can be used to reset the focus. */
+export declare function useResetFocus(): FormAppActions["resetFocus"];
+/**
+ * Hook used to register a controller within the form app. This makes the form
+ * app aware that a controller of a certain path is currently being rendered.
+ */
+export declare function useRegisterController(controller: Controller<any>): void;
+/** Hook to check whether there is a registered controller for the provided path. */
+export declare function useIsRegistered(path?: AbsolutePath | null): boolean;
+/** Hook exposing the active path. */
+export declare function useActivePath(): AbsolutePath;
+/** Hook exposing a function to set the active path. */
+export declare function useSetActivePath(): FormAppActions["setActivePath"];
+/** Hook used to register issue messages within the form app. */
+export declare function useRegisterIssueMessages(path: AbsolutePath | null | undefined, issueMessages?: Record<string, IssueMessagesByCode>, priority?: number): void;
+/** Hook used to get the issue message value for the provided path and code. */
+export declare function useRegisteredIssueMessage(path: AbsolutePath | null | undefined, code: string): IssueMessageValue | null;
+/** Hook used to register a label within the form app. */
+export declare function useRegisterLabel(path: AbsolutePath | null | undefined, label: React.ReactNode, priority?: number): void;
+/**
+ * Hook used to get the label parts associated with the active issues panel
+ * path.
+ */
+export declare function useActiveIssuesPanelBreadcrumb(): BreadcrumbItem[] | null;
+/**
+ * Hook exposing a function that can be used to start navigating through the
+ * form app's issues.
+ */
+export declare function useStartIssuesNavigation(): FormAppActions["startIssuesNavigation"];
+/** Options available to the {@link useOnPathFocus} hook. */
+export interface UseOnFocusedPathChangeOptions {
+    /**
+     * Whether to run the callback immediately with the current active path.
+     *
+     * @default true
+     */
+    fireImmediately?: boolean;
+}
+/**
+ * Hook used to run a given function whenever the form app's focused path
+ * changes.
+ *
+ * @param cb Function to run when the focused path changes. This function should
+ *   hopefully not change on every render (i.e., it should be memoised via
+ *   `useCallback` or be defined externally).
+ * @param options Hook options.
+ */
+export declare function useOnPathFocus(cb: (focusedPath: AbsolutePath) => void, { fireImmediately }?: UseOnFocusedPathChangeOptions): void;
+/** Hook used to set the function which starts issue navigation. */
+export declare function useSetStartIssuesNavigation(fn: () => void): void;

package/dist/types/components/FormApp/FormAppIssueMessages.d.ts

@@ -0,0 +1,45 @@
+import { type Path } from "@ostack.tech/kform";
+import type * as React from "react";
+import { type IssueMessagesByCode } from "../IssueMessages";
+/** Properties of the form app issue messages component. */
+export interface FormAppIssueMessagesProps {
+    /** Base path for the paths used in `messages`. */
+    path?: string | Path;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their code).
+     *
+     * Provided paths may contain wildcards, which will have a lower priority when
+     * matched against.
+     *
+     * These messages are used by the `IssueMessages` and `IssuesPanel`
+     * components.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "/**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "/my/field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /**
+     * Priority to use when registering issue messages.
+     *
+     * When multiple issue messages are associated with the same path, then the
+     * one registered with the highest priority "wins".
+     *
+     * @default 0
+     */
+    priority?: number;
+    children: React.ReactNode;
+}
+/** Component used to register new issue messages within the form app. */
+export declare function FormAppIssueMessages({ path, issueMessages, priority, children, }: FormAppIssueMessagesProps): React.ReactNode;

package/dist/types/components/FormApp/FormAppStatus.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/** Properties of the form app status component. */
+export interface FormAppStatusProps {
+    /**
+     * Whether to mark the form app as disabled for children of this component.
+     *
+     * This property has no effect when set to `false`.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to mark the form app as read-only for children of this component.
+     *
+     * This property has no effect when set to `false`.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    children: React.ReactNode;
+}
+/** Component used to apply a different form app status to part of the form. */
+export declare function FormAppStatus({ disabled, readOnly, children, }: FormAppStatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormApp/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormApp.tsx";
+export { useActiveIssuesPanelBreadcrumb, useDisplayIssueCodesInIssueMessages, useFocus, useFormAppElement, useFormIsDisabled, useFormIsReadOnly, useIsRegistered, useIssuesDisplayMode, useOnPathFocus, useRegisterController, useRegisteredIssueMessage, useRegisterIssueMessages, useRegisterLabel, useSetBottomPanelHeight, useSetLeftSidebarWidth, useSetTopBarHeight, useStartIssuesNavigation, } from "./FormAppContext.ts";
+export * from "./FormAppIssueMessages.tsx";
+export * from "./FormAppStatus.tsx";

package/dist/types/components/FormPages/FormPage.d.ts

@@ -0,0 +1,86 @@
+import { type Path } from "@ostack.tech/kform";
+import { Container, ErrorBoundary, type IconButton, type Popover, type PopoverContent, type Stack } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+import { type IssuesPopover } from "../IssuesPopover";
+/** Properties of the form page component. */
+export interface FormPageProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+    /**
+     * Form page path. This should match the path of the page provided to
+     * `FormPages`.
+     */
+    path?: string | Path;
+    /** Sets the form page as disabled. */
+    disabled?: boolean;
+    /** Sets the form page as read-only. */
+    readOnly?: boolean;
+    /** Form page helper text, displayed as a popover triggered by an icon button. */
+    helperText?: React.ReactNode;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their code).
+     *
+     * Provided paths are relative to the form page's path and may contain
+     * wildcards, which will have a lower priority when matched against.
+     *
+     * These messages are used by the `IssueMessages` component.
+     *
+     * **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * efficient. Please make sure that the identity of the provided value doesn't
+     * change at every render.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /**
+     * Issue messages of the form page itself.
+     *
+     * These messages can also be provided via the `issueMessages` property using
+     * a path of "`.`".
+     */
+    ownIssueMessages?: IssueMessagesByCode;
+    /** Properties to pass to the header element. */
+    headerProps?: React.ComponentPropsWithRef<"div">;
+    /** Label of the helper button announced to assistive technologies. */
+    helperButtonLabel?: string;
+    /** Properties to pass to the code element. */
+    codeProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the title element. */
+    titleProps?: React.ComponentPropsWithRef<"h2">;
+    /**
+     * Properties to pass to the element containing the popover components in the
+     * header.
+     */
+    headerPopoverContainerProps?: React.ComponentPropsWithRef<typeof Stack>;
+    /** Properties to pass to the form page's issues popover component. */
+    issuesPopoverProps?: React.ComponentPropsWithRef<typeof IssuesPopover>;
+    /** Properties to pass to the form page's issue messages component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "messages">;
+    /** Properties to pass to the content element. */
+    contentProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the container component. */
+    containerProps?: React.ComponentPropsWithRef<typeof Container>;
+    /** Properties to pass to the `ErrorBoundary` component. */
+    errorBoundaryProps?: React.ComponentPropsWithRef<typeof ErrorBoundary>;
+    /** Properties to pass to the helper button component. */
+    helperButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "icon">;
+    /** Properties to pass to the helper popover component. */
+    helperPopoverProps?: React.ComponentPropsWithRef<typeof Popover>;
+    /** Properties to pass to the helper popover content component. */
+    helperPopoverContentProps?: React.ComponentPropsWithRef<typeof PopoverContent>;
+    children?: React.ReactNode;
+}
+/** Form page component. */
+export declare const FormPage: React.ForwardRefExoticComponent<FormPageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormPages/FormPageHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type FormPageProps } from "./FormPage.tsx";
+/** Properties of the form page header. */
+export interface FormPageHeaderProps extends React.ComponentPropsWithoutRef<"div">, Pick<FormPageProps, "helperText" | "helperButtonLabel" | "ownIssueMessages" | "codeProps" | "titleProps" | "headerPopoverContainerProps" | "issuesPopoverProps" | "issueMessagesProps" | "helperButtonProps" | "helperPopoverProps" | "helperPopoverContentProps"> {
+}
+/** Form page header. */
+export declare const FormPageHeader: React.ForwardRefExoticComponent<FormPageHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormPages/FormPageSidebarItem.d.ts

@@ -0,0 +1,6 @@
+import { type AbsolutePath } from "@ostack.tech/kform";
+interface FormPageSidebarItemProps {
+    path: AbsolutePath;
+}
+export declare function FormPageSidebarItem({ path }: FormPageSidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export {};