@fanvue/ui 1.2.0 → 1.2.1

package/dist/index.d.ts

@@ -15,133 +15,204 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
+/**
+ * Displays a contextual feedback message to the user.
+ *
+ * Supports `info`, `success`, `warning`, and `error` variants with an optional
+ * icon, title, description, and dismiss button.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="success" title="Saved" closable onClose={handleClose}>
+ *   Your changes have been saved.
+ * </Alert>
+ * ```
+ */
 export declare const Alert: React_2.ForwardRefExoticComponent<AlertProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface AlertProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Visual style variant of the alert (matches Figma "Variant" property) */
+    /** Visual style variant of the alert. @default "info" */
     variant?: AlertVariant;
-    /** Optional title text (bold) */
+    /** Optional title text displayed in bold above the description. */
     title?: string;
-    /** Left icon element */
+    /** Icon element displayed at the leading edge of the alert. */
     icon?: React_2.ReactNode;
-    /** Show close button */
+    /** Whether to show the close button. @default false */
     closable?: boolean;
-    /** Callback when close button is clicked */
+    /** Callback fired when the close button is clicked. */
     onClose?: () => void;
     /** Accessible label for the close button. @default "Close alert" */
     closeLabel?: string;
 }
 
+/** Visual style variant of the alert. */
 export declare type AlertVariant = "info" | "success" | "warning" | "error";
 
+/** A right-pointing arrow icon (20 × 20). */
 export declare const ArrowRightIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A diagonal up-right arrow icon, commonly used for external links (20 × 20). */
 export declare const ArrowUpRightIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Displays a user avatar with optional online indicator, platinum border, and
+ * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own
+ * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/photo.jpg" alt="Jane Doe" fallback="JD" size={48} />
+ * ```
+ */
 export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */
 export declare const AvatarFallback: React_2.ForwardRefExoticComponent<AvatarFallbackProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/** Props for the {@link AvatarFallback} compound component. */
 export declare interface AvatarFallbackProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
 }
 
+/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */
 export declare const AvatarImage: React_2.ForwardRefExoticComponent<AvatarImageProps & React_2.RefAttributes<HTMLImageElement>>;
 
+/** Props for the {@link AvatarImage} compound component. */
 export declare interface AvatarImageProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
 }
 
 export declare interface AvatarProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, AvatarStyleProps {
-    /** URL of the avatar image */
+    /** URL of the avatar image. */
     src?: string;
-    /** Alt text for the avatar image */
+    /** Alt text for the avatar image. @default "Avatar" */
     alt?: string;
-    /** Fallback content (initials, icon, etc.) */
+    /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */
     fallback?: React_2.ReactNode;
 }
 
+/**
+ * Low-level avatar root for custom compositions. Provides size context to
+ * child `AvatarImage` and `AvatarFallback` components.
+ *
+ * Prefer the higher-level {@link Avatar} component for most use cases.
+ */
 export declare const AvatarRoot: React_2.ForwardRefExoticComponent<AvatarRootProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/** Props for the low-level {@link AvatarRoot} compound component. */
 export declare interface AvatarRootProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, AvatarStyleProps {
 }
 
+/** Allowed pixel sizes for the avatar. */
 export declare type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;
 
-/** Shared avatar styling props */
+/** Shared avatar styling props. */
 declare interface AvatarStyleProps {
-    /** Size variant of the avatar (matches Figma "Size" property) */
+    /** Pixel size of the avatar. @default 40 */
     size?: AvatarSize;
-    /** Show online status indicator */
+    /** Whether to show the online-status indicator dot. @default false */
     onlineIndicator?: boolean;
-    /** Show platinum gradient border (matches Figma "Platinum show" property) */
+    /** Whether to show the platinum gradient border ring. @default false */
     platinumShow?: boolean;
-    /** Show NSFW blur filter (matches Figma "NSFW show" property) */
+    /** Whether to apply the NSFW blur filter over the image. @default false */
     NSFWShow?: boolean;
 }
 
+/**
+ * A small inline label for status, category, or metadata information.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * ```
+ */
 export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Visual style variant of the badge */
+    /** Visual style variant of the badge. @default "default" */
     variant?: BadgeVariant;
-    /** Show left status indicator dot */
+    /** Whether to show a coloured status dot at the leading edge. @default true */
     leftDot?: boolean;
-    /** Left icon element */
+    /** Icon element displayed before the label. */
     leftIcon?: React_2.ReactNode;
-    /** Right icon element */
+    /** Icon element displayed after the label. */
     rightIcon?: React_2.ReactNode;
-    /** Render as a different element using Radix Slot */
+    /** Merge props onto a child element instead of rendering a `<span>`. @default false */
     asChild?: boolean;
 }
 
