ono-react-element 0.0.7 → 0.0.8

package/package.json

@@ -1,49 +1,56 @@
-{
-  "name": "ono-react-element",
-  "private": false,
-  "version": "0.0.7",
-  "description": "Component library by React + Typescript",
-  "type": "module",
-  "main": "./dist/umd/index.umd.cjs",
-  "module": "./dist/es/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/es/index.js",
-      "require": "./dist/umd/index.umd.cjs"
-    },
-    "./dist/": {
-      "import": "./dist/",
-      "require": "./dist/"
-    }
-  },
-  "sideEffects": [
-    "./dist/index.css"
-  ],
-  "scripts": {
-    "build": "run-s clean build-lib move-style",
-    "build-lib": "run-p build-umd build-es",
-    "build-umd": "vite build --config vite.umd.config.ts",
-    "build-es": "vite build --config vite.es.config.ts",
-    "move-style": "move-file dist/es/index.css dist/index.css",
-    "clean": "rimraf dist",
-    "release": "release-it"
-  },
-  "keywords": [],
-  "author": "ono",
-  "license": "MIT",
-  "dependencies": {
-    "@popperjs/core": "^2.11.8"
-  },
-  "devDependencies": {
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
-}
+{
+  "name": "ono-react-element",
+  "private": false,
+  "version": "0.0.8",
+  "description": "Component library by React + Typescript",
+  "type": "module",
+  "main": "./dist/umd/index.umd.cjs",
+  "module": "./dist/es/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    }
+  },
+  "sideEffects": [
+    "./dist/index.css"
+  ],
+  "scripts": {
+    "build": "run-p build-umd build-es",
+    "build:watch": "run-p build-umd:watch build-es:watch",
+    "build-umd": "vite build --config vite.umd.config.ts",
+    "build-es": "vite build --config vite.es.config.ts",
+    "build-umd:watch": "vite build --watch --config vite.umd.config.ts",
+    "build-es:watch": "vite build --watch --config vite.es.config.ts",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "component"
+  ],
+  "author": "ono",
+  "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "terser": "^5.43.1",
+    "vite-plugin-compression2": "^2.2.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/dist/es/AutoSliderList-DN4Sec6L.js

@@ -1,106 +0,0 @@
-import { j as y } from "./dependencies-DWmdjl5u.js";
-import { p as z } from "./utils-BLV_TQU3.js";
-import { useState as a, useRef as H, useMemo as j, useEffect as g, cloneElement as V } from "react";
-import { u as W } from "./hooks-CQN6qu4t.js";
-var x = /* @__PURE__ */ ((s) => (s.Horizontal = "Horizontal", s.Vertical = "Vertical", s))(x || {});
-const q = ({
-  list: s,
-  style: C,
-  disable: n,
-  children: m,
-  sliderBox: v,
-  className: A,
-  sliderStyle: E,
-  duration: c = 300,
-  sliderClassName: $,
-  currentIndex: d = 0,
-  direction: i = x.Horizontal,
-  sliderTransitionTimingFunction: h = "ease-in-out"
-}) => {
-  const [I, L] = a(!1), [t, S] = a(0), [f, R] = a({
-    t: 0,
-    l: 0
-  }), [u, k] = a({
-    w: 0,
-    h: 0
-  }), l = H(null), w = H(null), B = j(
-    () => ["width", "height", "transform"].map(
-      (e) => `${e} ${c / 1e3}s ${h}`
-    ).join(","),
-    [i, c, h]
-  ), N = j(
-    () => ({
-      width: u.w,
-      height: u.h,
-      transition: I ? B : "initial",
-      transform: `translate(${f.l}px, ${f.t}px)`
-    }),
-    [u, f]
-  ), M = () => {
-    if (typeof t != "number" || !l.current || !w.current) return;
-    const e = Array.from(l.current.children).slice(
-      1
-    );
-    e.forEach((r) => {
-      r.style.position = "relative", r.style.cursor = n ? "not-allowed" : "pointer", r.style.zIndex = "1";
-    });
-    const o = window.getComputedStyle(l.current), p = {
-      t: i === "Horizontal" ? z(o.paddingTop) : e[t].offsetTop,
-      l: i === "Horizontal" ? e[t].offsetLeft : z(o.paddingLeft)
-    };
-    R(p), k({
-      w: e[t].offsetWidth,
-      h: e[t].offsetHeight
-    }), setTimeout(() => L(!0), c);
-  }, { w: P, h: T } = W();
-  return g(() => {
-    S(d);
-  }, [d]), g(() => {
-    M();
-  }, [t, P, T, n]), /* @__PURE__ */ y.jsxs(
-    "ul",
-    {
-      ref: l,
-      className: [
-        "ono-auto-slider-list-container",
-        A,
-        n ? "ono-auto-slider-list-is-disable" : ""
-      ].filter(Boolean).join(" "),
-      style: {
-        flexDirection: i === "Horizontal" ? "row" : "column",
-        ...C
-      },
-      children: [
-        /* @__PURE__ */ y.jsx(
-          "li",
-          {
-            ref: w,
-            className: ["ono-auto-slider-list-slider", $].filter(Boolean).join(" "),
-            style: { ...E, ...N },
-            children: v
-          }
-        ),
-        s.map(
-          (e, o) => V(
-            m({ item: e, index: o, isActive: o === t }),
-            {
-              onClick: (p) => {
-                if (n) return;
-                const r = m({
-                  item: e,
-                  index: o,
-                  isActive: o === t
-                }).props.onClick;
-                r && r(p), S(o);
-              }
-            }
-          )
-        )
-      ]
-    }
-  );
-};
-export {
-  q as A,
-  x as D
-};

