@fanvue/ui 2.13.0 → 2.14.0

package/dist/cjs/components/CyclingText/CyclingText.cjs

@@ -0,0 +1,137 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const useCyclingCycle = require("./useCyclingCycle.cjs");
+const useCyclingTextTrackWidth = require("./useCyclingTextTrackWidth.cjs");
+const usePageVisibility = require("./usePageVisibility.cjs");
+const usePrefersReducedMotion = require("./usePrefersReducedMotion.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const DEFAULT_INTERVAL_MS = 2100;
+const DEFAULT_TRANSITION_MS = 200;
+const SLIDE_OFFSET_PX = 18;
+const CyclingText = React__namespace.forwardRef(
+  ({
+    items,
+    intervalMs = DEFAULT_INTERVAL_MS,
+    transitionMs = DEFAULT_TRANSITION_MS,
+    direction = "up",
+    paused = false,
+    sizing = "longest",
+    className,
+    labelClassName,
+    announceChanges = false,
+    ...rest
+  }, ref) => {
+    const docVisible = usePageVisibility.usePageVisibility();
+    const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth.useCyclingTextTrackWidth();
+    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } = useCyclingCycle.useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);
+    const itemCount = items.length;
+    const outgoingMotionStyle = React__namespace.useMemo(() => {
+      const durMs = reducedMotion ? 0 : transitionMs;
+      const exiting = cycle.transitioning;
+      const yExit = direction === "up" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;
+      return {
+        opacity: exiting ? 0 : 1,
+        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : "translate3d(0, 0, 0)",
+        transition: exiting && durMs > 0 ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+      };
+    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);
+    const incomingMotionStyle = React__namespace.useMemo(() => {
+      const durMs = reducedMotion ? 0 : transitionMs;
+      const entered = cycle.incomingEntered;
+      const yEnter = direction === "up" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;
+      return {
+        opacity: entered ? 1 : 0,
+        transform: entered ? "translate3d(0, 0, 0)" : `translate3d(0, ${yEnter}px, 0)`,
+        transition: durMs > 0 ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
+      };
+    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);
+    if (itemCount === 0) {
+      return null;
+    }
+    const wrapperStyle = {
+      ...trackWidth !== null ? { width: `${trackWidth}px` } : {}
+      // paddingTop: SLIDE_OFFSET_PX,
+    };
+    const showIncoming = incomingLabel !== null && cycle.transitioning;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-testid": "cycling-text",
+        "data-paused": paused ? "true" : void 0,
+        className: cn.cn(
+          "relative inline-flex items-center overflow-hidden align-middle leading-[inherit]",
+          "motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out",
+          className
+        ),
+        style: wrapperStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: sizingLabelRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]",
+              children: sizingLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-layer": "current",
+              "aria-live": announceChanges ? "polite" : void 0,
+              "aria-atomic": announceChanges ? true : void 0,
+              "data-state": cycle.transitioning ? "exit" : "idle",
+              onTransitionEnd: onOutgoingTransitionEnd,
+              className: cn.cn(
+                "absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]",
+                labelClassName
+              ),
+              style: outgoingMotionStyle,
+              children: currentLabel
+            }
+          ),
+          showIncoming ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-layer": "incoming",
+              "data-state": cycle.incomingEntered ? "idle" : "enter",
+              className: cn.cn(
+                "absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]",
+                labelClassName
+              ),
+              style: incomingMotionStyle,
+              children: incomingLabel
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+CyclingText.displayName = "CyclingText";
+exports.CyclingText = CyclingText;
+//# sourceMappingURL=CyclingText.cjs.map