+/** Visual style variant of the badge. */
 export declare type BadgeVariant = "default" | "dark" | "success" | "warning" | "error" | "special" | "info" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
 
+/**
+ * A versatile button component with multiple visual variants, sizes, icon
+ * slots, loading state, and optional pricing display.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="brand" size="40" leftIcon={<StarIcon />}>
+ *   Subscribe
+ * </Button>
+ * ```
+ */
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Visual style variant of the button */
+    /** Visual style variant of the button. @default "primary" */
     variant?: ButtonVariant;
-    /** Size of the button in pixels */
+    /** Height of the button in pixels. @default "48" */
     size?: ButtonSize;
-    /** Left icon element */
+    /** Icon element displayed before the label. */
     leftIcon?: React_2.ReactNode;
-    /** Right icon element */
+    /** Icon element displayed after the label. */
     rightIcon?: React_2.ReactNode;
-    /** Show loading spinner */
+    /** When `true`, replaces the label with a spinner and disables interaction. @default false */
     loading?: boolean;
-    /** Render as a different element using Radix Slot */
+    /** Merge props onto a child element instead of rendering a `<button>`. @default false */
     asChild?: boolean;
-    /** Old price shown with strikethrough before the current price */
+    /** Old price shown with a strikethrough before the current price. */
     discount?: string;
-    /** Current price shown inside the button after the label/icons */
+    /** Current price shown inside the button after the label and icons. */
     price?: string;
 }
 
+/** Button height in pixels. */
 export declare type ButtonSize = "48" | "40" | "32" | "24";
 
+/** Visual style variant of the button. */
 export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "brand" | "destructive" | "white" | "tertiaryDestructive" | "text";
 
 /**
- * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for form library
- * compatibility. Libraries like react-hook-form call `register()` which expects an `HTMLInputElement`
- * ref. A hidden `<input>` is synced to the Radix checkbox state via `useImperativeHandle`.
+ * A checkbox input with optional label and helper text. Supports checked,
+ * unchecked, and indeterminate states.
+ *
+ * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for
+ * form-library compatibility — libraries like react-hook-form call `register()`
+ * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the
+ * Radix checkbox state via `useImperativeHandle`.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms" helperText="Required to continue" />
+ * ```
  */
 export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "asChild"> {
-    /** Size variant for label and helper text */
+    /** Size variant that controls label and helper text typography. @default "default" */
     size?: CheckboxSize;
-    /** Label text displayed next to the checkbox */
+    /** Label text displayed next to the checkbox. */
     label?: string;
-    /** Helper text displayed below the label */
+    /** Descriptive text displayed below the label. */
     helperText?: string;
 }
 
+/** Size variant controlling label and helper text typography. */
 export declare type CheckboxSize = "default" | "small";
 
+/** A checkmark inside a filled circle icon (20 × 20). */
 export declare const CheckCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -151,173 +222,270 @@ export declare const CheckIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A left-pointing chevron icon (20 × 20). */
 export declare const ChevronLeftIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A right-pointing chevron icon (20 × 20). */
 export declare const ChevronRightIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A compact element for filters, tags, or toggleable actions. When an `onClick`
+ * handler is provided, the chip renders as an interactive `<button>` with
+ * `aria-pressed` support.
+ *
+ * @example
+ * ```tsx
+ * <Chip selected onClick={toggle}>Music</Chip>
+ * ```
+ */
 export declare const Chip: React_2.ForwardRefExoticComponent<ChipProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface ChipProps extends React_2.HTMLAttributes<HTMLElement> {
-    /** Visual shape variant of the chip */
+    /** Visual variant of the chip. @default "rounded" */
     variant?: ChipVariant;
-    /** Size of the chip */
+    /** Height of the chip in pixels. @default "32" */
     size?: ChipSize;
-    /** Whether the chip is in a selected state */
+    /** Whether the chip is in a selected (pressed) state. @default false */
     selected?: boolean;
-    /** Whether the chip is disabled */
+    /** Whether the chip is disabled. @default false */
     disabled?: boolean;
-    /** Show left status dot */
+    /** Whether to show a coloured status dot at the leading edge. @default false */
     leftDot?: boolean;
-    /** Left icon element */
+    /** Icon element displayed before the label. */
     leftIcon?: React_2.ReactNode;
-    /** Right icon element */
+    /** Icon element displayed after the label. */
     rightIcon?: React_2.ReactNode;
-    /** Notification badge content (e.g., "99+"). Passed as a string for i18n support. */
+    /** Notification badge content (e.g. `"99+"`). Passed as a string for i18n support. */
     notificationLabel?: string;
-    /** Click handler — when provided, the chip renders as a `<button>` for accessibility */
+    /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */
     onClick?: React_2.MouseEventHandler<HTMLElement>;
-    /** Render as a different element using Radix Slot */
+    /** Merge props onto a child element instead of rendering a wrapper. @default false */
     asChild?: boolean;
 }
 
