@viraui/react 2026.0.31 → 2026.0.33

package/dist/catalog.json

@@ -95,7 +95,7 @@
     {
       "id": "glow",
       "name": "Glow",
-      "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders.",
+      "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders. Memory-heavy — use sparingly (rarely).",
       "guidePath": "./components/glow/glow.guide.json"
     },
     {
@@ -197,7 +197,7 @@
     {
       "id": "static-noise",
       "name": "StaticNoise",
-      "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+      "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections. Memory-heavy — use sparingly (rarely).",
       "guidePath": "./components/static-noise/static-noise.guide.json"
     },
     {

package/dist/components/button/button.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=big]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=big]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}

package/dist/components/glow/glow.guide.json

@@ -1,7 +1,7 @@
 {
   "name": "Glow",
   "structure": "<Glow>{children}</Glow>",
-  "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders.",
+  "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders. Memory-heavy — use sparingly (rarely).",
   "whenToUse": [
     "Wrap a Surface (or other content) that should highlight toward the pointer",
     "Grid of glow shells that share one pointer highlight path",
@@ -9,6 +9,7 @@
     "Decorative continuous spin with autoRotate (no pointer)"
   ],
   "whenNotToUse": [
+    "Default decoration on many cards — memory cost is high; reserve for rare focal moments",
     "Static borders with no pointer interaction — use Surface border instead",
     "Accessible status or focus indication — glow is decorative only",
     "As a replacement for Surface color/padding — compose Surface as children"
@@ -23,7 +24,7 @@
     "Treating Glow as the visual card (color/padding) instead of composing Surface children",
     "Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
     "Expecting soft bloom Light layer — Glow is border-ring only",
-    "Use many glows and auto rotate on the same page. It's cpu intensive"
+    "Using many Glow instances (especially with autoRotate) on one page — memory- and CPU-heavy"
   ],
   "related": ["Surface", "Shimmer", "ProgressiveBlur"],
   "properties": {

package/dist/components/static-noise/static-noise.guide.json

@@ -1,13 +1,14 @@
 {
   "name": "StaticNoise",
   "structure": "<StaticNoise />",
-  "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+  "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections. Memory-heavy — use sparingly (rarely).",
   "whenToUse": [
     "Subtle grain or texture overlay on cards, panels, or hero sections",
     "Glass or vibrant surfaces that need visual depth without extra content",
     "Decorative atmosphere where the parent owns semantics and layout positioning"
   ],
   "whenNotToUse": [
+    "Default decoration on many surfaces — memory cost is high; reserve for rare focal moments",
     "Standalone loading or status feedback without a labeled parent region",
     "Critical readable content where contrast has not been verified",
     "Large numbers of simultaneous full-viewport overlays on the same page"
@@ -18,6 +19,7 @@
     "Consumer owns position, inset, z-index, and sizing for the overlay placement"
   ],
   "antiPatterns": [
+    "Treating StaticNoise as cheap wallpaper — it is memory-heavy; prefer few instances",
     "Stacking many full-viewport StaticNoise instances on one screen",
     "Using StaticNoise as the only loading announcement for a page",
     "Embedding layout positioning rules inside the component stylesheet"

package/dist/components/toggle-group/toggle-group.js

@@ -5,7 +5,11 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 var ToggleGroup$1 = ({ children, orientation = "horizontal", ...otherProps }) => /* @__PURE__ */ jsx(ToggleGroup, {
 	...otherProps,
 	orientation,
-	render: /* @__PURE__ */ jsx(Stack, { direction: orientation === "vertical" ? "column" : "row" }),
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: orientation === "vertical" ? "column" : "row",
+		columnGap: "2x-small",
+		rowGap: "2x-small"
+	}),
 	children
 });
 //#endregion

package/dist/components/typewriter/typewriter.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{white-space:pre-wrap;&[data-preserve-space]{display:inline-grid;&>.viraui__typewriter-module__Ghost_R-Yy-,&>.viraui__typewriter-module__Typed_00NZ8{grid-area:1/1}}}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{position:relative;isolation:isolate}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;white-space:pre-wrap}.viraui__typewriter-module__Typed_00NZ8{white-space:pre-wrap}.viraui__typewriter-module__Typewriter_R3sbb[data-preserve-space]>.viraui__typewriter-module__Typed_00NZ8{position:absolute;inset-inline-start:0;inset-block-start:0}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}

