@fanvue/ui 3.12.1 → 3.13.0

package/dist/index.d.ts

@@ -64,14 +64,26 @@ export declare type AccordionProps = React_2.ComponentPropsWithoutRef<typeof Acc
 
 /** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */
 export declare const AccordionTrigger: React_2.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & {
-    /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */
+    /** Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it. */
     icon?: React_2.ReactNode | null;
+    /** Secondary line rendered under the title, for extra context. */
+    description?: React_2.ReactNode;
+    /** Leading icon shown before the title (sized to 16px). */
+    leadingIcon?: React_2.ReactNode;
+    /** Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`. */
+    avatar?: React_2.ReactNode;
 } & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link AccordionTrigger} button component. */
 export declare type AccordionTriggerProps = React_2.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
-    /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */
+    /** Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it. */
     icon?: React_2.ReactNode | null;
+    /** Secondary line rendered under the title, for extra context. */
+    description?: React_2.ReactNode;
+    /** Leading icon shown before the title (sized to 16px). */
+    leadingIcon?: React_2.ReactNode;
+    /** Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`. */
+    avatar?: React_2.ReactNode;
 };
 
 /**
@@ -2257,6 +2269,11 @@ export declare type DropdownMenuHeaderType = "default" | "search";
  * <DropdownMenuItem destructive>Delete</DropdownMenuItem>
  * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>
  *
+ * // Feature-rich row with an avatar and a trailing count
+ * <DropdownMenuItem avatar={<Avatar size={24} src={src} />} count="12">
+ *   Jane Doe
+ * </DropdownMenuItem>
+ *
  * // As a link
  * <DropdownMenuItem asChild>
  *   <a href="/settings">Settings</a>
@@ -2270,10 +2287,18 @@ export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWit
     size?: DropdownMenuItemSize;
     /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */
     destructive?: boolean;
-    /** Icon (or other node) rendered before the label. */
+    /** Icon (or other node) rendered before the label. Ignored when {@link DropdownMenuItemProps.avatar} is set. */
     leadingIcon?: React_2.ReactNode;
+    /**
+     * Leading avatar rendered in place of {@link DropdownMenuItemProps.leadingIcon},
+     * for rows that represent a person or account. Pass an `Avatar` sized to `24`.
+     * Takes precedence over `leadingIcon`.
+     */
+    avatar?: React_2.ReactNode;
     /** Icon (or other node) rendered after the label. */
     trailingIcon?: React_2.ReactNode;
+    /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */
+    count?: React_2.ReactNode;
     /**
      * Optional secondary text rendered on a second line below the label. When
      * provided, the row switches to a two-line layout and the leading/trailing
@@ -3678,12 +3703,38 @@ export declare type ProfileStatusSize = "sm" | "md";
  */
 export declare const ProgressBar: React_2.ForwardRefExoticComponent<ProgressBarProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * A single rounded segment used to compose a stepped progress indicator. Render