+/** Height of the chip in pixels. */
 export declare type ChipSize = "32" | "40";
 
+/** Visual variant of the chip. */
 export declare type ChipVariant = "rounded" | "square" | "dark";
 
+/** A close/dismiss "×" icon with rounded stroke ends (20 × 20). */
 export declare const CloseIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
 export declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * A numeric badge typically used for notification counts. Automatically
+ * truncates values above `max` (e.g. `"99+"`). Renders nothing when the
+ * value is `0` and no children are provided.
+ *
+ * @example
+ * ```tsx
+ * <Count value={5} variant="brand" />
+ * ```
+ */
 export declare const Count: React_2.ForwardRefExoticComponent<CountProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface CountProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Visual style variant of the count */
+    /** Colour variant of the count badge. @default "default" */
     variant?: CountVariant;
-    /** The count value to display */
+    /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */
     value?: number;
-    /** Maximum value to display before showing overflow (e.g., "99+") */
+    /** Maximum value before showing overflow (e.g. `"99+"`). @default 99 */
     max?: number;
-    /** Render as a different element using Radix Slot */
+    /** Merge props onto a child element instead of rendering a `<span>`. @default false */
     asChild?: boolean;
 }
 
+/** Colour variant for the count badge. */
 export declare type CountVariant = "default" | "brand" | "pink" | "info" | "success" | "warning";
 
+/** A compact "×" cross icon (20 × 20). */
 export declare const CrossIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A crown icon used for premium/VIP indicators (20 × 20). */
 export declare const CrownIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A calendar date picker supporting single-date and date-range selection with
+ * optional side-by-side month display and footer action buttons.
+ *
+ * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all
+ * `DayPickerProps` (except `numberOfMonths`) are forwarded.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   mode="range"
+ *   type="double"
+ *   selected={range}
+ *   onSelect={setRange}
+ *   onApply={save}
+ *   onCancel={close}
+ * />
+ * ```
+ */
 export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
 
+/** Props specific to the DatePicker wrapper (not inherited from react-day-picker). */
 export declare interface DatePickerOwnProps {
     /** Display one month or two side-by-side. @default "single" */
-    type?: DatePickerType;
-    /** Called when the Apply button is clicked. */
+    variant?: DatePickerVariant;
+    /** Callback fired when the Apply button is clicked. */
     onApply?: () => void;
-    /** Called when the Cancel button is clicked. */
+    /** Callback fired when the Cancel button is clicked. */
     onCancel?: () => void;
     /** Label for the cancel button. @default "Cancel" */
     cancelLabel?: string;
     /** Label for the apply button. @default "Apply" */
     applyLabel?: string;
-    /** Whether to render cancel / apply footer buttons. @default true */
+    /** Whether to render the cancel / apply footer buttons. @default true */
     showFooter?: boolean;
-    /** Additional className for the outer container. */
+    /** Additional CSS class name for the outer container. */
     className?: string;
 }
 
+/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */
 export declare type DatePickerProps = DatePickerOwnProps & OmitDistributed<DayPickerProps, "numberOfMonths">;
 
-export declare type DatePickerType = "single" | "double";
+/** Layout variant — single or side-by-side month display. */
+export declare type DatePickerVariant = "single" | "double";
 
 export { DateRange }
 
+/**
+ * A horizontal separator used to divide content sections. Optionally displays a
+ * centred text label between two lines.
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider label="or" />
+ * ```
+ */
 export declare const Divider: React_2.ForwardRefExoticComponent<DividerProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface DividerProps extends React_2.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
-    /** Custom label to display*/
+    /** Optional centred label text. When provided, the divider renders as two lines with the label between them. */
     label?: string;
 }
 
+/** An "×" inside a filled circle icon for error states (20 × 20). */
 export declare const ErrorCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** An exclamation mark inside a filled circle icon for error/alert states (20 × 20). */
 export declare const ErrorIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & default_2.RefAttributes<SVGSVGElement>>;
 
+/** An eye icon for visibility/show actions (20 × 20). */
 export declare const EyeIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A flame/fire icon for trending or popular content (20 × 20). */
 export declare const FireIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A house icon for home/dashboard navigation (20 × 20). */
 export declare const HomeIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A circular button containing only an icon. Use when an action can be