package/dist/components/typewriter/typewriter.d.ts

@@ -58,7 +58,9 @@ export type TypewriterProps = React.ComponentPropsWithRef<'span'> & {
      */
     loop?: boolean;
     /**
-     * Reserves the full phrase width while characters are typed.
+     * Reserves the full phrase width and height (including wrap under parent
+     * constraints) from first paint through delay, typing, and deletion via an
+     * in-flow `visibility: hidden` phrase layer; the typed effect paints absolute on top.
      *
      * @default false
      */

package/dist/components/typewriter/typewriter.guide.json

@@ -13,14 +13,17 @@
     "Cases where reduced-motion users must see every phrase in a multi-text cycle"
   ],
   "accessibility": [
-    "The visual display layer is aria-hidden; completed phrases announce through the polite live region",
+    "One phrase layer (Ghost when preserveSpace, clipped A11y otherwise) holds the full current phrase and announces via aria-live",
+    "The absolute/in-flow typed layer is aria-hidden and only paints the progressive effect plus caret",
     "Reduced motion shows the final phrase immediately without cycling delays",
     "Parent region owns loading or busy semantics when Typewriter is decorative"
   ],
   "antiPatterns": [
     "Using Typewriter as the only source of critical status information",
     "Embedding layout positioning rules inside the component stylesheet",
-    "Restarting animation on every parent render by passing unstable inline text arrays without stable content"
+    "Restarting animation on every parent render by passing unstable inline text arrays without stable content",
+    "Setting parent Text or Title trim={false} solely so preserveSpace can reserve wrapped height",
+    "Driving per-character typing through React state (use DOM writes on the typed layer instead)"
   ],
   "related": ["Text", "Title", "Shimmer"],
   "properties": {
@@ -44,7 +47,7 @@
         "description": "Sets the pause after a phrase completes before deletion starts, in milliseconds."
       },
       "preserveSpace": {
-        "description": "Reserves the full phrase width while characters are typed."
+        "description": "Reserves the full phrase width and height (including wrap under parent constraints) from first paint through delay, typing, and deletion."
       },
       "speed": {
         "description": "Sets the delay between typed characters in milliseconds."

package/dist/components/typewriter/typewriter.js

@@ -4,45 +4,29 @@ import { clsx } from "../../core/clsx.js";
 import typewriter_module_default from "./typewriter.module.js";
 import { resolveTextsKey, runTypewriterAnimation, splitTextsKey } from "./typewriter.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 //#region src/components/typewriter/typewriter.tsx
-var createCaretElement = (caret) => {
-	if (caret === "none") return null;
-	const element = document.createElement("span");
-	element.className = typewriter_module_default.Caret ?? "";
-	element.dataset.type = caret;
-	return element;
+var writeTypedText = (typed, value) => {
+	const existing = typed.firstChild;
+	const textNode = existing instanceof Text ? existing : document.createTextNode("");
+	if (textNode !== existing) typed.insertBefore(textNode, existing);
+	textNode.data = value;
 };
 var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0, deleteSpeed = 25, loop = true, pause = 2e3, preserveSpace = false, ref, speed = 40, style, texts, ...otherProps }) => {
-	const displayRef = useRef(null);
-	const liveRef = useRef(null);
 	const textsKey = resolveTextsKey(texts, children);
 	const firstText = splitTextsKey(textsKey)[0] ?? "";
+	const [phrase, setPhrase] = useState(firstText);
+	const [typedHost, setTypedHost] = useState(null);
 	useEffect(() => {
-		const display = displayRef.current;
-		const live = liveRef.current;
-		if (!display || !textsKey) return;
-		const textNode = document.createTextNode("");
-		const caretElement = createCaretElement(caret);
-		let ghostTextNode = null;
-		const nodes = [];
-		if (preserveSpace) {
-			ghostTextNode = document.createTextNode("");
-			const ghost = document.createElement("span");
-			ghost.className = typewriter_module_default.Ghost ?? "";
-			ghost.appendChild(ghostTextNode);
-			nodes.push(ghost);
-			const typed = document.createElement("span");
-			typed.className = typewriter_module_default.Typed ?? "";
-			typed.appendChild(textNode);
-			if (caretElement) typed.appendChild(caretElement);
-			nodes.push(typed);
-		} else {
-			nodes.push(textNode);
-			if (caretElement) nodes.push(caretElement);
-		}
-		display.replaceChildren(...nodes);
+		setPhrase(firstText);
+	}, [firstText, textsKey]);
+	useEffect(() => {
+		if (!typedHost || !textsKey) return;
 		const controller = new AbortController();
+		const writeVisible = (value) => {
+			writeTypedText(typedHost, value);
+		};
+		writeVisible("");
 		runTypewriterAnimation({
 			texts: splitTextsKey(textsKey),
 			loop,
@@ -50,26 +34,23 @@ var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0,
 			deleteDelay: deleteSpeed,
 			pause,
 			delay,
-			textNode,
-			ghostTextNode,
 			reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-			onPhraseComplete: (text) => {
-				if (live) live.textContent = text;
-			},
+			onPhrase: setPhrase,
+			writeVisible,
+			onPhraseComplete: setPhrase,
 			signal: controller.signal
 		});
 		return () => {
 			controller.abort();
 		};
 	}, [
-		caret,
 		delay,
 		deleteSpeed,
 		loop,
 		pause,
-		preserveSpace,
 		speed,
-		textsKey
+		textsKey,
+		typedHost
 	]);
 	const dynamicStyle = {
 		...caretColor && { "--vui-typewriter-caret-color": caretColor },
@@ -80,21 +61,20 @@ var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0,
 		ref,
 		className: clsx(typewriter_module_default.Typewriter, className),
 		style: dynamicStyle,
+		...preserveSpace && { "data-preserve-space": true },
 		children: [/* @__PURE__ */ jsx("span", {
-			ref: displayRef,
-			className: typewriter_module_default.Display,
-			"aria-hidden": "true",
-			...preserveSpace && { "data-preserve-space": true },
-			children: preserveSpace && firstText && /* @__PURE__ */ jsx("span", {
-				className: typewriter_module_default.Ghost,
-				children: firstText
-			})
-		}), /* @__PURE__ */ jsx("span", {
-			ref: liveRef,
-			className: typewriter_module_default.A11y,
+			className: preserveSpace ? typewriter_module_default.Ghost : typewriter_module_default.A11y,
 			"aria-live": "polite",
 			"aria-atomic": "true",
-			children: firstText
+			children: phrase
+		}), /* @__PURE__ */ jsx("span", {
+			ref: setTypedHost,
+			className: typewriter_module_default.Typed,
+			"aria-hidden": "true",
+			children: caret !== "none" && textsKey && /* @__PURE__ */ jsx("span", {
+				className: typewriter_module_default.Caret,
+				"data-type": caret
+			})
 		})]
 	});
 };

