@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/ExternalImagePreview/types.d.ts

@@ -1,9 +1,16 @@
 import type { ReactElement, ReactEventHandler } from 'react';
+/** Props of {@link ExternalImagePreview}. */
 export interface ExternalImagePreviewProps {
+    /** Image URL to load. */
     src: string;
+    /** Alt text (default "External image preview"). */
     alt?: string;
+    /** CSS width of the preview box. */
     width: string | number;
+    /** CSS height of the preview box. */
     height: string | number;
+    /** Node shown while loading or when the image fails to load. */
     placeholder: ReactElement;
+    /** Fires when the image fails to load. */
     onError?: (error: ReactEventHandler<HTMLImageElement>) => void;
 }

package/FieldBox/FieldBox.d.ts

@@ -1,3 +1,12 @@
 import { type ReactElement } from 'react';
 import type { FieldBoxProps } from './types';
+/**
+ * Form-field wrapper: renders a title row (with optional marker, tooltip, link and
+ * actions) above its children and a description or error line below.
+ *
+ * @example
+ * <FieldBox title="Name" description="Shown publicly" error={errors.name}>
+ *   <EnhancedInput value={name} onChange={onChange} />
+ * </FieldBox>
+ */
 export declare function FieldBox(props: FieldBoxProps): ReactElement;

package/FieldBox/FieldBox.js

