@fanvue/ui 3.15.0 → 3.17.0

package/dist/index.d.ts

@@ -380,6 +380,37 @@ export declare interface AudioPlayerProps extends Omit<React_2.HTMLAttributes<HT
 /** 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";
 
+/**
+ * A circular icon button that toggles audio recording. It owns the record
+ * lifecycle so consumers flip a single `status` prop instead of swapping an
+ * {@link IconButton}'s icon and colour: `idle` shows the microphone to start,
+ * `recording` turns destructive with a stop glyph to end. Used by
+ * {@link AudioUpload} for its in-progress stop control.
+ *
+ * @example
+ * ```tsx
+ * <AudioRecordButton status={recording ? "recording" : "idle"} onClick={toggle} />
+ * ```
+ */
+export declare const AudioRecordButton: React_2.ForwardRefExoticComponent<AudioRecordButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface AudioRecordButtonProps extends Omit<IconButtonProps, "icon" | "variant" | "aria-label"> {
+    /** Recording state; drives the icon and colour. @default "idle" */
+    status?: AudioRecordButtonStatus;
+    /**
+     * Accessible name. Falls back to a status-aware default ("Record" /
+     * "Stop recording") when omitted so screen readers announce the action.
+     */
+    "aria-label"?: string;
+}
+
+/**
+ * Recording state of the button. Drives the icon and colour: `idle` shows the
+ * microphone to start a recording, `recording` shows the stop glyph with the
+ * destructive treatment to end it.
+ */
+export declare type AudioRecordButtonStatus = "idle" | "recording";
+
 /**
  * Audio file upload with drag-and-drop and optional in-browser recording.
  * Supports file validation, multiple files, and real-time waveform visualization during recording.
@@ -1255,6 +1286,82 @@ export declare interface ChatInputSelectOption {
     icon?: React_2.ReactNode;
 }
 
+/**
+ * A single chat message rendered as a bubble. Sender messages sit on the right
+ * with a green bubble and a delivery tick; receiver messages sit on the left
+ * with a grey bubble and an avatar. Supports plain text, a typing indicator, a
+ * voice message with waveform, and a deleted-message placeholder.
+ *
+ * Text bubbles place the timestamp inline after short messages and drop it to
+ * the bottom-right corner once the text wraps, so no variant switch is needed
+ * for short versus long content.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage user="sender" message="On my way!" time="16:00" status="read" />
+ * <ChatMessage user="receiver" message="See you soon" time="16:01" avatarSrc="/jane.jpg" online />
+ * <ChatMessage user="receiver" variant="typing" avatarSrc="/jane.jpg" />
+ * ```
+ */
+export declare const ChatMessage: React_2.ForwardRefExoticComponent<ChatMessageProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ChatMessageProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Who sent the message. `"sender"` is the current user (right-aligned, green
+     * bubble, delivery tick). `"receiver"` is the other party (left-aligned, grey
+     * bubble, with avatar). @default "receiver"
+     */
+    user?: ChatMessageUser;
+    /** The kind of content the message carries. @default "text" */
+    variant?: ChatMessageVariant;
+    /** Message body for the `"text"` variant. Keep it to inline content. */
+    message?: React_2.ReactNode;
+    /** Timestamp shown with the message, e.g. `"16:00"`. */
+    time?: string;
+    /**
+     * Delivery status shown on sender messages (a double tick). Ignored for
+     * receiver messages. `"read"` renders the tick in the read colour. @default "delivered"
+     */
+    status?: ChatMessageStatus;
+    /** Duration label for the `"audio"` variant, e.g. `"0:05"`. @default "0:00" */
+    audioDuration?: string;
+    /**
+     * Relative bar heights (values `0`–`1`) for the `"audio"` waveform. Defaults
+     * to a flat row of dots matching the unplayed design state.
+     */
+    waveform?: number[];
+    /** Whether the audio is playing (controlled). Pairs with {@link onPlayingChange}. */
+    playing?: boolean;
+    /** Initial playing state when uncontrolled. @default false */
+    defaultPlaying?: boolean;
+    /** Fired when the audio play/pause button is pressed, with the next playing state. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Render the receiver avatar. Reserves the avatar space when `false` so grouped bubbles stay aligned. @default true */
+    showAvatar?: boolean;
+    /** Avatar image URL for receiver messages. */
+    avatarSrc?: string;
+    /** Avatar alt text. @default "Avatar" */
+    avatarAlt?: string;
+    /** Avatar fallback (initials or icon) shown before the image loads. */
+    avatarFallback?: React_2.ReactNode;
+    /** Show the online indicator on the receiver avatar. @default false */
+    online?: boolean;
+    /** Accessible label for the typing indicator. @default "Typing" */
+    typingLabel?: string;
+    /** Text shown for the `"deleted"` variant. @default "Message deleted" */
+    deletedLabel?: string;
+    /** Accessible label for the audio play button. @default "Play" */
+    playLabel?: string;
+    /** Accessible label for the audio pause button. @default "Pause" */
+    pauseLabel?: string;
+}
+
+export declare type ChatMessageStatus = "delivered" | "read";
+
+export declare type ChatMessageUser = "sender" | "receiver";
+
+export declare type ChatMessageVariant = "text" | "typing" | "audio" | "deleted";
+
 /**
  * A checkbox input with optional label and helper text. Supports checked,
  * unchecked, and indeterminate states.
@@ -1779,6 +1886,20 @@ export declare interface CyclingTextProps extends Omit<React_2.HTMLAttributes<HT
 /** How the wrapper should be sized to accommodate variable-length items. */
 export declare type CyclingTextSizing = "longest" | "current";
 
