@primer/react-brand 0.74.0 → 0.75.0-rc.5af1749e

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.74.0)
+# Primer Brand docs (v0.75.0-rc.5af1749e)
 
-These docs are bundled with `@primer/react-brand@0.74.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.75.0-rc.5af1749e` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Hero/sub-components/HeroLabel.d.ts

@@ -3,6 +3,7 @@ import type { BaseProps } from '../../component-helpers';
 export type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
     animate?: boolean;
     animationDelay?: number;
+    initialText?: string;
 };
 export declare const HeroLabel: import("react").ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=HeroLabel.d.ts.map

package/esm/Hero/sub-components/HeroLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeroLabel.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,YAAY,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAMtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAC,GACpE,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAEH,eAAO,MAAM,SAAS,yHA0BrB,CAAA"}
+{"version":3,"file":"HeroLabel.d.ts","sourceRoot":"","sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,YAAY,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAMtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAC,GACpE,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH,eAAO,MAAM,SAAS,yHAgCrB,CAAA"}

package/esm/Hero/sub-components/HeroLabel.js

@@ -5,16 +5,17 @@ import r from "../Hero.module.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/Hero/sub-components/HeroLabel.tsx
-var o = i(({ children: i, className: o, variant: s = "muted", animate: c = !1, animationDelay: l = 1e3, ...u }, d) => {
-	let { variant: f, enableAnimation: p } = t(), m = f === "gridline" || f === "gridline-expressive", h = p || c, g = m && p || c;
+var o = i(({ children: i, className: o, variant: s = "muted", animate: c = !1, animationDelay: l = 1e3, initialText: u, ...d }, f) => {
+	let { variant: p, enableAnimation: m } = t(), h = p === "gridline" || p === "gridline-expressive", g = m || c, _ = h && m || c;
 	return /* @__PURE__ */ a("span", {
-		ref: d,
+		ref: f,
 		className: e(r["Hero-label"], o),
-		...u,
+		...d,
 		children: /* @__PURE__ */ a(n, {
 			variant: s,
-			animate: h,
-			delay: g ? l : 0,
+			animate: g,
+			delay: _ ? l : 0,
+			initialText: u,
 			children: i
 		})
 	});

package/esm/Hero/sub-components/HeroLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroLabel.js","names":[],"sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\nimport {TextCursorAnimation} from '../../TextCursorAnimation'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    animate?: boolean\n    animationDelay?: number\n  }\n\nexport const HeroLabel = forwardRef<HTMLSpanElement, HeroLabelProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'muted',\n      animate = false,\n      animationDelay = 1000,\n      ...rest\n    }: PropsWithChildren<HeroLabelProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    const shouldAnimate = enableAnimation || animate\n    const shouldHaveDelay = (isGridlineVariant && enableAnimation) || animate\n\n    return (\n      <span ref={ref} className={clsx(styles['Hero-label'], className)} {...rest}>\n        <TextCursorAnimation variant={variant} animate={shouldAnimate} delay={shouldHaveDelay ? animationDelay : 0}>\n          {children}\n        </TextCursorAnimation>\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAeA,IAAa,IAAY,GAErB,EACE,aACA,cACA,aAAU,SACV,aAAU,IACV,oBAAiB,KACjB,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAoB,MAAgB,cAAc,MAAgB,uBAElE,IAAgB,KAAmB,GACnC,IAAmB,KAAqB,KAAoB;AAElE,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAI;YACpE,kBAAC,GAAD;GAA8B;GAAS,SAAS;GAAe,OAAO,IAAkB,IAAiB;GACtG;GACmB,CAAA;EACjB,CAAA;EAGZ"}
+{"version":3,"file":"HeroLabel.js","names":[],"sources":["../../../src/Hero/sub-components/HeroLabel.tsx"],"sourcesContent":["import {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TextProps} from '../../Text'\nimport type {BaseProps} from '../../component-helpers'\nimport {TextCursorAnimation} from '../../TextCursorAnimation'\n\nimport styles from '../Hero.module.css'\nimport {useHeroContext} from '../HeroContext'\n\nexport type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    animate?: boolean\n    animationDelay?: number\n    initialText?: string\n  }\n\nexport const HeroLabel = forwardRef<HTMLSpanElement, HeroLabelProps>(\n  (\n    {\n      children,\n      className,\n      variant = 'muted',\n      animate = false,\n      animationDelay = 1000,\n      initialText,\n      ...rest\n    }: PropsWithChildren<HeroLabelProps>,\n    ref,\n  ) => {\n    const {variant: heroVariant, enableAnimation} = useHeroContext()\n    const isGridlineVariant = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n\n    const shouldAnimate = enableAnimation || animate\n    const shouldHaveDelay = (isGridlineVariant && enableAnimation) || animate\n\n    return (\n      <span ref={ref} className={clsx(styles['Hero-label'], className)} {...rest}>\n        <TextCursorAnimation\n          variant={variant}\n          animate={shouldAnimate}\n          delay={shouldHaveDelay ? animationDelay : 0}\n          initialText={initialText}\n        >\n          {children}\n        </TextCursorAnimation>\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAgBA,IAAa,IAAY,GAErB,EACE,aACA,cACA,aAAU,SACV,aAAU,IACV,oBAAiB,KACjB,gBACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAoB,MAAgB,cAAc,MAAgB,uBAElE,IAAgB,KAAmB,GACnC,IAAmB,KAAqB,KAAoB;AAElE,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,eAAe,EAAU;EAAE,GAAI;YACpE,kBAAC,GAAD;GACW;GACT,SAAS;GACT,OAAO,IAAkB,IAAiB;GAC7B;GAEZ;GACmB,CAAA;EACjB,CAAA;EAGZ"}

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -1,19 +1,24 @@
 import React, { PropsWithChildren } from 'react';
 import { TextProps } from '../Text/Text';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css';
 export declare const testIds: {
     root: string;
+    readonly text: string;
     readonly cursor: string;
 };
 export type TextCursorAnimationProps = {
     /**
-     * Whether to animate the text reveal with a sliding wipe animation
-     * and a cursor that transitions from grey to green.
+     * Whether to animate the text with a typing effect.
      */
     animate?: boolean;
+    /**
+     * Optional text to type before transitioning to the final text
+     */
+    initialText?: string;
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextCursorAnimation.d.ts.map

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;CAKnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EAAE,MAAM,EACrB,KAAW,EACX,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CA0C7C"}
+{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,2CA+E7C"}

package/esm/TextCursorAnimation/TextCursorAnimation.js

@@ -1,47 +1,73 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useCursorAnimation as t } from "../hooks/useCursorAnimation.js";
 import { EyebrowText as n } from "../EyebrowText/EyebrowText.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BODdIvrY.css';/* empty css                                                                                                                   */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BucKYl1n.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base-DKbXhPKv.css';/* empty css                                                                                                      */
+/* empty css                                                                                                                   */
 import r from "./TextCursorAnimation.module.js";
 import "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/TextCursorAnimation/TextCursorAnimation.tsx
 var o = {
 	root: "TextCursorAnimation",
+	get text() {
+		return `${this.root}-text`;
+	},
 	get cursor() {
 		return `${this.root}-cursor`;
 	}
 };
-function s({ children: s, className: c, animate: l, "data-testid": u, delay: d = 500, waitForPageLoad: f = !0, variant: p = "muted" }) {
-	let m = typeof s == "string" ? s : "", { showCursor: h, progress: g } = t({
-		text: m,
+function s({ children: s, className: c, animate: l, initialText: u, "data-testid": d, delay: f, waitForPageLoad: p = !0, variant: m = "muted" }) {
+	let h = typeof s == "string" ? s : "", { showCursor: g, visibleText: _, cursorPhase: v } = t({
+		text: h,
+		initialText: u,
 		animate: l,
-		delay: d,
-		waitForPageLoad: f
-	}), _ = {
-		"--brand-TextCursorAnimation-reveal-progress": g,
-		"--brand-TextCursorAnimation-cursor-progress": g
-	}, v = {
-		"--brand-TextCursorAnimation-reveal-progress": 1,
-		"--brand-TextCursorAnimation-cursor-progress": 1
-	}, y = l === !0 && m, b = y ? _ : v, x = m || s;
+		delay: f,
+		waitForPageLoad: p
+	}), y = l === !0 && h.length > 0, b = h || s, x = {
+		initial: r["TextCursorAnimation__cursor--initial"],
+		correction: r["TextCursorAnimation__cursor--correction"],
+		final: r["TextCursorAnimation__cursor--final"],
+		complete: r["TextCursorAnimation__cursor--complete"]
+	}[y ? v : "complete"];
 	return /* @__PURE__ */ i("span", {
 		className: e(r.TextCursorAnimation, c),
-		"data-testid": u || o.root,
+		"data-testid": d || o.root,
 		children: /* @__PURE__ */ a("span", {
-			className: r["TextCursorAnimation-inner"],
-			style: b,
-			children: [/* @__PURE__ */ i(n, {
-				size: "100",
-				variant: p,
-				font: "monospace",
-				weight: "medium",
-				className: r["TextCursorAnimation-text"],
-				children: x
-			}), (h || !y) && /* @__PURE__ */ i("span", {
-				className: r["TextCursorAnimation-cursor"],
-				"aria-hidden": "true",
-				"data-testid": o.cursor
+			className: r.TextCursorAnimation__inner,
+			children: [y && /* @__PURE__ */ a("span", {
+				className: r.TextCursorAnimation__sizingContainer,
+				children: [/* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
+					children: h
+				}), u && u !== h && /* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
+					"aria-hidden": "true",
+					children: u
+				})]
+			}), /* @__PURE__ */ a("span", {
+				className: e(r.TextCursorAnimation__content, y && r["TextCursorAnimation__content--animated"]),
+				"aria-hidden": y ? "true" : void 0,
+				children: [/* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: r.TextCursorAnimation__text,
+					"data-testid": o.text,
+					children: y ? _ : b
+				}), g && /* @__PURE__ */ i("span", {
+					className: e(r.TextCursorAnimation__cursor, y && r["TextCursorAnimation__cursor--animated"], x),
+					"aria-hidden": "true",
+					"data-testid": o.cursor
+				})]
 			})]
 		})
 	});

package/esm/TextCursorAnimation/TextCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text reveal with a sliding wipe animation\n   * and a cursor that transitions from grey to green.\n   */\n  animate?: boolean\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  'data-testid': testId,\n  delay = 500,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, progress} = useCursorAnimation({\n    text,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const revealStyle = {\n    '--brand-TextCursorAnimation-reveal-progress': progress,\n    '--brand-TextCursorAnimation-cursor-progress': progress,\n  } as React.CSSProperties\n\n  const staticStyle = {\n    '--brand-TextCursorAnimation-reveal-progress': 1,\n    '--brand-TextCursorAnimation-cursor-progress': 1,\n  } as React.CSSProperties\n\n  const hasAnimation = animate === true && text\n\n  const style = hasAnimation ? revealStyle : staticStyle\n  const content = text || children\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles['TextCursorAnimation-inner']} style={style}>\n        <EyebrowText\n          size=\"100\"\n          variant={variant}\n          font=\"monospace\"\n          weight=\"medium\"\n          className={styles['TextCursorAnimation-text']}\n        >\n          {content}\n        </EyebrowText>\n        {(showCursor || !hasAnimation) && (\n          <span className={styles['TextCursorAnimation-cursor']} aria-hidden=\"true\" data-testid={testIds.cursor} />\n        )}\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB;AAcD,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,eAAe,GACf,WAAQ,KACR,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAY,EAAmB;EAChD;EACA;EACA;EACA;EACD,CAAC,EAEI,IAAc;EAClB,+CAA+C;EAC/C,+CAA+C;EAChD,EAEK,IAAc;EAClB,+CAA+C;EAC/C,+CAA+C;EAChD,EAEK,IAAe,MAAY,MAAQ,GAEnC,IAAQ,IAAe,IAAc,GACrC,IAAU,KAAQ;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqC;aAA7D,CACE,kBAAC,GAAD;IACE,MAAK;IACI;IACT,MAAK;IACL,QAAO;IACP,WAAW,EAAO;cAEjB;IACW,CAAA,GACZ,KAAc,CAAC,MACf,kBAAC,QAAD;IAAM,WAAW,EAAO;IAA+B,eAAY;IAAO,eAAa,EAAQ;IAAU,CAAA,CAEtG;;EACF,CAAA"}
+{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {showCursor && (\n            <span\n              className={clsx(\n                styles.TextCursorAnimation__cursor,\n                hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n                cursorPhaseClassName,\n              )}\n              aria-hidden=\"true\"\n              data-testid={testIds.cursor}\n            />\n          )}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB;AAiBD,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;EAClB,CAAC,IAAe,IAAc;AAE/B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;eAExF;KACW,CAAA,EACb,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;KACzF,eAAY;eAEX;KACW,CAAA,CAEX;OAET,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,0CACxB;IACD,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;KAClB,CAAA,EACb,KACC,kBAAC,QAAD;KACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,EACD;KACD,eAAY;KACZ,eAAa,EAAQ;KACrB,CAAA,CAEC;MACF;;EACF,CAAA"}

package/esm/TextCursorAnimation/TextCursorAnimation.module-BS4hPR8H.css

@@ -0,0 +1 @@
+.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu{align-items:center;display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl{align-items:center;display:inline-flex;position:relative}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc{font-weight:var(--brand-text-weight-500);white-space:pre}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg{clip-path:inset(50%);display:inline-grid}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64{grid-area:1/1}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E{align-items:center;gap:calc(var(--base-size-8) + var(--base-size-2));display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H{position:absolute;inset-block-start:0;inset-inline-start:0}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{width:calc(var(--base-size-8) + var(--base-size-2) / 2);height:calc(var(--base-size-12) + var(--base-size-2));flex:0 0 calc(var(--base-size-8) + var(--base-size-2) / 2)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64{background-color:var(--brand-TextCursorAnimation-cursor-color)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4{animation:Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end) .25s 3 forwards}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--correction___y1c10{background-color:var(--brand-TextCursorAnimation-cursor-deleteColor)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--final___fBBsR,.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv{background-color:var(--brand-TextCursorAnimation-cursor-finalColor)}@keyframes Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh{0%,79%{opacity:1}80%,99%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{animation:none}}

package/esm/TextCursorAnimation/TextCursorAnimation.module.js

@@ -1,8 +1,18 @@
-import './TextCursorAnimation.module-BJLhwKrK.css';var e = {
+import './TextCursorAnimation.module-BS4hPR8H.css';var e = {
 	TextCursorAnimation: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu",
-	"TextCursorAnimation-inner": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-inner___h__Hj",
-	"TextCursorAnimation-text": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-text___sBYZ9",
-	"TextCursorAnimation-cursor": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor___1_9mQ"
+	TextCursorAnimation__inner: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl",
+	TextCursorAnimation__text: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc",
+	TextCursorAnimation__sizingContainer: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg",
+	TextCursorAnimation__sizingText: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64",
+	TextCursorAnimation__content: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E",
+	"TextCursorAnimation__content--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H",
+	TextCursorAnimation__cursor: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD",
+	"TextCursorAnimation__cursor--initial": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64",
+	"TextCursorAnimation__cursor--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4",
+	"TextCursorAnimation-cursor-blink": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh",
+	"TextCursorAnimation__cursor--correction": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--correction___y1c10",
+	"TextCursorAnimation__cursor--final": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--final___fBBsR",
+	"TextCursorAnimation__cursor--complete": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv"
 };
 //#endregion
 export { e as default };

package/esm/TextCursorAnimation/TextCursorAnimation.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation-inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation-text {\n  font-weight: var(--brand-text-weight-500);\n  clip-path: inset(0 calc((1 - var(--brand-TextCursorAnimation-reveal-progress, 1)) * 100%) 0 0);\n  white-space: pre;\n}\n\n.TextCursorAnimation-cursor {\n  position: absolute;\n  left: calc((var(--brand-TextCursorAnimation-reveal-progress, 1) * 100%) + var(--base-size-6));\n  top: calc((1lh - 0.3cap) / 2 - 0.5cap);\n  width: var(--base-size-8);\n  height: 1cap;\n  background-color: color-mix(\n    in srgb,\n    var(--brand-color-canvas-subtle) calc((1 - var(--brand-TextCursorAnimation-cursor-progress, 0)) * 100%),\n    var(--brand-TextCursorAnimation-cursor-color) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)\n  );\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation-cursor {\n    display: none;\n  }\n\n  .TextCursorAnimation-text {\n    clip-path: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__text {\n  font-weight: var(--brand-text-weight-500);\n  white-space: pre;\n}\n\n.TextCursorAnimation__sizingContainer {\n  display: inline-grid;\n  clip-path: inset(50%);\n}\n\n.TextCursorAnimation__sizingText {\n  grid-area: 1 / 1;\n}\n\n.TextCursorAnimation__content {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n}\n\n.TextCursorAnimation__content--animated {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.TextCursorAnimation__cursor {\n  width: calc(var(--base-size-8) + var(--base-size-2) / 2);\n  height: calc(var(--base-size-12) + var(--base-size-2));\n  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);\n}\n\n.TextCursorAnimation__cursor--initial {\n  background-color: var(--brand-TextCursorAnimation-cursor-color);\n}\n\n.TextCursorAnimation__cursor--animated {\n  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)\n    250ms 3 forwards;\n}\n\n.TextCursorAnimation__cursor--correction {\n  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);\n}\n\n.TextCursorAnimation__cursor--final,\n.TextCursorAnimation__cursor--complete {\n  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);\n}\n\n@keyframes TextCursorAnimation-cursor-blink {\n  0%,\n  79% {\n    opacity: 1;\n  }\n\n  80%,\n  99% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation__cursor {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/esm/hooks/useCursorAnimation.d.ts

@@ -1,38 +1,15 @@
+export type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete';
+export type UseCursorAnimationResult = {
+    visibleText: string;
+    showCursor: boolean;
+    cursorPhase: CursorAnimationPhase;
+};
 export type UseCursorAnimationOptions = {
-    /**
-     * The text content to animate
-     */
     text: string;
-    /**
-     * Whether to animate the text reveal with a cursor effect
-     */
+    initialText?: string;
     animate?: boolean;
-    /**
-     * Duration of the reveal animation in milliseconds
-     */
-    duration?: number;
-    /**
-     * Delay to start the animation in milliseconds
-     */
     delay?: number;
-    /**
-     * Loads after the page has fully loaded
-     */
     waitForPageLoad?: boolean;
 };
-export type UseCursorAnimationResult = {
-    /**
-     * Whether the animation is currently running
-     */
-    isAnimating: boolean;
-    /**
-     * Whether to show the cursor
-     */
-    showCursor: boolean;
-    /**
-     * Progress of the animation (0 to 1)
-     */
-    progress: number;
-};
-export declare function useCursorAnimation({ text, animate, duration, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
+export declare function useCursorAnimation({ text, initialText, animate, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
 //# sourceMappingURL=useCursorAnimation.d.ts.map

package/esm/hooks/useCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,QAAc,EACd,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CAiFtD"}
+{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAElF,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,OAAO,EACP,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CA6KtD"}

package/esm/hooks/useCursorAnimation.js

@@ -1,50 +1,98 @@
-import { useReducedMotion as e } from "./useReducedMotion.js";
-import { useCallback as t, useEffect as n, useState as r } from "react";
+import e from "./useIsomorphicLayoutEffect.js";
+import { useReducedMotion as t } from "./useReducedMotion.js";
+import { useEffect as n, useState as r } from "react";
 //#region src/hooks/useCursorAnimation.ts
-function i({ text: i, animate: a, duration: o = 500, delay: s = 500, waitForPageLoad: c = !0 }) {
-	let l = e(), u = a === !0 && !l && i.length > 0, [d, f] = r(u), [p, m] = r(+!u), h = t(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		f(!0), m(0);
-		let e = performance.now(), t = (n) => {
-			let r = n - e, i = Math.min(r / o, 1);
-			m(i), i < 1 ? requestAnimationFrame(t) : f(!1);
+function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoad: c = !0 }) {
+	let l = t(), u = o === !0 && !l && i.length > 0, d = o === !0 && i.length > 0, [f, p] = r({
+		visibleText: d ? "" : i,
+		showCursor: !d,
+		cursorPhase: d ? "initial" : "complete"
+	});
+	return e(() => {
+		u || p({
+			visibleText: i,
+			showCursor: !0,
+			cursorPhase: "complete"
+		});
+	}, [u, i]), n(() => {
+		if (!u) return;
+		let e = 1e3 / 60, t = 85 / 75 * 24, n = [
+			">",
+			"*",
+			"=",
+			"&",
+			"+",
+			"-",
+			"%",
+			"^",
+			"_"
+		];
+		p({
+			visibleText: "",
+			showCursor: !1,
+			cursorPhase: "initial"
+		});
+		let r = typeof a == "string" && a.length > 0 && a !== i ? a : void 0, o = 0;
+		if (r) for (; o < r.length && o < i.length && r[o] === i[o];) o += 1;
+		let l = r !== void 0 && o < r.length, d = l ? r : i, f = l ? d.length - o : 0, m = d.length / 34 * 1e3, h = m + (l ? 308.8235294117647 : 0), g = h + f / t * 1e3, _ = g + (l ? i.length - o : 0) / 34 * 1e3, v = h - e, y = _ - 6 * e, b = (e, t) => {
+			let r = "", i = 0;
+			for (let a = 0; a < t; a += 1) {
+				let o = e[a];
+				if (/\s/.test(o)) {
+					r = `${r}${o}`;
+					continue;
+				}
+				i += 1, r = `${r}${o}`, a === t - 1 && (r = `${r}${n[(i - 1) % n.length]}`);
+			}
+			return r;
+		}, x = (e) => {
+			let n = "";
+			if (e > 0 && e < m) n = b(d, Math.floor(e / 1e3 * 34));
+			else if (l && e >= m && e < h) n = d;
+			else if (l && e >= h && e < g) {
+				let r = e - h, i = Math.floor(r / 1e3 * t);
+				n = d.slice(0, d.length - i);
+			} else if (l && e >= g && e < _) {
+				let t = e - g, r = Math.min(i.length, o + Math.floor(t / 1e3 * 34));
+				n = i.slice(0, r);
+			} else e >= _ && (n = i);
+			let r = "initial";
+			return l && e >= v && (r = "correction"), e >= y && (r = "final"), e >= _ && (r = "complete"), {
+				visibleText: n,
+				showCursor: n.length > 0,
+				cursorPhase: r
+			};
+		}, S, C, w = () => {
+			let e = performance.now(), t = {
+				visibleText: "",
+				showCursor: !1,
+				cursorPhase: "initial"
+			}, n = (r) => {
+				let i = r - e, a = x(i);
+				(t.visibleText !== a.visibleText || t.showCursor !== a.showCursor || t.cursorPhase !== a.cursorPhase) && (t = a, p(a)), i < _ && (S = window.requestAnimationFrame(n));
+			};
+			S = window.requestAnimationFrame(n);
+		}, T = () => {
+			C = setTimeout(w, s);
 		};
-		requestAnimationFrame(t);
-	}, [u, o]);
-	return n(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		let e = () => setTimeout(() => {
-			h();
-		}, s), t;
-		if (c && typeof window < "u") if (document.readyState === "complete") t = e();
+		if (c && typeof window < "u") if (document.readyState === "complete") T();
 		else {
-			let n = () => {
-				t = e();
-			};
-			return window.addEventListener("load", n), () => {
-				window.removeEventListener("load", n), t && clearTimeout(t);
+			let e = () => T();
+			return window.addEventListener("load", e), () => {
+				window.removeEventListener("load", e), C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 			};
 		}
-		else t = e();
+		else T();
 		return () => {
-			t && clearTimeout(t);
+			C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 		};
 	}, [
-		h,
 		s,
+		a,
 		u,
+		i,
 		c
-	]), {
-		isAnimating: d,
-		showCursor: !l && a === !0,
-		progress: p
-	};
+	]), f;
 }
 //#endregion
 export { i as useCursorAnimation };

package/esm/hooks/useCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type UseCursorAnimationOptions = {\n  /**\n   * The text content to animate\n   */\n  text: string\n  /**\n   * Whether to animate the text reveal with a cursor effect\n   */\n  animate?: boolean\n  /**\n   * Duration of the reveal animation in milliseconds\n   */\n  duration?: number\n  /**\n   * Delay to start the animation in milliseconds\n   */\n  delay?: number\n  /**\n   * Loads after the page has fully loaded\n   */\n  waitForPageLoad?: boolean\n}\n\nexport type UseCursorAnimationResult = {\n  /**\n   * Whether the animation is currently running\n   */\n  isAnimating: boolean\n  /**\n   * Whether to show the cursor\n   */\n  showCursor: boolean\n  /**\n   * Progress of the animation (0 to 1)\n   */\n  progress: number\n}\n\nexport function useCursorAnimation({\n  text,\n  animate,\n  duration = 500,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n\n  const [isAnimating, setIsAnimating] = useState(shouldAnimate)\n  const [progress, setProgress] = useState(shouldAnimate ? 0 : 1)\n\n  const startAnimation = useCallback(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    setIsAnimating(true)\n    setProgress(0)\n\n    const startTime = performance.now()\n\n    const tick = (currentTime: number) => {\n      const elapsed = currentTime - startTime\n      const newProgress = Math.min(elapsed / duration, 1)\n\n      setProgress(newProgress)\n\n      if (newProgress < 1) {\n        requestAnimationFrame(tick)\n      } else {\n        setIsAnimating(false)\n      }\n    }\n\n    requestAnimationFrame(tick)\n  }, [shouldAnimate, duration])\n\n  useEffect(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    const startDelayTimer = () => {\n      return setTimeout(() => {\n        startAnimation()\n      }, delay)\n    }\n\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      // Check if page is already loaded\n      if (document.readyState === 'complete') {\n        delayTimer = startDelayTimer()\n      } else {\n        // Wait for page load before starting the delay timer\n        const handleLoad = () => {\n          delayTimer = startDelayTimer()\n        }\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer) clearTimeout(delayTimer)\n        }\n      }\n    } else {\n      delayTimer = startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer) clearTimeout(delayTimer)\n    }\n  }, [startAnimation, delay, shouldAnimate, waitForPageLoad])\n\n  const showCursor = !prefersReducedMotion && animate === true\n\n  return {\n    isAnimating,\n    showCursor,\n    progress,\n  }\n}\n"],"mappings":";;;AAyCA,SAAgB,EAAmB,EACjC,SACA,YACA,cAAW,KACX,WAAQ,KACR,qBAAkB,MACoC;CACtD,IAAM,IAAuB,GAAkB,EACzC,IAAgB,MAAY,MAAQ,CAAC,KAAwB,EAAK,SAAS,GAE3E,CAAC,GAAa,KAAkB,EAAS,EAAc,EACvD,CAAC,GAAU,KAAe,EAAS,IAAsB,EAEzD,IAAiB,QAAkB;AACvC,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;AAIF,EADA,EAAe,GAAK,EACpB,EAAY,EAAE;EAEd,IAAM,IAAY,YAAY,KAAK,EAE7B,KAAQ,MAAwB;GACpC,IAAM,IAAU,IAAc,GACxB,IAAc,KAAK,IAAI,IAAU,GAAU,EAAE;AAInD,GAFA,EAAY,EAAY,EAEpB,IAAc,IAChB,sBAAsB,EAAK,GAE3B,EAAe,GAAM;;AAIzB,wBAAsB,EAAK;IAC1B,CAAC,GAAe,EAAS,CAAC;AA2C7B,QAzCA,QAAgB;AACd,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;EAGF,IAAM,UACG,iBAAiB;AACtB,MAAgB;KACf,EAAM,EAGP;AAEJ,MAAI,KAAmB,OAAO,SAAW,IAEvC,KAAI,SAAS,eAAe,WAC1B,KAAa,GAAiB;OACzB;GAEL,IAAM,UAAmB;AACvB,QAAa,GAAiB;;AAGhC,UADA,OAAO,iBAAiB,QAAQ,EAAW,QAC9B;AAEX,IADA,OAAO,oBAAoB,QAAQ,EAAW,EAC1C,KAAY,aAAa,EAAW;;;MAI5C,KAAa,GAAiB;AAGhC,eAAa;AACX,GAAI,KAAY,aAAa,EAAW;;IAEzC;EAAC;EAAgB;EAAO;EAAe;EAAgB,CAAC,EAIpD;EACL;EACA,YAJiB,CAAC,KAAwB,MAAY;EAKtD;EACD"}
+{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useEffect, useState} from 'react'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete'\n\nexport type UseCursorAnimationResult = {\n  visibleText: string\n  showCursor: boolean\n  cursorPhase: CursorAnimationPhase\n}\n\nexport type UseCursorAnimationOptions = {\n  text: string\n  initialText?: string\n  animate?: boolean\n  delay?: number\n  waitForPageLoad?: boolean\n}\n\nexport function useCursorAnimation({\n  text,\n  initialText,\n  animate,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n  const shouldStartHidden = animate === true && text.length > 0\n\n  const [frame, setFrame] = useState<UseCursorAnimationResult>({\n    visibleText: shouldStartHidden ? '' : text,\n    showCursor: !shouldStartHidden,\n    cursorPhase: shouldStartHidden ? 'initial' : 'complete',\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!shouldAnimate) {\n      setFrame({visibleText: text, showCursor: true, cursorPhase: 'complete'})\n    }\n  }, [shouldAnimate, text])\n\n  useEffect(() => {\n    if (!shouldAnimate) return\n\n    const frameDuration = 1000 / 60\n    const charactersPerSecond = 30 * (85 / 75)\n    const deleteCharactersPerSecond = 24 * (85 / 75)\n    const correctionPauseDuration = 350 / (85 / 75)\n    const scrambleSymbols = ['>', '*', '=', '&', '+', '-', '%', '^', '_']\n\n    setFrame({visibleText: '', showCursor: false, cursorPhase: 'initial'})\n\n    const candidateInitialText =\n      typeof initialText === 'string' && initialText.length > 0 && initialText !== text ? initialText : undefined\n    let sharedPrefixLength = 0\n\n    if (candidateInitialText) {\n      while (\n        sharedPrefixLength < candidateInitialText.length &&\n        sharedPrefixLength < text.length &&\n        candidateInitialText[sharedPrefixLength] === text[sharedPrefixLength]\n      ) {\n        sharedPrefixLength += 1\n      }\n    }\n\n    const hasCorrection = candidateInitialText !== undefined && sharedPrefixLength < candidateInitialText.length\n    const firstText = hasCorrection ? candidateInitialText : text\n    const deletedCharacterCount = hasCorrection ? firstText.length - sharedPrefixLength : 0\n    const firstTypeDuration = (firstText.length / charactersPerSecond) * 1000\n    const correctionStart = firstTypeDuration + (hasCorrection ? correctionPauseDuration : 0)\n    const deleteDuration = (deletedCharacterCount / deleteCharactersPerSecond) * 1000\n    const secondTypeStart = correctionStart + deleteDuration\n    const secondTypeCharacterCount = hasCorrection ? text.length - sharedPrefixLength : 0\n    const secondTypeDuration = (secondTypeCharacterCount / charactersPerSecond) * 1000\n    const typingComplete = secondTypeStart + secondTypeDuration\n    const correctionCursorStart = correctionStart - frameDuration\n    const finalCursorStart = typingComplete - 6 * frameDuration\n\n    const getScrambledText = (sourceText: string, characterCount: number) => {\n      let result = ''\n      let visibleCharacterIndex = 0\n\n      for (let index = 0; index < characterCount; index += 1) {\n        const character = sourceText[index]\n\n        if (/\\s/.test(character)) {\n          result = `${result}${character}`\n          continue\n        }\n\n        visibleCharacterIndex += 1\n        result = `${result}${character}`\n\n        if (index === characterCount - 1) {\n          result = `${result}${scrambleSymbols[(visibleCharacterIndex - 1) % scrambleSymbols.length]}`\n        }\n      }\n\n      return result\n    }\n\n    const getFrame = (elapsed: number): UseCursorAnimationResult => {\n      let nextText = ''\n\n      if (elapsed > 0 && elapsed < firstTypeDuration) {\n        const typedCharacterCount = Math.floor((elapsed / 1000) * charactersPerSecond)\n        nextText = getScrambledText(firstText, typedCharacterCount)\n      } else if (hasCorrection && elapsed >= firstTypeDuration && elapsed < correctionStart) {\n        nextText = firstText\n      } else if (hasCorrection && elapsed >= correctionStart && elapsed < secondTypeStart) {\n        const deleteElapsed = elapsed - correctionStart\n        const currentDeletedCharacterCount = Math.floor((deleteElapsed / 1000) * deleteCharactersPerSecond)\n        nextText = firstText.slice(0, firstText.length - currentDeletedCharacterCount)\n      } else if (hasCorrection && elapsed >= secondTypeStart && elapsed < typingComplete) {\n        const secondTypeElapsed = elapsed - secondTypeStart\n        const typedCharacterCount = Math.min(\n          text.length,\n          sharedPrefixLength + Math.floor((secondTypeElapsed / 1000) * charactersPerSecond),\n        )\n        nextText = text.slice(0, typedCharacterCount)\n      } else if (elapsed >= typingComplete) {\n        nextText = text\n      }\n\n      let nextCursorPhase: CursorAnimationPhase = 'initial'\n      if (hasCorrection && elapsed >= correctionCursorStart) nextCursorPhase = 'correction'\n      if (elapsed >= finalCursorStart) nextCursorPhase = 'final'\n      if (elapsed >= typingComplete) nextCursorPhase = 'complete'\n\n      return {\n        visibleText: nextText,\n        showCursor: nextText.length > 0,\n        cursorPhase: nextCursorPhase,\n      }\n    }\n\n    let animationFrame: number | undefined\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    const startAnimation = () => {\n      const startTime = performance.now()\n      let previousFrame: UseCursorAnimationResult = {\n        visibleText: '',\n        showCursor: false,\n        cursorPhase: 'initial',\n      }\n\n      const tick = (currentTime: number) => {\n        const elapsed = currentTime - startTime\n        const nextFrame = getFrame(elapsed)\n\n        if (\n          previousFrame.visibleText !== nextFrame.visibleText ||\n          previousFrame.showCursor !== nextFrame.showCursor ||\n          previousFrame.cursorPhase !== nextFrame.cursorPhase\n        ) {\n          previousFrame = nextFrame\n          setFrame(nextFrame)\n        }\n\n        if (elapsed < typingComplete) {\n          animationFrame = window.requestAnimationFrame(tick)\n        }\n      }\n\n      animationFrame = window.requestAnimationFrame(tick)\n    }\n\n    const startDelayTimer = () => {\n      delayTimer = setTimeout(startAnimation, delay)\n    }\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      if (document.readyState === 'complete') {\n        startDelayTimer()\n      } else {\n        const handleLoad = () => startDelayTimer()\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer !== undefined) clearTimeout(delayTimer)\n          if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n        }\n      }\n    } else {\n      startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer !== undefined) clearTimeout(delayTimer)\n      if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n    }\n  }, [delay, initialText, shouldAnimate, text, waitForPageLoad])\n\n  return frame\n}\n"],"mappings":"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"}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base-DKbXhPKv.css

@@ -0,0 +1 @@
+:root{--brand-TextCursorAnimation-cursor-animationDuration:.833s}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BucKYl1n.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light]{--brand-TextCursorAnimation-cursor-color:var(--base-color-scale-purple-5);--brand-TextCursorAnimation-cursor-deleteColor:var(--base-color-scale-blue-4);--brand-TextCursorAnimation-cursor-finalColor:var(--base-color-scale-green-6)}[data-color-mode=dark]{--brand-TextCursorAnimation-cursor-color:var(--base-color-scale-purple-3);--brand-TextCursorAnimation-cursor-deleteColor:var(--base-color-scale-blue-3);--brand-TextCursorAnimation-cursor-finalColor:var(--base-color-scale-green-2)}

package/lib/Hero/sub-components/HeroLabel.d.ts

@@ -3,5 +3,6 @@ import type { BaseProps } from '../../component-helpers';
 export type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
     animate?: boolean;
     animationDelay?: number;
+    initialText?: string;
 };
 export declare const HeroLabel: import("react").ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -1,18 +1,23 @@
 import React, { PropsWithChildren } from 'react';
 import { TextProps } from '../Text/Text';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css';
 export declare const testIds: {
     root: string;
+    readonly text: string;
     readonly cursor: string;
 };
 export type TextCursorAnimationProps = {
     /**
-     * Whether to animate the text reveal with a sliding wipe animation
-     * and a cursor that transitions from grey to green.
+     * Whether to animate the text with a typing effect.
      */
     animate?: boolean;
+    /**
+     * Optional text to type before transitioning to the final text
+     */
+    initialText?: string;
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;