@fanvue/ui 2.13.0 → 2.14.1

package/dist/components/CyclingText/useCyclingCycle.mjs

@@ -0,0 +1,195 @@
+"use client";
+import * as React from "react";
+const initialCycleState = {
+  currentIndex: 0,
+  incomingIndex: null,
+  incomingEntered: false,
+  transitioning: false
+};
+function cycleReducer(state, action) {
+  switch (action.type) {
+    case "tick": {
+      if (action.itemCount <= 1) return state;
+      const next = (state.currentIndex + 1) % action.itemCount;
+      return {
+        ...state,
+        incomingIndex: next,
+        incomingEntered: false,
+        transitioning: true
+      };
+    }
+    case "incoming_entered":
+      return { ...state, incomingEntered: true };
+    case "transition_complete": {
+      if (!state.transitioning || state.incomingIndex === null) return state;
+      return {
+        currentIndex: state.incomingIndex,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    }
+    case "pause_clear":
+      return {
+        ...state,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    case "clamp_after_items_change": {
+      if (action.itemCount === 0) return state;
+      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;
+      return {
+        currentIndex: idx,
+        incomingIndex: null,
+        incomingEntered: false,
+        transitioning: false
+      };
+    }
+    default:
+      return state;
+  }
+}
+function useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs) {
+  const [cycle, dispatch] = React.useReducer(cycleReducer, initialCycleState);
+  const enterOuterFrameRef = React.useRef(null);
+  const enterInnerFrameRef = React.useRef(null);
+  const fallbackTimerRef = React.useRef(null);
+  const cycleTimeoutRef = React.useRef(null);
+  const clearCycleTimeout = React.useCallback(() => {
+    if (cycleTimeoutRef.current !== null) {
+      clearTimeout(cycleTimeoutRef.current);
+      cycleTimeoutRef.current = null;
+    }
+  }, []);
+  const clearAnimationArtifacts = React.useCallback(() => {
+    if (enterOuterFrameRef.current !== null) {
+      cancelAnimationFrame(enterOuterFrameRef.current);
+      enterOuterFrameRef.current = null;
+    }
+    if (enterInnerFrameRef.current !== null) {
+      cancelAnimationFrame(enterInnerFrameRef.current);
+      enterInnerFrameRef.current = null;
+    }
+    if (fallbackTimerRef.current !== null) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
+    clearCycleTimeout();
+  }, [clearCycleTimeout]);
+  const itemCount = items.length;
+  React.useEffect(() => {
+    if (itemCount === 0) return;
+    dispatch({ type: "clamp_after_items_change", itemCount });
+  }, [itemCount]);
+  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;
+  const safeIncomingIndex = cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;
+  const currentLabel = itemCount === 0 ? "" : items[safeCurrentIndex] ?? "";
+  const incomingLabel = safeIncomingIndex === null ? null : items[safeIncomingIndex] ?? "";
+  const longestItem = React.useMemo(() => {
+    if (itemCount === 0) return "";
+    let longest = items[0] ?? "";
+    for (const item of items) {
+      if (item.length > longest.length) longest = item;
+    }
+    return longest;
+  }, [items, itemCount]);
+  const sizingLabel = sizing === "longest" ? longestItem : incomingLabel && incomingLabel.length > currentLabel.length ? incomingLabel : currentLabel;
+  const shouldCycle = !paused && docVisible && itemCount > 1;
+  React.useEffect(() => {
+    if (!shouldCycle || itemCount <= 1) {
+      clearCycleTimeout();
+      return;
+    }
+    if (cycle.transitioning) {
+      return;
+    }
+    cycleTimeoutRef.current = setTimeout(() => {
+      cycleTimeoutRef.current = null;
+      dispatch({ type: "tick", itemCount });
+    }, intervalMs);
+    return () => {
+      clearCycleTimeout();
+    };
+  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);
+  React.useEffect(() => {
+    if (paused) {
+      clearAnimationArtifacts();
+      dispatch({ type: "pause_clear" });
+    }
+  }, [paused, clearAnimationArtifacts]);
+  React.useEffect(() => {
+    return () => {
+      clearAnimationArtifacts();
+    };
+  }, [clearAnimationArtifacts]);
+  React.useEffect(() => {
+    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {
+      return;
+    }
+    if (enterOuterFrameRef.current !== null) {
+      cancelAnimationFrame(enterOuterFrameRef.current);
+    }
+    if (enterInnerFrameRef.current !== null) {
+      cancelAnimationFrame(enterInnerFrameRef.current);
+    }
+    enterOuterFrameRef.current = requestAnimationFrame(() => {
+      enterOuterFrameRef.current = null;
+      enterInnerFrameRef.current = requestAnimationFrame(() => {
+        enterInnerFrameRef.current = null;
+        dispatch({ type: "incoming_entered" });
+      });
+    });
+    return () => {
+      if (enterOuterFrameRef.current !== null) {
+        cancelAnimationFrame(enterOuterFrameRef.current);
+        enterOuterFrameRef.current = null;
+      }
+      if (enterInnerFrameRef.current !== null) {
+        cancelAnimationFrame(enterInnerFrameRef.current);
+        enterInnerFrameRef.current = null;
+      }
+    };
+  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);
+  React.useEffect(() => {
+    if (!cycle.transitioning) {
+      return;
+    }
+    if (fallbackTimerRef.current !== null) {
+      clearTimeout(fallbackTimerRef.current);
+    }
+    fallbackTimerRef.current = setTimeout(() => {
+      dispatch({ type: "transition_complete" });
+      fallbackTimerRef.current = null;
+    }, transitionMs);
+    return () => {
+      if (fallbackTimerRef.current !== null) {
+        clearTimeout(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+    };
+  }, [cycle.transitioning, transitionMs]);
+  const onOutgoingTransitionEnd = React.useCallback(
+    (event) => {
+      if (!cycle.transitioning) return;
+      if (event.propertyName !== "opacity") return;
+      if (fallbackTimerRef.current !== null) {
+        clearTimeout(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+      dispatch({ type: "transition_complete" });
+    },
+    [cycle.transitioning]
+  );
+  return {
+    cycle,
+    currentLabel,
+    incomingLabel,
+    sizingLabel,
+    onOutgoingTransitionEnd
+  };
+}
+export {
+  useCyclingCycle
+};
+//# sourceMappingURL=useCyclingCycle.mjs.map

package/dist/components/CyclingText/useCyclingCycle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingCycle.mjs","sources":["../../../src/components/CyclingText/useCyclingCycle.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype CyclingTextSizingOption = \"longest\" | \"current\";\n\ntype CycleState = {\n  currentIndex: number;\n  incomingIndex: number | null;\n  incomingEntered: boolean;\n  transitioning: boolean;\n};\n\ntype CycleAction =\n  | { type: \"tick\"; itemCount: number }\n  | { type: \"incoming_entered\" }\n  | { type: \"transition_complete\" }\n  | { type: \"pause_clear\" }\n  | { type: \"clamp_after_items_change\"; itemCount: number };\n\nconst initialCycleState: CycleState = {\n  currentIndex: 0,\n  incomingIndex: null,\n  incomingEntered: false,\n  transitioning: false,\n};\n\nfunction cycleReducer(state: CycleState, action: CycleAction): CycleState {\n  switch (action.type) {\n    case \"tick\": {\n      if (action.itemCount <= 1) return state;\n      const next = (state.currentIndex + 1) % action.itemCount;\n      return {\n        ...state,\n        incomingIndex: next,\n        incomingEntered: false,\n        transitioning: true,\n      };\n    }\n    case \"incoming_entered\":\n      return { ...state, incomingEntered: true };\n    case \"transition_complete\": {\n      if (!state.transitioning || state.incomingIndex === null) return state;\n      return {\n        currentIndex: state.incomingIndex,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    case \"pause_clear\":\n      return {\n        ...state,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    case \"clamp_after_items_change\": {\n      if (action.itemCount === 0) return state;\n      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;\n      return {\n        currentIndex: idx,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nexport function useCyclingCycle(\n  items: readonly string[],\n  sizing: CyclingTextSizingOption,\n  intervalMs: number,\n  paused: boolean,\n  docVisible: boolean,\n  transitionMs: number,\n) {\n  const [cycle, dispatch] = React.useReducer(cycleReducer, initialCycleState);\n\n  const enterOuterFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const enterInnerFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const fallbackTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cycleTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearCycleTimeout = React.useCallback(() => {\n    if (cycleTimeoutRef.current !== null) {\n      clearTimeout(cycleTimeoutRef.current);\n      cycleTimeoutRef.current = null;\n    }\n  }, []);\n\n  const clearAnimationArtifacts = React.useCallback(() => {\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n      enterOuterFrameRef.current = null;\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n      enterInnerFrameRef.current = null;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n      fallbackTimerRef.current = null;\n    }\n    clearCycleTimeout();\n  }, [clearCycleTimeout]);\n\n  const itemCount = items.length;\n\n  React.useEffect(() => {\n    if (itemCount === 0) return;\n    dispatch({ type: \"clamp_after_items_change\", itemCount });\n  }, [itemCount]);\n\n  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;\n  const safeIncomingIndex =\n    cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;\n\n  const currentLabel = itemCount === 0 ? \"\" : (items[safeCurrentIndex] ?? \"\");\n  const incomingLabel = safeIncomingIndex === null ? null : (items[safeIncomingIndex] ?? \"\");\n\n  const longestItem = React.useMemo(() => {\n    if (itemCount === 0) return \"\";\n    let longest = items[0] ?? \"\";\n    for (const item of items) {\n      if (item.length > longest.length) longest = item;\n    }\n    return longest;\n  }, [items, itemCount]);\n\n  const sizingLabel =\n    sizing === \"longest\"\n      ? longestItem\n      : incomingLabel && incomingLabel.length > currentLabel.length\n        ? incomingLabel\n        : currentLabel;\n\n  const shouldCycle = !paused && docVisible && itemCount > 1;\n\n  React.useEffect(() => {\n    if (!shouldCycle || itemCount <= 1) {\n      clearCycleTimeout();\n      return;\n    }\n\n    if (cycle.transitioning) {\n      return;\n    }\n\n    cycleTimeoutRef.current = setTimeout(() => {\n      cycleTimeoutRef.current = null;\n      dispatch({ type: \"tick\", itemCount });\n    }, intervalMs);\n\n    return () => {\n      clearCycleTimeout();\n    };\n  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);\n\n  React.useEffect(() => {\n    if (paused) {\n      clearAnimationArtifacts();\n      dispatch({ type: \"pause_clear\" });\n    }\n  }, [paused, clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    return () => {\n      clearAnimationArtifacts();\n    };\n  }, [clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {\n      return;\n    }\n\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n    }\n\n    enterOuterFrameRef.current = requestAnimationFrame(() => {\n      enterOuterFrameRef.current = null;\n      enterInnerFrameRef.current = requestAnimationFrame(() => {\n        enterInnerFrameRef.current = null;\n        dispatch({ type: \"incoming_entered\" });\n      });\n    });\n\n    return () => {\n      if (enterOuterFrameRef.current !== null) {\n        cancelAnimationFrame(enterOuterFrameRef.current);\n        enterOuterFrameRef.current = null;\n      }\n      if (enterInnerFrameRef.current !== null) {\n        cancelAnimationFrame(enterInnerFrameRef.current);\n        enterInnerFrameRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning) {\n      return;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n    }\n    fallbackTimerRef.current = setTimeout(() => {\n      dispatch({ type: \"transition_complete\" });\n      fallbackTimerRef.current = null;\n    }, transitionMs);\n\n    return () => {\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, transitionMs]);\n\n  const onOutgoingTransitionEnd = React.useCallback(\n    (event: React.TransitionEvent<HTMLSpanElement>) => {\n      if (!cycle.transitioning) return;\n      if (event.propertyName !== \"opacity\") return;\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n      dispatch({ type: \"transition_complete\" });\n    },\n    [cycle.transitioning],\n  );\n\n  return {\n    cycle,\n    currentLabel,\n    incomingLabel,\n    sizingLabel,\n    onOutgoingTransitionEnd,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/CyclingText/useCyclingTextTrackWidth.mjs

@@ -0,0 +1,38 @@
+"use client";
+import * as React from "react";
+function useCyclingTextTrackWidth() {
+  const sizingLabelRef = React.useRef(null);
+  const [trackWidth, setTrackWidth] = React.useState(null);
+  const widthFrameRef = React.useRef(null);
+  React.useEffect(() => {
+    const node = sizingLabelRef.current;
+    if (!node) return;
+    const measure = () => {
+      const next = Math.ceil(node.getBoundingClientRect().width);
+      if (!next) return;
+      if (widthFrameRef.current !== null) {
+        cancelAnimationFrame(widthFrameRef.current);
+      }
+      widthFrameRef.current = requestAnimationFrame(() => {
+        setTrackWidth(next);
+        widthFrameRef.current = null;
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      if (widthFrameRef.current !== null) {
+        cancelAnimationFrame(widthFrameRef.current);
+        widthFrameRef.current = null;
+      }
+    };
+  }, []);
+  return { sizingLabelRef, trackWidth };
+}
+export {
+  useCyclingTextTrackWidth
+};
+//# sourceMappingURL=useCyclingTextTrackWidth.mjs.map

package/dist/components/CyclingText/useCyclingTextTrackWidth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingTextTrackWidth.mjs","sources":["../../../src/components/CyclingText/useCyclingTextTrackWidth.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Observes the measured label node and stores its width so the wrapper can animate width\n * without layout thrash when fonts load or the parent resizes.\n */\nexport function useCyclingTextTrackWidth() {\n  const sizingLabelRef = React.useRef<HTMLSpanElement | null>(null);\n  const [trackWidth, setTrackWidth] = React.useState<number | null>(null);\n  const widthFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  React.useEffect(() => {\n    const node = sizingLabelRef.current;\n    if (!node) return;\n\n    const measure = () => {\n      const next = Math.ceil(node.getBoundingClientRect().width);\n      if (!next) return;\n      if (widthFrameRef.current !== null) {\n        cancelAnimationFrame(widthFrameRef.current);\n      }\n      widthFrameRef.current = requestAnimationFrame(() => {\n        setTrackWidth(next);\n        widthFrameRef.current = null;\n      });\n    };\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n\n    return () => {\n      observer.disconnect();\n      if (widthFrameRef.current !== null) {\n        cancelAnimationFrame(widthFrameRef.current);\n        widthFrameRef.current = null;\n      }\n    };\n  }, []);\n\n  return { sizingLabelRef, trackWidth };\n}\n"],"names":[],"mappings":";;AAMO,SAAS,2BAA2B;AACzC,QAAM,iBAAiB,MAAM,OAA+B,IAAI;AAChE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAwB,IAAI;AACtE,QAAM,gBAAgB,MAAM,OAAwD,IAAI;AAExF,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,eAAe;AAC5B,QAAI,CAAC,KAAM;AAEX,UAAM,UAAU,MAAM;AACpB,YAAM,OAAO,KAAK,KAAK,KAAK,sBAAA,EAAwB,KAAK;AACzD,UAAI,CAAC,KAAM;AACX,UAAI,cAAc,YAAY,MAAM;AAClC,6BAAqB,cAAc,OAAO;AAAA,MAC5C;AACA,oBAAc,UAAU,sBAAsB,MAAM;AAClD,sBAAc,IAAI;AAClB,sBAAc,UAAU;AAAA,MAC1B,CAAC;AAAA,IACH;AAEA,YAAA;AAEA,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AAErB,WAAO,MAAM;AACX,eAAS,WAAA;AACT,UAAI,cAAc,YAAY,MAAM;AAClC,6BAAqB,cAAc,OAAO;AAC1C,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,gBAAgB,WAAA;AAC3B;"}

package/dist/components/CyclingText/usePageVisibility.mjs

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+function usePageVisibility() {
+  const [visible, setVisible] = React.useState(true);
+  React.useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const update = () => {
+      setVisible(document.visibilityState === "visible");
+    };
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return visible;
+}
+export {
+  usePageVisibility
+};
+//# sourceMappingURL=usePageVisibility.mjs.map

package/dist/components/CyclingText/usePageVisibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageVisibility.mjs","sources":["../../../src/components/CyclingText/usePageVisibility.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Tracks whether the browser tab is visible (`document.visibilityState === \"visible\"`).\n * Cycling animations use this to pause while the document is hidden so timers do not queue\n * many swaps while the user is away.\n */\nexport function usePageVisibility(): boolean {\n  const [visible, setVisible] = React.useState(true);\n\n  React.useEffect(() => {\n    if (typeof document === \"undefined\") {\n      return;\n    }\n    const update = () => {\n      setVisible(document.visibilityState === \"visible\");\n    };\n    update();\n    document.addEventListener(\"visibilitychange\", update);\n    return () => document.removeEventListener(\"visibilitychange\", update);\n  }, []);\n\n  return visible;\n}\n"],"names":[],"mappings":";;AAOO,SAAS,oBAA6B;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,IAAI;AAEjD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AACA,UAAM,SAAS,MAAM;AACnB,iBAAW,SAAS,oBAAoB,SAAS;AAAA,IACnD;AACA,WAAA;AACA,aAAS,iBAAiB,oBAAoB,MAAM;AACpD,WAAO,MAAM,SAAS,oBAAoB,oBAAoB,MAAM;AAAA,EACtE,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/dist/components/CyclingText/usePrefersReducedMotion.mjs

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => {
+      setReduced(mq.matches);
+    };
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  return reduced;
+}
+export {
+  usePrefersReducedMotion
+};
+//# sourceMappingURL=usePrefersReducedMotion.mjs.map

package/dist/components/CyclingText/usePrefersReducedMotion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.mjs","sources":["../../../src/components/CyclingText/usePrefersReducedMotion.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport function usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n      return;\n    }\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const sync = () => {\n      setReduced(mq.matches);\n    };\n    sync();\n    mq.addEventListener(\"change\", sync);\n    return () => mq.removeEventListener(\"change\", sync);\n  }, []);\n\n  return reduced;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,0BAAmC;AACjD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;AAC5E;AAAA,IACF;AACA,UAAM,KAAK,OAAO,WAAW,kCAAkC;AAC/D,UAAM,OAAO,MAAM;AACjB,iBAAW,GAAG,OAAO;AAAA,IACvB;AACA,SAAA;AACA,OAAG,iBAAiB,UAAU,IAAI;AAClC,WAAO,MAAM,GAAG,oBAAoB,UAAU,IAAI;AAAA,EACpD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

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>;
 

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