@sth87/shadcn-design-system 0.1.8 → 0.2.0

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

@@ -1,47 +1,17 @@
 import { jsx as j } from "react/jsx-runtime";
-import { Slot as ae } from "@radix-ui/react-slot";
-import "../../packages/ui/src/components/button.js";
-import "../../packages/ui/src/components/button-group.js";
-import "../../packages/ui/src/components/input.js";
-import "../../packages/ui/src/components/textarea.js";
-import "@radix-ui/react-label";
 import { cn as Y } from "../../packages/ui/src/lib/utils.js";
-import "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import * as s from "react";
-import "lucide-react";
-import "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-import "@radix-ui/react-scroll-area";
-import "../../packages/ui/src/components/tree-view.js";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-avatar";
-import "../../packages/ui/src/components/badge.js";
-import "../../packages/ui/src/components/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "cmdk";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "../../packages/ui/src/components/input-otp.js";
-import "../../packages/ui/src/components/radio-group.js";
-import "../../packages/ui/src/components/sidebar.js";
-import "@radix-ui/react-slider";
-import "../../packages/ui/src/components/tabs.js";
-import "../../packages/ui/src/components/toggle.js";
+import { Slot as ae } from "@radix-ui/react-slot";
 import { useComposedRefs as be } from "../../packages/ui/src/lib/compose-refs.js";
 import { cva as ke } from "class-variance-authority";
