@xiping/react-components 1.0.69 → 1.0.77

package/dist/es/components/text-animate/TextAnimate2.js

@@ -0,0 +1,312 @@
+"use client";
+import './TextAnimate.css';/* empty css            */
+import { jsx as e } from "react/jsx-runtime";
+import t from "clsx";
+import { AnimatePresence as n, motion as r } from "motion/react";
+//#region src/components/text-animate/TextAnimate.tsx
+var i = {
+	text: .06,
+	word: .05,
+	character: .03,
+	line: .06
+}, a = {
+	hidden: { opacity: 1 },
+	show: {
+		opacity: 1,
+		transition: { staggerChildren: .05 }
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			staggerChildren: .05,
+			staggerDirection: -1
+		}
+	}
+}, o = {
+	hidden: { opacity: 0 },
+	show: { opacity: 1 },
+	exit: { opacity: 0 }
+}, s = {
+	fadeIn: {
+		container: a,
+		item: {
+			hidden: {
+				opacity: 0,
+				y: 20
+			},
+			show: (e) => ({
+				opacity: 1,
+				y: 0,
+				transition: {
+					delay: e,
+					duration: .3
+				}
+			}),
+			exit: {
+				opacity: 0,
+				y: 20,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	blurIn: {
+		container: a,
+		item: {
+			hidden: {
+				opacity: 0,
+				filter: "blur(10px)"
+			},
+			show: (e) => ({
+				opacity: 1,
+				filter: "blur(0px)",
+				transition: {
+					delay: e * .1,
+					duration: .3
+				}
+			}),
+			exit: {
+				opacity: 0,
+				filter: "blur(10px)",
+				transition: { duration: .3 }
+			}
+		}
+	},
+	blurInUp: {
+		container: a,
+		item: {
+			hidden: {
+				opacity: 0,
+				filter: "blur(10px)",
+				y: 20
+			},
+			show: (e) => ({
+				opacity: 1,
+				filter: "blur(0px)",
+				y: 0,
+				transition: {
+					y: { duration: .3 },
+					opacity: { duration: .4 },
+					filter: { duration: .3 }
+				}
+			}),
+			exit: {
+				opacity: 0,
+				filter: "blur(10px)",
+				y: 20,
+				transition: {
+					y: { duration: .3 },
+					opacity: { duration: .4 },
+					filter: { duration: .3 }
+				}
+			}
+		}
+	},
+	blurInDown: {
+		container: a,
+		item: {
+			hidden: {
+				opacity: 0,
+				filter: "blur(10px)",
+				y: -20
+			},
+			show: (e) => ({
+				opacity: 1,
+				filter: "blur(0px)",
+				y: 0,
+				transition: {
+					y: { duration: .3 },
+					opacity: { duration: .4 },
+					filter: { duration: .3 }
+				}
+			})
+		}
+	},
+	slideUp: {
+		container: a,
+		item: {
+			hidden: {
+				y: 20,
+				opacity: 0
+			},
+			show: (e) => ({
+				y: 0,
+				opacity: 1,
+				transition: {
+					delay: e,
+					duration: .3
+				}
+			}),
+			exit: {
+				y: -20,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	slideDown: {
+		container: a,
+		item: {
+			hidden: {
+				y: -20,
+				opacity: 0
+			},
+			show: {
+				y: 0,
+				opacity: 1,
+				transition: { duration: .3 }
+			},
+			exit: {
+				y: 20,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	slideLeft: {
+		container: a,
+		item: {
+			hidden: {
+				x: 20,
+				opacity: 0
+			},
+			show: {
+				x: 0,
+				opacity: 1,
+				transition: { duration: .3 }
+			},
+			exit: {
+				x: -20,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	slideRight: {
+		container: a,
+		item: {
+			hidden: {
+				x: -20,
+				opacity: 0
+			},
+			show: {
+				x: 0,
+				opacity: 1,
+				transition: { duration: .3 }
+			},
+			exit: {
+				x: 20,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	scaleUp: {
+		container: a,
+		item: {
+			hidden: {
+				scale: .5,
+				opacity: 0
+			},
+			show: {
+				scale: 1,
+				opacity: 1,
+				transition: {
+					duration: .3,
+					scale: {
+						type: "spring",
+						damping: 15,
+						stiffness: 300
+					}
+				}
+			},
+			exit: {
+				scale: .5,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	},
+	scaleDown: {
+		container: a,
+		item: {
+			hidden: {
+				scale: 1.5,
+				opacity: 0
+			},
+			show: (e) => ({
+				scale: 1,
+				opacity: 1,
+				transition: {
+					delay: e,
+					duration: .3,
+					scale: {
+						type: "spring",
+						damping: 15,
+						stiffness: 300
+					}
+				}
+			}),
+			exit: {
+				scale: 1.5,
+				opacity: 0,
+				transition: { duration: .3 }
+			}
+		}
+	}
+};
+function c({ children: c, delay: l = 0, duration: u = .3, variants: d, className: f, segmentClassName: p, as: m = "p", startOnView: h = !0, once: g = !1, by: _ = "word", animation: v = "fadeIn", ...y }) {
+	let b = r.create(m), x = v ? {
+		container: {
+			...s[v].container,
+			show: {
+				...s[v].container.show,
+				transition: { staggerChildren: i[_] }
+			},
+			exit: {
+				...s[v].container.exit,
+				transition: {
+					staggerChildren: i[_],
+					staggerDirection: -1
+				}
+			}
+		},
+		item: s[v].item
+	} : {
+		container: a,
+		item: o
+	}, S = [];
+	switch (_) {
+		case "word":
+			S = c.split(/(\s+)/);
+			break;
+		case "character":
+			S = c.split("");
+			break;
+		case "line":
+			S = c.split("\n");
+			break;
+		default:
+			S = [c];
+			break;
+	}
+	return /* @__PURE__ */ e(n, {
+		mode: "popLayout",
+		children: /* @__PURE__ */ e(b, {
+			variants: x.container,
+			initial: "hidden",
+			whileInView: h ? "show" : void 0,
+			animate: h ? void 0 : "show",
+			exit: "exit",
+			className: t("xiping-text-animate", f),
+			...y,
+			children: S.map((n, a) => /* @__PURE__ */ e(r.span, {
+				variants: x.item,
+				custom: a * i[_],
+				className: t("xiping-text-animate-segment", _ === "line" && "xiping-text-animate-segment--line", p),
+				children: n
+			}, `${_}-${n}-${a}`))
+		})
+	});
+}
+//#endregion
+export { c as TextAnimate };

package/dist/es/components/text-type/TextType.css

@@ -1 +1 @@
-.xiping-text-type{display:inline-block;white-space:pre-wrap}.xiping-text-type__content{display:inline-block}.xiping-text-type__cursor{margin-left:.25rem;display:inline-block;opacity:1}.xiping-text-type__cursor--hidden{display:none}
+.xiping-text-type{white-space:pre-wrap;display:inline-block}.xiping-text-type__content{display:inline-block}.xiping-text-type__cursor{opacity:1;margin-left:.25rem;display:inline-block}.xiping-text-type__cursor--hidden{display:none}

package/dist/es/components/text-type/TextType2.js

@@ -0,0 +1,80 @@
+"use client";
+import './TextType.css';/* empty css         */
+import { jsx as e } from "react/jsx-runtime";
+import { createElement as t, useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import s from "clsx";
+import { gsap as c } from "gsap";
+//#region src/components/text-type/TextType.tsx
+var l = ({ text: l, as: u = "div", typingSpeed: d = 50, initialDelay: f = 0, pauseDuration: p = 2e3, deletingSpeed: m = 30, loop: h = !0, className: g = "", showCursor: _ = !0, hideCursorWhileTyping: v = !1, cursorCharacter: y = "|", cursorClassName: b = "", cursorBlinkDuration: x = .5, textColors: S = [], variableSpeed: C, onSentenceComplete: w, startOnVisible: T = !1, reverseMode: E = !1, ...D }) => {
+	let [O, k] = o(""), [A, j] = o(0), [M, N] = o(!1), [P, F] = o(0), [I, L] = o(!T), R = a(null), z = a(null), B = i(() => Array.isArray(l) ? l : [l], [l]), V = n(() => {
+		if (!C) return d;
+		let { min: e, max: t } = C;
+		return Math.random() * (t - e) + e;
+	}, [C, d]), H = () => {
+		if (S.length !== 0) return S[P % S.length];
+	};
+	r(() => {
+		if (!T || !z.current) return;
+		let e = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				e.isIntersecting && L(!0);
+			});
+		}, { threshold: .1 });
+		return e.observe(z.current), () => e.disconnect();
+	}, [T]), r(() => {
+		_ && R.current && (c.set(R.current, { opacity: 1 }), c.to(R.current, {
+			opacity: 0,
+			duration: x,
+			repeat: -1,
+			yoyo: !0,
+			ease: "power2.inOut"
+		}));
+	}, [_, x]), r(() => {
+		if (!I) return;
+		let e, t = B[P], n = E ? t.split("").reverse().join("") : t, r = () => {
+			if (M) if (O === "") {
+				if (N(!1), P === B.length - 1 && !h) return;
+				w && w(B[P], P), F((e) => (e + 1) % B.length), j(0), e = setTimeout(() => {}, p);
+			} else e = setTimeout(() => {
+				k((e) => e.slice(0, -1));
+			}, m);
+			else A < n.length ? e = setTimeout(() => {
+				k((e) => e + n[A]), j((e) => e + 1);
+			}, C ? V() : d) : B.length > 1 && (e = setTimeout(() => {
+				N(!0);
+			}, p));
+		};
+		return A === 0 && !M && O === "" ? e = setTimeout(r, f) : r(), () => clearTimeout(e);
+	}, [
+		A,
+		O,
+		M,
+		d,
+		m,
+		p,
+		B,
+		P,
+		h,
+		f,
+		I,
+		E,
+		C,
+		w
+	]);
+	let U = v && (A < B[P].length || M);
+	return t(u, {
+		ref: z,
+		className: `xiping-text-type ${g}`,
+		...D
+	}, /* @__PURE__ */ e("span", {
+		className: "xiping-text-type__content",
+		style: { color: H() || "inherit" },
+		children: O
+	}), _ && /* @__PURE__ */ e("span", {
+		ref: R,
+		className: s("xiping-text-type__cursor", b, U && "xiping-text-type__cursor--hidden"),
+		children: y
+	}));
+};
+//#endregion
+export { l as default };

package/dist/es/components/txt-editor/TxtEditor.js

@@ -1,81 +1,57 @@
-import { jsxs as k, jsx as c } from "react/jsx-runtime";
-import { useEditor as M, EditorContent as w } from "@tiptap/react";
-import C from "@tiptap/starter-kit";
-import { useMemo as P, useEffect as a } from "react";
-const U = ({
-  height: t = "500px",
-  width: i = "100%",
-  language: y = "plaintext",
-  // eslint-disable-line @typescript-eslint/no-unused-vars
-  defaultValue: d,
-  value: o,
-  theme: p = "light",
-  readOnly: n = !1,
-  onChange: m,
-  onMount: s,
-  className: u
-}) => {
-  const l = o !== void 0, g = P(
-    () => d || o || "",
-    [d, o]
-  ), e = M({
-    extensions: [
-      C.configure({
-        // 禁用大部分格式化功能，保持纯文本编辑体验
-        bold: !1,
-        italic: !1,
-        strike: !1,
-        code: !1,
-        heading: !1,
-        blockquote: !1,
-        horizontalRule: !1,
-        hardBreak: !1
-        // 保留历史记录、拖拽光标和间隙光标功能（使用默认配置）
-      })
-    ],
-    content: g,
-    editable: !n,
-    immediatelyRender: !1,
-    onUpdate: ({ editor: f }) => {
-      const b = f.getText();
-      m?.(b);
-    }
-  });
-  if (a(() => {
-    if (!e || !l) return;
-    const f = e.getText();
-    o !== f && e.commands.setContent(o || "", { emitUpdate: !1 });
-  }, [e, o, l]), a(() => {
-    e && e.setEditable(!n);
-  }, [e, n]), a(() => {
-    e && s && s(e);
-  }, [e, s]), !e)
-    return null;
-  const x = typeof t == "number" ? `${t}px` : t, h = typeof i == "number" ? `${i}px` : i, r = p === "vs-dark";
-  return /* @__PURE__ */ k(
-    "div",
-    {
-      className: u,
-      style: {
-        width: h,
-        height: x,
-        border: `1px solid ${r ? "#3e3e3e" : "#d4d4d4"}`,
-        borderRadius: "4px",
-        overflow: "hidden",
-        backgroundColor: r ? "#1e1e1e" : "#ffffff"
-      },
-      children: [
-        /* @__PURE__ */ c(
-          w,
-          {
-            editor: e,
-            style: {
-              height: "100%",
-              overflow: "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ c("style", { children: `
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useEffect as n, useMemo as r } from "react";
+import { EditorContent as i, useEditor as a } from "@tiptap/react";
+import o from "@tiptap/starter-kit";
+//#region src/components/txt-editor/TxtEditor.tsx
+var s = ({ height: s = "500px", width: c = "100%", language: l = "plaintext", defaultValue: u, value: d, theme: f = "light", readOnly: p = !1, onChange: m, onMount: h, className: g }) => {
+	let _ = d !== void 0, v = r(() => u || d || "", [u, d]), y = a({
+		extensions: [o.configure({
+			bold: !1,
+			italic: !1,
+			strike: !1,
+			code: !1,
+			heading: !1,
+			blockquote: !1,
+			horizontalRule: !1,
+			hardBreak: !1
+		})],
+		content: v,
+		editable: !p,
+		immediatelyRender: !1,
+		onUpdate: ({ editor: e }) => {
+			let t = e.getText();
+			m?.(t);
+		}
+	});
+	if (n(() => {
+		!y || !_ || d !== y.getText() && y.commands.setContent(d || "", { emitUpdate: !1 });
+	}, [
+		y,
+		d,
+		_
+	]), n(() => {
+		y && y.setEditable(!p);
+	}, [y, p]), n(() => {
+		y && h && h(y);
+	}, [y, h]), !y) return null;
+	let b = typeof s == "number" ? `${s}px` : s, x = typeof c == "number" ? `${c}px` : c, S = f === "vs-dark";
+	return /* @__PURE__ */ t("div", {
+		className: g,
+		style: {
+			width: x,
+			height: b,
+			border: `1px solid ${S ? "#3e3e3e" : "#d4d4d4"}`,
+			borderRadius: "4px",
+			overflow: "hidden",
+			backgroundColor: S ? "#1e1e1e" : "#ffffff"
+		},
+		children: [/* @__PURE__ */ e(i, {
+			editor: y,
+			style: {
+				height: "100%",
+				overflow: "auto"
+			}
+		}), /* @__PURE__ */ e("style", { children: `
         .ProseMirror {
           outline: none;
           padding: 12px;
@@ -83,7 +59,7 @@ const U = ({
           font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
           font-size: 14px;
           line-height: 1.5;
-          color: ${r ? "#d4d4d4" : "#333333"};
+          color: ${S ? "#d4d4d4" : "#333333"};
           white-space: pre-wrap;
           word-wrap: break-word;
         }
@@ -97,20 +73,9 @@ const U = ({
         .ProseMirror:focus {
           outline: none;
         }
-        ${r ? `
-          .ProseMirror {
-            background-color: #1e1e1e;
-          }
-        ` : `
-          .ProseMirror {
-            background-color: #ffffff;
-          }
-        `}
-      ` })
-      ]
-    }
-  );
-};
-export {
-  U as TxtEditor
+        ${S ? "\n          .ProseMirror {\n            background-color: #1e1e1e;\n          }\n        " : "\n          .ProseMirror {\n            background-color: #ffffff;\n          }\n        "}
+      ` })]
+	});
 };
+//#endregion
+export { s as TxtEditor };

package/dist/es/components/txt-reader/TxtReader.js

@@ -1,75 +1,46 @@
-import { jsxs as h, Fragment as v, jsx as t } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import r from "clsx";
-import { useScroll as y, useTransform as I, useMotionTemplate as L, motion as l } from "motion/react";
-import e from "./index.module.css.js";
-const R = 16, S = 1.5, A = "normal", O = ({
-  content: a,
-  lineHeight: m = S,
-  fontSize: p = R,
-  fontWeight: g = A,
-  className: d = "",
-  style: x = {},
-  onProgressChange: f,
-  initialScrollPosition: D,
-  cacheKey: H,
-  showTopProgress: u = !0,
-  topProgressClassName: T,
-  showBottomProgress: N = !0,
-  bottomProgressClassName: E
-}) => {
-  const o = c(null), n = c(null), { scrollYProgress: s } = y({
-    container: o,
-    target: n
-  }), i = I(() => (s.get() * 100).toFixed(2).replace(/\.0*$/, "")), F = L`${i}%`;
-  return i.on("change", (_) => {
-    f?.(Number(_));
-  }), /* @__PURE__ */ h(v, { children: [
-    u && /* @__PURE__ */ t(
-      l.div,
-      {
-        id: "scroll-indicator",
-        className: r(e["xiping-top-progress"], T),
-        style: {
-          scaleX: s,
-          originX: 0
-        }
-      }
-    ),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        className: r(e["xiping-container"], e["xiping-text-content"]),
-        ref: o,
-        children: /* @__PURE__ */ t(
-          "div",
-          {
-            ref: n,
-            className: r(e["xiping-content"], d),
-            style: {
-              fontSize: `${p}px`,
-              lineHeight: m,
-              fontWeight: g,
-              ...x
-            },
-            children: a
-          }
-        )
-      }
-    ),
-    N && /* @__PURE__ */ t(
-      l.div,
-      {
-        id: "scroll-present",
-        className: r(
-          e["xiping-bottom-progress"],
-          E
-        ),
-        children: F
-      }
-    )
-  ] });
-};
-export {
-  O as TxtReader
+import e from "./index.module.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import a from "clsx";
+import { motion as o, useMotionTemplate as s, useScroll as c, useTransform as l } from "motion/react";
+//#region src/components/txt-reader/TxtReader.tsx
+var u = 16, d = 1.5, f = "normal", p = ({ content: p, lineHeight: m = d, fontSize: h = u, fontWeight: g = f, className: _ = "", style: v = {}, onProgressChange: y, initialScrollPosition: b, cacheKey: x, showTopProgress: S = !0, topProgressClassName: C, showBottomProgress: w = !0, bottomProgressClassName: T }) => {
+	let E = i(null), D = i(null), { scrollYProgress: O } = c({
+		container: E,
+		target: D
+	}), k = l(() => (O.get() * 100).toFixed(2).replace(/\.0*$/, "")), A = s`${k}%`;
+	return k.on("change", (e) => {
+		y?.(Number(e));
+	}), /* @__PURE__ */ r(t, { children: [
+		S && /* @__PURE__ */ n(o.div, {
+			id: "scroll-indicator",
+			className: a(e["xiping-top-progress"], C),
+			style: {
+				scaleX: O,
+				originX: 0
+			}
+		}),
+		/* @__PURE__ */ n("div", {
+			className: a(e["xiping-container"], e["xiping-text-content"]),
+			ref: E,
+			children: /* @__PURE__ */ n("div", {
+				ref: D,
+				className: a(e["xiping-content"], _),
+				style: {
+					fontSize: `${h}px`,
+					lineHeight: m,
+					fontWeight: g,
+					...v
+				},
+				children: p
+			})
+		}),
+		w && /* @__PURE__ */ n(o.div, {
+			id: "scroll-present",
+			className: a(e["xiping-bottom-progress"], T),
+			children: A
+		})
+	] });
 };
+//#endregion
+export { p as default };

package/dist/es/components/txt-reader/index.module.css

@@ -1 +1 @@
-._xiping-top-progress_rkm9f_23{position:fixed;left:0;top:0;right:0;background-color:#f08;height:10px}._xiping-container_rkm9f_33{position:relative;width:100%;height:100%;overflow-y:auto}._xiping-content_rkm9f_41{width:100%;white-space:pre-wrap;word-break:break-word}._xiping-bottom-progress_rkm9f_48{position:fixed;color:#fff;border-radius:4px;font-size:.875rem;background-color:#000000b3;padding:.25rem .5rem;right:1.25rem;bottom:1.25rem}._xiping-text-content_rkm9f_63::-webkit-scrollbar{width:8px}._xiping-text-content_rkm9f_63::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px #0003;background:#0003}._xiping-text-content_rkm9f_63::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #0003;border-radius:0;background:#00000014}
+._xiping-top-progress_rkm9f_23{background-color:#f08;height:10px;position:fixed;top:0;left:0;right:0}._xiping-container_rkm9f_33{width:100%;height:100%;position:relative;overflow-y:auto}._xiping-content_rkm9f_41{white-space:pre-wrap;word-break:break-word;width:100%}._xiping-bottom-progress_rkm9f_48{color:#fff;background-color:#000000b3;border-radius:4px;padding:.25rem .5rem;font-size:.875rem;position:fixed;bottom:1.25rem;right:1.25rem}._xiping-text-content_rkm9f_63::-webkit-scrollbar{width:8px}._xiping-text-content_rkm9f_63::-webkit-scrollbar-thumb{background:#0003;box-shadow:inset 0 0 5px #0003}._xiping-text-content_rkm9f_63::-webkit-scrollbar-track{background:#00000014;border-radius:0;box-shadow:inset 0 0 5px #0003}