@fanvue/ui 3.8.0 → 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.
@@ -1703,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
@@ -1747,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. */
@@ -2461,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.
  *
@@ -2901,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.
  *
@@ -2914,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`.
@@ -3413,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.
@@ -3483,6 +3585,38 @@ export declare interface ProfileOnlineStatusProps extends React_2.HTMLAttributes
     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
@@ -3540,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>
  * ```
  */
@@ -3570,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";
@@ -3577,6 +3714,16 @@ 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. */

package/dist/index.mjs

@@ -29,6 +29,7 @@ import { Divider } from "./components/Divider/Divider.mjs";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
 import { EmptyState } from "./components/EmptyState/EmptyState.mjs";
+import { FanFollowerCount } from "./components/FanFollowerCount/FanFollowerCount.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
 import { AffiliatesIcon } from "./components/Icons/AffiliatesIcon.mjs";
@@ -195,6 +196,7 @@ import { WifiOnIcon } from "./components/Icons/WifiOnIcon.mjs";
 import { WrenchIcon } from "./components/Icons/WrenchIcon.mjs";
 import { InfoBox, InfoBoxContent, InfoBoxTrigger } from "./components/InfoBox/InfoBox.mjs";
 import { InlineEdit } from "./components/InlineEdit/InlineEdit.mjs";
+import { Link } from "./components/Link/Link.mjs";
 import { Loader } from "./components/Loader/Loader.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
@@ -203,6 +205,7 @@ 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 { ProfileStatus } from "./components/ProfileStatus/ProfileStatus.mjs";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar.mjs";
 import { Radio } from "./components/Radio/Radio.mjs";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.mjs";
@@ -362,6 +365,7 @@ export {
   EyeOffIcon,
   EyeSlashIcon,
   FacebookIcon,
+  FanFollowerCount,
   FlagIcon,
   FlameIcon,
   FlashIcon,
@@ -389,6 +393,7 @@ export {
   InfoIcon,
   InlineEdit,
   LanguageIcon,
+  Link,
   LinkIcon,
   Loader,
   LocationIcon,
@@ -426,6 +431,7 @@ export {
   PlusIcon,
   PrivacyIcon,
   ProfileOnlineStatus,
+  ProfileStatus,
   ProgressBar,
   QueueIcon,
   Radio,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",