@xiping/react-components 1.0.23 → 1.0.25

package/dist/es/components/blur-fade/BlurFade.d.ts

@@ -0,0 +1,23 @@
+import { UseInViewOptions, MotionProps } from 'motion/react';
+type MarginType = UseInViewOptions["margin"];
+interface BlurFadeProps extends MotionProps {
+    children: React.ReactNode;
+    className?: string;
+    variant?: {
+        hidden: {
+            y: number;
+        };
+        visible: {
+            y: number;
+        };
+    };
+    duration?: number;
+    delay?: number;
+    offset?: number;
+    direction?: "up" | "down" | "left" | "right";
+    inView?: boolean;
+    inViewMargin?: MarginType;
+    blur?: string;
+}
+export declare function BlurFade({ children, className, variant, duration, delay, offset, direction, inView, inViewMargin, blur, ...props }: BlurFadeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/es/components/blur-fade/BlurFade.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useInView as b, AnimatePresence as w, motion as y } from "motion/react";
+import { useRef as V } from "react";
+function R({
+  children: r,
+  className: a,
+  variant: s,
+  duration: l = 0.4,
+  delay: o = 0,
+  offset: i = 6,
+  direction: e = "down",
+  inView: u = !1,
+  inViewMargin: d = "-50px",
+  blur: m = "6px",
+  ...f
+}) {
+  const t = V(null), p = b(t, { once: !0, margin: d }), c = !u || p, h = {
+    hidden: {
+      [e === "left" || e === "right" ? "x" : "y"]: e === "right" || e === "down" ? -i : i,
+      opacity: 0,
+      filter: `blur(${m})`
+    },
+    visible: {
+      [e === "left" || e === "right" ? "x" : "y"]: 0,
+      opacity: 1,
+      filter: "blur(0px)"
+    }
+  }, x = s || h;
+  return /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(
+    y.div,
+    {
+      ref: t,
+      initial: "hidden",
+      animate: c ? "visible" : "hidden",
+      exit: "hidden",
+      variants: x,
+      transition: {
+        delay: 0.04 + o,
+        duration: l,
+        ease: "easeOut"
+      },
+      className: a,
+      ...f,
+      children: r
+    }
+  ) });
+}
+export {
+  R as BlurFade
+};

package/dist/es/components/blur-fade/index.d.ts

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

package/dist/es/components/button/Button.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, ButtonHTMLAttributes } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
-export type ButtonSize = 'small' | 'medium' | 'large';
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+export type ButtonSize = "small" | "medium" | "large";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
     /** Button variant that changes the visual style */
     variant?: ButtonVariant;
     /** Size of the button */

