@fanvue/ui 3.12.1 → 3.14.0

package/dist/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<TextFieldSize, string> = {\n  \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst INPUT_PL: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"40\": { default: \"pl-4\", withIcon: \"pl-10\" },\n  \"32\": { default: \"pl-3\", withIcon: \"pl-9\" },\n};\n\nconst INPUT_PR: Record<TextFieldSize, { default: string; withIcon: string }> = {\n  \"48\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"40\": { default: \"pr-4\", withIcon: \"pr-10\" },\n  \"32\": { default: \"pr-3\", withIcon: \"pr-9\" },\n};\n\nconst ICON_INSET: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getInputClassName(size: TextFieldSize, hasLeftIcon: boolean, hasRightIcon: boolean) {\n  return cn(\n    \"h-full w-full rounded-sm bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n    INPUT_SIZE_CLASSES[size],\n    hasLeftIcon ? INPUT_PL[size].withIcon : INPUT_PL[size].default,\n    hasRightIcon ? INPUT_PR[size].withIcon : INPUT_PR[size].default,\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, and icon slots.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={bottomText ? helperTextId : undefined}\n            aria-invalid={error || undefined}\n            className={cn(\n              getInputClassName(size, !!leftIcon, !!(rightIcon || validated)),\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          {leftIcon && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-y-0 left-0 flex items-center text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              <div className=\"flex size-4 shrink-0 items-center justify-center\">{leftIcon}</div>\n            </div>\n          )}\n\n          {(rightIcon || validated) && (\n            <div\n              className={cn(\n                \"absolute inset-y-0 right-0 flex items-center gap-2 text-content-secondary\",\n                ICON_INSET[size],\n              )}\n            >\n              {rightIcon && (\n                <div className=\"flex size-4 shrink-0 items-center justify-center\">{rightIcon}</div>\n              )}\n              {validated && (\n                <div className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n                  <CheckOutlineIcon className=\"text-success-content\" />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.mjs","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CheckOutlineIcon } from \"@/index\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text field height in pixels. */\nexport type TextFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextFieldProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  /** Label text displayed above the input. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the text field in pixels. @default \"48\" */\n  size?: TextFieldSize;\n  /** Whether the text field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the input. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text field is validated. @default false */\n  validated?: boolean;\n  /** Icon element displayed at the left side of the input. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed at the right side of the input. */\n  rightIcon?: React.ReactNode;\n  /** Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code. */\n  leftLabel?: React.ReactNode;\n  /** Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain. */\n  rightLabel?: React.ReactNode;\n  /** Whether the text field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n}\n\nconst CONTAINER_HEIGHT: Record<TextFieldSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst CONTAINER_PADDING_X: Record<TextFieldSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst CONTAINER_GAP: Record<TextFieldSize, string> = {\n  \"48\": \"gap-2.5\",\n  \"40\": \"gap-2.5\",\n  \"32\": \"gap-2\",\n};\n\nconst INPUT_TYPOGRAPHY: Record<TextFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"40\": \"typography-body-default-16px-regular autofill-body-lg\",\n  \"32\": \"typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst SIDE_LABEL_TYPOGRAPHY: Record<TextFieldSize, string> = {\n  \"48\": \"typography-body-default-16px-regular\",\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nfunction getContainerClassName(size: TextFieldSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative flex items-center overflow-hidden rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n    CONTAINER_PADDING_X[size],\n    CONTAINER_GAP[size],\n    error ? \"border-error-content\" : \"border-border-primary\",\n    !disabled && !error && \"hover:border-neutral-alphas-400\",\n    CONTAINER_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction LeadingIcon({ children }: { children?: React.ReactNode }) {\n  if (!children) return null;\n  return (\n    <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center text-content-secondary\">\n      {children}\n    </span>\n  );\n}\n\nfunction SideLabel({\n  id,\n  size,\n  align,\n  children,\n}: {\n  id?: string;\n  size: TextFieldSize;\n  align: \"left\" | \"right\";\n  children?: React.ReactNode;\n}) {\n  if (!children) return null;\n  return (\n    <span\n      id={id}\n      className={cn(\n        \"shrink-0 select-none whitespace-nowrap text-content-tertiary\",\n        align === \"right\" && \"text-right\",\n        SIDE_LABEL_TYPOGRAPHY[size],\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction TrailingAdornment({\n  rightIcon,\n  validated,\n}: {\n  rightIcon?: React.ReactNode;\n  validated: boolean;\n}) {\n  if (!rightIcon && !validated) return null;\n  return (\n    <span className=\"flex shrink-0 items-center gap-2 text-content-secondary\">\n      {rightIcon && (\n        <span data-tf-interactive=\"\" className=\"flex size-4 shrink-0 items-center justify-center\">\n          {rightIcon}\n        </span>\n      )}\n      {validated && (\n        <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center\">\n          <CheckOutlineIcon className=\"text-success-content\" />\n        </span>\n      )}\n    </span>\n  );\n}\n\nfunction TextFieldHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-description-12px-regular px-2 pt-2 pb-0.5\",\n        error ? \"text-error-content\" : \"text-content-secondary\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextField: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A text input field with optional label, helper/error text, icon slots, and side labels.\n *\n * Use `leftLabel` / `rightLabel` for fixed unit or prefix affordances (currency symbol,\n * country code, domain suffix). Provide at least one of `label`, `aria-label`, or\n * `aria-labelledby` for accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextField\n *   label=\"Email\"\n *   placeholder=\"you@example.com\"\n *   error={!!emailError}\n *   errorMessage={emailError}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <TextField label=\"Price\" leftLabel=\"$\" rightLabel=\"USD\" placeholder=\"0.00\" />\n * ```\n */\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      leftIcon,\n      rightIcon,\n      leftLabel,\n      rightLabel,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const leftLabelId = `${inputId}-left-label`;\n    const rightLabelId = `${inputId}-right-label`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    const describedBy =\n      [\n        leftLabel != null ? leftLabelId : null,\n        rightLabel != null ? rightLabelId : null,\n        bottomText ? helperTextId : null,\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    // Keep clicks on the non-interactive adornments (icons, side labels, padding)\n    // focusing the input, matching the old absolute/pointer-events-none layout.\n    const handleContainerMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      const target = event.target as HTMLElement;\n      if (target === innerRef.current) return;\n      if (target.closest(\"[data-tf-interactive]\")) return;\n      event.preventDefault();\n      innerRef.current?.focus();\n    };\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n          >\n            {label}\n          </label>\n        )}\n\n        {/* biome-ignore lint/a11y/noStaticElementInteractions: focus bridge delegates pointer clicks on adornments to the input */}\n        <div\n          className={getContainerClassName(size, error, disabled)}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <LeadingIcon>{leftIcon}</LeadingIcon>\n          <SideLabel id={leftLabelId} size={size} align=\"left\">\n            {leftLabel}\n          </SideLabel>\n\n          <input\n            ref={setRefs}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={describedBy}\n            aria-invalid={error || undefined}\n            className={cn(\n              \"h-full min-w-0 flex-1 bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n              INPUT_TYPOGRAPHY[size],\n              \"[&[type='search']::-webkit-search-cancel-button]:hidden [&[type='search']::-webkit-search-cancel-button]:appearance-none\",\n            )}\n            {...props}\n          />\n\n          <SideLabel id={rightLabelId} size={size} align=\"right\">\n            {rightLabel}\n          </SideLabel>\n          <TrailingAdornment rightIcon={rightIcon} validated={validated} />\n        </div>\n\n        {bottomText && (\n          <TextFieldHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextFieldHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = \"TextField\";\n"],"names":[],"mappings":"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"}

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;
 };
 
 /**
@@ -320,6 +332,54 @@ export declare interface AudioFileRejection {
     errors: AudioValidationError[];
 }
 
+/**
+ * A compact playback control for a single audio clip: a play/pause toggle, a
+ * static amplitude waveform that doubles as a seek scrubber, and elapsed/total
+ * timestamps. Designed to sit as an overlay on media thumbnails (Vault cards)
+ * as well as inline rows (the AI Voice Message "Generated Audio" row).
+ *
+ * The waveform is seeded from the decoded audio when possible, falling back
+ * to a deterministic (not random) placeholder derived from `src` so the
+ * result is stable across renders, SSR, and Chromatic snapshots.
+ *
+ * @example
+ * ```tsx
+ * <AudioPlayer src="https://example.com/clip.mp3" duration={5} />
+ * ```
+ */
+export declare const AudioPlayer: React_2.ForwardRefExoticComponent<AudioPlayerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AudioPlayerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause" | "onEnded"> {
+    /** URL of the audio file to play. */
+    src: string;
+    /**
+     * Total duration in seconds, used to render the timestamp before the
+     * media's own metadata has loaded (and as a fallback if it never does).
+     */
+    duration?: number;
+    /**
+     * Whether playback is active (controlled). Note: once `onEnded` fires, the
+     * browser has already stopped native playback. To loop or replay under
+     * controlled usage, toggle this prop `false` then `true` (rather than
+     * leaving it `true`) — the sync effect only calls `play()` again when this
+     * value actually changes.
+     */
+    playing?: boolean;
+    /** Initial playback state (uncontrolled). @default false */
+    defaultPlaying?: boolean;
+    /** Called when playback starts. */
+    onPlay?: () => void;
+    /** Called when playback is paused. */
+    onPause?: () => void;
+    /** Called when playback reaches the end of the media. */
+    onEnded?: () => void;
+    /** Height of the player row, in pixels. @default "40" */
+    size?: AudioPlayerSize;
+}
+
+/** Height of the audio player row, in pixels. Matches both the Vault card overlay and the "Generated Audio" modal row in Figma — both use an identical 32px play button and 40px row. */
+export declare type AudioPlayerSize = "40";
+
 /**
  * Audio file upload with drag-and-drop and optional in-browser recording.
  * Supports file validation, multiple files, and real-time waveform visualization during recording.
@@ -1800,6 +1860,8 @@ export declare interface DialogContentProps extends React_2.ComponentPropsWithou
      * @default "sheet"
      */
     mobilePresentation?: "sheet" | "card";