+ * represented by an icon alone (e.g. close, send, mic). Pair with an
+ * `aria-label` for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <IconButton icon={<CloseIcon />} aria-label="Close" variant="tertiary" />
+ * ```
+ */
 export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface IconButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Visual style variant of the icon button */
+    /** Visual style variant of the icon button. @default "primary" */
     variant?: IconButtonVariant;
-    /** Size of the button */
+    /** Size of the button in pixels. @default "40" */
     size?: IconButtonSize;
-    /** Icon element to display */
+    /** Icon element to render inside the button. */
     icon: React_2.ReactNode;
-    /** Counter value to display */
+    /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */
     counterValue?: number;
 }
 
+/** Icon button size in pixels. */
 export declare type IconButtonSize = "24" | "32" | "40" | "52" | "72";
 
+/** Visual style variant of the icon button. */
 export declare type IconButtonVariant = "primary" | "secondary" | "tertiary" | "brand" | "contrast" | "messaging" | "navTray" | "tertiaryDestructive" | "stop" | "microphone";
 
-/** Icon component props. Override default size via className (e.g. className="size-6"). */
+/**
+ * Shared props for all icon components. Extends standard SVG attributes.
+ *
+ * Each icon ships with a default size class (e.g. `size-5`). Override it via
+ * `className` (e.g. `className="size-6"`).
+ */
 export declare type IconProps = React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 };
 
+/** An "i" inside a filled circle icon for informational tooltips (20 × 20). */
 export declare const InfoCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** An info icon with exclamation-style "i" in a circle (20 × 20). */
 export declare const InfoIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & default_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only,
+ * and portrait (stacked) layouts with multiple colour schemes.
+ *
+ * @example
+ * ```tsx
+ * <Logo type="full" color="fullColour" />
+ * ```
+ */
 export declare const Logo: React_2.ForwardRefExoticComponent<LogoProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Colour scheme of the logo. */
 export declare type LogoColor = "fullColour" | "decolour" | "whiteAlways" | "blackAlways";
 
 export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Logo layout type (matches Figma "Type" property) */
-    type?: LogoType;
-    /** Logo color scheme (matches Figma "Colour" property) */
+    /** Layout variant of the logo. @default "full" */
+    variant?: LogoVariant;
+    /** Colour scheme of the logo. @default "fullColour" */
     color?: LogoColor;
     /**
-     * Accessible label for the logo.
-     * Required when type="Icon" and used in interactive contexts (links, buttons).
-     * @example "Fanvue home" or "Go to homepage"
+     * Accessible label for the logo. Required when `type` is `"icon"` and
+     * the logo is used inside interactive contexts (links, buttons).
+     *
+     * @example "Fanvue home"
      */
     "aria-label"?: string;
 }
 
-export declare type LogoType = "full" | "icon" | "wordmark" | "portrait";
+/** Layout variant of the logo. */
+export declare type LogoVariant = "full" | "icon" | "wordmark" | "portrait";
 
+/** A microphone icon for audio recording actions (40 × 40). */
 export declare const MicrophoneIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -342,309 +510,518 @@ export declare const MinusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
  */
 export declare type OmitDistributed<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
 
+/**
+ * Page navigation control with previous/next buttons and numbered page
+ * indicators. Supports a numbered-buttons layout (`"default"`) and a compact
+ * dots layout (`"dots"`).
+ *
+ * @example
+ * ```tsx
+ * <Pagination totalPages={10} currentPage={page} onPageChange={setPage} />
+ * ```
+ */
 export declare const Pagination: React_2.ForwardRefExoticComponent<PaginationProps & React_2.RefAttributes<HTMLElement>>;
 
 export declare interface PaginationProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "onChange"> {
-    /** Visual style variant */
+    /** Display style — numbered page buttons or minimal dots. @default "default" */
     variant?: PaginationVariant;
-    /** Total number of pages */
+    /** Total number of pages. */
     totalPages: number;
-    /** Current active page (1-indexed) */
+    /** Current active page (1-indexed). */
     currentPage: number;
-    /** Called when the page changes */
+    /** Callback fired when the active page changes. Receives the new 1-indexed page number. */
     onPageChange?: (page: number) => void;
-    /** Label for the nav landmark. @default "Pagination" */
+    /** Accessible label for the `<nav>` landmark. @default "Pagination" */
     ariaLabel?: string;
-    /** Label for the previous button. @default "Previous page" */
+    /** Accessible label for the previous-page button. @default "Previous page" */
     previousLabel?: string;
-    /** Label for the next button. @default "Next page" */
+    /** Accessible label for the next-page button. @default "Next page" */
     nextLabel?: string;
-    /** Generates the aria-label for each page button. @default (page) => \`Page ${page}\` */
+    /** Function that returns an accessible label for each page button. @default (page) => \`Page ${page}\` */
     getPageLabel?: (page: number) => string;
 }
 
+/** Pagination display style — numbered buttons or minimal dots. */
 export declare type PaginationVariant = "default" | "dots";
 
+/**
+ * A small rounded label for categorisation, status, or tagging.
+ *
+ * @example
+ * ```tsx
+ * <Pill variant="brand">New</Pill>
+ * ```
+ */
 export declare const Pill: React_2.ForwardRefExoticComponent<PillProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface PillProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Visual style variant of the pill */
+    /** Colour variant of the pill. @default "green" */
     variant?: PillVariant;
-    /** Left icon element */
+    /** Icon element displayed before the label. */
     leftIcon?: React_2.ReactNode;
-    /** Right icon element */
+    /** Icon element displayed after the label. */
     rightIcon?: React_2.ReactNode;
-    /** Render as a different element using Radix Slot */
+    /** Merge props onto a child element instead of rendering a `<span>`. @default false */
     asChild?: boolean;
 }
 
+/** Colour variant of the pill. */
 export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "brand" | "brandLight" | "beta" | "error";
 
+/** A "+" plus icon for add/create actions (20 × 20). */
 export declare const PlusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A horizontal progress indicator with optional title, completion percentage,
+ * step count, and helper text. The bar colour reflects progress when using the
+ * `"default"` variant.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={65} title="Upload" showCompletion />
+ * ```
+ */
 export declare const ProgressBar: React_2.ForwardRefExoticComponent<ProgressBarProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Current progress value (0-100) */
