@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Modal/components/ModalContent/styles.js

@@ -1,27 +1,32 @@
 import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
+/** Top section of a {@link Modal}; typically wraps a {@link ModalTitle}. */
 export const ModalHeader = styled.div.withConfig({
   displayName: "ModalHeader",
   componentId: "sc-1b5r517-0"
 })(["padding:24px 24px 8px;background-color:", ";"], Color.CLEAR);
 ModalHeader.displayName = 'ModalHeader';
+/** Groups {@link ModalBodyItem}s with hairline dividers between them, inside a {@link ModalBody}. */
 export const ModalBodyGroup = styled(Vertical).withConfig({
   displayName: "ModalBodyGroup",
   componentId: "sc-1b5r517-1"
 })(["background-color:", ";gap:1px;"], Color.DIVIDER);
 ModalBodyGroup.displayName = 'ModalBodyGroup';
+/** A single row within a {@link ModalBodyGroup}; pass `$vPadding` to add vertical padding. */
 export const ModalBodyItem = styled.div.withConfig({
   displayName: "ModalBodyItem",
   componentId: "sc-1b5r517-2"
 })(["padding:", " 24px;background-color:", ";"], ({
   $vPadding
 }) => $vPadding ? '24px' : 0, Color.CLEAR);
+/** Scrollable main content area of a {@link Modal}; self-pads unless it holds a {@link ModalBodyGroup}. */
 export const ModalBody = styled.div.withConfig({
   displayName: "ModalBody",
   componentId: "sc-1b5r517-3"
 })(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:24px;&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup);
 ModalBody.displayName = 'ModalBody';
