@xiping/react-components 1.0.12 → 1.0.14

package/dist/cjs/components/image-viewer/ImageViewer.d.ts

@@ -3,6 +3,7 @@ interface ImageViewerProps {
     imgSrc: string | string[];
     onClose: () => void;
     canDownload?: boolean;
+    wrapperClassName?: string;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("@heroui/modal"),k=require("@heroui/spinner"),p=require("react-icons/io5"),S=require("../pinch-content/PinchContent.js"),z=require("@radix-ui/react-scroll-area"),f=require("react");function L(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const i=L(z),x=t=>{t.preventDefault()},O=t=>{const{isOpen:o,onClose:n,imgSrc:a,canDownload:g=!1}=t,c=Array.isArray(a)?a:[a],[d,j]=f.useState(0),[w,u]=f.useState(!0),h=()=>{u(!0),n()},v=async()=>{const r=c[d];try{const C=await(await fetch(r)).blob(),b=window.URL.createObjectURL(C),l=document.createElement("a");l.href=b,l.download=r.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(s){console.error("Error downloading image:",s)}},N=()=>{u(!1)},y=()=>{u(!1)};return f.useEffect(()=>{if(o)return document.addEventListener("touchmove",x,{passive:!1}),()=>{document.removeEventListener("touchmove",x)}},[o]),e.jsx(m.Modal,{isOpen:o,size:"full",onClose:h,className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(m.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[g&&e.jsx(p.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:v}),e.jsx(p.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:h})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(S.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:N,onError:y})}),w&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(k.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",children:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((r,s)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${s===d?"border-white":"border-transparent"}`,onClick:()=>j(s),children:e.jsx("img",{src:r,alt:"",className:"w-full h-full object-contain",draggable:"false"})},r))})}),e.jsx(i.Scrollbar,{className:"flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",orientation:"horizontal",children:e.jsx(i.Thumb,{className:"flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"})})]})})]})})})};exports.default=O;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("@heroui/modal"),S=require("@heroui/spinner"),p=require("react-icons/io5"),z=require("../pinch-content/PinchContent.js"),L=require("@radix-ui/react-scroll-area"),f=require("react"),O=require("clsx");function q(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(o,s,a.get?a:{enumerable:!0,get:()=>t[s]})}}return o.default=t,Object.freeze(o)}const i=q(L),x=t=>{t.preventDefault()},I=t=>{const{isOpen:o,onClose:s,imgSrc:a,canDownload:g=!1,wrapperClassName:j}=t,c=Array.isArray(a)?a:[a],[d,w]=f.useState(0),[v,u]=f.useState(!0),h=()=>{u(!0),s()},N=async()=>{const r=c[d];try{const k=await(await fetch(r)).blob(),b=window.URL.createObjectURL(k),l=document.createElement("a");l.href=b,l.download=r.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(n){console.error("Error downloading image:",n)}},y=()=>{u(!1)},C=()=>{u(!1)};return f.useEffect(()=>{if(o)return document.addEventListener("touchmove",x,{passive:!1}),()=>{document.removeEventListener("touchmove",x)}},[o]),e.jsx(m.Modal,{isOpen:o,size:"full",onClose:h,classNames:{wrapper:O("",j)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(m.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[g&&e.jsx(p.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:N}),e.jsx(p.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:h})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(z.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:y,onError:C})}),v&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(S.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",children:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((r,n)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${n===d?"border-white":"border-transparent"}`,onClick:()=>w(n),children:e.jsx("img",{src:r,alt:"",className:"w-full h-full object-contain",draggable:"false"})},r))})}),e.jsx(i.Scrollbar,{className:"flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",orientation:"horizontal",children:e.jsx(i.Thumb,{className:"flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"})})]})})]})})})};exports.default=I;

package/dist/cjs/components/pinch-content/PinchContent.d.ts

@@ -1,15 +1,18 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 export interface PinchContentProps {
     className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;
     canRotate?: boolean;
+    pinchWithoutMove?: boolean;
     scaleBounds?: {
         min: number;
         max: number;
     };
     wheelZoomFactor?: number;
+    rubberband?: boolean;
+    style?: CSSProperties;
 }
 declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
 export default PinchContent;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),v=require("@react-spring/web"),i=require("@use-gesture/react"),B=require("react"),x=require("ahooks"),C=require("clsx"),G=i.createUseGesture([i.dragAction,i.pinchAction,i.wheelAction]),u=l=>l.preventDefault(),N=l=>{const{className:m,children:y,canPinch:h=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:d={min:.3,max:10},wheelZoomFactor:S=.001}=l,n=B.useRef(null);x.useMount(()=>{var t,e,r;(t=n.current)==null||t.addEventListener("gesturestart",u),(e=n.current)==null||e.addEventListener("gesturechange",u),(r=n.current)==null||r.addEventListener("gestureend",u)}),x.useUnmount(()=>{var t,e,r;(t=n.current)==null||t.removeEventListener("gesturestart",u),(e=n.current)==null||e.removeEventListener("gesturechange",u),(r=n.current)==null||r.removeEventListener("gestureend",u)});const[s,g]=v.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return G({onWheel:({event:t,delta:[,e]})=>{if(!h)return;const c=s.scale.get()*(1-e*S),o=Math.min(Math.max(c,d.min),d.max);g.start({scale:o})},onDrag:({pinching:t,cancel:e,offset:[r,c],...o})=>{if(!p||t)return e();g.start({x:r,y:c})},onPinch:({origin:[t,e],first:r,movement:[c],offset:[o,q],memo:a,cancel:w})=>{if(!h)return w();if(r){const{width:M,height:R,x:P,y:Z}=n.current.getBoundingClientRect(),j=t-(P+M/2),A=e-(Z+R/2);a=[s.x.get(),s.y.get(),j,A]}const E=a[0]-(c-1)*a[2],L=a[1]-(c-1)*a[3],f={scale:o,rotateZ:0,x:E,y:L};return b&&(f.rotateZ=q),g.start(f),a}},{target:n,drag:{from:()=>[s.x.get(),s.y.get()]},pinch:{scaleBounds:d,rubberband:!0},wheel:{enabled:!0}}),D.jsx(v.animated.div,{className:C("select-none",m),ref:n,style:s,children:y})};exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react/jsx-runtime"),f=require("@react-spring/web"),l=require("@use-gesture/react"),G=require("react"),v=require("ahooks"),N=require("clsx"),U=l.createUseGesture([l.dragAction,l.pinchAction,l.wheelAction]),u=o=>o.preventDefault(),W=o=>{const{className:x,children:y,pinchWithoutMove:m=!1,canPinch:h=!0,canDrag:b=!0,canRotate:p=!0,scaleBounds:g={min:.3,max:10},wheelZoomFactor:S=.001,rubberband:q=!0}=o,r=G.useRef(null);v.useMount(()=>{var t,e,n;(t=r.current)==null||t.addEventListener("gesturestart",u),(e=r.current)==null||e.addEventListener("gesturechange",u),(n=r.current)==null||n.addEventListener("gestureend",u)}),v.useUnmount(()=>{var t,e,n;(t=r.current)==null||t.removeEventListener("gesturestart",u),(e=r.current)==null||e.removeEventListener("gesturechange",u),(n=r.current)==null||n.removeEventListener("gestureend",u)});const[s,d]=f.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return U({onWheel:({event:t,delta:[,e]})=>{if(!h)return;const c=s.scale.get()*(1-e*S),i=Math.min(Math.max(c,g.min),g.max);d.start({scale:i})},onDrag:({pinching:t,cancel:e,offset:[n,c],...i})=>{if(!b||t)return e();d.start({x:n,y:c})},onPinch:({origin:[t,e],first:n,movement:[c],offset:[i,w],memo:a,cancel:E})=>{if(!h)return E();if(n){const{width:P,height:Z,x:j,y:A}=r.current.getBoundingClientRect(),D=t-(j+P/2),B=e-(A+Z/2);a=[s.x.get(),s.y.get(),D,B]}const L=a[0]-(c-1)*a[2],M=a[1]-(c-1)*a[3],R={scale:i,rotateZ:p?w:s.rotateZ.get(),...m?{x:s.x.get(),y:s.y.get()}:{x:L,y:M}};return d.start(R),a}},{target:r,drag:{from:()=>[s.x.get(),s.y.get()]},pinch:{scaleBounds:g,rubberband:q},wheel:{enabled:!0}}),C.jsx(f.animated.div,{className:N("select-none",x),ref:r,style:{...o.style,...s},children:y})};exports.default=W;

package/dist/cjs/components/qr-code/index.d.ts

@@ -44,71 +44,58 @@ type ImageSettings = {
      * the attribute behaves differently than the empty string.
      */
     crossOrigin?: CrossOrigin;
+    /**
+     * 图片渲染质量
+     * @defaultValue 'high'
+     */
+    imageQuality?: 'low' | 'medium' | 'high';
 };
 export interface QRCodeProps {
     /**
-     * The value to encode into the QR Code. An array of strings can be passed in
-     * to represent multiple segments to further optimize the QR Code.
+     * 要编码到二维码中的值
      */
-    value: string | string[];
+    value: string;
     /**
-     * The size, in pixels, to render the QR Code.
+     * 二维码的渲染尺寸（像素）
      * @defaultValue 128
      */
     size?: number;
     /**
-     * The Error Correction Level to use.
-     * @see https://www.qrcode.com/en/about/error_correction.html
-     * @defaultValue L
+     * 错误纠正级别
+     * @defaultValue M
      */
     level?: ErrorCorrectionLevel;
     /**
-     * The background color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的背景颜色
      * @defaultValue #FFFFFF
      */
     bgColor?: string;
     /**
-     * The foregtound color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的前景颜色
      * @defaultValue #000000
      */
     fgColor?: string;
     /**
-     * Whether or not a margin of 4 modules should be rendered as a part of the
-     * QR Code.
-     * @deprecated Use `marginSize` instead.
-     * @defaultValue false
-     */
-    includeMargin?: boolean;
-    /**
-     * The number of _modules_ to use for margin. The QR Code specification
-     * requires `4`, however you can specify any number. Values will be turned to
-     * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
-     * @defaultValue 0
+     * 二维码边距的模块数量
+     * @defaultValue 4
      */
     marginSize?: number;
     /**
-     * The title to assign to the QR Code. Used for accessibility reasons.
+     * 二维码的标题（用于无障碍访问）
      */
     title?: string;
     /**
-     * The minimum version used when encoding the QR Code. Valid values are 1-40
-     * with higher values resulting in more complex QR Codes. The optimal
-     * (lowest) version is determined for the `value` provided, using `minVersion`
-     * as the lower bound.
+     * 编码二维码时使用的最小版本（1-40）
      * @defaultValue 1
      */
     minVersion?: number;
     /**
-     * If enabled, the Error Correction Level of the result may be higher than
-     * the specified Error Correction Level option if it can be done without
-     * increasing the version.
+     * 是否允许在可能的情况下提高错误纠正级别
      * @defaultValue true
      */
     boostLevel?: boolean;
     /**
-     * The settings for the embedded image.
+     * 嵌入图片的设置
      */
     imageSettings?: ImageSettings;
 }

package/dist/es/components/image-viewer/ImageViewer.d.ts

@@ -3,6 +3,7 @@ interface ImageViewerProps {
     imgSrc: string | string[];
     onClose: () => void;
     canDownload?: boolean;
+    wrapperClassName?: string;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

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

@@ -1,30 +1,37 @@
 "use client";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Modal as k, ModalContent as L } from "@heroui/modal";
-import { Spinner as z } from "@heroui/spinner";
-import { IoDownloadOutline as j, IoCloseSharp as I } from "react-icons/io5";
-import E from "../pinch-content/PinchContent.js";
+import { Modal as L, ModalContent as z } from "@heroui/modal";
+import { Spinner as j } from "@heroui/spinner";
+import { IoDownloadOutline as I, IoCloseSharp as E } from "react-icons/io5";
+import R from "../pinch-content/PinchContent.js";
 import * as n from "@radix-ui/react-scroll-area";
-import { useState as p, useEffect as R } from "react";
+import { useState as p, useEffect as S } from "react";
+import D from "clsx";
 const u = (s) => {
   s.preventDefault();
-}, V = (s) => {
-  const { isOpen: i, onClose: b, imgSrc: c, canDownload: g = !1 } = s, r = Array.isArray(c) ? c : [c], [d, w] = p(0), [v, f] = p(!0), m = () => {
-    f(!0), b();
-  }, x = async () => {
-    const o = r[d];
+}, G = (s) => {
+  const {
+    isOpen: i,
+    onClose: b,
+    imgSrc: c,
+    canDownload: g = !1,
+    wrapperClassName: w
+  } = s, r = Array.isArray(c) ? c : [c], [f, v] = p(0), [x, d] = p(!0), m = () => {
+    d(!0), b();
+  }, N = async () => {
+    const o = r[f];
     try {
-      const y = await (await fetch(o)).blob(), h = window.URL.createObjectURL(y), a = document.createElement("a");
+      const k = await (await fetch(o)).blob(), h = window.URL.createObjectURL(k), a = document.createElement("a");
       a.href = h, a.download = o.split("/").pop() || "image", document.body.appendChild(a), a.click(), window.URL.revokeObjectURL(h), document.body.removeChild(a);
     } catch (t) {
       console.error("Error downloading image:", t);
     }
-  }, N = () => {
-    f(!1);
   }, C = () => {
-    f(!1);
+    d(!1);
+  }, y = () => {
+    d(!1);
   };
-  return R(() => {
+  return S(() => {
     if (i)
       return document.addEventListener("touchmove", u, {
         passive: !1
@@ -32,26 +39,29 @@ const u = (s) => {
         document.removeEventListener("touchmove", u);
       };
   }, [i]), /* @__PURE__ */ e(
-    k,
+    L,
     {
       isOpen: i,
       size: "full",
       onClose: m,
+      classNames: {
+        wrapper: D("", w)
+      },
       className: "bg-black bg-opacity-70",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(L, { className: "overflow-hidden", children: /* @__PURE__ */ l("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
+      children: /* @__PURE__ */ e(z, { className: "overflow-hidden", children: /* @__PURE__ */ l("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
         /* @__PURE__ */ l("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
           g && /* @__PURE__ */ e(
-            j,
+            I,
             {
               size: 24,
               className: "text-white cursor-pointer",
-              onClick: x
+              onClick: N
             }
           ),
           /* @__PURE__ */ e(
-            I,
+            E,
             {
               size: 24,
               className: "text-white cursor-pointer",
@@ -60,25 +70,25 @@ const u = (s) => {
           )
         ] }),
         /* @__PURE__ */ l("div", { className: "flex-1 min-h-0 relative flex items-center justify-center", children: [
-          /* @__PURE__ */ e(E, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(R, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
             "img",
             {
               draggable: "false",
-              src: r[d],
+              src: r[f],
               alt: "",
               className: "w-screen h-full object-contain pointer-events-none",
-              onLoad: N,
-              onError: C
+              onLoad: C,
+              onError: y
             }
           ) }),
-          v && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(z, { color: "white", size: "lg" }) })
+          x && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(j, { color: "white", size: "lg" }) })
         ] }),
         r.length > 1 && /* @__PURE__ */ e("div", { className: "h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0", children: /* @__PURE__ */ l(n.Root, { className: "h-24 w-screen", type: "auto", children: [
           /* @__PURE__ */ e(n.Viewport, { className: "pppp h-full w-full", children: /* @__PURE__ */ e("div", { className: "flex gap-2 p-2 h-24", children: r.map((o, t) => /* @__PURE__ */ e(
             "div",
             {
-              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${t === d ? "border-white" : "border-transparent"}`,
-              onClick: () => w(t),
+              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${t === f ? "border-white" : "border-transparent"}`,
+              onClick: () => v(t),
               children: /* @__PURE__ */ e(
                 "img",
                 {
@@ -105,5 +115,5 @@ const u = (s) => {
   );
 };
 export {
-  V as default
+  G as default
 };

package/dist/es/components/pinch-content/PinchContent.d.ts

@@ -1,15 +1,18 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 export interface PinchContentProps {
     className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;
     canRotate?: boolean;
+    pinchWithoutMove?: boolean;
     scaleBounds?: {
         min: number;
         max: number;
     };
     wheelZoomFactor?: number;
+    rubberband?: boolean;
+    style?: CSSProperties;
 }
 declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
 export default PinchContent;

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

@@ -1,80 +1,88 @@
-import { jsx as P } from "react/jsx-runtime";
-import { useSpring as R, animated as B } from "@react-spring/web";
-import { createUseGesture as C, dragAction as G, pinchAction as N, wheelAction as U } from "@use-gesture/react";
-import { useRef as j } from "react";
-import { useMount as F, useUnmount as W } from "ahooks";
-import k from "clsx";
-const q = C([G, N, U]), o = (i) => i.preventDefault(), Q = (i) => {
+import { jsx as B } from "react/jsx-runtime";
+import { useSpring as C, animated as G } from "@react-spring/web";
+import { createUseGesture as N, dragAction as U, pinchAction as W, wheelAction as j } from "@use-gesture/react";
+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 {
-    className: m,
+    className: f,
     children: h,
-    canPinch: g = !0,
-    canDrag: p = !0,
+    pinchWithoutMove: m = !1,
+    canPinch: d = !0,
+    canDrag: x = !0,
     canRotate: v = !0,
     scaleBounds: l = { min: 0.3, max: 10 },
-    wheelZoomFactor: x = 1e-3
-  } = i, n = j(null);
-  F(() => {
+    wheelZoomFactor: p = 1e-3,
+    rubberband: y = !0
+  } = u, n = 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);
-  }), W(() => {
+  }), 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);
   });
-  const [s, d] = R(() => ({
+  const [s, g] = C(() => ({
     x: 0,
     y: 0,
     scale: 1,
     rotateZ: 0
   }));
-  return q(
+  return H(
     {
       onWheel: ({ event: t, delta: [, e] }) => {
-        if (!g) return;
-        const a = s.scale.get() * (1 - e * x), u = Math.min(
+        if (!d) return;
+        const a = s.scale.get() * (1 - e * p), i = Math.min(
           Math.max(a, l.min),
           l.max
         );
-        d.start({ scale: u });
+        g.start({ scale: i });
       },
-      onDrag: ({ pinching: t, cancel: e, offset: [r, a], ...u }) => {
-        if (!p || t) return e();
-        d.start({ x: r, y: a });
+      onDrag: ({ pinching: t, cancel: e, offset: [r, a], ...i }) => {
+        if (!x || t) return e();
+        g.start({ x: r, y: a });
       },
       onPinch: ({
         origin: [t, e],
         first: r,
         movement: [a],
-        offset: [u, y],
+        offset: [i, E],
         memo: c,
-        cancel: E
+        cancel: L
       }) => {
-        if (!g) return E();
+        if (!d) return L();
         if (r) {
-          const { width: S, height: b, x: Z, y: A } = n.current.getBoundingClientRect(), D = t - (Z + S / 2), M = e - (A + b / 2);
-          c = [s.x.get(), s.y.get(), D, M];
+          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];
         }
-        const L = c[0] - (a - 1) * c[2], w = c[1] - (a - 1) * c[3], f = { scale: u, rotateZ: 0, x: L, y: w };
-        return v && (f.rotateZ = y), d.start(f), c;
+        const w = c[0] - (a - 1) * c[2], S = c[1] - (a - 1) * c[3], b = {
+          scale: i,
+          rotateZ: v ? E : s.rotateZ.get(),
+          ...m ? { x: s.x.get(), y: s.y.get() } : { x: w, y: S }
+        };
+        return g.start(b), c;
       }
     },
     {
       target: n,
       drag: { from: () => [s.x.get(), s.y.get()] },
-      pinch: { scaleBounds: l, rubberband: !0 },
+      pinch: { scaleBounds: l, rubberband: y },
       wheel: { enabled: !0 }
     }
-  ), // <div className="flex items-center justify-center h-full w-full">
-  /* @__PURE__ */ P(
-    B.div,
+  ), /* @__PURE__ */ B(
+    G.div,
     {
-      className: k("select-none", m),
+      className: z("select-none", f),
       ref: n,
-      style: s,
+      style: {
+        ...u.style,
+        ...s
+      },
       children: h
     }
   );
 };
 export {
-  Q as default
+  V as default
 };

package/dist/es/components/qr-code/index.d.ts

@@ -44,71 +44,58 @@ type ImageSettings = {
      * the attribute behaves differently than the empty string.
      */
     crossOrigin?: CrossOrigin;
+    /**
+     * 图片渲染质量
+     * @defaultValue 'high'
+     */
+    imageQuality?: 'low' | 'medium' | 'high';
 };
 export interface QRCodeProps {
     /**
-     * The value to encode into the QR Code. An array of strings can be passed in
-     * to represent multiple segments to further optimize the QR Code.
+     * 要编码到二维码中的值
      */
-    value: string | string[];
+    value: string;
     /**
-     * The size, in pixels, to render the QR Code.
+     * 二维码的渲染尺寸（像素）
      * @defaultValue 128
      */
     size?: number;
     /**
-     * The Error Correction Level to use.
-     * @see https://www.qrcode.com/en/about/error_correction.html
-     * @defaultValue L
+     * 错误纠正级别
+     * @defaultValue M
      */
     level?: ErrorCorrectionLevel;
     /**
-     * The background color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的背景颜色
      * @defaultValue #FFFFFF
      */
     bgColor?: string;
     /**
-     * The foregtound color used to render the QR Code.
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     * 二维码的前景颜色
      * @defaultValue #000000
      */
     fgColor?: string;
     /**
-     * Whether or not a margin of 4 modules should be rendered as a part of the
-     * QR Code.
-     * @deprecated Use `marginSize` instead.
-     * @defaultValue false
-     */
-    includeMargin?: boolean;
-    /**
-     * The number of _modules_ to use for margin. The QR Code specification
-     * requires `4`, however you can specify any number. Values will be turned to
-     * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
-     * @defaultValue 0
+     * 二维码边距的模块数量
+     * @defaultValue 4
      */
     marginSize?: number;
     /**
-     * The title to assign to the QR Code. Used for accessibility reasons.
+     * 二维码的标题（用于无障碍访问）
      */
     title?: string;
     /**
-     * The minimum version used when encoding the QR Code. Valid values are 1-40
-     * with higher values resulting in more complex QR Codes. The optimal
-     * (lowest) version is determined for the `value` provided, using `minVersion`
-     * as the lower bound.
+     * 编码二维码时使用的最小版本（1-40）
      * @defaultValue 1
      */
     minVersion?: number;
     /**
-     * If enabled, the Error Correction Level of the result may be higher than
-     * the specified Error Correction Level option if it can be done without
-     * increasing the version.
+     * 是否允许在可能的情况下提高错误纠正级别
      * @defaultValue true
      */
     boostLevel?: boolean;
     /**
-     * The settings for the embedded image.
+     * 嵌入图片的设置
      */
     imageSettings?: ImageSettings;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xiping/react-components",
   "private": false,
-  "version": "1.0.12",
+  "version": "1.0.14",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
@@ -48,7 +48,8 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
-    "motion": "^12.17.0",
+    "motion": "^12.18.1",
+    "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -64,10 +65,11 @@
     "@eslint/js": "^9.29.0",
     "@faker-js/faker": "^9.8.0",
     "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-onboarding": "^9.0.9",
-    "@storybook/react-vite": "^9.0.9",
+    "@storybook/addon-onboarding": "^9.0.10",
+    "@storybook/react-vite": "^9.0.10",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.31",
+    "@types/node": "^22.15.32",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.5.2",
@@ -75,19 +77,19 @@
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.0.10",
+    "eslint-plugin-storybook": "^9.0.11",
     "globals": "^16.2.0",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "rollup-preserve-directives": "^1.1.3",
     "sharp": "^0.34.2",
-    "storybook": "^9.0.9",
+    "storybook": "^9.0.10",
     "svgo": "^3.3.2",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-safe-area": "^0.6.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.0",
+    "typescript-eslint": "^8.34.1",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-image-optimizer": "^1.1.8",
@@ -102,5 +104,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "94b9351a8cb37cbfca40d528f06e1513243fe6b8"
+  "gitHead": "762cae9539bf1baba146a43651393fc3140bd4ad"
 }