-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(), re = /* @__PURE__ */ new Map();
+import * as i 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 ne(o, t = 4 / te) {
+function re(o, t = 4 / te) {
   return Math.round(o / t) * t;
 }
 function Te(o, t = 0.01) {
@@ -50,7 +20,7 @@ function Te(o, t = 0.01) {
 function ce(o, t = 1) {
   return Math.round(o / t) * t;
 }
-function ie(o) {
+function se(o) {
   return Math.round(o * te) / te;
 }
 function ue(o, t) {
@@ -78,68 +48,68 @@ function Ae(o, t) {
 function Ge(o) {
   return o * Math.PI / 180;
 }
-function se(o, t, u) {
+function ie(o, t, u) {
   const b = `${$(o)}-${$(t)}-${ce(u)}`, d = ue(ze, b);
   if (d)
     return d;
-  const a = Ge(u), r = Math.cos(a), m = Math.sin(a), i = {
-    width: Math.abs(r * o) + Math.abs(m * t),
-    height: Math.abs(m * o) + Math.abs(r * t)
+  const a = Ge(u), n = Math.cos(a), m = Math.sin(a), s = {
+    width: Math.abs(n * o) + Math.abs(m * t),
+    height: Math.abs(m * o) + Math.abs(n * t)
   };
-  return le(ze, b, i, _), i;
+  return le(ze, b, s, _), s;
 }
 function He(o, t, u, b, d, a = 0) {
-  const r = `${$(o, 8)}-${$(t, 8)}-${$(u, 8)}-${$(b, 8)}-${$(d, 0.01)}-${ce(a)}`, m = ue(Pe, r);
+  const n = `${$(o, 8)}-${$(t, 8)}-${$(u, 8)}-${$(b, 8)}-${$(d, 0.01)}-${ce(a)}`, m = ue(Pe, n);
   if (m)
     return m;
-  const { width: i, height: f } = se(o, t, a), p = Math.min(i, u), c = Math.min(f, b), C = p > c * d ? {
+  const { width: s, height: f } = ie(o, t, a), g = Math.min(s, u), c = Math.min(f, b), C = g > c * d ? {
     width: c * d,
     height: c
   } : {
-    width: p,
-    height: p / d
+    width: g,
+    height: g / d
   };
-  return le(Pe, r, C, _), C;
+  return le(Pe, n, C, _), C;
 }
 function V(o, t, u, b, d = 0) {
-  const a = ne(o.x), r = ne(o.y), m = `${a}-${r}-${$(t.width)}-${$(t.height)}-${$(u.width)}-${$(u.height)}-${Te(b)}-${ce(d)}`, i = ue(re, m);
-  if (i)
-    return i;
-  const { width: f, height: p } = se(
+  const a = re(o.x), n = re(o.y), m = `${a}-${n}-${$(t.width)}-${$(t.height)}-${$(u.width)}-${$(u.height)}-${Te(b)}-${ce(d)}`, s = ue(ne, m);
+  if (s)
+    return s;
+  const { width: f, height: g } = ie(
     t.width,
     t.height,
     d
-  ), c = f * b * 0.5 - u.width * 0.5, C = p * b * 0.5 - u.height * 0.5, g = {
+  ), 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(re, m, g, _), g;
+  return le(ne, m, p, _), p;
 }
-function De(o, t, u, b, d, a = 0, r = !1) {
-  const m = `${ne(o.x)}-${ne(o.y)}-${$(t.width)}-${$(t.height)}-${$(t.naturalWidth)}-${$(t.naturalHeight)}-${$(u.width)}-${$(u.height)}-${$(b, 0.01)}-${Te(d)}-${ce(a)}-${r}`, i = ue(oe, m);
-  if (i) return i;
-  const f = r ? (P, l) => l : (P, l) => Math.min(P, Math.max(0, l)), p = se(t.width, t.height, a), c = se(
+function De(o, t, u, b, d, 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(d)}-${ce(a)}-${n}`, s = ue(oe, m);
+  if (s) return s;
+  const f = n ? (P, l) => l : (P, l) => Math.min(P, Math.max(0, l)), g = ie(t.width, t.height, a), c = ie(
     t.naturalWidth,
     t.naturalHeight,
     a
   ), C = {
     x: f(
       100,
-      ((p.width - u.width / d) / 2 - o.x / d) / p.width * 100
+      ((g.width - u.width / d) / 2 - o.x / d) / g.width * 100
     ),
     y: f(
       100,
-      ((p.height - u.height / d) / 2 - o.y / d) / p.height * 100
+      ((g.height - u.height / d) / 2 - o.y / d) / g.height * 100
     ),
     width: f(
       100,
-      u.width / p.width * 100 / d
+      u.width / g.width * 100 / d
     ),
     height: f(
       100,
-      u.height / p.height * 100 / d
+      u.height / g.height * 100 / d
     )
-  }, g = Math.round(
+  }, p = Math.round(
     f(
       c.width,
       C.width * c.width / 100
@@ -153,9 +123,9 @@ function De(o, t, u, b, d, a = 0, r = !1) {
     width: Math.round(x * b),
     height: x
   } : {
-    width: g,
-    height: Math.round(g / b)
-  }, n = {
+    width: p,
+    height: Math.round(p / b)
+  }, r = {
     ...v,
     x: Math.round(
       f(
@@ -169,36 +139,36 @@ function De(o, t, u, b, d, a = 0, r = !1) {
         C.y * c.height / 100
       )
     )
-  }, h = { croppedAreaPercentages: C, croppedAreaPixels: n };
+  }, h = { croppedAreaPercentages: C, croppedAreaPixels: r };
   return le(oe, m, h, _), h;
 }
 function Le(o) {
-  const t = s.useRef(null);
+  const t = i.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, d, a, r, m, i, f, p, c, C) {
-  let g = !1, x = null;
+const Ve = typeof window < "u" ? i.useLayoutEffect : i.useEffect;
+function Be(o, t, u, b, d, a, n, m, s, f, g, c, C) {
+  let p = !1, x = null;
   function A() {
     x == null && (x = requestAnimationFrame(() => {
       x = null;
-      const n = t.current;
-      if (n?.mediaSize && n.cropSize && r) {
+      const r = t.current;
+      if (r?.mediaSize && r.cropSize && n) {
         const { croppedAreaPercentages: h, croppedAreaPixels: P } = De(
-          n.crop,
-          n.mediaSize,
-          n.cropSize,
+          r.crop,
+          r.mediaSize,
+          r.cropSize,
           u,
-          n.zoom,
-          n.rotation,
+          r.zoom,
+          r.rotation,
           b
         );
-        r(h, P);
+        n(h, P);
       }
     }));
   }
   const v = {
-    subscribe: (n) => o.current ? (o.current.add(n), () => o.current?.delete(n)) : () => {
+    subscribe: (r) => o.current ? (o.current.add(r), () => o.current?.delete(r)) : () => {
     },
     getState: () => t.current ?? {
       crop: { x: 0, y: 0 },
@@ -209,20 +179,20 @@ function Be(o, t, u, b, d, a, r, m, i, f, p, c, C) {
       isDragging: !1,
       isWheelZooming: !1
     },
-    setState: (n, h) => {
+    setState: (r, h) => {
       const P = t.current;
-      if (!(!P || Object.is(P[n], h))) {
-        if (P[n] = h, n === "crop" && typeof h == "object" && h && "x" in h)
+      if (!(!P || Object.is(P[r], h))) {
+        if (P[r] = h, r === "crop" && typeof h == "object" && h && "x" in h)
           d?.(h);
-        else if (n === "zoom" && typeof h == "number")
-          i?.(h);
-        else if (n === "rotation" && typeof h == "number")
+        else if (r === "zoom" && typeof h == "number")
+          s?.(h);
+        else if (r === "rotation" && typeof h == "number")
           f?.(h);
-        else if (n === "cropSize" && typeof h == "object" && h && "width" in h)
+        else if (r === "cropSize" && typeof h == "object" && h && "width" in h)
           a?.(h);
-        else if (n === "mediaSize" && typeof h == "object" && h && "naturalWidth" in h)
-          p?.(h);
-        else if (n === "isDragging")
+        else if (r === "mediaSize" && typeof h == "object" && h && "naturalWidth" in h)
+          g?.(h);
+        else if (r === "isDragging")
           if (h)
             c?.();
           else {
@@ -241,69 +211,69 @@ function Be(o, t, u, b, d, a, r, m, i, f, p, c, C) {
               m(M, E);
             }
           }
-        (n === "crop" || n === "zoom" || n === "rotation" || n === "mediaSize" || n === "cropSize") && r && A(), g || v.notify();
+        (r === "crop" || r === "zoom" || r === "rotation" || r === "mediaSize" || r === "cropSize") && n && A(), p || v.notify();
       }
     },
     notify: () => {
       if (o.current)
-        for (const n of o.current)
-          n();
+        for (const r of o.current)
+          r();
     },
-    batch: (n) => {
-      if (g) {
-        n();
+    batch: (r) => {
+      if (p) {
+        r();
         return;
       }
-      g = !0;
+      p = !0;
       try {
-        n();
+        r();
       } finally {
-        g = !1, v.notify();
+        p = !1, v.notify();
       }
     }
   };
   return v;
 }
-const Fe = s.createContext(null);
+const Fe = i.createContext(null);
 function de(o) {
-  const t = s.useContext(Fe);
+  const t = i.useContext(Fe);
   if (!t)
     throw new Error(`\`${o}\` must be used within \`${Ze}\``);
   return t;
 }
 function k(o) {
-  const t = de("useStore"), u = s.useCallback(
+  const t = de("useStore"), u = i.useCallback(
     () => o(t.getState()),
     [t, o]
   );
-  return s.useSyncExternalStore(t.subscribe, u, u);
+  return i.useSyncExternalStore(t.subscribe, u, u);
 }
-const Ne = s.createContext(null);
+const Ne = i.createContext(null);
 function fe(o) {
-  const t = s.useContext(Ne);
+  const t = i.useContext(Ne);
   if (!t)
     throw new Error(`\`${o}\` must be used within \`${Ze}\``);
   return t;
 }
-function kt(o) {
+function nt(o) {
   const {
     crop: t = { x: 0, y: 0 },
     zoom: u = 1,
     minZoom: b = 1,
     maxZoom: d = 3,
     zoomSpeed: a = 1,
-    rotation: r = 0,
+    rotation: n = 0,
     keyboardStep: m = 1,
-    aspectRatio: i = 4 / 3,
+    aspectRatio: s = 4 / 3,
     shape: f = "rectangle",
-    objectFit: p = "contain",
+    objectFit: g = "contain",
     allowOverflow: c = !1,
     preventScrollZoom: C = !1,
-    withGrid: g = !1,
+    withGrid: p = !1,
     onCropChange: x,
     onCropSizeChange: A,
     onCropAreaChange: v,
-    onCropComplete: n,
+    onCropComplete: r,
     onZoomChange: h,
     onRotationChange: P,
     onMediaLoaded: l,
@@ -314,21 +284,21 @@ function kt(o) {
   } = o, B = Le(() => /* @__PURE__ */ new Set()), W = Le(() => ({
     crop: t,
     zoom: u,
-    rotation: r,
+    rotation: n,
     mediaSize: null,
     cropSize: null,
     isDragging: !1,
     isWheelZooming: !1
-  })), Z = s.useRef(null), L = s.useMemo(
+  })), Z = i.useRef(null), L = i.useMemo(
     () => Be(
       B,
       W,
-      i,
+      s,
       c,
       x,
       A,
       v,
-      n,
+      r,
       h,
       P,
       l,
@@ -338,12 +308,12 @@ function kt(o) {
     [
       B,
       W,
-      i,
+      s,
       c,
       x,
       A,
       v,
-      n,
+      r,
       h,
       P,
       l,
@@ -358,7 +328,7 @@ function kt(o) {
       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), r !== void 0 && L.getState().rotation !== r && (q.rotation = r, K = !0, N = !0), K && (L.batch(() => {
+    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);
       });
@@ -375,19 +345,19 @@ function kt(o) {
         (Math.abs(T.x - y.crop.x) > 1e-3 || Math.abs(T.y - y.crop.y) > 1e-3) && L.setState("crop", T);
       }
     }));
-  }, [t, u, r, L, c]);
-  const U = s.useMemo(
+  }, [t, u, n, L, c]);
+  const U = i.useMemo(
     () => ({
       minZoom: b,
       maxZoom: d,
       zoomSpeed: a,
       keyboardStep: m,
-      aspectRatio: i,
+      aspectRatio: s,
       shape: f,
-      objectFit: p,
+      objectFit: g,
       preventScrollZoom: C,
       allowOverflow: c,
-      withGrid: g,
+      withGrid: p,
       rootRef: Z
     }),
     [
@@ -395,12 +365,12 @@ function kt(o) {
       d,
       a,
       m,
-      i,
+      s,
       f,
-      p,
+      g,
       C,
       c,
-      g
+      p
     ]
   );
   return /* @__PURE__ */ j(Fe.Provider, { value: L, children: /* @__PURE__ */ j(Ne.Provider, { value: U, children: /* @__PURE__ */ j(
@@ -413,28 +383,28 @@ function kt(o) {
   ) }) });
 }
 function Xe(o) {
-  const { className: t, asChild: u, ref: b, ...d } = o, a = fe(Re), r = de(Re), m = k((e) => e.crop), i = k((e) => e.zoom), f = k((e) => e.rotation), p = k((e) => e.mediaSize), c = k((e) => e.cropSize), C = be(b, a.rootRef), g = s.useRef({ x: 0, y: 0 }), x = s.useRef({ x: 0, y: 0 }), A = s.useRef({ x: 0, y: 0 }), v = s.useRef(0), n = s.useRef(0), h = 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(() => {
+  const { className: t, asChild: u, ref: b, ...d } = o, a = fe(Re), n = de(Re), m = k((e) => e.crop), s = 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 = i.useRef({ x: 0, y: 0 }), x = i.useRef({ x: 0, y: 0 }), A = i.useRef({ x: 0, y: 0 }), v = i.useRef(0), r = i.useRef(0), h = i.useRef(null), P = i.useRef(null), l = i.useRef(null), M = i.useRef(!1), E = i.useRef(0), F = i.useRef(0), D = i.useCallback(() => {
     h.current && (cancelAnimationFrame(h.current), h.current = null), P.current && (cancelAnimationFrame(P.current), P.current = null), l.current && (clearTimeout(l.current), l.current = null), M.current = !1;
-  }, []), B = s.useCallback(() => {
-    re.size > _ * 1.5 && re.clear(), oe.size > _ * 1.5 && oe.clear();
-  }, []), W = s.useCallback(
+  }, []), B = i.useCallback(() => {
+    ne.size > _ * 1.5 && ne.clear(), oe.size > _ * 1.5 && oe.clear();
+  }, []), W = i.useCallback(
     (e) => ({
       x: Number(e.clientX),
       y: Number(e.clientY)
     }),
     []
-  ), Z = s.useCallback(
+  ), Z = i.useCallback(
     (e) => ({
       x: Number(e.clientX),
       y: Number(e.clientY)
     }),
     []
-  ), L = s.useCallback(() => {
+  ), L = i.useCallback(() => {
     if (a.rootRef?.current) {
       const e = a.rootRef.current.getBoundingClientRect();
       A.current = { x: e.left, y: e.top };
     }
-  }, [a.rootRef]), U = s.useCallback(
+  }, [a.rootRef]), U = i.useCallback(
     ({ x: e, y: w }, R) => {
       if (!a.rootRef?.current)
         return { x: 0, y: 0 };
@@ -445,21 +415,21 @@ function Xe(o) {
       };
     },
     [a.rootRef]
-  ), q = s.useCallback(
+  ), q = i.useCallback(
     ({ x: e, y: w }) => ({
-      x: (e + m.x) / i,
-      y: (w + m.y) / i
+      x: (e + m.x) / s,
+      y: (w + m.y) / s
     }),
-    [m, i]
-  ), K = s.useCallback(() => {
-    if (!c || !p) return;
-    const e = a.allowOverflow ? m : V(m, p, c, i, f);
-    (Math.abs(e.x - m.x) > 1e-3 || Math.abs(e.y - m.y) > 1e-3) && r.setState("crop", e);
-  }, [c, p, a.allowOverflow, m, i, f, r]), N = s.useCallback(
+    [m, s]
+  ), K = i.useCallback(() => {
+    if (!c || !g) return;
+    const e = a.allowOverflow ? m : V(m, g, c, s, 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, s, f, n]), N = i.useCallback(
     (e, w, R = !0) => {
-      if (!c || !p) return;
+      if (!c || !g) return;
       const S = we(e, a.minZoom, a.maxZoom);
-      r.batch(() => {
+      n.batch(() => {
         if (R) {
           const z = U(
             w,
@@ -469,40 +439,40 @@ function Xe(o) {
             y: I.y * S - z.y
           }, ee = a.allowOverflow ? O : V(
             O,
-            p,
+            g,
             c,
             S,
             f
           );
-          r.setState("crop", ee);
+          n.setState("crop", ee);
         }
-        r.setState("zoom", S);
+        n.setState("zoom", S);
       }), requestAnimationFrame(() => {
         K();
       });
     },
     [
       c,
-      p,
+      g,
       a.minZoom,
       a.maxZoom,
       a.allowOverflow,
       U,
       q,
       f,
-      r,
+      n,
       K
     ]
-  ), y = s.useCallback(
+  ), y = i.useCallback(
     ({ x: e, y: w }) => {
-      g.current = { x: e, y: w }, x.current = { ...m }, r.setState("isDragging", !0);
+      p.current = { x: e, y: w }, x.current = { ...m }, n.setState("isDragging", !0);
     },
-    [m, r]
-  ), T = s.useCallback(
+    [m, n]
+  ), T = i.useCallback(
     ({ x: e, y: w }) => {
       h.current && cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
-        if (!c || !p || e === void 0 || w === void 0) return;
-        const R = e - g.current.x, S = w - g.current.y;
+        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 = {
@@ -510,19 +480,19 @@ function Xe(o) {
           y: x.current.y + S
         }, I = a.allowOverflow ? z : V(
           z,
-          p,
+          g,
           c,
-          i,
+          s,
           f
-        ), O = r.getState().crop;
-        (Math.abs(I.x - O.x) > 1 || Math.abs(I.y - O.y) > 1) && r.setState("crop", I);
+        ), O = n.getState().crop;
+        (Math.abs(I.x - O.x) > 1 || Math.abs(I.y - O.y) > 1) && n.setState("crop", I);
       });
     },
-    [c, p, a.allowOverflow, i, f, r]
-  ), J = s.useCallback(
+    [c, g, a.allowOverflow, s, f, n]
+  ), J = i.useCallback(
     (e) => T(W(e)),
     [W, T]
-  ), Q = s.useCallback(
+  ), Q = i.useCallback(
     (e) => {
       if (e.preventDefault(), e.touches.length === 2) {
         const [w, R] = e.touches ?? [];
@@ -531,13 +501,13 @@ function Xe(o) {
           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 ge = i * ee;
-              N(ge, I, !1), v.current = O;
+              const pe = s * ee;
+              N(pe, I, !1), v.current = O;
             }
-            const Ce = Ae(S, z), ye = Ce - n.current;
+            const Ce = Ae(S, z), ye = Ce - r.current;
             if (Math.abs(ye) > 0.5) {
-              const ge = f + ye;
-              r.setState("rotation", ge), n.current = Ce;
+              const pe = f + ye;
+              n.setState("rotation", pe), r.current = Ce;
             }
           });
         }
@@ -546,67 +516,67 @@ function Xe(o) {
         w && T(Z(w));
       }
     },
-    [Z, T, i, N, f, r]
-  ), G = s.useCallback(
+    [Z, T, s, N, f, n]
+  ), G = i.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;
-      r.setState("rotation", S);
+      n.setState("rotation", S);
     },
-    [N, r]
-  ), X = s.useCallback(() => {
+    [N, n]
+  ), X = i.useCallback(() => {
     document.removeEventListener(
       "gesturechange",
       G
     ), document.removeEventListener("gestureend", X);
-  }, [G]), he = s.useCallback(
+  }, [G]), he = i.useCallback(
     (e) => {
       e.preventDefault(), document.addEventListener(
         "gesturechange",
         G
-      ), document.addEventListener("gestureend", X), E.current = i, F.current = f;
+      ), document.addEventListener("gestureend", X), E.current = s, F.current = f;
     },
-    [i, f, G, X]
-  ), me = s.useCallback(
+    [s, f, G, X]
+  ), me = i.useCallback(
     (e) => e.preventDefault(),
     []
-  ), xe = s.useCallback(() => {
+  ), xe = i.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, r.setState("isDragging", !1), D(), document.removeEventListener("mouseup", H), document.removeEventListener("touchend", H), xe();
-  }, [r, xe, D]), Se = s.useCallback((e) => {
+  }, [J, Q, G, X]), H = i.useCallback(() => {
+    M.current = !1, n.setState("isDragging", !1), D(), document.removeEventListener("mouseup", H), document.removeEventListener("touchend", H), xe();
+  }, [n, xe, D]), Se = i.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 };
-  }, []), pe = s.useCallback(
+  }, []), ge = i.useCallback(
     (e) => {
       if (d.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), r.batch(() => {
-        const z = r.getState();
-        z.isWheelZooming || r.setState("isWheelZooming", !0), z.isDragging || r.setState("isDragging", !0);
+      const w = W(e), { deltaY: R } = Se(e), S = s - 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(() => {
-        r.batch(() => {
-          r.setState("isWheelZooming", !1), r.setState("isDragging", !1);
+        n.batch(() => {
+          n.setState("isWheelZooming", !1), n.setState("isDragging", !1);
         });
       }, 250);
     },
     [
       d.onWheelZoom,
       W,
-      i,
+      s,
       a.zoomSpeed,
       N,
       Se,
-      r
+      n
     ]
-  ), Oe = s.useCallback(
+  ), Oe = i.useCallback(
     (e) => {
       if (d.onKeyUp?.(e), e.defaultPrevented) return;
       (/* @__PURE__ */ new Set([
@@ -614,12 +584,12 @@ function Xe(o) {
         "ArrowDown",
         "ArrowLeft",
         "ArrowRight"
-      ])).has(e.key) && (e.preventDefault(), r.setState("isDragging", !1));
+      ])).has(e.key) && (e.preventDefault(), n.setState("isDragging", !1));
     },
-    [d.onKeyUp, r]
-  ), je = s.useCallback(
+    [d.onKeyUp, n]
+  ), je = i.useCallback(
     (e) => {
-      if (d.onKeyDown?.(e), e.defaultPrevented || !c || !p) return;
+      if (d.onKeyDown?.(e), e.defaultPrevented || !c || !g) return;
       let w = a.keyboardStep;
       e.shiftKey && (w *= 0.2);
       const S = {
@@ -631,20 +601,20 @@ function Xe(o) {
       if (!S) return;
       e.preventDefault();
       let z = S();
-      a.allowOverflow || (z = V(z, p, c, i, f)), e.repeat || r.setState("isDragging", !0), r.setState("crop", z);
+      a.allowOverflow || (z = V(z, g, c, s, f)), e.repeat || n.setState("isDragging", !0), n.setState("crop", z);
     },
     [
       d.onKeyDown,
       c,
-      p,
+      g,
       a.keyboardStep,
       a.allowOverflow,
       m,
-      i,
+      s,
       f,
-      r
+      n
     ]
-  ), qe = s.useCallback(
+  ), qe = i.useCallback(
     (e) => {
       d.onMouseDown?.(e), !e.defaultPrevented && (e.preventDefault(), document.addEventListener("mousemove", J), document.addEventListener("mouseup", H), L(), y(W(e)));
     },
@@ -656,7 +626,7 @@ function Xe(o) {
       J,
       L
     ]
-  ), Ke = s.useCallback(
+  ), Ke = i.useCallback(
     (e) => {
       if (d.onTouchStart?.(e), !e.defaultPrevented) {
         if (M.current = !0, document.addEventListener("touchmove", Q, { passive: !1 }), document.addEventListener("touchend", H), L(), e.touches.length === 2) {
@@ -666,7 +636,7 @@ function Xe(o) {
             v.current = Ee(
               S,
               z
-            ), n.current = Ae(
+            ), r.current = Ae(
               S,
               z
             ), y($e(S, z));
@@ -686,11 +656,11 @@ function Xe(o) {
       y
     ]
   );
-  return s.useEffect(() => {
+  return i.useEffect(() => {
     const e = a.rootRef?.current;
     if (e)
-      return a.preventScrollZoom || e.addEventListener("wheel", pe, { passive: !1 }), e.addEventListener("gesturestart", me), e.addEventListener("gesturestart", he), () => {
-        a.preventScrollZoom || e.removeEventListener("wheel", pe), e.removeEventListener("gesturestart", me), e.removeEventListener(
+      return a.preventScrollZoom || e.addEventListener("wheel", ge, { passive: !1 }), e.addEventListener("gesturestart", me), e.addEventListener("gesturestart", he), () => {
+        a.preventScrollZoom || e.removeEventListener("wheel", ge), e.removeEventListener("gesturestart", me), e.removeEventListener(
           "gesturestart",
           he
         ), D();
@@ -698,11 +668,11 @@ function Xe(o) {
   }, [
     a.rootRef,
     a.preventScrollZoom,
-    pe,
+    ge,
     D,
     me,
     he
-  ]), s.useEffect(() => () => {
+  ]), i.useEffect(() => () => {
     D(), B();
   }, [D, B]), /* @__PURE__ */ j(
     u ? ae : "div",
@@ -742,73 +712,73 @@ function Ie({
   rotation: b,
   getNaturalDimensions: d
 }) {
-  return { computeSizes: s.useCallback(() => {
-    const r = o.current, m = t.rootRef?.current;
-    if (!r || !m) return;
-    const i = m.getBoundingClientRect(), f = i.width / i.height, { width: p, height: c } = d(r), C = r.offsetWidth < p || r.offsetHeight < c, g = p / c;
+  return { computeSizes: i.useCallback(() => {
+    const n = o.current, m = t.rootRef?.current;
+    if (!n || !m) return;
+    const s = m.getBoundingClientRect(), f = s.width / s.height, { width: g, height: c } = d(n), C = n.offsetWidth < g || n.offsetHeight < c, p = g / c;
     let x;
     if (C) {
       const h = {
-        contain: () => f > g ? {
-          width: i.height * g,
-          height: i.height
+        contain: () => f > p ? {
+          width: s.height * p,
+          height: s.height
         } : {
-          width: i.width,
-          height: i.width / g
+          width: s.width,
+          height: s.width / p
         },
         "horizontal-cover": () => ({
-          width: i.width,
-          height: i.width / g
+          width: s.width,
+          height: s.width / p
         }),
         "vertical-cover": () => ({
-          width: i.height * g,
-          height: i.height
+          width: s.height * p,
+          height: s.height
         }),
-        cover: () => f < g ? {
-          width: i.width,
-          height: i.width / g
+        cover: () => f < p ? {
+          width: s.width,
+          height: s.width / p
         } : {
-          width: i.height * g,
-          height: i.height
+          width: s.height * p,
+          height: s.height
         }
       }[t.objectFit];
-      x = h ? h() : f > g ? {
-        width: i.height * g,
-        height: i.height
+      x = h ? h() : f > p ? {
+        width: s.height * p,
+        height: s.height
       } : {
-        width: i.width,
-        height: i.width / g
+        width: s.width,
+        height: s.width / p
       };
     } else
       x = {
-        width: r.offsetWidth,
-        height: r.offsetHeight
+        width: n.offsetWidth,
+        height: n.offsetHeight
       };
     const A = {
       ...x,
-      naturalWidth: p,
+      naturalWidth: g,
       naturalHeight: c
     };
     u.setState("mediaSize", A);
     const v = He(
       A.width,
       A.height,
-      i.width,
-      i.height,
+      s.width,
+      s.height,
       t.aspectRatio,
       b
     );
     return u.setState("cropSize", v), requestAnimationFrame(() => {
-      const n = u.getState();
-      if (n.cropSize && n.mediaSize) {
+      const r = u.getState();
+      if (r.cropSize && r.mediaSize) {
         const h = V(
-          n.crop,
-          n.mediaSize,
-          n.cropSize,
-          n.zoom,
-          n.rotation
+          r.crop,
+          r.mediaSize,
+          r.cropSize,
+          r.zoom,
+          r.rotation
         );
-        (Math.abs(h.x - n.crop.x) > 1e-3 || Math.abs(h.y - n.crop.y) > 1e-3) && u.setState("crop", h);
+        (Math.abs(h.x - r.crop.x) > 1e-3 || Math.abs(h.y - r.crop.y) > 1e-3) && u.setState("crop", h);
       }
     }), { mediaSize: A, cropSize: v };
   }, [
@@ -821,37 +791,37 @@ function Ie({
     d
   ]) };
 }
-function Zt(o) {
+function rt(o) {
   const {
     className: t,
     style: u,
     asChild: b,
     ref: d,
     onLoad: a,
-    objectFit: r,
+    objectFit: n,
     snapPixels: m = !1,
-    ...i
-  } = o, f = fe(ve), p = de(ve), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(d, x), v = s.useCallback(
+    ...s
+  } = o, f = fe(ve), g = de(ve), c = k((l) => l.crop), C = k((l) => l.zoom), p = k((l) => l.rotation), x = i.useRef(null), A = be(d, x), v = i.useCallback(
     (l) => ({
       width: l.naturalWidth,
       height: l.naturalHeight
     }),
     []
-  ), { computeSizes: n } = Ie({
+  ), { computeSizes: r } = Ie({
     mediaRef: x,
     context: f,
-    store: p,
-    rotation: g,
+    store: g,
+    rotation: p,
     getNaturalDimensions: v
-  }), h = s.useCallback(() => {
-    x.current && (n(), a?.(
+  }), h = i.useCallback(() => {
+    x.current && (r(), a?.(
       new Event("load")
     ));
-  }, [n, a]);
-  return s.useEffect(() => {
+  }, [r, a]);
+  return i.useEffect(() => {
     const l = x.current;
     l?.complete && l.naturalWidth > 0 && h();
-  }, [h]), s.useEffect(() => {
+  }, [h]), i.useEffect(() => {
     const l = f.rootRef?.current;
     if (l)
       if (typeof ResizeObserver < "u") {
@@ -863,7 +833,7 @@ function Zt(o) {
           }
           const F = () => {
             const D = x.current;
-            D?.complete && D.naturalWidth > 0 && n();
+            D?.complete && D.naturalWidth > 0 && r();
           };
           "requestIdleCallback" in window ? requestIdleCallback(F) : setTimeout(F, 16);
         });
@@ -873,62 +843,62 @@ function Zt(o) {
       } else {
         const M = () => {
           const E = x.current;
-          E?.complete && E.naturalWidth > 0 && n();
+          E?.complete && E.naturalWidth > 0 && r();
         };
         return window.addEventListener("resize", M), () => {
           window.removeEventListener("resize", M);
         };
       }
-  }, [f.rootRef, n]), /* @__PURE__ */ j(
+  }, [f.rootRef, r]), /* @__PURE__ */ j(
     b ? ae : "img",
     {
       "data-slot": "cropper-image",
-      ...i,
+      ...s,
       ref: A,
       className: Y(
         We({
-          objectFit: r ?? f.objectFit,
+          objectFit: n ?? f.objectFit,
           className: t
         })
       ),
       style: {
-        transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${g}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${g}deg) scale(${C})`,
+        transform: m ? `translate(${se(c.x)}px, ${se(c.y)}px) rotate(${p}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${p}deg) scale(${C})`,
         ...u
       },
       onLoad: h
     }
   );
 }
-function Tt(o) {
+function st(o) {
   const {
     className: t,
     style: u,
     asChild: b,
     ref: d,
     onLoadedMetadata: a,
-    objectFit: r,
+    objectFit: n,
     snapPixels: m = !1,
-    ...i
-  } = o, f = fe(Me), p = de(Me), c = k((l) => l.crop), C = k((l) => l.zoom), g = k((l) => l.rotation), x = s.useRef(null), A = be(d, x), v = s.useCallback(
+    ...s
+  } = o, f = fe(Me), g = de(Me), c = k((l) => l.crop), C = k((l) => l.zoom), p = k((l) => l.rotation), x = i.useRef(null), A = be(d, x), v = i.useCallback(
     (l) => ({
       width: l.videoWidth,
       height: l.videoHeight
     }),
     []
-  ), { computeSizes: n } = Ie({
+  ), { computeSizes: r } = Ie({
     mediaRef: x,
     context: f,
-    store: p,
-    rotation: g,
+    store: g,
+    rotation: p,
     getNaturalDimensions: v
-  }), h = s.useCallback(() => {
-    x.current && (n(), a?.(
+  }), h = i.useCallback(() => {
+    x.current && (r(), a?.(
       new Event(
         "loadedmetadata"
       )
     ));
-  }, [n, a]);
-  return s.useEffect(() => {
+  }, [r, a]);
+  return i.useEffect(() => {
     const l = f.rootRef?.current;
     if (l)
       if (typeof ResizeObserver < "u") {
@@ -940,7 +910,7 @@ function Tt(o) {
           }
           const F = () => {
             const D = x.current;
-            D && D.videoWidth > 0 && D.videoHeight > 0 && n();
+            D && D.videoWidth > 0 && D.videoHeight > 0 && r();
           };
           "requestIdleCallback" in window ? requestIdleCallback(F) : setTimeout(F, 16);
         });
@@ -950,13 +920,13 @@ function Tt(o) {
       } else {
         const M = () => {
           const E = x.current;
-          E && E.videoWidth > 0 && E.videoHeight > 0 && n();
+          E && E.videoWidth > 0 && E.videoHeight > 0 && r();
         };
         return window.addEventListener("resize", M), () => {
           window.removeEventListener("resize", M);
         };
       }
-  }, [f.rootRef, n]), /* @__PURE__ */ j(
+  }, [f.rootRef, r]), /* @__PURE__ */ j(
     b ? ae : "video",
     {
       "data-slot": "cropper-video",
@@ -965,16 +935,16 @@ function Tt(o) {
       loop: !0,
       muted: !0,
       controls: !1,
-      ...i,
+      ...s,
       ref: A,
       className: Y(
         We({
-          objectFit: r ?? f.objectFit,
+          objectFit: n ?? f.objectFit,
           className: t
         })
       ),
       style: {
-        transform: m ? `translate(${ie(c.x)}px, ${ie(c.y)}px) rotate(${g}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${g}deg) scale(${C})`,
+        transform: m ? `translate(${se(c.x)}px, ${se(c.y)}px) rotate(${p}deg) scale(${C})` : `translate(${c.x}px, ${c.y}px) rotate(${p}deg) scale(${C})`,
         ...u
       },
       onLoadedMetadata: h
@@ -1000,47 +970,46 @@ const Ye = ke(
     }
   }
 );
-function Ft(o) {
+function it(o) {
   const {
     className: t,
     style: u,
     asChild: b,
     ref: d,
     snapPixels: a = !1,
-    shape: r,
+    shape: n,
     withGrid: m,
-    ...i
-  } = o, f = fe(_e), p = k((C) => C.cropSize);
-  return p ? /* @__PURE__ */ j(
+    ...s
+  } = o, f = fe(_e), g = k((C) => C.cropSize);
+  return g ? /* @__PURE__ */ j(
     b ? ae : "div",
     {
       "data-slot": "cropper-area",
-      ...i,
+      ...s,
       ref: d,
       className: Y(
         Ye({
-          shape: r ?? f.shape,
+          shape: n ?? f.shape,
           withGrid: m ?? f.withGrid,
           className: t
         })
       ),
       style: {
-        width: a ? Math.round(p.width) : p.width,
-        height: a ? Math.round(p.height) : p.height,
+        width: a ? Math.round(g.width) : g.width,
+        height: a ? Math.round(g.height) : g.height,
         ...u
       }
     }
   ) : null;
 }
 export {
-  Ft as Area,
-  kt as Cropper,
-  Ft as CropperArea,
-  Zt as CropperImage,
-  Tt as CropperVideo,
-  Zt as Image,
-  kt as Root,
-  Tt as Video,
+  it as Area,
+  nt as Cropper,
+  it as CropperArea,
+  rt as CropperImage,
+  st as CropperVideo,
+  rt as Image,
+  nt as Root,
+  st as Video,
   k as useCropper
 };
-//# sourceMappingURL=Cropper.js.map