@xiping/react-components 0.0.56 → 0.0.58

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

@@ -0,0 +1,83 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import x from "clsx";
+const w = ({
+  variant: l = "primary",
+  size: n = "medium",
+  className: c,
+  children: i,
+  leftIcon: t,
+  rightIcon: s,
+  isLoading: e = !1,
+  isDisabled: o = !1,
+  fullWidth: m = !1,
+  type: u = "button",
+  ...g
+}) => {
+  const y = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", p = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
+    outline: "border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500",
+    ghost: "bg-transparent hover:bg-gray-100 focus:ring-gray-500"
+  }, f = {
+    small: "px-3 py-1.5 text-sm",
+    medium: "px-4 py-2 text-base",
+    large: "px-6 py-3 text-lg"
+  }, b = x(
+    y,
+    p[l],
+    f[n],
+    {
+      "opacity-50 cursor-not-allowed": o,
+      "w-full": m,
+      "cursor-wait": e
+    },
+    c
+  );
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: u,
+      className: b,
+      disabled: o || e,
+      ...g,
+      children: [
+        e && /* @__PURE__ */ a(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-2 h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ r(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ r(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        !e && t && /* @__PURE__ */ r("span", { className: "mr-2", children: t }),
+        i,
+        !e && s && /* @__PURE__ */ r("span", { className: "ml-2", children: s })
+      ]
+    }
+  );
+};
+export {
+  w as Button
+};

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

@@ -0,0 +1,7 @@
+interface ImageViewerProps {
+    isOpen: boolean;
+    imgSrc: string;
+    onClose: () => void;
+}
+declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageViewer;

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

@@ -0,0 +1,39 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Modal as s, ModalContent as i, ModalHeader as n, ModalBody as c, ModalFooter as m } from "@nextui-org/modal";
+import { IoCloseSharp as d } from "../../node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/io5/index.js";
+import p from "../pinch-content/PinchContent.js";
+const x = (o) => {
+  const { isOpen: t, onClose: l, imgSrc: a } = o;
+  return /* @__PURE__ */ e(
+    s,
+    {
+      isOpen: t,
+      size: "full",
+      onClose: l,
+      className: "pppp bg-black bg-opacity-70",
+      hideCloseButton: !0,
+      children: /* @__PURE__ */ r(i, { children: [
+        /* @__PURE__ */ e(n, { className: "flex flex-col gap-1 relative", children: /* @__PURE__ */ e(
+          d,
+          {
+            className: "absolute top-2 right-2 text-white",
+            onClick: l
+          }
+        ) }),
+        /* @__PURE__ */ e(c, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          "img",
+          {
+            draggable: "false",
+            src: a,
+            alt: "",
+            className: "w-full h-full object-contain pointer-events-none"
+          }
+        ) }) }),
+        /* @__PURE__ */ e(m, {})
+      ] })
+    }
+  );
+};
+export {
+  x as default
+};

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

@@ -0,0 +1,3 @@
+import { default as ImageViewer } from './ImageViewer';
+export { ImageViewer };
+export default ImageViewer;

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface PinchContentProps {
+    children?: ReactNode;
+    canDrag?: boolean;
+    canPinch?: boolean;
+    canRotate?: boolean;
+    scaleBounds?: {
+        min: number;
+        max: number;
+    };
+}
+declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
+export default PinchContent;

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