+    /** Props forwarded to the default {@link DialogOverlay} when `overlay` is `true`. */
+    overlayProps?: DialogOverlayProps;
 }
 
 /** Accessible description for the dialog. Rendered as secondary text. */
@@ -2257,6 +2319,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 +2337,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
@@ -2578,6 +2653,30 @@ export declare const FlashIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link FlashIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type FlashIconProps = BaseIconProps;
 
+/**
+ * A circular, elevated button for the single most important action on a
+ * screen (e.g. creating new content). Unlike {@link IconButton}, it always
+ * floats above page content with a drop shadow and is meant to be
+ * positioned by the consumer (e.g. `fixed bottom-6 right-6`) rather than
+ * inline in a toolbar or action row.
+ *
+ * Requires an accessible name — pass `aria-label` or `aria-labelledby`, since
+ * the icon alone doesn't convey the action to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <FloatingActionButton aria-label="Add content" className="fixed right-6 bottom-6">
+ *   <AddIcon />
+ * </FloatingActionButton>
+ * ```
+ */
+export declare const FloatingActionButton: React_2.ForwardRefExoticComponent<FloatingActionButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface FloatingActionButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon to render inside the button. Pass an icon component (e.g. `<AddIcon />`). */
+    children: React_2.ReactNode;
+}
+
 /**
  * Folder icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -2680,6 +2779,19 @@ export declare const GoogleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Grid view icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <GridViewIcon size={24} />
+ * ```
+ */
+export declare const GridViewIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link GridViewIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type GridViewIconProps = BaseIconProps;
+
 /**
  * Health icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -3029,6 +3141,19 @@ export declare type LinkSize = "16" | "14";
 /** Visual style variant of the link. */
 export declare type LinkVariant = "primary" | "brand";
 
