@xiping/react-components 1.0.22 → 1.0.24

package/dist/es/components/confetti-button/index.d.ts

@@ -1,4 +1,4 @@
-import { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions } from 'canvas-confetti';
+import { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions, default as confetti } from 'canvas-confetti';
 import { ReactNode, default as React } from 'react';
 type Api = {
     fire: (options?: ConfettiOptions) => void;
@@ -10,15 +10,15 @@ type Props = React.ComponentPropsWithRef<"canvas"> & {
     children?: ReactNode;
 };
 export type ConfettiRef = Api | null;
-export declare const Confetti: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<Api>>;
+declare const Confetti: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<Api>>;
 interface ConfettiButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     options?: ConfettiOptions & ConfettiGlobalOptions & {
         canvas?: HTMLCanvasElement;
     };
     children?: React.ReactNode;
 }
-export declare const ConfettiButton: {
+declare const ConfettiButton: {
     ({ options, children, ...props }: ConfettiButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};
+export { confetti, ConfettiButton, Confetti };

package/dist/es/components/confetti-button/index.js

@@ -1,43 +1,42 @@
 "use client";
-import { jsxs as g, jsx as d } from "react/jsx-runtime";
-import m from "../../node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js";
-import { forwardRef as x, useRef as v, useCallback as C, useMemo as k, useImperativeHandle as B, useEffect as b, createContext as R } from "react";
-const j = R({}), p = x((c, s) => {
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import d from "../../node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js";
+import { forwardRef as g, useRef as x, useCallback as u, useMemo as v, useImperativeHandle as k, useEffect as R, createContext as B } from "react";
+const b = B({}), m = g((c, s) => {
   const {
     options: n,
     globalOptions: a = { resize: !0, useWorker: !0 },
     manualstart: o = !1,
-    children: e,
-    ...l
-  } = c, t = v(null), y = C(
+    children: t,
+    ...f
+  } = c, e = x(null), h = u(
     (r) => {
       if (r !== null) {
-        if (t.current) return;
-        t.current = m.create(r, {
+        if (e.current) return;
+        e.current = d.create(r, {
           ...a,
           resize: !0
         });
       } else
-        t.current && (t.current.reset(), t.current = null);
+        e.current && (e.current.reset(), e.current = null);
     },
     [a]
-  ), i = C(
+  ), i = u(
     async (r = {}) => {
-      var f;
       try {
-        await ((f = t.current) == null ? void 0 : f.call(t, { ...n, ...r }));
-      } catch (w) {
-        console.error("Confetti error:", w);
+        await e.current?.({ ...n, ...r });
+      } catch (y) {
+        console.error("Confetti error:", y);
       }
     },
     [n]
-  ), u = k(
+  ), l = v(
     () => ({
       fire: i
     }),
     [i]
   );
-  return B(s, () => u, [u]), b(() => {
+  return k(s, () => l, [l]), R(() => {
     o || (async () => {
       try {
         await i();
@@ -45,33 +44,34 @@ const j = R({}), p = x((c, s) => {
         console.error("Confetti effect error:", r);
       }
     })();
-  }, [o, i]), /* @__PURE__ */ g(j.Provider, { value: u, children: [
-    /* @__PURE__ */ d("canvas", { ref: y, ...l }),
-    e
+  }, [o, i]), /* @__PURE__ */ w(b.Provider, { value: l, children: [
+    /* @__PURE__ */ C("canvas", { ref: h, ...f }),
+    t
   ] });
 });
-p.displayName = "Confetti";
-const W = p, h = ({
+m.displayName = "Confetti";
+const N = m, p = ({
   options: c,
   children: s,
   ...n
-}) => /* @__PURE__ */ d("div", { onClick: async (o) => {
+}) => /* @__PURE__ */ C("div", { onClick: async (o) => {
   try {
-    const e = o.currentTarget.getBoundingClientRect(), l = e.left + e.width / 2, t = e.top + e.height / 2;
-    await m({
+    const t = o.currentTarget.getBoundingClientRect(), f = t.left + t.width / 2, e = t.top + t.height / 2;
+    await d({
       ...c,
       origin: {
-        x: l / window.innerWidth,
-        y: t / window.innerHeight
+        x: f / window.innerWidth,
+        y: e / window.innerHeight
       }
     });
-  } catch (e) {
-    console.error("Confetti button error:", e);
+  } catch (t) {
+    console.error("Confetti button error:", t);
   }
 }, ...n, children: s });
-h.displayName = "ConfettiButton";
-const E = h;
+p.displayName = "ConfettiButton";
+const W = p;
 export {
-  W as Confetti,
-  E as ConfettiButton
+  N as Confetti,
+  W as ConfettiButton,
+  d as confetti
 };

package/dist/es/components/dock/Duck.js

@@ -1,36 +1,36 @@
 "use client";
-import { jsx as g } from "react/jsx-runtime";
-import { cva as T } from "class-variance-authority";
-import { useMotionValue as x, motion as k, useTransform as b, useSpring as w } from "motion/react";
-import i, { useRef as A } from "react";
-import { cn as I } from "../../utils/utils.js";
-const y = 40, D = 60, h = 140, C = T(
+import { jsx as b } from "react/jsx-runtime";
+import { cva as N } from "class-variance-authority";
+import { useMotionValue as g, motion as x, useTransform as f, useSpring as T } from "motion/react";
+import i, { useRef as w } from "react";
+import { cn as k } from "../../utils/utils.js";
+const I = 40, y = 60, D = 140, A = N(
   "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md"
-), v = i.forwardRef(
+), C = i.forwardRef(
   ({
     className: t,
     children: a,
-    iconSize: s = y,
-    iconMagnification: c = D,
-    iconDistance: m = h,
+    iconSize: s = I,
+    iconMagnification: c = y,
+    iconDistance: m = D,
     direction: n = "middle",
     ...u
   }, r) => {
-    const o = x(1 / 0), d = () => i.Children.map(a, (e) => i.isValidElement(e) && e.type === E ? i.cloneElement(e, {
+    const o = g(1 / 0), d = () => i.Children.map(a, (e) => i.isValidElement(e) && e.type === h ? i.cloneElement(e, {
       ...e.props,
       mouseX: o,
       size: s,
       magnification: c,
       distance: m
     }) : e);
-    return /* @__PURE__ */ g(
-      k.div,
+    return /* @__PURE__ */ b(
+      x.div,
       {
         ref: r,
         onMouseMove: (e) => o.set(e.pageX),
         onMouseLeave: () => o.set(1 / 0),
         ...u,
-        className: I(C({ className: t }), {
+        className: k(A({ className: t }), {
           "items-start": n === "top",
           "items-center": n === "middle",
           "items-end": n === "bottom"
@@ -40,35 +40,34 @@ const y = 40, D = 60, h = 140, C = T(
     );
   }
 );
-v.displayName = "Dock";
-const E = ({
-  size: t = y,
-  magnification: a = D,
-  distance: s = h,
+C.displayName = "Dock";
+const h = ({
+  size: t = I,
+  magnification: a = y,
+  distance: s = D,
   mouseX: c,
   className: m,
   children: n,
   ...u
 }) => {
-  const r = A(null), o = Math.max(6, t * 0.2), d = x(1 / 0), e = b(c ?? d, (N) => {
-    var f;
-    const l = ((f = r.current) == null ? void 0 : f.getBoundingClientRect()) ?? { x: 0, width: 0 };
-    return N - l.x - l.width / 2;
-  }), M = b(
+  const r = w(null), o = Math.max(6, t * 0.2), d = g(1 / 0), e = f(c ?? d, (M) => {
+    const l = r.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return M - l.x - l.width / 2;
+  }), E = f(
     e,
     [-s, 0, s],
     [t, a, t]
-  ), p = w(M, {
+  ), p = T(E, {
     mass: 0.1,
     stiffness: 150,
     damping: 12
   });
-  return /* @__PURE__ */ g(
-    k.div,
+  return /* @__PURE__ */ b(
+    x.div,
     {
       ref: r,
       style: { width: p, height: p, padding: o },
-      className: I(
+      className: k(
         "flex aspect-square cursor-pointer items-center justify-center rounded-full",
         m
       ),
@@ -77,9 +76,9 @@ const E = ({
     }
   );
 };
-E.displayName = "DockIcon";
+h.displayName = "DockIcon";
 export {
-  v as Dock,
-  E as DockIcon,
-  C as dockVariants
+  C as Dock,
+  h as DockIcon,
+  A as dockVariants
 };

package/dist/es/components/pinch-content/PinchContent.js

@@ -4,7 +4,7 @@ import { createUseGesture as N, dragAction as U, pinchAction as W, wheelAction a
 import { useRef as F } from "react";
 import { useMount as k, useUnmount as q } from "ahooks";
 import z from "clsx";
-const H = N([U, W, j]), o = (u) => u.preventDefault(), V = (u) => {
+const H = N([U, W, j]), a = (c) => c.preventDefault(), V = (c) => {
   const {
     className: f,
     children: h,
@@ -15,15 +15,13 @@ const H = N([U, W, j]), o = (u) => u.preventDefault(), V = (u) => {
     scaleBounds: l = { min: 0.3, max: 10 },
     wheelZoomFactor: p = 1e-3,
     rubberband: y = !0
-  } = u, n = F(null);
+  } = c, e = F(null);
   k(() => {
-    var t, e, r;
-    (t = n.current) == null || t.addEventListener("gesturestart", o), (e = n.current) == null || e.addEventListener("gesturechange", o), (r = n.current) == null || r.addEventListener("gestureend", o);
+    e.current?.addEventListener("gesturestart", a), e.current?.addEventListener("gesturechange", a), e.current?.addEventListener("gestureend", a);
   }), q(() => {
-    var t, e, r;
-    (t = n.current) == null || t.removeEventListener("gesturestart", o), (e = n.current) == null || e.removeEventListener("gesturechange", o), (r = n.current) == null || r.removeEventListener("gestureend", o);
+    e.current?.removeEventListener("gesturestart", a), e.current?.removeEventListener("gesturechange", a), e.current?.removeEventListener("gestureend", a);
   });
-  const [s, g] = C(() => ({
+  const [t, g] = C(() => ({
     x: 0,
     y: 0,
     scale: 1,
@@ -31,42 +29,42 @@ const H = N([U, W, j]), o = (u) => u.preventDefault(), V = (u) => {
   }));
   return H(
     {
-      onWheel: ({ event: t, delta: [, e] }) => {
+      onWheel: ({ event: o, delta: [, r] }) => {
         if (!d) return;
-        const a = s.scale.get() * (1 - e * p), i = Math.min(
-          Math.max(a, l.min),
+        const n = t.scale.get() * (1 - r * p), i = Math.min(
+          Math.max(n, l.min),
           l.max
         );
         g.start({ scale: i });
       },
-      onDrag: ({ pinching: t, cancel: e, offset: [r, a], ...i }) => {
-        if (!x || t) return e();
-        g.start({ x: r, y: a });
+      onDrag: ({ pinching: o, cancel: r, offset: [u, n], ...i }) => {
+        if (!x || o) return r();
+        g.start({ x: u, y: n });
       },
       onPinch: ({
-        origin: [t, e],
-        first: r,
-        movement: [a],
+        origin: [o, r],
+        first: u,
+        movement: [n],
         offset: [i, E],
-        memo: c,
+        memo: s,
         cancel: L
       }) => {
         if (!d) return L();
-        if (r) {
-          const { width: M, height: Z, x: A, y: D } = n.current.getBoundingClientRect(), P = t - (A + M / 2), R = e - (D + Z / 2);
-          c = [s.x.get(), s.y.get(), P, R];
+        if (u) {
+          const { width: M, height: Z, x: A, y: D } = e.current.getBoundingClientRect(), P = o - (A + M / 2), R = r - (D + Z / 2);
+          s = [t.x.get(), t.y.get(), P, R];
         }
-        const w = c[0] - (a - 1) * c[2], S = c[1] - (a - 1) * c[3], b = {
+        const w = s[0] - (n - 1) * s[2], S = s[1] - (n - 1) * s[3], b = {
           scale: i,
-          rotateZ: v ? E : s.rotateZ.get(),
-          ...m ? { x: s.x.get(), y: s.y.get() } : { x: w, y: S }
+          rotateZ: v ? E : t.rotateZ.get(),
+          ...m ? { x: t.x.get(), y: t.y.get() } : { x: w, y: S }
         };
-        return g.start(b), c;
+        return g.start(b), s;
       }
     },
     {
-      target: n,
-      drag: { from: () => [s.x.get(), s.y.get()] },
+      target: e,
+      drag: { from: () => [t.x.get(), t.y.get()] },
       pinch: { scaleBounds: l, rubberband: y },
       wheel: { enabled: !0 }
     }
@@ -74,10 +72,10 @@ const H = N([U, W, j]), o = (u) => u.preventDefault(), V = (u) => {
     G.div,
     {
       className: z("select-none", f),
-      ref: n,
+      ref: e,
       style: {
-        ...u.style,
-        ...s
+        ...c.style,
+        ...t
       },
       children: h
     }

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

@@ -0,0 +1,13 @@
+import { HTMLMotionProps } from 'motion/react';
+import { ReactNode } from 'react';
+type PointerProps = Omit<HTMLMotionProps<"div">, "ref">;
+/**
+ * A custom pointer component that displays an animated cursor.
+ * Add this as a child to any component to enable a custom pointer when hovering.
+ * You can pass custom children to render as the pointer.
+ *
+ * @component
+ * @param {PointerProps} props - The component props
+ */
+export declare function Pointer({ className, style, children, ...props }: PointerProps): ReactNode;
+export {};

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/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
 };