@@ -0,0 +1,61 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useSpring as B, animated as C } from "@react-spring/web";
+import { createUseGesture as G, dragAction as N, pinchAction as U } from "@use-gesture/react";
+import { useRef as j } from "react";
+import { useMount as w, useUnmount as M } from "ahooks";
+const S = G([N, U]), o = (i) => i.preventDefault(), I = (i) => {
+  const {
+    children: l,
+    canPinch: h = !0,
+    canDrag: v = !0,
+    canRotate: p = !0,
+    scaleBounds: m = { min: 0.3, max: 8 }
+  } = i, t = j(null);
+  w(() => {
+    var r, e, n;
+    (r = t.current) == null || r.addEventListener("gesturestart", o), (e = t.current) == null || e.addEventListener("gesturechange", o), (n = t.current) == null || n.addEventListener("gestureend", o);
+  }), M(() => {
+    var r, e, n;
+    (r = t.current) == null || r.removeEventListener("gesturestart", o), (e = t.current) == null || e.removeEventListener("gesturechange", o), (n = t.current) == null || n.removeEventListener("gestureend", o);
+  });
+  const [c, g] = B(() => ({
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotateZ: 0
+  }));
+  return S(
+    {
+      // onHover: ({ active, event }) => console.log('hover', event, active),
+      // onMove: ({ event }) => console.log('move', event),
+      onDrag: ({ pinching: r, cancel: e, offset: [n, a], ...u }) => {
+        if (console.log(u), !v || r) return e();
+        g.start({ x: n, y: a });
+      },
+      onPinch: ({
+        origin: [r, e],
+        first: n,
+        movement: [a],
+        offset: [u, x],
+        memo: s,
+        cancel: y
+      }) => {
+        if (!h) return y();
+        if (n) {
+          const { width: b, height: D, x: P, y: R } = t.current.getBoundingClientRect(), Z = r - (P + b / 2), A = e - (R + D / 2);
+          s = [c.x.get(), c.y.get(), Z, A];
+        }
+        const E = s[0] - (a - 1) * s[2], L = s[1] - (a - 1) * s[3], d = { scale: u, rotateZ: 0, x: E, y: L };
+        return p && (d.rotateZ = x), g.start(d), s;
+      }
+    },
+    {
+      target: t,
+      drag: { from: () => [c.x.get(), c.y.get()] },
+      pinch: { scaleBounds: m, rubberband: !0 }
+    }
+  ), /* @__PURE__ */ f("div", { className: "flex fill center", children: /* @__PURE__ */ f(C.div, { className: "select-none", ref: t, style: c, children: l }) });
+};
+export {
+  I as default
+};

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

@@ -0,0 +1,4 @@
+import { default as PinchContent } from './PinchContent';
+export * from './PinchContent';
+export { PinchContent };
+export default PinchContent;

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

@@ -0,0 +1,5 @@
+import o from "./PinchContent.js";
+export {
+  o as PinchContent,
+  o as default
+};

package/dist/es/components/translate/Translate.d.ts

@@ -0,0 +1,5 @@
+interface TranslateProps {
+    text: string;
+}
+declare const Translate: (props: TranslateProps) => import("react/jsx-runtime").JSX.Element;
+export default Translate;

package/dist/es/components/txt-reader/TxtReader.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from 'react';
+interface TxtReaderProps {
+    content: string;
+    lineHeight?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    onProgressChange?: (progress: number) => void;
+    initialScrollPosition?: number;
+    cacheKey?: string;
+}
+export declare const TxtReader: FC<TxtReaderProps>;
+export default TxtReader;

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

@@ -0,0 +1,68 @@
+import { jsxs as a, jsx as H } from "react/jsx-runtime";
+import { useRef as I, useState as L, useCallback as u, useEffect as d } from "react";
+import { debounce as N } from "lodash-es";
+import R from "clsx";
+const _ = 16, F = 1.5, S = "normal", U = ({
+  content: f,
+  lineHeight: p = F,
+  fontSize: m = _,
+  fontWeight: x = S,
+  className: T = "",
+  style: E = {},
+  onProgressChange: s,
+  initialScrollPosition: c,
+  cacheKey: e
+}) => {
+  const r = I(null), [b, v] = L(0), l = u(() => {
+    if (!r.current) return;
+    const t = r.current, o = t.scrollTop, g = t.scrollHeight, w = t.clientHeight, i = Math.min(
+      Math.round(o / (g - w) * 100),
+      100
+    );
+    v(i), s == null || s(i), e && localStorage.setItem(`txtReader-${e}`, o.toString());
+  }, [e, s]), n = u(
+    N(l, 100),
+    [l]
+  );
+  return d(() => {
+    if (!r.current) return;
+    let t = c;
+    if (e) {
+      const o = localStorage.getItem(`txtReader-${e}`);
+      o && (t = parseInt(o, 10));
+    }
+    t && (r.current.scrollTop = t, l());
+  }, [e, c, l]), d(() => {
+    const t = r.current;
+    if (t)
+      return t.addEventListener("scroll", n), () => {
+        t.removeEventListener("scroll", n);
+      };
+  }, [n]), /* @__PURE__ */ a("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ H(
+      "div",
+      {
+        ref: r,
+        className: R(
+          "w-full overflow-auto whitespace-pre-wrap break-words",
+          T
+        ),
+        style: {
+          fontSize: `${m}px`,
+          lineHeight: p,
+          fontWeight: x,
+          ...E
+        },
+        children: f
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5", children: [
+      b,
+      "%"
+    ] })
+  ] });
+};
+export {
+  U as TxtReader,
+  U as default
+};

package/dist/es/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/button/Button';
+export * from './components/txt-reader/TxtReader';
+export * from './components/pinch-content';
+export * from './components/image-viewer';

package/dist/es/index.js

@@ -0,0 +1,11 @@
+/* empty css          */
+import { Button as r } from "./components/button/Button.js";
+import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
+import { default as p } from "./components/pinch-content/PinchContent.js";
+import { default as n } from "./components/image-viewer/ImageViewer.js";
+export {
+  r as Button,
+  n as ImageViewer,
+  p as PinchContent,
+  f as TxtReader
+};

package/dist/es/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/io5/index.js

@@ -0,0 +1,8 @@
+import { GenIcon as o } from "../lib/iconBase.js";
+import "../lib/iconContext.js";
+function i(t) {
+  return o({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z" }, child: [] }] })(t);
+}
+export {
+  i as IoCloseSharp
+};

package/dist/es/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/lib/iconBase.js

@@ -0,0 +1,108 @@
+import l from "react";
+import { IconContext as s, DefaultContext as O } from "./iconContext.js";
+var g = ["attr", "size", "title"];
+function v(t, e) {
+  if (t == null) return {};
+  var r = y(t, e), n, i;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(t);
+    for (i = 0; i < o.length; i++)
+      n = o[i], !(e.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (r[n] = t[n]);
+  }
+  return r;
+}
+function y(t, e) {
+  if (t == null) return {};
+  var r = {};
+  for (var n in t)
+    if (Object.prototype.hasOwnProperty.call(t, n)) {
+      if (e.indexOf(n) >= 0) continue;
+      r[n] = t[n];
+    }
+  return r;
+}
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var r = arguments[e];
+      for (var n in r)
+        Object.prototype.hasOwnProperty.call(r, n) && (t[n] = r[n]);
+    }
+    return t;
+  }, c.apply(this, arguments);
+}
+function m(t, e) {
+  var r = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(t);
+    e && (n = n.filter(function(i) {
+      return Object.getOwnPropertyDescriptor(t, i).enumerable;
+    })), r.push.apply(r, n);
+  }
+  return r;
+}
+function u(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var r = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? m(Object(r), !0).forEach(function(n) {
+      j(t, n, r[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : m(Object(r)).forEach(function(n) {
+      Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
+    });
+  }
+  return t;
+}
+function j(t, e, r) {
+  return e = P(e), e in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function P(t) {
+  var e = h(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function h(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var n = r.call(t, e || "default");
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (e === "string" ? String : Number)(t);
+}
+function p(t) {
+  return t && t.map((e, r) => /* @__PURE__ */ l.createElement(e.tag, u({
+    key: r
+  }, e.attr), p(e.child)));
+}
+function _(t) {
+  return (e) => /* @__PURE__ */ l.createElement(w, c({
+    attr: u({}, t.attr)
+  }, e), p(t.child));
+}
+function w(t) {
+  var e = (r) => {
+    var {
+      attr: n,
+      size: i,
+      title: o
+    } = t, b = v(t, g), f = i || r.size || "1em", a;
+    return r.className && (a = r.className), t.className && (a = (a ? a + " " : "") + t.className), /* @__PURE__ */ l.createElement("svg", c({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, r.attr, n, b, {
+      className: a,
+      style: u(u({
+        color: t.color || r.color
+      }, r.style), t.style),
+      height: f,
+      width: f,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), o && /* @__PURE__ */ l.createElement("title", null, o), t.children);
+  };
+  return s !== void 0 ? /* @__PURE__ */ l.createElement(s.Consumer, null, (r) => e(r)) : e(O);
+}
+export {
+  _ as GenIcon,
+  w as IconBase
+};

package/dist/es/node_modules/.pnpm/react-icons@5.4.0_react@18.3.1/node_modules/react-icons/lib/iconContext.js

@@ -0,0 +1,12 @@
+import e from "react";
+var t = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+}, d = e.createContext && /* @__PURE__ */ e.createContext(t);
+export {
+  t as DefaultContext,
+  d as IconContext
+};

package/dist/es/pages/home/Home.d.ts

@@ -0,0 +1,2 @@
+declare const Home: () => import("react/jsx-runtime").JSX.Element;
+export default Home;