@fanvue/ui 3.7.2 → 3.9.0

package/dist/index.d.ts

@@ -155,18 +155,39 @@ export declare type AIIconProps = BaseIconProps;
 /**
  * Displays a contextual feedback message to the user.
  *
- * Supports `info`, `success`, `warning`, and `error` variants with a default
- * icon per variant, optional title, description, and dismiss button.
+ * Supports `info`, `success`, `warning`, `error`, and `neutral` variants with a
+ * default icon per variant, optional title, description, dismiss button, and an
+ * optional composable `action` slot.
  *
  * Each variant renders a default icon automatically. Pass a custom `icon` to
  * override, or `icon={null}` to hide the icon entirely.
  *
+ * Only the title and description live inside the `role="alert"` live region.
+ * The icon, `action`, and close button are rendered outside it so interactive
+ * controls are announced and navigated consistently by screen readers.
+ *
  * @example
  * ```tsx
  * <Alert variant="success" title="Saved" closable onClose={handleClose}>
  *   Your changes have been saved.
  * </Alert>
  * ```
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="neutral" title="Heads up" action={<a href="/docs">Learn more</a>}>
+ *   A general notice with no specific sentiment.
+ * </Alert>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import Link from "next/link";
+ *
+ * <Alert variant="info" title="Update available" action={<Link href="/changelog">See what's new</Link>}>
+ *   A new version is ready to install.
+ * </Alert>
+ * ```
  */
 export declare const Alert: React_2.ForwardRefExoticComponent<AlertProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -196,10 +217,17 @@ export declare interface AlertProps extends React_2.HTMLAttributes<HTMLDivElemen
     onClose?: () => void;
     /** Accessible label for the close button. @default "Close alert" */
     closeLabel?: string;
+    /**
+     * Composable action slot rendered beneath the description, outside the
+     * `role="alert"` live region. Pass your own element (an `<a>`, a `next/link`
+     * `<Link>`, or a `<Button>`) and it receives the variant-appropriate link
+     * styling via the Radix `Slot` pattern while remaining a real link/button.
+     */
+    action?: React_2.ReactNode;
 }
 
 /** Visual style variant of the alert. */
-export declare type AlertVariant = "info" | "success" | "warning" | "error";
+export declare type AlertVariant = "info" | "success" | "warning" | "error" | "neutral";
 
 /**
  * Apps icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
@@ -596,7 +624,7 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
 }
 
 /** Visual style variant of the badge. */
-export declare type BadgeVariant = "default" | "dark" | "success" | "warning" | "error" | "special" | "info" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
+export declare type BadgeVariant = "default" | "dark" | "success" | "warning" | "error" | "special" | "info" | "successColour" | "warningColour" | "errorColour" | "infoColour" | "aiGenerated" | "negative" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
 
 /**
  * Bank icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
@@ -744,7 +772,7 @@ export declare interface BottomNavigationProps extends React_2.HTMLAttributes<HT
  * @example
  * ```tsx
  * <Breadcrumb>
- *   <BreadcrumbList>
+ *   <BreadcrumbList size="14px">
  *     <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  *     <BreadcrumbSeparator />
  *     <BreadcrumbItem><BreadcrumbPage>Current Page</BreadcrumbPage></BreadcrumbItem>
@@ -775,13 +803,16 @@ export declare interface BreadcrumbLinkProps extends React_2.ComponentPropsWitho
 
 /**
  * Ordered list container for breadcrumb items. Automatically injects a
- * separator between each child item.
+ * separator between each child item and shares the trail {@link BreadcrumbSize}
+ * with its descendants.
  */
 export declare const BreadcrumbList: React_2.ForwardRefExoticComponent<BreadcrumbListProps & React_2.RefAttributes<HTMLOListElement>>;
 
 export declare interface BreadcrumbListProps extends React_2.ComponentPropsWithoutRef<"ol"> {
-    /** Custom separator element rendered between items. @default ChevronRightIcon */
+    /** Custom separator element rendered between items. @default "/" */
     separator?: React_2.ReactNode;
+    /** Text size preset applied to every item in the trail. @default "12px" */
+    size?: BreadcrumbSize;
 }
 
 /**
@@ -799,13 +830,16 @@ export declare interface BreadcrumbProps extends React_2.ComponentPropsWithoutRe
 
 /**
  * Visual separator rendered between breadcrumb items.
- * Renders a right-pointing chevron icon and is hidden from assistive technology.
+ * Renders a `/` glyph by default and is hidden from assistive technology.
  */
 export declare const BreadcrumbSeparator: React_2.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React_2.RefAttributes<HTMLLIElement>>;
 
 export declare interface BreadcrumbSeparatorProps extends React_2.ComponentPropsWithoutRef<"li"> {
 }
 