+/** Bottom action bar of a {@link Modal}, divided from the body; typically holds buttons. */
 export const ModalFooter = styled.div.withConfig({
   displayName: "ModalFooter",
   componentId: "sc-1b5r517-4"

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

@@ -1,3 +1,9 @@
 import { type ReactElement } from 'react';
 import type { ModalTitleProps } from './types';
+/**
+ * Modal heading row with an optional close button; place inside {@link ModalHeader}.
+ *
+ * @example
+ * <ModalTitle onClose={close}>Edit settings</ModalTitle>
+ */
 export declare function ModalTitle(props: ModalTitleProps): ReactElement;

package/Modal/components/ModalTitle/ModalTitle.js

@@ -2,6 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { ModalTitleBox } from './styles';
 import { GhostButton } from '../../../Button';
+/**
+ * Modal heading row with an optional close button; place inside {@link ModalHeader}.
+ *
+ * @example
+ * <ModalTitle onClose={close}>Edit settings</ModalTitle>
+ */
 export function ModalTitle(props) {
   const {
     children,

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

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
+/** Props of {@link ModalTitle}. */
 export interface ModalTitleProps {
+    /** When set, renders a close (✕) button that calls this. */
     readonly onClose?: () => void;
+    /** Title content. */
     readonly children: ReactNode;
 }

package/NotificationInbox/NotificationBar.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { NotificationBarProps } from './types';
+/**
+ * Wide notification trigger with an icon, label and count badge — an alternative to
+ * {@link NotificationBell} for opening the {@link NotificationInbox}.
+ *
+ * @example
+ * <NotificationBar type="important" count={3} onClick={toggleInbox} />
+ */
 export declare function NotificationBar({ type, isOpened, read, count, onClick, }: NotificationBarProps): ReactElement;

package/NotificationInbox/NotificationBar.js

@@ -8,6 +8,13 @@ function getIconView(isOpened, filled, hasNotifications) {
   if (filled) return 'filled';
   return 'lined';
 }
+/**
+ * Wide notification trigger with an icon, label and count badge — an alternative to
+ * {@link NotificationBell} for opening the {@link NotificationInbox}.
+ *
+ * @example
+ * <NotificationBar type="important" count={3} onClick={toggleInbox} />
+ */
 export function NotificationBar({
   type = 'notifications',
   isOpened = false,

package/NotificationInbox/NotificationBell.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { NotificationBellProps } from './types';
+/**
+ * Bell icon with an unread-count badge (colored by severity) for opening the
+ * {@link NotificationInbox}.
+ *
+ * @example
+ * <NotificationBell count={5} severity="critical" onClick={toggleInbox} />
+ */
 export declare function NotificationBell({ count, severity, isOpened, onClick, }: NotificationBellProps): ReactElement;

package/NotificationInbox/NotificationBell.js

@@ -3,6 +3,13 @@ import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
 import { useLang } from './polyglot';
 import { NotificationBellButton, NotificationBellBadge, NotificationBellBadgeDot } from './styles';
+/**
+ * Bell icon with an unread-count badge (colored by severity) for opening the
+ * {@link NotificationInbox}.
+ *
+ * @example
+ * <NotificationBell count={5} severity="critical" onClick={toggleInbox} />
+ */
 export function NotificationBell({
   count = 0,
   severity,

package/NotificationInbox/NotificationInbox.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { NotificationInboxProps } from './types';
+/**
+ * Scrollable notification list with severity indicators, read state, per-item
+ * actions, infinite scroll and an empty state.
+ *
+ * @example
+ * <NotificationInbox notifications={items} hasMore={hasMore} onLoadMore={loadMore} onNotificationClick={open} />
+ */
 export declare function NotificationInbox({ notifications, isLoading, hasMore, onLoadMore, onNotificationClick, onMarkAsRead, emptyStateTitle, emptyStateDescription, }: NotificationInboxProps): ReactElement;

package/NotificationInbox/NotificationInbox.js

@@ -11,6 +11,13 @@ import { Spinner } from '../Spinner';
 import emptyNotificationsIcon from './assets/EmptyNotifications.svg?url';
 import { Lang } from './polyglot';
 import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationDescription, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxEmptyText } from './styles';
+/**
+ * Scrollable notification list with severity indicators, read state, per-item
+ * actions, infinite scroll and an empty state.
+ *
+ * @example
+ * <NotificationInbox notifications={items} hasMore={hasMore} onLoadMore={loadMore} onNotificationClick={open} />
+ */
 export function NotificationInbox({
   notifications,
   isLoading = false,

package/NotificationInbox/types.d.ts

@@ -1,38 +1,69 @@
+/** Severity of a {@link Notification}, driving its indicator color. */
 export type NotificationSeverity = 'critical' | 'warning' | 'info';
+/** A single notification item shown in {@link NotificationInbox}. */
 export interface Notification {
+    /** Unique id. */
     readonly id: string;
+    /** Notification title. */
     readonly title: string;
+    /** Optional body text. */
     readonly description?: string;
+    /** Severity level. */
     readonly severity: NotificationSeverity;
+    /** Creation time (Date or ISO string). */
     readonly timestamp: string | Date;
+    /** Whether the user has read it. */
     readonly isRead?: boolean;
+    /** Originating project name, if any. */
     readonly projectName?: string;
+    /** Optional inline action. */
     readonly actionButton?: {
         readonly label: string;
         readonly onClick: () => void;
     };
 }
+/** Props of {@link NotificationInbox}. */
 export interface NotificationInboxProps {
+    /** Notifications to display (newest first). */
     readonly notifications: Notification[];
+    /** Show the loading state (e.g. while fetching more). */
     readonly isLoading?: boolean;
+    /** Whether more pages are available for infinite scroll. */
     readonly hasMore?: boolean;
+    /** Fires when the list is scrolled near the end. */
     readonly onLoadMore?: () => void;
+    /** Fires when a notification is clicked. */
     readonly onNotificationClick?: (notification: Notification) => void;
+    /** Fires to mark a notification as read. */
     readonly onMarkAsRead?: (notificationId: string) => void;
+    /** Title shown when there are no notifications. */
     readonly emptyStateTitle?: string;
+    /** Description shown when there are no notifications. */
     readonly emptyStateDescription?: string;
 }
+/** Visual state of a {@link NotificationBar}. */
 export type NotificationBarType = 'important' | 'warning' | 'notifications' | 'no-notifications';
+/** Props of {@link NotificationBar}. */
 export interface NotificationBarProps {
+    /** Visual state (severity/empty). */
     readonly type?: NotificationBarType;
+    /** Whether the linked inbox is open. */
     readonly isOpened?: boolean;
+    /** Whether all notifications are read. */
     readonly read?: boolean;
+    /** Unread count shown in the badge. */
     readonly count?: number;
+    /** Fires when the bar is clicked. */
     readonly onClick?: () => void;
 }
+/** Props of {@link NotificationBell}. */
 export interface NotificationBellProps {
+    /** Unread count shown in the badge. */
     readonly count?: number;
+    /** Highest severity among unread, driving the badge color. */
     readonly severity?: NotificationSeverity;
+    /** Whether the linked inbox is open. */
     readonly isOpened?: boolean;
+    /** Fires when the bell is clicked. */
     readonly onClick?: () => void;
 }

package/NumberPicker/NumberPicker.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { NumberPickerProps } from './types';
+/**
+ * Integer input with up/down steppers (click or hold to repeat), arrow-key support,
+ * min/max clamping and an optional inline hint.
+ *
+ * @example
+ * <NumberPicker value={count} minValue={0} maxValue={10} onChange={setCount} />
+ */
 export declare function NumberPicker({ value, hint, step, placeholder, focusOnMount, minValue, maxValue, autoSize, isDisabled, onChange, onSubmit, }: NumberPickerProps): ReactElement;

package/NumberPicker/NumberPicker.js

@@ -5,6 +5,13 @@ import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { AutosizeInput } from './components/AutosizeInput';
 import { intVal, isStringInteger } from './helpers';
 import { Hint, SingleInputFrame, InputStyled } from './styles';
+/**
+ * Integer input with up/down steppers (click or hold to repeat), arrow-key support,
+ * min/max clamping and an optional inline hint.
+ *
+ * @example
+ * <NumberPicker value={count} minValue={0} maxValue={10} onChange={setCount} />
+ */
 export function NumberPicker({
   value,
   hint,

package/NumberPicker/types.d.ts

@@ -1,13 +1,25 @@
+/** Props of {@link NumberPicker}. */
 export interface NumberPickerProps {
+    /** Current numeric value (controlled); `undefined` renders an empty field. */
     value: number | undefined;
+    /** Trailing hint text shown inside the field (e.g. a unit). */
     hint?: string;
+    /** Increment/decrement applied by the chevrons (default `1`). */
     step?: number;
+    /** Placeholder shown when the field is empty. */
     placeholder?: string;
+    /** Focus the input on mount. */
     focusOnMount?: boolean;
+    /** Lower bound; values are clamped to it on blur. */
     minValue?: number;
+    /** Upper bound; values are clamped to it on blur. */
     maxValue?: number;
+    /** Size the field to its content instead of a fixed width. */
     autoSize?: boolean;
+    /** Disable the field and the steppers. */
     isDisabled?: boolean;
+    /** Fires with the new number on valid input, stepper use or blur-clamp. */
     onChange: (value: number) => void;
+    /** Fires on Enter when the current value is a valid integer. */
     onSubmit?: () => void;
 }

package/PageHeader/components/AutosizeInput/AutosizeInput.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { AutosizeInputProps } from './types';
+/**
+ * Inline text input that grows to fit its content, with an edit affordance; commits
+ * on blur/Enter and reverts on Escape. Used for editable page titles.
+ *
+ * @example
+ * <AutosizeInput value={name} onChange={setName} onComplete={save} />
+ */
 export declare function AutosizeInput(props: AutosizeInputProps): ReactElement;

package/PageHeader/components/AutosizeInput/AutosizeInput.js

@@ -3,6 +3,13 @@ import { useEffect, useRef, useState } from 'react';
 import { EditIcon } from '@pushwoosh/kit-icons';
 import { DEFAULT_EMPTY_VALUE, WIDTH_EMPTY_VALUE } from './constants';
 import { RootBox, InputBox, InputStyled, PromptBox } from './styles';
+/**
+ * Inline text input that grows to fit its content, with an edit affordance; commits
+ * on blur/Enter and reverts on Escape. Used for editable page titles.
+ *
+ * @example
+ * <AutosizeInput value={name} onChange={setName} onComplete={save} />
+ */
 export function AutosizeInput(props) {
   const {
     placeholder,

package/PageHeader/components/AutosizeInput/types.d.ts

@@ -1,10 +1,17 @@
+/** Props of {@link AutosizeInput}. */
 export interface AutosizeInputProps {
+    /** Current value (controlled). */
     value: string;
+    /** Placeholder shown when empty. */
     placeholder?: string | undefined;
+    /** Maximum number of characters. */
     maxLength?: number | undefined;
+    /** Fires on every edit with the new value. */
     onChange?: ((value: string) => void) | undefined;
+    /** Fires after editing finishes (blur, or Enter). */
     onComplete?: ((value: string) => void) | undefined;
 }
+/** Internal style prop carrying the computed input width. */
 export interface InputStyledProps {
     width: number;
 }

package/PageHeader/components/PageHeader/PageHeader.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { PageHeaderProps } from './types';
+/**
+ * Page-level header with a title, optional back arrow, description, inline error bar
+ * and submit/cancel/extra actions.
+ *
+ * @example
+ * <PageHeader title="Campaign" onBack={goBack} onSubmit={save} onCancel={discard} />
+ */
 export declare function PageHeader(props: PageHeaderProps): ReactElement;

package/PageHeader/components/PageHeader/PageHeader.js

@@ -5,6 +5,13 @@ import { H1 } from '@pushwoosh/kit-typography';
 import { Button } from '../../../Button';
 import { PageHeaderError } from '../PageHeaderError';
 import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
+/**
+ * Page-level header with a title, optional back arrow, description, inline error bar
+ * and submit/cancel/extra actions.
+ *
+ * @example
+ * <PageHeader title="Campaign" onBack={goBack} onSubmit={save} onCancel={discard} />
+ */
 export function PageHeader(props) {
   const {
     title,

package/PageHeader/components/PageHeader/types.d.ts

@@ -1,15 +1,28 @@
 import type { ReactElement, ReactNode } from 'react';
+/** Props of {@link PageHeader}. */
 export interface PageHeaderProps {
+    /** Page title. */
     title: ReactNode;
+    /** Subtitle/description under the title. */
     description?: ReactNode | string;
+    /** Error message shown in an inline error bar. */
     error?: string;
+    /** Caption for the error-resolve action. */
     resolveErrorText?: string;
+    /** Submit button caption (default "Create"). */
     submitText?: string;
+    /** Cancel button caption (default "Cancel"). */
     cancelText?: string;
+    /** Show the loading state on the submit button. */
     isLoadingSubmit?: boolean;
+    /** Extra actions rendered before the submit/cancel buttons. */
     moreActions?: ReactElement;
+    /** When set, renders a back arrow that calls this. */
     onBack?: () => void;
+    /** When set, renders a submit button that calls this. */
     onSubmit?: (params?: any) => void;
+    /** When set, renders a cancel button that calls this. */
     onCancel?: () => void;
+    /** Fires when the error-resolve action is clicked. */
     onResolveError?: () => void;
 }

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { PageHeaderEditableProps } from './types';
+/**
+ * {@link PageHeader} variant whose title is inline-editable via {@link AutosizeInput};
+ * shows a skeleton while `isLoading`.
+ *
+ * @example
+ * <PageHeaderEditable title="Name:" value={name} onChange={setName} onSubmit={save} />
+ */
 export declare function PageHeaderEditable(props: PageHeaderEditableProps): ReactElement;

package/PageHeader/components/PageHeaderEditable/PageHeaderEditable.js

@@ -6,6 +6,13 @@ import { AutosizeInput } from '../AutosizeInput';
 import { PageHeaderError } from '../PageHeaderError';
 import { PageHeaderSkeleton } from '../PageHeaderSkeleton';
 import { RootBox, BackButton, TitleBox, DescriptionBox, AutosizeInputBox, ActionsBox, MoreActionsBox } from './styles';
+/**
+ * {@link PageHeader} variant whose title is inline-editable via {@link AutosizeInput};
+ * shows a skeleton while `isLoading`.
+ *
+ * @example
+ * <PageHeaderEditable title="Name:" value={name} onChange={setName} onSubmit={save} />
+ */
 export function PageHeaderEditable(props) {
   const {
     title,

package/PageHeader/components/PageHeaderEditable/types.d.ts

@@ -1,21 +1,40 @@
 import type { ReactElement } from 'react';
+/** Props of {@link PageHeaderEditable}. */
 export interface PageHeaderEditableProps {
+    /** Static text shown before the editable field. */
     title: string;
+    /** Subtitle/description under the title. */
     description?: string;
+    /** Error message shown in an inline error bar. */
     error?: string;
+    /** Caption for the error-resolve action. */
     resolveErrorText?: string;
+    /** Editable value; when set, renders the {@link AutosizeInput}. */
     value?: string;
+    /** Maximum length of the editable value. */
     maxLength?: number;
+    /** Placeholder for the editable field. */
     placeholder?: string;
+    /** Submit button caption (default "Create"). */
     submitText?: string;
+    /** Cancel button caption (default "Cancel"). */
     cancelText?: string;
+    /** Show the whole header as a skeleton. */
     isLoading?: boolean;
+    /** Show the loading state on the submit button. */
     isLoadingSubmit?: boolean;
+    /** Extra actions rendered before the submit/cancel buttons. */
     moreActions?: ReactElement;
+    /** When set, renders a back arrow that calls this. */
     onBack?: () => void;
+    /** Fires on every edit of the value. */
     onChange?: (value: string) => void;
+    /** Fires after editing finishes (blur/Enter). */
     onComplete?: (value: string) => void;
+    /** When set, renders a submit button; called with the current value. */
     onSubmit?: (value: string) => void;
+    /** When set, renders a cancel button that calls this. */
     onCancel?: () => void;
+    /** Fires when the error-resolve action is clicked. */
     onResolveError?: () => void;
 }

package/Pagination/Pagination.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { PaginationProps } from './types';
+/**
+ * Page navigation with prev/next arrows, first/last shortcuts and adjacent page
+ * buttons around the active page. Renders `null` if `activePage` is out of range.
+ *
+ * @example
+ * <Pagination activePage={page} totalPages={20} onChangePage={setPage} />
+ */
 export declare function Pagination({ boxRef, activePage, totalPages, adjacentPagesCount, isLoading, onChangePage, ...rest }: PaginationProps): ReactElement | null;

package/Pagination/Pagination.js

@@ -3,6 +3,13 @@ import { useCallback } from 'react';
 import { ArrowIcon } from '@pushwoosh/kit-icons';
 import { getSafelyNumber } from './helpers';
 import { PaginationBox, PaginationArrow, PaginationDivider, PaginationButton } from './styles';
+/**
+ * Page navigation with prev/next arrows, first/last shortcuts and adjacent page
+ * buttons around the active page. Renders `null` if `activePage` is out of range.
+ *
+ * @example
+ * <Pagination activePage={page} totalPages={20} onChangePage={setPage} />
+ */
 export function Pagination({
   boxRef,
   activePage,

package/Pagination/types.d.ts

@@ -1,9 +1,16 @@
 import type { Ref } from 'react';
+/** Props of {@link Pagination} — all `<div>` attributes plus the pagination-specific ones. */
 export type PaginationProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    /** Ref to the container `<div>`. */
     readonly boxRef?: Ref<HTMLDivElement>;
+    /** Current page (1-based). */
     readonly activePage: string | number;
+    /** Total number of pages. */
     readonly totalPages: string | number;
+    /** How many page buttons to show on each side of the active page (default `2`). */
     readonly adjacentPagesCount?: number;
+    /** Disable all controls while loading. */
     readonly isLoading?: boolean;
+    /** Fires with the target page number when a control is clicked. */
     readonly onChangePage: (page: number) => any;
 };

package/Popover/Popover.d.ts

@@ -1,3 +1,13 @@
 import { type ReactElement } from 'react';
 import type { PopoverProps } from './types';
+/**
+ * Floating window anchored to `anchorEl`, with placement, width, loading state and
+ * a controlled `open` flag. Wrap the anchor in `PopoverContainer` for positioning.
+ *
+ * @example
+ * <PopoverContainer>
+ *   <button ref={anchorEl}>Open</button>
+ *   <Popover open={open} anchorEl={anchorEl}>Content</Popover>
+ * </PopoverContainer>
+ */
 export declare function Popover({ open, anchorEl, internalWindowRef, loading, position, zIndex, windowWidth, children, }: PopoverProps): ReactElement;

package/Popover/Popover.js

@@ -1,5 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PopoverContainerPortal, PopoverContainerWindow } from './styles';
+/**
+ * Floating window anchored to `anchorEl`, with placement, width, loading state and
+ * a controlled `open` flag. Wrap the anchor in `PopoverContainer` for positioning.
+ *
+ * @example
+ * <PopoverContainer>
+ *   <button ref={anchorEl}>Open</button>
+ *   <Popover open={open} anchorEl={anchorEl}>Content</Popover>
+ * </PopoverContainer>
+ */
 export function Popover({
   open,
   anchorEl,

package/Popover/styles.d.ts

@@ -1,3 +1,4 @@
+/** Relative-positioned wrapper for a {@link Popover} and its anchor element. */
 export declare const PopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PopoverContainerWindow: import("styled-components").StyledComponent<"div", any, {
     $minWidth?: number | null;

package/Popover/styles.js

@@ -1,6 +1,7 @@
 import Tippy from '@tippyjs/react';
 import styled from 'styled-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+/** Relative-positioned wrapper for a {@link Popover} and its anchor element. */
 export const PopoverContainer = styled.div.withConfig({
   displayName: "PopoverContainer",
   componentId: "sc-qsqk3z-0"

package/Popover/types.d.ts

@@ -1,12 +1,21 @@
 import type { RefObject, ReactNode } from 'react';
 import type { Placement } from 'tippy.js';
+/** Props of {@link Popover}. */
 export interface PopoverProps {
+    /** Ref to the element the popover anchors to. */
     readonly anchorEl: RefObject<HTMLElement>;
+    /** Ref to the popover window, e.g. for click-outside detection. */
     readonly internalWindowRef?: RefObject<HTMLDivElement> | null;
+    /** Placement relative to the anchor (default `right-start`). */
     readonly position?: Placement;
+    /** Whether the popover is open. */
     readonly open: boolean;
+    /** Show the loading state inside the window. */
     readonly loading?: boolean;
+    /** Stacking z-index (default `1000`). */
     readonly zIndex?: number;
+    /** Fixed window width in pixels. */
     readonly windowWidth?: number;
+    /** Popover content (rendered only while open). */
     readonly children: ReactNode | undefined;
 }

package/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,9 @@
 import { type ReactElement } from 'react';
 import { type ProgressBarProps } from './types';
+/**
+ * Horizontal progress indicator with a title, percentage and optional leading spinner.
+ *
+ * @example
+ * <ProgressBar title="Uploading" percentValue={42} />
+ */
 export declare function ProgressBar({ percentValue, title, rightSlot, color, backgroundColor, showSpinner, }: ProgressBarProps): ReactElement;

package/ProgressBar/ProgressBar.js

@@ -2,6 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styles';
+/**
+ * Horizontal progress indicator with a title, percentage and optional leading spinner.
+ *
+ * @example
+ * <ProgressBar title="Uploading" percentValue={42} />
+ */
 export function ProgressBar({
   percentValue,
   title,

package/ProgressBar/types.d.ts

@@ -1,9 +1,16 @@
 import { type ReactNode } from 'react';
+/** Props of {@link ProgressBar}. */
 export type ProgressBarProps = {
+    /** Completion percentage, 0–100. */
     percentValue: number;
+    /** Label shown before the percentage. */
     title: string;
+    /** Extra content on the right of the header row. */
     rightSlot?: ReactNode;
+    /** Fill (and spinner) color. */
     color?: string;
+    /** Track/spinner background color. */
     backgroundColor?: string;
+    /** Show the leading spinner (default `true`). */
     showSpinner?: boolean;
 };

package/PushPreview/PushPreview.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { PushBasicData, PushPreviewProps } from './types';
+/**
+ * Renders a realistic push-notification preview from a push preset, picking
+ * localized strings by `language`, with compact/extended/silent/missed-content modes.
+ *
+ * @example
+ * <PushPreview pushPreset={preset} language="en" appTitle="My App" />
+ */
 export declare function PushPreview<T extends PushBasicData>({ pushPreset, language, view, appTitle, appIcon, isLoading, width, }: PushPreviewProps<T>): ReactElement;

package/PushPreview/PushPreview.js

@@ -6,6 +6,13 @@ import { PREVIEW_ICON_URL } from './constants';
 import { getLocalizedContent } from './helpers';
 import { PushBox, PushIcon, PushTitle, PushDescription } from './styles';
 import { RichMessageViewer } from '../RichMessageEditor';
+/**
+ * Renders a realistic push-notification preview from a push preset, picking
+ * localized strings by `language`, with compact/extended/silent/missed-content modes.
+ *
+ * @example
+ * <PushPreview pushPreset={preset} language="en" appTitle="My App" />
+ */
 export function PushPreview({
   pushPreset,
   language,