@fanvue/ui 3.17.0 → 3.19.0

package/dist/index.d.ts

@@ -715,7 +715,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" | "successColour" | "warningColour" | "errorColour" | "infoColour" | "aiGenerated" | "negative" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
+export declare type BadgeVariant = "default" | "dark" | "success" | "warning" | "error" | "special" | "info" | "successColour" | "warningColour" | "errorColour" | "infoColour" | "aiGenerated" | "negative" | "alwaysWhite" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
 
 /**
  * Bank icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
@@ -1530,6 +1530,12 @@ export declare interface ChipProps extends React_2.HTMLAttributes<HTMLElement> {
     rightIcon?: React_2.ReactNode;
     /** Notification badge content (e.g. `"99+"`). Passed as a string for i18n support. */
     notificationLabel?: string;
+    /** Numeric value for the notification badge. Uses the `Count` component for overflow formatting. Takes precedence over `notificationLabel` when both are provided. */
+    notificationCount?: number;
+    /** Maximum value before the badge shows overflow (e.g. `"9+"`). Only applies when `notificationCount` is set. @default 99 */
+    notificationMax?: number;
+    /** Colour variant of the notification badge. @default "brand" */
+    notificationVariant?: CountVariant;
     /** Click handler — when provided, the chip renders as a `<button>` for accessibility. */
     onClick?: React_2.MouseEventHandler<HTMLElement>;
     /** Merge props onto a child element instead of rendering a wrapper. @default false */
@@ -1636,24 +1642,33 @@ export declare const CopyIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 export declare type CopyIconProps = BaseIconProps;
 
 /**
- * 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.
+ * V2 Notification Count — a small badge for unread activity on nav items,
+ * icons, buttons, or chips. 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" />
+ * <Count value={1} variant="brand" showAmount={false} />
  * ```
  */
 export declare const Count: React_2.ForwardRefExoticComponent<CountProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface CountProps extends React_2.HTMLAttributes<HTMLSpanElement> {
-    /** Colour variant of the count badge. @default "default" */
+    /**
+     * Colour variant of the count badge.
+     * Figma V2 types: `default` | `brand` | `contrast`. @default "default"
+     */
     variant?: CountVariant;
     /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */
     value?: number;
     /** Maximum value before showing overflow (e.g. `"99+"`). @default 99 */
     max?: number;
+    /**
+     * When `false`, renders an 8px unread dot instead of a numeric amount
+     * (Figma Show Amount=False). @default true
+     */
+    showAmount?: boolean;
     /** Size of the count badge. @default "32" */
     size?: CountSize;
     /** Merge props onto a child element instead of rendering a `<span>`. @default false */
@@ -1663,8 +1678,13 @@ export declare interface CountProps extends React_2.HTMLAttributes<HTMLSpanEleme
 /** Size of the count badge, aligned with button and icon-button sizes. */
 export declare type CountSize = "16" | "24" | "32";
 
-/** Colour variant for the count badge. */
-export declare type CountVariant = "default" | "alert" | "brand" | "pink" | "info" | "success" | "warning";
+/**
+ * Colour variant for the count badge.
+ *
+ * V2 Notification Count (Fanvue Library) types: `default`, `brand`, `contrast`.
+ * Remaining values are retained extensions for existing consumers.
+ */
+export declare type CountVariant = "default" | "contrast" | "brand" | "alert" | "pink" | "info" | "success" | "warning";
 
 /**
  * A portrait media card highlighting a creator with avatar, name, optional
@@ -3840,6 +3860,55 @@ export declare const PeopleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A phone number input with a country selector (flag + chevron), a fixed dial
+ * code prefix, and a `tel` input. The country picker itself is owned by the
+ * consumer: pass the selected country's `flag` and `dialCode`, and open your
+ * picker from `onCountrySelect`.
+ *
+ * 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
+ * <PhoneField
+ *   label="Phone number"
+ *   flag={<img src={italyFlag} alt="" />}
+ *   dialCode="+39"
+ *   onCountrySelect={openCountryPicker}
+ *   value={number}
+ *   onChange={(e) => setNumber(e.target.value)}
+ * />
+ * ```
+ */
+export declare const PhoneField: React_2.ForwardRefExoticComponent<PhoneFieldProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface PhoneFieldProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    /** Label text displayed above the input. Also used as the accessible name. */
+    label?: string;
+    /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */
+    helperText?: string;
+    /** Height of the phone field in pixels. @default "48" */
+    size?: PhoneFieldSize;
+    /** Whether the field is in an error state. @default false */
+    error?: boolean;
+    /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */
+    errorMessage?: string;
+    /** Dial code of the selected country, shown before the number (e.g. `"+39"`). */
+    dialCode?: React_2.ReactNode;
+    /** Flag of the selected country, rendered in the country selector (e.g. an image or flag icon). */
+    flag?: React_2.ReactNode;
+    /** Fired when the country selector (flag + chevron) is activated. Open the country picker here. */
+    onCountrySelect?: () => void;
+    /** Accessible name for the country selector button. @default "Select country" */
+    countryButtonLabel?: string;
+    /** Whether the field stretches to fill its container width. @default false */
+    fullWidth?: boolean;
+}
+
+/** Phone field height in pixels. */
+export declare type PhoneFieldSize = "48" | "40" | "32";
+
 /**
  * Phone icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -4171,6 +4240,11 @@ export declare interface RatingCount {
  * 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 histogram is one shared grid (with subgrid rows) rather than per-row
+ * flex: the label column is sized by the widest label across all rows, so a
+ * width difference between labels (e.g. "1 review" vs "3 reviews") never
+ * changes a row's track length — every bar's right edge stays aligned.
+ *
  * 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.
@@ -4226,6 +4300,19 @@ export declare interface RatingSummaryProps extends Omit<React_2.HTMLAttributes<
     formatRatingLabel?: (rating: number, count: number) => string;
 }
 
+/**
+ * Receive Money icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <ReceiveMoneyIcon size={24} />
+ * ```
+ */
+export declare const ReceiveMoneyIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link ReceiveMoneyIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type ReceiveMoneyIconProps = BaseIconProps;
+
 /**
  * Repeat icon. Renders at sizes 16, 24, or 32 px.
  *
@@ -5509,6 +5596,15 @@ export declare type TextAreaSize = "48" | "40" | "32";
  * ```tsx
  * <TextField label="Price" leftLabel="$" rightLabel="USD" placeholder="0.00" />
  * ```
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Promo code"
+ *   placeholder="Enter code"
+ *   action={<Chip size="32" onClick={apply}>Apply</Chip>}
+ * />
+ * ```
  */
 export declare const TextField: React_2.ForwardRefExoticComponent<TextFieldProps & React_2.RefAttributes<HTMLInputElement>>;
 