+/** Text size preset controlling the typography of the whole breadcrumb trail. @default "12px" */
+export declare type BreadcrumbSize = "12px" | "14px" | "16px";
+
 /** Breakpoint values for responsive props. */
 declare type Breakpoint = "sm" | "md" | "lg" | "xl";
 
@@ -1697,8 +1731,9 @@ export declare type DialogCloseProps = React_2.ComponentPropsWithoutRef<typeof D
  * `fixed` positioning still applies; ancestors with `transform` or `overflow` may affect layout.
  *
  * On mobile viewports (<640px), the dialog slides up from the bottom as a sheet
- * with top-only border radius. On larger viewports it renders centered with
- * full border radius.
+ * with top-only border radius by default; pass `mobilePresentation="card"` to
+ * render a centered floating card instead (used for small confirmation dialogs).
+ * On larger viewports it renders centered with full border radius.
  *
  * @example
  * ```tsx
@@ -1741,8 +1776,17 @@ export declare interface DialogContentProps extends React_2.ComponentPropsWithou
      * @default true
      */
     portal?: boolean;
-    /** Show the v2 mobile sheet pull handle. @default true */
+    /** Show the v2 mobile sheet pull handle. Only rendered when `mobilePresentation` is `"sheet"`. @default true */
     showMobileHandle?: boolean;
+    /**
+     * How the dialog presents below the `sm` breakpoint.
+     * - `"sheet"` — bottom sheet pinned to the viewport bottom edge (default)
+     * - `"card"` — centered floating card per the v2-modal confirmation spec:
+     *   16px side margins, 24px padding, 32px radius on all corners, no pull handle
+     *
+     * @default "sheet"
+     */
+    mobilePresentation?: "sheet" | "card";
 }
 
 /** Accessible description for the dialog. Rendered as secondary text. */
@@ -2455,6 +2499,33 @@ export declare const FacebookIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Displays a creator's formatted fan and subscriber counts, each paired with an
+ * icon. Numeric values are compacted (`1200` → `"1.2k"`); pass a pre-formatted
+ * string to bypass formatting. Either group can be hidden independently.
+ *
+ * @example
+ * ```tsx
+ * <FanFollowerCount fans={1200} subs={3000} />
+ * ```
+ */
+export declare const FanFollowerCount: React_2.ForwardRefExoticComponent<FanFollowerCountProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface FanFollowerCountProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Fan count. Numbers are compacted (e.g. `1200` → `"1.2k"`); strings render verbatim. @default 0 */
+    fans?: number | string;
+    /** Subscriber count. Numbers are compacted (e.g. `3000` → `"3k"`); strings render verbatim. @default 0 */
+    subs?: number | string;
+    /** Show the fan count group. @default true */
+    showFans?: boolean;
+    /** Show the subscriber count group. @default true */
+    showSubs?: boolean;
+    /** Label rendered after the fan count. @default "Fans" */
+    fansLabel?: string;
+    /** Label rendered after the subscriber count. @default "Subs" */
+    subsLabel?: string;
+}
+
 /**
  * Flag icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -2557,6 +2628,28 @@ export declare const GenderIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link GenderIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type GenderIconProps = BaseIconProps;
 
+/**
+ * Returns the first letters of the first one or two words in a given string, capitalized.
+ * @example
+ *   getInitials("Ciao Bello"); // "CB"
+ *   getInitials("JavaScript"); // "J"
+ *   getInitials(undefined); // ""
+ */
+export declare const getInitials: (str?: string | null) => string;
+
+/**
+ * Gif icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
+ *
+ * @example
+ * ```tsx
+ * <GifIcon size={24} filled />
+ * ```
+ */
+export declare const GifIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link GifIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type GifIconProps = BaseIconProps;
+
 /**
  * Gift icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -2873,6 +2966,22 @@ export declare const LanguageIcon: React_2.ForwardRefExoticComponent<BaseIconPro
 /** Props for {@link LanguageIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type LanguageIconProps = BaseIconProps;
 
+/**
+ * An inline text link for navigating to a related page or section without
+ * using a button. Use `primary` for standard navigation and `brand` for the
+ * Fanvue green accent on calls to action within content.
+ *
+ * Renders an underlined `<a>` by default. Pass `asChild` to compose with a
+ * router link (e.g. Next.js `Link`). When rendering without a visible label,
+ * provide an `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/pricing" variant="brand">See our plans</Link>
+ * ```
+ */
+export declare const Link: React_2.ForwardRefExoticComponent<LinkProps & React_2.RefAttributes<HTMLAnchorElement>>;
+
 /**
  * Link icon. Renders at sizes 16, 24, or 32 px.
  *
@@ -2886,6 +2995,27 @@ export declare const LinkIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 /** Props for {@link LinkIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type LinkIconProps = BaseIconProps;
 
+export declare interface LinkProps extends React_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Visual style variant of the link. @default "primary" */
+    variant?: LinkVariant;
+    /** Text size of the link in pixels. @default "16" */
+    size?: LinkSize;
+    /** When `true`, greys the link out and blocks interaction. @default false */
+    disabled?: boolean;
+    /** Icon element displayed before the label. */
+    leftIcon?: React_2.ReactNode;
+    /** Icon element displayed after the label. */
+    rightIcon?: React_2.ReactNode;
+    /** Merge props onto a child element instead of rendering an `<a>`. @default false */
+    asChild?: boolean;
+}
+
+/** Text size of the link in pixels. */
+export declare type LinkSize = "16" | "14";
+
+/** Visual style variant of the link. */
+export declare type LinkVariant = "primary" | "brand";
+
 /**
  * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside
  * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.
@@ -3385,7 +3515,7 @@ export declare interface PillProps extends React_2.HTMLAttributes<HTMLSpanElemen
 }
 
 /** Colour variant of the pill. */
-export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "brand" | "brandLight" | "beta" | "error" | "red";
+export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "contrast" | "negative" | "brand" | "brandLight" | "beta" | "error" | "red";
 
 /**
  * Pin 2 icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
@@ -3444,6 +3574,49 @@ export declare const PrivacyIcon: React_2.ForwardRefExoticComponent<BaseIconProp
 /** Props for {@link PrivacyIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type PrivacyIconProps = BaseIconProps;
 
+/**
+ * Inline online-status indicator: a pulsing dot followed by a label. Used by
+ * {@link UserDisplayName} when `showOnlineStatus` is set.
+ */
+export declare const ProfileOnlineStatus: React_2.ForwardRefExoticComponent<ProfileOnlineStatusProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface ProfileOnlineStatusProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /** Visible status label rendered next to the indicator. @default "Online" */
+    label?: string;
+}
+
+/**
+ * Presence indicator showing whether a creator or fan is currently active.
+ * The active state pulses to signal real-time presence; the inactive state is a
+ * static, muted dot for lists, tables, and content views where presence is less
+ * relevant.
+ *
+ * Decorative by default (`aria-hidden`) — pair it with a visible or visually
+ * hidden label at the usage site. Pass `aria-label` to expose it as a
+ * standalone image to assistive technology.
+ *
+ * Supersedes the V1 `OnlineBlinkingIcon`: `<ProfileStatus />` is a drop-in
+ * replacement for `<OnlineBlinkingIcon />`, adding the distinct inactive state.
+ *
+ * @example
+ * ```tsx
+ * <ProfileStatus active />
+ * <ProfileStatus active={false} size="md" />
+ * <ProfileStatus active aria-label="Online" />
+ * ```
+ */
+export declare const ProfileStatus: React_2.ForwardRefExoticComponent<ProfileStatusProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface ProfileStatusProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+    /** Whether the profile is currently active. Active renders a pulsing green dot; inactive renders a static grey dot. @default true */
+    active?: boolean;
+    /** Size preset of the indicator. @default "sm" */
+    size?: ProfileStatusSize;
+}
+
+/** Size preset of the {@link ProfileStatus} indicator. */
+export declare type ProfileStatusSize = "sm" | "md";
+
 /**
  * A horizontal progress indicator with optional title, completion percentage,
  * step count, and helper text. The bar colour reflects progress when using the
@@ -3501,14 +3674,14 @@ export declare const QueueIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 export declare type QueueIconProps = BaseIconProps;
 
 /**
- * A single radio option within a {@link RadioGroup}. Includes an optional label
- * and helper text.
+ * A single radio option within a {@link RadioGroup}. Supports leading or
+ * trailing button placement, an optional avatar, a label, and helper text.
  *
  * @example
  * ```tsx
  * <RadioGroup value={value} onValueChange={setValue}>
  *   <Radio value="a" label="Option A" />