+/**
+ * List view icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <ListViewIcon size={24} />
+ * ```
+ */
+export declare const ListViewIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link ListViewIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type ListViewIconProps = BaseIconProps;
+
 /**
  * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside
  * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.
@@ -3678,12 +3803,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 +3857,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.
@@ -3987,15 +4171,46 @@ export declare type SearchIconProps = BaseIconProps;
  *   aria-label="Amount type"
  * />
  * ```
+ *
+ * @example Icon-only segments (e.g. a list/grid view toggle)
+ * ```tsx
+ * <SegmentedControl
+ *   appearance="plain"
+ *   options={[
+ *     { label: "List view", value: "list", icon: <ListViewIcon size={16} /> },
+ *     { label: "Grid view", value: "grid", icon: <GridViewIcon size={16} /> },
+ *   ]}
+ *   value={view}
+ *   onChange={setView}
+ *   aria-label="View"
+ * />
+ * ```
  */
 export declare const SegmentedControl: React_2.ForwardRefExoticComponent<SegmentedControlProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Visual style of the control.
+ * - `"pill"`: the container has a muted background and the selected segment shows a filled pill (default).
+ * - `"plain"`: no container or selected-pill background; segments are bare content and selection is
+ *   communicated by color alone. Designed for icon-only toggles (e.g. a list/grid view switch).
+ */
+export declare type SegmentedControlAppearance = "pill" | "plain";
+
 /** Describes one selectable segment. */
 export declare interface SegmentedControlOption {
-    /** Display label for the segment. */
+    /**
+     * Display label for the segment. When `icon` is provided, the segment renders icon-only and
+     * this value is used as its accessible name (applied as `aria-label`) instead of visible text.
+     */
     label: string;
     /** Value identifier returned via `onChange`. */
     value: string;
+    /**
+     * Icon to render instead of the visible label. When set, the segment renders icon-only and
+     * `label` becomes required as its accessible name — it is applied as `aria-label` and no
+     * visible text is rendered.
+     */
+    icon?: React_2.ReactNode;
 }
 
 export declare interface SegmentedControlProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onChange"> {