+ * a row of these (see {@link ProgressBarSteps}) to represent discrete steps.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBarItem active variant="brand" />
+ * ```
+ */
+export declare const ProgressBarItem: React_2.ForwardRefExoticComponent<ProgressBarItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ProgressBarItemProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether this item is filled (completed). @default false */
+    active?: boolean;
+    /** Colour mode. @default "brand" */
+    variant?: ProgressBarItemVariant;
+    /** Pill thickness — `"default"` (8px) or `"small"` (4px). @default "default" */
+    size?: ProgressBarItemSize;
+}
+
+/** Pill thickness — `"default"` (8px) or `"small"` (4px). */
+export declare type ProgressBarItemSize = "default" | "small";
+
+/** Colour mode for a progress bar item — brand green or theme-aware monochrome. */
+export declare type ProgressBarItemVariant = "brand" | "mono";
+
 export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Current progress value, clamped to 0–100. */
     value: number;
     /** Track height — `"default"` (12px) or `"small"` (6px). @default "default" */
     size?: ProgressBarSize;
-    /** Colour mode — `"default"` is colour-coded by value, `"generic"` always uses brand green, `"neutral"` uses a theme-aware inverse colour. @default "default" */
+    /** Colour mode. Prefer `"brand"` or `"mono"` (V2); `"default"`/`"generic"`/`"neutral"` are legacy. @default "default" */
     variant?: ProgressBarVariant;
     /** Title content shown at the top-left of the bar. */
     title?: React_2.ReactNode;
@@ -3706,8 +3757,41 @@ export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HT
 /** 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, `"neutral"` uses a theme-aware inverse colour. */
-export declare type ProgressBarVariant = "default" | "generic" | "neutral";
+/**
+ * A segmented (stepped) progress indicator built from {@link ProgressBarItem}
+ * pills. Fills the first `value` of `steps` segments.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBarSteps steps={4} value={2} variant="brand" />
+ * ```
+ */
+export declare const ProgressBarSteps: React_2.ForwardRefExoticComponent<ProgressBarStepsProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ProgressBarStepsProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Total number of steps (segments). Values below 1 are treated as 1. */
+    steps: number;
+    /** Number of completed steps, clamped to `0`–`steps`. */
+    value: number;
+    /** Colour mode. @default "brand" */
+    variant?: ProgressBarItemVariant;
+    /** Pill thickness — `"default"` (8px) or `"small"` (4px). @default "default" */
+    size?: ProgressBarItemSize;
+    /** Accessible label for the `progressbar` role. @default "Progress" */
+    ariaLabel?: string;
+    /** Human-readable text alternative for the current value (e.g. "Step 2 of 4"). */
+    ariaValueText?: string;
+}
+
+/**
+ * Colour mode.
+ * - `"brand"` — V2 brand (green) fill on a tinted track.
+ * - `"mono"` — V2 monochrome fill on a tinted track (theme-aware).
+ * - `"default"` — legacy value-coded red/yellow/green.
+ * - `"generic"` — legacy solid brand green on a neutral track.
+ * - `"neutral"` — legacy theme-aware inverse colour on a neutral track.
+ */
+export declare type ProgressBarVariant = "brand" | "mono" | "default" | "generic" | "neutral";
 
 /**
  * Queue icon. Renders at sizes 16, 24, or 32 px.
@@ -5011,10 +5095,11 @@ export declare interface TextAreaProps extends Omit<React_2.TextareaHTMLAttribut
 export declare type TextAreaSize = "48" | "40" | "32";
 
 /**
- * A text input field with optional label, helper/error text, and icon slots.
+ * A text input field with optional label, helper/error text, icon slots, and side labels.
  *
- * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for
- * accessibility — a console warning is emitted in development if none are set.
+ * Use `leftLabel` / `rightLabel` for fixed unit or prefix affordances (currency symbol,
+ * country code, domain suffix). 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
@@ -5025,6 +5110,11 @@ export declare type TextAreaSize = "48" | "40" | "32";
  *   errorMessage={emailError}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * <TextField label="Price" leftLabel="$" rightLabel="USD" placeholder="0.00" />
+ * ```
  */
 export declare const TextField: React_2.ForwardRefExoticComponent<TextFieldProps & React_2.RefAttributes<HTMLInputElement>>;
 
@@ -5045,6 +5135,10 @@ export declare interface TextFieldProps extends Omit<React_2.InputHTMLAttributes
     leftIcon?: React_2.ReactNode;
     /** Icon element displayed at the right side of the input. */
     rightIcon?: React_2.ReactNode;
+    /** Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code. */
+    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;
     /** Whether the text field stretches to fill its container width. @default false */
     fullWidth?: boolean;
 }

package/dist/index.mjs

@@ -209,6 +209,8 @@ 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 { ProgressBarItem } from "./components/ProgressBar/ProgressBarItem.mjs";
+import { ProgressBarSteps } from "./components/ProgressBar/ProgressBarSteps.mjs";
 import { Radio } from "./components/Radio/Radio.mjs";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.mjs";
 import { RatingSummary } from "./components/RatingSummary/RatingSummary.mjs";
@@ -438,6 +440,8 @@ export {
   ProfileOnlineStatus,
   ProfileStatus,
   ProgressBar,
+  ProgressBarItem,
+  ProgressBarSteps,
   QueueIcon,
   Radio,
   RadioGroup,

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