@edwinvakayil/calligraphy 1.2.5 → 1.3.0

package/dist/index.js

@@ -131,28 +131,55 @@ function preloadFonts(families) {
 
 const STYLE_ID = "rts-hero-animations";
 const CSS = `
-@keyframes rts-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
-@keyframes rts-clip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
-@keyframes rts-pop{0%{opacity:0;transform:scale(0.75)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
-@keyframes rts-blur{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:scale(1)}}
-@keyframes rts-flip{from{opacity:0;transform:perspective(600px) rotateX(30deg) translateY(20px)}to{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)}}
-@keyframes rts-swipe{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
-@keyframes rts-bounce{0%{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(10px)}80%{transform:translateY(-5px)}100%{transform:translateY(0)}}
-@keyframes rts-type{from{width:0}to{width:100%}}
-@keyframes rts-blink{50%{border-color:transparent}}
-@keyframes rts-word-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
-@keyframes rts-letter-in{from{opacity:0;transform:translateX(-16px) rotate(-4deg)}to{opacity:1;transform:none}}
+@keyframes rts-rise        { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
+@keyframes rts-clip        { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }
+@keyframes rts-pop         { 0%{opacity:0;transform:scale(0.75)} 60%{opacity:1;transform:scale(1.04)} 100%{transform:scale(1)} }
+@keyframes rts-blur        { from{opacity:0;filter:blur(14px);transform:scale(1.04)} to{opacity:1;filter:blur(0);transform:scale(1)} }
+@keyframes rts-flip        { from{opacity:0;transform:perspective(600px) rotateX(30deg) translateY(20px)} to{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)} }
+@keyframes rts-swipe       { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
+@keyframes rts-bounce      { 0%{opacity:0;transform:translateY(-60px)} 60%{opacity:1;transform:translateY(10px)} 80%{transform:translateY(-5px)} 100%{transform:translateY(0)} }
+@keyframes rts-type        { from{width:0} to{width:100%} }
+@keyframes rts-blink       { 50%{border-color:transparent} }
+@keyframes rts-word-rise   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
+@keyframes rts-letter-in   { from{opacity:0;transform:translateX(-16px) rotate(-4deg)} to{opacity:1;transform:none} }
 
-.rts-rise      { animation: rts-rise 0.9s cubic-bezier(0.16,1,0.3,1) both }
-.rts-clip      { animation: rts-clip 1.1s cubic-bezier(0.77,0,0.18,1) both }
-.rts-pop       { animation: rts-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both }
-.rts-blur      { animation: rts-blur 1s cubic-bezier(0.16,1,0.3,1) both }
-.rts-flip      { animation: rts-flip 0.9s cubic-bezier(0.16,1,0.3,1) both; transform-origin: center bottom }
-.rts-swipe     { animation: rts-swipe 0.8s cubic-bezier(0.16,1,0.3,1) both }
-.rts-bounce    { animation: rts-bounce 0.9s cubic-bezier(0.36,0.07,0.19,0.97) both }
-.rts-typewriter{ overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; width: 0; animation: rts-type 1.6s steps(22,end) both, rts-blink 0.7s step-end 1.6s 3 }
-.rts-word      { display: inline-block; opacity: 0; transform: translateY(24px); animation: rts-word-rise 0.7s cubic-bezier(0.16,1,0.3,1) both }
-.rts-letter    { display: inline-block; opacity: 0; transform: translateX(-16px) rotate(-4deg); animation: rts-letter-in 0.5s cubic-bezier(0.16,1,0.3,1) both }
+/* ── New modern animations ─────────────────────────────────────────────── */
+
+@keyframes rts-velvet      { from{opacity:0;transform:translate(-12px,20px) skewX(4deg)} to{opacity:1;transform:translate(0,0) skewX(0deg)} }
+@keyframes rts-curtain     { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0% 0)} }
+@keyframes rts-morph       { 0%{opacity:0;transform:scaleY(0.3) scaleX(1.3) translateY(10px)} 60%{opacity:1;transform:scaleY(1.08) scaleX(0.97)} 100%{transform:scaleY(1) scaleX(1)} }
+@keyframes rts-ground      { from{transform:translateY(110%);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes rts-cascade     { from{opacity:0;transform:translateY(-28px) translateX(10px) rotate(8deg)} to{opacity:1;transform:none} }
+@keyframes rts-spotlight   { 0%{opacity:0;letter-spacing:0.3em;transform:scaleX(1.15)} 100%{opacity:1;letter-spacing:-0.03em;transform:scaleX(1)} }
+@keyframes rts-ink         { 0%{opacity:0;transform:translateY(6px) scale(0.96)} 100%{opacity:1;transform:translateY(0) scale(1)} }
+@keyframes rts-hinge       { from{opacity:0;transform:perspective(400px) rotateY(-40deg) translateX(-20px)} to{opacity:1;transform:perspective(400px) rotateY(0) translateX(0)} }
+@keyframes rts-stretch     { 0%{opacity:0;transform:scaleX(0.05)} 60%{transform:scaleX(1.04)} 100%{opacity:1;transform:scaleX(1)} }
+@keyframes rts-peel        { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0% 0 0 0)} }
+
+/* ── Whole-element classes (no splitting needed) ───────────────────────── */
+.rts-rise       { animation: rts-rise 0.9s cubic-bezier(0.16,1,0.3,1) both }
+.rts-clip       { animation: rts-clip 1.1s cubic-bezier(0.77,0,0.18,1) both }
+.rts-pop        { animation: rts-pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-blur       { animation: rts-blur 1s cubic-bezier(0.16,1,0.3,1) both }
+.rts-flip       { animation: rts-flip 0.9s cubic-bezier(0.16,1,0.3,1) both; transform-origin: center bottom }
+.rts-swipe      { animation: rts-swipe 0.8s cubic-bezier(0.16,1,0.3,1) both }
+.rts-bounce     { animation: rts-bounce 0.9s cubic-bezier(0.36,0.07,0.19,0.97) both }
+.rts-typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; width: 0; animation: rts-type 1.6s steps(22,end) both, rts-blink 0.7s step-end 1.6s 3 }
+.rts-morph      { animation: rts-morph 0.8s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-spotlight  { animation: rts-spotlight 1s cubic-bezier(0.16,1,0.3,1) both }
+.rts-stretch    { animation: rts-stretch 0.9s cubic-bezier(0.34,1.56,0.64,1) both }
+
+/* ── Per-word / per-character span classes ─────────────────────────────── */
+.rts-word           { display:inline-block;opacity:0;transform:translateY(24px);animation:rts-word-rise 0.7s cubic-bezier(0.16,1,0.3,1) both }
+.rts-letter         { display:inline-block;opacity:0;transform:translateX(-16px) rotate(-4deg);animation:rts-letter-in 0.5s cubic-bezier(0.16,1,0.3,1) both }
+.rts-velvet-word    { display:inline-block;opacity:0;animation:rts-velvet 0.65s cubic-bezier(0.16,1,0.3,1) both }
+.rts-curtain-word   { display:inline-block;overflow:hidden;animation:rts-curtain 0.7s cubic-bezier(0.77,0,0.18,1) both }
+.rts-ground-wrap    { display:inline-block;overflow:hidden;vertical-align:bottom }
+.rts-ground-inner   { display:inline-block;animation:rts-ground 0.65s cubic-bezier(0.16,1,0.3,1) both }
+.rts-cascade-ch     { display:inline-block;opacity:0;animation:rts-cascade 0.45s cubic-bezier(0.34,1.56,0.64,1) both }
+.rts-ink-word       { display:inline-block;opacity:0;animation:rts-ink 0.9s cubic-bezier(0.16,1,0.3,1) both }
+.rts-hinge-word     { display:inline-block;opacity:0;transform-origin:left center;animation:rts-hinge 0.6s cubic-bezier(0.16,1,0.3,1) both }
+.rts-peel-word      { display:inline-block;overflow:hidden;animation:rts-peel 0.6s cubic-bezier(0.77,0,0.18,1) both }
 `;
 function injectAnimationStyles() {
     if (typeof document === "undefined")
@@ -164,52 +191,47 @@ function injectAnimationStyles() {
     style.textContent = CSS;
     document.head.appendChild(style);
 }
+// ─── Whole-element class map ──────────────────────────────────────────────────
+const WHOLE_CLASS_MAP = {
+    rise: "rts-rise",
+    clip: "rts-clip",
+    pop: "rts-pop",
+    blur: "rts-blur",
+    flip: "rts-flip",
+    swipe: "rts-swipe",
+    bounce: "rts-bounce",
+    typewriter: "rts-typewriter",
+    morph: "rts-morph",
+    spotlight: "rts-spotlight",
+    stretch: "rts-stretch",
+};
+/** Returns the CSS class for whole-element animations, or "" for split ones. */
 function getAnimationClass(animation) {
     var _a;
-    const map = {
-        rise: "rts-rise",
-        clip: "rts-clip",
-        pop: "rts-pop",
-        blur: "rts-blur",
-        flip: "rts-flip",
-        swipe: "rts-swipe",
-        bounce: "rts-bounce",
-        typewriter: "rts-typewriter",
-        stagger: "",
-        letters: "",
-    };
-    return (_a = map[animation]) !== null && _a !== void 0 ? _a : "";
+    return (_a = WHOLE_CLASS_MAP[animation]) !== null && _a !== void 0 ? _a : "";
 }
-/**
- * Wraps each word in an animated span.
- * <em> tokens are preserved as-is in the HTML — Typography's useEffect
- * will apply inline styles to them after mount.
- */
-function buildStaggerHTML(html) {
+/** True if the animation needs the HTML to be split into word/char spans. */
+function isSplitAnimation(animation) {
+    return !(animation in WHOLE_CLASS_MAP);
+}
+// ─── HTML builders for split animations ──────────────────────────────────────
+function wrapWords(html, cls, delayStep) {
     var _a;
     const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
     return tokens
         .map((tok, i) => {
-        const delay = (i * 0.07).toFixed(2);
+        const delay = (i * delayStep).toFixed(2);
         if (tok.startsWith("<em>")) {
-            // Wrap the inner text in the animated span, keep <em> outside
-            const inner = tok.slice(4, -5);
-            return `<em><span class="rts-word" style="animation-delay:${delay}s">${inner}</span></em>`;
+            return `<em><span class="${cls}" style="animation-delay:${delay}s">${tok.slice(4, -5)}</span></em>`;
         }
-        return `<span class="rts-word" style="animation-delay:${delay}s">${tok}</span>`;
+        return `<span class="${cls}" style="animation-delay:${delay}s">${tok}</span>`;
     })
         .join(" ");
 }
-/**
- * Wraps each character in an animated span.
- * <em> tags are preserved in the output — Typography's useEffect applies
- * the actual italic/non-italic inline styles after the DOM is ready.
- */
-function buildLettersHTML(html) {
+function wrapChars(html, cls, delayStep) {
     const result = [];
     let inEm = false;
     let delay = 0;
-    const step = 0.04;
     let i = 0;
     while (i < html.length) {
         if (html.startsWith("<em>", i)) {
@@ -228,14 +250,76 @@ function buildLettersHTML(html) {
             i++;
             continue;
         }
-        const span = `<span class="rts-letter" style="animation-delay:${delay.toFixed(2)}s">${ch}</span>`;
-        // Preserve <em> wrapper in DOM — styles applied by useEffect
+        const span = `<span class="${cls}" style="animation-delay:${delay.toFixed(2)}s">${ch}</span>`;
         result.push(inEm ? `<em>${span}</em>` : span);
-        delay += step;
+        delay += delayStep;
         i++;
     }
     return result.join("");
 }
+function wrapGround(html, delayStep) {
+    var _a;
+    const tokens = (_a = html.match(/(<em>[\s\S]*?<\/em>|[^\s]+)/g)) !== null && _a !== void 0 ? _a : [];
+    return tokens
+        .map((tok, i) => {
+        const delay = (i * delayStep).toFixed(2);
+        const inner = tok.startsWith("<em>")
+            ? `<em>${tok.slice(4, -5)}</em>`
+            : tok;
+        return `<span class="rts-ground-wrap"><span class="rts-ground-inner" style="animation-delay:${delay}s">${inner}</span></span>`;
+    })
+        .join(" ");
+}
+function buildSplitHTML(animation, html) {
+    switch (animation) {
+        case "stagger": return wrapWords(html, "rts-word", 0.07);
+        case "letters": return wrapChars(html, "rts-letter", 0.04);
+        case "velvet": return wrapWords(html, "rts-velvet-word", 0.08);
+        case "curtain": return wrapWords(html, "rts-curtain-word", 0.10);
+        case "ground": return wrapGround(html, 0.09);
+        case "cascade": return wrapChars(html, "rts-cascade-ch", 0.05);
+        case "ink": return wrapWords(html, "rts-ink-word", 0.10);
+        case "hinge": return wrapWords(html, "rts-hinge-word", 0.09);
+        case "peel": return wrapWords(html, "rts-peel-word", 0.10);
+        default: return html;
+    }
+}
+
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+const DEFAULT_THEME = {
+    font: "",
+    accentColor: "#c8b89a",
+    italic: false,
+    animation: "rise",
+    color: "",
+};
+// ─── Context ──────────────────────────────────────────────────────────────────
+const TypographyContext = react.createContext(DEFAULT_THEME);
+const TypographyProvider = ({ theme, children, }) => {
+    const resolved = react.useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return ({
+            font: (_a = theme.font) !== null && _a !== void 0 ? _a : DEFAULT_THEME.font,
+            accentColor: (_b = theme.accentColor) !== null && _b !== void 0 ? _b : DEFAULT_THEME.accentColor,
+            italic: (_c = theme.italic) !== null && _c !== void 0 ? _c : DEFAULT_THEME.italic,
+            animation: (_d = theme.animation) !== null && _d !== void 0 ? _d : DEFAULT_THEME.animation,
+            color: (_e = theme.color) !== null && _e !== void 0 ? _e : DEFAULT_THEME.color,
+        });
+    }, [theme.font, theme.accentColor, theme.italic, theme.animation, theme.color]);
+    // Pre-load the theme font as soon as the provider mounts
+    if (resolved.font && GOOGLE_FONTS.includes(resolved.font)) {
+        injectFont(buildFontUrl(resolved.font));
+    }
+    return (jsxRuntime.jsx(TypographyContext.Provider, { value: resolved, children: children }));
+};
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+/**
+ * Returns the resolved theme from the nearest TypographyProvider.
+ * Falls back to DEFAULT_THEME if used outside a provider.
+ */
+function useTypographyTheme() {
+    return react.useContext(TypographyContext);
+}
 
 // ─── Static maps ─────────────────────────────────────────────────────────────
 const variantTagMap = {
@@ -330,10 +414,6 @@ const variantStyleMap = {
 // ─── Constants ───────────────────────────────────────────────────────────────
 const INSTRUMENT_SERIF_URL = "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap";
 // ─── Helpers ─────────────────────────────────────────────────────────────────
-/**
- * Serialise React children → raw HTML string.
- * Preserves <em>text</em> nodes for animation builders.
- */
 function childrenToHTML(children) {
     var _a, _b;
     return ((_b = (_a = react.Children.map(children, (child) => {
@@ -347,11 +427,6 @@ function childrenToHTML(children) {
         return "";
     })) === null || _a === void 0 ? void 0 : _a.join("")) !== null && _b !== void 0 ? _b : "");
 }
-/**
- * Re-map React children so that <em> elements get explicit inline styles.
- * This is used for the no-animation render path where we keep real React nodes.
- * Inline styles on the <em> itself beat any inherited font-family from the parent.
- */
 function renderChildrenWithEmStyles(children, italic, accentColor, headingFont) {
     const italicStyle = {
         fontFamily: "'Instrument Serif', serif",
@@ -372,13 +447,8 @@ function renderChildrenWithEmStyles(children, italic, accentColor, headingFont)
         return child;
     });
 }
-/**
- * After dangerouslySetInnerHTML renders, walk the DOM and apply inline styles
- * to every <em> and <em> > span so the font switch is guaranteed.
- */
 function applyEmStylesDOM(container, italic, accentColor, headingFont) {
-    // Select both <em> and any animated letter spans nested inside <em>
-    container.querySelectorAll("em").forEach((el) => {
+    const apply = (el) => {
         if (italic) {
             el.style.fontFamily = "'Instrument Serif', serif";
             el.style.fontStyle = "italic";
@@ -391,59 +461,68 @@ function applyEmStylesDOM(container, italic, accentColor, headingFont) {
             el.style.fontWeight = "inherit";
             el.style.color = "inherit";
         }
-    });
-    // Also style the animated letter spans inside <em> (used by "letters" animation)
-    container.querySelectorAll("em > span").forEach((el) => {
-        if (italic) {
-            el.style.fontFamily = "'Instrument Serif', serif";
-            el.style.fontStyle = "italic";
-            el.style.fontWeight = "400";
-            el.style.color = accentColor;
-        }
-        else {
-            el.style.fontFamily = headingFont ? `'${headingFont}', sans-serif` : "inherit";
-            el.style.fontStyle = "normal";
-            el.style.fontWeight = "inherit";
-            el.style.color = "inherit";
-        }
-    });
+    };
+    container.querySelectorAll("em").forEach(apply);
+    container.querySelectorAll("em > span").forEach(apply);
 }
 // ─── Component ───────────────────────────────────────────────────────────────
 const Typography = (_a) => {
-    var { variant = "Body", font, color, align, className, style, children, as, truncate, maxLines, animation, italic = false, accentColor = "#c8b89a" } = _a, rest = __rest(_a, ["variant", "font", "color", "align", "className", "style", "children", "as", "truncate", "maxLines", "animation", "italic", "accentColor"]);
+    var _b;
+    var { variant = "Body", font: fontProp, color: colorProp, animation: animationProp, italic: italicProp, accentColor: accentColorProp, align, className, style, children, as, truncate, maxLines } = _a, rest = __rest(_a, ["variant", "font", "color", "animation", "italic", "accentColor", "align", "className", "style", "children", "as", "truncate", "maxLines"]);
+    const theme = useTypographyTheme();
     const isHero = variant === "Display" || variant === "H1";
     const ref = react.useRef(null);
-    // Always inject Instrument Serif for hero variants so it's pre-loaded
-    // and ready the moment italic is toggled on — no flash of wrong font.
-    if (isHero) {
-        injectFont(INSTRUMENT_SERIF_URL);
-    }
-    // Inject heading Google Font
-    if (font && GOOGLE_FONTS.includes(font)) {
-        injectFont(buildFontUrl(font));
-    }
-    // Inject animation keyframes (once, global)
-    if (animation && isHero) {
-        injectAnimationStyles();
-    }
-    // For animation paths (dangerouslySetInnerHTML), walk the DOM after render
-    // and stamp inline styles onto every <em> — guaranteed to beat inheritance.
+    // Prop wins; fall back to theme; fall back to built-in default
+    const font = fontProp !== null && fontProp !== void 0 ? fontProp : (theme.font || undefined);
+    const color = colorProp !== null && colorProp !== void 0 ? colorProp : (theme.color || undefined);
+    const animation = isHero ? ((_b = animationProp !== null && animationProp !== void 0 ? animationProp : theme.animation) !== null && _b !== void 0 ? _b : undefined) : undefined;
+    const italic = italicProp !== null && italicProp !== void 0 ? italicProp : theme.italic;
+    const accentColor = accentColorProp !== null && accentColorProp !== void 0 ? accentColorProp : theme.accentColor;
+    // ── useInsertionEffect: inject <link> and <style> tags ────────────────────
+    //
+    // WHY useInsertionEffect instead of plain render-phase calls:
+    //
+    // 1. Server safety — useInsertionEffect (like all effects) is never called
+    //    on the server, so document.createElement / document.head never run
+    //    during SSR. The isBrowser guard in ssr.ts is a belt-and-suspenders
+    //    backup, but the effect boundary is the real guarantee.
+    //
+    // 2. Correctness — React 18 concurrent mode can call the render function
+    //    multiple times before committing. Doing DOM work in render can fire
+    //    those side-effects redundantly or out of order. useInsertionEffect
+    //    fires synchronously before the browser paints, once per commit.
+    //
+    // 3. No FOUC — because it fires before paint (earlier than useLayoutEffect),
+    //    the <style> tag is in the DOM before any text is visible, so there is
+    //    no flash of unstyled / wrong-font text.
+    react.useInsertionEffect(() => {
+        // Instrument Serif — always pre-load for hero so toggling italic is instant
+        if (isHero) {
+            injectFont(INSTRUMENT_SERIF_URL);
+        }
+        // Heading Google Font
+        if (font && GOOGLE_FONTS.includes(font)) {
+            injectFont(buildFontUrl(font));
+        }
+        // Animation keyframe stylesheet
+        if (animation && isHero) {
+            injectAnimationStyles();
+        }
+    }, [isHero, font, animation]);
+    // ── useEffect: re-stamp inline styles on <em> after DOM updates ───────────
     react.useEffect(() => {
         if (!isHero || !animation || !ref.current)
             return;
         applyEmStylesDOM(ref.current, italic, accentColor, font);
     }, [italic, accentColor, font, animation, isHero]);
     const Tag = (as !== null && as !== void 0 ? as : variantTagMap[variant]);
-    // ── Compute animation class + inner HTML ──────────────────────────────────
+    // ── Animation path: build inner HTML ─────────────────────────────────────
     let animClass = "";
     let heroHTML = null;
     if (animation && isHero) {
         const rawHTML = childrenToHTML(children);
-        if (animation === "stagger") {
-            heroHTML = buildStaggerHTML(rawHTML);
-        }
-        else if (animation === "letters") {
-            heroHTML = buildLettersHTML(rawHTML);
+        if (isSplitAnimation(animation)) {
+            heroHTML = buildSplitHTML(animation, rawHTML);
         }
         else {
             heroHTML = rawHTML;
@@ -465,7 +544,7 @@ const Typography = (_a) => {
     if (heroHTML !== null) {
         return (jsxRuntime.jsx(Tag, Object.assign({ ref: ref, className: [animClass, className].filter(Boolean).join(" "), style: computedStyle, dangerouslySetInnerHTML: { __html: heroHTML } }, rest), animation));
     }
-    // ── Render: standard path (real React children with em styles) ────────────
+    // ── Render: standard path ────────────────────────────────────────────────
     const processedChildren = isHero
         ? renderChildrenWithEmStyles(children, italic, accentColor, font)
         : children;
@@ -474,6 +553,7 @@ const Typography = (_a) => {
 
 exports.GOOGLE_FONTS = GOOGLE_FONTS;
 exports.Typography = Typography;
+exports.TypographyProvider = TypographyProvider;
 exports.buildFontUrl = buildFontUrl;
 exports.default = Typography;
 exports.injectFont = injectFont;