+/**
+ * Dense grid view icon (3×3 tiles) — the compact-grid counterpart of
+ * {@link GridViewIcon}. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <DenseGridViewIcon size={24} />
+ * ```
+ */
+export declare const DenseGridViewIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link DenseGridViewIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type DenseGridViewIconProps = BaseIconProps;
+
 /** Root component that manages open/close state for a dialog. */
 export declare const Dialog: React_2.FC<DialogPrimitive.DialogProps>;
 
@@ -2221,7 +2342,7 @@ export declare type DrawerTriggerProps = React_2.ComponentPropsWithoutRef<typeof
 export declare type DrawerVariant = "panel" | "sheet";
 
 /** Root component that manages open/close state for a dropdown menu. */
-export declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, children, ...props }: DropdownMenuProps): JSX.Element;
+export declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, variant, children, ...props }: DropdownMenuProps): JSX.Element;
 
 /**
  * The positioned content panel rendered inside a portal.
@@ -2248,7 +2369,11 @@ export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<Drop
 export declare interface DropdownMenuContentProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
 }
 
-/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */
+/**
+ * Groups related menu items. Accepts an optional `DropdownMenuLabel`.
+ *
+ * Requires Radix menu context — not supported inside a `variant="sheet"` menu.
+ */
 export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
 /** Props for the {@link DropdownMenuGroup} component. */
@@ -2345,7 +2470,13 @@ export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWit
      * Takes precedence over `leadingIcon`.
      */
     avatar?: React_2.ReactNode;
-    /** Icon (or other node) rendered after the label. */
+    /**
+     * Icon (or other node) rendered after the label. When
+     * {@link DropdownMenuItemProps.selected} is true and no `trailingIcon` is
+     * given, the built-in selected check indicator renders in this slot
+     * instead — pass a `trailingIcon` to use a custom selected indicator (e.g.
+     * a themed tick) rather than the default one.
+     */
     trailingIcon?: React_2.ReactNode;
     /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */
     count?: React_2.ReactNode;
@@ -2390,6 +2521,8 @@ export declare interface DropdownMenuLabelProps extends React_2.ComponentPropsWi
 
 /** Props for the {@link DropdownMenu} root component. */
 export declare interface DropdownMenuProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {
+    /** How the menu presents its content. @default "menu" */
+    variant?: DropdownMenuVariant;
 }
 
 /**
@@ -2403,6 +2536,8 @@ export declare interface DropdownMenuProps extends React_2.ComponentPropsWithout
  *   <DropdownMenuRadioItem value="oldest">Oldest first</DropdownMenuRadioItem>
  * </DropdownMenuRadioGroup>
  * ```
+ *
+ * Requires Radix menu context — not supported inside a `variant="sheet"` menu.
  */
 export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -2447,6 +2582,16 @@ export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<Omit
 /** Props for the {@link DropdownMenuTrigger} component. */
 export declare type DropdownMenuTriggerProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
 
