@waveso/ui 0.7.4 → 0.7.6

package/dist/typewriter.js

@@ -1,7 +1,7 @@
 "use client";
 import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useInView } from "motion/react";
+import { useInView, useReducedMotion } from "motion/react";
 //#region src/typewriter.tsx
 function mergeRef(internalRef, externalRef) {
 	return (el) => {
@@ -105,22 +105,24 @@ function Typewriter({ text, children, speed = .04, delay = 0, cursor = true, cur
 	});
 }
 function TypingReveal({ text, children, elementRef, id, speed, delay, cursor, cursorChar, shouldAnimate }) {
+	const prefersReducedMotion = useReducedMotion();
 	const flat = flattenText(text);
 	const segments = typeof text === "string" ? [{ text }] : text;
 	const [charIndex, setCharIndex] = useState(0);
 	const [started, setStarted] = useState(false);
 	const [done, setDone] = useState(false);
 	useEffect(() => {
-		if (!shouldAnimate || started) return;
+		if (prefersReducedMotion || !shouldAnimate || started) return;
 		const timer = setTimeout(() => setStarted(true), delay * 1e3);
 		return () => clearTimeout(timer);
 	}, [
+		prefersReducedMotion,
 		shouldAnimate,
 		delay,
 		started
 	]);
 	useEffect(() => {
-		if (!started || done) return;
+		if (prefersReducedMotion || !started || done) return;
 		if (charIndex >= flat.length) {
 			setDone(true);
 			return;
@@ -128,6 +130,7 @@ function TypingReveal({ text, children, elementRef, id, speed, delay, cursor, cu
 		const timer = setTimeout(() => setCharIndex((prev) => prev + 1), speed * 1e3);
 		return () => clearTimeout(timer);
 	}, [
+		prefersReducedMotion,
 		started,
 		charIndex,
 		flat.length,
@@ -136,8 +139,8 @@ function TypingReveal({ text, children, elementRef, id, speed, delay, cursor, cu
 	]);
 	if (!isValidElement(children)) return children;
 	const existingRef = children.props.ref;
-	const content = started ? buildSegmentContent(segments, charIndex) : null;
-	const showCursor = cursor && started && !done;
+	const content = prefersReducedMotion ? buildSegmentContent(segments, flat.length) : started ? buildSegmentContent(segments, charIndex) : null;
+	const showCursor = !prefersReducedMotion && cursor && started && !done;
 	return cloneElement(children, {
 		ref: mergeRef(elementRef, existingRef),
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [content, showCursor && /* @__PURE__ */ jsx(BlinkingCursor, {
@@ -147,29 +150,35 @@ function TypingReveal({ text, children, elementRef, id, speed, delay, cursor, cu
 	});
 }
 function SmoothReveal({ text, children, elementRef, id, delay, duration, cursor, cursorChar, shouldAnimate }) {
+	const prefersReducedMotion = useReducedMotion();
 	const segments = typeof text === "string" ? [{ text }] : text;
 	const [revealed, setRevealed] = useState(false);
 	const [done, setDone] = useState(false);
 	useEffect(() => {
-		if (!shouldAnimate || revealed) return;
+		if (prefersReducedMotion || !shouldAnimate || revealed) return;
 		const timer = setTimeout(() => setRevealed(true), delay * 1e3);
 		return () => clearTimeout(timer);
 	}, [
+		prefersReducedMotion,
 		shouldAnimate,
 		delay,
 		revealed
 	]);
 	useEffect(() => {
-		if (!revealed) return;
+		if (prefersReducedMotion || !revealed) return;
 		const timer = setTimeout(() => setDone(true), duration * 1e3);
 		return () => clearTimeout(timer);
-	}, [revealed, duration]);
+	}, [
+		prefersReducedMotion,
+		revealed,
+		duration
+	]);
 	if (!isValidElement(children)) return children;
 	const childProps = children.props;
 	const existingRef = childProps.ref;
 	const existingStyle = childProps.style ?? {};
 	const animName = `tw-smooth-${id}`;
-	const showCursor = cursor && revealed && !done;
+	const showCursor = !prefersReducedMotion && cursor && revealed && !done;
 	const fullContent = segments.map((seg, i) => seg.className ? /* @__PURE__ */ jsx("span", {
 		className: seg.className,
 		children: seg.text
@@ -180,7 +189,7 @@ function SmoothReveal({ text, children, elementRef, id, delay, duration, cursor,
 			...existingStyle,
 			whiteSpace: "nowrap",
 			overflow: "hidden",
-			...revealed ? { animation: `${animName} ${duration}s linear forwards` } : { maxWidth: 0 }
+			...prefersReducedMotion ? { maxWidth: "100%" } : revealed ? { animation: `${animName} ${duration}s linear forwards` } : { maxWidth: 0 }
 		},
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("style", { children: `@keyframes ${animName} { from { max-width: 0; } to { max-width: 100%; } }` }),

package/dist/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n  type CSSProperties,\n  type ReactElement,\n  type Ref,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\"\nimport { useInView } from \"motion/react\"\n\n// ── Types ────────────────────────────────────────────────────────────\n\ninterface TextSegment {\n  text: string\n  /** Optional className applied to this segment (e.g., bold, colored) */\n  className?: string\n}\n\ninterface TypewriterProps {\n  /** Simple string or styled segments for per-word/phrase styling */\n  text: string | TextSegment[]\n  /** Element to render into. Receives the animated text as children. */\n  children: ReactElement\n  /** Time per character in seconds. Default: 0.04 */\n  speed?: number\n  /** Delay before typing starts in seconds. Default: 0 */\n  delay?: number\n  /** Show a blinking cursor during typing. Default: true */\n  cursor?: boolean\n  /** Cursor character. Default: '|' */\n  cursorChar?: string\n  /** Trigger when scrolled into view instead of on mount. Default: false */\n  onView?: boolean\n  /** Trigger once. Default: true */\n  once?: boolean\n  /**\n   * Reveal mode. Default: 'typing'\n   * - 'typing': character-by-character like someone typing\n   * - 'smooth': sliding mask reveal (cinematic feel)\n   */\n  variant?: \"typing\" | \"smooth\"\n  /** Duration of the smooth reveal in seconds. Default: 2 */\n  smoothDuration?: number\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────\n\nfunction mergeRef(\n  internalRef: React.RefObject<HTMLElement | null>,\n  externalRef?: Ref<HTMLElement>,\n) {\n  return (el: HTMLElement | null) => {\n    ;(internalRef as { current: HTMLElement | null }).current = el\n    if (typeof externalRef === \"function\") externalRef(el)\n    else if (externalRef && typeof externalRef === \"object\") {\n      ;(externalRef as { current: HTMLElement | null }).current = el\n    }\n  }\n}\n\n/** Flatten text prop into a single string for character counting */\nfunction flattenText(text: string | TextSegment[]): string {\n  if (typeof text === \"string\") return text\n  return text.map((s) => s.text).join(\"\")\n}\n\n/** Build rendered content from segments up to a character index */\nfunction buildSegmentContent(\n  segments: TextSegment[],\n  charIndex: number,\n): React.ReactNode[] {\n  const nodes: React.ReactNode[] = []\n  let remaining = charIndex\n\n  for (let i = 0; i < segments.length; i++) {\n    const seg = segments[i]!\n    if (remaining <= 0) break\n\n    const visibleChars = seg.text.slice(0, remaining)\n    remaining -= visibleChars.length\n\n    if (seg.className) {\n      nodes.push(\n        <span key={i} className={seg.className}>\n          {visibleChars}\n        </span>,\n      )\n    } else {\n      nodes.push(visibleChars)\n    }\n  }\n\n  return nodes\n}\n\n// ── Cursor ───────────────────────────────────────────────────────────\n\nfunction BlinkingCursor({ char, id }: { char: string; id: string }) {\n  const name = `tw-blink-${id}`\n  return (\n    <>\n      <span\n        aria-hidden\n        style={{\n          animation: `${name} 0.8s step-end infinite`,\n          fontWeight: \"normal\",\n        }}\n      >\n        {char}\n      </span>\n      <style>{`@keyframes ${name} { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`}</style>\n    </>\n  )\n}\n\n// ── Typewriter ───────────────────────────────────────────────────────\n\n/**\n * Text reveal animation with two modes:\n *\n * **typing** (default) — character-by-character like someone typing.\n * **smooth** — cinematic sliding mask reveal.\n *\n * Supports plain strings or styled segments for per-word coloring.\n * Zero wrapper divs — renders into the child element via cloneElement.\n *\n * @example\n * ```tsx\n * // Simple string\n * <Typewriter text=\"Welcome to the future.\">\n *   <h1 className=\"text-4xl font-bold\" />\n * </Typewriter>\n *\n * // Per-word styling\n * <Typewriter text={[\n *   { text: \"Build on \" },\n *   { text: \"Intuition\", className: \"text-primary font-bold\" },\n * ]}>\n *   <h1 className=\"text-4xl\" />\n * </Typewriter>\n *\n * // Smooth reveal\n * <Typewriter text=\"Cinematic reveal.\" variant=\"smooth\" smoothDuration={1.5}>\n *   <h1 className=\"text-4xl font-bold\" />\n * </Typewriter>\n * ```\n */\nfunction Typewriter({\n  text,\n  children,\n  speed = 0.04,\n  delay = 0,\n  cursor = true,\n  cursorChar = \"|\",\n  onView = false,\n  once = true,\n  variant = \"typing\",\n  smoothDuration = 2,\n}: TypewriterProps) {\n  const ref = useRef<HTMLElement>(null)\n  const id = useId().replace(/:/g, \"\")\n  const isInView = useInView(ref, { once, margin: \"-50px\" })\n\n  const shouldAnimate = onView ? isInView : true\n\n  if (variant === \"smooth\") {\n    return (\n      <SmoothReveal\n        text={text}\n        elementRef={ref}\n        id={id}\n        delay={delay}\n        duration={smoothDuration}\n        cursor={cursor}\n        cursorChar={cursorChar}\n        shouldAnimate={shouldAnimate}\n      >\n        {children}\n      </SmoothReveal>\n    )\n  }\n\n  return (\n    <TypingReveal\n      text={text}\n      elementRef={ref}\n      id={id}\n      speed={speed}\n      delay={delay}\n      cursor={cursor}\n      cursorChar={cursorChar}\n      shouldAnimate={shouldAnimate}\n    >\n      {children}\n    </TypingReveal>\n  )\n}\n\n// ── Typing Reveal ────────────────────────────────────────────────────\n\nfunction TypingReveal({\n  text,\n  children,\n  elementRef,\n  id,\n  speed,\n  delay,\n  cursor,\n  cursorChar,\n  shouldAnimate,\n}: {\n  text: string | TextSegment[]\n  children: ReactElement\n  elementRef: React.RefObject<HTMLElement | null>\n  id: string\n  speed: number\n  delay: number\n  cursor: boolean\n  cursorChar: string\n  shouldAnimate: boolean\n}) {\n  const flat = flattenText(text)\n  const segments = typeof text === \"string\" ? [{ text }] : text\n  const [charIndex, setCharIndex] = useState(0)\n  const [started, setStarted] = useState(false)\n  const [done, setDone] = useState(false)\n\n  useEffect(() => {\n    if (!shouldAnimate || started) return\n    const timer = setTimeout(() => setStarted(true), delay * 1000)\n    return () => clearTimeout(timer)\n  }, [shouldAnimate, delay, started])\n\n  useEffect(() => {\n    if (!started || done) return\n    if (charIndex >= flat.length) {\n      setDone(true)\n      return\n    }\n    const timer = setTimeout(() => setCharIndex((prev) => prev + 1), speed * 1000)\n    return () => clearTimeout(timer)\n  }, [started, charIndex, flat.length, speed, done])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n  const content = started ? buildSegmentContent(segments, charIndex) : null\n  const showCursor = cursor && started && !done\n\n  return cloneElement(children, {\n    ref: mergeRef(elementRef, existingRef),\n    children: (\n      <>\n        {content}\n        {showCursor && <BlinkingCursor char={cursorChar} id={id} />}\n      </>\n    ),\n  } as Record<string, unknown>)\n}\n\n// ── Smooth Reveal ────────────────────────────────────────────────────\n\nfunction SmoothReveal({\n  text,\n  children,\n  elementRef,\n  id,\n  delay,\n  duration,\n  cursor,\n  cursorChar,\n  shouldAnimate,\n}: {\n  text: string | TextSegment[]\n  children: ReactElement\n  elementRef: React.RefObject<HTMLElement | null>\n  id: string\n  delay: number\n  duration: number\n  cursor: boolean\n  cursorChar: string\n  shouldAnimate: boolean\n}) {\n  const segments = typeof text === \"string\" ? [{ text }] : text\n  const [revealed, setRevealed] = useState(false)\n  const [done, setDone] = useState(false)\n\n  useEffect(() => {\n    if (!shouldAnimate || revealed) return\n    const timer = setTimeout(() => setRevealed(true), delay * 1000)\n    return () => clearTimeout(timer)\n  }, [shouldAnimate, delay, revealed])\n\n  useEffect(() => {\n    if (!revealed) return\n    const timer = setTimeout(() => setDone(true), duration * 1000)\n    return () => clearTimeout(timer)\n  }, [revealed, duration])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n  const existingStyle = (childProps.style ?? {}) as CSSProperties\n\n  const animName = `tw-smooth-${id}`\n  const showCursor = cursor && revealed && !done\n\n  // Full text is always in the DOM — the mask clip animates to reveal it\n  const fullContent = segments.map((seg, i) =>\n    seg.className ? (\n      <span key={i} className={seg.className}>\n        {seg.text}\n      </span>\n    ) : (\n      seg.text\n    ),\n  )\n\n  return cloneElement(children, {\n    ref: mergeRef(elementRef, existingRef),\n    style: {\n      ...existingStyle,\n      whiteSpace: \"nowrap\" as const,\n      overflow: \"hidden\" as const,\n      ...(revealed\n        ? {\n            animation: `${animName} ${duration}s linear forwards`,\n          }\n        : {\n            maxWidth: 0,\n          }),\n    },\n    children: (\n      <>\n        <style>{`@keyframes ${animName} { from { max-width: 0; } to { max-width: 100%; } }`}</style>\n        {fullContent}\n        {showCursor && <BlinkingCursor char={cursorChar} id={id} />}\n      </>\n    ),\n  } as Record<string, unknown>)\n}\n\n// ── Exports ──────────────────────────────────────────────────────────\n\nexport { Typewriter }\nexport type { TypewriterProps, TextSegment }\n"],"mappings":"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"}
+{"version":3,"file":"typewriter.js","names":[],"sources":["../src/typewriter.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n  type CSSProperties,\n  type ReactElement,\n  type Ref,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\"\nimport { useInView, useReducedMotion } from \"motion/react\"\n\n// ── Types ────────────────────────────────────────────────────────────\n\ninterface TextSegment {\n  text: string\n  /** Optional className applied to this segment (e.g., bold, colored) */\n  className?: string\n}\n\ninterface TypewriterProps {\n  /** Simple string or styled segments for per-word/phrase styling */\n  text: string | TextSegment[]\n  /** Element to render into. Receives the animated text as children. */\n  children: ReactElement\n  /** Time per character in seconds. Default: 0.04 */\n  speed?: number\n  /** Delay before typing starts in seconds. Default: 0 */\n  delay?: number\n  /** Show a blinking cursor during typing. Default: true */\n  cursor?: boolean\n  /** Cursor character. Default: '|' */\n  cursorChar?: string\n  /** Trigger when scrolled into view instead of on mount. Default: false */\n  onView?: boolean\n  /** Trigger once. Default: true */\n  once?: boolean\n  /**\n   * Reveal mode. Default: 'typing'\n   * - 'typing': character-by-character like someone typing\n   * - 'smooth': sliding mask reveal (cinematic feel)\n   */\n  variant?: \"typing\" | \"smooth\"\n  /** Duration of the smooth reveal in seconds. Default: 2 */\n  smoothDuration?: number\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────\n\nfunction mergeRef(\n  internalRef: React.RefObject<HTMLElement | null>,\n  externalRef?: Ref<HTMLElement>,\n) {\n  return (el: HTMLElement | null) => {\n    ;(internalRef as { current: HTMLElement | null }).current = el\n    if (typeof externalRef === \"function\") externalRef(el)\n    else if (externalRef && typeof externalRef === \"object\") {\n      ;(externalRef as { current: HTMLElement | null }).current = el\n    }\n  }\n}\n\n/** Flatten text prop into a single string for character counting */\nfunction flattenText(text: string | TextSegment[]): string {\n  if (typeof text === \"string\") return text\n  return text.map((s) => s.text).join(\"\")\n}\n\n/** Build rendered content from segments up to a character index */\nfunction buildSegmentContent(\n  segments: TextSegment[],\n  charIndex: number,\n): React.ReactNode[] {\n  const nodes: React.ReactNode[] = []\n  let remaining = charIndex\n\n  for (let i = 0; i < segments.length; i++) {\n    const seg = segments[i]!\n    if (remaining <= 0) break\n\n    const visibleChars = seg.text.slice(0, remaining)\n    remaining -= visibleChars.length\n\n    if (seg.className) {\n      nodes.push(\n        <span key={i} className={seg.className}>\n          {visibleChars}\n        </span>,\n      )\n    } else {\n      nodes.push(visibleChars)\n    }\n  }\n\n  return nodes\n}\n\n// ── Cursor ───────────────────────────────────────────────────────────\n\nfunction BlinkingCursor({ char, id }: { char: string; id: string }) {\n  const name = `tw-blink-${id}`\n  return (\n    <>\n      <span\n        aria-hidden\n        style={{\n          animation: `${name} 0.8s step-end infinite`,\n          fontWeight: \"normal\",\n        }}\n      >\n        {char}\n      </span>\n      <style>{`@keyframes ${name} { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`}</style>\n    </>\n  )\n}\n\n// ── Typewriter ───────────────────────────────────────────────────────\n\n/**\n * Text reveal animation with two modes:\n *\n * **typing** (default) — character-by-character like someone typing.\n * **smooth** — cinematic sliding mask reveal.\n *\n * Supports plain strings or styled segments for per-word coloring.\n * Zero wrapper divs — renders into the child element via cloneElement.\n *\n * @example\n * ```tsx\n * // Simple string\n * <Typewriter text=\"Welcome to the future.\">\n *   <h1 className=\"text-4xl font-bold\" />\n * </Typewriter>\n *\n * // Per-word styling\n * <Typewriter text={[\n *   { text: \"Build on \" },\n *   { text: \"Intuition\", className: \"text-primary font-bold\" },\n * ]}>\n *   <h1 className=\"text-4xl\" />\n * </Typewriter>\n *\n * // Smooth reveal\n * <Typewriter text=\"Cinematic reveal.\" variant=\"smooth\" smoothDuration={1.5}>\n *   <h1 className=\"text-4xl font-bold\" />\n * </Typewriter>\n * ```\n */\nfunction Typewriter({\n  text,\n  children,\n  speed = 0.04,\n  delay = 0,\n  cursor = true,\n  cursorChar = \"|\",\n  onView = false,\n  once = true,\n  variant = \"typing\",\n  smoothDuration = 2,\n}: TypewriterProps) {\n  const ref = useRef<HTMLElement>(null)\n  const id = useId().replace(/:/g, \"\")\n  const isInView = useInView(ref, { once, margin: \"-50px\" })\n\n  const shouldAnimate = onView ? isInView : true\n\n  if (variant === \"smooth\") {\n    return (\n      <SmoothReveal\n        text={text}\n        elementRef={ref}\n        id={id}\n        delay={delay}\n        duration={smoothDuration}\n        cursor={cursor}\n        cursorChar={cursorChar}\n        shouldAnimate={shouldAnimate}\n      >\n        {children}\n      </SmoothReveal>\n    )\n  }\n\n  return (\n    <TypingReveal\n      text={text}\n      elementRef={ref}\n      id={id}\n      speed={speed}\n      delay={delay}\n      cursor={cursor}\n      cursorChar={cursorChar}\n      shouldAnimate={shouldAnimate}\n    >\n      {children}\n    </TypingReveal>\n  )\n}\n\n// ── Typing Reveal ────────────────────────────────────────────────────\n\nfunction TypingReveal({\n  text,\n  children,\n  elementRef,\n  id,\n  speed,\n  delay,\n  cursor,\n  cursorChar,\n  shouldAnimate,\n}: {\n  text: string | TextSegment[]\n  children: ReactElement\n  elementRef: React.RefObject<HTMLElement | null>\n  id: string\n  speed: number\n  delay: number\n  cursor: boolean\n  cursorChar: string\n  shouldAnimate: boolean\n}) {\n  const prefersReducedMotion = useReducedMotion()\n  const flat = flattenText(text)\n  const segments = typeof text === \"string\" ? [{ text }] : text\n  const [charIndex, setCharIndex] = useState(0)\n  const [started, setStarted] = useState(false)\n  const [done, setDone] = useState(false)\n\n  useEffect(() => {\n    if (prefersReducedMotion || !shouldAnimate || started) return\n    const timer = setTimeout(() => setStarted(true), delay * 1000)\n    return () => clearTimeout(timer)\n  }, [prefersReducedMotion, shouldAnimate, delay, started])\n\n  useEffect(() => {\n    if (prefersReducedMotion || !started || done) return\n    if (charIndex >= flat.length) {\n      setDone(true)\n      return\n    }\n    const timer = setTimeout(() => setCharIndex((prev) => prev + 1), speed * 1000)\n    return () => clearTimeout(timer)\n  }, [prefersReducedMotion, started, charIndex, flat.length, speed, done])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n  // Reduced motion: skip the character-by-character reveal and render the\n  // full text immediately in its final resting shape (no cursor).\n  const content = prefersReducedMotion\n    ? buildSegmentContent(segments, flat.length)\n    : started\n      ? buildSegmentContent(segments, charIndex)\n      : null\n  const showCursor = !prefersReducedMotion && cursor && started && !done\n\n  return cloneElement(children, {\n    ref: mergeRef(elementRef, existingRef),\n    children: (\n      <>\n        {content}\n        {showCursor && <BlinkingCursor char={cursorChar} id={id} />}\n      </>\n    ),\n  } as Record<string, unknown>)\n}\n\n// ── Smooth Reveal ────────────────────────────────────────────────────\n\nfunction SmoothReveal({\n  text,\n  children,\n  elementRef,\n  id,\n  delay,\n  duration,\n  cursor,\n  cursorChar,\n  shouldAnimate,\n}: {\n  text: string | TextSegment[]\n  children: ReactElement\n  elementRef: React.RefObject<HTMLElement | null>\n  id: string\n  delay: number\n  duration: number\n  cursor: boolean\n  cursorChar: string\n  shouldAnimate: boolean\n}) {\n  const prefersReducedMotion = useReducedMotion()\n  const segments = typeof text === \"string\" ? [{ text }] : text\n  const [revealed, setRevealed] = useState(false)\n  const [done, setDone] = useState(false)\n\n  useEffect(() => {\n    if (prefersReducedMotion || !shouldAnimate || revealed) return\n    const timer = setTimeout(() => setRevealed(true), delay * 1000)\n    return () => clearTimeout(timer)\n  }, [prefersReducedMotion, shouldAnimate, delay, revealed])\n\n  useEffect(() => {\n    if (prefersReducedMotion || !revealed) return\n    const timer = setTimeout(() => setDone(true), duration * 1000)\n    return () => clearTimeout(timer)\n  }, [prefersReducedMotion, revealed, duration])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n  const existingStyle = (childProps.style ?? {}) as CSSProperties\n\n  const animName = `tw-smooth-${id}`\n  const showCursor = !prefersReducedMotion && cursor && revealed && !done\n\n  // Full text is always in the DOM — the mask clip animates to reveal it\n  const fullContent = segments.map((seg, i) =>\n    seg.className ? (\n      <span key={i} className={seg.className}>\n        {seg.text}\n      </span>\n    ) : (\n      seg.text\n    ),\n  )\n\n  return cloneElement(children, {\n    ref: mergeRef(elementRef, existingRef),\n    style: {\n      ...existingStyle,\n      whiteSpace: \"nowrap\" as const,\n      overflow: \"hidden\" as const,\n      // Reduced motion: skip the mask animation and pin to the reveal's\n      // final resting state (fully shown) with no animation or cursor.\n      ...(prefersReducedMotion\n        ? {\n            maxWidth: \"100%\" as const,\n          }\n        : revealed\n          ? {\n              animation: `${animName} ${duration}s linear forwards`,\n            }\n          : {\n              maxWidth: 0,\n            }),\n    },\n    children: (\n      <>\n        <style>{`@keyframes ${animName} { from { max-width: 0; } to { max-width: 100%; } }`}</style>\n        {fullContent}\n        {showCursor && <BlinkingCursor char={cursorChar} id={id} />}\n      </>\n    ),\n  } as Record<string, unknown>)\n}\n\n// ── Exports ──────────────────────────────────────────────────────────\n\nexport { Typewriter }\nexport type { TypewriterProps, TextSegment }\n"],"mappings":";;;;;AAoDA,SAAS,SACP,aACA,aACA;AACA,SAAQ,OAA2B;AAC/B,cAAgD,UAAU;AAC5D,MAAI,OAAO,gBAAgB,WAAY,aAAY,GAAG;WAC7C,eAAe,OAAO,gBAAgB,SAC3C,aAAgD,UAAU;;;;AAMlE,SAAS,YAAY,MAAsC;AACzD,KAAI,OAAO,SAAS,SAAU,QAAO;AACrC,QAAO,KAAK,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,GAAG;;;AAIzC,SAAS,oBACP,UACA,WACmB;CACnB,MAAM,QAA2B,EAAE;CACnC,IAAI,YAAY;AAEhB,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;EACxC,MAAM,MAAM,SAAS;AACrB,MAAI,aAAa,EAAG;EAEpB,MAAM,eAAe,IAAI,KAAK,MAAM,GAAG,UAAU;AACjD,eAAa,aAAa;AAE1B,MAAI,IAAI,UACN,OAAM,KACJ,oBAAC,QAAD;GAAc,WAAW,IAAI;aAC1B;GACI,EAFI,EAEJ,CACR;MAED,OAAM,KAAK,aAAa;;AAI5B,QAAO;;AAKT,SAAS,eAAe,EAAE,MAAM,MAAoC;CAClE,MAAM,OAAO,YAAY;AACzB,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,eAAA;EACA,OAAO;GACL,WAAW,GAAG,KAAK;GACnB,YAAY;GACb;YAEA;EACI,CAAA,EACP,oBAAC,SAAD,EAAA,UAAQ,cAAc,KAAK,oDAA2D,CAAA,CACrF,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCP,SAAS,WAAW,EAClB,MACA,UACA,QAAQ,KACR,QAAQ,GACR,SAAS,MACT,aAAa,KACb,SAAS,OACT,OAAO,MACP,UAAU,UACV,iBAAiB,KACC;CAClB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,KAAK,OAAO,CAAC,QAAQ,MAAM,GAAG;CACpC,MAAM,WAAW,UAAU,KAAK;EAAE;EAAM,QAAQ;EAAS,CAAC;CAE1D,MAAM,gBAAgB,SAAS,WAAW;AAE1C,KAAI,YAAY,SACd,QACE,oBAAC,cAAD;EACQ;EACN,YAAY;EACR;EACG;EACP,UAAU;EACF;EACI;EACG;EAEd;EACY,CAAA;AAInB,QACE,oBAAC,cAAD;EACQ;EACN,YAAY;EACR;EACG;EACA;EACC;EACI;EACG;EAEd;EACY,CAAA;;AAMnB,SAAS,aAAa,EACpB,MACA,UACA,YACA,IACA,OACA,OACA,QACA,YACA,iBAWC;CACD,MAAM,uBAAuB,kBAAkB;CAC/C,MAAM,OAAO,YAAY,KAAK;CAC9B,MAAM,WAAW,OAAO,SAAS,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG;CACzD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;AAEvC,iBAAgB;AACd,MAAI,wBAAwB,CAAC,iBAAiB,QAAS;EACvD,MAAM,QAAQ,iBAAiB,WAAW,KAAK,EAAE,QAAQ,IAAK;AAC9D,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAsB;EAAe;EAAO;EAAQ,CAAC;AAEzD,iBAAgB;AACd,MAAI,wBAAwB,CAAC,WAAW,KAAM;AAC9C,MAAI,aAAa,KAAK,QAAQ;AAC5B,WAAQ,KAAK;AACb;;EAEF,MAAM,QAAQ,iBAAiB,cAAc,SAAS,OAAO,EAAE,EAAE,QAAQ,IAAK;AAC9E,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAsB;EAAS;EAAW,KAAK;EAAQ;EAAO;EAAK,CAAC;AAExE,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;CAGtC,MAAM,cADa,SAAS,MACmC;CAI/D,MAAM,UAAU,uBACZ,oBAAoB,UAAU,KAAK,OAAO,GAC1C,UACE,oBAAoB,UAAU,UAAU,GACxC;CACN,MAAM,aAAa,CAAC,wBAAwB,UAAU,WAAW,CAAC;AAElE,QAAO,aAAa,UAAU;EAC5B,KAAK,SAAS,YAAY,YAAY;EACtC,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,cAAc,oBAAC,gBAAD;GAAgB,MAAM;GAAgB;GAAM,CAAA,CAC1D,EAAA,CAAA;EAEN,CAA4B;;AAK/B,SAAS,aAAa,EACpB,MACA,UACA,YACA,IACA,OACA,UACA,QACA,YACA,iBAWC;CACD,MAAM,uBAAuB,kBAAkB;CAC/C,MAAM,WAAW,OAAO,SAAS,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG;CACzD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;AAEvC,iBAAgB;AACd,MAAI,wBAAwB,CAAC,iBAAiB,SAAU;EACxD,MAAM,QAAQ,iBAAiB,YAAY,KAAK,EAAE,QAAQ,IAAK;AAC/D,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAsB;EAAe;EAAO;EAAS,CAAC;AAE1D,iBAAgB;AACd,MAAI,wBAAwB,CAAC,SAAU;EACvC,MAAM,QAAQ,iBAAiB,QAAQ,KAAK,EAAE,WAAW,IAAK;AAC9D,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAsB;EAAU;EAAS,CAAC;AAE9C,KAAI,CAAC,eAAe,SAAS,CAAE,QAAO;CAEtC,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAe,WAA0C;CAC/D,MAAM,gBAAiB,WAAW,SAAS,EAAE;CAE7C,MAAM,WAAW,aAAa;CAC9B,MAAM,aAAa,CAAC,wBAAwB,UAAU,YAAY,CAAC;CAGnE,MAAM,cAAc,SAAS,KAAK,KAAK,MACrC,IAAI,YACF,oBAAC,QAAD;EAAc,WAAW,IAAI;YAC1B,IAAI;EACA,EAFI,EAEJ,GAEP,IAAI,KAEP;AAED,QAAO,aAAa,UAAU;EAC5B,KAAK,SAAS,YAAY,YAAY;EACtC,OAAO;GACL,GAAG;GACH,YAAY;GACZ,UAAU;GAGV,GAAI,uBACA,EACE,UAAU,QACX,GACD,WACE,EACE,WAAW,GAAG,SAAS,GAAG,SAAS,oBACpC,GACD,EACE,UAAU,GACX;GACR;EACD,UACE,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,SAAD,EAAA,UAAQ,cAAc,SAAS,sDAA6D,CAAA;GAC3F;GACA,cAAc,oBAAC,gBAAD;IAAgB,MAAM;IAAgB;IAAM,CAAA;GAC1D,EAAA,CAAA;EAEN,CAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [