@fanvue/ui 3.13.0 → 3.14.0

package/dist/index.d.ts

@@ -332,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.
@@ -1812,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. */
@@ -2603,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.
  *
@@ -2705,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.
  *
@@ -3054,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`.
@@ -4071,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"> {
@@ -4087,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). */

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";
@@ -262,6 +266,7 @@ export {
   ArrowUpIcon,
   ArrowUpRightIcon,
   AtSignIcon,
+  AudioPlayer,
   AudioUpload,
   AutoMessageIcon,
   Autocomplete,
@@ -375,6 +380,7 @@ export {
   FlagIcon,
   FlameIcon,
   FlashIcon,
+  FloatingActionButton,
   FolderIcon,
   ForwardIcon,
   GalleryIcon,
@@ -383,6 +389,7 @@ export {
   GifIcon,
   GiftIcon,
   GoogleIcon,
+  GridViewIcon,
   HealthIcon,
   HeartIcon,
   HelpIcon,
@@ -401,6 +408,7 @@ export {
   LanguageIcon,
   Link,
   LinkIcon,
+  ListViewIcon,
   Loader,
   LocationIcon,
   LockerIcon,

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