package/dist/components/typewriter/typewriter.module.js

@@ -1,13 +1,11 @@
 //#region src/components/typewriter/typewriter.module.css
 var Typewriter = "viraui__typewriter-module__Typewriter_R3sbb";
-var Display = "viraui__typewriter-module__Display_-IGJh";
 var Ghost = "viraui__typewriter-module__Ghost_R-Yy-";
 var Typed = "viraui__typewriter-module__Typed_00NZ8";
 var Caret = "viraui__typewriter-module__Caret_96Yfs";
 var A11y = "viraui__typewriter-module__A11y_B-rjF";
 var typewriter_module_default = {
 	Typewriter,
-	Display,
 	Ghost,
 	Typed,
 	Caret,
@@ -15,4 +13,4 @@ var typewriter_module_default = {
 	A11y
 };
 //#endregion
-export { A11y, Caret, Display, Ghost, Typed, Typewriter, typewriter_module_default as default };
+export { A11y, Caret, Ghost, Typed, Typewriter, typewriter_module_default as default };

package/dist/components/typewriter/typewriter.utils.d.ts

@@ -14,10 +14,12 @@ export type RunTypewriterAnimationOptions = {
     deleteDelay: number;
     pause: number;
     delay: number;
-    textNode: Text;
-    ghostTextNode: Text | null;
     reducedMotion: boolean;
+    /** Full current phrase (ghost / reserve). Rare — safe for React state. */
+    onPhrase: (phrase: string) => void;
+    /** Visible typed substring. Hot path — keep DOM writes, not React setState. */
+    writeVisible: (value: string) => void;
     onPhraseComplete: (text: string) => void;
     signal: AbortSignal;
 };
-export declare const runTypewriterAnimation: ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhraseComplete, signal, ...nodes }: RunTypewriterAnimationOptions) => Promise<void>;
+export declare const runTypewriterAnimation: ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhrase, writeVisible, onPhraseComplete, signal, }: RunTypewriterAnimationOptions) => Promise<void>;

