@jinmi/ui 0.0.0-stage → 6.0.2

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs

@@ -0,0 +1,178 @@
+"use client";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
+import { styles } from "./style.mjs";
+import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/awesome/TypewriterEffect/TypewriterEffect.tsx
+const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed = 100, initialDelay = 0, pauseDuration = 2e3, deletingSpeed = 50, deletePauseDuration = 0, loop = true, className = "", color, showCursor = true, hideCursorWhileTyping = false, cursorCharacter, cursorClassName = "", cursorColor, cursorBlinkDuration = .8, cursorFade = true, cursorStyle = "pipe", textColors = [], variableSpeed, onSentenceComplete, startOnVisible = false, reverseMode = false, segmentMode = "grapheme", ...props }) => {
+	const Motion = useMotionComponent();
+	const cxStyles = cx;
+	const [displayedText, setDisplayedText] = useState("");
+	const [currentCharIndex, setCurrentCharIndex] = useState(0);
+	const [isDeleting, setIsDeleting] = useState(false);
+	const [currentTextIndex, setCurrentTextIndex] = useState(0);
+	const [isVisible, setIsVisible] = useState(!startOnVisible);
+	const [isDeletePausing, setIsDeletePausing] = useState(false);
+	const containerRef = useRef(null);
+	const textArray = useMemo(() => Array.isArray(sentences) ? sentences : [sentences], [sentences]);
+	const splitText = useCallback((text) => {
+		if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
+			const segmenter = new Intl.Segmenter(void 0, { granularity: segmentMode });
+			return Array.from(segmenter.segment(text), (segment) => segment.segment);
+		}
+		if (segmentMode === "word") return text.split(/(\s+)/).filter(Boolean);
+		return Array.from(text);
+	}, [segmentMode]);
+	const getRandomSpeed = useCallback(() => {
+		if (!variableSpeed) return typingSpeed;
+		const { min, max } = variableSpeed;
+		return Math.random() * (max - min) + min;
+	}, [variableSpeed, typingSpeed]);
+	const getCurrentTextColor = () => {
+		if (textColors.length > 0) return textColors[currentTextIndex % textColors.length];
+		return color;
+	};
+	const getCurrentCursorColor = () => {
+		return cursorColor || color;
+	};
+	useEffect(() => {
+		if (!startOnVisible || !containerRef.current) return;
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) setIsVisible(true);
+			});
+		}, { threshold: .1 });
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, [startOnVisible]);
+	useEffect(() => {
+		if (!isVisible) return;
+		let timeout;
+		const currentText = textArray[currentTextIndex];
+		const textSegments = splitText(currentText);
+		const processedText = reverseMode ? textSegments.reverse().join("") : currentText;
+		if (isDeletePausing) {
+			timeout = setTimeout(() => {
+				setIsDeletePausing(false);
+			}, deletePauseDuration);
+			return () => clearTimeout(timeout);
+		}
+		const executeTypingAnimation = () => {
+			if (isDeleting) {
+				if (displayedText === "") {
+					setIsDeleting(false);
+					if (currentTextIndex === textArray.length - 1 && !loop) return;
+					if (onSentenceComplete) onSentenceComplete(textArray[currentTextIndex], currentTextIndex);
+					setCurrentTextIndex((prev) => (prev + 1) % textArray.length);
+					setCurrentCharIndex(0);
+					if (deletePauseDuration > 0) {
+						setIsDeletePausing(true);
+						return;
+					}
+				} else timeout = setTimeout(() => {
+					setDisplayedText((prev) => {
+						return splitText(prev).slice(0, -1).join("");
+					});
+				}, deletingSpeed);
+			} else {
+				const processedSegments = splitText(processedText);
+				if (currentCharIndex < processedSegments.length) timeout = setTimeout(() => {
+					setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);
+					setCurrentCharIndex((prev) => prev + 1);
+				}, variableSpeed ? getRandomSpeed() : typingSpeed);
+				else if (textArray.length >= 1) {
+					if (!loop && currentTextIndex === textArray.length - 1) return;
+					timeout = setTimeout(() => {
+						setIsDeleting(true);
+					}, pauseDuration);
+				}
+			}
+		};
+		if (currentCharIndex === 0 && !isDeleting && displayedText === "") timeout = setTimeout(executeTypingAnimation, initialDelay);
+		else executeTypingAnimation();
+		return () => clearTimeout(timeout);
+	}, [
+		currentCharIndex,
+		displayedText,
+		isDeleting,
+		isDeletePausing,
+		typingSpeed,
+		deletingSpeed,
+		deletePauseDuration,
+		pauseDuration,
+		textArray,
+		currentTextIndex,
+		loop,
+		initialDelay,
+		isVisible,
+		reverseMode,
+		variableSpeed,
+		onSentenceComplete,
+		getRandomSpeed,
+		splitText
+	]);
+	const getCursorStyle = () => {
+		if (cursorCharacter) return styles.cursorCustom;
+		switch (cursorStyle) {
+			case "block": return styles.cursorBlock;
+			case "dot": return styles.cursorDot;
+			case "underscore": return styles.cursorUnderscore;
+			case "pipe": return styles.cursor;
+		}
+	};
+	const currentTextLength = splitText(textArray[currentTextIndex]).length;
+	const isTyping = currentCharIndex < currentTextLength && !isDeleting;
+	const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;
+	const shouldHideCursor = (() => {
+		if (hideCursorWhileTyping === true) return true;
+		if (hideCursorWhileTyping === "typing") return isTyping || isDeleting;
+		if (hideCursorWhileTyping === "afterTyping") return isAfterTyping;
+		return false;
+	})();
+	const textColor = getCurrentTextColor();
+	const finalCursorColor = getCurrentCursorColor();
+	const characters = splitText(displayedText);
+	return createElement(Component, {
+		className: cxStyles(styles.container, className),
+		ref: containerRef,
+		...props
+	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: styles.text,
+		style: textColor ? { color: textColor } : void 0,
+		children: characters.map((char, index) => /* @__PURE__ */ jsx(Motion.span, {
+			animate: { opacity: 1 },
+			initial: { opacity: 0 },
+			style: { display: "inline-block" },
+			transition: {
+				duration: typingSpeed / 500,
+				ease: "easeInOut"
+			},
+			children: char === " " ? "\xA0" : char
+		}, `${currentTextIndex}-${index}`))
+	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(Motion.span, {
+		animate: { opacity: shouldHideCursor ? 0 : 1 },
+		className: cxStyles(getCursorStyle(), cursorClassName),
+		initial: { opacity: 0 },
+		style: finalCursorColor ? { backgroundColor: finalCursorColor } : void 0,
+		transition: {
+			duration: shouldHideCursor ? .2 : cursorBlinkDuration,
+			ease: "easeInOut",
+			repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,
+			repeatType: "reverse"
+		},
+		children: cursorCharacter
+	}) : /* @__PURE__ */ jsx("span", {
+		className: cxStyles(getCursorStyle(), cursorClassName),
+		style: {
+			backgroundColor: finalCursorColor,
+			opacity: shouldHideCursor ? 0 : 1
+		},
+		children: cursorCharacter
+	}))] }));
+});
+TypewriterEffect.displayName = "TypewriterEffect";
+//#endregion
+export { TypewriterEffect as default };
+
+//# sourceMappingURL=TypewriterEffect.mjs.map

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypewriterEffect.mjs","names":[],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport { useMotionComponent } from '@/MotionProvider';\r\n\r\nimport { styles } from './style';\r\nimport type { TypewriterEffectProps } from './type';\r\n\r\nconst TypewriterEffect = memo<TypewriterEffectProps>(\r\n  ({\r\n    sentences,\r\n    as: Component = 'div',\r\n    typingSpeed = 100,\r\n    initialDelay = 0,\r\n    pauseDuration = 2000,\r\n    deletingSpeed = 50,\r\n    deletePauseDuration = 0,\r\n    loop = true,\r\n    className = '',\r\n    color,\r\n    showCursor = true,\r\n    hideCursorWhileTyping = false,\r\n    cursorCharacter,\r\n    cursorClassName = '',\r\n    cursorColor,\r\n    cursorBlinkDuration = 0.8,\r\n    cursorFade = true,\r\n    cursorStyle = 'pipe',\r\n    textColors = [],\r\n    variableSpeed,\r\n    onSentenceComplete,\r\n    startOnVisible = false,\r\n    reverseMode = false,\r\n    segmentMode = 'grapheme',\r\n    ...props\r\n  }: TypewriterEffectProps) => {\r\n    const Motion = useMotionComponent();\r\n    const cxStyles = cx;\r\n    const [displayedText, setDisplayedText] = useState('');\r\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\r\n    const [isDeleting, setIsDeleting] = useState(false);\r\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\r\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\r\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\r\n    const containerRef = useRef<HTMLElement>(null);\r\n\r\n    const textArray = useMemo(\r\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\r\n      [sentences],\r\n    );\r\n\r\n    // Helper function to split text based on segment mode\r\n    const splitText = useCallback(\r\n      (text: string): string[] => {\r\n        // Use Intl.Segmenter if available\r\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\r\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\r\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\r\n        }\r\n\r\n        // Fallback when Intl.Segmenter is not available\r\n        if (segmentMode === 'word') {\r\n          // Simple word splitting fallback\r\n          return text.split(/(\\s+)/).filter(Boolean);\r\n        }\r\n\r\n        // Grapheme fallback\r\n        return Array.from(text);\r\n      },\r\n      [segmentMode],\r\n    );\r\n\r\n    const getRandomSpeed = useCallback(() => {\r\n      if (!variableSpeed) return typingSpeed;\r\n      const { min, max } = variableSpeed;\r\n      return Math.random() * (max - min) + min;\r\n    }, [variableSpeed, typingSpeed]);\r\n\r\n    const getCurrentTextColor = () => {\r\n      if (textColors.length > 0) {\r\n        return textColors[currentTextIndex % textColors.length];\r\n      }\r\n      return color;\r\n    };\r\n\r\n    const getCurrentCursorColor = () => {\r\n      return cursorColor || color;\r\n    };\r\n\r\n    useEffect(() => {\r\n      if (!startOnVisible || !containerRef.current) return;\r\n\r\n      const observer = new IntersectionObserver(\r\n        (entries) => {\r\n          entries.forEach((entry) => {\r\n            if (entry.isIntersecting) {\r\n              setIsVisible(true);\r\n            }\r\n          });\r\n        },\r\n        { threshold: 0.1 },\r\n      );\r\n\r\n      observer.observe(containerRef.current);\r\n\r\n      return () => observer.disconnect();\r\n    }, [startOnVisible]);\r\n\r\n    useEffect(() => {\r\n      if (!isVisible) return;\r\n\r\n      let timeout: ReturnType<typeof setTimeout>;\r\n\r\n      const currentText = textArray[currentTextIndex];\r\n      // Split text based on segment mode\r\n      const textSegments = splitText(currentText);\r\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\r\n\r\n      // Handle delete pause state\r\n      if (isDeletePausing) {\r\n        timeout = setTimeout(() => {\r\n          setIsDeletePausing(false);\r\n        }, deletePauseDuration);\r\n        return () => clearTimeout(timeout);\r\n      }\r\n\r\n      const executeTypingAnimation = () => {\r\n        if (isDeleting) {\r\n          if (displayedText === '') {\r\n            setIsDeleting(false);\r\n            if (currentTextIndex === textArray.length - 1 && !loop) {\r\n              return;\r\n            }\r\n            if (onSentenceComplete) {\r\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\r\n            }\r\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\r\n            setCurrentCharIndex(0);\r\n\r\n            if (deletePauseDuration > 0) {\r\n              setIsDeletePausing(true);\r\n              return;\r\n            }\r\n          } else {\r\n            timeout = setTimeout(() => {\r\n              setDisplayedText((prev) => {\r\n                const segments = splitText(prev);\r\n                return segments.slice(0, -1).join('');\r\n              });\r\n            }, deletingSpeed);\r\n          }\r\n        } else {\r\n          const processedSegments = splitText(processedText);\r\n          if (currentCharIndex < processedSegments.length) {\r\n            timeout = setTimeout(\r\n              () => {\r\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\r\n                setCurrentCharIndex((prev) => prev + 1);\r\n              },\r\n              variableSpeed ? getRandomSpeed() : typingSpeed,\r\n            );\r\n          } else if (textArray.length >= 1) {\r\n            if (!loop && currentTextIndex === textArray.length - 1) return;\r\n\r\n            timeout = setTimeout(() => {\r\n              setIsDeleting(true);\r\n            }, pauseDuration);\r\n          }\r\n        }\r\n      };\r\n\r\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\r\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\r\n      } else {\r\n        executeTypingAnimation();\r\n      }\r\n\r\n      return () => clearTimeout(timeout);\r\n    }, [\r\n      currentCharIndex,\r\n      displayedText,\r\n      isDeleting,\r\n      isDeletePausing,\r\n      typingSpeed,\r\n      deletingSpeed,\r\n      deletePauseDuration,\r\n      pauseDuration,\r\n      textArray,\r\n      currentTextIndex,\r\n      loop,\r\n      initialDelay,\r\n      isVisible,\r\n      reverseMode,\r\n      variableSpeed,\r\n      onSentenceComplete,\r\n      getRandomSpeed,\r\n      splitText,\r\n    ]);\r\n\r\n    const getCursorStyle = () => {\r\n      if (cursorCharacter) return styles.cursorCustom;\r\n\r\n      switch (cursorStyle) {\r\n        case 'block': {\r\n          return styles.cursorBlock;\r\n        }\r\n        case 'dot': {\r\n          return styles.cursorDot;\r\n        }\r\n        case 'underscore': {\r\n          return styles.cursorUnderscore;\r\n        }\r\n        case 'pipe': {\r\n          return styles.cursor;\r\n        }\r\n      }\r\n    };\r\n\r\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\r\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\r\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\r\n\r\n    const shouldHideCursor = (() => {\r\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\r\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\r\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\r\n      return false;\r\n    })();\r\n\r\n    const textColor = getCurrentTextColor();\r\n    const finalCursorColor = getCurrentCursorColor();\r\n\r\n    // Split displayed text for animation\r\n    const characters = splitText(displayedText);\r\n\r\n    return createElement(\r\n      Component,\r\n      {\r\n        className: cxStyles(styles.container, className),\r\n        ref: containerRef,\r\n        ...props,\r\n      },\r\n      <>\r\n        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>\r\n          {characters.map((char, index) => (\r\n            <Motion.span\r\n              animate={{ opacity: 1 }}\r\n              initial={{ opacity: 0 }}\r\n              key={`${currentTextIndex}-${index}`}\r\n              style={{ display: 'inline-block' }}\r\n              transition={{\r\n                duration: typingSpeed / 500,\r\n                ease: 'easeInOut',\r\n              }}\r\n            >\r\n              {char === ' ' ? '\\u00A0' : char}\r\n            </Motion.span>\r\n          ))}\r\n        </span>\r\n        {showCursor &&\r\n          (cursorFade ? (\r\n            <Motion.span\r\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\r\n              className={cxStyles(getCursorStyle(), cursorClassName)}\r\n              initial={{ opacity: 0 }}\r\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\r\n              transition={{\r\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\r\n                ease: 'easeInOut',\r\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\r\n                repeatType: 'reverse',\r\n              }}\r\n            >\r\n              {cursorCharacter}\r\n            </Motion.span>\r\n          ) : (\r\n            <span\r\n              className={cxStyles(getCursorStyle(), cursorClassName)}\r\n              style={{\r\n                backgroundColor: finalCursorColor,\r\n                opacity: shouldHideCursor ? 0 : 1,\r\n              }}\r\n            >\r\n              {cursorCharacter}\r\n            </span>\r\n          ))}\r\n      </>,\r\n    );\r\n  },\r\n);\r\n\r\nTypewriterEffect.displayName = 'TypewriterEffect';\r\n\r\nexport default TypewriterEffect;\r\n"],"mappings":"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"}