+    /** Current progress value, clamped to 0–100. */
     value: number;
-    /** Size variant - "default" (12px track) or "small" (6px track) */
+    /** Track height — `"default"` (12px) or `"small"` (6px). @default "default" */
     size?: ProgressBarSize;
-    /** Color variant - "default" uses color-coded progress, "generic" always green */
+    /** Colour mode — `"default"` is colour-coded by value, `"generic"` always uses brand green. @default "default" */
     variant?: ProgressBarVariant;
-    /** Title content shown at top left */
+    /** Title content shown at the top-left of the bar. */
     title?: React_2.ReactNode;
-    /** Show the completion percentage at top */
+    /** Whether to display the completion percentage above the track. @default false */
     showCompletion?: boolean;
-    /** Steps label shown at top right (e.g. "2/8 steps") */
+    /** Steps label shown at the top-right (e.g. `"2/8 steps"`). */
     stepsLabel?: React_2.ReactNode;
-    /** Helper content at bottom left */
+    /** Helper content at the bottom-left of the bar. */
     helperLeft?: React_2.ReactNode;
-    /** Helper content at bottom right */
+    /** Helper content at the bottom-right of the bar. */
     helperRight?: React_2.ReactNode;
-    /** Icon shown at bottom left before helper text */
+    /** Icon shown at the bottom-left before the helper text. */
     leftIcon?: React_2.ReactNode;
-    /** Accessible label for the progress bar (defaults to "Progress"). Use this for i18n. */
+    /** Accessible label for the `progressbar` role. @default "Progress" */
     ariaLabel?: string;
 }
 
+/** Track height — `"default"` (12px) or `"small"` (6px). */
 export declare type ProgressBarSize = "default" | "small";
 
+/** Colour mode — `"default"` uses red/yellow/green by value, `"generic"` always uses brand green. */
 export declare type ProgressBarVariant = "default" | "generic";
 
+/**
+ * A single radio option within a {@link RadioGroup}. Includes an optional label
+ * and helper text.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a" label="Option A" />
+ *   <Radio value="b" label="Option B" />
+ * </RadioGroup>
+ * ```
+ */
 export declare const Radio: React_2.ForwardRefExoticComponent<RadioProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Groups {@link Radio} items into a single controlled or uncontrolled selection.
+ * Built on Radix UI `RadioGroup.Root`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <Radio value="a" label="Option A" />
+ *   <Radio value="b" label="Option B" />
+ * </RadioGroup>
+ * ```
+ */
 export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Props for the {@link RadioGroup} component. Extends the Radix `RadioGroup.Root` props. */
 export declare type RadioGroupProps = React_2.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
 
 export declare interface RadioProps extends Omit<React_2.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild"> {
-    /** Size variant of the radio button */
+    /** Size variant controlling label and helper text typography. @default "default" */
     size?: "default" | "small";
-    /** Label text for the radio button */
+    /** Label text displayed next to the radio button. */
     label?: string;
-    /** Optional helper text displayed below the label */
+    /** Descriptive text displayed below the label. */
     helperText?: string;
 }
 
+/**
+ * A range input for selecting one or more numeric values along a track.
+ * Supports single and multi-thumb modes, optional labels, and a value tooltip.
+ *
+ * Built on Radix UI `Slider`.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   defaultValue={[50]}
+ *   showTooltip
+ * />
+ * ```
+ */
 export declare const Slider: React_2.ForwardRefExoticComponent<SliderProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/** Position of the slider label relative to the track. */
 export declare type SliderLabelPosition = "top" | "left";
 
 export declare interface SliderProps extends Omit<React_2.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "asChild" | "children"> {
-    /** Label text displayed alongside the slider */
+    /** Label text displayed alongside the slider. */
     label?: string;
-    /** Position of the label relative to the slider track */
+    /** Position of the label relative to the slider track. @default "top" */
     labelPosition?: SliderLabelPosition;
-    /** Text shown at the minimum end of the track */
+    /** Text shown at the minimum end of the track. */
     minLabel?: string;
-    /** Text shown at the maximum end of the track */
+    /** Text shown at the maximum end of the track. */
     maxLabel?: string;
-    /** Whether to show a tooltip with the current value above the thumb */
+    /** Whether to show a tooltip with the current value above the thumb. @default false */
     showTooltip?: boolean;
-    /** Override the displayed tooltip value (e.g. for formatting) */
+    /** Custom formatter for the tooltip value (e.g. to add units or format numbers). */
     formatTooltip?: (value: number) => string;
 }
 
