@fanvue/ui 2.12.1 → 2.14.0

package/dist/index.d.ts

@@ -917,9 +917,38 @@ export declare type ChartIconProps = BaseIconProps;
  *   onSubmit={(text) => send(text)}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   showFileButton
+ *   onFileClick={() => openPicker()}
+ *   attachments={files}
+ *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   showFileButton
+ *   onFileClick={() => openPicker()}
+ *   attachmentPreviews={<CustomVideoStrip items={items} />}
+ * />
+ * ```
  */
 export declare const ChatInput: React_2.ForwardRefExoticComponent<ChatInputProps & React_2.RefAttributes<HTMLTextAreaElement>>;
 
+/** A single image thumbnail in the built-in attachment strip. */
+export declare interface ChatInputAttachmentItem {
+    /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */
+    id: string;
+    /** Image URL for the thumbnail. */
+    src: string;
+    /** Optional value passed to the remove control `aria-label`. */
+    ariaLabel?: string;
+}
+
 /**
  * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner
  * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and
@@ -964,6 +993,21 @@ export declare interface ChatInputProps extends Omit<React_2.TextareaHTMLAttribu
     selectValue?: string;
     /** Callback fired when the user picks a different dropdown option. */
     onSelectChange?: (value: string) => void;
+    /**
+     * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}
+     * is provided (including `null`).
+     */
+    attachments?: ChatInputAttachmentItem[];
+    /**
+     * Called when the user removes a built-in thumbnail. The remove button is disabled when this is
+     * omitted or the input is {@link ChatInputProps.disabled}.
+     */
+    onAttachmentRemove?: (id: string) => void;
+    /**
+     * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`
+     * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.
+     */
+    attachmentPreviews?: React_2.ReactNode;
     /** Additional className applied to the outermost container. */
     className?: string;
 }
@@ -1251,6 +1295,136 @@ export declare type CountSize = "16" | "24" | "32";
 /** Colour variant for the count badge. */
 export declare type CountVariant = "default" | "alert" | "brand" | "pink" | "info" | "success" | "warning";
 
