not-a-spinner 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -301,9 +301,11 @@ function getPhrasesForConfig(messages, locale) {
 function useTextRotation({
   phrases: inputPhrases,
   interval = 3e3,
-  animationDuration = 400
+  animationDuration = 400,
+  manual = false
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const [cycleId, setCycleId] = (0, import_react.useState)(0);
   const [isExiting, setIsExiting] = (0, import_react.useState)(false);
   const [isEntering, setIsEntering] = (0, import_react.useState)(false);
   const poolRef = (0, import_react.useRef)(inputPhrases);
@@ -330,8 +332,20 @@ function useTextRotation({
       poolRef.current = combined;
     }
   }, []);
+  const advancePhrase = (0, import_react.useCallback)(() => {
+    setCurrentIndex((prev) => {
+      const next = prev + 1;
+      if (next >= poolRef.current.length) {
+        poolRef.current = shufflePhrases(poolRef.current);
+        return 0;
+      }
+      return next;
+    });
+    setCycleId((c) => c + 1);
+  }, []);
   (0, import_react.useEffect)(() => {
     mountedRef.current = true;
+    if (manual) return;
     if (poolRef.current.length <= 1) return;
     timerRef.current = setInterval(() => {
       if (!mountedRef.current) return;
@@ -361,14 +375,16 @@ function useTextRotation({
         timerRef.current = null;
       }
     };
-  }, [interval, animationDuration]);
+  }, [interval, animationDuration, manual]);
   const pool = poolRef.current;
   const phrase = pool.length > 0 ? pool[currentIndex % pool.length] : "";
   return {
     currentPhrase: phrase,
     isExiting,
     isEntering,
-    appendPhrases
+    appendPhrases,
+    advancePhrase,
+    cycleId
   };
 }
 
@@ -409,9 +425,10 @@ var NotASpinner = React.forwardRef(
       () => getPhrasesForConfig(messages, locale),
       [messages, locale]
     );
-    const { currentPhrase, isExiting, isEntering, appendPhrases } = useTextRotation({
+    const { currentPhrase, isExiting, isEntering, appendPhrases, advancePhrase, cycleId } = useTextRotation({
       phrases: resolvedPhrases,
-      interval
+      interval,
+      manual: animation === "typewriter"
     });
     React.useEffect(() => {
       if (!fetchPhrase) return;
@@ -445,8 +462,10 @@ var NotASpinner = React.forwardRef(
           ref,
           className: cn(notASpinnerVariants({ size, animation }), className),
           currentPhrase,
+          cycleId,
           interval,
           dots,
+          onEraseComplete: advancePhrase,
           ...props
         }
       );
@@ -466,7 +485,7 @@ var NotASpinner = React.forwardRef(
   }
 );
 NotASpinner.displayName = "NotASpinner";
-var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval, dots, ...props }, ref) => {
+var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
@@ -476,7 +495,7 @@ var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval,
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
     setPhase("typing");
-  }, [currentPhrase]);
+  }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
@@ -497,10 +516,12 @@ var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval,
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
+      } else {
+        onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval]);
+  }, [phase, displayedChars, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [

package/dist/index.d.cts

@@ -24,14 +24,17 @@ interface UseTextRotationOptions {
     phrases: string[];
     interval?: number;
     animationDuration?: number;
+    manual?: boolean;
 }
 interface UseTextRotationReturn {
     currentPhrase: string;
     isExiting: boolean;
     isEntering: boolean;
     appendPhrases: (newPhrases: string[]) => void;
+    advancePhrase: () => void;
+    cycleId: number;
 }
-declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, }: UseTextRotationOptions): UseTextRotationReturn;
+declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, manual, }: UseTextRotationOptions): UseTextRotationReturn;
 
 declare function createAnthropicFetcher(endpoint: string, locale?: string): () => Promise<string>;
 declare function createOpenAIFetcher(endpoint: string, locale?: string): () => Promise<string>;

package/dist/index.d.ts

@@ -24,14 +24,17 @@ interface UseTextRotationOptions {
     phrases: string[];
     interval?: number;
     animationDuration?: number;
+    manual?: boolean;
 }
 interface UseTextRotationReturn {
     currentPhrase: string;
     isExiting: boolean;
     isEntering: boolean;
     appendPhrases: (newPhrases: string[]) => void;
+    advancePhrase: () => void;
+    cycleId: number;
 }
-declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, }: UseTextRotationOptions): UseTextRotationReturn;
+declare function useTextRotation({ phrases: inputPhrases, interval, animationDuration, manual, }: UseTextRotationOptions): UseTextRotationReturn;
 
 declare function createAnthropicFetcher(endpoint: string, locale?: string): () => Promise<string>;
 declare function createOpenAIFetcher(endpoint: string, locale?: string): () => Promise<string>;

package/dist/index.mjs

@@ -257,9 +257,11 @@ function getPhrasesForConfig(messages, locale) {
 function useTextRotation({
   phrases: inputPhrases,
   interval = 3e3,
-  animationDuration = 400
+  animationDuration = 400,
+  manual = false
 }) {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [cycleId, setCycleId] = useState(0);
   const [isExiting, setIsExiting] = useState(false);
   const [isEntering, setIsEntering] = useState(false);
   const poolRef = useRef(inputPhrases);
@@ -286,8 +288,20 @@ function useTextRotation({
       poolRef.current = combined;
     }
   }, []);
+  const advancePhrase = useCallback(() => {
+    setCurrentIndex((prev) => {
+      const next = prev + 1;
+      if (next >= poolRef.current.length) {
+        poolRef.current = shufflePhrases(poolRef.current);
+        return 0;
+      }
+      return next;
+    });
+    setCycleId((c) => c + 1);
+  }, []);
   useEffect(() => {
     mountedRef.current = true;
+    if (manual) return;
     if (poolRef.current.length <= 1) return;
     timerRef.current = setInterval(() => {
       if (!mountedRef.current) return;
@@ -317,14 +331,16 @@ function useTextRotation({
         timerRef.current = null;
       }
     };
-  }, [interval, animationDuration]);
+  }, [interval, animationDuration, manual]);
   const pool = poolRef.current;
   const phrase = pool.length > 0 ? pool[currentIndex % pool.length] : "";
   return {
     currentPhrase: phrase,
     isExiting,
     isEntering,
-    appendPhrases
+    appendPhrases,
+    advancePhrase,
+    cycleId
   };
 }
 
@@ -365,9 +381,10 @@ var NotASpinner = React.forwardRef(
       () => getPhrasesForConfig(messages, locale),
       [messages, locale]
     );
-    const { currentPhrase, isExiting, isEntering, appendPhrases } = useTextRotation({
+    const { currentPhrase, isExiting, isEntering, appendPhrases, advancePhrase, cycleId } = useTextRotation({
       phrases: resolvedPhrases,
-      interval
+      interval,
+      manual: animation === "typewriter"
     });
     React.useEffect(() => {
       if (!fetchPhrase) return;
@@ -401,8 +418,10 @@ var NotASpinner = React.forwardRef(
           ref,
           className: cn(notASpinnerVariants({ size, animation }), className),
           currentPhrase,
+          cycleId,
           interval,
           dots,
+          onEraseComplete: advancePhrase,
           ...props
         }
       );
@@ -422,7 +441,7 @@ var NotASpinner = React.forwardRef(
   }
 );
 NotASpinner.displayName = "NotASpinner";
-var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval, dots, ...props }, ref) => {
+var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, cycleId, interval, dots, onEraseComplete, ...props }, ref) => {
   const [displayedChars, setDisplayedChars] = React.useState(0);
   const [phase, setPhase] = React.useState(
     "typing"
@@ -432,7 +451,7 @@ var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval,
     phraseRef.current = currentPhrase;
     setDisplayedChars(0);
     setPhase("typing");
-  }, [currentPhrase]);
+  }, [cycleId]);
   React.useEffect(() => {
     const totalChars = phraseRef.current.length;
     if (totalChars === 0) return;
@@ -453,10 +472,12 @@ var TypewriterRenderer = React.forwardRef(({ className, currentPhrase, interval,
     } else if (phase === "erasing") {
       if (displayedChars > 0) {
         timer = setTimeout(() => setDisplayedChars((c) => c - 1), erasingSpeed);
+      } else {
+        onEraseComplete();
       }
     }
     return () => clearTimeout(timer);
-  }, [phase, displayedChars, interval]);
+  }, [phase, displayedChars, interval, onEraseComplete]);
   const displayedText = phraseRef.current.slice(0, displayedChars);
   return /* @__PURE__ */ jsxs("div", { ref, className, ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "nas-text-wrapper", children: /* @__PURE__ */ jsxs("span", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-a-spinner",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Because modern AI doesn't spin, it thinks. Replace loading spinners with AI-style rotating thinking phrases.",
   "type": "module",
   "main": "./dist/index.cjs",