+/**
+ * A prominent inline message with optional title, description, action buttons,
+ * and close control. Supports three layout variants: `default`, `vipEarn`, and
+ * `welcome`.
+ *
+ * @example
+ * ```tsx
+ * <Snackbar
+ *   variant="default"
+ *   primaryLabel="Undo"
+ *   primaryOnClick={undo}
+ *   closable
+ *   onClose={dismiss}
+ * >
+ *   Item deleted
+ * </Snackbar>
+ * ```
+ */
 export declare const Snackbar: React_2.ForwardRefExoticComponent<SnackbarProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface SnackbarProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Snackbar layout variant */
+    /** Layout variant of the snackbar. @default "default" */
     variant?: SnackbarVariant;
-    /** Left icon element */
+    /** Icon element displayed at the leading edge (used by the `vipEarn` variant). */
     icon?: React_2.ReactNode;
-    /** Title text */
+    /** Title content. */
     title?: React_2.ReactNode;
-    /** Description text */
+    /** Descriptive body text. */
     description?: React_2.ReactNode;
-    /** Whether to show the actions section */
+    /** Whether to show primary/secondary action buttons. @default true */
     showActions?: boolean;
-    /** Primary CTA label (renders a default Button) */
+    /** Primary CTA label — renders a default {@link Button}. */
     primaryLabel?: string;
-    /** Primary CTA click handler (used with primaryLabel) */
+    /** Click handler for the primary CTA (used together with `primaryLabel`). */
     primaryOnClick?: () => void;
-    /** Custom element to render as primary CTA (overrides primaryLabel/primaryOnClick) */
+    /** Custom element rendered as the primary CTA. Overrides `primaryLabel` / `primaryOnClick`. */
     primarySlot?: React_2.ReactNode;
-    /** Secondary CTA label (renders a default Button) */
+    /** Secondary CTA label — renders a default {@link Button}. */
     secondaryLabel?: string;
-    /** Secondary CTA click handler (used with secondaryLabel) */
+    /** Click handler for the secondary CTA (used together with `secondaryLabel`). */
     secondaryOnClick?: () => void;
-    /** Custom element to render as secondary CTA (overrides secondaryLabel/secondaryOnClick) */
+    /** Custom element rendered as the secondary CTA. Overrides `secondaryLabel` / `secondaryOnClick`. */
     secondarySlot?: React_2.ReactNode;
-    /** Show close button */
+    /** Whether to show the close button. @default false */
     closable?: boolean;
-    /** Close button click handler */
+    /** Callback fired when the close button is clicked. */
     onClose?: () => void;
     /** Accessible label for the close button. @default "Close snackbar" */
     closeLabel?: string;
 }
 
+/** Layout variant of the snackbar. */
 export declare type SnackbarVariant = "default" | "vipEarn" | "welcome";
 
+/** A circular spinner icon for loading states (20 × 20). Pair with a CSS `animate-spin` class. */
 export declare const SpinnerIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A filled-square stop icon for media/recording controls (40 × 40). */
 export declare const StopIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A checkmark inside a filled circle icon for success states (20 × 20). */
 export declare const SuccessIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & default_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A toggle switch for boolean on/off states. Built on Radix UI `Switch`.