+/**
+ * A portrait media card highlighting a creator with avatar, name, optional
+ * tagline, and up to two stacked action buttons over a background image.
+ *
+ * Pass zero, one, or two {@link Button} elements via `actions` to render the
+ * no-button, single-button, or two-button variants.
+ *
+ * @example
+ * ```tsx
+ * <CreatorCard
+ *   imageSrc="/creator.jpg"
+ *   name="Jane Doe"
+ *   description="MODEL & PODCASTER"
+ *   avatar={{ src: "/avatar.jpg", alt: "Jane Doe", fallback: "JD" }}
+ *   actions={
+ *     <>
+ *       <Button variant="brand" fullWidth>Join for free for 3 days</Button>
+ *       <Button variant="primary" fullWidth>Follow for Free</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+export declare const CreatorCard: React_2.ForwardRefExoticComponent<CreatorCardProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface CreatorCardProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** URL of the background media (image or video poster). */
+    imageSrc: string;
+    /** Alt text for the background image. @default "" */
+    imageAlt?: string;
+    /** Creator display name shown as the heading. */
+    name: string;
+    /** Optional secondary line shown below the name (e.g. role or tagline). */
+    description?: string;
+    /** Avatar props forwarded to the inner {@link Avatar}. */
+    avatar?: React_2.ComponentPropsWithoutRef<typeof Avatar>;
+    /**
+     * Action buttons rendered at the bottom of the card. Pass zero, one, or two
+     * `Button` elements to render variants with no, one, or two CTAs.
+     */
+    actions?: React_2.ReactNode;
+}
+
+/**
+ * A creator profile hero with a stylised blurred backdrop, central cover image,
+ * status pill, name, tagline, and primary call to action.
+ *
+ * @example
+ * ```tsx
+ * <CreatorCover
+ *   imageSrc="/creator.jpg"
+ *   imageAlt="Jane Doe"
+ *   name="JANE DOE"
+ *   tagline="GLOBAL POPSTAR"
+ *   tag="New Joiner"
+ *   action={<Button variant="primary" size="48" fullWidth>Join for free for 7 days</Button>}
+ * />
+ * ```
+ */
+export declare const CreatorCover: React_2.ForwardRefExoticComponent<CreatorCoverProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface CreatorCoverProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "title"> {
+    /** URL of the creator image displayed in the centre card. Also used as the blurred backdrop unless `backgroundSrc` is provided. */
+    imageSrc: string;
+    /** Alt text for the centre cover image. @default "" */
+    imageAlt?: string;
+    /** Override URL used for the blurred background image. @default `imageSrc` */
+    backgroundSrc?: string;
+    /** Creator's name, rendered as the heading. */
+    name: string;
+    /** Smaller subtitle below the name (e.g. "GLOBAL POPSTAR"). Rendered uppercase in the brand colour. */
+    tagline?: string;
+    /**
+     * Status label rendered as a pill overlapping the bottom of the cover image (e.g. "New Joiner").
+     * Strings render with default green pill styling; pass a node for custom markup.
+     */
+    tag?: CreatorCoverSlot;
+    /**
+     * Primary call to action displayed below the title.
+     */
+    action?: React_2.ReactNode;
+    /** When `true`, fades the bottom of the component to transparent and increases bottom padding to 64px. @default false */
+    fadeBottom?: boolean;
+}
+
+/** Slot that accepts a string (rendered as default styling) or a node for full control. */
+export declare type CreatorCoverSlot = string | React_2.ReactNode;
+
+/**
+ * A visual highlight tile showcasing a creator with an overlaid name and tagline.
+ *
+ * The tile renders a full-bleed image with a bottom gradient that ensures the
+ * overlaid text remains legible regardless of the underlying photography.
+ *
+ * @example
+ * ```tsx
+ * <CreatorTile
+ *   imageSrc="https://example.com/creator.jpg"
+ *   imageAlt="Portrait of Jane Doe"
+ *   name="JANE DOE"
+ *   tagline="GLOBAL MUSIC ICON"
+ * />
+ * ```
+ */
+export declare const CreatorTile: React_2.ForwardRefExoticComponent<CreatorTileProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Width-to-height ratio preset for the tile. */
+export declare type CreatorTileAspectRatio = "tall" | "medium" | "short";
+
+export declare interface CreatorTileProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Source URL of the creator's image. Rendered as the tile background. */
+    imageSrc: string;
+    /** Alt text for the creator image. Use an empty string for purely decorative imagery. */
+    imageAlt?: string;
+    /** Creator name shown as the prominent overlay heading. */
+    name: React_2.ReactNode;
+    /** Short tagline shown under the name in the brand accent color. */
+    tagline?: React_2.ReactNode;
+    /**
+     * Width-to-height ratio preset.
+     *
+     * - `tall` – 1:2 narrow portrait
+     * - `medium` – 2:3 classic poster (default)
+     * - `short` – 4:5 closer to square
+     *
+     * @default "medium"
+     */
+    aspectRatio?: CreatorTileAspectRatio;
+}
+
 /** A compact "×" cross icon (20 × 20). */
 export declare const CrossIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -1269,6 +1443,55 @@ export declare const CrownIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link CrownIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type CrownIconProps = BaseIconProps;
 