@@ -5533,6 +5629,12 @@ export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes
     leftLabel?: React_2.ReactNode;
     /** Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain. */
     rightLabel?: React_2.ReactNode;
+    /**
+     * Trailing interactive element pinned to the right edge — typically a `Chip`
+     * or `Button` (the "with button" field type). Reduces the right padding so the
+     * control sits flush, and clicks on it do not steal focus from the input.
+     */
+    action?: React_2.ReactNode;
     /** Whether the text field stretches to fill its container width. @default false */
     fullWidth?: boolean;
 }

package/dist/index.mjs

@@ -151,6 +151,7 @@ import { PlayIcon } from "./components/Icons/PlayIcon.mjs";
 import { PlusIcon } from "./components/Icons/PlusIcon.mjs";
 import { PrivacyIcon } from "./components/Icons/PrivacyIcon.mjs";
 import { QueueIcon } from "./components/Icons/QueueIcon.mjs";
+import { ReceiveMoneyIcon } from "./components/Icons/ReceiveMoneyIcon.mjs";
 import { RepeatIcon } from "./components/Icons/RepeatIcon.mjs";
 import { Reply2Icon } from "./components/Icons/Reply2Icon.mjs";
 import { ReplyIcon } from "./components/Icons/ReplyIcon.mjs";
@@ -213,6 +214,7 @@ import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinki
 import { PageSelector } from "./components/PageSelector/PageSelector.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
+import { PhoneField } from "./components/PhoneField/PhoneField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
 import { ProfileOnlineStatus } from "./components/ProfileOnlineStatus/ProfileOnlineStatus.mjs";
 import { ProfileStatus } from "./components/ProfileStatus/ProfileStatus.mjs";
@@ -447,6 +449,7 @@ export {
   PasswordField,
   PauseIcon,
   PeopleIcon,
+  PhoneField,
   PhoneIcon,
   PhoneOffIcon,
   Pill,
@@ -464,6 +467,7 @@ export {
   Radio,
   RadioGroup,
   RatingSummary,
+  ReceiveMoneyIcon,
   RepeatIcon,
   Reply2Icon,
   ReplyIcon,

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.17.0",
+  "version": "3.19.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",