@ostack.tech/ui-kform 0.1.0

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

@@ -0,0 +1,40 @@
+import { type AbsolutePath, Path } from "@ostack.tech/kform";
+import * as React from "react";
+/** Properties of the form page component. */
+export interface FormPagesProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Base path for all declared form pages. */
+    path?: string | Path;
+    /** List of all form pages. */
+    pages: FormPageObject[];
+    /** Default active form page. */
+    defaultActivePage?: string | Path;
+    /** Controlled active form page. */
+    activePage?: string | Path;
+    /**
+     * Function called whenever the active form page changes.
+     *
+     * @param activePagePath Path of the new active form page.
+     */
+    onActivePageChange?: (activePagePath: AbsolutePath | null) => void;
+    children?: React.ReactNode;
+}
+/** Object representation of a form page. */
+export interface FormPageObject<T = any> {
+    /** Form page path. */
+    path?: string | Path;
+    /** Form page's title */
+    title: React.ReactNode | ((value: T) => React.ReactNode);
+    /**
+     * Title of the form page as a string to display in the document's title.
+     *
+     * Defaults to `title` when it is a string. A warning is printed if `title` is
+     * not a string and `documentTitle` is not provided.
+     */
+    documentTitle?: string | null | ((value: T) => string | null);
+    /** Form page's code. */
+    code?: React.ReactNode;
+    /** Form page's label in the issues panel. The `title` is used by default. */
+    issuesPanelLabel?: React.ReactNode | ((value: T) => React.ReactNode);
+}
+/** Root component used to render form pages. */
+export declare const FormPages: React.ForwardRefExoticComponent<FormPagesProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,67 @@
+import { AbsolutePath, type DisplayStatus, type Path, type SealedValidationIssue } from "@ostack.tech/kform";
+import * as React from "react";
+import { type FormPageObject, type FormPagesProps } from "./FormPages.tsx";
+/** Value of the form pages context. */
+export type FormPagesContextValue = FormPagesStore;
+/** Resolved form page object. */
+export interface ResolvedFormPageObject extends FormPageObject {
+    path: AbsolutePath;
+}
+/** Form page state. */
+export interface FormPageState {
+    path: AbsolutePath;
+    exists: boolean;
+    deferredDisplayStatus: DisplayStatus | undefined;
+    deferredIssuesToDisplay: SealedValidationIssue[];
+    title?: React.ReactNode;
+    documentTitle?: string | null;
+    code?: React.ReactNode;
+}
+/** State of the form pages. */
+export interface FormPagesState {
+    pages: ResolvedFormPageObject[];
+    activePage: AbsolutePath | null;
+    activePageIndex: () => number;
+    pageStates: [Record<string, FormPageState | null>];
+    pageHeaderHeights: [Map<string, number>];
+    navigationSelectHeight: number;
+    actions: FormPagesActions;
+}
+/** Actions of the form pages. */
+export interface FormPagesActions {
+    getPageState: (path: AbsolutePath) => FormPageState | null;
+    setPages: (pages: ResolvedFormPageObject[]) => void;
+    setActivePage: (activePage: string | Path | null) => void;
+    updateActivePage: (oldActivePageIndex: number) => void;
+    registerPageState: (path: AbsolutePath, state: FormPageState) => void;
+    setPageHeaderHeight: (path: AbsolutePath, height: number | null) => void;
+}
+/** Form pages store. */
+export type FormPagesStore = ReturnType<typeof useCreateFormPagesContext>;
+/** Form pages context. */
+export declare const FormPagesContext: React.Context<(Omit<import("zustand").StoreApi<FormPagesState>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: FormPagesState, previousSelectedState: FormPagesState) => void): () => void;
+        <U>(selector: (state: FormPagesState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+}) | null>;
+/** Options used to create the form pages context. */
+export interface UseCreateFormPagesContextOptions extends Pick<FormPagesProps, "defaultActivePage" | "activePage" | "onActivePageChange"> {
+    basePath: AbsolutePath;
+    resolvedPages: ResolvedFormPageObject[];
+}
+/** Hook used to create the form pages context. */
+export declare function useCreateFormPagesContext({ basePath, resolvedPages, defaultActivePage, activePage, onActivePageChange, }: UseCreateFormPagesContextOptions): Omit<import("zustand").StoreApi<FormPagesState>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: FormPagesState, previousSelectedState: FormPagesState) => void): () => void;
+        <U>(selector: (state: FormPagesState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+};
+export declare function useFormPagesContext(): FormPagesContextValue;
+export declare function useFormPageState<T>(path: AbsolutePath, selector: (state: FormPageState | null) => T): T;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { FormPagesSelect } from "./FormPagesSelect.tsx";
+import { FormPagesSidebar } from "./FormPagesSidebar.tsx";
+/** Properties of the form pages navigation component. */
+export interface FormPagesNavigationProps extends React.ComponentPropsWithoutRef<"nav"> {
+    /** Properties to pass to the sidebar component. */
+    sidebarProps?: React.ComponentPropsWithRef<typeof FormPagesSidebar>;
+    /** Properties to pass to the select component. */
+    selectProps?: React.ComponentPropsWithRef<typeof FormPagesSelect>;
+}
+/** Component allowing the navigation between form pages. */
+export declare const FormPagesNavigation: React.ForwardRefExoticComponent<FormPagesNavigationProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,7 @@
+import { Select } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the form pages select component. */
+export interface FormPagesSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select>, "multiple" | "defaultValue" | "value" | "onValueChange" | "showClearButton"> {
+}
+/** Select component allowing the navigation between form pages. */
+export declare const FormPagesSelect: React.ForwardRefExoticComponent<FormPagesSelectProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+/** Properties of the form pages sidebar component. */
+export interface FormPagesSidebarProps extends React.ComponentPropsWithoutRef<"aside"> {
+}
+/** Sidebar component allowing the navigation between form pages. */
+export declare const FormPagesSidebar: React.ForwardRefExoticComponent<FormPagesSidebarProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,3 @@
+export * from "./FormPage.tsx";
+export * from "./FormPages.tsx";
+export * from "./FormPagesNavigation.tsx";

package/dist/types/components/FormStepper/FormStep.d.ts

@@ -0,0 +1,8 @@
+import { type AbsolutePath } from "@ostack.tech/kform";
+/** Properties of the form step component. */
+export interface FormStepProps {
+    path: AbsolutePath;
+    index: number;
+}
+/** Form step. */
+export declare function FormStep({ path, index }: FormStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormStepper/FormStepContent.d.ts

@@ -0,0 +1,20 @@
+import { type Path } from "@ostack.tech/kform";
+import { ErrorBoundary, StepContent } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the form step content component. */
+export interface FormStepContentProps extends Omit<React.ComponentPropsWithoutRef<typeof StepContent>, "index" | "children"> {
+    /**
+     * Step path. This should match the path of the step provided to
+     * `FormStepper`.
+     */
+    path?: string | Path;
+    /** Sets the step as disabled. */
+    disabled?: boolean;
+    /** Sets the step as read-only. */
+    readOnly?: boolean;
+    /** Properties to pass to the `ErrorBoundary` component. */
+    errorBoundaryProps?: React.ComponentPropsWithRef<typeof ErrorBoundary>;
+    children?: React.ReactNode;
+}
+/** Component containing the content of a form step. */
+export declare const FormStepContent: React.ForwardRefExoticComponent<FormStepContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormStepper/FormStepList.d.ts

@@ -0,0 +1,7 @@
+import { StepList } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the form steps sidebar component. */
+export interface FormStepListProps extends React.ComponentPropsWithoutRef<typeof StepList> {
+}
+/** Component displaying all form steps in a list. */
+export declare const FormStepList: React.ForwardRefExoticComponent<FormStepListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,71 @@
+import { type AbsolutePath, Path, type SealedLocatedValidationIssue } from "@ostack.tech/kform";
+import { Stepper } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the form stepper component. */
+export interface FormStepperProps extends Omit<React.ComponentPropsWithoutRef<typeof Stepper>, "defaultActiveStep" | "activeStep" | "onActiveStepChange"> {
+    /** Base path for all declared form steps. */
+    path?: string | Path;
+    /** List of all form steps. */
+    steps: FormStepObject[];
+    /** Default active form step. */
+    defaultActiveStep?: string | Path;
+    /** Controlled active form step. */
+    activeStep?: string | Path;
+    /**
+     * Function called whenever the active form step changes.
+     *
+     * @param activeStepPath Path of the new active form step.
+     * @param activeStepIndex Index of the new active form step.
+     */
+    onActiveStepChange?: (activeStepPath: AbsolutePath | null, activeStepIndex: number) => void;
+    /**
+     * Function called when a step is touched and validated due to a navigation to
+     * a following step. This function is never called when
+     * `skipStepValidationOnForwardNavigation` is `true`.
+     *
+     * @param issues Issues present in the step.
+     */
+    onStepValidation?: (issues: SealedLocatedValidationIssue[]) => void;
+    /**
+     * Whether to skip marking a step as touched and validating it when navigating
+     * to a following step.
+     *
+     * @default false
+     */
+    skipStepValidationOnForwardNavigation?: boolean;
+    /**
+     * Whether to allow navigation to a following step when a previous step
+     * contains errors. This is always `true` when
+     * `skipStepValidationOnForwardNavigation` is also `true`.
+     *
+     * @default false
+     */
+    allowForwardNavigationOnError?: boolean;
+    /**
+     * Whether to prevent the focus of an invalid field when a step was validated
+     * and an error was found. This is always `true` if either
+     * `skipStepValidationOnForwardNavigation` or `allowForwardNavigationOnError`
+     * are `true`.
+     *
+     * @default false
+     */
+    preventFocusOnError?: boolean;
+}
+/** Object representation of a form step. */
+export interface FormStepObject<T = any> {
+    /** Form step path. */
+    path?: string | Path;
+    /** Form step's title. */
+    title: React.ReactNode | ((value: T) => React.ReactNode);
+    /**
+     * Title of the form step as a string to display in the document's title.
+     *
+     * Defaults to `title` when it is a string. A warning is printed if `title` is
+     * not a string and `documentTitle` is not provided.
+     */
+    documentTitle?: string | null | ((value: T) => string | null);
+    /** Label of the form step in the issues panel. Uses the `title` by default. */
+    issuesPanelLabel?: React.ReactNode | ((value: T) => React.ReactNode);
+}
+/** Root component used to render form steps. */
+export declare const FormStepper: React.ForwardRefExoticComponent<FormStepperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormStepper/FormStepperContext.d.ts

@@ -0,0 +1,65 @@
+import { type AbsolutePath, type DisplayStatus, type FormManager } from "@ostack.tech/kform";
+import * as React from "react";
+import { type FormStepObject, type FormStepperProps } from "./FormStepper.tsx";
+/** Value of the form stepper context. */
+export type FormStepperContextValue = FormStepperStore;
+/** Resolved form step object. */
+export interface ResolvedFormStepObject extends FormStepObject {
+    path: AbsolutePath;
+    index: number;
+}
+/** Form step state. */
+export interface FormStepState {
+    path: AbsolutePath;
+    index: number;
+    exists: boolean;
+    deferredDisplayStatus: DisplayStatus | undefined;
+    title?: React.ReactNode;
+    documentTitle?: string | null;
+}
+/** State of the form stepper. */
+export interface FormStepperState {
+    steps: ResolvedFormStepObject[];
+    activeStep: ResolvedFormStepObject | null;
+    stepStates: [Record<string, FormStepState | null>];
+    actions: FormStepperActions;
+}
+/** Actions of the form stepper. */
+export interface FormStepperActions {
+    getStepState: (path: AbsolutePath) => FormStepState | null;
+    setSteps: (steps: ResolvedFormStepObject[]) => void;
+    setActiveStep: (activeStep: ResolvedFormStepObject | null, callListener?: boolean) => void;
+    updateActiveStep: () => void;
+    registerStepState: (path: AbsolutePath, state: FormStepState) => void;
+    goToStep: (index: number) => Promise<void>;
+}
+/** Form stepper store. */
+export type FormStepperStore = ReturnType<typeof useCreateFormStepperContext>;
+/** Form stepper context. */
+export declare const FormStepperContext: React.Context<(Omit<import("zustand").StoreApi<FormStepperState>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: FormStepperState, previousSelectedState: FormStepperState) => void): () => void;
+        <U>(selector: (state: FormStepperState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+}) | null>;
+/** Options used to create the form stepped context. */
+export interface UseCreateFormStepperContextOptions extends Pick<FormStepperProps, "defaultActiveStep" | "activeStep" | "onActiveStepChange" | "onStepValidation" | "skipStepValidationOnForwardNavigation" | "allowForwardNavigationOnError" | "preventFocusOnError"> {
+    formManager: FormManager;
+    basePath: AbsolutePath;
+    resolvedSteps: ResolvedFormStepObject[];
+}
+/** Hook used to create the form stepper context. */
+export declare function useCreateFormStepperContext({ formManager, basePath, resolvedSteps, defaultActiveStep, activeStep, onActiveStepChange, onStepValidation, skipStepValidationOnForwardNavigation, allowForwardNavigationOnError, preventFocusOnError, }: UseCreateFormStepperContextOptions): Omit<import("zustand").StoreApi<FormStepperState>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: FormStepperState, previousSelectedState: FormStepperState) => void): () => void;
+        <U>(selector: (state: FormStepperState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+};
+export declare function useFormStepperContext(): FormStepperContextValue;
+export declare function useFormStepState<T>(path: AbsolutePath, selector: (state: FormStepState | null) => T): T;

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

@@ -0,0 +1,3 @@
+export * from "./FormStepContent.tsx";
+export * from "./FormStepList.tsx";
+export * from "./FormStepper.tsx";

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

@@ -0,0 +1,13 @@
+import { type Path, type ValidationIssueData } from "@ostack.tech/kform";
+import { Alert } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the issue alert component. */
+export interface IssueAlertProps extends Omit<React.ComponentPropsWithoutRef<typeof Alert>, "severity" | "children"> {
+    /** Path of the value with the issue in question. */
+    path?: string | Path;
+    /** Code of the issue in question. */
+    code: string;
+    children?: React.ReactNode | ((issueData: ValidationIssueData) => React.ReactNode);
+}
+/** Component used to display an issue alert. */
+export declare const IssueAlert: React.ForwardRefExoticComponent<IssueAlertProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,14 @@
+import { type AbsolutePath, type Schema, type SealedValidationIssue } from "@ostack.tech/kform";
+import * as React from "react";
+/** Properties of the issue message component. */
+export interface IssueMessageProps {
+    displayIssueCode?: boolean;
+    unknownErrorMessage?: React.ReactNode;
+    unknownWarningMessage?: React.ReactNode;
+    path: AbsolutePath;
+    issue: SealedValidationIssue;
+    schema: Schema;
+    issueCodeProps?: React.ComponentPropsWithRef<"span">;
+}
+/** Single issue message within the issue messages or issues panel components. */
+export declare function IssueMessage({ path, issue, schema, displayIssueCode, unknownErrorMessage, unknownWarningMessage, issueCodeProps, }: IssueMessageProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,70 @@
+import { type AbsolutePath, type Path, type Schema, type SealedValidationIssue, type ValidationIssueData } from "@ostack.tech/kform";
+import { FeedbackList } from "@ostack.tech/ui";
+import * as React from "react";
+/** Value of an issue message. */
+export type IssueMessageValue = React.ReactNode | ((issueData: ValidationIssueData, schema: Schema, path: AbsolutePath) => React.ReactNode);
+/** Mapping of issue message codes to their respective message. */
+export type IssueMessagesByCode = Record<string, IssueMessageValue>;
+/** Properties of the issue messages component. */
+export interface IssueMessagesProps extends React.ComponentPropsWithoutRef<typeof FeedbackList> {
+    /** Path of the value for which to show issues. */
+    path?: string | Path;
+    /**
+     * Issues to show, associated with the provided path. If not provided, the
+     * component will query the issues from the form manager.
+     */
+    issues?: SealedValidationIssue[];
+    /** Mapping from an issue's code to its message. */
+    messages?: IssueMessagesByCode;
+    /**
+     * Whether to display issue codes together with each issue message.
+     *
+     * This property can also be set globally via the `displayIssueCodes` property
+     * of the `FormApp`.
+     */
+    displayIssueCodes?: boolean;
+    /**
+     * Message to show for an error that does not have an associated message.
+     *
+     * This message will always automatically include the code of the issue in
+     * question.
+     */
+    unknownErrorMessage?: React.ReactNode;
+    /**
+     * Message to show for a warning that does not have an associated message.
+     *
+     * This message will always automatically include the code of the issue in
+     * question.
+     */
+    unknownWarningMessage?: React.ReactNode;
+    /**
+     * Whether to render the issue messages "unwrapped", i.e. outside a containing
+     * `FeedbackList`.
+     *
+     * This is useful together with components such as the `DateRangeControl`
+     * where you might want to show issues for multiple paths, all within the same
+     * `FeedbackList`:
+     *
+     * ```tsx
+     * <FeedbackList>
+     *   <IssueMessages path="startDate" unwrapped />
+     *   <IssueMessages path="endDate" unwrapped />
+     * </FeedbackList>;
+     * ```
+     */
+    unwrapped?: boolean;
+}
+/**
+ * Component used to display all issues associated with the relevant path.
+ *
+ * Issue messages are automatically read from the scope (typically provided by
+ * setting the `issueMessages` property of a `FormApp`, `Annex`, or
+ * `FormPage`).
+ *
+ * Messages may also be passed directly to this component via the `messages`
+ * property.
+ *
+ * If `path` contains an issue without an associated issue message, a generic
+ * message is displayed together with a console warning.
+ */
+export declare const IssueMessages: React.ForwardRefExoticComponent<IssueMessagesProps & React.RefAttributes<HTMLUListElement>>;

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

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

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

@@ -0,0 +1,106 @@
+import { type IssuesTrackerOptions } from "@ostack.tech/kform-react";
+import { type Card, type CardBody, type CardHeader, type CardTitle, type CloseButton, type Icon, type IconButton, type Spinner } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the issues navigation component. */
+export interface IssuesPanelProps extends Pick<IssuesTrackerOptions, "issuesOrderCompareFn">, Omit<React.ComponentPropsWithoutRef<typeof Card>, "children" | "variant" | "color"> {
+    /** Default open state of the issues navigation panel. */
+    defaultOpen?: boolean;
+    /** Controlled open state of the issues navigation panel. */
+    open?: boolean;
+    /**
+     * Function called whenever the open state of the issues navigation panel
+     * changes.
+     *
+     * @param open New open state.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether to display issue codes together with each issue message.
+     *
+     * This property can also be set globally via the `displayIssueCodes` property
+     * of the `FormApp`.
+     */
+    displayIssueCodes?: boolean;
+    /**
+     * Message to show for an error that does not have an associated message.
+     *
+     * This message will always automatically include the code of the issue in
+     * question.
+     */
+    unknownErrorMessage?: React.ReactNode;
+    /**
+     * Message to show for a warning that does not have an associated message.
+     *
+     * This message will always automatically include the code of the issue in
+     * question.
+     */
+    unknownWarningMessage?: React.ReactNode;
+    /**
+     * Errors label.
+     *
+     * @param errors Number of errors. If undefined, the function should return a
+     *   generic label with no number.
+     */
+    errorsLabel?: (errors?: number) => React.ReactNode;
+    /**
+     * Warnings label.
+     *
+     * @param warnings Number of warnings. If undefined, the function should
+     *   return a generic label with no number.
+     */
+    warningsLabel?: (warnings?: number) => React.ReactNode;
+    /** Label of the focus button. */
+    focusButtonLabel?: string;
+    /** Label of the "previous issue" button. */
+    previousIssueButtonLabel?: string;
+    /** Label of the "next issue" button. */
+    nextIssueButtonLabel?: string;
+    /** Label of the "first issue" button. */
+    firstIssueButtonLabel?: string;
+    /** Label of the "last issue" button. */
+    lastIssueButtonLabel?: string;
+    /**
+     * Text announced to assistive technologies with the current page out of the
+     * total number of pages.
+     *
+     * @param currentPage Current page.
+     * @param totalPages Total number of pages.
+     */
+    paginationLabel?: (currentPage: number, totalPages: number) => React.ReactNode;
+    /** Message to display when there are no issues to report. */
+    noIssuesMessage?: React.ReactNode;
+    /** Title to display when all issues of the active path have been resolved. */
+    resolvedTitle?: React.ReactNode;
+    /** Message to display when all issues of the active path have been resolved. */
+    resolvedMessage?: React.ReactNode;
+    /** Properties to pass to the container element. */
+    containerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the card header component. */
+    headerProps?: React.ComponentPropsWithRef<typeof CardHeader>;
+    /** Properties to pass to the card body component. */
+    bodyProps?: React.ComponentPropsWithRef<typeof CardBody>;
+    /** Properties to pass to the loading `Spinner` component. */
+    loadingSpinnerProps?: React.ComponentPropsWithRef<typeof Spinner>;
+    /** Properties to pass to the validating `Spinner` component. */
+    validatingSpinnerProps?: React.ComponentPropsWithRef<typeof Spinner>;
+    /** Properties to pass to the pagination element. */
+    paginationProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the "focus" button component. */
+    focusButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "label">;
+    /** Properties to pass to the "previous issue" button component. */
+    previousIssueButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "label">;
+    /** Properties to pass to the "next issue" button component. */
+    nextIssueButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "label">;
+    /** Properties to pass to the "first issue" button component. */
+    firstIssueButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "label">;
+    /** Properties to pass to the "last issue" button component. */
+    lastIssueButtonProps?: Omit<React.ComponentPropsWithRef<typeof IconButton>, "label">;
+    /** Properties to pass to the icon component. */
+    iconProps?: Omit<React.ComponentPropsWithRef<typeof Icon>, "icon">;
+    /** Properties to pass to the title component. */
+    titleProps?: React.ComponentPropsWithRef<typeof CardTitle>;
+    /** Properties to pass to the close button component. */
+    closeButtonProps?: React.ComponentPropsWithRef<typeof CloseButton>;
+}
+/** Component used to navigate through the issues of the form. */
+export declare const IssuesPanel: React.ForwardRefExoticComponent<IssuesPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/IssuesPanel/IssuesPanelControls.d.ts

@@ -0,0 +1,19 @@
+import { type AbsolutePath } from "@ostack.tech/kform";
+import { type Controller } from "@ostack.tech/kform-react";
+import { type IconButtonColor } from "@ostack.tech/ui";
+import { type IssuesPanelProps } from "./IssuesPanel.tsx";
+/** Properties of the issues panel controls component. */
+export interface IssuesPanelControlsProps extends Pick<IssuesPanelProps, "focusButtonLabel" | "previousIssueButtonLabel" | "nextIssueButtonLabel" | "firstIssueButtonLabel" | "lastIssueButtonLabel" | "paginationLabel" | "validatingSpinnerProps" | "paginationProps" | "focusButtonProps" | "previousIssueButtonProps" | "nextIssueButtonProps" | "firstIssueButtonProps" | "lastIssueButtonProps" | "closeButtonProps"> {
+    currentPagePath: AbsolutePath | null;
+    currentPageIndex: number;
+    currentPageController: Controller;
+    nPages: number;
+    goToPreviousPage: () => void;
+    goToNextPage: () => void;
+    goToFirstPage: () => void;
+    goToLastPage: () => void;
+    buttonsColor?: IconButtonColor;
+    closePanel: () => void;
+}
+/** Controls of the issues panel. */
+export declare function IssuesPanelControls({ currentPagePath, nPages, currentPageIndex, currentPageController, goToPreviousPage, goToNextPage, goToFirstPage, goToLastPage, buttonsColor, closePanel, focusButtonLabel, previousIssueButtonLabel, nextIssueButtonLabel, firstIssueButtonLabel, lastIssueButtonLabel, paginationLabel, validatingSpinnerProps, paginationProps, focusButtonProps, previousIssueButtonProps, nextIssueButtonProps, firstIssueButtonProps, lastIssueButtonProps, closeButtonProps, }: IssuesPanelControlsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/IssuesPanel/IssuesPanelMessagesCard.d.ts

@@ -0,0 +1,13 @@
+import { type AbsolutePath } from "@ostack.tech/kform";
+import { type Controller, type IssuesTrackerResult } from "@ostack.tech/kform-react";
+import { Card, type IconButtonColor } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssuesPanelProps } from "./IssuesPanel.tsx";
+export interface IssuesPanelMessagesCardProps extends React.ComponentPropsWithoutRef<typeof Card>, Pick<IssuesPanelProps, "displayIssueCodes" | "unknownErrorMessage" | "unknownWarningMessage" | "errorsLabel" | "warningsLabel" | "noIssuesMessage" | "resolvedTitle" | "resolvedMessage" | "headerProps" | "bodyProps" | "loadingSpinnerProps" | "titleProps" | "iconProps"> {
+    currentPagePath: AbsolutePath | null;
+    currentPageController: Controller;
+    issuesTrackerResult: IssuesTrackerResult;
+    currentPageIndex: number;
+    renderControls: (buttonsColor?: IconButtonColor) => React.ReactNode;
+}
+export declare const IssuesPanelMessagesCard: React.ForwardRefExoticComponent<IssuesPanelMessagesCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/IssuesPanel/IssuesPanelSummaryCard.d.ts

@@ -0,0 +1,9 @@
+import { type IssuesTrackerResult } from "@ostack.tech/kform-react";
+import { Card, type IconButtonColor } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssuesPanelProps } from "./IssuesPanel.tsx";
+export interface IssuesPanelSummaryCardProps extends React.ComponentPropsWithoutRef<typeof Card>, Pick<IssuesPanelProps, "errorsLabel" | "warningsLabel" | "noIssuesMessage" | "headerProps" | "loadingSpinnerProps" | "titleProps" | "iconProps"> {
+    issuesTrackerResult: IssuesTrackerResult;
+    renderControls: (buttonsColor?: IconButtonColor) => React.ReactNode;
+}
+export declare const IssuesPanelSummaryCard: React.ForwardRefExoticComponent<IssuesPanelSummaryCardProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,15 @@
+import { type Path } from "@ostack.tech/kform";
+import { FeedbackPopover } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the issues popover component. */
+export interface IssuesPopoverProps extends React.ComponentPropsWithoutRef<typeof FeedbackPopover> {
+    path?: string | Path;
+    /**
+     * Paths relevant to this issues popover. When one of the relevant paths
+     * becomes active, the popover will automatically open. Defaults to `[path]`
+     * (or `[<current path>]` if no `path` is provided).
+     */
+    relevantPaths?: (string | Path)[];
+}
+/** Component used to display issues within a popover. */
+export declare const IssuesPopover: React.ForwardRefExoticComponent<IssuesPopoverProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,22 @@
+import { type ButtonProps } from "@ostack.tech/ui";
+import * as React from "react";
+import { type FormLoaderOptions } from "../../utils/useFormLoader.tsx";
+/** Properties of the load action. */
+export interface LoadActionProps<T = unknown> extends Omit<ButtonProps, "children">, FormLoaderOptions<T> {
+    /** Action's label. */
+    label?: React.ReactNode;
+    /**
+     * Keybinds for triggering the action. Set to `null` to disable the keyboard
+     * shortcut.
+     *
+     * Keyboard handling is built on top of the
+     * [`tinykeys`](https://jamiebuilds.github.io/tinykeys) library. For
+     * information on keybinding syntax, read the [`tinykeys`
+     * documentation](https://github.com/jamiebuilds/tinykeys).
+     *
+     * Defaults to the keybinds defined by the current locale.
+     */
+    keybinds?: string | string[] | null;
+}
+/** Action used to load a form from a file. */
+export declare function LoadAction<T = unknown>({ label, keybinds, loading, disabled, onClick, decode, path, extensions, mimeTypes, description, startIn, id, setPristineOnLoad, validateOnLoad, successMessage, errorMessage, ...otherProps }: LoadActionProps<T>): import("react/jsx-runtime").JSX.Element;