+ *
+ * For a labelled switch with helper text, see {@link SwitchField}.
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={on} onCheckedChange={setOn} />
+ * ```
+ */
 export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * A labelled switch field with optional helper text and info tooltip. Composes
+ * the {@link Switch} component with a `<label>` and description.
+ *
+ * @example
+ * ```tsx
+ * <SwitchField
+ *   label="Notifications"
+ *   helperText="Receive push notifications"
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ * />
+ * ```
+ */
 export declare const SwitchField: React_2.ForwardRefExoticComponent<SwitchFieldProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/** Side on which the switch toggle is positioned relative to the label. */
 export declare type SwitchFieldOrientation = "right" | "left";
 
 export declare interface SwitchFieldProps extends Omit<React_2.ComponentPropsWithoutRef<typeof Switch>, "size" | "className"> {
-    /** Position of the switch relative to the label */
+    /** Side on which the switch is placed relative to the label. @default "right" */
     orientation?: SwitchFieldOrientation;
-    /** Size variant of the switch and text */
+    /** Size variant of the switch and accompanying text. @default "default" */
     size?: SwitchSize;
-    /** Label text displayed next to the switch */
+    /** Label text displayed next to the switch. */
     label?: string;
-    /** Helper text displayed below the label */
+    /** Descriptive text displayed below the label. */
     helperText?: string;
-    /** Info tooltip text displayed on hover of the info icon */
+    /** Tooltip text shown when hovering the info icon next to the label. */
     infoText?: string;
     /** Accessible label for the info tooltip trigger button. Override for i18n.
      * @default "More information"
      */
     infoLabel?: string;
-    /** Additional className for the wrapper */
+    /** Additional CSS class name for the outer wrapper. */
     className?: string;
 }
 
 export declare interface SwitchProps extends Omit<React_2.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "asChild"> {
-    /** Size variant of the switch */
+    /** Size variant of the switch. @default "default" */
     size?: SwitchSize;
 }
 
+/** Size variant of the switch toggle. */
 export declare type SwitchSize = "default" | "small";
 
+/**
+ * A binary segmented toggle rendered as a `radiogroup`. The active option is
+ * highlighted with a sliding pill indicator. Supports both controlled and
+ * uncontrolled usage.
+ *
+ * @example
+ * ```tsx
+ * <SwitchToggle
+ *   options={[
+ *     { label: "Monthly", value: "monthly" },
+ *     { label: "Yearly", value: "yearly" },
+ *   ]}
+ *   value={billing}
+ *   onChange={setBilling}
+ * />
+ * ```
+ */
 export declare const SwitchToggle: React_2.ForwardRefExoticComponent<SwitchToggleProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Describes one side of the binary toggle. */
 export declare interface SwitchToggleOption {
-    /** Display label for the option */
+    /** Display label for the option. */
     label: string;
-    /** Value identifier for the option */
+    /** Value identifier returned via `onChange`. */
     value: string;
 }
 
 export declare interface SwitchToggleProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onChange"> {
-    /** Size variant */
+    /** Height of the toggle in pixels. @default "24" */
     size?: SwitchToggleSize;
-    /** The two options to toggle between */
+    /** The two options to toggle between (exactly two required). */
     options: [SwitchToggleOption, SwitchToggleOption];
-    /** Currently selected value */
+    /** Currently selected value (controlled). */
     value?: string;
-    /** Default selected value (uncontrolled) */
+    /** Initially selected value (uncontrolled). */
     defaultValue?: string;
-    /** Callback when the selected value changes */
+    /** Callback fired when the selected value changes. */
     onChange?: (value: string) => void;
-    /** Whether the toggle is disabled */
+    /** Whether the toggle is disabled. @default false */
     disabled?: boolean;
 }
 
+/** Height of the switch toggle in pixels. */
 export declare type SwitchToggleSize = "24" | "32" | "40";
 
+/**
+ * Root container for a tabbed interface. Manages the active tab state and
+ * coordinates {@link TabsList}, {@link TabsTrigger}, and {@link TabsContent}.
+ *
+ * Built on Radix UI `Tabs`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ */
 export declare const Tabs: React_2.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Renders the content panel for a given tab `value`. Only visible when its value matches the active tab. */
 export declare const TabsContent: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Props for the {@link TabsContent} panel component. */
 export declare type TabsContentProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 
+/** Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */
 export declare const TabsList: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Props for the {@link TabsList} component. */
 export declare type TabsListProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 
+/** Props for the {@link Tabs} root component. Extends Radix `Tabs.Root` props. */
 export declare type TabsProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
 
+/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */
 export declare const TabsTrigger: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
+/** Props for the {@link TabsTrigger} button component. */
 export declare type TabsTriggerProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
 
+/**
+ * A text input field with optional label, helper/error text, and icon slots.
+ *
+ * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for
+ * accessibility — a console warning is emitted in development if none are set.
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   placeholder="you@example.com"
+ *   error={!!emailError}
+ *   errorMessage={emailError}
+ * />
+ * ```
+ */
 export declare const TextField: React_2.ForwardRefExoticComponent<TextFieldProps & React_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. Also used as the accessible name. */
     label?: string;
