@pushwoosh/dumb-components 1.1.147 → 1.1.149

package/Drawer/components/DrawerContent/styles.js

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
 import { Color, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+/** Top section of a {@link Drawer}; typically wraps a {@link DrawerTitle}. */
 export const DrawerHeader = styled.div.withConfig({
   displayName: "DrawerHeader",
   componentId: "sc-1jmui00-0"
 })(["padding:40px 40px 8px;background:", ";"], Color.CLEAR);
+/** Heading row of a {@link Drawer} (an `<h2>`); place inside {@link DrawerHeader}. */
 export const DrawerTitle = styled.h2.withConfig({
   displayName: "DrawerTitle",
   componentId: "sc-1jmui00-1"
 })(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:", ";letter-spacing:0;margin:0;"], FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2);
+/** Scrollable main content area of a {@link Drawer}. */
 export const DrawerBody = styled.div.withConfig({
   displayName: "DrawerBody",
   componentId: "sc-1jmui00-2"

package/Drawer/components/DrawerDocs/DrawerDocs.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { DrawerPlatformsProps } from './types';
+/**
+ * {@link Drawer} preset that loads a documentation page in an iframe with a loading
+ * state. Pair with {@link useDocs} to manage open/close.
+ *
+ * @example
+ * <DrawerDocs url={docsUrl} isOpen={docsOpen} onClose={closeDocsDrawer} />
+ */
 export declare function DrawerDocs(props: DrawerPlatformsProps): ReactElement;

package/Drawer/components/DrawerDocs/DrawerDocs.js

@@ -4,6 +4,13 @@ import { DrawerBodyIframe, IframeElement, LoadingBox } from './styles';
 import { Spinner } from '../../../Spinner';
 import { Lang, useLang } from '../../polyglot';
 import { Drawer } from '../Drawer';
+/**
+ * {@link Drawer} preset that loads a documentation page in an iframe with a loading
+ * state. Pair with {@link useDocs} to manage open/close.
+ *
+ * @example
+ * <DrawerDocs url={docsUrl} isOpen={docsOpen} onClose={closeDocsDrawer} />
+ */
 export function DrawerDocs(props) {
   const {
     isOpen,

package/Drawer/components/DrawerDocs/hooks.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Open/close state helper for {@link DrawerDocs}; returns
+ * `{ docsOpen, openDocsDrawer, closeDocsDrawer }`.
+ */
 export declare const useDocs: () => {
     docsOpen: boolean;
     openDocsDrawer: () => void;

package/Drawer/components/DrawerDocs/hooks.js

@@ -1,4 +1,8 @@
 import { useCallback, useState } from 'react';
+/**
+ * Open/close state helper for {@link DrawerDocs}; returns
+ * `{ docsOpen, openDocsDrawer, closeDocsDrawer }`.
+ */
 export const useDocs = () => {
   const [docsOpen, setDocsOpen] = useState(false);
   const openDocsDrawer = useCallback(() => {

package/Drawer/components/DrawerDocs/types.d.ts

@@ -1,5 +1,9 @@
+/** Props of {@link DrawerDocs}. */
 export interface DrawerPlatformsProps {
+    /** URL of the documentation page to load in the iframe. */
     url: string;
+    /** Whether the drawer is open. */
     isOpen: boolean;
+    /** Fires when the drawer is closed. */
     onClose: () => void;
 }

package/DropdownMenu/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,3 +1,15 @@
 import { type FC } from 'react';
 import { type DropdownMenuProps } from './types';
+/**
+ * Floating dropdown menu anchored to a custom trigger (`renderHandler`), with
+ * auto-placement, click-outside close and layered z-index. Fill it with
+ * {@link DropdownMenuItem}, {@link DropdownMenuSection} and {@link DropdownMenuSubmenu}.
+ *
+ * @example
+ * <DropdownMenu renderHandler={({ ref, onClick, isOpen }) => (
+ *   <Button boxRef={ref} onClick={onClick} isOpen={isOpen} color="secondary">Menu</Button>
+ * )}>
+ *   <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ * </DropdownMenu>
+ */
 export declare const DropdownMenu: FC<DropdownMenuProps>;

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -7,6 +7,18 @@ import { useLayer } from '../../../hooks';
 import { DropdownContext, DropdownZIndexContext } from '../../context';
 import { renderChildren } from '../../shared/renderChildren';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+/**
+ * Floating dropdown menu anchored to a custom trigger (`renderHandler`), with
+ * auto-placement, click-outside close and layered z-index. Fill it with
+ * {@link DropdownMenuItem}, {@link DropdownMenuSection} and {@link DropdownMenuSubmenu}.
+ *
+ * @example
+ * <DropdownMenu renderHandler={({ ref, onClick, isOpen }) => (
+ *   <Button boxRef={ref} onClick={onClick} isOpen={isOpen} color="secondary">Menu</Button>
+ * )}>
+ *   <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>
+ * </DropdownMenu>
+ */
 export const DropdownMenu = ({
   renderHandler,
   color,

package/DropdownMenu/components/DropdownMenu/types.d.ts

@@ -1,20 +1,35 @@
 import type { ReferenceType, Placement } from '@floating-ui/react-dom';
 import type { ReactNode } from 'react';
 import type { Color } from '@pushwoosh/kit-constants';
+/** Arguments passed to {@link DropdownMenuProps.renderHandler} for wiring up the trigger element. */
 export type HandlerProps = {
+    /** Whether the menu is currently open. */
     isOpen: boolean;
+    /** Ref callback to attach to the trigger so the menu can anchor to it. */
     ref: (el: ReferenceType | null) => void;
+    /** Toggle handler to call on the trigger's click. */
     onClick: () => void;
 };
+/** Props of {@link DropdownMenu}. */
 export type DropdownMenuProps = {
+    /** Background color of the menu surface (`CLEAR` or `FROZEN`). */
     color?: Color.CLEAR | Color.FROZEN;
+    /** Make the menu body scrollable and scroll the active item into view. */
     isScrollable?: boolean;
+    /** Open the menu on mount. */
     openOnMount?: boolean;
+    /** z-index of the floating menu; auto-layered when omitted. */
     menuZIndex?: number;
+    /** Force a specific floating placement instead of auto-placement. */
     menuPlacement?: Placement;
+    /** Match the menu width to the trigger width. */
     fullWidth?: boolean;
+    /** Fixed menu width in pixels; `fit-content` when omitted. */
     windowWidth?: number;
+    /** Fires when the menu closes. */
     onClose?: () => void;
+    /** Renders the trigger; wire the provided {@link HandlerProps} onto your element. */
     renderHandler: (args: HandlerProps) => ReactNode;
+    /** Menu contents — nodes, or a function returning nodes (lazily rendered when open). */
     children: (() => ReactNode) | ReactNode;
 };

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.d.ts

@@ -1,3 +1,11 @@
 import { type FC } from 'react';
 import { type DropdownMenuButtonProps } from './types';
+/**
+ * {@link DropdownMenu} preset that renders a {@link Button} as its trigger — the common case.
+ *
+ * @example
+ * <DropdownMenuButton label="Actions" color="secondary">
+ *   <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ * </DropdownMenuButton>
+ */
 export declare const DropdownMenuButton: FC<DropdownMenuButtonProps>;

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../../../Button';
 import { DropdownMenu } from '../DropdownMenu';
+/**
+ * {@link DropdownMenu} preset that renders a {@link Button} as its trigger — the common case.
+ *
+ * @example
+ * <DropdownMenuButton label="Actions" color="secondary">
+ *   <DropdownMenuItem onClick={remove} isDanger>Delete</DropdownMenuItem>
+ * </DropdownMenuButton>
+ */
 export const DropdownMenuButton = ({
   label,
   isScrollable,

package/DropdownMenu/components/DropdownMenuButton/types.d.ts

@@ -1,20 +1,36 @@
 import { type Placement } from '@floating-ui/react-dom';
 import { type ReactNode } from 'react';
 import { type RequiredButtonProps } from '../../../Button';
+/** Props of {@link DropdownMenuButton} — a {@link DropdownMenu} whose trigger is a {@link Button}. */
 export type DropdownMenuButtonProps = {
+    /** Button label. */
     label?: ReactNode;
+    /** Make the menu body scrollable. */
     isScrollable?: boolean;
+    /** Disable the trigger button. */
     isDisabled?: boolean;
+    /** Show the loading state on the trigger button. */
     isLoading?: boolean;
+    /** Open the menu on mount. */
     openOnMount?: boolean;
+    /** z-index of the floating menu. */
     menuZIndex?: number;
+    /** Force a specific floating placement. */
     menuPlacement?: Placement;
+    /** Fires when the menu closes. */
     onClose?: () => void;
+    /** Button color (see {@link RequiredButtonProps}). */
     color: RequiredButtonProps['color'];
+    /** Button size. */
     size?: RequiredButtonProps['size'];
+    /** Button view. */
     view?: RequiredButtonProps['view'];
+    /** Extra CSS class on the button. */
     className?: string;
+    /** Icon before the label. */
     icon?: RequiredButtonProps['icon'];
+    /** Icon after the label. */
     rightIcon?: RequiredButtonProps['rightIcon'];
+    /** Menu contents — nodes, or a function returning nodes. */
     children: (() => ReactNode) | ReactNode;
 };

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -1,3 +1,10 @@
 import { type FC } from 'react';
 import { type DropdownMenuItemProps } from './types';
+/**
+ * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
+ * disabled states. Must be rendered inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>
+ */
 export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -3,6 +3,13 @@ import { useContext } from 'react';
 import { CheckIcon } from '@pushwoosh/kit-icons';
 import { DropdownMenuItemStyled, DropdownMenuIconStyled } from './styles';
 import { DropdownContext } from '../../context';
+/**
+ * Clickable row inside a {@link DropdownMenu}, with active (checked), danger and
+ * disabled states. Must be rendered inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuItem onClick={select} isActive={selected}>Option</DropdownMenuItem>
+ */
 export const DropdownMenuItem = ({
   children,
   onClick,

package/DropdownMenu/components/DropdownMenuItem/types.d.ts

@@ -1,8 +1,14 @@
 import type { PropsWithChildren } from 'react';
+/** Props of {@link DropdownMenuItem}. */
 export type DropdownMenuItemProps = PropsWithChildren<{
+    /** Fires when the item is clicked. */
     onClick: () => void;
+    /** Mark as selected (shows a check icon). */
     isActive?: boolean;
+    /** Render in the danger (red) style, e.g. for destructive actions. */
     isDanger?: boolean;
+    /** Disable the item. */
     disabled?: boolean;
+    /** Close the menu after clicking (default `true`). */
     closeOnClick?: boolean;
 }>;

package/DropdownMenu/components/DropdownMenuSection/DropdownMenuSection.d.ts

@@ -1,3 +1,11 @@
 import { type FC } from 'react';
 import { type DropdownMenuSectionProps } from './types';
+/**
+ * Groups {@link DropdownMenuItem}s under an optional heading inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuSection title="Account">
+ *   <DropdownMenuItem onClick={logout}>Log out</DropdownMenuItem>
+ * </DropdownMenuSection>
+ */
 export declare const DropdownMenuSection: FC<DropdownMenuSectionProps>;

package/DropdownMenu/components/DropdownMenuSection/DropdownMenuSection.js

@@ -3,6 +3,14 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
 import { DropdownMenuSectionRoot } from './styles';
+/**
+ * Groups {@link DropdownMenuItem}s under an optional heading inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuSection title="Account">
+ *   <DropdownMenuItem onClick={logout}>Log out</DropdownMenuItem>
+ * </DropdownMenuSection>
+ */
 export const DropdownMenuSection = ({
   title,
   bgColor,

package/DropdownMenu/components/DropdownMenuSection/types.d.ts

@@ -1,5 +1,8 @@
 import { type PropsWithChildren } from 'react';
+/** Props of {@link DropdownMenuSection}. */
 export type DropdownMenuSectionProps = PropsWithChildren<{
+    /** Optional uppercase section heading. */
     title?: string;
+    /** Background color of the section. */
     bgColor?: string;
 }>;

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.d.ts

@@ -1,3 +1,12 @@
 import { type FC } from 'react';
 import { type DropdownMenuSubmenuProps } from './types';
+/**
+ * Nested submenu inside a {@link DropdownMenu}: a trigger row that opens a flyout
+ * of further items on hover or click. Must be rendered inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuSubmenu label="More">
+ *   <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
+ * </DropdownMenuSubmenu>
+ */
 export declare const DropdownMenuSubmenu: FC<DropdownMenuSubmenuProps>;

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -9,6 +9,15 @@ import { renderChildren } from '../../shared/renderChildren';
 import { DropdownMenuItemStyled, Place } from '../../shared/styles';
 const OPEN_DELAY = 100;
 const CLOSE_DELAY = 200;
+/**
+ * Nested submenu inside a {@link DropdownMenu}: a trigger row that opens a flyout
+ * of further items on hover or click. Must be rendered inside a {@link DropdownMenu}.
+ *
+ * @example
+ * <DropdownMenuSubmenu label="More">
+ *   <DropdownMenuItem onClick={archive}>Archive</DropdownMenuItem>
+ * </DropdownMenuSubmenu>
+ */
 export const DropdownMenuSubmenu = ({
   label,
   isDanger,

package/DropdownMenu/components/DropdownMenuSubmenu/types.d.ts

@@ -1,7 +1,12 @@
 import { type ReactNode } from 'react';
+/** Props of {@link DropdownMenuSubmenu}. */
 export type DropdownMenuSubmenuProps = {
+    /** Row label for the submenu trigger. */
     label: ReactNode;
+    /** Render the trigger in the danger (red) style. */
     isDanger?: boolean;
+    /** Disable the submenu. */
     disabled?: boolean;
+    /** Submenu contents — nodes, or a function returning nodes. */
     children: (() => ReactNode) | ReactNode;
 };

package/EditableField/EditableField.d.ts

@@ -1,3 +1,12 @@
 import { type ReactElement } from 'react';
 import type { EditableFieldProps } from './types';
+/**
+ * Inline-editable value: shows the current value as a trigger that opens a popover
+ * with arbitrary editor content plus Save/Cancel buttons.
+ *
+ * @example
+ * <EditableField value={name} open={open} onToggleOpen={toggle} onSubmit={save} onCancel={close}>
+ *   <EnhancedInput value={draft} onChange={onChange} />
+ * </EditableField>
+ */
 export declare function EditableField({ value, title, open, loading, width, position, zIndex, onToggleOpen, onSubmit, onCancel, children, }: EditableFieldProps): ReactElement;

package/EditableField/EditableField.js

@@ -8,6 +8,15 @@ import { useOnClickOutside } from '../hooks';
 import { Popover, PopoverContainer } from '../Popover';
 import { Lang } from './polyglot';
 import { FieldBox, TitleBox, ButtonsGroup } from './styles';
+/**
+ * Inline-editable value: shows the current value as a trigger that opens a popover
+ * with arbitrary editor content plus Save/Cancel buttons.
+ *
+ * @example
+ * <EditableField value={name} open={open} onToggleOpen={toggle} onSubmit={save} onCancel={close}>
+ *   <EnhancedInput value={draft} onChange={onChange} />
+ * </EditableField>
+ */
 export function EditableField({
   value,
   title = '',

package/EditableField/types.d.ts

@@ -1,15 +1,27 @@
 import type { ReactNode } from 'react';
 import type { Placement } from '../Popover';
+/** Props of {@link EditableField}. */
 export interface EditableFieldProps {
+    /** Current value shown in the read-only trigger. */
     readonly value: string;
+    /** Heading shown at the top of the edit popover. */
     readonly title?: string;
+    /** Whether the edit popover is open (controlled). */
     readonly open?: boolean;
+    /** Show the loading state on the submit button and block cancel. */
     readonly loading?: boolean;
+    /** Popover placement relative to the trigger (default `right-start`). */
     readonly position?: Placement;
+    /** Popover z-index (default `1000`). */
     readonly zIndex?: number;
+    /** Popover width in pixels (default `332`). */
     readonly width?: number;
+    /** Fires when the trigger is clicked to open/close the popover. */
     readonly onToggleOpen: () => void;
+    /** Fires when the Save button is clicked. */
     readonly onSubmit: () => void;
+    /** Fires on Cancel or click-outside. */
     readonly onCancel: () => void;
+    /** Editor content rendered inside the popover. */
     readonly children: ReactNode | undefined;
 }

package/EmailTemplatePreview/EmailTemplatePreview.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { PreviewIframeProps } from './types';
+/**
+ * Renders an email HTML template in a sandboxed iframe, resolving Liquid, localization
+ * and placeholder values before display.
+ *
+ * @example
+ * <EmailTemplatePreview template={html} localization={l10n} values={vars} scale={0.5} />
+ */
 export declare function EmailTemplatePreview(props: PreviewIframeProps): ReactElement;

package/EmailTemplatePreview/EmailTemplatePreview.js

@@ -18,6 +18,13 @@ const createLiquidInstance = () => {
   });
   return liquidInstance;
 };
+/**
+ * Renders an email HTML template in a sandboxed iframe, resolving Liquid, localization
+ * and placeholder values before display.
+ *
+ * @example
+ * <EmailTemplatePreview template={html} localization={l10n} values={vars} scale={0.5} />
+ */
 export function EmailTemplatePreview(props) {
   const {
     scale,

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.d.ts

@@ -1,2 +1,6 @@
 import { type ReactElement } from 'react';
+/**
+ * Empty-state placeholder for {@link EmailTemplatePreview}, shown when there is no
+ * template to render.
+ */
 export declare function NoEmailTemplatePreview(): ReactElement;

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js

@@ -5,6 +5,10 @@ import { Text } from '@pushwoosh/kit-typography';
 import Email from './assets/email.svg?url';
 import { Container, PreviewMock } from './styles';
 import { Lang, useLang } from '../../polyglot';
+/**
+ * Empty-state placeholder for {@link EmailTemplatePreview}, shown when there is no
+ * template to render.
+ */
 export function NoEmailTemplatePreview() {
   const lang = useLang();
   return _jsxs(Container, {

package/EmailTemplatePreview/helpers.d.ts

@@ -1,2 +1,10 @@
+/**
+ * Replaces `{{key|text|html|color|default}}` localization tokens in `str` with the
+ * matching value from `values`, falling back to the token's default.
+ */
 export declare function replaceLocalization(str: string, values: Record<string, string>): string;
+/**
+ * Replaces `{key|modifier|default}` placeholder tokens (e.g. `UPPERCASE`, `dollar`,
+ * date formats) in `str` with the matching value from `values`, falling back to the default.
+ */
 export declare function replacePlaceholders(str: string, values: Record<string, string>): string;

package/EmailTemplatePreview/helpers.js

@@ -1,9 +1,17 @@
+/**
+ * Replaces `{{key|text|html|color|default}}` localization tokens in `str` with the
+ * matching value from `values`, falling back to the token's default.
+ */
 export function replaceLocalization(str, values) {
   const re = /{{([^|{}]+)\|(text|html|color)\|([^}]*)?}}/g;
   return str.replace(re, (_, key, _type, defaultValue) => {
     return (key in values ? values[key] : defaultValue) || '';
   });
 }
+/**
+ * Replaces `{key|modifier|default}` placeholder tokens (e.g. `UPPERCASE`, `dollar`,
+ * date formats) in `str` with the matching value from `values`, falling back to the default.
+ */
 export function replacePlaceholders(str, values) {
   const allAvailableModifiers = ['CapitalizeFirst', 'CapitalizeAllFirst', 'UPPERCASE', 'lowercase', 'regular', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira', 'M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
   const re = new RegExp(`{([^|{}]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');

package/EmailTemplatePreview/types.d.ts

@@ -1,8 +1,15 @@
+/** Props of {@link EmailTemplatePreview}. */
 export type PreviewIframeProps = {
+    /** CSS `transform: scale()` factor applied to the rendered email. */
     scale?: number;
+    /** CSS width of the iframe. */
     width?: string;
+    /** CSS height of the iframe. */
     height?: string;
+    /** Raw email HTML template (Liquid + placeholders). */
     template: string;
+    /** Localization map resolved by {@link replaceLocalization}. */
     localization: Record<string, string>;
+    /** Placeholder values resolved by {@link replacePlaceholders}. */
     values: Record<string, any>;
 };

package/EnhancedInput/EnhancedInput.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Text input with optional left icon, trailing hint and a clear button, on top
+ * of the styled {@link NativeInput}.
+ *
+ * @example
+ * <EnhancedInput value={q} onChange={onChange} $onClear={() => setQ('')} hint="⏎" />
+ */
 export declare const EnhancedInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & import("../native/Input").NativeInputProps & {
     $icon?: import("react").ReactNode;
     $onClear?: () => void;

package/EnhancedInput/EnhancedInput.js

@@ -3,6 +3,13 @@ import { forwardRef } from 'react';
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { Wrapper, RightSlot } from './styles';
 import { NativeInput } from '../native';
+/**
+ * Text input with optional left icon, trailing hint and a clear button, on top
+ * of the styled {@link NativeInput}.
+ *
+ * @example
+ * <EnhancedInput value={q} onChange={onChange} $onClear={() => setQ('')} hint="⏎" />
+ */
 export const EnhancedInput = forwardRef(({
   $icon,
   $onClear,

package/EnhancedInput/SearchInput.d.ts

@@ -1,3 +1,9 @@
 import { type FC } from 'react';
 import { type SearchInputProps } from './types';
+/**
+ * {@link EnhancedInput} preset with a fixed search icon — for search/filter fields.
+ *
+ * @example
+ * <SearchInput placeholder="Search" value={q} onChange={onChange} $onClear={() => setQ('')} />
+ */
 export declare const SearchInput: FC<SearchInputProps>;

package/EnhancedInput/SearchInput.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchIcon } from '@pushwoosh/kit-icons';
 import { EnhancedInput } from './EnhancedInput';
+/**
+ * {@link EnhancedInput} preset with a fixed search icon — for search/filter fields.
+ *
+ * @example
+ * <SearchInput placeholder="Search" value={q} onChange={onChange} $onClear={() => setQ('')} />
+ */
 export const SearchInput = props => {
   return _jsx(EnhancedInput, {
     ...props,

package/EnhancedInput/types.d.ts

@@ -1,8 +1,13 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { NativeInputProps } from '../native/Input';
+/** Props of {@link EnhancedInput} — native input attributes plus icon, clear and hint slots. */
 export type EnhancedInputProps = InputHTMLAttributes<HTMLInputElement> & NativeInputProps & {
+    /** Icon rendered on the left inside the field. */
     $icon?: ReactNode;
+    /** When set, shows a clear (✕) button; called when it is clicked. */
     $onClear?: () => void;
+    /** Trailing hint text shown on the right inside the field. */
     hint?: string;
 };
+/** Props of {@link SearchInput} — like {@link EnhancedInputProps} but the icon is a fixed search glyph. */
 export type SearchInputProps = Omit<EnhancedInputProps, '$icon'>;

package/ExportResult/ExportResult.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import { type ExportResultProps } from './types';
+/**
+ * Result row for a finished export: a colored leading icon, title/subtitle, an
+ * optional right slot and a close button.
+ *
+ * @example
+ * <ExportResult type="success" title="Export ready" subtitle="users.csv" handleClose={dismiss} />
+ */
 export declare function ExportResult(props: ExportResultProps): ReactElement;

package/ExportResult/ExportResult.js

@@ -3,6 +3,13 @@ import { Horizontal } from '@pushwoosh/kit-helpers';
 import { CloseIcon, CsvIcon } from '@pushwoosh/kit-icons';
 import { Button } from '../Button';
 import { LeftSlot, MainInfoContainer, RightSlotContainer, Subtitle, Title } from './styles';
+/**
+ * Result row for a finished export: a colored leading icon, title/subtitle, an
+ * optional right slot and a close button.
+ *
+ * @example
+ * <ExportResult type="success" title="Export ready" subtitle="users.csv" handleClose={dismiss} />
+ */
 export function ExportResult(props) {
   const {
     type,

package/ExportResult/types.d.ts

@@ -1,9 +1,16 @@
 import { type ReactNode } from 'react';
+/** Props of {@link ExportResult}. */
 export type ExportResultProps = {
+    /** Main line of text. */
     title: string;
+    /** Secondary line of text. */
     subtitle: string;
+    /** Leading icon (defaults to a CSV icon). */
     leftSlotIcon?: ReactNode;
+    /** Extra content on the right, before the close button. */
     rightSlot?: ReactNode;
+    /** Severity, driving the leading icon's color. */
     type: 'error' | 'warning' | 'info' | 'success';
+    /** Fires when the close button is clicked. */
     handleClose: () => void;
 };

package/ExternalImagePreview/ExternalImagePreview.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { ExternalImagePreviewProps } from './types';
+/**
+ * Loads an external image with loading and error states, showing `placeholder`
+ * until it resolves or if it fails.
+ *
+ * @example
+ * <ExternalImagePreview src={url} width={120} height={120} placeholder={<Skeleton />} />
+ */
 export declare function ExternalImagePreview(props: ExternalImagePreviewProps): ReactElement;

package/ExternalImagePreview/ExternalImagePreview.js

@@ -3,6 +3,13 @@ import { useState, useEffect } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { RootBox, ImgPreview, PlaceholderWrapper } from './styles';
+/**
+ * Loads an external image with loading and error states, showing `placeholder`
+ * until it resolves or if it fails.
+ *
+ * @example
+ * <ExternalImagePreview src={url} width={120} height={120} placeholder={<Skeleton />} />
+ */
 export function ExternalImagePreview(props) {
   const {
     src,