package/dist/es/AvatarCrop-DzGw2FVQ.js

@@ -1,225 +0,0 @@
-import { j as p } from "./dependencies-DWmdjl5u.js";
-import { useState as h, useRef as T, useEffect as q } from "react";
-const K = ({
-  imageFile: v,
-  cvsW: $ = 520,
-  maskBG: B = "rgba(0, 0, 0, 0.5)",
-  border: y = "4px solid #fff",
-  wheelScale: j = 0.1,
-  setCtx: g,
-  maskInfo: e,
-  setMaskInfo: d,
-  imageStartState: D,
-  setImageStartState: R,
-  imageState: n,
-  setImageState: a
-}) => {
-  const [x, E] = h(), [z, U] = h({ w: 0, h: 0 }), [c, X] = h({ w: 0, h: 0 }), [L, u] = h({ x: 0, y: 0 }), [C, b] = h(!1), f = T(null), i = T(null), s = (t, r) => {
-    r((l) => ({
-      ...l,
-      ...t
-    }));
-  }, O = () => {
-    if (!f.current) return;
-    const { width: t } = f.current.getBoundingClientRect();
-    G(t), U({ w: t, h: t });
-  }, N = () => {
-    const t = y.split(" ");
-    let r = 0;
-    return t.forEach((l) => {
-      l.includes("px") && (r = Number(l.split("px")[0]));
-    }), r;
-  }, G = (t) => {
-    const r = new Image();
-    typeof v == "string" ? r.src = v : r.src = URL.createObjectURL(v), r.onload = () => {
-      var P;
-      let l = 1, o = r.width, w = r.height;
-      o > w ? (l = o / t, o = t, w = w / l, s({ w }, d)) : (l = w / t, w = t, o = o / l, s({ w: o }, d));
-      const M = (t - o) / 2, Y = (t - w) / 2;
-      s({ w: r.width, h: r.height }, X), E(r), s(
-        {
-          w: o,
-          h: w,
-          t: Y,
-          l: M
-        },
-        a
-      ), R({ w: o, h: w, t: Y, l: M }), M > Y ? s({ l: M }, d) : s({ l: Y }, d), g((P = i.current) == null ? void 0 : P.getContext("2d"));
-    };
-  }, A = () => {
-    b(!1), n.l > e.l && s({ l: e.l }, a), n.t > e.l && s({ t: e.l }, a), -n.l > n.w - e.l - e.w && s(
-      { l: -(n.w - e.l - e.w) },
-      a
-    ), -n.t > n.h - e.l - e.w && s(
-      { t: -(n.h - e.l - e.w) },
-      a
-    );
-  }, H = (t, r) => {
-    const l = r === "in" ? t * j : -t * j;
-    let o = t + l;
-    return o > c.w && (o = c.w), o < D.w && (o = D.w), o;
-  }, J = (t) => {
-    t.preventDefault(), t.stopPropagation();
-    const r = t.deltaY < 0 ? "in" : "out", l = H(n.w, r), o = l / c.w;
-    s(
-      {
-        w: l,
-        h: c.h * o
-      },
-      a
-    ), A();
-  };
-  return q(() => {
-    O();
-  }, [f]), q(() => {
-    if (!i.current || !x) return;
-    const t = i.current.getContext("2d");
-    t && (t.clearRect(
-      0,
-      0,
-      i.current.width,
-      i.current.height
-    ), t.drawImage(
-      x,
-      n.l,
-      n.t,
-      n.w,
-      n.h
-    ));
-  }, [i, x, n]), /* @__PURE__ */ p.jsxs(
-    "div",
-    {
-      ref: f,
-      className: "ono-avatar-canvas",
-      style: {
-        width: $,
-        cursor: C ? "grabbing" : "grab"
-      },
-      onWheel: J,
-      onMouseUp: A,
-      onMouseLeave: A,
-      children: [
-        /* @__PURE__ */ p.jsx(
-          "canvas",
-          {
-            width: z.w,
-            height: z.h,
-            ref: i,
-            onMouseDown: (t) => {
-              s({ x: t.clientX, y: t.clientY }, u), b(!0);
-            },
-            onMouseMove: (t) => {
-              if (C) {
-                const r = t.clientX - L.x, l = t.clientY - L.y;
-                (Math.abs(r) > 10 || Math.abs(l) > 10) && (s(
-                  {
-                    t: n.t + l,
-                    l: n.l + r
-                  },
-                  a
-                ), s({ x: t.clientX, y: t.clientY }, u));
-              }
-            }
-          }
-        ),
-        x && /* @__PURE__ */ p.jsx("div", { className: "ono-avatar-mask", children: /* @__PURE__ */ p.jsx(
-          "div",
-          {
-            style: {
-              border: y,
-              boxShadow: `${B} 0 0 0 10000px`,
-              width: `${e.w + N() * 2}px`,
-              height: `${e.w + N() * 2}px`
-            }
-          }
-        ) })
-      ]
-    }
-  );
-}, Z = ({
-  imageFile: v,
-  cvsW: $ = 520,
-  maskBG: B = "rgba(0, 0, 0, 0.5)",
-  border: y = "4px solid #fff",
-  wheelScale: j = 0.1,
-  children: g
-}) => {
-  const [e, d] = h({
-    w: 0,
-    // 图片初始宽度
-    h: 0,
-    // 图片初始高度
-    t: 0,
-    // 图片初始离顶部距离
-    l: 0
-    // 图片初始离左侧距离
-  }), [D, R] = h({
-    w: 0,
-    // 当前图片宽度
-    h: 0,
-    // 当前图片高度
-    t: 0,
-    // 圖片當前離頂部距離
-    l: 0
-    // 圖片當前離左邊距離
-  }), [n, a] = h({
-    w: 0,
-    // 蒙版寬度
-    l: 0
-    // 蒙版初始离左侧距离
-  }), [x, E] = h(), z = (c) => {
-    R({
-      w: e.w,
-      h: e.h,
-      t: e.t,
-      l: e.l
-    }), c == null || c();
-  }, U = (c, X) => {
-    if (!x) return;
-    const L = x.getImageData(
-      n.l,
-      n.l,
-      n.w,
-      n.w
-    ), u = document.createElement("canvas"), C = u.getContext("2d");
-    if (u.width = n.w, u.height = n.w, !C) return;
-    const {
-      imageSaveType: b = "png",
-      dataSaveType: f = "base64",
-      quality: i = 100
-    } = X || {};
-    C.putImageData(L, 0, 0, 0, 0, n.w, n.w), f === "base64" ? c(u.toDataURL(`image/${b}`, i / 100)) : f === "blob" && u.toBlob(
-      (s) => {
-        if (s) return c(s);
-      },
-      `image/${b}`,
-      i / 100
-    );
-  };
-  return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
-    /* @__PURE__ */ p.jsx(
-      K,
-      {
-        imageFile: v,
-        cvsW: $,
-        maskBG: B,
-        border: y,
-        wheelScale: j,
-        maskInfo: n,
-        setMaskInfo: a,
-        setCtx: E,
-        imageStartState: e,
-        setImageStartState: d,
-        imageState: D,
-        setImageState: R
-      }
-    ),
-    g == null ? void 0 : g({
-      handleConfirm: U,
-      handleReduction: z
-    })
-  ] });
-};
-export {
-  Z as A
-};