package/es/awesome/TypewriterEffect/index.d.mts

@@ -0,0 +1,3 @@
+import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./type.mjs";
+import TypewriterEffect from "./TypewriterEffect.mjs";
+export { type CursorStyle, type SegmentMode, type TypewriterEffectProps, TypewriterEffect as default };

package/es/awesome/TypewriterEffect/style.mjs

@@ -0,0 +1,78 @@
+import { createStaticStyles } from "antd-style";
+//#region src/awesome/TypewriterEffect/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	container: css`
+    display: inline-block;
+    white-space: pre-wrap;
+  `,
+	cursor: css`
+    transform: translateY(10%);
+
+    display: inline-block;
+    align-items: center;
+
+    width: 3px;
+    height: 1em;
+    margin-inline-start: 0.25rem;
+    border-radius: 2px;
+
+    opacity: 1;
+    background-color: ${cssVar.colorPrimary};
+  `,
+	cursorBlock: css`
+    transform: translateY(10%);
+
+    display: inline-block;
+    align-items: center;
+
+    width: 0.5em;
+    height: 1em;
+    margin-inline-start: 0.25rem;
+    border-radius: 2px;
+
+    opacity: 1;
+    background-color: ${cssVar.colorPrimary};
+  `,
+	cursorCustom: css`
+    display: inline-block;
+    align-items: center;
+    margin-inline-start: 0.25rem;
+    opacity: 1;
+  `,
+	cursorDot: css`
+    display: inline-block;
+    align-items: center;
+
+    width: 0.75em;
+    height: 0.75em;
+    margin-inline-start: 0.25rem;
+    border-radius: 50%;
+
+    opacity: 1;
+    background-color: ${cssVar.colorPrimary};
+  `,
+	cursorHidden: css`
+    display: none;
+  `,
+	cursorUnderscore: css`
+    transform: translateY(0.3em);
+
+    display: inline-block;
+    align-items: center;
+
+    width: 0.6em;
+    height: 0.15em;
+    margin-inline-start: 0.25rem;
+    border-radius: 2px;
+
+    opacity: 1;
+    background-color: ${cssVar.colorPrimary};
+  `,
+	text: css`
+    color: ${cssVar.colorText};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/awesome/TypewriterEffect/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/TypewriterEffect/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  container: css`\r\n    display: inline-block;\r\n    white-space: pre-wrap;\r\n  `,\r\n\r\n  cursor: css`\r\n    transform: translateY(10%);\r\n\r\n    display: inline-block;\r\n    align-items: center;\r\n\r\n    width: 3px;\r\n    height: 1em;\r\n    margin-inline-start: 0.25rem;\r\n    border-radius: 2px;\r\n\r\n    opacity: 1;\r\n    background-color: ${cssVar.colorPrimary};\r\n  `,\r\n\r\n  cursorBlock: css`\r\n    transform: translateY(10%);\r\n\r\n    display: inline-block;\r\n    align-items: center;\r\n\r\n    width: 0.5em;\r\n    height: 1em;\r\n    margin-inline-start: 0.25rem;\r\n    border-radius: 2px;\r\n\r\n    opacity: 1;\r\n    background-color: ${cssVar.colorPrimary};\r\n  `,\r\n\r\n  cursorCustom: css`\r\n    display: inline-block;\r\n    align-items: center;\r\n    margin-inline-start: 0.25rem;\r\n    opacity: 1;\r\n  `,\r\n\r\n  cursorDot: css`\r\n    display: inline-block;\r\n    align-items: center;\r\n\r\n    width: 0.75em;\r\n    height: 0.75em;\r\n    margin-inline-start: 0.25rem;\r\n    border-radius: 50%;\r\n\r\n    opacity: 1;\r\n    background-color: ${cssVar.colorPrimary};\r\n  `,\r\n\r\n  cursorHidden: css`\r\n    display: none;\r\n  `,\r\n\r\n  cursorUnderscore: css`\r\n    transform: translateY(0.3em);\r\n\r\n    display: inline-block;\r\n    align-items: center;\r\n\r\n    width: 0.6em;\r\n    height: 0.15em;\r\n    margin-inline-start: 0.25rem;\r\n    border-radius: 2px;\r\n\r\n    opacity: 1;\r\n    background-color: ${cssVar.colorPrimary};\r\n  `,\r\n\r\n  text: css`\r\n    color: ${cssVar.colorText};\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;CAKd,QAAQ,GAAG;;;;;;;;;;;;wBAYW,OAAO,aAAa;;CAG1C,aAAa,GAAG;;;;;;;;;;;;wBAYM,OAAO,aAAa;;CAG1C,cAAc,GAAG;;;;;;CAOjB,WAAW,GAAG;;;;;;;;;;wBAUQ,OAAO,aAAa;;CAG1C,cAAc,GAAG;;;CAIjB,kBAAkB,GAAG;;;;;;;;;;;;wBAYC,OAAO,aAAa;;CAG1C,MAAM,GAAG;aACE,OAAO,UAAU;;AAE9B,EAAE"}

package/es/awesome/TypewriterEffect/type.d.mts

@@ -0,0 +1,130 @@
+import { ElementType, ReactNode } from "react";
+//#region src/awesome/TypewriterEffect/type.d.ts
+type CursorStyle = 'pipe' | 'underscore' | 'dot' | 'block';
+type SegmentMode = 'grapheme' | 'word';
+interface TypewriterEffectProps {
+  /**
+   * Custom element type for the container
+   * @default 'div'
+   */
+  as?: ElementType;
+  /**
+   * Additional class name for the container
+   */
+  className?: string;
+  /**
+   * Text color
+   */
+  color?: string;
+  /**
+   * Cursor blink duration in seconds
+   * @default 0.8
+   */
+  cursorBlinkDuration?: number;
+  /**
+   * Custom cursor character or ReactNode
+   * @default undefined (uses cursorStyle)
+   */
+  cursorCharacter?: string | ReactNode;
+  /**
+   * Additional class name for the cursor
+   */
+  cursorClassName?: string;
+  /**
+   * Cursor color (defaults to color if not provided)
+   */
+  cursorColor?: string;
+  /**
+   * Cursor fade animation
+   * @default true
+   */
+  cursorFade?: boolean;
+  /**
+   * Style of the cursor (ignored if cursorCharacter is provided)
+   * @default 'pipe'
+   */
+  cursorStyle?: CursorStyle;
+  /**
+   * Pause duration after deleting complete before next sentence (milliseconds)
+   * @default 0
+   */
+  deletePauseDuration?: number;
+  /**
+   * Speed of deleting characters (milliseconds per character)
+   * @default 50
+   */
+  deletingSpeed?: number;
+  /**
+   * Hide cursor behavior
+   * - false: always show cursor
+   * - 'typing': hide cursor while typing
+   * - 'afterTyping': hide cursor after typing complete (during pause)
+   * - true: completely hide cursor
+   * @default false
+   */
+  hideCursorWhileTyping?: boolean | 'typing' | 'afterTyping';
+  /**
+   * Initial delay before starting animation (milliseconds)
+   * @default 0
+   */
+  initialDelay?: number;
+  /**
+   * Whether to loop through sentences
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * Callback when a sentence is completed
+   */
+  onSentenceComplete?: (sentence: string, index: number) => void;
+  /**
+   * Pause duration after typing complete before deleting (milliseconds)
+   * @default 2000
+   */
+  pauseDuration?: number;
+  /**
+   * Reverse mode: type from end to start
+   * @default false
+   */
+  reverseMode?: boolean;
+  /**
+   * Segment mode for text splitting
+   * - 'grapheme': split by character (emoji-safe)
+   * - 'word': split by word
+   * @default 'grapheme'
+   */
+  segmentMode?: SegmentMode;
+  /**
+   * Array of sentences to display
+   */
+  sentences: string[];
+  /**
+   * Whether to show cursor
+   * @default true
+   */
+  showCursor?: boolean;
+  /**
+   * Start animation when element becomes visible
+   * @default false
+   */
+  startOnVisible?: boolean;
+  /**
+   * Colors for each sentence (cycles through array)
+   */
+  textColors?: string[];
+  /**
+   * Speed of typing characters (milliseconds per character)
+   * @default 100
+   */
+  typingSpeed?: number;
+  /**
+   * Variable typing speed range
+   */
+  variableSpeed?: {
+    max: number;
+    min: number;
+  };
+}
+//#endregion
+export { CursorStyle, SegmentMode, TypewriterEffectProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/index.d.mts

@@ -0,0 +1,67 @@
+import { AgentSkillCardAgent, AgentSkillCardMode, AgentSkillCardPanel, AgentSkillCardProps } from "./AgentSkillCard/type.mjs";
+import { DEFAULT_SKILL_AGENTS } from "./AgentSkillCard/agents.mjs";
+import AgentSkillCard from "./AgentSkillCard/AgentSkillCard.mjs";
+import "./AgentSkillCard/index.mjs";
+import { AuroraBackgroundProps } from "./AuroraBackground/type.mjs";
+import AuroraBackground from "./AuroraBackground/AuroraBackground.mjs";
+import "./AuroraBackground/index.mjs";
+import { LandingLinkProps, LandingLinkRender } from "./landingLink.mjs";
+import { BentoCardProps, BentoGridProps } from "./BentoGrid/type.mjs";
+import BentoCard from "./BentoGrid/BentoCard.mjs";
+import BentoGrid from "./BentoGrid/BentoGrid.mjs";
+import "./BentoGrid/index.mjs";
+import { BottomGradientButtonProps } from "./BottomGradientButton/type.mjs";
+import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
+import "./BottomGradientButton/index.mjs";
+import { CodeShowcaseItem, CodeShowcaseProps } from "./CodeShowcase/type.mjs";
+import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";
+import "./CodeShowcase/index.mjs";
+import { FeatureGridItem, FeatureGridProps } from "./FeatureGrid/type.mjs";
+import FeatureGrid from "./FeatureGrid/FeatureGrid.mjs";
+import "./FeatureGrid/index.mjs";
+import { SpotlightCardProps } from "./SpotlightCard/type.mjs";
+import SpotlightCard from "./SpotlightCard/SpotlightCard.mjs";
+import "./SpotlightCard/index.mjs";
+import { FeatureItemType, FeaturesProps } from "./Features/type.mjs";
+import Features from "./Features/Features.mjs";
+import "./Features/index.mjs";
+import { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingPalette, accentGradient } from "./landingTokens.mjs";
+import { FluidGradientProps } from "./FluidGradient/type.mjs";
+import FluidGradient from "./FluidGradient/FluidGradient.mjs";
+import "./FluidGradient/index.mjs";
+import { GiscusProps } from "./Giscus/type.mjs";
+import Giscus from "./Giscus/Giscus.mjs";
+import "./Giscus/index.mjs";
+import { GradientButtonProps } from "./GradientButton/type.mjs";
+import GradientButton from "./GradientButton/GradientButton.mjs";
+import "./GradientButton/index.mjs";
+import { GridBackgroundProps, GridShowcaseProps } from "./GridBackground/type.mjs";
+import GridBackground from "./GridBackground/GridBackground.mjs";
+import GridShowcase from "./GridBackground/GridShowcase.mjs";
+import "./GridBackground/index.mjs";
+import { HeroAction, HeroProps } from "./Hero/type.mjs";
+import Hero from "./Hero/Hero.mjs";
+import "./Hero/index.mjs";
+import { InstallBannerProps } from "./InstallBanner/type.mjs";
+import InstallBanner from "./InstallBanner/InstallBanner.mjs";
+import "./InstallBanner/index.mjs";
+import { LandingAction, LandingNavigate } from "./landingActions.mjs";
+import { LandingHeroAction, LandingHeroProps } from "./LandingHero/type.mjs";
+import LandingHero from "./LandingHero/LandingHero.mjs";
+import "./LandingHero/index.mjs";
+import { LandingSectionProps } from "./LandingSection/type.mjs";
+import LandingSection from "./LandingSection/LandingSection.mjs";
+import "./LandingSection/index.mjs";
+import { LogoMarqueeItem, LogoMarqueeProps } from "./LogoMarquee/type.mjs";
+import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
+import "./LogoMarquee/index.mjs";
+import { SplineProps } from "./Spline/type.mjs";
+import Spline from "./Spline/Spine.mjs";
+import "./Spline/index.mjs";
+import { SpotlightProps } from "./Spotlight/type.mjs";
+import Spotlight from "./Spotlight/Spotlight.mjs";
+import "./Spotlight/index.mjs";
+import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./TypewriterEffect/type.mjs";
+import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
+import "./TypewriterEffect/index.mjs";
+export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };

package/es/awesome/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/awesome/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/awesome/index.mjs

@@ -0,0 +1,25 @@
+import Spotlight from "./Spotlight/Spotlight.mjs";
+import { DEFAULT_SKILL_AGENTS } from "./AgentSkillCard/agents.mjs";
+import AgentSkillCard from "./AgentSkillCard/AgentSkillCard.mjs";
+import AuroraBackground from "./AuroraBackground/AuroraBackground.mjs";
+import BentoCard from "./BentoGrid/BentoCard.mjs";
+import BentoGrid from "./BentoGrid/BentoGrid.mjs";
+import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
+import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";
+import FeatureGrid from "./FeatureGrid/FeatureGrid.mjs";
+import SpotlightCard from "./SpotlightCard/SpotlightCard.mjs";
+import Features from "./Features/Features.mjs";
+import { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, accentGradient } from "./landingTokens.mjs";
+import FluidGradient from "./FluidGradient/FluidGradient.mjs";
+import Giscus from "./Giscus/Giscus.mjs";
+import GradientButton from "./GradientButton/GradientButton.mjs";
+import GridBackground from "./GridBackground/GridBackground.mjs";
+import GridShowcase from "./GridBackground/GridShowcase.mjs";
+import Hero from "./Hero/Hero.mjs";
+import InstallBanner from "./InstallBanner/InstallBanner.mjs";
+import LandingHero from "./LandingHero/LandingHero.mjs";
+import LandingSection from "./LandingSection/LandingSection.mjs";
+import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
+import Spline from "./Spline/Spine.mjs";
+import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
+export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spline, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };

package/es/awesome/landingActions.d.mts

@@ -0,0 +1,20 @@
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import "./landingLink.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/landingActions.d.ts
+interface LandingAction {
+  /** Opens in a new tab. Inferred from absolute URLs when omitted. */
+  external?: boolean;
+  href: string;
+  icon?: IconProps['icon'];
+  /** Places the icon after the label, e.g. for an arrow. */
+  iconPlacement?: 'start' | 'end';
+  label: ReactNode;
+  /** The primary action is a filled pill; others render as BottomGradientButton. */
+  primary?: boolean;
+}
+type LandingNavigate = (href: string) => void;
+//#endregion
+export { LandingAction, LandingNavigate };
+//# sourceMappingURL=landingActions.d.mts.map