@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Skeleton/styles.d.ts

@@ -1,4 +1,6 @@
 import type { CircularSkeletonProps, RectangularSkeletonProps, TextSkeletonProps } from './types';
+/** Pulsing rectangular loading placeholder of a fixed `width`/`height`. */
 export declare const RectangularSkeleton: import("styled-components").StyledComponent<"div", any, RectangularSkeletonProps, never>;
+/** Pulsing circular loading placeholder of a given `diameter` (e.g. for avatars). */
 export declare const CircularSkeleton: import("styled-components").StyledComponent<"div", any, CircularSkeletonProps, never>;
 export declare const TextSkeletonTag: import("styled-components").StyledComponent<"div", any, TextSkeletonProps, never>;

package/Skeleton/styles.js

@@ -7,6 +7,7 @@ const borderRadiusCss = css(["border-radius:", ";"], ({
 const skeletonCommonCss = css(["background-color:", ";animation:", " 1.5s ease-in-out 0.5s infinite;"], ({
   color
 }) => color || '#ddd', pulseKeyframe);
+/** Pulsing rectangular loading placeholder of a fixed `width`/`height`. */
 export const RectangularSkeleton = styled.div.withConfig({
   displayName: "RectangularSkeleton",
   componentId: "sc-mdyfd6-0"
@@ -15,6 +16,7 @@ export const RectangularSkeleton = styled.div.withConfig({
 }) => toCssValue(width), ({
   height
 }) => toCssValue(height), skeletonCommonCss, borderRadiusCss);
+/** Pulsing circular loading placeholder of a given `diameter` (e.g. for avatars). */
 export const CircularSkeleton = styled.div.withConfig({
   displayName: "CircularSkeleton",
   componentId: "sc-mdyfd6-1"

package/Skeleton/types.d.ts

@@ -1,16 +1,27 @@
+/** Optional corner-radius for skeleton shapes. */
 export type SkeletonBorderRadiusProps = {
+    /** Corner radius (px number or any CSS value). */
     borderRadius?: number | string;
 };
+/** Props common to all skeleton shapes. */
 export type SkeletonCommonProps = {
+    /** Base color of the placeholder. */
     color?: string;
 };
+/** Props of {@link RectangularSkeleton}. */
 export type RectangularSkeletonProps = SkeletonCommonProps & SkeletonBorderRadiusProps & {
+    /** Width (px number or any CSS value). */
     width: number | string;
+    /** Height (px number or any CSS value). */
     height: number | string;
 };
+/** Props of {@link CircularSkeleton}. */
 export type CircularSkeletonProps = SkeletonCommonProps & {
+    /** Circle diameter (px number or any CSS value). */
     diameter: number | string;
 };
+/** Props of {@link TextSkeleton}. */
 export type TextSkeletonProps = SkeletonCommonProps & SkeletonBorderRadiusProps & {
+    /** Fixed width; when omitted the skeleton sizes to its content (inline). */
     width?: number | string;
 };

package/SortButton/SortButton.d.ts

@@ -1,5 +1,11 @@
 import { type ReactElement } from 'react';
 import type { SortButtonProps } from './types';
+/**
+ * Column-header button that cycles a sort order and reports the next order via `onClick`.
+ *
+ * @example
+ * <SortButton name="created" order={order} onClick={({ order }) => setOrder(order)}>Created</SortButton>
+ */
 export declare function SortButton(props: SortButtonProps): ReactElement;
 export declare namespace SortButton {
     var displayName: string;

package/SortButton/SortButton.js

@@ -4,6 +4,12 @@ import { SortIcon } from '@pushwoosh/kit-icons';
 import { AVAILABLE_ACTIVE_ORDERS } from './constants';
 import { IconTypeByOrderMap, NextOrderMap, ReversedNextOrderMap } from './maps';
 import { SortButtonBox } from './styles';
+/**
+ * Column-header button that cycles a sort order and reports the next order via `onClick`.
+ *
+ * @example
+ * <SortButton name="created" order={order} onClick={({ order }) => setOrder(order)}>Created</SortButton>
+ */
 export function SortButton(props) {
   const {
     boxRef,

package/SortButton/types.d.ts

@@ -1,14 +1,25 @@
 import type { Ref } from 'react';
+/** Current sort order of a column: ascending, descending, or unsorted (`null`). */
 export type SortButtonOrder = 'asc' | 'desc' | null;
+/** Arrow icon state shown by a {@link SortButton}. */
 export type SortButtonIconType = 'asc' | 'desc' | 'not-sorted';
+/** Payload passed to {@link SortButtonProps.onClick} with the next order for the column. */
 export type SortButtonParams = {
+    /** Column name this button sorts. */
     readonly name: string;
+    /** The order to apply next. */
     readonly order: SortButtonOrder;
 };
+/** Props of {@link SortButton} — all `<button>` attributes plus the sort-specific ones. */
 export type SortButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref' | 'onClick'> & {
+    /** Ref to the `<button>`. */
     readonly boxRef?: Ref<HTMLButtonElement>;
+    /** Column name this button controls. */
     readonly name: string;
+    /** Current sort order of this column. */
     readonly order: SortButtonOrder;
+    /** Reverse the order cycle (desc → asc instead of asc → desc). */
     readonly isReversed?: boolean;
+    /** Fires with the next `{ name, order }` when clicked. */
     readonly onClick: (params: SortButtonParams) => void;
 };

package/Spinner/Spinner.d.ts

@@ -1,3 +1,9 @@
 import { type ReactElement } from 'react';
 import { type SpinnerProps } from './types';
+/**
+ * Animated loading indicator in small or medium size.
+ *
+ * @example
+ * <Spinner size="medium" />
+ */
 export declare function Spinner(props: SpinnerProps): ReactElement | null;

package/Spinner/Spinner.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AssetsMap } from './assets';
 import { SpinnerBox, SpinnerAnimate } from './styles';
+/**
+ * Animated loading indicator in small or medium size.
+ *
+ * @example
+ * <Spinner size="medium" />
+ */
 export function Spinner(props) {
   const {
     boxRef,

package/Spinner/types.d.ts

@@ -1,6 +1,10 @@
 import { type Ref } from 'react';
+/** Props of {@link Spinner}. */
 export interface SpinnerProps {
+    /** Ref to the spinner wrapper. */
     readonly boxRef?: Ref<HTMLDivElement>;
+    /** Spinner color. */
     readonly color?: string;
+    /** Size preset. */
     readonly size: 'small' | 'medium';
 }

package/StatisticCard/StatisticCard.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import { type StatisticCardProps } from './types';
+/**
+ * KPI card showing a title and a (number-formatted) value, with an optional actions
+ * menu, loading skeleton and a selectable/active mode.
+ *
+ * @example
+ * <StatisticCard title="Active users" value={4096} valueSubtext="this week" />
+ */
 export declare function StatisticCard(props: StatisticCardProps): ReactElement;

package/StatisticCard/StatisticCard.js

@@ -8,6 +8,13 @@ import { Container, RightSlotContainer, StatValue, Title } from './styles';
 import { Button } from '../Button';
 import { DropdownMenu, DropdownMenuItem, DropdownMenuSection } from '../DropdownMenu';
 import { TextSkeleton } from '../Skeleton';
+/**
+ * KPI card showing a title and a (number-formatted) value, with an optional actions
+ * menu, loading skeleton and a selectable/active mode.
+ *
+ * @example
+ * <StatisticCard title="Active users" value={4096} valueSubtext="this week" />
+ */
 export function StatisticCard(props) {
   const {
     title,

package/StatisticCard/types.d.ts

@@ -1,27 +1,48 @@
 import { type ReactNode } from 'react';
+/** Props of {@link StatisticCard} — common fields plus the selectable/non-selectable variant. */
 export type StatisticCardProps = CommonProps & (SelectableProps | NonSelectableProps);
+/** An action shown in the card's kebab menu. */
 type StatisticCardAction = {
+    /** Unique key. */
     id: string;
+    /** Menu item label. */
     label: ReactNode;
+    /** Fires when the action is clicked. */
     onClick: () => void;
+    /** Disable the action. */
     disabled?: boolean;
 };
+/** Fields common to every {@link StatisticCard}. */
 export type CommonProps = {
+    /** Card title. */
     title: ReactNode;
+    /** Main value (numbers are formatted with spaced thousands). */
     value: number | string;
+    /** Small text shown after the value. */
     valueSubtext?: string;
+    /** Custom content on the right; overrides the actions menu. */
     rightSlot?: ReactNode;
+    /** Actions rendered in a kebab menu (when `rightSlot` is not set). */
     actions?: StatisticCardAction[];
+    /** Footnote under the value. */
     footer?: string;
+    /** Show a skeleton in place of the value. */
     isLoading?: boolean;
+    /** Fixed CSS width. */
     width?: string;
 };
+/** Variant: the card is selectable (clickable, can be active). */
 export type SelectableProps = {
+    /** Marks the card as selectable. */
     selectable: true;
+    /** Fires when the card is clicked. */
     onClick: () => void;
+    /** Render the active (selected) state. */
     active?: boolean;
 };
+/** Variant: the card is not selectable. */
 export type NonSelectableProps = {
+    /** Marks the card as non-selectable (default). */
     selectable?: false;
     onClick?: never;
     active?: never;

package/Switch/Switch.d.ts

@@ -1,3 +1,9 @@
 import { type ReactElement } from 'react';
 import type { SwitchProps } from './types';
+/**
+ * Toggle switch for a boolean value, with an optional label on either side.
+ *
+ * @example
+ * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>
+ */
 export declare function Switch({ labelPosition, enabled, isDisabled, children, onChange, }: SwitchProps): ReactElement;

package/Switch/Switch.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container, Box, Circle, Label } from './styles';
+/**
+ * Toggle switch for a boolean value, with an optional label on either side.
+ *
+ * @example
+ * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>
+ */
 export function Switch({
   labelPosition = 'right',
   enabled = false,

package/Switch/types.d.ts

@@ -1,14 +1,22 @@
 import type { ReactNode } from 'react';
+/** Props of {@link Switch}. */
 export interface SwitchProps {
+    /** Side the label sits on relative to the toggle (default `right`). */
     labelPosition?: 'left' | 'right';
+    /** On/off state (controlled). */
     enabled?: boolean;
+    /** Disable interaction and render the disabled state. */
     isDisabled?: boolean;
+    /** Label content rendered next to the toggle. */
     children?: ReactNode;
+    /** Fires when the toggle is clicked; flip `enabled` in the handler. */
     onChange: () => void;
 }
+/** Internal style prop carrying the label side. */
 export interface AlignProps {
     labelPosition?: string;
 }
+/** Internal style prop carrying the toggle state. */
 export interface ComponentProps {
     enabled: boolean;
     isDisabled?: boolean;

package/Tabs/components/Tab/Tab.d.ts

@@ -1,3 +1,7 @@
+/**
+ * A single tab header inside a {@link TabBar}; activates the {@link TabPanel} with
+ * the matching `code`. Must be used within {@link Tabs}.
+ */
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "onClick"> & Readonly<{
     code: import("../..").TabCode;
     onActivate?: (code: import("../..").TabCode) => void;

package/Tabs/components/Tab/Tab.js

@@ -2,6 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TabBase } from '../TabBase';
 import { useTabsContext } from '../../context';
+/**
+ * A single tab header inside a {@link TabBar}; activates the {@link TabPanel} with
+ * the matching `code`. Must be used within {@link Tabs}.
+ */
 export const Tab = forwardRef((props, ref) => {
   const {
     code,

package/Tabs/components/Tab/types.d.ts

@@ -1,9 +1,15 @@
 import type { ReactNode } from 'react';
 import type { TabCode } from '../../types';
+/** Props of {@link Tab} — all `<div>` attributes plus the tab-specific ones. */
 export type TabProps = Omit<JSX.IntrinsicElements['div'], 'ref' | 'onClick'> & Readonly<{
+    /** Identifier matching the {@link TabPanel} this tab activates. */
     code: TabCode;
+    /** Fires with this tab's code when it is activated. */
     onActivate?: (code: TabCode) => void;
+    /** Disable the tab (not clickable). */
     isDisabled?: boolean;
+    /** Show a "new" marker on the tab. */
     isNew?: boolean;
+    /** Leading icon. */
     icon?: ReactNode;
 }>;

package/Tabs/components/TabBar/TabBar.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Horizontal, scrollable row of {@link Tab}s with an optional title.
+ */
 export declare const TabBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
     title?: import("react").ReactNode;
 }> & import("react").RefAttributes<HTMLDivElement>>;

package/Tabs/components/TabBar/TabBar.js

@@ -3,6 +3,9 @@ import { forwardRef } from 'react';
 import { H4 } from '@pushwoosh/kit-typography';
 import { TabBarTitleBox, TabBarContainer } from './styles';
 import { TabBarScrollableFrame } from '../TabBarScrollableFrame';
+/**
+ * Horizontal, scrollable row of {@link Tab}s with an optional title.
+ */
 export const TabBar = forwardRef((props, ref) => {
   const {
     children,

package/Tabs/components/TabBar/types.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+/** Props of {@link TabBar} — all `<div>` attributes plus an optional title. */
 export type TabBarProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & Readonly<{
+    /** Optional heading shown before the tabs. */
     title?: ReactNode;
 }>;

package/Tabs/components/TabPanel/TabPanel.d.ts

@@ -1,3 +1,7 @@
 import { type FC } from 'react';
 import type { TabPanelProps } from './types';
+/**
+ * Content shown when the {@link Tab} with the matching `code` is active; renders
+ * `null` otherwise. Must be used within {@link Tabs}.
+ */
 export declare const TabPanel: FC<TabPanelProps>;

package/Tabs/components/TabPanel/TabPanel.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TabPanelContainer } from './styles';
 import { useTabsContext } from '../../context';
+/**
+ * Content shown when the {@link Tab} with the matching `code` is active; renders
+ * `null` otherwise. Must be used within {@link Tabs}.
+ */
 export const TabPanel = props => {
   const {
     code,

package/Tabs/components/TabPanel/types.d.ts

@@ -1,6 +1,9 @@
 import type { ElementType, PropsWithChildren } from 'react';
 import type { TabCode } from '../../types';
+/** Props of {@link TabPanel}. */
 export type TabPanelProps = PropsWithChildren<Readonly<{
+    /** Identifier matching the {@link Tab} that reveals this panel. */
     code: TabCode;
+    /** Custom wrapper element/component (default an internal container). */
     container?: ElementType;
 }>>;

package/Tabs/components/Tabs/Tabs.d.ts

@@ -1,3 +1,14 @@
 import { type ReactElement } from 'react';
 import type { TabsProps } from './types';
+/**
+ * Controlled tabs container providing the active-tab context. Compose with
+ * {@link TabBar}/{@link Tab} for the headers and {@link TabPanel} for the content.
+ *
+ * @example
+ * <Tabs activeCode={tab} onChange={setTab}>
+ *   <TabBar><Tab code="a">A</Tab><Tab code="b">B</Tab></TabBar>
+ *   <TabPanel code="a">First</TabPanel>
+ *   <TabPanel code="b">Second</TabPanel>
+ * </Tabs>
+ */
 export declare function Tabs(props: TabsProps): ReactElement;

package/Tabs/components/Tabs/Tabs.js

@@ -2,6 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { TabsContainer } from './styles';
 import { TabContext } from '../../context';
+/**
+ * Controlled tabs container providing the active-tab context. Compose with
+ * {@link TabBar}/{@link Tab} for the headers and {@link TabPanel} for the content.
+ *
+ * @example
+ * <Tabs activeCode={tab} onChange={setTab}>
+ *   <TabBar><Tab code="a">A</Tab><Tab code="b">B</Tab></TabBar>
+ *   <TabPanel code="a">First</TabPanel>
+ *   <TabPanel code="b">Second</TabPanel>
+ * </Tabs>
+ */
 export function Tabs(props) {
   const {
     activeCode: activeTabCode,

package/Tabs/components/Tabs/types.d.ts

@@ -1,7 +1,11 @@
 import type { ElementType, PropsWithChildren } from 'react';
 import { type TabCode } from '../../types';
+/** Props of {@link Tabs}. */
 export type TabsProps = PropsWithChildren<Readonly<{
+    /** Currently active tab code (controlled). */
     activeCode: TabCode;
+    /** Fires with the newly activated tab code. */
     onChange: (code: TabCode) => void;
+    /** Custom wrapper element/component (default an internal container). */
     container?: ElementType;
 }>>;

package/Tabs/types.d.ts

@@ -1,5 +1,9 @@
+/** Identifier of a tab, shared between a {@link Tab} and its {@link TabPanel}. */
 export type TabCode = string | number;
+/** Value of the Tabs context: the active tab code and its setter. */
 export type TabContextType = {
+    /** Currently active tab code. */
     activeTabCode: TabCode;
+    /** Activates the tab with the given code. */
     setActiveTabCode: (code: TabCode) => void;
 };

package/Toast/Toast.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from 'react';
 import type { ToastProps } from './types';
+/**
+ * Presentational toast notification (portaled to `body`). Usually rendered by
+ * {@link ToastProvider}; trigger it imperatively via {@link useToast} instead of
+ * mounting this directly.
+ */
 export declare function Toast(props: ToastProps): ReactElement;

package/Toast/Toast.js

@@ -40,6 +40,11 @@ function getIconByType(type) {
       });
   }
 }
+/**
+ * Presentational toast notification (portaled to `body`). Usually rendered by
+ * {@link ToastProvider}; trigger it imperatively via {@link useToast} instead of
+ * mounting this directly.
+ */
 export function Toast(props) {
   const {
     open,

package/Toast/ToastProvider.d.ts

@@ -1,3 +1,10 @@
 import type { ToastContextProps, ToastProviderProps } from './types';
 export declare const ToastContext: import("react").Context<ToastContextProps | null>;
+/**
+ * Provides the toast context and renders the single shared {@link Toast}. Wrap your
+ * app once, then call {@link useToast} from anywhere inside.
+ *
+ * @example
+ * <ToastProvider><App /></ToastProvider>
+ */
 export declare const ToastProvider: ({ children }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/Toast/ToastProvider.js

@@ -3,6 +3,13 @@ import { useState, useMemo, useCallback, createContext } from 'react';
 import { DEFAULT_DURATION } from './constants';
 import { Toast } from './Toast';
 export const ToastContext = createContext(null);
+/**
+ * Provides the toast context and renders the single shared {@link Toast}. Wrap your
+ * app once, then call {@link useToast} from anywhere inside.
+ *
+ * @example
+ * <ToastProvider><App /></ToastProvider>
+ */
 export const ToastProvider = ({
   children
 }) => {

package/Toast/hooks.d.ts

@@ -1,2 +1,10 @@
 import type { ToastContextProps } from './types';
+/**
+ * Returns `{ openToast, closeToast }` for showing toasts. Must be used within a
+ * {@link ToastProvider}, otherwise it throws.
+ *
+ * @example
+ * const { openToast } = useToast();
+ * openToast({ title: 'Saved', type: 'success' });
+ */
 export declare const useToast: () => ToastContextProps;

package/Toast/hooks.js

@@ -1,5 +1,13 @@
 import { useContext } from 'react';
 import { ToastContext } from './ToastProvider';
+/**
+ * Returns `{ openToast, closeToast }` for showing toasts. Must be used within a
+ * {@link ToastProvider}, otherwise it throws.
+ *
+ * @example
+ * const { openToast } = useToast();
+ * openToast({ title: 'Saved', type: 'success' });
+ */
 export const useToast = () => {
   const context = useContext(ToastContext);
   if (!context) {

package/Toast/types.d.ts

@@ -1,30 +1,54 @@
 import type { ReactNode } from 'react';
+/** Severity of a toast, driving its icon and color. */
 export type ToastType = 'info' | 'success' | 'warning' | 'error';
+/** Fully-resolved toast model held by the provider. */
 export type ToastParams = {
+    /** Toast heading. */
     title: string;
+    /** Optional secondary text. */
     description?: ReactNode;
+    /** Auto-dismiss delay in ms, or `false` to stay until closed. */
     duration: number | false;
+    /** Severity. */
     type: ToastType;
+    /** Optional action button caption. */
     buttonText?: string;
+    /** Fires when the action button is clicked. */
     onButtonClick?: () => void;
 };
+/** Arguments for {@link ToastContextProps.openToast}; most fields default. */
 export type OpenToastParams = {
+    /** Toast heading. */
     title: string;
+    /** Optional secondary text. */
     description?: ReactNode;
+    /** Auto-dismiss delay in ms, or `false` to stay until closed (default applied by the provider). */
     duration?: number | false;
+    /** Severity (default `info`). */
     type?: ToastType;
+    /** Optional action button caption. */
     buttonText?: string;
+    /** Fires when the action button is clicked. */
     onButtonClick?: () => void;
 };
+/** Value returned by {@link useToast}. */
 export interface ToastContextProps {
+    /** Show a toast with the given params. */
     openToast: (params: OpenToastParams) => void;
+    /** Hide the current toast. */
     closeToast: () => void;
 }
+/** Props of {@link ToastProvider}. */
 export interface ToastProviderProps {
+    /** App subtree that can call {@link useToast}. */
     children: ReactNode;
 }
+/** Props of the presentational {@link Toast}. */
 export interface ToastProps {
+    /** Whether the toast is visible. */
     open: boolean;
+    /** Toast content to render. */
     toast: ToastParams;
+    /** Fires when the close button is clicked. */
     onClose: () => void;
 }

package/Tooltip/Tooltip.d.ts

@@ -1,3 +1,10 @@
 import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
+/**
+ * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
+ * position and width. Use {@link TooltipTrigger} for a standalone help icon.
+ *
+ * @example
+ * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
+ */
 export declare function Tooltip({ position, arrowOffset, offset, maxWidth, zIndex, isDisabled, isVisible, ...rest }: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TooltipPositionToArrowOffsetMap, TooltipPositionToTippyOffsetMap, TooltipPositionToTippyPlacementMap } from './maps';
 import { TooltipBox } from './styles';
+/**
+ * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
+ * position and width. Use {@link TooltipTrigger} for a standalone help icon.
+ *
+ * @example
+ * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
+ */
 export function Tooltip({
   position = 'top-start',
   arrowOffset = TooltipPositionToArrowOffsetMap[position],

package/Tooltip/TooltipTrigger.d.ts

@@ -1,10 +1,23 @@
 import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
+/** Icon style of a {@link TooltipTrigger}. */
 export type TooltipTriggerView = 'question' | 'info' | 'warning' | 'error';
+/** Props of {@link TooltipTrigger} — {@link TooltipProps} plus the icon controls. */
 export type TooltipTriggerProps = TooltipProps & {
+    /** Padding around the icon. */
     padding?: string | number;
+    /** Icon size (default `small`). */
     size?: 'small' | 'medium';
+    /** Apply the hover color (default `true`). */
     hover?: boolean;
+    /** Which icon to render. */
     view: TooltipTriggerView;
 };
+/**
+ * Standalone help/info icon that shows a {@link Tooltip} on hover — no need to provide
+ * your own anchor element.
+ *
+ * @example
+ * <TooltipTrigger view="question" content="What this field means" />
+ */
 export declare function TooltipTrigger({ padding, view, size, hover, ...tooltipProps }: TooltipTriggerProps): ReactElement;

package/Tooltip/TooltipTrigger.js

@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TooltipTriggerViewMap } from './maps';
 import { HelpIconWrapper } from './styles';
 import { Tooltip } from './Tooltip';
+/**
+ * Standalone help/info icon that shows a {@link Tooltip} on hover — no need to provide
+ * your own anchor element.
+ *
+ * @example
+ * <TooltipTrigger view="question" content="What this field means" />
+ */
 export function TooltipTrigger({
   padding = 0,
   view,