package/dist/components/typewriter/typewriter.utils.js

@@ -39,29 +39,18 @@ var delay = (milliseconds, signal) => new Promise((resolve, reject) => {
 	}, milliseconds);
 	signal.addEventListener("abort", onAbort, { once: true });
 });
-var runTypewriterAnimation = async ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhraseComplete, signal, ...nodes }) => {
+var runTypewriterAnimation = async ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhrase, writeVisible, onPhraseComplete, signal }) => {
 	if (texts.length === 0) return;
-	const display = { node: nodes.textNode };
-	const ghost = nodes.ghostTextNode ? { node: nodes.ghostTextNode } : null;
-	const writeDisplayText = (value) => {
-		display.node.data = value;
-	};
-	const writeGhostText = (value) => {
-		if (ghost) ghost.node.data = value;
-	};
-	const setGhostText = (text) => {
-		writeGhostText(text);
-	};
 	const typeSuffix = async (graphemes, fromIndex) => {
 		for (let graphemeIndex = fromIndex + 1; graphemeIndex <= graphemes.length; graphemeIndex += 1) {
 			await delay(typeDelay, signal);
-			writeDisplayText(joinGraphemes(graphemes, graphemeIndex));
+			writeVisible(joinGraphemes(graphemes, graphemeIndex));
 		}
 	};
 	const deleteSuffix = async (graphemes, keepCount) => {
 		for (let graphemeIndex = graphemes.length - 1; graphemeIndex >= keepCount; graphemeIndex -= 1) {
 			await delay(deleteDelay, signal);
-			writeDisplayText(joinGraphemes(graphemes, graphemeIndex));
+			writeVisible(joinGraphemes(graphemes, graphemeIndex));
 		}
 	};
 	const getUpcomingGraphemes = (phraseIndex) => {
@@ -70,11 +59,12 @@ var runTypewriterAnimation = async ({ texts, loop, typeDelay, deleteDelay, pause
 	try {
 		if (reducedMotion) {
 			const finalText = texts.at(-1) ?? "";
-			setGhostText(finalText);
-			writeDisplayText(finalText);
+			onPhrase(finalText);
+			writeVisible(finalText);
 			onPhraseComplete(finalText);
 			return;
 		}
+		onPhrase(texts[0] ?? "");
 		await delay(initialDelay, signal);
 		let currentGraphemes = [];
 		do
@@ -82,8 +72,10 @@ var runTypewriterAnimation = async ({ texts, loop, typeDelay, deleteDelay, pause
 				const text = texts[phraseIndex] ?? "";
 				const phraseGraphemes = splitGraphemes(text);
 				const isLastPhrase = phraseIndex === texts.length - 1;
-				setGhostText(text);
-				await typeSuffix(phraseGraphemes, commonPrefixLength(currentGraphemes, phraseGraphemes) - 1);
+				onPhrase(text);
+				const sharedPrefixLength = commonPrefixLength(currentGraphemes, phraseGraphemes);
+				writeVisible(joinGraphemes(phraseGraphemes, sharedPrefixLength));
+				await typeSuffix(phraseGraphemes, sharedPrefixLength - 1);
 				currentGraphemes = phraseGraphemes;
 				onPhraseComplete(text);
 				if (!loop && isLastPhrase) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "2026.0.31",
+  "version": "2026.0.33",
   "private": false,
   "files": [
     "dist"
@@ -35,7 +35,7 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "2026.0.31",
+    "@viraui/foundation": "2026.0.33",
     "@viraui/icons": "2026.0.1",
     "@viraui/postcss-config": "2026.0.0",
     "@viraui/tsconfig": "2026.0.0"