@xiping/react-components 1.0.23 → 1.0.25

package/dist/es/components/pointer/Pointer.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs as h, Fragment as E, jsx as t } from "react/jsx-runtime";
+import { cn as w } from "../../utils/utils.js";
+import { useMotionValue as m, AnimatePresence as x, motion as L } from "motion/react";
+import { useState as y, useRef as g, useEffect as M } from "react";
+function C({
+  className: u,
+  style: d,
+  children: v,
+  ...f
+}) {
+  const n = m(0), o = m(0), [p, s] = y(!1), r = g(null);
+  return M(() => {
+    if (typeof window < "u" && r.current) {
+      const e = r.current.parentElement;
+      if (e) {
+        e.style.cursor = "none";
+        const i = (l) => {
+          n.set(l.clientX), o.set(l.clientY);
+        }, a = () => {
+          s(!0);
+        }, c = () => {
+          s(!1);
+        };
+        return e.addEventListener("mousemove", i), e.addEventListener("mouseenter", a), e.addEventListener("mouseleave", c), () => {
+          e.style.cursor = "", e.removeEventListener("mousemove", i), e.removeEventListener("mouseenter", a), e.removeEventListener("mouseleave", c);
+        };
+      }
+    }
+  }, [n, o]), /* @__PURE__ */ h(E, { children: [
+    /* @__PURE__ */ t("div", { ref: r }),
+    /* @__PURE__ */ t(x, { children: p && /* @__PURE__ */ t(
+      L.div,
+      {
+        className: "transform-[translate(-50%,-50%)] pointer-events-none fixed z-50",
+        style: {
+          top: o,
+          left: n,
+          ...d
+        },
+        initial: {
+          scale: 0,
+          opacity: 0
+        },
+        animate: {
+          scale: 1,
+          opacity: 1
+        },
+        exit: {
+          scale: 0,
+          opacity: 0
+        },
+        ...f,
+        children: v || /* @__PURE__ */ t(
+          "svg",
+          {
+            stroke: "currentColor",
+            fill: "currentColor",
+            strokeWidth: "1",
+            viewBox: "0 0 16 16",
+            height: "24",
+            width: "24",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: w(
+              "rotate-[-70deg] stroke-white text-black",
+              u
+            ),
+            children: /* @__PURE__ */ t("path", { d: "M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z" })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  C as Pointer
+};

package/dist/es/components/pointer/index.d.ts

@@ -0,0 +1,2 @@
+import { Pointer } from './Pointer';
+export { Pointer };

package/dist/es/components/scratch-to-reveal/ScratchToReveal.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface ScratchToRevealProps {
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    minScratchPercentage?: number;
+    className?: string;
+    onComplete?: () => void;
+    gradientColors?: [string, string, string];
+}
+export declare const ScratchToReveal: React.FC<ScratchToRevealProps>;
+export {};

package/dist/es/components/scratch-to-reveal/index.d.ts

@@ -0,0 +1,2 @@
+import { ScratchToReveal } from './ScratchToReveal';
+export { ScratchToReveal };

package/dist/es/components/sparkles-text/SparklesText.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+interface SparklesTextProps {
+    /**
+     * @default <div />
+     * @type ReactElement
+     * @description
+     * The component to be rendered as the text
+     * */
+    as?: ReactElement;
+    /**
+     * @default ""
+     * @type string
+     * @description
+     * The className of the text
+     */
+    className?: string;
+    /**
+     * @required
+     * @type ReactNode
+     * @description
+     * The content to be displayed
+     * */
+    children: React.ReactNode;
+    /**
+     * @default 10
+     * @type number
+     * @description
+     * The count of sparkles
+     * */
+    sparklesCount?: number;
+    /**
+     * @default "{first: '#9E7AFF', second: '#FE8BBB'}"
+     * @type string
+     * @description
+     * The colors of the sparkles
+     * */
+    colors?: {
+        first: string;
+        second: string;
+    };
+}
+export declare const SparklesText: React.FC<SparklesTextProps>;
+export {};

package/dist/es/components/sparkles-text/SparklesText.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { motion as L } from "motion/react";
+import { useState as S, useEffect as y } from "react";
+import { cn as M } from "../../utils/utils.js";
+const $ = ({ id: o, x: t, y: i, color: s, delay: l, scale: c }) => /* @__PURE__ */ r(
+  L.svg,
+  {
+    className: "pointer-events-none absolute z-20",
+    initial: { opacity: 0, left: t, top: i },
+    animate: {
+      opacity: [0, 1, 0],
+      scale: [0, c, 0],
+      rotate: [75, 120, 150]
+    },
+    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
+    width: "21",
+    height: "21",
+    viewBox: "0 0 21 21",
+    children: /* @__PURE__ */ r(
+      "path",
+      {
+        d: "M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",
+        fill: s
+      }
+    )
+  },
+  o
+), E = ({
+  children: o,
+  colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
+  className: i,
+  sparklesCount: s = 10,
+  ...l
+}) => {
+  const [c, d] = S([]);
+  return y(() => {
+    const a = () => {
+      const e = `${Math.random() * 100}%`, n = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, u = Math.random() * 2, C = Math.random() * 1 + 0.3, v = Math.random() * 10 + 5;
+      return { id: `${e}-${n}-${Date.now()}`, x: e, y: n, color: h, delay: u, scale: C, lifespan: v };
+    }, p = () => {
+      const e = Array.from({ length: s }, a);
+      d(e);
+    }, m = () => {
+      d(
+        (e) => e.map((n) => n.lifespan <= 0 ? a() : { ...n, lifespan: n.lifespan - 0.1 })
+      );
+    };
+    p();
+    const f = setInterval(m, 100);
+    return () => clearInterval(f);
+  }, [t.first, t.second, s]), /* @__PURE__ */ r(
+    "div",
+    {
+      className: M("text-6xl font-bold", i),
+      ...l,
+      style: {
+        "--sparkles-first-color": `${t.first}`,
+        "--sparkles-second-color": `${t.second}`
+      },
+      children: /* @__PURE__ */ x("span", { className: "relative inline-block", children: [
+        c.map((a) => /* @__PURE__ */ r($, { ...a }, a.id)),
+        /* @__PURE__ */ r("strong", { children: o })
+      ] })
+    }
+  );
+};
+export {
+  E as SparklesText
+};

package/dist/es/components/sparkles-text/index.d.ts

@@ -0,0 +1,2 @@
+import { SparklesText } from './SparklesText.tsx';
+export { SparklesText };

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

@@ -1,31 +1,31 @@
-import { jsx as u } from "react/jsx-runtime";
-import c from "../../node_modules/.pnpm/@monaco-editor_react@4.7.0_monaco-editor@0.52.2_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@monaco-editor/react/dist/index.js";
-import { useRef as x } from "react";
-const D = ({
+import { jsx as m } from "react/jsx-runtime";
+import h from "../../node_modules/.pnpm/@monaco-editor_react@4.7.0_monaco-editor@0.52.2_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@monaco-editor/react/dist/index.js";
+import { useRef as c } from "react";
+const M = ({
   height: o = "500px",
-  width: r = "100%",
-  language: d = "plaintext",
-  defaultValue: n,
-  value: s,
-  theme: a = "light",
-  readOnly: l = !1,
-  onChange: t,
-  onMount: i,
-  className: f
+  width: t = "100%",
+  language: i = "plaintext",
+  defaultValue: a,
+  value: l,
+  theme: r = "light",
+  readOnly: e = !1,
+  onChange: d,
+  onMount: s,
+  className: u
 }) => {
-  const p = x(null);
-  return /* @__PURE__ */ u(
-    c,
+  const f = c(null);
+  return /* @__PURE__ */ m(
+    h,
     {
-      className: f,
+      className: u,
       height: o,
-      width: r,
-      defaultLanguage: d,
-      defaultValue: n,
-      value: s,
-      theme: a,
-      onMount: (e, m) => {
-        p.current = e, i == null || i(e, m), e.updateOptions({
+      width: t,
+      defaultLanguage: i,
+      defaultValue: a,
+      value: l,
+      theme: r,
+      onMount: (n, p) => {
+        f.current = n, s?.(n, p), n.updateOptions({
           minimap: { enabled: !1 },
           // 禁用小地图
           lineNumbers: "on",
@@ -34,21 +34,21 @@ const D = ({
           // 方形选区
           scrollBeyondLastLine: !1,
           // 禁止滚动到最后一行之后
-          readOnly: l,
+          readOnly: e,
           // 是否只读
           fontSize: 14
           // 字体大小
         });
       },
-      onChange: (e) => {
-        t == null || t(e || "");
+      onChange: (n) => {
+        d?.(n || "");
       },
       options: {
-        readOnly: l
+        readOnly: e
       }
     }
   );
 };
 export {
-  D as TxtEditor
+  M as TxtEditor
 };

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

@@ -1,78 +1,78 @@
-import { jsxs as E, Fragment as F, jsx as t } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import e from "clsx";
-import { useScroll as _, useTransform as v, useMotionTemplate as y, motion as n } from "motion/react";
-import g from "./index.module.css.js";
+import { jsxs as w, Fragment as E, jsx as e } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import t from "clsx";
+import { useScroll as F, useTransform as _, useMotionTemplate as v, motion as n } from "motion/react";
+import y from "./index.module.css.js";
 const I = 16, L = 1.5, R = "normal", k = ({
-  content: a,
-  lineHeight: f = L,
-  fontSize: m = I,
-  fontWeight: p = R,
-  className: d = "",
-  style: u = {},
-  onProgressChange: r,
+  content: c,
+  lineHeight: a = L,
+  fontSize: f = I,
+  fontWeight: m = R,
+  className: p = "",
+  style: d = {},
+  onProgressChange: u,
   initialScrollPosition: S,
   cacheKey: A,
-  showTopProgress: x = !0,
-  topProgressClassName: T,
-  showBottomProgress: b = !0,
-  bottomProgressClassName: h
+  showTopProgress: g = !0,
+  topProgressClassName: h,
+  showBottomProgress: x = !0,
+  bottomProgressClassName: T
 }) => {
-  const l = c(null), o = c(null), { scrollYProgress: i } = _({
-    container: l,
+  const r = i(null), o = i(null), { scrollYProgress: l } = F({
+    container: r,
     target: o
-  }), s = v(() => (i.get() * 100).toFixed(2).replace(/\.0*$/, "")), N = y`${s}%`;
-  return s.on("change", (w) => {
-    r == null || r(Number(w));
-  }), /* @__PURE__ */ E(F, { children: [
-    x && /* @__PURE__ */ t(
+  }), s = _(() => (l.get() * 100).toFixed(2).replace(/\.0*$/, "")), b = v`${s}%`;
+  return s.on("change", (N) => {
+    u?.(Number(N));
+  }), /* @__PURE__ */ w(E, { children: [
+    g && /* @__PURE__ */ e(
       n.div,
       {
         id: "scroll-indicator",
-        className: e(
+        className: t(
           "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
-          T
+          h
         ),
         style: {
-          scaleX: i,
+          scaleX: l,
           originX: 0
         }
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ e(
       "div",
       {
-        className: e(
+        className: t(
           "relative w-full h-full overflow-y-auto",
-          g.textContent
+          y.textContent
           // "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300",
         ),
-        ref: l,
-        children: /* @__PURE__ */ t(
+        ref: r,
+        children: /* @__PURE__ */ e(
           "div",
           {
             ref: o,
-            className: e("w-full whitespace-pre-wrap break-words", d),
+            className: t("w-full whitespace-pre-wrap break-words", p),
             style: {
-              fontSize: `${m}px`,
-              lineHeight: f,
-              fontWeight: p,
-              ...u
+              fontSize: `${f}px`,
+              lineHeight: a,
+              fontWeight: m,
+              ...d
             },
-            children: a
+            children: c
           }
         )
       }
     ),
-    b && /* @__PURE__ */ t(
+    x && /* @__PURE__ */ e(
       n.div,
       {
         id: "scroll-present",
-        className: e(
+        className: t(
           "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
-          h
+          T
         ),
-        children: N
+        children: b
       }
     )
   ] });

package/dist/es/index.d.ts

@@ -14,3 +14,6 @@ export * from './components/qr-code';
 export * from './components/react-force-graph-3d';
 export * from './components/confetti-button';
 export * from './hooks/useStayTimeReport';
+export * from './components/pointer';
+export * from './components/sparkles-text';
+export * from './components/blur-fade';

package/dist/es/index.js

@@ -1,40 +1,46 @@
 /* empty css          */
-import { Button as r } from "./components/button/Button.js";
+import { Button as t } from "./components/button/Button.js";
 import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
-import { HyperText as a } from "./components/hyper-text/index.js";
+import { HyperText as x } from "./components/hyper-text/index.js";
 import { TypingAnimation as n } from "./components/typing-animation/index.js";
 import { QRCode as d } from "./components/qr-code/index.js";
 import { Confetti as u, ConfettiButton as c } from "./components/confetti-button/index.js";
-import { useStayTimeReport as l } from "./hooks/useStayTimeReport.js";
+import { useStayTimeReport as T } from "./hooks/useStayTimeReport.js";
 import { default as g } from "./components/pinch-content/PinchContent.js";
-import { default as k } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as B } from "./components/shimmer-button/ShimmerButton.js";
+import { default as B } from "./components/image-viewer/ImageViewer.js";
+import { ShimmerButton as y } from "./components/shimmer-button/ShimmerButton.js";
 import { default as I } from "./components/image-compare/ImageCompare.js";
-import { TextAnimate as A } from "./components/text-animate/TextAnimate.js";
-import { Dock as V, DockIcon as w, dockVariants as E } from "./components/dock/Duck.js";
-import { TxtEditor as G } from "./components/txt-editor/TxtEditor.js";
-import { Message as M } from "./components/message/Message.js";
+import { TextAnimate as S } from "./components/text-animate/TextAnimate.js";
+import { Dock as F, DockIcon as P, dockVariants as V } from "./components/dock/Duck.js";
+import { TxtEditor as E } from "./components/txt-editor/TxtEditor.js";
+import { Message as H } from "./components/message/Message.js";
 import { default as Q } from "./node_modules/.pnpm/react-force-graph-3d@1.28.0_react@19.1.0/node_modules/react-force-graph-3d/dist/react-force-graph-3d.js";
 import { default as j } from "./node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js";
+import { Pointer as v } from "./components/pointer/Pointer.js";
+import { SparklesText as J } from "./components/sparkles-text/SparklesText.js";
+import { BlurFade as L } from "./components/blur-fade/BlurFade.js";
 export {
-  r as Button,
+  L as BlurFade,
+  t as Button,
   u as Confetti,
   c as ConfettiButton,
-  V as Dock,
-  w as DockIcon,
+  F as Dock,
+  P as DockIcon,
   Q as ForceGraph3D,
-  a as HyperText,
+  x as HyperText,
   I as ImageCompare,
-  k as ImageViewer,
-  M as Message,
+  B as ImageViewer,
+  H as Message,
   g as PinchContent,
+  v as Pointer,
   d as QRCode,
-  B as ShimmerButton,
-  A as TextAnimate,
-  G as TxtEditor,
+  y as ShimmerButton,
+  J as SparklesText,
+  S as TextAnimate,
+  E as TxtEditor,
   f as TxtReader,
   n as TypingAnimation,
   j as confetti,
-  E as dockVariants,
-  l as useStayTimeReport
+  V as dockVariants,
+  T as useStayTimeReport
 };