+/**
+ * How a {@link DropdownMenu} presents its content.
+ * - `"menu"` (default) — a Radix-positioned panel anchored to the trigger.
+ * - `"sheet"` — a bottom drawer (via {@link Drawer}), for mobile/touch viewports.
+ *
+ * The viewport decision belongs to the consumer (it owns the breakpoint
+ * source of truth), so pass e.g. `variant={isDesktop ? "menu" : "sheet"}`.
+ */
+declare type DropdownMenuVariant = "menu" | "sheet";
+
 /**
  * Edit icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -3326,6 +3471,40 @@ export declare const MassMessageIcon: React_2.ForwardRefExoticComponent<BaseIcon
 /** Props for {@link MassMessageIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type MassMessageIconProps = BaseIconProps;
 
+/**
+ * A compact circular indicator that surfaces the moderation state of a piece of
+ * media — flagged, removed, or sensitive. Typically overlaid on a thumbnail or
+ * attachment.
+ *
+ * Renders as `role="img"` with a descriptive `aria-label`; the inner glyph is
+ * decorative.
+ *
+ * @example
+ * ```tsx
+ * <MediaStatusIndicator status="sensitive" />
+ * <MediaStatusIndicator status="removed" label="Removed for violating guidelines" />
+ * ```
+ */
+export declare const MediaStatusIndicator: React_2.ForwardRefExoticComponent<MediaStatusIndicatorProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface MediaStatusIndicatorProps extends Omit<React_2.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Which media state to represent. @default "default" */
+    status?: MediaStatusIndicatorStatus;
+    /**
+     * Accessible label announced by assistive tech. Defaults to a per-status
+     * description; pass your own for localisation or extra context.
+     */
+    label?: string;
+}
+
+/**
+ * State represented by the indicator.
+ * - `"default"`: media flagged / pending review (amber).
+ * - `"removed"`: media removed for a policy violation (red).
+ * - `"sensitive"`: sensitive content hidden behind an overlay (dark).
+ */
+export declare type MediaStatusIndicatorStatus = "default" | "removed" | "sensitive";
+
 /**
  * Megaphone icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -4298,13 +4477,38 @@ export declare const SelectGroup: React_2.ForwardRefExoticComponent<SelectPrimit
 export declare type SelectGroupProps = React_2.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
 
 /**
- * An individual option inside {@link SelectContent}.
+ * An individual option inside {@link SelectContent}, following the V2 Menu Item spec.
+ *
+ * Supports a leading icon or avatar, an optional two-line layout via `description`,
+ * and the standard hover / selected / disabled states. The selected row is marked
+ * with a trailing check indicator.
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="jane" avatar={<Avatar size={24} fallback="JD" />} description="Product designer">
+ *   Jane Doe
+ * </SelectItem>
+ * ```
  */
 export declare const SelectItem: React_2.ForwardRefExoticComponent<SelectItemProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface SelectItemProps extends React_2.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    /** Row height. Defaults to the parent {@link Select} size (`48`/`40` → `40`, `32` → `32`). */
+    size?: SelectItemSize;
+    /** Icon (or other node) rendered before the label. Ignored when {@link SelectItemProps.avatar} is set. */
+    leadingIcon?: React_2.ReactNode;
+    /**
+     * Leading avatar rendered in place of {@link SelectItemProps.leadingIcon}, for rows
+     * representing a person or account. Pass an `Avatar` sized to `24`. Takes precedence over `leadingIcon`.
+     */
+    avatar?: React_2.ReactNode;
+    /** Optional secondary text rendered on a second line below the label. */
+    description?: React_2.ReactNode;
 }
 
