@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Cropper/Cropper.js

@@ -0,0 +1,1014 @@
+import { jsx as j } from "react/jsx-runtime";
+import { cn as Y, useComposedRefs as be, Slot as ae } from "@dsui/ui/index";
+import { cva as ke } from "class-variance-authority";
+import * as s from "react";
+const Ze = "Cropper", Re = "CropperContent", ve = "CropperImage", Me = "CropperVideo", _e = "CropperArea", _ = 200, te = typeof window < "u" && window.devicePixelRatio || 1, ze = /* @__PURE__ */ new Map(), Pe = /* @__PURE__ */ new Map(), oe = /* @__PURE__ */ new Map(), ne = /* @__PURE__ */ new Map();
+function we(o, t, u) {
+  return Math.min(Math.max(o, t), u);
+}
+function $(o, t = 2 / te) {
+  return Math.round(o / t) * t;
+}
+function re(o, t = 4 / te) {
+  return Math.round(o / t) * t;
+}
+function Te(o, t = 0.01) {
+  return Math.round(o / t) * t;
+}
+function ce(o, t = 1) {
+  return Math.round(o / t) * t;
+}
+function ie(o) {
+  return Math.round(o * te) / te;
+}
+function ue(o, t) {
+  const u = o.get(t);
+  return u !== void 0 && (o.delete(t), o.set(t, u)), u;
+}
+function le(o, t, u, b = _) {
+  if (o.has(t) && o.delete(t), o.set(t, u), o.size > b) {
+    const h = o.keys().next().value;
+    h !== void 0 && o.delete(h);
+  }
+}
+function Ee(o, t) {
+  return Math.sqrt((o.y - t.y) ** 2 + (o.x - t.x) ** 2);
+}
+function $e(o, t) {
+  return {
+    x: (t.x + o.x) * 0.5,
+    y: (t.y + o.y) * 0.5
+  };
+}
+function Ae(o, t) {
+  return Math.atan2(t.y - o.y, t.x - o.x) * 180 / Math.PI;
+}
+function Ge(o) {
+  return o * Math.PI / 180;
+}
+function se(o, t, u) {
+  const b = `${$(o)}-${$(t)}-${ce(u)}`, h = ue(ze, b);
+  if (h)
+    return h;
+  const a = Ge(u), n = Math.cos(a), m = Math.sin(a), i = {
+    width: Math.abs(n * o) + Math.abs(m * t),
+    height: Math.abs(m * o) + Math.abs(n * t)
+  };
+  return le(ze, b, i, _), i;
+}
+function He(o, t, u, b, h, a = 0) {
+  const n = `${$(o, 8)}-${$(t, 8)}-${$(u, 8)}-${$(b, 8)}-${$(h, 0.01)}-${ce(a)}`, m = ue(Pe, n);
+  if (m)
+    return m;
+  const { width: i, height: f } = se(o, t, a), g = Math.min(i, u), c = Math.min(f, b), C = g > c * h ? {
+    width: c * h,
+    height: c
+  } : {
+    width: g,
+    height: g / h
+  };
+  return le(Pe, n, C, _), C;
+}
+function V(o, t, u, b, h = 0) {
+  const a = re(o.x), n = re(o.y), m = `${a}-${n}-${$(t.width)}-${$(t.height)}-${$(u.width)}-${$(u.height)}-${Te(b)}-${ce(h)}`, i = ue(ne, m);
+  if (i)
+    return i;
+  const { width: f, height: g } = se(
+    t.width,
+    t.height,
+    h
+  ), c = f * b * 0.5 - u.width * 0.5, C = g * b * 0.5 - u.height * 0.5, p = {
+    x: we(o.x, -c, c),
+    y: we(o.y, -C, C)
+  };
+  return le(ne, m, p, _), p;
+}
+function De(o, t, u, b, h, a = 0, n = !1) {
+  const m = `${re(o.x)}-${re(o.y)}-${$(t.width)}-${$(t.height)}-${$(t.naturalWidth)}-${$(t.naturalHeight)}-${$(u.width)}-${$(u.height)}-${$(b, 0.01)}-${Te(h)}-${ce(a)}-${n}`, i = ue(oe, m);
+  if (i) return i;
+  const f = n ? (P, l) => l : (P, l) => Math.min(P, Math.max(0, l)), g = se(t.width, t.height, a), c = se(
+    t.naturalWidth,
+    t.naturalHeight,
+    a
+  ), C = {
+    x: f(
+      100,
+      ((g.width - u.width / h) / 2 - o.x / h) / g.width * 100
+    ),
+    y: f(
+      100,
+      ((g.height - u.height / h) / 2 - o.y / h) / g.height * 100
+    ),
+    width: f(
+      100,
+      u.width / g.width * 100 / h
+    ),
+    height: f(
+      100,
+      u.height / g.height * 100 / h
+    )
+  }, p = Math.round(
+    f(
+      c.width,
+      C.width * c.width / 100
+    )
+  ), x = Math.round(
+    f(
+      c.height,
+      C.height * c.height / 100
+    )
+  ), v = c.width >= c.height * b ? {
+    width: Math.round(x * b),
+    height: x
+  } : {
+    width: p,
+    height: Math.round(p / b)
+  }, r = {
+    ...v,
+    x: Math.round(
+      f(
+        c.width - v.width,
+        C.x * c.width / 100
+      )
+    ),
+    y: Math.round(
+      f(
+        c.height - v.height,
+        C.y * c.height / 100
+      )
+    )
+  }, d = { croppedAreaPercentages: C, croppedAreaPixels: r };
+  return le(oe, m, d, _), d;
+}
+function Le(o) {
+  const t = s.useRef(null);
+  return t.current === null && (t.current = o()), t;
+}
+const Ve = typeof window < "u" ? s.useLayoutEffect : s.useEffect;
+function Be(o, t, u, b, h, a, n, m, i, f, g, c, C) {
+  let p = !1, x = null;
+  function A() {
+    x == null && (x = requestAnimationFrame(() => {
+      x = null;
+      const r = t.current;
+      if (r?.mediaSize && r.cropSize && n) {
+        const { croppedAreaPercentages: d, croppedAreaPixels: P } = De(
+          r.crop,
+          r.mediaSize,
+          r.cropSize,
+          u,
+          r.zoom,
+          r.rotation,
+          b
+        );
+        n(d, P);
+      }
+    }));
+  }
+  const v = {
+    subscribe: (r) => o.current ? (o.current.add(r), () => o.current?.delete(r)) : () => {
+    },
+    getState: () => t.current ?? {
+      crop: { x: 0, y: 0 },
+      zoom: 1,
+      rotation: 0,
+      mediaSize: null,
+      cropSize: null,
+      isDragging: !1,
+      isWheelZooming: !1
+    },
+    setState: (r, d) => {
+      const P = t.current;
+      if (!(!P || Object.is(P[r], d))) {
+        if (P[r] = d, r === "crop" && typeof d == "object" && d && "x" in d)
+          h?.(d);
+        else if (r === "zoom" && typeof d == "number")
+          i?.(d);
+        else if (r === "rotation" && typeof d == "number")
+          f?.(d);
+        else if (r === "cropSize" && typeof d == "object" && d && "width" in d)
+          a?.(d);
+        else if (r === "mediaSize" && typeof d == "object" && d && "naturalWidth" in d)
+          g?.(d);
+        else if (r === "isDragging")
+          if (d)
+            c?.();
+          else {
+            C?.();
+            const l = t.current;
+            if (l?.mediaSize && l.cropSize && m) {
+              const { croppedAreaPercentages: M, croppedAreaPixels: E } = De(
+                l.crop,
+                l.mediaSize,
+                l.cropSize,
+                u,
+                l.zoom,
+                l.rotation,
+                b
+              );
+              m(M, E);
+            }
+          }
+        (r === "crop" || r === "zoom" || r === "rotation" || r === "mediaSize" || r === "cropSize") && n && A(), p || v.notify();
+      }
+    },
+    notify: () => {
+      if (o.current)
+        for (const r of o.current)
+          r();
+    },
+    batch: (r) => {
+      if (p) {
+        r();
+        return;
+      }
+      p = !0;
+      try {
+        r();
+      } finally {
+        p = !1, v.notify();
+      }
+    }
+  };
+  return v;
+}
+const Fe = s.createContext(null);
+function he(o) {
+  const t = s.useContext(Fe);
+  if (!t)
+    throw new Error(`\`${o}\` must be used within \`${Ze}\``);
+  return t;
+}
+function k(o) {
+  const t = he("useStore"), u = s.useCallback(
+    () => o(t.getState()),
+    [t, o]
+  );
+  return s.useSyncExternalStore(t.subscribe, u, u);
+}
+const Ne = s.createContext(null);
+function fe(o) {
+  const t = s.useContext(Ne);
+  if (!t)
+    throw new Error(`\`${o}\` must be used within \`${Ze}\``);
+  return t;
+}
+function tt(o) {
+  const {
+    crop: t = { x: 0, y: 0 },
+    zoom: u = 1,
+    minZoom: b = 1,
+    maxZoom: h = 3,
+    zoomSpeed: a = 1,
+    rotation: n = 0,
+    keyboardStep: m = 1,
+    aspectRatio: i = 4 / 3,
+    shape: f = "rectangle",
+    objectFit: g = "contain",
+    allowOverflow: c = !1,
+    preventScrollZoom: C = !1,
+    withGrid: p = !1,
+    onCropChange: x,
+    onCropSizeChange: A,
+    onCropAreaChange: v,
+    onCropComplete: r,
+    onZoomChange: d,
+    onRotationChange: P,
+    onMediaLoaded: l,
+    onInteractionStart: M,
+    onInteractionEnd: E,
+    className: F,
+    ...D
+  } = o, B = Le(() => /* @__PURE__ */ new Set()), W = Le(() => ({
+    crop: t,
+    zoom: u,
+    rotation: n,
+    mediaSize: null,
+    cropSize: null,
+    isDragging: !1,
+    isWheelZooming: !1
+  })), Z = s.useRef(null), L = s.useMemo(
+    () => Be(
+      B,
+      W,
+      i,
+      c,
+      x,
+      A,
+      v,
+      r,
+      d,
+      P,
+      l,
+      M,
+      E
+    ),
+    [
+      B,
+      W,
+      i,
+      c,
+      x,
+      A,
+      v,
+      r,
+      d,
+      P,
+      l,
+      M,
+      E
+    ]
+  );
+  Ve(() => {
+    const q = {};
+    let K = !1, N = !1;
+    if (t !== void 0) {
+      const y = L.getState();
+      Object.is(y.crop, t) || (q.crop = t, K = !0);
+    }
+    u !== void 0 && L.getState().zoom !== u && (q.zoom = u, K = !0, N = !0), n !== void 0 && L.getState().rotation !== n && (q.rotation = n, K = !0, N = !0), K && (L.batch(() => {
+      Object.entries(q).forEach(([y, T]) => {
+        L.setState(y, T);
+      });
+    }), N && Z.current && requestAnimationFrame(() => {
+      const y = L.getState();
+      if (y.cropSize && y.mediaSize) {
+        const T = c ? y.crop : V(
+          y.crop,
+          y.mediaSize,
+          y.cropSize,
+          y.zoom,
+          y.rotation
+        );
+        (Math.abs(T.x - y.crop.x) > 1e-3 || Math.abs(T.y - y.crop.y) > 1e-3) && L.setState("crop", T);
+      }
+    }));
+  }, [t, u, n, L, c]);
+  const U = s.useMemo(
+    () => ({
+      minZoom: b,
+      maxZoom: h,
+      zoomSpeed: a,
+      keyboardStep: m,
+      aspectRatio: i,
+      shape: f,
+      objectFit: g,
+      preventScrollZoom: C,
+      allowOverflow: c,
+      withGrid: p,
+      rootRef: Z
+    }),
+    [
+      b,
+      h,
+      a,
+      m,
+      i,
+      f,
+      g,
+      C,
+      c,
+      p
+    ]
+  );
+  return /* @__PURE__ */ j(Fe.Provider, { value: L, children: /* @__PURE__ */ j(Ne.Provider, { value: U, children: /* @__PURE__ */ j(
+    "div",
+    {
+      "data-slot": "cropper-wrapper",
+      className: Y("relative size-full overflow-hidden", F),
+      children: /* @__PURE__ */ j(Xe, { ...D })
+    }
+  ) }) });
+}
+function Xe(o) {
+  const { className: t, asChild: u, ref: b, ...h } = o, a = fe(Re), n = he(Re), m = k((e) => e.crop), i = k((e) => e.zoom), f = k((e) => e.rotation), g = k((e) => e.mediaSize), c = k((e) => e.cropSize), C = be(b, a.rootRef), p = s.useRef({ x: 0, y: 0 }), x = s.useRef({ x: 0, y: 0 }), A = s.useRef({ x: 0, y: 0 }), v = s.useRef(0), r = s.useRef(0), d = s.useRef(null), P = s.useRef(null), l = s.useRef(null), M = s.useRef(!1), E = s.useRef(0), F = s.useRef(0), D = s.useCallback(() => {
+    d.current && (cancelAnimationFrame(d.current), d.current = null), P.current && (cancelAnimationFrame(P.current), P.current = null), l.current && (clearTimeout(l.current), l.current = null), M.current = !1;
+  }, []), B = s.useCallback(() => {
+    ne.size > _ * 1.5 && ne.clear(), oe.size > _ * 1.5 && oe.clear();
+  }, []), W = s.useCallback(
+    (e) => ({
+      x: Number(e.clientX),
+      y: Number(e.clientY)
+    }),
+    []
+  ), Z = s.useCallback(
+    (e) => ({
+      x: Number(e.clientX),
+      y: Number(e.clientY)
+    }),
+    []
+  ), L = s.useCallback(() => {
+    if (a.rootRef?.current) {
+      const e = a.rootRef.current.getBoundingClientRect();
+      A.current = { x: e.left, y: e.top };
+    }
+  }, [a.rootRef]), U = s.useCallback(
+    ({ x: e, y: w }, R) => {
+      if (!a.rootRef?.current)
+        return { x: 0, y: 0 };
+      const S = a.rootRef.current.getBoundingClientRect();
+      return {
+        x: S.width / 2 - (e - R.x),
+        y: S.height / 2 - (w - R.y)
+      };
+    },
+    [a.rootRef]
+  ), q = s.useCallback(
+    ({ x: e, y: w }) => ({
+      x: (e + m.x) / i,
+      y: (w + m.y) / i
+    }),
+    [m, i]
+  ), K = s.useCallback(() => {
+    if (!c || !g) return;
+    const e = a.allowOverflow ? m : V(m, g, c, i, f);
+    (Math.abs(e.x - m.x) > 1e-3 || Math.abs(e.y - m.y) > 1e-3) && n.setState("crop", e);
+  }, [c, g, a.allowOverflow, m, i, f, n]), N = s.useCallback(
+    (e, w, R = !0) => {
+      if (!c || !g) return;
+      const S = we(e, a.minZoom, a.maxZoom);
+      n.batch(() => {
+        if (R) {
+          const z = U(
+            w,
+            A.current
+          ), I = q(z), O = {
+            x: I.x * S - z.x,
+            y: I.y * S - z.y
+          }, ee = a.allowOverflow ? O : V(
+            O,
+            g,
+            c,
+            S,
+            f
+          );
+          n.setState("crop", ee);
+        }
+        n.setState("zoom", S);
+      }), requestAnimationFrame(() => {
+        K();
+      });
+    },
+    [
+      c,
+      g,
+      a.minZoom,
+      a.maxZoom,
+      a.allowOverflow,
+      U,
+      q,
+      f,
+      n,
+      K
+    ]
+  ), y = s.useCallback(
+    ({ x: e, y: w }) => {
+      p.current = { x: e, y: w }, x.current = { ...m }, n.setState("isDragging", !0);
+    },
+    [m, n]
+  ), T = s.useCallback(
+    ({ x: e, y: w }) => {
+      d.current && cancelAnimationFrame(d.current), d.current = requestAnimationFrame(() => {
+        if (!c || !g || e === void 0 || w === void 0) return;
+        const R = e - p.current.x, S = w - p.current.y;
+        if (Math.abs(R) < 2 && Math.abs(S) < 2)
+          return;
+        const z = {
+          x: x.current.x + R,
+          y: x.current.y + S
+        }, I = a.allowOverflow ? z : V(
+          z,
+          g,
+          c,
+          i,
+          f
+        ), O = n.getState().crop;
+        (Math.abs(I.x - O.x) > 1 || Math.abs(I.y - O.y) > 1) && n.setState("crop", I);
+      });
+    },
+    [c, g, a.allowOverflow, i, f, n]
+  ), J = s.useCallback(
+    (e) => T(W(e)),
+    [W, T]
+  ), Q = s.useCallback(
+    (e) => {
+      if (e.preventDefault(), e.touches.length === 2) {
+        const [w, R] = e.touches ?? [];
+        if (w && R) {
+          const S = Z(w), z = Z(R), I = $e(S, z);
+          T(I), P.current && cancelAnimationFrame(P.current), P.current = requestAnimationFrame(() => {
+            const O = Ee(S, z), ee = O / v.current;
+            if (Math.abs(ee - 1) > 0.01) {
+              const pe = i * ee;
+              N(pe, I, !1), v.current = O;
+            }
+            const Ce = Ae(S, z), ye = Ce - r.current;
+            if (Math.abs(ye) > 0.5) {
+              const pe = f + ye;
+              n.setState("rotation", pe), r.current = Ce;
+            }
+          });
+        }
+      } else if (e.touches.length === 1) {
+        const w = e.touches[0];
+        w && T(Z(w));
+      }
+    },
+    [Z, T, i, N, f, n]
+  ), G = s.useCallback(
+    (e) => {
+      if (e.preventDefault(), M.current)
+        return;
+      const w = { x: Number(e.clientX), y: Number(e.clientY) }, R = E.current - 1 + e.scale;
+      N(R, w, !0);
+      const S = F.current + e.rotation;
+      n.setState("rotation", S);
+    },
+    [N, n]
+  ), X = s.useCallback(() => {
+    document.removeEventListener(
+      "gesturechange",
+      G
+    ), document.removeEventListener("gestureend", X);
+  }, [G]), de = s.useCallback(
+    (e) => {
+      e.preventDefault(), document.addEventListener(
+        "gesturechange",
+        G
+      ), document.addEventListener("gestureend", X), E.current = i, F.current = f;
+    },
+    [i, f, G, X]
+  ), me = s.useCallback(
+    (e) => e.preventDefault(),
+    []
+  ), xe = s.useCallback(() => {
+    document.removeEventListener("mousemove", J), document.removeEventListener("touchmove", Q), document.removeEventListener(
+      "gesturechange",
+      G
+    ), document.removeEventListener("gestureend", X);
+  }, [J, Q, G, X]), H = s.useCallback(() => {
+    M.current = !1, n.setState("isDragging", !1), D(), document.removeEventListener("mouseup", H), document.removeEventListener("touchend", H), xe();
+  }, [n, xe, D]), Se = s.useCallback((e) => {
+    let w = e.deltaX, R = e.deltaY, S = e.deltaZ;
+    return e.deltaMode === 1 ? (w *= 16, R *= 16, S *= 16) : e.deltaMode === 2 && (w *= 400, R *= 400, S *= 400), { deltaX: w, deltaY: R, deltaZ: S };
+  }, []), ge = s.useCallback(
+    (e) => {
+      if (h.onWheelZoom?.(e), e.defaultPrevented) return;
+      e.preventDefault();
+      const w = W(e), { deltaY: R } = Se(e), S = i - R * a.zoomSpeed / 200;
+      N(S, w, !0), n.batch(() => {
+        const z = n.getState();
+        z.isWheelZooming || n.setState("isWheelZooming", !0), z.isDragging || n.setState("isDragging", !0);
+      }), l.current && clearTimeout(l.current), l.current = window.setTimeout(() => {
+        n.batch(() => {
+          n.setState("isWheelZooming", !1), n.setState("isDragging", !1);
+        });
+      }, 250);
+    },
+    [
+      h.onWheelZoom,
+      W,
+      i,
+      a.zoomSpeed,
+      N,
+      Se,
+      n
+    ]
+  ), Oe = s.useCallback(
+    (e) => {
+      if (h.onKeyUp?.(e), e.defaultPrevented) return;
+      (/* @__PURE__ */ new Set([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight"
+      ])).has(e.key) && (e.preventDefault(), n.setState("isDragging", !1));
+    },
+    [h.onKeyUp, n]
+  ), je = s.useCallback(
+    (e) => {
+      if (h.onKeyDown?.(e), e.defaultPrevented || !c || !g) return;
+      let w = a.keyboardStep;
+      e.shiftKey && (w *= 0.2);
+      const S = {
+        ArrowUp: () => ({ ...m, y: m.y - w }),
+        ArrowDown: () => ({ ...m, y: m.y + w }),
+        ArrowLeft: () => ({ ...m, x: m.x - w }),
+        ArrowRight: () => ({ ...m, x: m.x + w })
+      }[e.key];
+      if (!S) return;
+      e.preventDefault();
+      let z = S();
+      a.allowOverflow || (z = V(z, g, c, i, f)), e.repeat || n.setState("isDragging", !0), n.setState("crop", z);
+    },
+    [
+      h.onKeyDown,
+      c,
+      g,
+      a.keyboardStep,
+      a.allowOverflow,
+      m,
+      i,
+      f,
+      n
+    ]
+  ), qe = s.useCallback(
+    (e) => {
+      h.onMouseDown?.(e), !e.defaultPrevented && (e.preventDefault(), document.addEventListener("mousemove", J), document.addEventListener("mouseup", H), L(), y(W(e)));
+    },
+    [
+      h.onMouseDown,
+      W,
+      y,
+      H,
+      J,
+      L
+    ]
+  ), Ke = s.useCallback(
+    (e) => {
+      if (h.onTouchStart?.(e), !e.defaultPrevented) {
+        if (M.current = !0, document.addEventListener("touchmove", Q, { passive: !1 }), document.addEventListener("touchend", H), L(), e.touches.length === 2) {
+          const [w, R] = e.touches ? Array.from(e.touches) : [];
+          if (w && R) {
+            const S = Z(w), z = Z(R);
+            v.current = Ee(
+              S,
+              z
+            ), r.current = Ae(
+              S,
+              z
+            ), y($e(S, z));
+          }
+        } else if (e.touches.length === 1) {
+          const w = e.touches[0];
+          w && y(Z(w));
+        }
+      }
+    },
+    [
+      h.onTouchStart,
+      H,
+      Q,
+      L,
+      Z,
+      y
+    ]
+  );
+  return s.useEffect(() => {
+    const e = a.rootRef?.current;
+    if (e)
+      return a.preventScrollZoom || e.addEventListener("wheel", ge, { passive: !1 }), e.addEventListener("gesturestart", me), e.addEventListener("gesturestart", de), () => {
+        a.preventScrollZoom || e.removeEventListener("wheel", ge), e.removeEventListener("gesturestart", me), e.removeEventListener(
+          "gesturestart",
+          de
+        ), D();
+      };
+  }, [
+    a.rootRef,
+    a.preventScrollZoom,
+    ge,
+    D,
+    me,
+    de
+  ]), s.useEffect(() => () => {
+    D(), B();
+  }, [D, B]), /* @__PURE__ */ j(
+    u ? ae : "div",
+    {
+      "data-slot": "cropper",
+      tabIndex: 0,
+      ...h,
+      ref: C,
+      className: Y(
+        "absolute inset-0 flex cursor-move touch-none select-none items-center justify-center overflow-hidden outline-none",
+        t
+      ),
+      onKeyUp: Oe,
+      onKeyDown: je,
+      onMouseDown: qe,
+      onTouchStart: Ke
+    }
+  );
+}
+const We = ke("will-change-transform", {
+  variants: {
+    objectFit: {
+      contain: "absolute inset-0 m-auto max-h-full max-w-full",
+      cover: "h-auto w-full",
+      "horizontal-cover": "h-auto w-full",
+      "vertical-cover": "h-full w-auto"
+    }
+  },
+  defaultVariants: {
+    objectFit: "contain"
+  }
+});
+function Ie({
+  mediaRef: o,
+  context: t,
+  store: u,
+  rotation: b,
+  getNaturalDimensions: h
+}) {
+  return { computeSizes: s.useCallback(() => {
+    const n = o.current, m = t.rootRef?.current;
+    if (!n || !m) return;
+    const i = m.getBoundingClientRect(), f = i.width / i.height, { width: g, height: c } = h(n), C = n.offsetWidth < g || n.offsetHeight < c, p = g / c;
+    let x;
+    if (C) {
+      const d = {
+        contain: () => f > p ? {
+          width: i.height * p,
+          height: i.height
+        } : {
+          width: i.width,
+          height: i.width / p
+        },
+        "horizontal-cover": () => ({
+          width: i.width,
+          height: i.width / p
+        }),
+        "vertical-cover": () => ({
+          width: i.height * p,
+          height: i.height
+        }),
+        cover: () => f < p ? {
+          width: i.width,
+          height: i.width / p
+        } : {
+          width: i.height * p,
+          height: i.height
+        }
+      }[t.objectFit];
+      x = d ? d() : f > p ? {
+        width: i.height * p,
+        height: i.height
+      } : {
+        width: i.width,
+        height: i.width / p
+      };
+    } else
+      x = {
+        width: n.offsetWidth,
+        height: n.offsetHeight
+      };
+    const A = {
+      ...x,
+      naturalWidth: g,
+      naturalHeight: c
+    };
+    u.setState("mediaSize", A);
+    const v = He(
+      A.width,
+      A.height,
+      i.width,
+      i.height,
+      t.aspectRatio,
+      b
+    );
+    return u.setState("cropSize", v), requestAnimationFrame(() => {
+      const r = u.getState();
+      if (r.cropSize && r.mediaSize) {
+        const d = V(
+          r.crop,
+          r.mediaSize,
+          r.cropSize,
+          r.zoom,
+          r.rotation
+        );
+        (Math.abs(d.x - r.crop.x) > 1e-3 || Math.abs(d.y - r.crop.y) > 1e-3) && u.setState("crop", d);
+      }
+    }), { mediaSize: A, cropSize: v };
+  }, [
+    o,
+    t.aspectRatio,
+    t.rootRef,
+    t.objectFit,
+    u,
+    b,
+    h
+  ]) };
+}
+function ot(o) {
+  const {
+    className: t,
+    style: u,
+    asChild: b,
+    ref: h,
+    onLoad: a,
+    objectFit: n,
+    snapPixels: m = !1,
+    ...i
+  } = o, f = fe(ve), g = he(ve), c = k((l) => l.crop), C = k((l) => l.zoom), p = k((l) => l.rotation), x = s.useRef(null), A = be(h, x), v = s.useCallback(
+    (l) => ({
+      width: l.naturalWidth,
+      height: l.naturalHeight
+    }),
+    []
+  ), { computeSizes: r } = Ie({
+    mediaRef: x,
+    context: f,
+    store: g,
+    rotation: p,
+    getNaturalDimensions: v
+  }), d = s.useCallback(() => {
+    x.current && (r(), a?.(
+      new Event("load")
+    ));
+  }, [r, a]);
+  return s.useEffect(() => {
+    const l = x.current;
+    l?.complete && l.naturalWidth > 0 && d();
+  }, [d]), s.useEffect(() => {
+    const l = f.rootRef?.current;
+    if (l)
+      if (typeof ResizeObserver < "u") {
+        let M = !0;
+        const E = new ResizeObserver(() => {
+          if (M) {
+            M = !1;
+            return;
+          }
+          const F = () => {
+            const D = x.current;
+            D?.complete && D.naturalWidth > 0 && r();
+          };
+          "requestIdleCallback" in window ? requestIdleCallback(F) : setTimeout(F, 16);
+        });
+        return E.observe(l), () => {
+          E.disconnect();
+        };
+      } else {
+        const M = () => {
+          const E = x.current;
+          E?.complete && E.naturalWidth > 0 && r();
+        };
+        return window.addEventListener("resize", M), () => {
+          window.removeEventListener("resize", M);
+        };
+      }
+  }, [f.rootRef, r]), /* @__PURE__ */ j(
+    b ? ae : "img",
+    {
+      "data-slot": "cropper-image",
+      ...i,
+      ref: A,
+      className: Y(
+        We({
+          objectFit: n ?? f.objectFit,
+          className: t
+        })
+      ),
+      style: {
+        transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${p}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${p}deg) scale(${C})`,
+        ...u
+      },
+      onLoad: d
+    }
+  );
+}
+function nt(o) {
+  const {
+    className: t,
+    style: u,
+    asChild: b,
+    ref: h,
+    onLoadedMetadata: a,
+    objectFit: n,
+    snapPixels: m = !1,
+    ...i
+  } = o, f = fe(Me), g = he(Me), c = k((l) => l.crop), C = k((l) => l.zoom), p = k((l) => l.rotation), x = s.useRef(null), A = be(h, x), v = s.useCallback(
+    (l) => ({
+      width: l.videoWidth,
+      height: l.videoHeight
+    }),
+    []
+  ), { computeSizes: r } = Ie({
+    mediaRef: x,
+    context: f,
+    store: g,
+    rotation: p,
+    getNaturalDimensions: v
+  }), d = s.useCallback(() => {
+    x.current && (r(), a?.(
+      new Event(
+        "loadedmetadata"
+      )
+    ));
+  }, [r, a]);
+  return s.useEffect(() => {
+    const l = f.rootRef?.current;
+    if (l)
+      if (typeof ResizeObserver < "u") {
+        let M = !0;
+        const E = new ResizeObserver(() => {
+          if (M) {
+            M = !1;
+            return;
+          }
+          const F = () => {
+            const D = x.current;
+            D && D.videoWidth > 0 && D.videoHeight > 0 && r();
+          };
+          "requestIdleCallback" in window ? requestIdleCallback(F) : setTimeout(F, 16);
+        });
+        return E.observe(l), () => {
+          E.disconnect();
+        };
+      } else {
+        const M = () => {
+          const E = x.current;
+          E && E.videoWidth > 0 && E.videoHeight > 0 && r();
+        };
+        return window.addEventListener("resize", M), () => {
+          window.removeEventListener("resize", M);
+        };
+      }
+  }, [f.rootRef, r]), /* @__PURE__ */ j(
+    b ? ae : "video",
+    {
+      "data-slot": "cropper-video",
+      autoPlay: !0,
+      playsInline: !0,
+      loop: !0,
+      muted: !0,
+      controls: !1,
+      ...i,
+      ref: A,
+      className: Y(
+        We({
+          objectFit: n ?? f.objectFit,
+          className: t
+        })
+      ),
+      style: {
+        transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${p}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${p}deg) scale(${C})`,
+        ...u
+      },
+      onLoadedMetadata: d
+    }
+  );
+}
+const Ye = ke(
+  "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 box-border overflow-hidden border border-[2.5px] border-white/90 shadow-[0_0_0_9999em_rgba(0,0,0,0.5)]",
+  {
+    variants: {
+      shape: {
+        rectangle: "",
+        circle: "rounded-full"
+      },
+      withGrid: {
+        true: "before:absolute before:top-0 before:right-1/3 before:bottom-0 before:left-1/3 before:box-border before:border before:border-white/50 before:border-t-0 before:border-b-0 before:content-[''] after:absolute after:top-1/3 after:right-0 after:bottom-1/3 after:left-0 after:box-border after:border after:border-white/50 after:border-r-0 after:border-l-0 after:content-['']",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      shape: "rectangle",
+      withGrid: !1
+    }
+  }
+);
+function rt(o) {
+  const {
+    className: t,
+    style: u,
+    asChild: b,
+    ref: h,
+    snapPixels: a = !1,
+    shape: n,
+    withGrid: m,
+    ...i
+  } = o, f = fe(_e), g = k((C) => C.cropSize);
+  return g ? /* @__PURE__ */ j(
+    b ? ae : "div",
+    {
+      "data-slot": "cropper-area",
+      ...i,
+      ref: h,
+      className: Y(
+        Ye({
+          shape: n ?? f.shape,
+          withGrid: m ?? f.withGrid,
+          className: t
+        })
+      ),
+      style: {
+        width: a ? Math.round(g.width) : g.width,
+        height: a ? Math.round(g.height) : g.height,
+        ...u
+      }
+    }
+  ) : null;
+}
+export {
+  rt as Area,
+  tt as Cropper,
+  rt as CropperArea,
+  ot as CropperImage,
+  nt as CropperVideo,
+  ot as Image,
+  tt as Root,
+  nt as Video,
+  k as useCropper
+};
+//# sourceMappingURL=Cropper.js.map