-    /** Helper text displayed below the input */
+    /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */
     helperText?: string;
-    /** Size variant of the text field */
+    /** Height of the text field in pixels. @default "48" */
     size?: TextFieldSize;
-    /** Error state of the text field */
+    /** Whether the text field is in an error state. @default false */
     error?: boolean;
-    /** Error message displayed below the input. Overrides helper text when error is true. */
+    /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */
     errorMessage?: string;
-    /** Icon displayed on the left side of the input */
+    /** Icon element displayed at the left side of the input. */
     leftIcon?: React_2.ReactNode;
-    /** Icon displayed on the right side of the input */
+    /** Icon element displayed at the right side of the input. */
     rightIcon?: React_2.ReactNode;
-    /** Whether the text field should take the full width of its container */
+    /** Whether the text field stretches to fill its container width. @default false */
     fullWidth?: boolean;
 }
 
+/** Text field height in pixels. */
 export declare type TextFieldSize = "48" | "40" | "32";
 
+/**
+ * A dismissible notification that appears temporarily. Supports `info`,
+ * `warning`, `success`, `error`, and `messageToast` variants with optional
+ * action button, close control, and avatar.
+ *
+ * Use inside a {@link ToastProvider} with a {@link ToastViewport}.
+ *
+ * @example
+ * ```tsx
+ * <Toast variant="success" title="Saved" description="Your changes are live." />
+ * ```
+ */
 export declare const Toast: React_2.ForwardRefExoticComponent<ToastProps & React_2.RefAttributes<HTMLLIElement>>;
 
 export declare interface ToastProps extends Omit<Omit<React_2.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, "type">, "title"> {
-    /** Variant of the toast */
+    /** Visual/semantic variant of the toast. @default "info" */
     variant?: ToastVariant;
-    /** Toast title */
+    /** Title text displayed in bold at the top of the toast. */
     title?: string;
-    /** Toast description/message */
+    /** Description or body content displayed below the title. */
     description?: React_2.ReactNode;
-    /** Action button label */
+    /** Label for the optional action button. @default "Action" */
     actionLabel?: string;
-    /** Action button click handler */
+    /** Click handler for the action button. When provided, the action button is rendered. */
     onActionClick?: () => void;
-    /** Show close button */
+    /** Whether to show the close button. @default true */
     showClose?: boolean;
     /** Accessible label for the close button. @default "Close notification" */
     closeLabel?: string;
-    /** Avatar image source */
+    /** Avatar image URL (used by the `messageToast` variant). */
     avatarSrc?: string;
-    /** Avatar alt text */
+    /** Alt text for the avatar image. */
     avatarAlt?: string;
-    /** Avatar fallback text */
+    /** Fallback content for the avatar (e.g. initials). */
     avatarFallback?: string;
 }
 
+/** Provides toast context. Wrap your application (or a subtree) with this provider. */
 export declare const ToastProvider: React_2.FC<ToastProviderProps>;
 
+/** Props for the {@link ToastProvider}. Wraps Radix `Toast.Provider`. */
 export declare interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {
 }
 
+/** Visual/semantic variant of the toast notification. */
 export declare type ToastVariant = "info" | "warning" | "success" | "error" | "messageToast";
 
+/** Fixed-position container that renders active toasts. Place once at the root of your app. */
 export declare const ToastViewport: React_2.ForwardRefExoticComponent<ToastViewportProps & React_2.RefAttributes<HTMLOListElement>>;
 
+/** Props for the {@link ToastViewport}. Controls where toasts are rendered on screen. */
 export declare interface ToastViewportProps extends React_2.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {
 }
 
+/** Root component that manages open/close state for a single tooltip. */
 export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
 
+/** The popup content of the tooltip. Renders inside a portal. */
 export declare const TooltipContent: React_2.ForwardRefExoticComponent<TooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TooltipContentProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
-    /** Whether to show the arrow pointer */
+    /** Whether to show the arrow pointer. @default true */
     showArrow?: boolean;
 }
 
+/** Props for the {@link Tooltip} root component. */
 export declare type TooltipProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
 
+/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */
 export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProviderProps>;
 
+/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */
 export declare type TooltipProviderProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
 
+/** The element that triggers the tooltip on hover/focus. */
 export declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/** Props for the {@link TooltipTrigger} component. */
 export declare type TooltipTriggerProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
 
 /** VIP badge icon with metallic gradient background and crown symbol */
@@ -652,10 +1029,12 @@ export declare const VipBadgeIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/** A filled warning icon with exclamation mark (20 × 20). */
 export declare const WarningIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & default_2.RefAttributes<SVGSVGElement>>;
 
+/** A filled warning-triangle icon with exclamation mark (20 × 20). */
 export declare const WarningTriangleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;