+/** Dropdown row height in pixels, matching the V2 Menu Item spec. */
+export declare type SelectItemSize = "40" | "32";
+
 /**
  * A non-interactive label shown above a {@link SelectGroup}.
  */
@@ -4632,6 +4836,43 @@ export declare const StopIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 /** Props for {@link StopIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type StopIconProps = BaseIconProps;
 
+/**
+ * A subscription / purchase button pairing an action label with the current
+ * price and an optional struck-through previous price. Built on {@link Button},
+ * so it inherits the same variants, sizes, `negative` dark-surface treatment,
+ * `fullWidth`, loading, and disabled behaviour.
+ *
+ * The accessible name defaults to the label plus pricing (e.g. `"Join now, $9.99,
+ * was $19.99"`); pass `aria-label` to override.
+ *
+ * @example
+ * ```tsx
+ * <SubscribeButton price="$9.99/mo" discount="$19.99" variant="brand" fullWidth>
+ *   Join now
+ * </SubscribeButton>
+ * ```
+ */
+export declare const SubscribeButton: React_2.ForwardRefExoticComponent<SubscribeButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface SubscribeButtonProps extends Omit<ButtonProps, "variant" | "size" | "price" | "discount" | "leftIcon" | "rightIcon" | "asChild"> {
+    /** Visual style variant. `brand` is the Figma "Upsell" (green) type. @default "primary" */
+    variant?: SubscribeButtonVariant;
+    /** Height of the button in pixels. @default "48" */
+    size?: SubscribeButtonSize;
+    /** Current price shown on the trailing side (e.g. `"$9.99/mo"`). */
+    price: string;
+    /** Previous price rendered struck-through before {@link SubscribeButtonProps.price}. */
+    discount?: string;
+    /** Leading action label. @default "Join now" */
+    children?: React_2.ReactNode;
+}
+
+/** Height of the subscribe button in pixels. */
+export declare type SubscribeButtonSize = "48" | "40" | "32";
+
+/** Visual style variant of the subscribe button. Mirrors the V2 Subscribe Button "Type" set (`brand` is Figma's "Upsell"). */
+export declare type SubscribeButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "brand";
+
 /** A checkmark inside a filled circle icon for success states (20 × 20). */
 export declare const SuccessIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -5812,6 +6053,82 @@ export declare const VipBadgeIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A voice-note audio player: a play/pause control, an amplitude waveform, and a