package/dist/cjs/components/CyclingText/CyclingText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyclingText.cjs","sources":["../../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } =\n      useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\"\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":["React","usePageVisibility","usePrefersReducedMotion","useCyclingTextTrackWidth","useCyclingCycle","jsxs","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/CyclingText/useCyclingCycle.cjs

@@ -0,0 +1,212 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(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__namespace.useReducer(cycleReducer, initialCycleState);
+  const enterOuterFrameRef = React__namespace.useRef(null);
+  const enterInnerFrameRef = React__namespace.useRef(null);
+  const fallbackTimerRef = React__namespace.useRef(null);
+  const cycleTimeoutRef = React__namespace.useRef(null);
+  const clearCycleTimeout = React__namespace.useCallback(() => {
+    if (cycleTimeoutRef.current !== null) {
+      clearTimeout(cycleTimeoutRef.current);
+      cycleTimeoutRef.current = null;
+    }
+  }, []);
+  const clearAnimationArtifacts = React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.useEffect(() => {
+    if (paused) {
+      clearAnimationArtifacts();
+      dispatch({ type: "pause_clear" });
+    }
+  }, [paused, clearAnimationArtifacts]);
+  React__namespace.useEffect(() => {
+    return () => {
+      clearAnimationArtifacts();
+    };
+  }, [clearAnimationArtifacts]);
+  React__namespace.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__namespace.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__namespace.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
+  };
+}
+exports.useCyclingCycle = useCyclingCycle;
+//# sourceMappingURL=useCyclingCycle.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingCycle.cjs","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":["React"],"mappings":"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"}

package/dist/cjs/components/CyclingText/useCyclingTextTrackWidth.cjs

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function useCyclingTextTrackWidth() {
+  const sizingLabelRef = React__namespace.useRef(null);
+  const [trackWidth, setTrackWidth] = React__namespace.useState(null);
+  const widthFrameRef = React__namespace.useRef(null);
+  React__namespace.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 };
+}
+exports.useCyclingTextTrackWidth = useCyclingTextTrackWidth;
+//# sourceMappingURL=useCyclingTextTrackWidth.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCyclingTextTrackWidth.cjs","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":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMO,SAAS,2BAA2B;AACzC,QAAM,iBAAiBA,iBAAM,OAA+B,IAAI;AAChE,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAwB,IAAI;AACtE,QAAM,gBAAgBA,iBAAM,OAAwD,IAAI;AAExFA,mBAAM,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/cjs/components/CyclingText/usePageVisibility.cjs

@@ -0,0 +1,38 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function usePageVisibility() {
+  const [visible, setVisible] = React__namespace.useState(true);
+  React__namespace.useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const update = () => {
+      setVisible(document.visibilityState === "visible");
+    };
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return visible;
+}
+exports.usePageVisibility = usePageVisibility;
+//# sourceMappingURL=usePageVisibility.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePageVisibility.cjs","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":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,SAAS,oBAA6B;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAIA,iBAAM,SAAS,IAAI;AAEjDA,mBAAM,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/cjs/components/CyclingText/usePrefersReducedMotion.cjs

@@ -0,0 +1,39 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React__namespace.useState(false);
+  React__namespace.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;
+}
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+//# sourceMappingURL=usePrefersReducedMotion.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.cjs","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":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEO,SAAS,0BAAmC;AACjD,QAAM,CAAC,SAAS,UAAU,IAAIA,iBAAM,SAAS,KAAK;AAElDA,mBAAM,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/cjs/index.cjs

@@ -22,6 +22,10 @@ const ChatInput = require("./components/ChatInput/ChatInput.cjs");
 const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
+const CreatorCard = require("./components/CreatorCard/CreatorCard.cjs");
+const CreatorCover = require("./components/CreatorCover/CreatorCover.cjs");
+const CreatorTile = require("./components/CreatorTile/CreatorTile.cjs");
+const CyclingText = require("./components/CyclingText/CyclingText.cjs");
 const Dialog = require("./components/Dialog/Dialog.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
@@ -253,6 +257,10 @@ exports.ChatInput = ChatInput.ChatInput;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.Count = Count.Count;
+exports.CreatorCard = CreatorCard.CreatorCard;
+exports.CreatorCover = CreatorCover.CreatorCover;
+exports.CreatorTile = CreatorTile.CreatorTile;
+exports.CyclingText = CyclingText.CyclingText;
 exports.Dialog = Dialog.Dialog;
 exports.DialogBody = Dialog.DialogBody;
 exports.DialogClose = Dialog.DialogClose;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}