@@ -5,6 +5,15 @@ import { OpenIcon, InfoRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { Tooltip } from '../Tooltip';
 import { TitleBox, Link } from './styles';
+/**
+ * Form-field wrapper: renders a title row (with optional marker, tooltip, link and
+ * actions) above its children and a description or error line below.
+ *
+ * @example
+ * <FieldBox title="Name" description="Shown publicly" error={errors.name}>
+ *   <EnhancedInput value={name} onChange={onChange} />
+ * </FieldBox>
+ */
 export function FieldBox(props) {
   const {
     title,

package/FieldBox/types.d.ts

@@ -1,12 +1,22 @@
 import { type PropsWithChildren, type ReactNode, type Ref } from 'react';
+/** Props of {@link FieldBox}. */
 export type FieldBoxProps = PropsWithChildren<{
+    /** Field heading. */
     title?: ReactNode;
+    /** Helper text under the field (hidden while `error` is set). */
     description?: ReactNode;
+    /** Append an "(optional)" marker after the title. */
     isOptional?: boolean;
+    /** URL for an external-link icon next to the title. */
     link?: string;
+    /** Help text shown via an info tooltip next to the title. */
     tooltip?: string;
+    /** Controls rendered on the right of the title row. */
     actions?: ReactNode;
+    /** Error text under the field; replaces `description` and switches to the error color. */
     error?: ReactNode;
+    /** Ref to the outer wrapper. */
     boxRef?: Ref<HTMLDivElement>;
+    /** Ref to the actions container. */
     actionsRef?: Ref<HTMLDivElement>;
 }>;

package/FrequencyCapping/FrequencyCappingEdit.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import { type CappingBase, type FrequencyCappingEditProps } from './types';
+/**
+ * Editable frequency-capping control: pick global/ignore/custom mode and configure
+ * the per-message message/day limits.
+ *
+ * @example
+ * <FrequencyCappingEdit capping={capping} globalCapping={global} applicationCode={code} onChange={setCapping} editGlobalClicked={openGlobal} />
+ */
 export declare function FrequencyCappingEdit<T extends CappingBase>({ capping, globalCapping, onChange, applicationCode, editGlobalClicked, isInJourney, isDisabled, }: FrequencyCappingEditProps<T>): ReactElement;

package/FrequencyCapping/FrequencyCappingEdit.js

@@ -14,6 +14,13 @@ import { Select } from '../Select';
 import { cappingOptions } from './constants';
 import { useLang } from './polyglot';
 import { Container, LinkWrapper } from './styles';
+/**
+ * Editable frequency-capping control: pick global/ignore/custom mode and configure
+ * the per-message message/day limits.
+ *
+ * @example
+ * <FrequencyCappingEdit capping={capping} globalCapping={global} applicationCode={code} onChange={setCapping} editGlobalClicked={openGlobal} />
+ */
 export function FrequencyCappingEdit({
   capping,
   globalCapping,

package/FrequencyCapping/FrequencyCappingInApps.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import { type FrequencyCappingInAppsProps } from './types';
+/**
+ * Editable in-app frequency-capping control with total, per-period and
+ * minimum-interval limits.
+ *
+ * @example
+ * <FrequencyCappingInApps capping={capping} globalCapping={global} applicationCode={code} onChange={setCapping} editGlobalClicked={openGlobal} />
+ */
 export declare function FrequencyCappingInApps(props: FrequencyCappingInAppsProps): ReactElement;

package/FrequencyCapping/FrequencyCappingInApps.js

@@ -14,6 +14,13 @@ import { Select } from '../Select';
 import { cappingOptions } from './constants';
 import { useLang } from './polyglot';
 import { Container, LinkWrapper } from './styles';
+/**
+ * Editable in-app frequency-capping control with total, per-period and
+ * minimum-interval limits.
+ *
+ * @example
+ * <FrequencyCappingInApps capping={capping} globalCapping={global} applicationCode={code} onChange={setCapping} editGlobalClicked={openGlobal} />
+ */
 export function FrequencyCappingInApps(props) {
   const {
     capping,

package/FrequencyCapping/FrequencyCappingReadonly.d.ts

@@ -1,2 +1,5 @@
 import { type CappingBase, type FrequencyCappingReadonlyProps } from './types';
+/**
+ * Read-only summary of a frequency-capping config, with a link to edit the global cap.
+ */
 export declare function FrequencyCappingReadonly<T extends CappingBase>({ capping, globalCapping, applicationCode, editGlobalClicked, isInJourney, }: FrequencyCappingReadonlyProps<T>): import("react/jsx-runtime").JSX.Element;

package/FrequencyCapping/FrequencyCappingReadonly.js

@@ -7,6 +7,9 @@ import { getGlobalCappingLinkText } from './helpers/getGlobalCappingLinkText';
 import { getReadonlyCappingLabel } from './helpers/getReadonlyCappingHelpers';
 import { useLang } from './polyglot';
 import { CappingTypes } from './types';
+/**
+ * Read-only summary of a frequency-capping config, with a link to edit the global cap.
+ */
 export function FrequencyCappingReadonly({
   capping,
   globalCapping,

package/FrequencyCapping/types.d.ts

@@ -1,63 +1,100 @@
+/** Frequency-capping mode: follow the global cap, ignore it, or use a custom cap. */
 export declare enum CappingTypes {
     GLOBAL = "global",
     IGNORE = "ignore",
     CUSTOM = "custom"
 }
+/** A capping-mode option for the mode selector. */
 export type CappingOption = {
+    /** Human-readable label. */
     label: string;
+    /** Corresponding capping mode. */
     value: CappingTypes;
 };
+/** Per-message capping config (exported publicly as `LocalCapping`). */
 export type CappingBase = {
+    /** Whether custom capping is enabled. */
     enabled: boolean;
+    /** Max number of messages within `days`. */
     messages: number;
+    /** Window length in days. */
     days: number;
+    /** Ignore the account-wide global cap. */
     ignoreGlobalCapping: boolean;
 };
+/** In-app capping config with total / per-period / minimum-interval limits. */
 export type CappingInAppBase = {
+    /** Whether in-app capping is enabled. */
     enabled: boolean;
+    /** Ignore the account-wide global cap. */
     ignoreGlobalCapping: boolean;
+    /** Lifetime total limit. */
     total?: {
         count: number;
     };
+    /** Limit of `count` per `days`. */
     perDays?: {
         count: number;
         days: number;
     };
+    /** Minimum gap between shows, in days. */
     leastDays?: {
         count: number;
     };
 };
+/** Props of {@link FrequencyCappingEdit}. */
 export type FrequencyCappingEditProps<T extends CappingBase> = {
+    /** Current capping config. */
     capping: T;
+    /** The account-wide global cap, for reference/comparison. */
     globalCapping: {
         count: number;
         days: number;
     };
+    /** Fires with the updated capping config. */
     onChange: (newCappingState: T) => void;
+    /** Fires when the "edit global capping" link is clicked. */
     editGlobalClicked: () => void;
+    /** Application code the capping applies to. */
     applicationCode: string;
+    /** Adjust copy/behavior for the Customer Journey context. */
     isInJourney?: boolean;
+    /** Disable editing. */
     isDisabled?: boolean;
 };
+/** Props of {@link FrequencyCappingReadonly}. */
 export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
+    /** Capping config to summarize. */
     capping: T;
+    /** The account-wide global cap, for reference. */
     globalCapping: {
         count: number;
         days: number;
     };
+    /** Application code the capping applies to. */
     applicationCode: string;
+    /** Fires when the "edit global capping" link is clicked. */
     editGlobalClicked: () => void;
+    /** Adjust copy for the Customer Journey context. */
     isInJourney?: boolean;
 };
+/** Props of {@link FrequencyCappingInApps}. */
 export type FrequencyCappingInAppsProps = {
+    /** Current in-app capping config. */
     capping: CappingInAppBase;
+    /** The account-wide global cap, for reference. */
     globalCapping: {
         count: number;
         days: number;
     };
+    /** Fires with the updated in-app capping config. */
     onChange: (newCappingState: CappingInAppBase) => void;
+    /** Fires when the "edit global capping" link is clicked. */
     editGlobalClicked: () => void;
+    /** Application code the capping applies to. */
     applicationCode: string;
+    /** Adjust copy/behavior for the Customer Journey context. */
     isInJourney?: boolean;
+    /** Disable editing. */
     isDisabled?: boolean;
 };

package/FrequencyCapping/types.js

@@ -1,3 +1,4 @@
+/** Frequency-capping mode: follow the global cap, ignore it, or use a custom cap. */
 export var CappingTypes;
 (function (CappingTypes) {
   CappingTypes["GLOBAL"] = "global";

package/GetStartedPage/GetStartedPage.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { GetStartedPageProps } from './types';
+/**
+ * Onboarding/empty-state page with a title, description, illustration, optional
+ * checklist, help banner and action controls.
+ *
+ * @example
+ * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />
+ */
 export declare function GetStartedPage(props: GetStartedPageProps): ReactElement;

package/GetStartedPage/GetStartedPage.js

@@ -5,6 +5,13 @@ import { CheckRoundIcon, LockIcon } from '@pushwoosh/kit-icons';
 import { H1, Paragraph } from '@pushwoosh/kit-typography';
 import { Banner } from '../Banner';
 import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, Image } from './styles';
+/**
+ * Onboarding/empty-state page with a title, description, illustration, optional
+ * checklist, help banner and action controls.
+ *
+ * @example
+ * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />
+ */
 export function GetStartedPage(props) {
   const {
     title,

package/GetStartedPage/types.d.ts

@@ -1,9 +1,16 @@
 import type { ReactNode } from 'react';
+/** Props of {@link GetStartedPage}. */
 export interface GetStartedPageProps {
+    /** Page title. */
     title: string;
+    /** Intro paragraph. */
     description: string;
+    /** Illustration image URL. */
     image: string;
+    /** Optional help banner text. */
     helpText?: string;
+    /** Checklist items rendered with check icons. */
     checkList?: string[];
+    /** Call-to-action controls. */
     actions?: ReactNode;
 }

package/InputFile/InputFile.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { InputFileProps } from './types';
+/**
+ * File picker with a read-only name field, a browse button, size validation and
+ * error display. Reads the chosen file as a data-URL and returns it via `onChange`.
+ *
+ * @example
+ * <InputFile name="avatar" label="Avatar" accept="image/*" maxSize={2} onChange={handleFile} />
+ */
 export declare function InputFile({ fileId, textId, buttonId, label, buttonText, accept, placeholder, disabled, fileName, errorText, name, maxSize, onError, onChange, isIgnoreFileSize, }: InputFileProps): ReactElement;

package/InputFile/InputFile.js

@@ -5,6 +5,13 @@ import { AttachmentIcon } from '@pushwoosh/kit-icons';
 import { Button } from '../Button';
 import { FieldBox } from '../FieldBox';
 import { InputFileFieldsStyled, InputFileButtonStyled, InputFileInputStyled, InputFileInputHiddenStyled, InputFileErrorStyled } from './styles';
+/**
+ * File picker with a read-only name field, a browse button, size validation and
+ * error display. Reads the chosen file as a data-URL and returns it via `onChange`.
+ *
+ * @example
+ * <InputFile name="avatar" label="Avatar" accept="image/*" maxSize={2} onChange={handleFile} />
+ */
 export function InputFile({
   fileId,
   textId,

package/InputFile/types.d.ts

@@ -1,24 +1,42 @@
+/** Props of {@link InputFile}. */
 export type InputFileProps = {
+    /** Field name; also used as the key holding the data-URL in the `onChange` result. */
     name: string;
+    /** Name of the currently selected file, shown in the read-only text field. */
     fileName?: string;
+    /** Error message; shown under the field and switches it to the error state. */
     errorText?: string;
+    /** Id of the hidden `<input type="file">`. */
     fileId?: string;
+    /** Id of the read-only text field showing the file name. */
     textId?: string;
+    /** Id of the browse button. */
     buttonId?: string;
+    /** Accepted file types (the native `accept` attribute, e.g. `"image/*"`). */
     accept?: string;
+    /** Field label rendered by the surrounding {@link FieldBox}. */
     label?: string;
+    /** Browse button caption. */
     buttonText?: string;
+    /** CSS width of the browse button. */
     buttonWidth?: string;
+    /** Placeholder shown in the text field when no file is chosen. */
     placeholder?: string;
+    /** Disable the field and button. */
     disabled?: boolean;
+    /** Maximum allowed file size, in megabytes. */
     maxSize?: number;
+    /** Skip the empty-file and `maxSize` checks. */
     isIgnoreFileSize?: boolean;
+    /** Fires with `{ file, [name]: dataUrl }` once a valid file is read. */
     onChange: (result: any) => void;
+    /** Fires with `(message, name)` when validation fails. */
     onError?: (message: string, field: string) => void;
 };
 type FileProp = {
     file: File;
 };
+/** Shape passed to {@link InputFileProps.onChange}: the `File` plus its data-URL under the field `name`. */
 export type InputFileData = FileProp & {
     [name: string]: string;
 };

package/Link/Link.d.ts

@@ -1,5 +1,23 @@
 import { type ReactElement } from 'react';
 import type { LinkPropsWithoutAs, LinkPropsWithAsTag, LinkPropsWithAsComponent } from './types';
+/**
+ * Styled hyperlink. Renders a native `<a>` by default.
+ *
+ * @example
+ * <Link href="/docs" title="Docs">Open docs</Link>
+ */
 export declare function Link(props: LinkPropsWithoutAs): ReactElement;
+/**
+ * Link rendered as another intrinsic tag via `as`.
+ *
+ * @example
+ * <Link as="button" onClick={go}>Go</Link>
+ */
 export declare function Link<AS extends keyof JSX.IntrinsicElements>(props: LinkPropsWithAsTag<AS>): ReactElement;
+/**
+ * Link rendered as a custom component via `as` (e.g. a router link).
+ *
+ * @example
+ * <Link as={RouterLink} to="/home">Home</Link>
+ */
 export declare function Link<OuterProps extends object>(props: LinkPropsWithAsComponent<OuterProps>): ReactElement;

package/Link/types.d.ts

@@ -1,21 +1,38 @@
 import type { Ref, ReactNode, ComponentType } from 'react';
+/** Default {@link Link} props — renders a styled `<a>` (requires `title` and `href`). */
 export type LinkPropsWithoutAs = Omit<JSX.IntrinsicElements['a'], 'ref'> & {
+    /** Ref to the `<a>` element. */
     readonly boxRef?: Ref<HTMLAnchorElement>;
+    /** Native title attribute. */
     readonly title: string;
+    /** Link target URL. */
     readonly href: string;
+    /** Link content. */
     readonly children: ReactNode;
 };
+/** {@link Link} props when rendering as another intrinsic tag via `as` (e.g. `as="button"`). */
 export type LinkPropsWithAsTag<AS extends keyof JSX.IntrinsicElements> = Omit<JSX.IntrinsicElements[AS], 'ref'> & {
+    /** Ref to the element produced by `as`. */
     readonly boxRef?: Ref<JSX.IntrinsicElements[AS]>;
+    /** Intrinsic tag name to render instead of `<a>`. */
     readonly as: AS;
+    /** Native title attribute. */
     readonly title?: string;
+    /** Link target URL. */
     readonly href?: string;
+    /** Link content. */
     readonly children: ReactNode;
 };
+/** {@link Link} props when rendering as a custom component via `as` (e.g. a router link). */
 export type LinkPropsWithAsComponent<OuterProps extends object> = OuterProps & {
+    /** Ref to the rendered component's root element. */
     readonly boxRef?: Ref<HTMLElement>;
+    /** Custom component to render instead of `<a>`; receives `OuterProps`. */
     readonly as: ComponentType<OuterProps>;
+    /** Native title attribute. */
     readonly title?: string;
+    /** Link target URL. */
     readonly href?: string;
+    /** Link content. */
     readonly children: ReactNode;
 };

package/Modal/components/Modal/Modal.d.ts

@@ -1,3 +1,14 @@
 import { type ReactElement } from 'react';
 import type { ModalProps } from './types';
+/**
+ * Centered modal dialog rendered in a portal, with size presets, layered z-index
+ * and backdrop-click close. Compose the inside with {@link ModalTitle},
+ * {@link ModalHeader}, {@link ModalBody} and {@link ModalFooter}.
+ *
+ * @example
+ * <Modal size="medium" isOpen={open} onClose={close}>
+ *   <ModalHeader><ModalTitle onClose={close}>Title</ModalTitle></ModalHeader>
+ *   <ModalBody>Content</ModalBody>
+ * </Modal>
+ */
 export declare function Modal(props: ModalProps): ReactElement;

package/Modal/components/Modal/Modal.js

@@ -7,6 +7,17 @@ import { useLayer } from '../../../hooks';
 function createDivElement() {
   return document.createElement('div');
 }
+/**
+ * Centered modal dialog rendered in a portal, with size presets, layered z-index
+ * and backdrop-click close. Compose the inside with {@link ModalTitle},
+ * {@link ModalHeader}, {@link ModalBody} and {@link ModalFooter}.
+ *
+ * @example
+ * <Modal size="medium" isOpen={open} onClose={close}>
+ *   <ModalHeader><ModalTitle onClose={close}>Title</ModalTitle></ModalHeader>
+ *   <ModalBody>Content</ModalBody>
+ * </Modal>
+ */
 export function Modal(props) {
   const {
     size,

package/Modal/components/Modal/types.d.ts

@@ -1,11 +1,17 @@
 import type { MutableRefObject, PropsWithChildren } from 'react';
 import type { modalSizes } from './maps';
+/** Props of {@link Modal}. */
 export type ModalProps = PropsWithChildren<{
+    /** Width preset (one of the predefined modal sizes). */
     readonly size: keyof typeof modalSizes;
+    /** Stacking z-index; auto-layered when omitted. */
     readonly zIndex?: number;
+    /** Whether the modal is open. */
     readonly isOpen: boolean;
+    /** Fires on backdrop click or layer close. */
     readonly onClose?: () => any;
 }>;
+/** Internal props of the modal transition box. */
 export type ModalBoxBaseProps = PropsWithChildren<{
     isOpen: boolean;
     className?: string;

package/Modal/components/ModalConfirm/ModalConfirm.d.ts

@@ -1,3 +1,11 @@
 import { type ReactElement } from 'react';
 import type { ModalConfirmProps } from './types';
+/**
+ * Ready-made confirmation dialog (title, description, confirm/cancel buttons) with
+ * a built-in loading state and inline error banner. For imperative use prefer
+ * {@link useModalConfirm} via {@link ModalConfirmProvider}.
+ *
+ * @example
+ * <ModalConfirm isOpen={open} title="Delete?" confirmButtonColor="danger" onAccept={remove} onCancel={close} />
+ */
 export declare function ModalConfirm(props: ModalConfirmProps): ReactElement;

package/Modal/components/ModalConfirm/ModalConfirm.js

@@ -7,6 +7,14 @@ import { useLang } from '../../polyglot';
 import { Modal } from '../Modal';
 import { ModalHeader, ModalBody, ModalFooter } from '../ModalContent';
 import { ModalTitle } from '../ModalTitle';
+/**
+ * Ready-made confirmation dialog (title, description, confirm/cancel buttons) with
+ * a built-in loading state and inline error banner. For imperative use prefer
+ * {@link useModalConfirm} via {@link ModalConfirmProvider}.
+ *
+ * @example
+ * <ModalConfirm isOpen={open} title="Delete?" confirmButtonColor="danger" onAccept={remove} onCancel={close} />
+ */
 export function ModalConfirm(props) {
   const lang = useLang();
   const {

package/Modal/components/ModalConfirm/ModalConfirmProvider.d.ts

@@ -1,4 +1,11 @@
 import { type ReactElement, type PropsWithChildren } from 'react';
 import type { ModalConfirmContextProps } from './types';
 export declare const ModalConfirmContext: import("react").Context<ModalConfirmContextProps | null>;
+/**
+ * Provides the confirm-dialog context and renders a single shared {@link ModalConfirm}.
+ * Wrap your app once, then trigger dialogs with {@link useModalConfirm}.
+ *
+ * @example
+ * <ModalConfirmProvider><App /></ModalConfirmProvider>
+ */
 export declare function ModalConfirmProvider(props: PropsWithChildren): ReactElement;

package/Modal/components/ModalConfirm/ModalConfirmProvider.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, createContext } from 'react';
 import { ModalConfirm } from './ModalConfirm';
 export const ModalConfirmContext = createContext(null);
+/**
+ * Provides the confirm-dialog context and renders a single shared {@link ModalConfirm}.
+ * Wrap your app once, then trigger dialogs with {@link useModalConfirm}.
+ *
+ * @example
+ * <ModalConfirmProvider><App /></ModalConfirmProvider>
+ */
 export function ModalConfirmProvider(props) {
   const {
     children

package/Modal/components/ModalConfirm/hooks.d.ts

@@ -1,2 +1,10 @@
 import type { ModalConfirmContextProps } from './types';
+/**
+ * Returns `{ openModalConfirm, closeModalConfirm }` for showing confirm dialogs.
+ * Must be used within a {@link ModalConfirmProvider}, otherwise it throws.
+ *
+ * @example
+ * const { openModalConfirm } = useModalConfirm();
+ * openModalConfirm({ title: 'Delete?', onAccept: remove });
+ */
 export declare const useModalConfirm: () => ModalConfirmContextProps;

package/Modal/components/ModalConfirm/hooks.js

@@ -1,5 +1,13 @@
 import { useContext } from 'react';
 import { ModalConfirmContext } from './ModalConfirmProvider';
+/**
+ * Returns `{ openModalConfirm, closeModalConfirm }` for showing confirm dialogs.
+ * Must be used within a {@link ModalConfirmProvider}, otherwise it throws.
+ *
+ * @example
+ * const { openModalConfirm } = useModalConfirm();
+ * openModalConfirm({ title: 'Delete?', onAccept: remove });
+ */
 export const useModalConfirm = () => {
   const context = useContext(ModalConfirmContext);
   if (!context) {

package/Modal/components/ModalConfirm/types.d.ts

@@ -1,23 +1,39 @@
 import { type ReactNode } from 'react';
 import { type modalSizes } from '../Modal/maps';
+/** Color of the confirm button in a {@link ModalConfirm}. */
 export type ConfirmButtonColor = 'primary' | 'secondary' | 'danger';
+/** Props of {@link ModalConfirm}. */
 export interface ModalConfirmProps {
+    /** Whether the dialog is open. */
     isOpen: boolean;
+    /** Heading (defaults to a localized "Confirm" title). */
     title?: string;
+    /** Width preset (default `small`). */
     size?: keyof typeof modalSizes;
+    /** Body text/content. */
     description?: ReactNode;
+    /** Confirm button caption (defaults to localized "Confirm"). */
     confirmButtonText?: string;
+    /** Confirm button color (default `primary`). */
     confirmButtonColor?: ConfirmButtonColor;
+    /** Cancel button caption (defaults to localized "Cancel"). */
     cancelButtonText?: string;
+    /** Extra async work run before `onAccept`; errors are shown inline. */
     callback?: () => void;
+    /** Fires when the user confirms (after `callback`). */
     onAccept: () => void;
+    /** Fires when the user cancels or closes. */
     onCancel: () => void;
 }
+/** Arguments for {@link ModalConfirmContextProps.openModalConfirm}; `isOpen`/`onCancel` are optional. */
 export type OpenModalConfirmParams = Omit<ModalConfirmProps, 'isOpen' | 'onCancel'> & {
     isOpen?: ModalConfirmProps['isOpen'];
     onCancel?: () => void;
 };
+/** Value returned by {@link useModalConfirm}. */
 export interface ModalConfirmContextProps {
+    /** Open a confirm dialog with the given params. */
     openModalConfirm: (params: OpenModalConfirmParams) => void;
+    /** Close the confirm dialog. */
     closeModalConfirm: () => void;
 }

package/Modal/components/ModalContent/styles.d.ts

@@ -1,4 +1,6 @@
+/** Top section of a {@link Modal}; typically wraps a {@link ModalTitle}. */
 export declare const ModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Groups {@link ModalBodyItem}s with hairline dividers between them, inside a {@link ModalBody}. */
 export declare const ModalBodyGroup: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
@@ -11,8 +13,11 @@ export declare const ModalBodyGroup: import("styled-components").StyledComponent
 } & {
     $gridAutoFlow: string;
 }, "$gridAutoFlow">;
+/** A single row within a {@link ModalBodyGroup}; pass `$vPadding` to add vertical padding. */
 export declare const ModalBodyItem: import("styled-components").StyledComponent<"div", any, {
     $vPadding?: boolean;
 }, never>;
+/** Scrollable main content area of a {@link Modal}; self-pads unless it holds a {@link ModalBodyGroup}. */
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Bottom action bar of a {@link Modal}, divided from the body; typically holds buttons. */
 export declare const ModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;