+ * timestamp — for voice messages and audio attachments in a conversation.
+ *
+ * Two modes: pass `src` for a self-contained player that decodes the waveform,
+ * plays real audio, tracks live progress and is seekable; or omit `src` and
+ * drive it with `playing`/`progress` + `onPlayPause` for a presentational,
+ * fully-controlled voice note. `flat` renders a compact dotted preview and
+ * `negative` adapts it to dark message bubbles.
+ *
+ * @example
+ * ```tsx
+ * <VoiceNote src="https://example.com/note.mp3" duration={5} />
+ * <VoiceNote time="0:05" progress={0.4} playing onPlayPause={toggle} />
+ * ```
+ */
+export declare const VoiceNote: React_2.ForwardRefExoticComponent<VoiceNoteProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface VoiceNoteProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause"> {
+    /**
+     * URL of the audio to play. When set, the component manages a real `<audio>`
+     * element: it decodes the waveform, plays/pauses, tracks live progress and is
+     * seekable — `waveform`/`progress` are derived automatically. Leave unset for
+     * a presentational, fully-controlled voice note.
+     */
+    src?: string;
+    /** Fallback total duration (seconds), used until the media's metadata loads. */
+    duration?: number;
+    /** Amplitude values (0–1), one per bar. Ignored when `src` is set. Falls back to a built-in pattern. */
+    waveform?: number[];
+    /** Visual style; `flat` renders a simplified dotted preview. @default "default" */
+    variant?: VoiceNoteVariant;
+    /** Size preset. @default "default" */
+    size?: VoiceNoteSize;
+    /** Dark-surface treatment for use on message bubbles. @default false */
+    negative?: boolean;
+    /**
+     * Playback progress (0–1) for the presentational mode. When set, the waveform
+     * splits into played/unplayed bars (the "Listening" state). Ignored when `src`
+     * is set (progress comes from the media element).
+     */
+    progress?: number;
+    /** Whether audio is playing (controlled) — toggles the play/pause icon. */
+    playing?: boolean;
+    /** Initial playing state (uncontrolled). @default false */
+    defaultPlaying?: boolean;
+    /** Called with the next playing state when the play/pause control is pressed. */
+    onPlayPause?: (playing: boolean) => void;
+    /** Called when audio playback reaches the end (only in `src` mode). */
+    onEnded?: () => void;
+    /** Timestamp or duration label, e.g. "0:05". Ignored when `src` is set (derived from the media). */
+    time?: string;
+    /** File name shown when the audio is an uploaded file rather than a voice note. */
+    fileName?: string;
+    /** Show the play/pause control. @default true */
+    showControls?: boolean;
+    /** Show the timestamp label. @default true */
+    showTimestamp?: boolean;
+    /** Show a remove button (calls {@link VoiceNoteProps.onRemove}). @default false */
+    showRemove?: boolean;
+    /** Called when the remove button is pressed. */
+    onRemove?: () => void;
+    /** Accessible name for the play/pause control. Defaults to "Play"/"Pause". */
+    playButtonLabel?: string;
+    /** Accessible name for the remove button. @default "Remove" */
+    removeButtonLabel?: string;
+    /** Accessible name for the whole player. @default "Voice note" */
+    "aria-label"?: string;
+}
+
+/** Size preset for the voice note. */
+export declare type VoiceNoteSize = "default" | "small";
+
+/** Visual style of the waveform. */
+export declare type VoiceNoteVariant = "default" | "flat";
+
 /**
  * Wallet icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *

package/dist/index.mjs

@@ -6,6 +6,7 @@ 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 { AudioRecordButton } from "./components/AudioRecordButton/AudioRecordButton.mjs";
 import { AudioUpload } from "./components/AudioUpload/AudioUpload.mjs";
 import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs";
 import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
@@ -18,6 +19,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbP
 import { Button } from "./components/Button/Button.mjs";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/Card/Card.mjs";
 import { ChatInput } from "./components/ChatInput/ChatInput.mjs";
+import { ChatMessage } from "./components/ChatMessage/ChatMessage.mjs";
 import { Checkbox } from "./components/Checkbox/Checkbox.mjs";
 import { Chip } from "./components/Chip/Chip.mjs";
 import { Count } from "./components/Count/Count.mjs";
@@ -77,6 +79,7 @@ import { CopyIcon } from "./components/Icons/CopyIcon.mjs";
 import { CrossCircleIcon } from "./components/Icons/CrossCircleIcon.mjs";
 import { CrossIcon } from "./components/Icons/CrossIcon.mjs";
 import { CrownIcon } from "./components/Icons/CrownIcon.mjs";
+import { DenseGridViewIcon } from "./components/Icons/DenseGridViewIcon.mjs";
 import { DiamondIcon } from "./components/Icons/DiamondIcon.mjs";
 import { DiscordIcon } from "./components/Icons/DiscordIcon.mjs";
 import { DiscountIcon } from "./components/Icons/DiscountIcon.mjs";
@@ -204,6 +207,7 @@ 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 { MediaStatusIndicator } from "./components/MediaStatusIndicator/MediaStatusIndicator.mjs";
 import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
 import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs";
 import { PageSelector } from "./components/PageSelector/PageSelector.mjs";
@@ -227,6 +231,7 @@ import { Slider } from "./components/Slider/Slider.mjs";
 import { Snackbar } from "./components/Snackbar/Snackbar.mjs";
 import { Stepper } from "./components/Stepper/Stepper.mjs";
 import { StepperStep } from "./components/Stepper/StepperStep.mjs";
+import { SubscribeButton } from "./components/SubscribeButton/SubscribeButton.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
@@ -243,6 +248,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./comp
 import { UserDisplayName } from "./components/UserDisplayName/UserDisplayName.mjs";
 import { UserHandle } from "./components/UserHandle/UserHandle.mjs";
 import { UserItem } from "./components/UserItem/UserItem.mjs";
+import { VoiceNote } from "./components/VoiceNote/VoiceNote.mjs";
 import { cn } from "./utils/cn.mjs";
 import { getInitials } from "./utils/getInitials.mjs";
 import { useSuppressClickAfterDrag } from "./utils/useSuppressClickAfterDrag.mjs";
@@ -267,6 +273,7 @@ export {
   ArrowUpRightIcon,
   AtSignIcon,
   AudioPlayer,
+  AudioRecordButton,
   AudioUpload,
   AutoMessageIcon,
   Autocomplete,
@@ -302,6 +309,7 @@ export {
   CardTitle,
   ChartIcon,
   ChatInput,
+  ChatMessage,
   CheckBoxOffIcon,
   CheckBoxOnIcon,
   CheckCircleIcon,
@@ -328,6 +336,7 @@ export {
   CrossIcon,
   CrownIcon,
   CyclingText,
+  DenseGridViewIcon,
   Dialog,
   DialogBody,
   DialogClose,
@@ -418,6 +427,7 @@ export {
   LogoutIcon,
   LoveIcon,
   MassMessageIcon,
+  MediaStatusIndicator,
   MegaphoneIcon,
   MenuCloseIcon,
   MenuIcon,
@@ -482,6 +492,7 @@ export {
   Stepper,
   StepperStep,
   StopIcon,
+  SubscribeButton,
   SuccessIcon,
   SunIcon,
   Support2Icon,
@@ -554,6 +565,7 @@ export {
   VerifiedIcon,
   VideoIcon,
   VipBadgeIcon,
+  VoiceNote,
   WalletIcon,
   WarningIcon,
   WarningTriangleIcon,

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/dist/styles/base.css

@@ -13,6 +13,15 @@
     scrollbar-gutter: stable;
   }
 
+  /*
+   * Neutralise the browser's autofill highlight with the inset box-shadow
+   * hack. The shadow colour must match the input container background
+   * (TextField/TextArea render a transparent <input> inside a
+   * bg-inputs-inputs-primary wrapper) — a translucent tint here paints a
+   * visibly lighter band inside the field in dark mode. Note this rule
+   * cannot be overridden by unlayered !important declarations downstream:
+   * for !important the cascade reverses, so @layer base wins.
+   */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
@@ -26,8 +35,8 @@
   textarea:autofill:hover,
   textarea:autofill:focus {
     -webkit-text-fill-color: var(--color-content-primary);
-    -webkit-box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
-    box-shadow: inset 0 0 0 1000px var(--color-neutral-alphas-50) !important;
+    -webkit-box-shadow: inset 0 0 0 1000px var(--color-inputs-inputs-primary) !important;
+    box-shadow: inset 0 0 0 1000px var(--color-inputs-inputs-primary) !important;
     background-clip: padding-box !important;
     transition: background-color 9999s ease-in-out 0s;
   }