+/**
+ * Cycles through a list of strings with a slide-in/slide-out animation. Lives
+ * inline so it can sit inside divs, spans, buttons, or as a fake placeholder
+ * overlay.
+ *
+ * @example
+ * ```tsx
+ * <CyclingText items={["Thinking", "Reading messages", "Drafting reply"]} />
+ * ```
+ */
+export declare const CyclingText: React_2.ForwardRefExoticComponent<CyclingTextProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface CyclingTextProps extends Omit<React_2.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Strings to cycle through, in order. Cycles back to the first after the last. */
+    items: readonly string[];
+    /**
+     * Milliseconds to wait after the previous transition finishes before starting the next one.
+     * @default 2100
+     */
+    intervalMs?: number;
+    /** Slide and cross-fade duration in milliseconds. @default 200 */
+    transitionMs?: number;
+    /** Direction the outgoing item slides. @default "up" */
+    direction?: "up" | "down";
+    /** When true, freezes on the current item — no further cycling until cleared. @default false */
+    paused?: boolean;
+    /**
+     * How the wrapper sizes itself horizontally.
+     * - `longest` reserves space for the longest item — no width jitter as items cycle.
+     * - `current` shrinks/grows with each item, animating width between cycles.
+     * @default "longest"
+     */
+    sizing?: CyclingTextSizing;
+    /**
+     * When `true`, updates are exposed to assistive technologies via `aria-live="polite"`.
+     * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.
+     * @default false
+     */
+    announceChanges?: boolean;
+    /**
+     * Class applied to each visible label span (current + incoming). Use this for
+     * effects that have to sit on the text element itself, e.g. `background-clip: text`.
+     */
+    labelClassName?: string;
+}
+
+/** How the wrapper should be sized to accommodate variable-length items. */
+export declare type CyclingTextSizing = "longest" | "current";
+
 /** Root component that manages open/close state for a dialog. */
 export declare const Dialog: React_2.FC<DialogPrimitive.DialogProps>;
 
@@ -1757,6 +1980,8 @@ export declare const EmojiIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
 
 export declare const EmptyState: React_2.ForwardRefExoticComponent<EmptyStateProps & React_2.RefAttributes<HTMLElement>>;
 
+declare type EmptyStateMediaSize = "xs" | "sm" | "md" | "lg" | "xl";
+
 export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "title"> {
     /**
      * Matches Figma property `Property 1` (`Default` / `centered`).
@@ -1765,6 +1990,11 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
     variant?: EmptyStateVariant;
     /** Main heading. Strings use library heading styles; pass a node for full control. */
     title?: EmptyStateSlot;
+    /**
+     * Size of the title heading — mapped internally to bold heading typography tokens.
+     * @default "lg"
+     */
+    titleSize?: EmptyStateTitleSize;
     /** Supporting body copy. Strings use library body styles; pass a node for rich text. */
     description?: EmptyStateSlot;
     /**
@@ -1772,6 +2002,11 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
      * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.
      */
     media?: EmptyStateSlot;
+    /**
+     * Height of the media container.
+     * @default "lg"
+     */
+    mediaSize?: EmptyStateMediaSize;
     /**
      * Primary call to action.
      * A string renders a brand `Button` with that label; pass a node for links, loading, etc.
@@ -1787,6 +2022,8 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
 /** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */
 export declare type EmptyStateSlot = string | React_2.ReactNode;
 
+declare type EmptyStateTitleSize = "xs" | "sm" | "md" | "lg" | "xl";
+
 export declare type EmptyStateVariant = "default" | "centered";
 
 /** An "×" inside a filled circle icon for error states (20 × 20). */

package/dist/index.mjs

@@ -20,6 +20,10 @@ import { ChatInput } from "./components/ChatInput/ChatInput.mjs";
 import { Checkbox } from "./components/Checkbox/Checkbox.mjs";
 import { Chip } from "./components/Chip/Chip.mjs";
 import { Count } from "./components/Count/Count.mjs";
+import { CreatorCard } from "./components/CreatorCard/CreatorCard.mjs";
+import { CreatorCover } from "./components/CreatorCover/CreatorCover.mjs";
+import { CreatorTile } from "./components/CreatorTile/CreatorTile.mjs";
+import { CyclingText } from "./components/CyclingText/CyclingText.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
@@ -281,8 +285,12 @@ export {
   CompassIcon,
   CopyIcon,
   Count,
+  CreatorCard,
+  CreatorCover,
+  CreatorTile,
   CrossIcon,
   CrownIcon,
+  CyclingText,
   Dialog,
   DialogBody,
   DialogClose,

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