package/dist/es/components/button/Button.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import x from "clsx";
+import { cn as h } from "../../utils/utils.js";
 const w = ({
   variant: l = "primary",
   size: n = "medium",
@@ -22,7 +22,7 @@ const w = ({
     small: "px-3 py-1.5 text-sm",
     medium: "px-4 py-2 text-base",
     large: "px-6 py-3 text-lg"
-  }, b = x(
+  }, b = h(
     y,
     p[l],
     f[n],

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

@@ -1,43 +1,42 @@
 "use client";
-import { jsx as d, jsxs as g } 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,34 +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,
-  m as confetti
+  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/hyper-text/index.d.ts

@@ -19,4 +19,4 @@ interface HyperTextProps extends MotionProps {
     characterSet?: CharacterSet;
 }
 export declare function HyperText({ children, className, duration, delay, as: Component, startOnView, animateOnHover, characterSet, ...props }: HyperTextProps): import("react/jsx-runtime").JSX.Element;
-export default HyperText;
+export {};

package/dist/es/components/hyper-text/index.js

@@ -1,74 +1,76 @@
 "use client";
 import { jsx as u } from "react/jsx-runtime";
 import { cn as g } from "../../utils/utils.js";
-import { motion as v, AnimatePresence as H } from "motion/react";
-import { useState as x, useRef as I, useEffect as d } from "react";
-const N = Object.freeze(
+import { motion as x, AnimatePresence as U } from "motion/react";
+import { useState as M, useRef as h, useEffect as I } from "react";
+const j = Object.freeze(
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
-), P = (e) => Math.floor(Math.random() * e);
-function L({
-  children: e,
-  className: A,
-  duration: l = 800,
-  delay: s = 0,
-  as: M = "div",
-  startOnView: m = !1,
-  animateOnHover: h = !0,
-  characterSet: i = N,
-  ...C
+), q = (n) => Math.floor(Math.random() * n);
+function z({
+  children: n,
+  className: C,
+  duration: f = 800,
+  delay: r = 0,
+  as: E = "div",
+  startOnView: p = !1,
+  animateOnHover: F = !0,
+  characterSet: s = j,
+  ...R
 }) {
-  const E = v.create(M, {
+  const b = x.create(E, {
     forwardMotionProps: !0
-  }), [R, b] = x(
-    () => e.split("")
-  ), [a, o] = x(!1), r = I(0), c = I(null), D = () => {
-    h && !a && (r.current = 0, o(!0));
+  }), [v, w] = M(
+    () => n.split("")
+  ), [i, o] = M(!1), a = h(0), m = h(null), D = () => {
+    F && !i && (a.current = 0, o(!0));
   };
-  return d(() => {
-    if (!m) {
-      const n = setTimeout(() => {
+  return I(() => {
+    if (!p) {
+      const t = setTimeout(() => {
         o(!0);
-      }, s);
-      return () => clearTimeout(n);
+      }, r);
+      return () => clearTimeout(t);
     }
-    const t = new IntersectionObserver(
-      ([n]) => {
-        n.isIntersecting && (setTimeout(() => {
+    const e = new IntersectionObserver(
+      ([t]) => {
+        t.isIntersecting && (setTimeout(() => {
           o(!0);
-        }, s), t.disconnect());
+        }, r), e.disconnect());
       },
       { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
     );
-    return c.current && t.observe(c.current), () => t.disconnect();
-  }, [s, m]), d(() => {
-    if (!a) return;
-    const t = l / (e.length * 10), n = e.length, f = setInterval(() => {
-      r.current < n ? (b(
-        (w) => w.map(
-          (p, T) => p === " " ? p : T <= r.current ? e[T] : i[P(i.length)]
+    return m.current && e.observe(m.current), () => e.disconnect();
+  }, [r, p]), I(() => {
+    if (!i) return;
+    const e = n.length, t = performance.now();
+    let c;
+    const l = (H) => {
+      const N = H - t, T = Math.min(N / f, 1);
+      a.current = T * e, w(
+        (P) => P.map(
+          (A, d) => A === " " ? A : d <= a.current ? n[d] : s[q(s.length)]
         )
-      ), r.current = r.current + 0.1) : (o(!1), clearInterval(f));
-    }, t);
-    return () => clearInterval(f);
-  }, [e, l, a, i]), /* @__PURE__ */ u(
-    E,
+      ), T < 1 ? c = requestAnimationFrame(l) : o(!1);
+    };
+    return c = requestAnimationFrame(l), () => cancelAnimationFrame(c);
+  }, [n, f, i, s]), /* @__PURE__ */ u(
+    b,
     {
-      ref: c,
-      className: g("overflow-hidden py-2 text-4xl font-bold", A),
+      ref: m,
+      className: g("overflow-hidden py-2 text-4xl font-bold", C),
       onMouseEnter: D,
-      ...C,
-      children: /* @__PURE__ */ u(H, { children: R.map((t, n) => /* @__PURE__ */ u(
-        v.span,
+      ...R,
+      children: /* @__PURE__ */ u(U, { children: v.map((e, t) => /* @__PURE__ */ u(
+        x.span,
         {
-          className: g("font-mono", t === " " ? "w-3" : ""),
-          children: t.toUpperCase()
+          className: g("font-mono", e === " " ? "w-3" : ""),
+          children: e.toUpperCase()
         },
-        n
+        t
       )) })
     }
   );
 }
 export {
-  L as HyperText,
-  L as default
+  z as HyperText
 };

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

@@ -3,4 +3,4 @@ interface MorphingTextProps {
     texts: string[];
 }
 export declare const MorphingText: React.FC<MorphingTextProps>;
-export default MorphingText;
+export {};

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