- *   <Radio value="b" label="Option B" />
+ *   <Radio value="b" label="Option B" layout="trailing" />
  * </RadioGroup>
  * ```
  */
@@ -3531,6 +3704,9 @@ export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<RadioGro
 /** Props for the {@link RadioGroup} component. Extends the Radix `RadioGroup.Root` props. */
 export declare type RadioGroupProps = React_2.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
 
+/** Placement of the radio button relative to its label. */
+export declare type RadioLayout = "leading" | "trailing";
+
 export declare interface RadioProps extends Omit<React_2.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild"> {
     /** Size variant controlling label and helper text typography. @default "default" */
     size?: "default" | "small";
@@ -3538,6 +3714,84 @@ export declare interface RadioProps extends Omit<React_2.ComponentPropsWithoutRe
     label?: string;
     /** Descriptive text displayed below the label. */
     helperText?: string;
+    /**
+     * Placement of the radio button. `"leading"` renders it before the label;
+     * `"trailing"` pushes it to the far end of the row (for list rows). @default "leading"
+     */
+    layout?: RadioLayout;
+    /**
+     * Optional avatar shown alongside the label, for options that represent a
+     * person or account. Pass an {@link Avatar} sized to `32`.
+     */
+    avatar?: React_2.ReactNode;
+}
+
+/** A single rating value paired with the number of reviews that gave it. */
+export declare interface RatingCount {
+    /** The rating value this entry represents (e.g. `5`). */
+    rating: number;
+    /** Number of reviews that gave this rating. */
+    count: number;
+}
+
+/**
+ * An aggregated rating overview: a headline average with the total review count,
+ * followed by a per-rating histogram. Bar lengths are scaled relative to the
+ * most-reviewed rating, so the busiest rating always fills the track.
+ *
+ * The brand star is decorative; the header and each histogram row expose
+ * `role="img"` with an accessible label (override via `formatAverageLabel` /
+ * `formatRatingLabel`) so the single-star-plus-number reads clearly.
+ *
+ * @example
+ * ```tsx
+ * <RatingSummary
+ *   distribution={[
+ *     { rating: 5, count: 300 },
+ *     { rating: 4, count: 20 },
+ *     { rating: 3, count: 20 },
+ *     { rating: 2, count: 10 },
+ *     { rating: 1, count: 0 },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const RatingSummary: React_2.ForwardRefExoticComponent<RatingSummaryProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface RatingSummaryProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Per-rating review counts. Order is not significant — rows always render from
+     * `maxRating` down to `1`, and any rating without an entry renders as zero.
+     * Entries are expected to use whole-number ratings within `1`–`maxRating`;
+     * any outside that range are ignored, including in the derived total and average.
+     */
+    distribution: RatingCount[];
+    /**
+     * Average rating shown in the header. Defaults to the count-weighted mean of
+     * `distribution`; provide it to display a server-computed average instead.
+     */
+    averageRating?: number;
+    /** Highest possible rating. Sets how many histogram rows render. @default 5 */
+    maxRating?: number;
+    /**
+     * Formats a review count into its label, without surrounding parentheses.
+     * Used for the visible text and as the count portion of the default
+     * accessible labels.
+     * @default ``(count) => `${count.toLocaleString()} review(s)` ``
+     */
+    formatCount?: (count: number) => string;
+    /**
+     * Builds the accessible label for the header. Override to localise the
+     * screen-reader text. `average` is the already-formatted average string.
+     * @default ``(average, max, total) => `Average rating ${average} out of ${max}, ${formatCount(total)}` ``
+     */
+    formatAverageLabel?: (average: string, maxRating: number, total: number) => string;
+    /**
+     * Builds the accessible label for each histogram row. Override to localise the
+     * screen-reader text.
+     * @default ``(rating, count) => `${rating} star(s), ${formatCount(count)}` ``
+     */
+    formatRatingLabel?: (rating: number, count: number) => string;
 }
 
 /**
@@ -3592,6 +3846,34 @@ export declare const ReverseIcon: React_2.ForwardRefExoticComponent<BaseIconProp
 /** Props for {@link ReverseIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type ReverseIconProps = BaseIconProps;
 
+/**
+ * A single written review: a star rating with an optional author byline, a
+ * title, and the review body. Stack several with a {@link Divider} between them
+ * to build a review list.
+ *
+ * @example
+ * ```tsx
+ * <ReviewCard rating={4} author="@jane_doe" title="A great app to start!">
+ *   Easily plan and organize your content. Streamline your scheduling so you can
+ *   focus on what you do best.
+ * </ReviewCard>
+ * ```
+ */
+export declare const ReviewCard: React_2.ForwardRefExoticComponent<ReviewCardProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ReviewCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Star rating the reviewer gave, shown beside the star icon. */
+    rating: number;
+    /** Highest possible rating, used only in the accessible label (e.g. "4 out of 5"). @default 5 */
+    maxRating?: number;
+    /** Reviewer name or handle, rendered after "by". Omitted when not provided. */
+    author?: React_2.ReactNode;
+    /** Short headline for the review. */
+    title?: React_2.ReactNode;
+    /** Review body text. */
+    children?: React_2.ReactNode;
+}
+
 /**
  * A text input field with a search icon and optional clear button.
  *
@@ -4973,6 +5255,60 @@ export declare const UserCircleIcon: React_2.ForwardRefExoticComponent<React_2.S
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Renders a user's display name with optional ambassador/verified badges and an
+ * online-status indicator. Only the name shrinks and truncates; trailing badges
+ * and the online-status indicator stay visible on the same line.
+ *
+ * Typography is not baked in: pass a `typography-*` utility via `className` on
+ * the root and the name inherits it. Use `typography-body-small-14px-semibold`
+ * for the standard display-name scale.
+ *
+ * When both `ambassador` and `verified` are set, the ambassador badge takes
+ * precedence. Its tint uses `text-success-content` (not `text-icons-brand-green`)
+ * so the green darkens in light mode and lightens in dark mode, matching
+ * {@link ProfileOnlineStatus}; `text-icons-brand-green` is fixed across modes.
+ *
+ * @example
+ * ```tsx
+ * <UserDisplayName className="typography-body-small-14px-semibold">Jane Doe</UserDisplayName>
+ * ```
+ */
+export declare const UserDisplayName: React_2.ForwardRefExoticComponent<UserDisplayNameProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface UserDisplayNameProps extends React_2.HTMLAttributes<HTMLElement> {
+    /** Render an ambassador badge after the name. */
+    ambassador?: boolean;
+    /** Accessible label for the ambassador badge. @default "Ambassador" */
+    ambassadorLabel?: string;
+    /** HTML element used for the root wrapper. @default "span" */
+    component?: "span" | "h1" | "h2" | "h3" | "p" | "div";
+    /** Truncate the display name on a single line. @default true */
+    noWrap?: boolean;
+    /** Accessible label for the online-status indicator. @default "Online" */
+    onlineLabel?: string;
+    /** Render the inline online-status indicator after the name. @default false */
+    showOnlineStatus?: boolean;
+    /** Render a verified badge after the name (ignored when `ambassador` is set). */
+    verified?: boolean;
+    /** Accessible label for the verified badge. @default "Verified" */
+    verifiedLabel?: string;
+}
+
+/**
+ * Renders a user handle prefixed with the `@` symbol as muted, truncated
+ * secondary text.
+ *
+ * @example
+ * ```tsx
+ * <UserHandle>jane_doe</UserHandle>
+ * ```
+ */
+export declare const UserHandle: React_2.ForwardRefExoticComponent<UserHandleProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface UserHandleProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+}
+
 /**
  * User icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -4986,6 +5322,45 @@ export declare const UserIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 /** Props for {@link UserIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type UserIconProps = BaseIconProps;
 
+/**
+ * A compact user row showing an avatar, display name (or nickname) and handle,
+ * with optional online and muted indicators.
+ *
+ * @example
+ * ```tsx
+ * <UserItem user={{ displayName: "Jane Doe", handle: "jane_doe" }} />
+ * ```
+ */
+export declare const UserItem: React_2.ForwardRefExoticComponent<UserItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface UserItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** The user to display. */
+    user: UserItemUser;
+    /** Desired avatar size in px; snapped to the nearest supported token. @default 48 */
+    avatarSize?: number;
+    /** Show the muted indicator in the bottom-left corner. @default false */
+    isMuted?: boolean;
+    /** Whether the user is online (only shown when `showOnlineStatus` is also set). @default false */
+    isOnline?: boolean;
+    /** Render the avatar. @default true */
+    showAvatar?: boolean;
+    /** Render the handle line under the display name. @default true */
+    showHandle?: boolean;
+    /** Enable the avatar online indicator (combined with `isOnline`). */
+    showOnlineStatus?: boolean;
+}
+
+/** Minimal user shape consumed by {@link UserItem}. */
+export declare type UserItemUser = {
+    avatarUri?: {
+        url: string;
+        url2x?: string;
+    };
+    displayName: string;
+    handle: string;
+    nickname?: string;
+};
+
 /**
  * User Menu icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -5042,6 +5417,20 @@ export declare const VaultIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link VaultIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type VaultIconProps = BaseIconProps;
 
+/**
+ * Verified badge icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
+ * Defaults to the filled variant.
+ *
+ * @example
+ * ```tsx
+ * <VerifiedIcon size={24} />
+ * ```
+ */
+export declare const VerifiedIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link VerifiedIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type VerifiedIconProps = BaseIconProps;
+
 /**
  * Video icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *