fetta 1.2.0 → 1.3.0

package/dist/{chunk-PRR25BMJ.js → chunk-Q2D5AQBW.js}

@@ -63,6 +63,86 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "u",
   "var"
 ]);
+var KERNING_STYLE_PROPS = [
+  "font",
+  "font-kerning",
+  "font-variant-ligatures",
+  "font-feature-settings",
+  "font-variation-settings",
+  "font-optical-sizing",
+  "font-size-adjust",
+  "font-stretch",
+  "font-variant-caps",
+  "font-variant-numeric",
+  "font-variant-east-asian",
+  "font-synthesis",
+  "font-synthesis-weight",
+  "font-synthesis-style",
+  "letter-spacing",
+  "word-spacing",
+  "text-rendering",
+  "text-transform",
+  "direction",
+  "unicode-bidi"
+];
+function copyKerningStyles(target, styles) {
+  KERNING_STYLE_PROPS.forEach((prop) => {
+    const value = styles.getPropertyValue(prop);
+    if (value) target.style.setProperty(prop, value);
+  });
+}
+function buildCanvasFontString(styles) {
+  const fontStyle = styles.fontStyle || "normal";
+  const fontWeight = styles.fontWeight || "normal";
+  const fontSize = styles.fontSize || "16px";
+  const fontFamily = styles.fontFamily || "sans-serif";
+  return [fontStyle, fontWeight, fontSize, fontFamily].filter(Boolean).join(" ");
+}
+function applyKerningStylesToCanvas(ctx, styles) {
+  ctx.font = buildCanvasFontString(styles);
+  const ctxAny = ctx;
+  const setIfExists = (prop, value) => {
+    if (!value || value === "normal") return;
+    if (prop in ctxAny) ctxAny[prop] = value;
+  };
+  setIfExists("fontKerning", styles.getPropertyValue("font-kerning"));
+  setIfExists("fontVariantLigatures", styles.getPropertyValue("font-variant-ligatures"));
+  setIfExists("fontFeatureSettings", styles.getPropertyValue("font-feature-settings"));
+  setIfExists("fontVariationSettings", styles.getPropertyValue("font-variation-settings"));
+  setIfExists("fontOpticalSizing", styles.getPropertyValue("font-optical-sizing"));
+  setIfExists("fontSizeAdjust", styles.getPropertyValue("font-size-adjust"));
+  setIfExists("fontStretch", styles.getPropertyValue("font-stretch"));
+  setIfExists("fontVariantCaps", styles.getPropertyValue("font-variant-caps"));
+  setIfExists("fontVariantNumeric", styles.getPropertyValue("font-variant-numeric"));
+  setIfExists("fontVariantEastAsian", styles.getPropertyValue("font-variant-east-asian"));
+  setIfExists("fontSynthesis", styles.getPropertyValue("font-synthesis"));
+  setIfExists("fontSynthesisWeight", styles.getPropertyValue("font-synthesis-weight"));
+  setIfExists("fontSynthesisStyle", styles.getPropertyValue("font-synthesis-style"));
+  setIfExists("letterSpacing", styles.getPropertyValue("letter-spacing"));
+  setIfExists("wordSpacing", styles.getPropertyValue("word-spacing"));
+  setIfExists("textRendering", styles.getPropertyValue("text-rendering"));
+  setIfExists("direction", styles.getPropertyValue("direction"));
+}
+function buildKerningStyleKey(styles) {
+  return KERNING_STYLE_PROPS.map((prop) => styles.getPropertyValue(prop)).join("|");
+}
+function shouldUseDomKerning(styles) {
+  const textTransform = styles.getPropertyValue("text-transform");
+  if (textTransform && textTransform !== "none") return true;
+  const fontVariant = styles.getPropertyValue("font-variant");
+  if (fontVariant && fontVariant !== "normal") return true;
+  const fontStretch = styles.getPropertyValue("font-stretch");
+  if (fontStretch && fontStretch !== "normal" && fontStretch !== "100%") return true;
+  const fontFeatureSettings = styles.getPropertyValue("font-feature-settings");
+  if (fontFeatureSettings && fontFeatureSettings !== "normal") return true;
+  const fontVariationSettings = styles.getPropertyValue("font-variation-settings");
+  if (fontVariationSettings && fontVariationSettings !== "normal") return true;
+  const fontOpticalSizing = styles.getPropertyValue("font-optical-sizing");
+  if (fontOpticalSizing && fontOpticalSizing !== "auto") return true;
+  const fontSizeAdjust = styles.getPropertyValue("font-size-adjust");
+  if (fontSizeAdjust && fontSizeAdjust !== "none") return true;
+  return false;
+}
 var isSafariBrowser = null;
 function isSafari() {
   if (isSafariBrowser !== null) return isSafariBrowser;
@@ -70,21 +150,14 @@ function isSafari() {
   isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   return isSafariBrowser;
 }
-function measureKerningCanvas(element, chars) {
+function measureKerningCanvas(styleSource, chars, styles) {
   const kerningMap = /* @__PURE__ */ new Map();
   if (chars.length < 2) return kerningMap;
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) return kerningMap;
-  const styles = getComputedStyle(element);
-  ctx.font = `${styles.fontStyle} ${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
-  if (styles.letterSpacing && styles.letterSpacing !== "normal") {
-    ctx.letterSpacing = styles.letterSpacing;
-  }
-  if (styles.wordSpacing && styles.wordSpacing !== "normal") {
-    ctx.wordSpacing = styles.wordSpacing;
-  }
-  if ("fontVariantLigatures" in ctx) ctx.fontVariantLigatures = "none";
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  applyKerningStylesToCanvas(ctx, computedStyles);
   const charWidths = /* @__PURE__ */ new Map();
   for (const char of new Set(chars)) {
     charWidths.set(char, ctx.measureText(char).width);
@@ -100,7 +173,7 @@ function measureKerningCanvas(element, chars) {
   }
   return kerningMap;
 }
-function measureKerningDOM(element, chars) {
+function measureKerningDOM(container, styleSource, chars, styles) {
   const kerningMap = /* @__PURE__ */ new Map();
   if (chars.length < 2) return kerningMap;
   const measurer = document.createElement("span");
@@ -109,21 +182,17 @@ function measureKerningDOM(element, chars) {
     visibility: hidden;
     white-space: pre;
   `;
-  const styles = getComputedStyle(element);
-  measurer.style.font = styles.font;
-  measurer.style.letterSpacing = styles.letterSpacing;
-  measurer.style.wordSpacing = styles.wordSpacing;
-  measurer.style.fontKerning = styles.fontKerning;
-  measurer.style.fontVariantLigatures = "none";
-  const webkitSmoothing = styles.webkitFontSmoothing || styles["-webkit-font-smoothing"];
-  const mozSmoothing = styles.MozOsxFontSmoothing || styles["-moz-osx-font-smoothing"];
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  copyKerningStyles(measurer, computedStyles);
+  const webkitSmoothing = computedStyles.webkitFontSmoothing || computedStyles["-webkit-font-smoothing"];
+  const mozSmoothing = computedStyles.MozOsxFontSmoothing || computedStyles["-moz-osx-font-smoothing"];
   if (webkitSmoothing) {
     measurer.style.webkitFontSmoothing = webkitSmoothing;
   }
   if (mozSmoothing) {
     measurer.style.MozOsxFontSmoothing = mozSmoothing;
   }
-  element.appendChild(measurer);
+  container.appendChild(measurer);
   const charWidths = /* @__PURE__ */ new Map();
   for (const char of new Set(chars)) {
     measurer.textContent = char;
@@ -139,12 +208,13 @@ function measureKerningDOM(element, chars) {
       kerningMap.set(i + 1, kerning);
     }
   }
-  element.removeChild(measurer);
+  container.removeChild(measurer);
   return kerningMap;
 }
-function measureKerning(element, chars) {
+function measureKerning(container, styleSource, chars, styles) {
   if (chars.length < 2) return /* @__PURE__ */ new Map();
-  return isSafari() ? measureKerningDOM(element, chars) : measureKerningCanvas(element, chars);
+  const computedStyles = styles != null ? styles : getComputedStyle(styleSource);
+  return isSafari() || shouldUseDomKerning(computedStyles) ? measureKerningDOM(container, styleSource, chars, computedStyles) : measureKerningCanvas(styleSource, chars, computedStyles);
 }
 var srOnlyStylesInjected = false;
 function injectSrOnlyStyles() {
@@ -407,7 +477,6 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
           }
           charGroups.forEach((group) => {
             group.chars.forEach((measuredChar) => {
-              measuredWord.chars.indexOf(measuredChar);
               const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
                 propIndex: options == null ? void 0 : options.propIndex,
                 propName: "char"
@@ -514,13 +583,37 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       for (const wordSpan of allWords) {
         const wordChars = Array.from(wordSpan.querySelectorAll(`.${charClass}`));
         if (wordChars.length < 2) continue;
-        const charStrings = wordChars.map((c) => c.textContent || "");
-        const kerningMap = measureKerning(element, charStrings);
-        for (const [charIndex, kerning] of kerningMap) {
-          const charSpan = wordChars[charIndex];
-          if (charSpan && Math.abs(kerning) < 20) {
-            const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
-            targetElement.style.marginLeft = `${kerning}px`;
+        const styleGroups = [];
+        const firstCharStyles = getComputedStyle(wordChars[0]);
+        let currentKey = buildKerningStyleKey(firstCharStyles);
+        let currentGroup = {
+          chars: [wordChars[0]],
+          styleSource: wordChars[0],
+          styles: firstCharStyles
+        };
+        for (let i2 = 1; i2 < wordChars.length; i2++) {
+          const char = wordChars[i2];
+          const charStyles = getComputedStyle(char);
+          const key = buildKerningStyleKey(charStyles);
+          if (key === currentKey) {
+            currentGroup.chars.push(char);
+          } else {
+            styleGroups.push(currentGroup);
+            currentKey = key;
+            currentGroup = { chars: [char], styleSource: char, styles: charStyles };
+          }
+        }
+        styleGroups.push(currentGroup);
+        for (const group of styleGroups) {
+          if (group.chars.length < 2) continue;
+          const charStrings = group.chars.map((c) => c.textContent || "");
+          const kerningMap = measureKerning(element, group.styleSource, charStrings, group.styles);
+          for (const [charIndex, kerning] of kerningMap) {
+            const charSpan = group.chars[charIndex];
+            if (charSpan && Math.abs(kerning) < 20) {
+              const targetElement = (options == null ? void 0 : options.mask) === "chars" && charSpan.parentElement ? charSpan.parentElement : charSpan;
+              targetElement.style.marginLeft = `${kerning}px`;
+            }
           }
         }
       }

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-PRR25BMJ.js';
+export { splitText } from './chunk-Q2D5AQBW.js';

package/dist/react.d.ts

@@ -43,6 +43,12 @@ type CallbackReturn = void | {
 }> | Promise<unknown>;
 interface SplitTextProps {
     children: ReactElement;
+    /** The wrapper element type. Default: "div" */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Class name for the wrapper element */
+    className?: string;
+    /** Additional styles for the wrapper element (merged with internal styles) */
+    style?: React.CSSProperties;
     /**
      * Called after text is split.
      * Return an animation or promise to enable revert (requires revertOnComplete).
@@ -115,6 +121,6 @@ interface SplitTextProps {
  * </SplitText>
  * ```
  */
-declare const SplitText: react.ForwardRefExoticComponent<SplitTextProps & react.RefAttributes<HTMLDivElement>>;
+declare const SplitText: react.ForwardRefExoticComponent<SplitTextProps & react.RefAttributes<HTMLElement>>;
 
 export { SplitText, type SplitTextElements };

package/dist/react.js

@@ -1,10 +1,13 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-PRR25BMJ.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-Q2D5AQBW.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var SplitText = forwardRef(
   function SplitText2({
     children,
+    as: Component = "div",
+    className,
+    style: userStyle,
     onSplit,
     onResize,
     options,
@@ -167,11 +170,13 @@ var SplitText = forwardRef(
     const clonedChild = cloneElement(children, {
       ref: childRefCallback
     });
+    const Wrapper = Component;
     return /* @__PURE__ */ jsx(
-      "div",
+      Wrapper,
       {
         ref: mergedRef,
-        style: { visibility: "hidden", position: "relative" },
+        className,
+        style: __spreadValues({ visibility: "hidden", position: "relative" }, userStyle),
         children: clonedChild
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,