package/dist/styles/theme.css

@@ -637,7 +637,7 @@
 
 .dark {
   --color-neutral-alphas-50: var(--primitives-color-whitealpha-100);
-  --color-neutral-alphas-100: var(--primitives-color-whitealpha-100);
+  --color-neutral-alphas-100: #ffffff26;
   --color-neutral-alphas-150: #ffffffcc;
   --color-neutral-alphas-200: var(--primitives-color-whitealpha-200);
   --color-neutral-alphas-300: var(--primitives-color-whitealpha-300);

package/dist/utils/audioWaveform.mjs

@@ -0,0 +1,76 @@
+"use client";
+const RAW_PEAK_COUNT = 128;
+function formatTime(seconds) {
+  if (seconds === void 0 || !Number.isFinite(seconds)) return "--:--";
+  const totalSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainingSeconds = totalSeconds % 60;
+  return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
+}
+function hashString(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function createSeededRandom(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateFallbackPeaks(src, count) {
+  const random = createSeededRandom(hashString(src));
+  return Array.from({ length: count }, () => 0.2 + random() * 0.8);
+}
+function computePeaksFromChannelData(channelData, count) {
+  const blockSize = Math.max(1, Math.floor(channelData.length / count));
+  const peaks = [];
+  for (let i = 0; i < count; i++) {
+    const start = i * blockSize;
+    let max = 0;
+    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {
+      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));
+    }
+    peaks.push(max);
+  }
+  return peaks;
+}
+function resamplePeaks(peaks, barCount) {
+  if (peaks.length === 0 || barCount <= 0) return [];
+  const step = peaks.length / barCount;
+  return Array.from(
+    { length: barCount },
+    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0
+  );
+}
+async function decodeAudioPeaks(src, signal) {
+  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  if (!AudioContextCtor) throw new Error("WebAudio unsupported");
+  const response = await fetch(src, { signal });
+  const arrayBuffer = await response.arrayBuffer();
+  const audioContext = new AudioContextCtor();
+  try {
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);
+  } finally {
+    if (audioContext.state !== "closed") audioContext.close().catch(() => {
+    });
+  }
+}
+export {
+  RAW_PEAK_COUNT,
+  computePeaksFromChannelData,
+  createSeededRandom,
+  decodeAudioPeaks,
+  formatTime,
+  generateFallbackPeaks,
+  hashString,
+  resamplePeaks
+};
+//# sourceMappingURL=audioWaveform.mjs.map

package/dist/utils/audioWaveform.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioWaveform.mjs","sources":["../../src/utils/audioWaveform.ts"],"sourcesContent":["/** Number of amplitude samples decoded/kept internally, resampled to the rendered bar count. */\nexport const RAW_PEAK_COUNT = 128;\n\n/** Formats a duration in seconds as `m:ss`, or `--:--` when unknown. */\nexport function formatTime(seconds: number | undefined): string {\n  if (seconds === undefined || !Number.isFinite(seconds)) return \"--:--\";\n  const totalSeconds = Math.max(0, Math.floor(seconds));\n  const minutes = Math.floor(totalSeconds / 60);\n  const remainingSeconds = totalSeconds % 60;\n  return `${minutes}:${String(remainingSeconds).padStart(2, \"0\")}`;\n}\n\n/** Deterministic 32-bit string hash (FNV-1a), used to seed the fallback waveform. */\nexport function hashString(value: string): number {\n  let hash = 2166136261;\n  for (let i = 0; i < value.length; i++) {\n    hash ^= value.charCodeAt(i);\n    hash = Math.imul(hash, 16777619);\n  }\n  return hash >>> 0;\n}\n\n/** Seeded PRNG (mulberry32) — deterministic across runs, unlike `Math.random`. */\nexport function createSeededRandom(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** Deterministic placeholder amplitudes used when audio can't be decoded (network/CORS/format failure). */\nexport function generateFallbackPeaks(src: string, count: number): number[] {\n  const random = createSeededRandom(hashString(src));\n  return Array.from({ length: count }, () => 0.2 + random() * 0.8);\n}\n\n/** Downsamples decoded PCM data to `count` peak (max-abs) amplitudes. */\nexport function computePeaksFromChannelData(channelData: Float32Array, count: number): number[] {\n  const blockSize = Math.max(1, Math.floor(channelData.length / count));\n  const peaks: number[] = [];\n  for (let i = 0; i < count; i++) {\n    const start = i * blockSize;\n    let max = 0;\n    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {\n      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));\n    }\n    peaks.push(max);\n  }\n  return peaks;\n}\n\n/** Resamples a peaks array to `barCount` values (nearest-neighbour). */\nexport function resamplePeaks(peaks: number[], barCount: number): number[] {\n  if (peaks.length === 0 || barCount <= 0) return [];\n  const step = peaks.length / barCount;\n  return Array.from(\n    { length: barCount },\n    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0,\n  );\n}\n\n/** Decodes `src` via WebAudio and returns downsampled peak amplitudes. Throws on any failure. */\nexport async function decodeAudioPeaks(src: string, signal: AbortSignal): Promise<number[]> {\n  const AudioContextCtor =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!AudioContextCtor) throw new Error(\"WebAudio unsupported\");\n\n  const response = await fetch(src, { signal });\n  const arrayBuffer = await response.arrayBuffer();\n  const audioContext = new AudioContextCtor();\n  try {\n    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);\n  } finally {\n    if (audioContext.state !== \"closed\") audioContext.close().catch(() => {});\n  }\n}\n"],"names":[],"mappings":";AACO,MAAM,iBAAiB;AAGvB,SAAS,WAAW,SAAqC;AAC9D,MAAI,YAAY,UAAa,CAAC,OAAO,SAAS,OAAO,EAAG,QAAO;AAC/D,QAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC;AACpD,QAAM,UAAU,KAAK,MAAM,eAAe,EAAE;AAC5C,QAAM,mBAAmB,eAAe;AACxC,SAAO,GAAG,OAAO,IAAI,OAAO,gBAAgB,EAAE,SAAS,GAAG,GAAG,CAAC;AAChE;AAGO,SAAS,WAAW,OAAuB;AAChD,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,YAAQ,MAAM,WAAW,CAAC;AAC1B,WAAO,KAAK,KAAK,MAAM,QAAQ;AAAA,EACjC;AACA,SAAO,SAAS;AAClB;AAGO,SAAS,mBAAmB,MAA4B;AAC7D,MAAI,QAAQ;AACZ,SAAO,MAAM;AACX,YAAS,QAAQ,aAAc;AAC/B,QAAI,IAAI,KAAK,KAAK,QAAS,UAAU,IAAK,IAAI,KAAK;AACnD,QAAK,IAAI,KAAK,KAAK,IAAK,MAAM,GAAI,KAAK,CAAC,IAAK;AAC7C,aAAS,IAAK,MAAM,QAAS,KAAK;AAAA,EACpC;AACF;AAGO,SAAS,sBAAsB,KAAa,OAAyB;AAC1E,QAAM,SAAS,mBAAmB,WAAW,GAAG,CAAC;AACjD,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,MAAM,MAAM,OAAA,IAAW,GAAG;AACjE;AAGO,SAAS,4BAA4B,aAA2B,OAAyB;AAC9F,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,MAAM,YAAY,SAAS,KAAK,CAAC;AACpE,QAAM,QAAkB,CAAA;AACxB,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,UAAM,QAAQ,IAAI;AAClB,QAAI,MAAM;AACV,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,IAAI,YAAY,QAAQ,KAAK;AACpE,YAAM,KAAK,IAAI,KAAK,KAAK,IAAI,YAAY,QAAQ,CAAC,KAAK,CAAC,CAAC;AAAA,IAC3D;AACA,UAAM,KAAK,GAAG;AAAA,EAChB;AACA,SAAO;AACT;AAGO,SAAS,cAAc,OAAiB,UAA4B;AACzE,MAAI,MAAM,WAAW,KAAK,YAAY,UAAU,CAAA;AAChD,QAAM,OAAO,MAAM,SAAS;AAC5B,SAAO,MAAM;AAAA,IACX,EAAE,QAAQ,SAAA;AAAA,IACV,CAAC,GAAG,MAAM,MAAM,KAAK,IAAI,MAAM,SAAS,GAAG,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,KAAK;AAAA,EAAA;AAEzE;AAGA,eAAsB,iBAAiB,KAAa,QAAwC;AAC1F,QAAM,mBACJ,OAAO,gBACN,OAAmE;AACtE,MAAI,CAAC,iBAAkB,OAAM,IAAI,MAAM,sBAAsB;AAE7D,QAAM,WAAW,MAAM,MAAM,KAAK,EAAE,QAAQ;AAC5C,QAAM,cAAc,MAAM,SAAS,YAAA;AACnC,QAAM,eAAe,IAAI,iBAAA;AACzB,MAAI;AACF,UAAM,cAAc,MAAM,aAAa,gBAAgB,WAAW;AAClE,WAAO,4BAA4B,YAAY,eAAe,CAAC,GAAG,cAAc;AAAA,EAClF,UAAA;AACE,QAAI,aAAa,UAAU,uBAAuB,MAAA,EAAQ,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EAC1E;AACF;"}