@xiping/react-components 1.0.55 → 1.0.57

package/dist/es/components/image-viewer/ImageViewer.js

@@ -1,21 +1,20 @@
 "use client";
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { Modal as z, ModalContent as O, Spinner as S } from "@heroui/react";
 import P from "../pinch-content/PinchContent.js";
 import V from "./ImageThumbnails.js";
 import { useState as v, useCallback as b, useEffect as x } from "react";
-import X from "clsx";
-import { Download as B, X as K } from "lucide-react";
-import { AnimatePresence as W, motion as _ } from "motion/react";
-import { cn as f } from "../../utils/utils.js";
-/* empty css                */
-const C = (c) => {
-  c.target.closest(".xiping-main-content") && c.preventDefault();
-}, ne = (c) => {
+import d from "clsx";
+import { Download as X, X as B } from "lucide-react";
+import { AnimatePresence as K, motion as W } from "motion/react";
+import './ImageViewer.css';/* empty css                */
+const C = (l) => {
+  l.target.closest(".xiping-main-content") && l.preventDefault();
+}, $ = (l) => {
   const {
     isOpen: a,
     onClose: w,
-    imgSrc: d,
+    imgSrc: g,
     thumbnailImages: N,
     canDownload: y = !1,
     wrapperClassName: I,
@@ -23,13 +22,13 @@ const C = (c) => {
     downloadClassName: L,
     toolWrapperClassName: k,
     initialIndex: D = 0
-  } = c, o = Array.isArray(d) ? d : [d], A = N || o, R = Math.max(
+  } = l, o = Array.isArray(g) ? g : [g], A = N || o, R = Math.max(
     0,
     Math.min(D, o.length - 1)
-  ), [l, g] = v(R), [M, p] = v(!0), m = b(() => {
-    p(!0), w();
+  ), [c, p] = v(R), [M, u] = v(!0), m = b(() => {
+    u(!0), w();
   }, [w]), T = async () => {
-    const i = o[l];
+    const i = o[c];
     try {
       const r = await (await fetch(i)).blob(), e = window.URL.createObjectURL(r), s = document.createElement("a");
       s.href = e, s.download = i.split("/").pop() || "image", document.body.appendChild(s), s.click(), window.URL.revokeObjectURL(e), document.body.removeChild(s);
@@ -37,9 +36,9 @@ const C = (c) => {
       console.error("Error downloading image:", t);
     }
   }, U = () => {
-    p(!1);
+    u(!1);
   }, j = () => {
-    p(!1);
+    u(!1);
   };
   x(() => {
     if (a)
@@ -49,7 +48,7 @@ const C = (c) => {
         document.removeEventListener("touchmove", C);
       };
   }, [a]);
-  const u = b(() => {
+  const h = b(() => {
     "vibrate" in navigator && navigator.vibrate([50, 50, 50]);
   }, []);
   return x(() => {
@@ -59,10 +58,10 @@ const C = (c) => {
       if (!(r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.isContentEditable))
         switch (t.key) {
           case "ArrowLeft":
-            t.preventDefault(), g((e) => e > 0 ? e - 1 : (u(), e));
+            t.preventDefault(), p((e) => e > 0 ? e - 1 : (h(), e));
             break;
           case "ArrowRight":
-            t.preventDefault(), g((e) => e < o.length - 1 ? e + 1 : (u(), e));
+            t.preventDefault(), p((e) => e < o.length - 1 ? e + 1 : (h(), e));
             break;
           case "Escape":
             t.preventDefault(), m();
@@ -72,43 +71,43 @@ const C = (c) => {
     return document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
-  }, [a, o.length, m, u]), /* @__PURE__ */ n(
+  }, [a, o.length, m, h]), /* @__PURE__ */ n(
     z,
     {
       isOpen: a,
       size: "full",
       onClose: m,
       classNames: {
-        wrapper: X(I)
+        wrapper: d(I)
       },
       className: "xiping-modal-overlay",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ n(O, { className: "xiping-modal-content", children: /* @__PURE__ */ h("div", { className: "xiping-wrapper", children: [
-        /* @__PURE__ */ h("div", { className: f("xiping-tool-wrapper", k), children: [
+      children: /* @__PURE__ */ n(O, { className: "xiping-modal-content", children: /* @__PURE__ */ f("div", { className: "xiping-wrapper", children: [
+        /* @__PURE__ */ f("div", { className: d("xiping-tool-wrapper", k), children: [
           y && /* @__PURE__ */ n(
-            B,
+            X,
             {
               size: 24,
-              className: f("xiping-download-icon", L),
+              className: d("xiping-download-icon", L),
               onClick: T
             }
           ),
           /* @__PURE__ */ n(
-            K,
+            B,
             {
               size: 24,
-              className: f("xiping-close-icon", E),
+              className: d("xiping-close-icon", E),
               onClick: m
             }
           )
         ] }),
-        /* @__PURE__ */ h("div", { className: "xiping-main-content", children: [
-          /* @__PURE__ */ n(P, { canRotate: !1, className: "xiping-pinch-content", children: /* @__PURE__ */ n(W, { mode: "wait", children: /* @__PURE__ */ n(
-            _.img,
+        /* @__PURE__ */ f("div", { className: "xiping-main-content", children: [
+          /* @__PURE__ */ n(P, { canRotate: !1, className: "xiping-pinch-content", children: /* @__PURE__ */ n(K, { mode: "wait", children: /* @__PURE__ */ n(
+            W.img,
             {
               draggable: "false",
-              src: o[l],
+              src: o[c],
               alt: "",
               className: "xiping-image",
               onLoad: U,
@@ -121,7 +120,7 @@ const C = (c) => {
                 ease: "easeInOut"
               }
             },
-            l
+            c
           ) }) }),
           M && /* @__PURE__ */ n("div", { className: "xiping-loading", children: /* @__PURE__ */ n(S, { color: "white", size: "lg" }) })
         ] }),
@@ -129,8 +128,8 @@ const C = (c) => {
           V,
           {
             images: A,
-            currentIndex: l,
-            onImageSelect: g
+            currentIndex: c,
+            onImageSelect: p
           }
         )
       ] }) })
@@ -138,5 +137,5 @@ const C = (c) => {
   );
 };
 export {
-  ne as default
+  $ as default
 };

package/dist/es/components/message/Message.css

@@ -0,0 +1 @@
+.xiping-message{display:flex;align-items:flex-start;max-width:80%;margin-bottom:16px}.xiping-message.user{align-self:flex-end;flex-direction:row-reverse;margin-left:auto}.xiping-message.assistant{align-self:flex-start;margin-right:auto}.xiping-message__avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;margin:0 8px;background-color:#e0e0e0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.xiping-message__content{background-color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 1px 2px #0000001a;position:relative;max-width:100%}.xiping-message:not(:has(.xiping-message__avatar)) .xiping-message__content{margin:0}.xiping-message.user .xiping-message__content{background-color:#007bff;color:#fff}.xiping-message__text{word-break:break-word;line-height:1.5}.xiping-message__timestamp{font-size:.75rem;color:#888;margin-top:4px;text-align:right}.xiping-message.user .xiping-message__timestamp{color:#fffc}.xiping-message__thinking{display:flex;align-items:center;margin-top:8px}.xiping-message__thinking-dots{display:flex;align-items:center;margin-right:8px}.xiping-message__thinking-dots span{width:8px;height:8px;margin:0 2px;background-color:#888;border-radius:50%;display:inline-block;animation:xiping-thinking 1.4s infinite ease-in-out both}.xiping-message__thinking-dots span:nth-child(1){animation-delay:-.32s}.xiping-message__thinking-dots span:nth-child(2){animation-delay:-.16s}.xiping-message__thinking-text{font-size:.9rem;color:#888}.xiping-message.user .xiping-message__thinking-text{color:#fffc}@keyframes xiping-thinking{0%,80%,to{transform:scale(.6)}40%{transform:scale(1)}}.xiping-message__loading{display:flex;align-items:center;justify-content:center;padding:8px}.xiping-message__loading-spinner{width:24px;height:24px;border:3px solid rgba(0,123,255,.3);border-radius:50%;border-top-color:#007bff;animation:xiping-spin 1s ease-in-out infinite}@keyframes xiping-spin{to{transform:rotate(360deg)}}.xiping-message__think{margin-top:12px;padding:8px 12px;background-color:#0000000d;border-radius:8px;font-size:.9rem}.xiping-message.user .xiping-message__think{background-color:#ffffff1a}.xiping-message__think-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:500}.xiping-message__think-toggle{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.xiping-message__think-toggle:hover{background-color:#0000000d}.xiping-message__think-content{max-height:1000px;opacity:1;overflow:hidden;transition:all .3s ease-in-out}.xiping-message__think-content.hidden{max-height:0;opacity:0;margin:0;padding:0}.xiping-message__knowledge-sources{margin-top:8px;padding:8px;background-color:#00000008;border-radius:4px;font-size:.9em}.xiping-message__knowledge-sources-header{font-weight:500;margin-bottom:4px;color:#666}.xiping-message__knowledge-sources-list{list-style:none;padding:0;margin:0}.xiping-message__knowledge-source-item{margin-bottom:4px}.xiping-message__knowledge-source-item:last-child{margin-bottom:0}.xiping-message__knowledge-source-item a{color:#06c;text-decoration:none}.xiping-message__knowledge-source-item a:hover{text-decoration:underline}.xiping-message__knowledge-source-description{font-size:.9em;color:#666;margin-top:2px;margin-left:8px}.xiping-message__text-container{position:relative;display:flex;flex-direction:column;gap:4px}.xiping-message__copy-button{align-self:flex-end;padding:4px;background:none;border:none;cursor:pointer;color:#666;opacity:0;transition:all .2s ease;border-radius:4px;display:flex;align-items:center;justify-content:center}.xiping-message__text-container:hover .xiping-message__copy-button{opacity:1}.xiping-message__copy-button:hover{color:#333;background-color:#0000000d}.xiping-message__copy-tooltip{position:absolute;top:-24px;right:0;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;animation:xiping-fadeInOut 2s ease-in-out}@keyframes xiping-fadeInOut{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}

package/dist/es/components/message/Message.js

@@ -1,54 +1,55 @@
-import { jsxs as i, jsx as e, Fragment as L } from "react/jsx-runtime";
-import { useState as b } from "react";
+import { jsxs as i, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { useState as y } from "react";
 import a from "react-markdown";
-/* empty css            */
-const q = ({
-  id: y,
-  content: o,
+import o from "clsx";
+import './Message.css';/* empty css            */
+const E = ({
+  id: j,
+  content: d,
   sender: n,
-  timestamp: d,
-  isThinking: c = !1,
-  isLoading: j = !1,
-  className: V = "",
-  style: B = {},
-  showTimestamp: g = !0,
+  timestamp: c,
+  isThinking: g = !1,
+  isLoading: V = !1,
+  className: B = "",
+  style: H = {},
+  showTimestamp: m = !0,
   avatarUser: h,
-  avatarAssistant: m,
-  thinkingText: H = "思考中...",
-  customThinkingComponent: p,
-  customUserMessageComponent: _,
-  customAssistantMessageComponent: u,
-  parseContent: M = !1,
-  parsedContent: x,
+  avatarAssistant: p,
+  thinkingText: M = "思考中...",
+  customThinkingComponent: _,
+  customUserMessageComponent: u,
+  customAssistantMessageComponent: x,
+  parseContent: W = !1,
+  parsedContent: k,
   thinkContent: r,
   knowledgeSources: l
 }) => {
-  const [t, k] = b(!0), [W, v] = b("idle");
-  console.log(y, "id");
-  const N = (s) => s.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), $ = async () => {
+  const [t, v] = y(!0), [I, N] = y("idle");
+  console.log(j, "id");
+  const w = (s) => s.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), S = async () => {
     try {
-      await navigator.clipboard.writeText(o), v("copied"), setTimeout(() => v("idle"), 2e3);
+      await navigator.clipboard.writeText(d), N("copied"), setTimeout(() => N("idle"), 2e3);
     } catch (s) {
       console.error("复制失败:", s);
     }
-  }, w = () => p || /* @__PURE__ */ i("div", { className: "xiping-message__thinking", children: [
+  }, f = () => _ || /* @__PURE__ */ i("div", { className: "xiping-message__thinking", children: [
     /* @__PURE__ */ i("div", { className: "xiping-message__thinking-dots", children: [
       /* @__PURE__ */ e("span", {}),
       /* @__PURE__ */ e("span", {}),
       /* @__PURE__ */ e("span", {})
     ] }),
-    /* @__PURE__ */ e("span", { className: "xiping-message__thinking-text", children: H })
-  ] }), I = () => /* @__PURE__ */ e("div", { className: "xiping-message__loading", children: /* @__PURE__ */ e("div", { className: "xiping-message__loading-spinner" }) }), f = () => !l || l.length === 0 ? null : /* @__PURE__ */ i("div", { className: "xiping-message__knowledge-sources", children: [
+    /* @__PURE__ */ e("span", { className: "xiping-message__thinking-text", children: M })
+  ] }), F = () => /* @__PURE__ */ e("div", { className: "xiping-message__loading", children: /* @__PURE__ */ e("div", { className: "xiping-message__loading-spinner" }) }), C = () => !l || l.length === 0 ? null : /* @__PURE__ */ i("div", { className: "xiping-message__knowledge-sources", children: [
     /* @__PURE__ */ e("div", { className: "xiping-message__knowledge-sources-header", children: "知识来源：" }),
-    /* @__PURE__ */ e("ul", { className: "xiping-message__knowledge-sources-list", children: l.map((s, S) => /* @__PURE__ */ i("li", { className: "xiping-message__knowledge-source-item", children: [
+    /* @__PURE__ */ e("ul", { className: "xiping-message__knowledge-sources-list", children: l.map((s, K) => /* @__PURE__ */ i("li", { className: "xiping-message__knowledge-source-item", children: [
       s.url ? /* @__PURE__ */ e("a", { href: s.url, target: "_blank", rel: "noopener noreferrer", children: s.title }) : /* @__PURE__ */ e("span", { children: s.title }),
       s.description && /* @__PURE__ */ e("div", { className: "xiping-message__knowledge-source-description", children: s.description })
-    ] }, S)) })
-  ] }), C = () => n === "user" ? null : /* @__PURE__ */ i(
+    ] }, K)) })
+  ] }), L = () => n === "user" ? null : /* @__PURE__ */ i(
     "button",
     {
       className: "xiping-message__copy-button",
-      onClick: $,
+      onClick: S,
       "aria-label": "Copy message",
       title: "Copy message",
       children: [
@@ -84,18 +85,22 @@ const q = ({
             ]
           }
         ),
-        W === "copied" && /* @__PURE__ */ e("span", { className: "xiping-message__copy-tooltip", children: "Copied" })
+        I === "copied" && /* @__PURE__ */ e("span", { className: "xiping-message__copy-tooltip", children: "Copied" })
       ]
     }
   );
-  return n === "user" && _ ? _ : n === "assistant" && u ? u : /* @__PURE__ */ i(
+  return n === "user" && u ? u : n === "assistant" && x ? x : /* @__PURE__ */ i(
     "div",
     {
-      className: `xiping-message ${n === "user" ? "user" : "assistant"} ${V}`,
-      style: B,
+      className: o(
+        "xiping-message",
+        n === "user" ? "user" : "assistant",
+        B
+      ),
+      style: H,
       children: [
-        n === "user" && h || n === "assistant" && m ? /* @__PURE__ */ e("div", { className: "xiping-message__avatar", children: n === "user" ? h : m }) : null,
-        /* @__PURE__ */ e("div", { className: "xiping-message__content", children: j ? I() : M && n === "assistant" ? /* @__PURE__ */ i(L, { children: [
+        n === "user" && h || n === "assistant" && p ? /* @__PURE__ */ e("div", { className: "xiping-message__avatar", children: n === "user" ? h : p }) : null,
+        /* @__PURE__ */ e("div", { className: "xiping-message__content", children: V ? F() : W && n === "assistant" ? /* @__PURE__ */ i(b, { children: [
           r && /* @__PURE__ */ i("div", { className: "xiping-message__think", children: [
             /* @__PURE__ */ i("div", { className: "xiping-message__think-header", children: [
               "思考过程：",
@@ -103,7 +108,7 @@ const q = ({
                 "button",
                 {
                   className: "xiping-message__think-toggle",
-                  onClick: () => k(!t),
+                  onClick: () => v(!t),
                   "aria-label": t ? "隐藏思考过程" : "显示思考过程",
                   children: /* @__PURE__ */ e(
                     "svg",
@@ -135,19 +140,22 @@ const q = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: `xiping-message__think-content ${t ? "visible" : "hidden"}`,
+                className: o(
+                  "xiping-message__think-content",
+                  t ? "visible" : "hidden"
+                ),
                 children: /* @__PURE__ */ e(a, { children: r })
               }
             )
           ] }),
-          c && w(),
-          x && /* @__PURE__ */ i("div", { className: "xiping-message__text-container", children: [
-            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: x }) }),
-            C()
+          g && f(),
+          k && /* @__PURE__ */ i("div", { className: "xiping-message__text-container", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: k }) }),
+            L()
           ] }),
-          f(),
-          g && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: N(d) })
-        ] }) : /* @__PURE__ */ i(L, { children: [
+          C(),
+          m && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: w(c) })
+        ] }) : /* @__PURE__ */ i(b, { children: [
           r && /* @__PURE__ */ i("div", { className: "xiping-message__think", children: [
             /* @__PURE__ */ i("div", { className: "xiping-message__think-header", children: [
               "思考过程：",
@@ -155,7 +163,7 @@ const q = ({
                 "button",
                 {
                   className: "xiping-message__think-toggle",
-                  onClick: () => k(!t),
+                  onClick: () => v(!t),
                   "aria-label": t ? "隐藏思考过程" : "显示思考过程",
                   children: /* @__PURE__ */ e(
                     "svg",
@@ -187,24 +195,27 @@ const q = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: `xiping-message__think-content ${t ? "visible" : "hidden"}`,
+                className: o(
+                  "xiping-message__think-content",
+                  t ? "visible" : "hidden"
+                ),
                 children: /* @__PURE__ */ e(a, { children: r })
               }
             )
           ] }),
           /* @__PURE__ */ i("div", { className: "xiping-message__text-container", children: [
-            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: o }) }),
-            C()
+            /* @__PURE__ */ e("div", { className: "xiping-message__text", children: /* @__PURE__ */ e(a, { children: d }) }),
+            L()
           ] }),
-          c && w(),
-          f(),
-          g && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: N(d) })
+          g && f(),
+          C(),
+          m && /* @__PURE__ */ e("div", { className: "xiping-message__timestamp", children: w(c) })
         ] }) })
       ]
     }
   );
 };
 export {
-  q as Message,
-  q as default
+  E as Message,
+  E as default
 };

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

@@ -0,0 +1 @@
+.xiping-pointer{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%)}.xiping-pointer-icon{transform:rotate(-70deg);stroke:#fff;color:#000}

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

@@ -1,42 +1,43 @@
 "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({
+import { jsxs as h, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { useMotionValue as m, AnimatePresence as E, motion as L } from "motion/react";
+import { useState as w, useRef as y, useEffect as g } from "react";
+import M from "clsx";
+import './Pointer.css';/* empty css            */
+function P({
   className: u,
-  style: d,
-  children: v,
-  ...f
+  style: v,
+  children: d,
+  ...p
 }) {
-  const n = m(0), o = m(0), [p, s] = y(!1), r = g(null);
-  return M(() => {
+  const n = m(0), o = m(0), [f, s] = w(!1), r = y(null);
+  return g(() => {
     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(!0);
+        }, a = () => {
           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);
+        return e.addEventListener("mousemove", i), e.addEventListener("mouseenter", c), e.addEventListener("mouseleave", a), () => {
+          e.style.cursor = "", e.removeEventListener("mousemove", i), e.removeEventListener("mouseenter", c), e.removeEventListener("mouseleave", a);
         };
       }
     }
-  }, [n, o]), /* @__PURE__ */ h(E, { children: [
+  }, [n, o]), /* @__PURE__ */ h(x, { children: [
     /* @__PURE__ */ t("div", { ref: r }),
-    /* @__PURE__ */ t(x, { children: p && /* @__PURE__ */ t(
+    /* @__PURE__ */ t(E, { children: f && /* @__PURE__ */ t(
       L.div,
       {
-        className: "transform-[translate(-50%,-50%)] pointer-events-none fixed z-50",
+        className: M("xiping-pointer", u),
         style: {
           top: o,
           left: n,
-          ...d
+          ...v
         },
         initial: {
           scale: 0,
@@ -50,8 +51,8 @@ function C({
           scale: 0,
           opacity: 0
         },
-        ...f,
-        children: v || /* @__PURE__ */ t(
+        ...p,
+        children: d || /* @__PURE__ */ t(
           "svg",
           {
             stroke: "currentColor",
@@ -61,10 +62,7 @@ function C({
             height: "24",
             width: "24",
             xmlns: "http://www.w3.org/2000/svg",
-            className: w(
-              "rotate-[-70deg] stroke-white text-black",
-              u
-            ),
+            className: "xiping-pointer-icon",
             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" })
           }
         )
@@ -73,5 +71,5 @@ function C({
   ] });
 }
 export {
-  C as Pointer
+  P as Pointer
 };

package/dist/es/components/scratch-to-reveal/ScratchToReveal.css

@@ -0,0 +1 @@
+.xiping-scratch-to-reveal{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.xiping-scratch-canvas{position:absolute;left:0;top:0}

package/dist/es/components/scratch-to-reveal/ScratchToReveal.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsxs as P, jsx as R } from "react/jsx-runtime";
-import { cn as z } from "../../utils/utils.js";
-import { useAnimation as b, motion as A } from "motion/react";
-import { useRef as j, useState as p, useEffect as x } from "react";
-const B = ({
-  width: l,
-  height: m,
+import { useAnimation as z, motion as A } from "motion/react";
+import { useRef as b, useState as I, useEffect as x } from "react";
+import j from "clsx";
+import './ScratchToReveal.css';/* empty css                    */
+const T = ({
+  width: m,
+  height: l,
   minScratchPercentage: E = 50,
   onComplete: h,
   children: L,
   className: M,
   gradientColors: a = ["#A97CF8", "#F38CB8", "#FDCC92"]
 }) => {
-  const i = j(null), [d, r] = p(!1), [S, C] = p(!1), v = b();
+  const i = b(null), [d, r] = I(!1), [S, C] = I(!1), v = z();
   x(() => {
     const t = i.current, e = t?.getContext("2d");
     if (t && e) {
@@ -44,8 +45,8 @@ const B = ({
   const D = () => r(!0), w = () => r(!0), f = (t, e) => {
     const o = i.current, n = o?.getContext("2d");
     if (o && n) {
-      const c = o.getBoundingClientRect(), s = t - c.left + 16, I = e - c.top + 16;
-      n.globalCompositeOperation = "destination-out", n.beginPath(), n.arc(s, I, 30, 0, Math.PI * 2), n.fill();
+      const c = o.getBoundingClientRect(), s = t - c.left + 16, p = e - c.top + 16;
+      n.globalCompositeOperation = "destination-out", n.beginPath(), n.arc(s, p, 30, 0, Math.PI * 2), n.fill();
     }
   }, y = async () => {
     await v.start({
@@ -67,10 +68,10 @@ const B = ({
   return /* @__PURE__ */ P(
     A.div,
     {
-      className: z("relative select-none", M),
+      className: j("xiping-scratch-to-reveal", M),
       style: {
-        width: l,
-        height: m,
+        width: m,
+        height: l,
         cursor: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"
       },
       animate: v,
@@ -79,9 +80,9 @@ const B = ({
           "canvas",
           {
             ref: i,
-            width: l,
-            height: m,
-            className: "absolute left-0 top-0",
+            width: m,
+            height: l,
+            className: "xiping-scratch-canvas",
             onMouseDown: D,
             onTouchStart: w
           }
@@ -92,5 +93,5 @@ const B = ({
   );
 };
 export {
-  B as ScratchToReveal
+  T as ScratchToReveal
 };

package/dist/es/components/shimmer-button/ShimmerButton.css

@@ -0,0 +1 @@
+.xiping-shimmer-button{position:relative;z-index:0;display:flex;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border:1px solid rgba(255,255,255,.1);padding:.75rem 1.5rem;color:#fff;background:var(--bg);border-radius:var(--radius);transform:translateZ(0);transition:transform .3s ease-in-out}.xiping-shimmer-button:active{transform:translateY(1px) translateZ(0)}@media(prefers-color-scheme:dark){.xiping-shimmer-button{color:#000}}.xiping-shimmer-button-spark-container{position:absolute;z-index:-30;inset:0;overflow:visible;filter:blur(2px);container-type:size}.xiping-shimmer-button-spark{position:absolute;inset:0;height:100cqh;aspect-ratio:1;border-radius:0;-webkit-mask:none;mask:none;animation:xiping-shimmer-slide var(--speed) ease-in-out infinite alternate}.xiping-shimmer-button-spark-before{position:absolute;inset:-100%;width:auto;transform:rotate(0);background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:xiping-spin-around calc(var(--speed) * 2) infinite linear}.xiping-shimmer-button-highlight{position:absolute;inset:0;width:100%;height:100%;border-radius:1rem;box-shadow:inset 0 -8px 10px #ffffff1f;transform:translateZ(0);transition:all .3s ease-in-out}.xiping-shimmer-button:hover .xiping-shimmer-button-highlight{box-shadow:inset 0 -6px 10px #ffffff40}.xiping-shimmer-button:active .xiping-shimmer-button-highlight{box-shadow:inset 0 -10px 10px #ffffff40}.xiping-shimmer-button-backdrop{position:absolute;z-index:-20;background:var(--bg);border-radius:var(--radius);inset:var(--cut)}@keyframes xiping-shimmer-slide{to{transform:translate(calc(100cqw - 100%))}}@keyframes xiping-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(360deg)}}

package/dist/es/components/shimmer-button/ShimmerButton.js

@@ -1,13 +1,13 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import d from "react";
-import { cn as h } from "../../utils/utils.js";
-/* empty css                  */
+import h from "clsx";
+import './ShimmerButton.css';/* empty css                  */
 const l = d.forwardRef(
   ({
     shimmerColor: r = "#ffffff",
-    shimmerSize: e = "0.05em",
-    shimmerDuration: m = "3s",
-    borderRadius: s = "100px",
+    shimmerSize: s = "0.05em",
+    shimmerDuration: e = "3s",
+    borderRadius: m = "100px",
     background: t = "rgba(0, 0, 0, 1)",
     className: a,
     children: o,
@@ -18,9 +18,9 @@ const l = d.forwardRef(
       style: {
         "--spread": "90deg",
         "--shimmer-color": r,
-        "--radius": s,
-        "--speed": m,
-        "--cut": e,
+        "--radius": m,
+        "--speed": e,
+        "--cut": s,
         "--bg": t
       },
       className: h("xiping-shimmer-button", a),

package/dist/es/components/shiny-button/ShinyButton.css

@@ -0,0 +1 @@
+.xiping-shiny-button{position:relative;cursor:pointer;border-radius:.5rem;padding:.5rem 1.5rem;font-weight:500;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid;transition:box-shadow .3s ease-in-out}.xiping-shiny-button:hover{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}@media(prefers-color-scheme:dark){.xiping-shiny-button{background:radial-gradient(circle at 50% 0%,var(--primary) 10%,transparent 60%)}.xiping-shiny-button:hover{box-shadow:0 0 20px var(--primary) / 10%}}.xiping-shiny-button-text{position:relative;display:block;width:100%;height:100%;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:#000000a6}@media(prefers-color-scheme:dark){.xiping-shiny-button-text{font-weight:300;color:#ffffffe5}}.xiping-shiny-button-border{position:absolute;inset:0;z-index:10;display:block;border-radius:inherit;padding:1px}

package/dist/es/components/shiny-button/ShinyButton.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { cn as s } from "../../utils/utils.js";
-import { motion as o } from "motion/react";
-import p from "react";
-/* empty css                */
-const c = {
+import { motion as s } from "motion/react";
+import o from "react";
+import l from "clsx";
+import './ShinyButton.css';/* empty css                */
+const p = {
   initial: { "--x": "100%", scale: 0.8 },
   animate: { "--x": "-100%", scale: 1 },
   whileTap: { scale: 0.95 },
@@ -23,13 +23,13 @@ const c = {
       mass: 0.5
     }
   }
-}, l = p.forwardRef(({ children: r, className: e, ...n }, i) => /* @__PURE__ */ t(
-  o.button,
+}, c = o.forwardRef(({ children: r, className: e, ...i }, n) => /* @__PURE__ */ t(
+  s.button,
   {
-    ref: i,
-    className: s("xiping-shiny-button", e),
-    ...c,
-    ...n,
+    ref: n,
+    className: l("xiping-shiny-button", e),
+    ...p,
+    ...i,
     children: [
       /* @__PURE__ */ a(
         "span",
@@ -55,7 +55,7 @@ const c = {
     ]
   }
 ));
-l.displayName = "ShinyButton";
+c.displayName = "ShinyButton";
 export {
-  l as ShinyButton
+  c as ShinyButton
 };

package/dist/es/components/shiny-text/ShinyText.css

@@ -0,0 +1 @@
+.shiny-text{display:inline-block}