package/dist/es/Button-CdxyXFF4.js

@@ -1,72 +0,0 @@
-import { j as n } from "./dependencies-DWmdjl5u.js";
-import { useState as R, useRef as u, useEffect as f } from "react";
-const N = ({
-  onClick: d,
-  children: m,
-  disabled: s,
-  loading: e,
-  plain: p,
-  shape: c = "default",
-  htmlType: h = "button",
-  type: x = "primary",
-  className: j,
-  style: g,
-  icon: i
-}) => {
-  const [a, l] = R(!1), o = u(null), r = u(null), b = () => {
-    if (!o.current) return;
-    const t = o.current, C = t.getBoundingClientRect();
-    t.style.setProperty("--btn-height", C.height + "px");
-  }, L = () => {
-    if (!r.current) return;
-    const t = r.current;
-    e ? (l(!0), t.classList.add("ono-loading-start")) : (setTimeout(() => {
-      l(!1);
-    }, 300), t.classList.remove("ono-loading-start"), t.classList.add("ono-loading-end"));
-  }, y = () => [
-    `ono-btn-${x}`,
-    e || a ? "is-loading" : "",
-    e || i ? "is-icon" : "",
-    s ? "is-disabled" : "",
-    c === "round" ? "is-round" : c === "circle" ? "is-circle" : "",
-    p ? "is-plain" : "",
-    j ?? ""
-  ].filter(Boolean).join(" "), B = () => {
-    const t = /* @__PURE__ */ n.jsx("span", { ref: r, className: "ono-btn-icon", children: /* @__PURE__ */ n.jsx("span", { children: typeof e == "object" ? e.icon : /* @__PURE__ */ n.jsx(
-      "svg",
-      {
-        viewBox: "0 0 1024 1024",
-        focusable: "false",
-        "data-icon": "loading",
-        width: "1em",
-        height: "1em",
-        fill: "currentColor",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ n.jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
-      }
-    ) }) });
-    return e || a ? t : i ? /* @__PURE__ */ n.jsx("span", { children: i }) : /* @__PURE__ */ n.jsx(n.Fragment, {});
-  };
-  return f(() => {
-    L();
-  }, [e, r]), f(() => {
-    b();
-  }, [o]), /* @__PURE__ */ n.jsxs(
-    "button",
-    {
-      ref: o,
-      className: y(),
-      type: h,
-      disabled: (typeof s == "function" ? s() : s) || !!e,
-      style: g,
-      onClick: d,
-      children: [
-        B(),
-        m
-      ]
-    }
-  );
-};
-export {
-  N as B
-};