@@ -4003,6 +4218,8 @@ export declare interface SegmentedControlProps extends Omit<React_2.HTMLAttribut
     size?: SegmentedControlSize;
     /** Segment layout. @default "hug" */
     variant?: SegmentedControlVariant;
+    /** Visual style of the control. @default "pill" */
+    appearance?: SegmentedControlAppearance;
     /** The selectable segments. Designed for two or three mutually exclusive options. */
     options: SegmentedControlOption[];
     /** Currently selected value (controlled). */
@@ -5011,10 +5228,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 +5243,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 +5268,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

@@ -5,6 +5,7 @@ import { AccordionContent } from "./components/Accordion/AccordionContent.mjs";
 import { AccordionItem } from "./components/Accordion/AccordionItem.mjs";
 import { AccordionTrigger } from "./components/Accordion/AccordionTrigger.mjs";
 import { Alert } from "./components/Alert/Alert.mjs";
+import { AudioPlayer } from "./components/AudioPlayer/AudioPlayer.mjs";
 import { AudioUpload } from "./components/AudioUpload/AudioUpload.mjs";
 import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs";
 import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
@@ -30,6 +31,7 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 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 { FloatingActionButton } from "./components/FloatingActionButton/FloatingActionButton.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
 import { AffiliatesIcon } from "./components/Icons/AffiliatesIcon.mjs";
@@ -103,6 +105,7 @@ 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 { GridViewIcon } from "./components/Icons/GridViewIcon.mjs";
 import { HealthIcon } from "./components/Icons/HealthIcon.mjs";
 import { HeartIcon } from "./components/Icons/HeartIcon.mjs";
 import { HelpIcon } from "./components/Icons/HelpIcon.mjs";
@@ -115,6 +118,7 @@ import { InfoCircleIcon } from "./components/Icons/InfoCircleIcon.mjs";
 import { InfoIcon } from "./components/Icons/InfoIcon.mjs";
 import { LanguageIcon } from "./components/Icons/LanguageIcon.mjs";
 import { LinkIcon } from "./components/Icons/LinkIcon.mjs";
+import { ListViewIcon } from "./components/Icons/ListViewIcon.mjs";
 import { LocationIcon } from "./components/Icons/LocationIcon.mjs";
 import { LockerIcon } from "./components/Icons/LockerIcon.mjs";
 import { LockerOffIcon } from "./components/Icons/LockerOffIcon.mjs";
@@ -209,6 +213,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";
@@ -260,6 +266,7 @@ export {
   ArrowUpIcon,
   ArrowUpRightIcon,
   AtSignIcon,
+  AudioPlayer,
   AudioUpload,
   AutoMessageIcon,
   Autocomplete,
@@ -373,6 +380,7 @@ export {
   FlagIcon,
   FlameIcon,
   FlashIcon,
+  FloatingActionButton,
   FolderIcon,
   ForwardIcon,
   GalleryIcon,
@@ -381,6 +389,7 @@ export {
   GifIcon,
   GiftIcon,
   GoogleIcon,
+  GridViewIcon,
   HealthIcon,
   HeartIcon,
   HelpIcon,
@@ -399,6 +408,7 @@ export {
   LanguageIcon,
   Link,
   LinkIcon,
+  ListViewIcon,
   Loader,
   LocationIcon,
   LockerIcon,
@@ -438,6 +448,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.14.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",