@fanvue/ui 3.7.2 → 3.8.0

package/dist/index.d.ts

@@ -744,7 +744,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 +775,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 +802,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";
 
@@ -2557,6 +2563,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.
  *
@@ -3444,6 +3472,17 @@ 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;
+}
+
 /**
  * A horizontal progress indicator with optional title, completion percentage,
  * step count, and helper text. The bar colour reflects progress when using the
@@ -3540,6 +3579,74 @@ export declare interface RadioProps extends Omit<React_2.ComponentPropsWithoutRe
     helperText?: string;
 }
 
+/** 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;
+}
+
 /**
  * Repeat icon. Renders at sizes 16, 24, or 32 px.
  *
@@ -3592,6 +3699,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 +5108,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 +5175,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 +5270,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.
  *

package/dist/index.mjs

@@ -98,6 +98,7 @@ import { ForwardIcon } from "./components/Icons/ForwardIcon.mjs";
 import { GalleryIcon } from "./components/Icons/GalleryIcon.mjs";
 import { GameIcon } from "./components/Icons/GameIcon.mjs";
 import { GenderIcon } from "./components/Icons/GenderIcon.mjs";
+import { GifIcon } from "./components/Icons/GifIcon.mjs";
 import { GiftIcon } from "./components/Icons/GiftIcon.mjs";
 import { GoogleIcon } from "./components/Icons/GoogleIcon.mjs";
 import { HealthIcon } from "./components/Icons/HealthIcon.mjs";
@@ -182,6 +183,7 @@ import { UserIcon } from "./components/Icons/UserIcon.mjs";
 import { UserMenuIcon } from "./components/Icons/UserMenuIcon.mjs";
 import { UsersIcon } from "./components/Icons/UsersIcon.mjs";
 import { VaultIcon } from "./components/Icons/VaultIcon.mjs";
+import { VerifiedIcon } from "./components/Icons/VerifiedIcon.mjs";
 import { VideoIcon } from "./components/Icons/VideoIcon.mjs";
 import { VipBadgeIcon } from "./components/Icons/VipBadgeIcon.mjs";
 import { WalletIcon } from "./components/Icons/WalletIcon.mjs";
@@ -200,9 +202,12 @@ import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinki
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
+import { ProfileOnlineStatus } from "./components/ProfileOnlineStatus/ProfileOnlineStatus.mjs";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar.mjs";
 import { Radio } from "./components/Radio/Radio.mjs";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.mjs";
+import { RatingSummary } from "./components/RatingSummary/RatingSummary.mjs";
+import { ReviewCard } from "./components/ReviewCard/ReviewCard.mjs";
 import { SearchField } from "./components/SearchField/SearchField.mjs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from "./components/Select/Select.mjs";
 import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
@@ -223,7 +228,11 @@ import { TextArea } from "./components/TextArea/TextArea.mjs";
 import { TextField } from "./components/TextField/TextField.mjs";
 import { Toast, ToastProvider, ToastViewport } from "./components/Toast/Toast.mjs";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/Tooltip/Tooltip.mjs";
+import { UserDisplayName } from "./components/UserDisplayName/UserDisplayName.mjs";
+import { UserHandle } from "./components/UserHandle/UserHandle.mjs";
+import { UserItem } from "./components/UserItem/UserItem.mjs";
 import { cn } from "./utils/cn.mjs";
+import { getInitials } from "./utils/getInitials.mjs";
 import { useSuppressClickAfterDrag } from "./utils/useSuppressClickAfterDrag.mjs";
 export {
   AI2Icon,
@@ -361,6 +370,7 @@ export {
   GalleryIcon,
   GameIcon,
   GenderIcon,
+  GifIcon,
   GiftIcon,
   GoogleIcon,
   HealthIcon,
@@ -415,14 +425,17 @@ export {
   PlayIcon,
   PlusIcon,
   PrivacyIcon,
+  ProfileOnlineStatus,
   ProgressBar,
   QueueIcon,
   Radio,
   RadioGroup,
+  RatingSummary,
   RepeatIcon,
   Reply2Icon,
   ReplyIcon,
   ReverseIcon,
+  ReviewCard,
   SearchField,
   SearchIcon,
   Select,
@@ -507,10 +520,14 @@ export {
   UserAIIcon,
   UserAddIcon,
   UserCircleIcon,
+  UserDisplayName,
+  UserHandle,
   UserIcon,
+  UserItem,
   UserMenuIcon,
   UsersIcon,
   VaultIcon,
+  VerifiedIcon,
   VideoIcon,
   VipBadgeIcon,
   WalletIcon,
@@ -521,6 +538,7 @@ export {
   WifiOnIcon,
   WrenchIcon,
   cn,
+  getInitials,
   useAudioRecorder,
   useSuppressClickAfterDrag
 };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/getInitials.mjs

@@ -0,0 +1,10 @@
+"use client";
+const cleanSpaces = (str) => str.trim().replace(/\s+/g, " ");
+const getInitials = (str) => {
+  if (!str) return "";
+  return cleanSpaces(str).split(" ").map((word) => word.length ? ([...word][0] ?? "").toUpperCase() : "").slice(0, 2).join("");
+};
+export {
+  getInitials
+};
+//# sourceMappingURL=getInitials.mjs.map

package/dist/utils/getInitials.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.mjs","sources":["../../src/utils/getInitials.ts"],"sourcesContent":["/** Trim leading/trailing whitespace and collapse internal runs of whitespace to a single space. */\nconst cleanSpaces = (str: string): string => str.trim().replace(/\\s+/g, \" \");\n\n/**\n * Returns the first letters of the first one or two words in a given string, capitalized.\n * @example\n *   getInitials(\"Ciao Bello\"); // \"CB\"\n *   getInitials(\"JavaScript\"); // \"J\"\n *   getInitials(undefined); // \"\"\n */\nexport const getInitials = (str?: string | null): string => {\n  if (!str) return \"\";\n  return cleanSpaces(str)\n    .split(\" \")\n    .map((word) => (word.length ? ([...word][0] ?? \"\").toUpperCase() : \"\"))\n    .slice(0, 2)\n    .join(\"\");\n};\n"],"names":[],"mappings":";AACA,MAAM,cAAc,CAAC,QAAwB,IAAI,OAAO,QAAQ,QAAQ,GAAG;AASpE,MAAM,cAAc,CAAC,QAAgC;AAC1D,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,YAAY,GAAG,EACnB,MAAM,GAAG,EACT,IAAI,CAAC,SAAU,KAAK,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,YAAA,IAAgB,EAAG,EACrE,MAAM,GAAG,CAAC,EACV,KAAK,EAAE;AACZ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.7.2",
+  "version": "3.8.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -180,7 +180,7 @@
   "size-limit": [
     {
       "path": "dist/index.mjs",
-      "limit": "175 KB",
+      "limit": "220 KB",
       "ignore": [
         "@radix-ui/*",
         "clsx",