package/dist/es/Card3D-sf3zmiHk.js

@@ -1,41 +0,0 @@
-import { j as a } from "./dependencies-DWmdjl5u.js";
-import { useState as j, useRef as R, useEffect as l } from "react";
-const $ = ({
-  src: r,
-  children: s,
-  enlarge: y = !1,
-  scale: i = 1.1,
-  shadow: c,
-  xRange: d = [-10, 10],
-  yRange: p = [-10, 10],
-  borderRadius: v = 20
-}) => {
-  const [x, f] = j(!1), e = R(null), u = (t, o, n) => o / n * (t[1] - t[0]) + t[0], m = (t) => {
-    const { offsetX: o, offsetY: n } = t.nativeEvent, { offsetWidth: g, offsetHeight: M } = e.current, E = u(d, n, M), P = -u(p, o, g);
-    e.current.style.setProperty("--rx", `${E}deg`), e.current.style.setProperty("--ry", `${P}deg`);
-  };
-  return l(() => {
-    e.current && c && e.current.style.setProperty("--sd", c);
-  }, [e.current]), l(() => {
-    if (!s && !r) throw new Error("请传入children或者src属性");
-  }, [s, r]), /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      ref: e,
-      className: "ono-card",
-      style: {
-        borderRadius: v,
-        transform: `perspective(500px) scale(${x && y ? i : 1}) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))`
-      },
-      onMouseEnter: () => f(!0),
-      onMouseMove: m,
-      onMouseLeave: () => {
-        f(!1), e.current.style.setProperty("--rx", "0deg"), e.current.style.setProperty("--ry", "0deg");
-      },
-      children: s ?? /* @__PURE__ */ a.jsx("img", { src: r, alt: "图片" })
-    }
-  );
-};
-export {
-  $ as C
-};

