@matteodicristofalo/text-animations 2.0.1 → 2.0.3

package/README.md

@@ -61,6 +61,8 @@ export function MyComponent() {
 }
 ```
 
+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)
@@ -118,6 +120,8 @@ export function MyComponent() {
 }
 ```
 
+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

package/dist/eslint.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("eslint/config").Config[];
+export default _default;

package/dist/index.css

@@ -1,26 +1,18 @@
 .text-reveal-module_text__YrhhT {
   position: relative;
 }
-.text-reveal-module_text__YrhhT .text-reveal-module_is-hidden__B7wsX {
-  opacity: 0;
-}
-.text-reveal-module_text__YrhhT .text-reveal-module_sr-only__ZQJa3 {
-  height: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-}
 .text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu {
-  display: inline-flex;
+  display: inline-block;
   overflow: hidden;
 }
 .text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu span {
-  min-width: 0.25em;
+  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;
 }
 .text-reveal-module_text__YrhhT.text-reveal-module_animate__kbOPX .text-reveal-module_container__HD1Pu span {
@@ -31,14 +23,8 @@
   overflow: hidden;
   position: relative;
 }
-.text-rotate-module_text__WKSY- .text-rotate-module_sr-only__1ofAD {
-  height: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-}
 .text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm {
-  display: flex;
+  display: block;
 }
 .text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm:nth-of-type(2) {
   position: absolute;
@@ -47,11 +33,11 @@
 }
 .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;
 }
 .text-rotate-module_text__WKSY-:hover .text-rotate-module_container__2qsrm .text-rotate-module_char__LG3ps {

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,6 +77,14 @@ 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",
@@ -88,27 +95,37 @@ var htmlTextElementTags = [
     "p",
     "span",
 ];
-function generateJsxVariations(component) {
-    return htmlTextElementTags.reduce(function (variations, Tag) {
-        variations[Tag] = function (props) { return React.createElement(Tag, null, component(props)); };
+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":"text-reveal-module_text__YrhhT","is-hidden":"text-reveal-module_is-hidden__B7wsX","sr-only":"text-reveal-module_sr-only__ZQJa3","container":"text-reveal-module_container__HD1Pu","animate":"text-reveal-module_animate__kbOPX"};
+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 TextReveal(_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, animation = _a.animation;
+    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 intersectionObserverOptions = useMemo(function () {
         var _a;
         var once = (_a = animation === null || animation === void 0 ? void 0 : animation.once) !== null && _a !== void 0 ? _a : true;
@@ -133,57 +150,57 @@ function TextReveal(_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: {
+    return (React.createElement(Tag, { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
             "--var-duration": "".concat(duration, "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 = 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)));
-        }))) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
+        }, "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":"text-rotate-module_text__WKSY-","sr-only":"text-rotate-module_sr-only__1ofAD","container":"text-rotate-module_container__2qsrm","char":"text-rotate-module_char__LG3ps"};
+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 TextRotate(_a) {
-    var text = _a.text, animation = _a.animation;
-    var _b = useState(false), hasBeenMounted = _b[0], setHasBeenMounted = _b[1];
-    var splittedText = useMemo(function () { return characters(text); }, [text]);
-    var _c = useMemo(function () { return ({
-        duration: (animation === null || animation === void 0 ? void 0 : animation.duration) || DEFAULT_DURATION,
-        stagger: (animation === null || animation === void 0 ? void 0 : animation.stagger) || DEFAULT_STAGGER,
-    }); }, [animation]), duration = _c.duration, stagger = _c.stagger;
+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(stagger * index, 3),
-            out: round(stagger * (noElementsZeroBased - index), 3),
+            in: round(stagger * index, precision),
+            out: round(stagger * (noElementsZeroBased - index), precision),
         };
-    }, [splittedText, stagger]);
-    useEffect(function () {
-        setHasBeenMounted(true);
-    }, []);
-    return (React.createElement("span", { className: styles["text"], style: {
+    }, [chars, stagger]);
+    return (React.createElement(Tag, { className: styles["text"], style: {
             "--var-duration": "".concat(duration, "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))));
+        }, "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);
 

package/dist/src/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 → src/components}/text-reveal/text-reveal.stories.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: React.FC<{
+    component: React.FC<import("../../utils/types").WithoutTag<{
         text: string;
         splitType?: "sentence" | "word" | "char";
         animation?: Partial<{
@@ -12,7 +12,9 @@ declare const meta: {
             threshold: number;
             once: boolean;
         }>;
-    }>;
+    } & {
+        tag: import("../../utils/jsx").HtmlTextElementTag;
+    }>>;
     argTypes: {
         text: {
             control: "text";

package/dist/src/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/text-rotate/split-text-rotate.stories.d.ts → src/components/text-rotate/text-rotate.stories.d.ts}

@@ -1,13 +1,15 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: import("react").FC<{
+    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";

package/dist/src/hooks/index.d.ts

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

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

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

package/dist/src/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/src/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/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@matteodicristofalo/text-animations",
-  "version": "2.0.1",
-  "description": "React library to animate text",
+  "version": "2.0.3",
+  "description": "Lightweight React component library to animate text",
   "scripts": {
+    "lint": "eslint src",
+    "test": "vitest --project=storybook",
     "build": "rimraf dist && rollup -c",
     "storybook": "storybook dev -p 6006"
   },
@@ -10,29 +12,39 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-interactions": "^8.4.6",
-    "@storybook/addon-onboarding": "^8.4.6",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-vite": "^8.4.6",
-    "@storybook/test": "^8.4.6",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^10.2.3",
+    "eslint": "^9.39.2",
+    "globals": "^17.2.0",
+    "jiti": "^2.6.1",
+    "playwright": "^1.58.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.28.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-preserve-directives": "^1.1.3",
+    "rollup": "^4.28.0",
     "sass": "^1.81.0",
-    "storybook": "^8.4.6",
+    "storybook": "^10.2.3",
     "tslib": "^2.8.1",
+    "typescript-eslint": "^8.54.0",
     "typescript": "^5.7.2",
-    "vite-tsconfig-paths": "^5.1.3"
+    "vite-tsconfig-paths": "^5.1.3",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -53,5 +65,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/text-reveal/text-reveal.d.ts

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

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

@@ -1,60 +0,0 @@
-import React from "react";
-declare const textRotate: {
-    h1: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    h2: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    h3: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    h4: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    h5: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    h6: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    p: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-    span: React.FC<{
-        text: string;
-        animation?: Partial<{
-            duration: number;
-            stagger: number;
-        }>;
-    }>;
-};
-export { textRotate };

package/dist/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useIntersectionObserver } from "./intersection-overser/intersection-observer";

package/dist/utils/jsx.d.ts

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