@matteodicristofalo/text-animations 1.1.2 → 2.0.2

package/README.md

@@ -42,22 +42,27 @@ export default function RootLayout({
 
 Once imported the CSS you can use the React components.
 
-## SplitTextReveal
+## textReveal
 
 ```js
 "use client";
 
-import { SplitTextReveal } from "@matteodicristofalo/text-animations";
+import { textReveal } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
   return (
-    <h1>
-      <SplitTextReveal text="Hello World" />
-    </h1>
+    <>
+      <textReveal.h1 text="Hello World" />
+      <textReveal.h2 text="Hello World" />
+      <textReveal.p text="Hello World" />
+      <textReveal.span text="Hello World" />
+    </>
   );
 }
 ```
 
+If you're using **Next.JS** make sure the component importing `<textReveal>` is marked as **Client Component** via the `"use client"` directive otherwise it won't compile.
+
 You can decide how to split the text between one of this options:
 
 - char (default)
@@ -65,7 +70,7 @@ You can decide how to split the text between one of this options:
 - sentence
 
 ```js
-<SplitTextReveal text="Hello World" splitType="word" />
+<textReveal.h1 text="Hello World" splitType="word" />
 ```
 
 You can also configure the reveal animation by specifying:
@@ -79,10 +84,10 @@ You can also configure the reveal animation by specifying:
 "use client";
 
 import { useMemo } from "react";
-import { SplitTextReveal } from "@matteodicristofalo/text-animations";
+import { textReveal } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
-  const revealOptions = useMemo(
+  const animation = useMemo(
     () => ({
       duration: 1,
       stagger: 0.5,
@@ -92,40 +97,41 @@ export function MyComponent() {
     []
   );
 
-  return (
-    <h1>
-      <SplitTextReveal text="Hello World" revealOptions={revealOptions} />
-    </h1>
-  );
+  return <textReveal.h1 text="Hello World" animation={animation} />;
 }
 ```
 
-## SplitTextRotate
+## textRotate
 
 ```js
 "use client";
 
-import { SplitTextRotate } from "@matteodicristofalo/text-animations";
+import { textRotate } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
   return (
-    <h1>
-      <SplitTextRotate text="Hello World" />
-    </h1>
+    <>
+      <textRotate.h1 text="Hello World" />
+      <textRotate.h1 text="Hello World" />
+      <textRotate.p text="Hello World" />
+      <textRotate.span text="Hello World" />
+    </>
   );
 }
 ```
 
+As well as `<textReveal>`, If you're using **Next.JS** make sure the component importing `<textRotate>` is marked as **Client Component** via the `"use client"`.
+
 This component split always by char, the only thing you can configure is the rotate animation
 
 ```js
 "use client";
 
 import { useMemo } from "react";
-import { SplitTextRotate } from "@matteodicristofalo/text-animations";
+import { textRotate } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
-  const rotateOptions = useMemo(
+  const animation = useMemo(
     () => ({
       duration: 1,
       stagger: 0.5,
@@ -133,10 +139,6 @@ export function MyComponent() {
     []
   );
 
-  return (
-    <h1>
-      <SplitTextRotate text="Hello World" rotateOptions={rotateOptions} />
-    </h1>
-  );
+  return <textRotate.h1 text="Hello World" animation={animation} />;
 }
 ```

package/dist/components/index.d.ts

@@ -1,2 +1,2 @@
-export { SplitTextReveal } from "./split-text-reveal/split-text-reveal";
-export { SplitTextRotate } from "./split-text-rotate/split-text-rotate";
+export * from "./text-reveal/text-reveal";
+export * from "./text-rotate/text-rotate";

package/dist/components/text-reveal/text-reveal.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { WithTag } from "@utils/types";
+type TextRevealProps = WithTag<{
+    text: string;
+    splitType?: "sentence" | "word" | "char";
+    animation?: Partial<{
+        duration: number;
+        delay: number;
+        stagger: number;
+        threshold: number;
+        once: boolean;
+    }>;
+}>;
+declare const textReveal: {
+    h1: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    h2: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    h3: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    h4: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    h5: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    h6: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    p: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+    span: React.FC<import("@utils/types").WithoutTag<TextRevealProps>>;
+};
+export { textReveal };

package/dist/components/{split-text-reveal/split-text-reveal.stories.d.ts → text-reveal/text-reveal.stories.d.ts}

@@ -1,9 +1,20 @@
 import React from "react";
 import type { StoryObj } from "@storybook/react";
-import { SplitTextReveal } from "./split-text-reveal";
 declare const meta: {
     title: string;
-    component: typeof SplitTextReveal;
+    component: React.FC<import("../../utils/types").WithoutTag<{
+        text: string;
+        splitType?: "sentence" | "word" | "char";
+        animation?: Partial<{
+            duration: number;
+            delay: number;
+            stagger: number;
+            threshold: number;
+            once: boolean;
+        }>;
+    } & {
+        tag: import("../../utils/jsx").HtmlTextElementTag;
+    }>>;
     argTypes: {
         text: {
             control: "text";
@@ -12,7 +23,7 @@ declare const meta: {
             control: "radio";
             options: string[];
         };
-        revealOptions: {
+        animation: {
             control: {
                 type: "object";
             };
@@ -22,7 +33,6 @@ declare const meta: {
         text: string;
         splitType: "char";
     };
-    render: (args: import("./split-test-reveal.types").SplitTextRevealProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -33,4 +43,4 @@ export declare const Duration: Story;
 export declare const Delay: Story;
 export declare const Stagger: Story;
 export declare const Threshold: Story;
-export declare const NotOnce: Story;
+export declare const MultipleTimes: Story;

package/dist/components/text-rotate/text-rotate.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { WithTag } from "@utils/types";
+type TextRotateProps = WithTag<{
+    text: string;
+    animation?: Partial<{
+        duration: number;
+        stagger: number;
+    }>;
+}>;
+declare const textRotate: {
+    h1: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    h2: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    h3: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    h4: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    h5: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    h6: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    p: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+    span: React.FC<import("@utils/types").WithoutTag<TextRotateProps>>;
+};
+export { textRotate };

package/dist/components/{split-text-rotate/split-text-rotate.stories.d.ts → text-rotate/text-rotate.stories.d.ts}

@@ -1,14 +1,20 @@
-import React from "react";
 import type { StoryObj } from "@storybook/react";
-import { SplitTextRotate } from "./split-text-rotate";
 declare const meta: {
     title: string;
-    component: typeof SplitTextRotate;
+    component: import("react").FC<import("../../utils/types").WithoutTag<{
+        text: string;
+        animation?: Partial<{
+            duration: number;
+            stagger: number;
+        }>;
+    } & {
+        tag: import("../../utils/jsx").HtmlTextElementTag;
+    }>>;
     argTypes: {
         text: {
             control: "text";
         };
-        rotateOptions: {
+        animation: {
             control: {
                 type: "object";
             };
@@ -17,7 +23,6 @@ declare const meta: {
     args: {
         text: string;
     };
-    render: (args: import("./split-text-rotate.types").SplitTextRotateProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
-export { useIntersectionObserver } from "./intersection-overser/intersection-observer";
+export { useIntersectionObserver } from "./use-intersection-observer";
+export { useIsHydrated } from "./use-is-hydrated";

package/dist/hooks/use-is-hydrated.d.ts

@@ -0,0 +1 @@
+export declare function useIsHydrated(): boolean;

package/dist/index.css

@@ -1,60 +1,46 @@
-.split-text-reveal-module_text__-9O5o {
+.text-reveal-module_text__YrhhT {
   position: relative;
 }
-.split-text-reveal-module_text__-9O5o .split-text-reveal-module_is-hidden__2J8-i {
-  opacity: 0;
-}
-.split-text-reveal-module_text__-9O5o .split-text-reveal-module_sr-only__luZuY {
-  height: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-}
-.split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P {
-  display: inline-flex;
+.text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu {
+  display: inline-block;
   overflow: hidden;
 }
-.split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P span {
-  min-width: 0.25em;
+.text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu span {
+  display: inline-block;
   transform: translateY(100%);
   transition-delay: calc(var(--var-delay) + var(--var-stagger));
   transition-duration: var(--var-duration);
   transition-property: transform;
   transition-timing-function: ease-out;
+  white-space: pre;
   will-change: transform;
 }
-.split-text-reveal-module_text__-9O5o.split-text-reveal-module_animate__y6o78 .split-text-reveal-module_container__mkD-P span {
+.text-reveal-module_text__YrhhT.text-reveal-module_animate__kbOPX .text-reveal-module_container__HD1Pu span {
   transform: translateY(0);
 }
-.split-text-rotate-module_text__xzran {
+.text-rotate-module_text__WKSY- {
   display: block;
   overflow: hidden;
   position: relative;
 }
-.split-text-rotate-module_text__xzran .split-text-rotate-module_sr-only__Dbb9O {
-  height: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-}
-.split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE {
-  display: flex;
+.text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm {
+  display: block;
 }
-.split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE:nth-of-type(2) {
+.text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm:nth-of-type(2) {
   position: absolute;
   top: 0;
   transform: translateY(100%);
 }
-.split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE .split-text-rotate-module_char__PYJ-k {
+.text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm .text-rotate-module_char__LG3ps {
   display: inline-block;
-  min-width: 0.25em;
   transition-delay: var(--var-delay-out);
   transition-duration: var(--var-duration);
   transition-property: transform;
   transition-timing-function: ease-out;
+  white-space: pre;
   will-change: transform;
 }
-.split-text-rotate-module_text__xzran:hover .split-text-rotate-module_container__EAJkE .split-text-rotate-module_char__PYJ-k {
+.text-rotate-module_text__WKSY-:hover .text-rotate-module_container__2qsrm .text-rotate-module_char__LG3ps {
   transform: translateY(-100%);
   transition-delay: var(--var-delay-in);
 }

package/dist/index.js

@@ -1,27 +1,5 @@
-'use client';
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 
-function round(num, digits) {
-    return parseFloat(num.toFixed(digits));
-}
-function clamp(n, min, max) {
-    return Math.min(Math.max(min, n), max);
-}
-
-function sentences(text) {
-    return segment(text, "sentence");
-}
-function words(text) {
-    return segment(text, "word");
-}
-function characters(text) {
-    return segment(text, "grapheme");
-}
-function segment(text, granularity) {
-    var segmenter = new Intl.Segmenter(undefined, { granularity: granularity });
-    return Array.from(segmenter.segment(text), function (segment) { return segment.segment; });
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -55,6 +33,27 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+function round(num, digits) {
+    return parseFloat(num.toFixed(digits));
+}
+function clamp(n, min, max) {
+    return Math.min(Math.max(min, n), max);
+}
+
+function sentences(text) {
+    return segment(text, "sentence");
+}
+function words(text) {
+    return segment(text, "word");
+}
+function characters(text) {
+    return segment(text, "grapheme");
+}
+function segment(text, granularity) {
+    var segmenter = new Intl.Segmenter(undefined, { granularity: granularity });
+    return Array.from(segmenter.segment(text), function (segment) { return segment.segment; });
+}
+
 function useIntersectionObserver(ref, options) {
     var _a = useState(false), isIntersecting = _a[0], setIntersecting = _a[1];
     useEffect(function () {
@@ -78,34 +77,69 @@ function useIntersectionObserver(ref, options) {
     return isIntersecting;
 }
 
+function useIsHydrated() {
+    var _a = useState(false), isHydrated = _a[0], setIsHydrated = _a[1];
+    useEffect(function () {
+        setIsHydrated(true);
+    }, []);
+    return isHydrated;
+}
+
+var htmlTextElementTags = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "p",
+    "span",
+];
+function generateJsxVariations(Component) {
+    return htmlTextElementTags.reduce(function (variations, tag) {
+        variations[tag] = function (props) { return (React.createElement(Component, __assign({}, props, { tag: tag }))); };
+        return variations;
+    }, {});
+}
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split-text-reveal-module_is-hidden__2J8-i","sr-only":"split-text-reveal-module_sr-only__luZuY","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
+var styles$1 = {"text":"text-reveal-module_text__YrhhT","container":"text-reveal-module_container__HD1Pu","animate":"text-reveal-module_animate__kbOPX"};
 
 var DEFAULT_DURATION$1 = 0.5;
 var DEFAULT_STAGGER$1 = 0.01;
 var MIN_THRESHOLD = 0;
 var MAX_THRESHOLD = 1;
 var DEFAULT_THRESHOLD = 0.25;
-function SplitTextReveal(_a) {
+function TextReveal(props) {
+    var isHydrated = useIsHydrated();
+    if (isHydrated === false) {
+        return React.createElement(TextRevealServer, __assign({}, props));
+    }
+    return React.createElement(TextRevealClient, __assign({}, props));
+}
+function TextRevealServer(_a) {
+    var Tag = _a.tag, text = _a.text;
+    return React.createElement(Tag, { style: { opacity: 0 } }, text);
+}
+function TextRevealClient(_a) {
     var _b;
-    var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, revealOptions = _a.revealOptions;
+    var Tag = _a.tag, text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, animation = _a.animation;
     var ref = useRef(null);
-    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
-    var memoizedOptions = useMemo(function () {
+    var intersectionObserverOptions = useMemo(function () {
         var _a;
-        var once = (_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.once) !== null && _a !== void 0 ? _a : true;
-        var threshold = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.threshold)
-            ? clamp(revealOptions.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
+        var once = (_a = animation === null || animation === void 0 ? void 0 : animation.once) !== null && _a !== void 0 ? _a : true;
+        var threshold = (animation === null || animation === void 0 ? void 0 : animation.threshold)
+            ? clamp(animation.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
             : DEFAULT_THRESHOLD;
         return {
             once: once,
             threshold: threshold,
         };
-    }, [revealOptions]);
-    var isInView = useIntersectionObserver(ref, memoizedOptions);
-    var transitionDuration = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.duration) || DEFAULT_DURATION$1;
-    var transitionStagger = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.stagger) || DEFAULT_STAGGER$1;
+    }, [animation]);
+    var isInView = useIntersectionObserver(ref, intersectionObserverOptions);
+    var duration = (animation === null || animation === void 0 ? void 0 : animation.duration) || DEFAULT_DURATION$1;
+    var stagger = (animation === null || animation === void 0 ? void 0 : animation.stagger) || DEFAULT_STAGGER$1;
     var splittedText = useMemo(function () {
         switch (splitType) {
             case "sentence":
@@ -116,56 +150,58 @@ function SplitTextReveal(_a) {
                 return characters(text);
         }
     }, [splitType, text]);
-    useEffect(function () {
-        setHasBeenMounted(true);
-    }, []);
-    return (React.createElement("span", { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
-            "--var-duration": "".concat(transitionDuration, "s"),
-        } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: styles$1["sr-only"] }, text),
-        splittedText.map(function (el, i) {
-            var _a;
-            return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
-                React.createElement("span", { "aria-hidden": "true", style: {
-                        "--var-delay": "".concat((_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.delay) !== null && _a !== void 0 ? _a : 0, "s"),
-                        "--var-stagger": "".concat(round(transitionStagger * i, 3), "s"),
-                    } }, el)));
-        }))) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
+    return (React.createElement(Tag, { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
+            "--var-duration": "".concat(duration, "s"),
+        }, "aria-label": text }, splittedText.map(function (el, i) {
+        var _a;
+        return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
+            React.createElement("span", { "aria-hidden": "true", style: {
+                    "--var-delay": "".concat((_a = animation === null || animation === void 0 ? void 0 : animation.delay) !== null && _a !== void 0 ? _a : 0, "s"),
+                    "--var-stagger": "".concat(round(stagger * i, 3), "s"),
+                } }, el)));
+    })));
 }
+var textReveal = generateJsxVariations(TextReveal);
 
-var styles = {"text":"split-text-rotate-module_text__xzran","sr-only":"split-text-rotate-module_sr-only__Dbb9O","container":"split-text-rotate-module_container__EAJkE","char":"split-text-rotate-module_char__PYJ-k"};
+var styles = {"text":"text-rotate-module_text__WKSY-","container":"text-rotate-module_container__2qsrm","char":"text-rotate-module_char__LG3ps"};
 
+var NUMBER_OF_COPIES = 2;
 var DEFAULT_DURATION = 0.25;
 var DEFAULT_STAGGER = 0.025;
-function SplitTextRotate(_a) {
-    var text = _a.text, rotateOptions = _a.rotateOptions;
-    var _b = useState(false), hasBeenMounted = _b[0], setHasBeenMounted = _b[1];
-    var splittedText = useMemo(function () { return characters(text); }, [text]);
-    var _c = useMemo(function () { return ({
-        transitionDuration: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.duration) || DEFAULT_DURATION,
-        transitionStagger: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.stagger) || DEFAULT_STAGGER,
-    }); }, [rotateOptions]), transitionDuration = _c.transitionDuration, transitionStagger = _c.transitionStagger;
+function TextRotate(props) {
+    var isHydrated = useIsHydrated();
+    if (isHydrated === false) {
+        return React.createElement(TextRotateServer, __assign({}, props));
+    }
+    return React.createElement(TextRotateClient, __assign({}, props));
+}
+function TextRotateServer(_a) {
+    var Tag = _a.tag, text = _a.text;
+    return React.createElement(Tag, null, text);
+}
+function TextRotateClient(_a) {
+    var Tag = _a.tag, text = _a.text, animation = _a.animation;
+    var duration = (animation === null || animation === void 0 ? void 0 : animation.duration) || DEFAULT_DURATION;
+    var stagger = (animation === null || animation === void 0 ? void 0 : animation.stagger) || DEFAULT_STAGGER;
+    var chars = useMemo(function () { return characters(text); }, [text]);
     var delays = useCallback(function (index) {
-        var noElementsZeroBased = splittedText.length - 1;
+        var precision = 3;
+        var noElementsZeroBased = chars.length - 1;
         return {
-            in: round(transitionStagger * index, 3),
-            out: round(transitionStagger * (noElementsZeroBased - index), 3),
+            in: round(stagger * index, precision),
+            out: round(stagger * (noElementsZeroBased - index), precision),
         };
-    }, [splittedText, transitionStagger]);
-    useEffect(function () {
-        setHasBeenMounted(true);
-    }, []);
-    return (React.createElement("span", { className: styles["text"], style: {
-            "--var-duration": "".concat(transitionDuration, "s"),
-        } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: styles["sr-only"] }, text),
-        Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"], "aria-hidden": "true" }, splittedText.map(function (char, i) {
-            var charDelays = delays(i);
-            return (React.createElement("span", { key: i, className: styles["char"], "aria-hidden": "true", style: {
-                    "--var-delay-in": "".concat(charDelays.in, "s"),
-                    "--var-delay-out": "".concat(charDelays.out, "s"),
-                } }, char));
-        }))); }))) : (React.createElement("span", null, text))));
+    }, [chars, stagger]);
+    return (React.createElement(Tag, { className: styles["text"], style: {
+            "--var-duration": "".concat(duration, "s"),
+        }, "aria-label": text }, Array.from({ length: NUMBER_OF_COPIES }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"], "aria-hidden": "true" }, chars.map(function (char, i) {
+        var charDelays = delays(i);
+        return (React.createElement("span", { key: i, className: styles["char"], "aria-hidden": "true", style: {
+                "--var-delay-in": "".concat(charDelays.in, "s"),
+                "--var-delay-out": "".concat(charDelays.out, "s"),
+            } }, char));
+    }))); })));
 }
+var textRotate = generateJsxVariations(TextRotate);
 
-export { SplitTextReveal, SplitTextRotate };
+export { textReveal, textRotate };

package/dist/utils/jsx.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { WithoutTag } from "./types";
+declare const htmlTextElementTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p", "span"];
+export type HtmlTextElementTag = (typeof htmlTextElementTags)[number];
+export declare function generateJsxVariations<Props extends {
+    tag: HtmlTextElementTag;
+}>(Component: React.FC<Props>): {
+    [k in HtmlTextElementTag]: React.FC<WithoutTag<Props>>;
+};
+export {};

package/dist/utils/types.d.ts

@@ -0,0 +1,5 @@
+import { HtmlTextElementTag } from "./jsx";
+export type WithTag<T> = T & {
+    tag: HtmlTextElementTag;
+};
+export type WithoutTag<T> = Omit<T, "tag">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matteodicristofalo/text-animations",
-  "version": "1.1.2",
-  "description": "React library to animate text",
+  "version": "2.0.2",
+  "description": "Lightweight React component library to animate text",
   "scripts": {
     "build": "rimraf dist && rollup -c",
     "storybook": "storybook dev -p 6006"
@@ -27,7 +27,6 @@
     "rollup": "^4.28.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-preserve-directives": "^1.1.3",
     "sass": "^1.81.0",
     "storybook": "^8.4.6",
     "tslib": "^2.8.1",
@@ -53,5 +52,19 @@
   "repository": {
     "type": "git",
     "url": "git@github.com:matteodicristofalo/text-animations.git"
-  }
+  },
+  "keywords": [
+    "react",
+    "react-components",
+    "ui-library",
+    "animation",
+    "animated-text",
+    "text-animation",
+    "text-reveal",
+    "hover",
+    "hover-effects",
+    "scroll-animation",
+    "typography",
+    "microinteractions"
+  ]
 }

package/dist/components/split-text-reveal/split-test-reveal.types.d.ts

@@ -1,14 +0,0 @@
-export type SplitTextRevealProps = {
-    text: string;
-    splitType?: SplitType;
-    revealOptions?: Partial<RevealOptions>;
-};
-type SplitType = "sentence" | "word" | "char";
-type RevealOptions = {
-    duration: number;
-    delay: number;
-    stagger: number;
-    threshold: number;
-    once: boolean;
-};
-export {};

package/dist/components/split-text-reveal/split-text-reveal.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { SplitTextRevealProps } from "./split-test-reveal.types";
-export declare function SplitTextReveal({ text, splitType, revealOptions, }: SplitTextRevealProps): React.JSX.Element;

package/dist/components/split-text-rotate/split-text-rotate.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { SplitTextRotateProps } from "./split-text-rotate.types";
-export declare function SplitTextRotate({ text, rotateOptions }: SplitTextRotateProps): React.JSX.Element;

package/dist/components/split-text-rotate/split-text-rotate.types.d.ts

@@ -1,9 +0,0 @@
-export type SplitTextRotateProps = {
-    text: string;
-    rotateOptions?: Partial<RotateOptions>;
-};
-type RotateOptions = {
-    duration: number;
-    stagger: number;
-};
-export {};