package/dist/es/Checkbox-BN7rT73n.js

@@ -1,62 +0,0 @@
-import { j as C } from "./dependencies-DWmdjl5u.js";
-import { useState as d, useRef as k, useEffect as j } from "react";
-const w = ({
-  id: u,
-  style: c,
-  checked: s,
-  onChange: p,
-  className: l,
-  indeterminate: n = !1,
-  checkedColor: i = "#0077cc",
-  indeterminateStyle: y = "line",
-  indeterminateColor: a = "#0077cc"
-}) => {
-  const [f, h] = d(""), e = k(null), x = [
-    {
-      value: i,
-      name: "checkedColor"
-    },
-    {
-      value: a,
-      name: "indeterminateColor"
-    }
-  ], b = (t, r, o) => {
-    typeof t == "string" ? o.style.setProperty(`--${r}`, t) : o.style.setProperty(`--${r}`, `${t}px`);
-  }, m = () => {
-    if (!e.current) return;
-    const t = getComputedStyle(e.current);
-    f || h(t.borderColor), e.current.style.height = t.width, [
-      {
-        value: t.width,
-        name: "w"
-      },
-      {
-        value: s || n ? i : f,
-        name: "border-color"
-      },
-      ...x
-    ].forEach(({ value: r, name: o }) => {
-      r && b(r, o, e.current);
-    });
-  };
-  return j(() => {
-    m(), e.current && (e.current.indeterminate = n);
-  }, [e, l, c, n]), /* @__PURE__ */ C.jsx(
-    "input",
-    {
-      id: u,
-      type: "checkbox",
-      ref: e,
-      checked: s,
-      onChange: p,
-      className: [
-        l,
-        y === "line" ? "ono-checkbox-line" : "ono-checkbox-border"
-      ].filter(Boolean).join(" "),
-      style: c
-    }
-  );
-};
-export {
-  w as C
-};

package/dist/es/InjunctiveBox-CGpy0PxH.js

@@ -1,39 +0,0 @@
-import { j as i, R as j } from "./dependencies-DWmdjl5u.js";
-import { a as p } from "./hooks-CQN6qu4t.js";
-let e = null, t;
-const B = ({
-  className: n,
-  content: r,
-  style: u,
-  onClick: c,
-  onDoubleClick: l,
-  onContextMenu: s,
-  onMouseDown: m,
-  onMouseUp: d,
-  onMouseEnter: a,
-  onMouseLeave: x,
-  onMouseMove: f,
-  isClickBoxToClose: v
-}) => (p("click", () => {
-  v && e && (e.remove(), e = null);
-}), /* @__PURE__ */ i.jsx(
-  "div",
-  {
-    className: n,
-    style: u,
-    onClick: c,
-    onDoubleClick: l,
-    onContextMenu: s,
-    onMouseDown: m,
-    onMouseUp: d,
-    onMouseEnter: a,
-    onMouseLeave: x,
-    onMouseMove: f,
-    children: typeof r == "function" ? r((o) => {
-      e && (e.remove(), e = null, o && o());
-    }) : r
-  }
-)), b = (n) => (R(n.isSingle || !1).render(/* @__PURE__ */ i.jsx(B, { ...n })), e), R = (n) => (n && e && t || (e = document.createElement("div"), document.body.appendChild(e), t = j.createRoot(e)), t);
-export {
-  b as i
-};