@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
52 lines (51 loc) • 1.95 kB
JavaScript
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 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 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,
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;
return /* @__PURE__ */ i("span", {
className: e(r.TextCursorAnimation, c),
"data-testid": u || 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
})]
})
});
}
//#endregion
export { s as TextCursorAnimation, o as testIds };
//# sourceMappingURL=TextCursorAnimation.js.map