@ostack.tech/ui-kform 0.1.0

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

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

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

@@ -0,0 +1,45 @@
+import { type Path } from "@ostack.tech/kform";
+import { type Numeric, type NumericInputController, type NumericInputOptions } from "@ostack.tech/kform-react";
+import { NumericInput } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+/** Properties of the numeric control component. */
+export interface NumericControlProps<T extends Numeric | null = Numeric | null> extends Omit<NumericInputOptions<T, string, React.ComponentRef<typeof NumericInput>>, "enabled" | "formatFromString" | "parseToString">, Omit<React.ComponentPropsWithoutRef<typeof NumericInput>, "defaultValue" | "value" | "onValueChange" | "valueIsUnformattedString" | "status"> {
+    /** 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<NumericInputController<T, string, React.ComponentRef<typeof NumericInput>> | undefined>;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/** Numeric control component supporting (possibly nullable) numeric schemas. */
+export declare const NumericControl: React.ForwardRefExoticComponent<NumericControlProps<Numeric | null> & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,16 @@
+import { type AbsolutePath, type Path } from "@ostack.tech/kform";
+import { Link } from "@ostack.tech/ui";
+import React from "react";
+/** Properties of the path link component. */
+export interface PathLinkProps extends Omit<React.ComponentPropsWithoutRef<typeof Link>, "href"> {
+    /** KForm path to link to. */
+    to: string | Path;
+    /**
+     * Function used to build the link's `href` from the path.
+     *
+     * @default (path) => path.toString()
+     */
+    buildHref?: (path: AbsolutePath) => string;
+}
+/** Link to a KForm path. */
+export declare function PathLink({ to, buildHref, onClick, ...otherProps }: PathLinkProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,56 @@
+import { type Path } from "@ostack.tech/kform";
+import { type InputController, type InputOptions } from "@ostack.tech/kform-react";
+import { Radio, RadioGroup } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+/** Radio in object notation. */
+export type RadioObject<T = unknown> = Omit<React.ComponentPropsWithRef<typeof Radio>, "value" | "children"> & {
+    /** Option value. */
+    value: T;
+    /** Option's rendered text. */
+    text?: React.ReactNode;
+    /** Option's unique key. */
+    key?: React.Key;
+};
+/** Properties of the radio group control component. */
+export interface RadioGroupControlProps<T = unknown> extends Omit<InputOptions<T, string, React.ComponentRef<typeof RadioGroup>>, "enabled" | "format" | "parse">, Omit<React.ComponentPropsWithoutRef<typeof RadioGroup>, "defaultValue" | "value" | "onValueChange" | "children" | "status"> {
+    /** Path to the value. */
+    path?: string | Path;
+    /** RadioGroup control options. */
+    options: RadioObject<T>[];
+    /**
+     * 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<InputController<T, string, React.ComponentRef<typeof RadioGroup>> | undefined>;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/** Radio group control component supporting schemas of any type. */
+export declare const RadioGroupControl: React.ForwardRefExoticComponent<RadioGroupControlProps<unknown> & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,51 @@
+import { type ButtonProps, DropdownMenuContent, IconButton } from "@ostack.tech/ui";
+import * as React from "react";
+import { type FormSaverOptions } from "../../utils/useFormSaver.tsx";
+/** Properties of the save action. */
+export interface SaveActionProps<T = unknown> extends Omit<ButtonProps, "children">, Omit<FormSaverOptions<T>, "overwrite"> {
+    /** 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;
+    /**
+     * Whether to disable the overwriting behaviour of the “save” button. When
+     * set, the “save” button will function as the “save as” button and the “save
+     * as” button will not be rendered.
+     *
+     * This property only affects browsers that support modern file system APIs,
+     * since other browsers already function in the above-mentioned way.
+     */
+    disableOverwrite?: boolean;
+    /** Label of the save options button. */
+    saveOptionsLabel?: React.ReactNode;
+    /** Label of the action's "save as" sub-action. */
+    saveAsLabel?: React.ReactNode;
+    /**
+     * Keybinds for triggering the "save as" sub-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.
+     */
+    saveAsKeybinds?: string | string[] | null;
+    /** Properties to pass to the save options button component. */
+    saveOptionsProps?: Omit<Partial<React.ComponentPropsWithRef<typeof IconButton>>, "label">;
+    /** Properties to pass to the save options dropdown menu component. */
+    dropdownMenuProps?: React.ComponentPropsWithRef<typeof DropdownMenuContent>;
+}
+/** Action used to save the form to a file. */
+export declare function SaveAction<T = unknown>({ label, keybinds, disableOverwrite, saveOptionsLabel, saveAsLabel, saveAsKeybinds, loading, disabled, onClick, variant, color, path, encode, fileName, extensions, description, mimeTypes, startIn, excludeAcceptAllOption, id, successMessage, errorMessage, saveOptionsProps, dropdownMenuProps, ...otherProps }: SaveActionProps<T>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,48 @@
+import { type Path } from "@ostack.tech/kform";
+import { type InputController, type InputOptions } from "@ostack.tech/kform-react";
+import { Select } from "@ostack.tech/ui";
+import * as React from "react";
+import { type OptionObject, type OptionsGroupObject } from "../../utils/options.ts";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+/** Properties of the select control component. */
+export interface SelectControlProps<T = unknown> extends Omit<InputOptions<T, string, React.ComponentRef<typeof Select>>, "enabled" | "format" | "parse">, Omit<React.ComponentPropsWithoutRef<typeof Select>, "multiple" | "defaultValue" | "value" | "onValueChange" | "children" | "status"> {
+    /** Path to the value. */
+    path?: string | Path;
+    /** Select control options. */
+    options: (OptionsGroupObject<T> | OptionObject<T>)[];
+    /**
+     * 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<InputController<T, string, React.ComponentRef<typeof Select>> | undefined>;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/** Select control component supporting schemas of any type. */
+export declare const SelectControl: React.ForwardRefExoticComponent<SelectControlProps<unknown> & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,55 @@
+import { type Path } from "@ostack.tech/kform";
+import { type Listable, type ListableInputController, type ListableInputOptions } from "@ostack.tech/kform-react";
+import { Select } from "@ostack.tech/ui";
+import * as React from "react";
+import { type OptionObject, type OptionsGroupObject } from "../../utils/options.ts";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+/** Properties of the select multiple control component. */
+export interface SelectMultipleControlProps<T = unknown, TListable extends Listable<T> | null = Listable<T> | null> extends Omit<ListableInputOptions<T, TListable, string[], React.ComponentRef<typeof Select>>, "enabled" | "formatFromArray" | "parseToArray">, Omit<React.ComponentPropsWithoutRef<typeof Select>, "multiple" | "defaultValue" | "value" | "onValueChange" | "children" | "status"> {
+    /** 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;
+    /** Select multiple control options. */
+    options: (OptionsGroupObject<T> | OptionObject<T>)[];
+    /**
+     * 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<ListableInputController<T, TListable, string[], React.ComponentRef<typeof Select>> | undefined>;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/**
+ * Select multiple control component supporting (possibly nullable) listable
+ * schemas with elements of any type.
+ *
+ * If the schema is nullable, this component sets the form value to `null` when
+ * the control contains no elements. Note, however, that the form may still hold
+ * an empty listable as value if set programmatically.
+ */
+export declare const SelectMultipleControl: React.ForwardRefExoticComponent<SelectMultipleControlProps<unknown, Listable<unknown> | null> & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,94 @@
+import { type LocatedValidationWarning } from "@ostack.tech/kform";
+import { type SubmitOptions } from "@ostack.tech/kform-react";
+import { Alert, AlertDialogBody, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, type ButtonProps, Checkbox } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the submit action. */
+export interface SubmitActionProps<T = unknown, TSubmitResult = unknown> extends Omit<ButtonProps, "children" | "onSubmit">, Pick<Required<SubmitOptions<T, TSubmitResult>>, "onSubmit">, Omit<SubmitOptions<T, TSubmitResult>, "onSubmit"> {
+    /** 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;
+    /**
+     * Whether users should confirm (by ticking a checkbox) that the submission
+     * should proceed whenever the form contains warnings.
+     *
+     * @default true
+     */
+    confirmWarnings?: boolean;
+    /** Title of the confirmation dialog which appears when submitting the form. */
+    dialogTitle?: React.ReactNode | ((formValue: T, warnings?: LocatedValidationWarning[]) => React.ReactNode);
+    /**
+     * Description of the confirmation dialog which appears when submitting the
+     * form.
+     */
+    dialogDescription?: React.ReactNode | ((formValue: T, warnings?: LocatedValidationWarning[]) => React.ReactNode);
+    /**
+     * Body of the confirmation dialog which appears when submitting the form.
+     *
+     * This property can be used to display a summary of the data being submitted
+     * and will be displayed between the description and the “confirm warnings
+     * alert”, when it exists.
+     */
+    dialogBody?: React.ReactNode | ((formValue: T, warnings?: LocatedValidationWarning[]) => React.ReactNode);
+    /**
+     * Label of the checkbox which prompts users to confirm that they intend to
+     * proceed with submission in the event of warnings in the form.
+     */
+    confirmWarningsCheckboxLabel?: React.ReactNode;
+    /**
+     * Text of the OK button in the confirmation dialog which appears when
+     * submitting the form.
+     */
+    dialogOkText?: React.ReactNode;
+    /**
+     * Text of the cancel button in the confirmation dialog which appears when
+     * submitting the form.
+     */
+    dialogCancelText?: React.ReactNode;
+    /**
+     * Message to show in a toast after a successful submission.
+     *
+     * @param submitResult Result of `onSubmit`.
+     * @returns Message to show in a toast.
+     */
+    successMessage?: (submitResult: TSubmitResult) => React.ReactNode;
+    /**
+     * Message to show in a toast when an error occurs while submitting the form.
+     *
+     * @param error Error that occurred.
+     * @returns Message to show in a toast.
+     */
+    errorMessage?: (error: unknown) => React.ReactNode;
+    /** Properties to pass to the confirmation dialog content component. */
+    dialogContentProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogContent>, "children">;
+    /** Properties to pass to the confirmation dialog header component. */
+    dialogHeaderProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogHeader>, "children">;
+    /** Properties to pass to the confirmation dialog title component. */
+    dialogTitleProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogTitle>, "children">;
+    /** Properties to pass to the confirmation dialog body component. */
+    dialogBodyProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogBody>, "children">;
+    /** Properties to pass to the confirmation dialog description component. */
+    dialogDescriptionProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogDescription>, "children">;
+    /** Properties to pass to the confirmation dialog footer component. */
+    dialogFooterProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogFooter>, "children">;
+    /** Properties to pass to the confirmation dialog OK button component. */
+    dialogOkButtonProps?: Omit<React.ComponentPropsWithRef<typeof Button>, "children">;
+    /** Properties to pass to the confirmation dialog cancel button component. */
+    dialogCancelButtonProps?: Omit<React.ComponentPropsWithRef<typeof Button>, "children">;
+    /** Properties to pass to the alert used to confirm warnings. */
+    confirmWarningsAlertProps?: Omit<React.ComponentPropsWithRef<typeof Alert>, "children">;
+    /** Properties to pass to the checkbox used to confirm warnings. */
+    confirmWarningsCheckboxProps?: Omit<React.ComponentPropsWithRef<typeof Checkbox>, "checked" | "onCheckedChange" | "children">;
+}
+/** Action used to submit the form. */
+export declare function SubmitAction<T = unknown, TSubmitResult = unknown>({ onSubmit, onInvalidSubmit, onSuccessfulSubmit, onFailedSubmit, setTouchedOnSubmit, validateOnSubmit, setPristineOnSuccessfulSubmit, convertExternalIssuesTableRowIndicesToIds, label, keybinds, confirmWarnings, loading, disabled, onClick, dialogTitle, dialogDescription, dialogBody, confirmWarningsCheckboxLabel, dialogOkText, dialogCancelText, successMessage, errorMessage, dialogContentProps, dialogHeaderProps, dialogTitleProps, dialogBodyProps, dialogDescriptionProps, dialogFooterProps, dialogOkButtonProps, dialogCancelButtonProps, confirmWarningsAlertProps, confirmWarningsCheckboxProps, ...otherProps }: SubmitActionProps<T, TSubmitResult>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,64 @@
+import { type Path, type Table } from "@ostack.tech/kform";
+import { type ControllerOptions } from "@ostack.tech/kform-react";
+import { DataTable } from "@ostack.tech/ui";
+import * as React from "react";
+import { type IssueMessages, type IssueMessagesByCode } from "../IssueMessages";
+import { type TableControlApi } from "./TableControlApi.ts";
+import { type TableControlColumn, type TableControlColumns } from "./TableControlColumn.tsx";
+/** Properties of the table control component. */
+export interface TableControlProps<T = unknown, TTable extends Table<T> | null = Table<T> | null> extends Omit<React.ComponentPropsWithoutRef<typeof DataTable>, "columns" | "rows" | "getRows" | "rowKey" | "loading" | "defaultFilter" | "filter" | "onFilterChange" | "defaultSortBy" | "sortBy" | "defaultSortDirection" | "sortDirection" | "onSort" | "showSelectionColumn" | "defaultSelectedRows" | "selectedRows" | "onSelectedRowsChange" | "apiRef">, Omit<ControllerOptions<TTable>, "enabled"> {
+    /** Control's path. */
+    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 table.
+     *
+     * This label has priority over the table's `ControlLabel`.
+     */
+    issuesPanelLabel?: React.ReactNode;
+    /**
+     * Whether to display the issues associated with this control.
+     *
+     * @default true
+     */
+    displayIssues?: boolean;
+    /** Table control columns. */
+    columns: TableControlColumns<T>;
+    /**
+     * Sets the maximum number of rows that the table can have. By default, if the
+     * table's schema has a `MaxSize` validation, then its value is used.
+     */
+    maxRows?: number;
+    /** Sets the table control as disabled. */
+    disabled?: boolean;
+    /** Sets the table control as read-only. */
+    readOnly?: 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<TableControlApi<T, TTable> | undefined>;
+    /** Properties to pass to the `IssueMessages` component. */
+    issueMessagesProps?: Omit<React.ComponentPropsWithRef<typeof IssueMessages>, "path" | "issues" | "messages" | "unwrapped">;
+}
+/** Table control component supporting (possibly nullable) collection schemas. */
+export declare const TableControl: React.ForwardRefExoticComponent<TableControlProps<unknown, Table<unknown> | null> & React.RefAttributes<HTMLTableElement>>;
+/** Properties of the table control cell renderer. */
+export interface TableControlCellRendererProps<T = unknown> {
+    render: NonNullable<TableControlColumn<T>["render"]>;
+}
+/** Renderer of a table control cell. */
+export declare function TableControlCellRenderer<T = unknown>({ render, }: TableControlCellRendererProps<T>): React.ReactNode;

package/dist/types/components/TableControl/TableControlAddRowTrigger.d.ts

@@ -0,0 +1,25 @@
+import { Button } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the table control add row trigger component. */
+export interface TableControlAddRowTriggerProps extends React.ComponentPropsWithoutRef<typeof Button> {
+    /**
+     * Text displayed on the button rendered by default when no `children` are
+     * provided. If `children` are provided, this property has no effect.
+     */
+    defaultButtonText?: React.ReactNode;
+    /** Function called after the row has been added. */
+    onRowAdded?: () => void;
+    /**
+     * Whether to show the trigger when the table is read-only.
+     *
+     * @default false
+     */
+    showWhenReadOnly?: boolean;
+}
+/**
+ * Trigger used to add a new row to a table control.
+ *
+ * By default, it renders a button with text `defaultButtonText`, however, this
+ * can be overriden by providing `children`.
+ */
+export declare const TableControlAddRowTrigger: React.ForwardRefExoticComponent<TableControlAddRowTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/TableControl/TableControlApi.d.ts

@@ -0,0 +1,25 @@
+import { type Table, type TableRowId } from "@ostack.tech/kform";
+import { type Controller } from "@ostack.tech/kform-react";
+import { type DataTableScrollToOptions } from "@ostack.tech/ui";
+import * as React from "react";
+/** Imperative table control API. */
+export type TableControlApi<T = unknown, TTable extends Table<T> | null = Table<T> | null> = Controller<TTable> & {
+    /**
+     * Navigates to the row with the provided index.
+     *
+     * @param index Index of row to navigate to.
+     * @param scrollOptions Options used to configure to scrolling to the row
+     *   (only relevant in scrolled display mode).
+     */
+    goToIndex: (index: number, scrollOptions?: DataTableScrollToOptions) => void;
+    /**
+     * Navigates to the row with the provided id.
+     *
+     * @param id Id of row to navigate to.
+     * @param scrollOptions Options used to configure to scrolling to the row
+     *   (only relevant in scrolled display mode).
+     */
+    goToId: (id: TableRowId, scrollOptions?: DataTableScrollToOptions) => void;
+};
+/** Hook used to access the table control API. */
+export declare function useTableControlApiRef<T = unknown, TTable extends Table<T> | null = Table<T> | null>(): React.RefObject<TableControlApi<T, TTable> | null>;

package/dist/types/components/TableControl/TableControlCell.d.ts

@@ -0,0 +1,7 @@
+import { DataTableCell } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the table control cell. */
+export interface TableControlCellProps extends React.ComponentPropsWithoutRef<typeof DataTableCell> {
+}
+/** Cell of the table control. */
+export declare const TableControlCell: React.ForwardRefExoticComponent<TableControlCellProps & React.RefAttributes<HTMLTableDataCellElement>>;

package/dist/types/components/TableControl/TableControlColumn.d.ts

@@ -0,0 +1,58 @@
+import { type Controller } from "@ostack.tech/kform-react";
+import { type DataTableColumn } from "@ostack.tech/ui";
+import * as React from "react";
+import { TableControlRemoveRowTrigger } from "./TableControlRemoveRowTrigger.tsx";
+/** Array of table control columns. */
+export type TableControlColumns<T = unknown> = (TableControlColumn<T> | ((tableControlStatus: TableControlStatus) => TableControlColumn<T> | false | null | undefined) | false | null | undefined)[];
+/** Status of the table control. */
+export interface TableControlStatus {
+    /** Whether the table control is disabled. */
+    disabled: boolean;
+    /** Whether the table control is read-only. */
+    readOnly: boolean;
+}
+/** Controller of a table row. */
+export type TableControlRowController<T = unknown> = Controller<T> & {
+    /** Row index. */
+    index: number;
+};
+/** Column of a table control. */
+export interface TableControlColumn<T = unknown, TValue = any> extends Omit<DataTableColumn<T, TValue>, "subColumns" | "getValue" | "format" | "render" | "compare" | "filterable" | "sortable"> {
+    /** Sub columns of this column. */
+    subColumns?: TableControlColumns<T>;
+    /** Function used to render the cell's content. */
+    render?: (rowController: TableControlRowController<T>) => React.ReactNode;
+}
+/**
+ * Pre-configured column used to display the index of each row. By default, it
+ * sticks to left of the table.
+ *
+ * @param overrides Column properties to override the defaults.
+ * @returns Table control column used to display the index of each row.
+ */
+export declare function tableControlIndexColumn<T = unknown, TValue = any>(overrides?: TableControlColumn<T, TValue>): TableControlColumn<T, TValue>;
+/**
+ * Pre-configured column used to display row actions. By default, it sticks to
+ * the right of the table and renders the `TableControlRemoveRow` component.
+ *
+ * Its configuration can be overriden to show other actions, for example, an
+ * edit button:
+ *
+ * ```typescript
+ * tableControlActionsColumn({
+ *   width: 100,
+ *   render: () => (
+ *     <>
+ *       <IconButton label="Edit row" icon={faPencil} />
+ *       <TableControlRemoveRow />
+ *     </>
+ *   ),
+ * });
+ * ```
+ *
+ * @param overrides Column properties used to display the actions of each row.
+ * @returns Table control column used to display the actions of each row.
+ */
+export declare function tableControlActionsColumn<T = unknown, TValue = any>({ removeRowProps, ...columnOverrides }?: TableControlColumn<T, TValue> & {
+    removeRowProps?: React.ComponentPropsWithRef<typeof TableControlRemoveRowTrigger>;
+}): (tableControlStatus: TableControlStatus) => TableControlColumn<T, TValue> | false;

package/dist/types/components/TableControl/TableControlContent.d.ts

@@ -0,0 +1,7 @@
+import { DataTableContent } from "@ostack.tech/ui";
+import * as React from "react";
+/** Properties of the table control content component. */
+export interface TableControlContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DataTableContent>, "status"> {
+}
+/** Component containing the content of the table control. */
+export declare const TableControlContent: React.ForwardRefExoticComponent<TableControlContentProps & React.RefAttributes<HTMLTableElement>>;

package/dist/types/components/TableControl/TableControlContext.d.ts

@@ -0,0 +1,26 @@
+import { type AbsolutePath, type Table, type TableRowId } from "@ostack.tech/kform";
+import { type FormatterController } from "@ostack.tech/kform-react";
+import * as React from "react";
+import { type UseRegisterControlResult } from "../../utils/useRegisterControl.tsx";
+import { type TableControlRowController } from "./TableControlColumn.tsx";
+/** Value of the table control context. */
+export interface TableControlContextValue<T = any, TTable extends Table<T> | null = Table<T> | null> {
+    controller: TableControlController<T, TTable>;
+    autofocusRef: React.Ref<HTMLDivElement>;
+    handleFocus: UseRegisterControlResult<HTMLDivElement>["handleFocus"];
+    size?: number;
+    maxRows?: number;
+}
+/** Controller of the table control. */
+export type TableControlController<T = any, TTable extends Table<T> | null = Table<T> | null> = FormatterController<TTable, TableRowId[]> & {
+    addRow: () => PromiseLike<void> | void;
+    removeRow: (path: AbsolutePath) => PromiseLike<void> | void;
+};
+/** Table control context. */
+export declare const TableControlContext: React.Context<TableControlContextValue<any, Table<any> | null> | null>;
+/** Hook providing access to the table control context. */
+export declare function useTableControlContext<T = unknown, TTable extends Table<T> | null = Table<T> | null>(): TableControlContextValue<T, TTable>;
+/** Table control row context. */
+export declare const TableControlRowContext: React.Context<TableControlRowController | null>;
+/** Hook providing access to the table control row context. */
+export declare function useTableControlRowContext<T>(): TableControlRowController<T>;

package/dist/types/components/TableControl/TableControlPagination.d.ts

@@ -0,0 +1,2 @@
+/** Table control pagination. */
+export declare const TableControlPagination: import("react").ForwardRefExoticComponent<import("@ostack.tech/ui").DataTablePaginationProps & import("react").RefAttributes<HTMLDivElement>>;