@layers-app/shared 0.2.5 → 0.2.7

package/dist/components/ImageCropper/ImageCropper.d.ts

@@ -0,0 +1,19 @@
+export interface ImageCropperProps {
+    src: string;
+    variant?: 'square' | 'rounded';
+    aspectRatio?: number;
+    minSize?: number;
+    maxSize?: number;
+    onCropComplete?: (croppedImage: Blob) => void;
+    onCropDataChange?: (data: CropData) => void;
+}
+export interface CropData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+}
+export declare const ImageCropper: ({ src, variant, aspectRatio, minSize, maxSize, onCropComplete, onCropDataChange, }: ImageCropperProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageCropper;
+//# sourceMappingURL=ImageCropper.d.ts.map

package/dist/components/ImageCropper/ImageCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AASD,eAAO,MAAM,YAAY,GAAI,oFAQ1B,iBAAiB,4CAujBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/ImageCropper/ImageCropper.js

@@ -0,0 +1,358 @@
+import { jsxs as b, jsx as a, Fragment as O } from "react/jsx-runtime";
+import { useRef as ne, useState as H, useMemo as ce, useEffect as j, useCallback as G } from "react";
+import { Box as oe } from "@mantine/core";
+import { useElementSize as ae } from "@mantine/hooks";
+import h from "./ImageCropper.module.css.js";
+const fe = ({
+  src: ie,
+  variant: I = "square",
+  aspectRatio: o = 1,
+  minSize: m = 50,
+  maxSize: X,
+  onCropComplete: J,
+  onCropDataChange: K
+}) => {
+  const {
+    ref: he,
+    width: v,
+    height: M
+  } = ae(), W = ne(null), Q = ne(null), [Y, se] = H(!1), [f, de] = H({ width: 0, height: 0 }), r = ce(() => {
+    if (!Y || v === 0 || M === 0 || f.width === 0)
+      return { x: 0, y: 0, width: v, height: M };
+    const n = v / M, i = f.width / f.height;
+    if (i > n) {
+      const s = v / i;
+      return {
+        x: 0,
+        y: (M - s) / 2,
+        width: v,
+        height: s
+      };
+    } else {
+      const s = M * i;
+      return {
+        x: (v - s) / 2,
+        y: 0,
+        width: s,
+        height: M
+      };
+    }
+  }, [Y, v, M, f]), [t, U] = H({
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200
+  }), [P, Z] = H(!1), [T, _] = H(!1), [l, S] = H(null), [V, R] = H({ x: 0, y: 0 }), [e, z] = H({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  j(() => {
+    if (!Y || v === 0 || M === 0 || r.width === 0)
+      return;
+    let n, i, s = Math.min(r.width, r.height) * 0.8;
+    X && (s = Math.min(s, X)), o >= 1 ? (n = s, i = s / o) : (i = s, n = s * o);
+    const u = r.x + (r.width - n) / 2, k = r.y + (r.height - i) / 2;
+    U({ x: u, y: k, width: n, height: i });
+  }, [
+    Y,
+    o,
+    v,
+    M,
+    r,
+    X
+  ]);
+  const re = G(() => {
+    W.current && (de({
+      width: W.current.naturalWidth,
+      height: W.current.naturalHeight
+    }), se(!0));
+  }, []), ee = G(
+    (n) => {
+      n.preventDefault(), n.stopPropagation();
+      const i = "touches" in n ? n.touches[0].clientX : n.clientX, s = "touches" in n ? n.touches[0].clientY : n.clientY;
+      Z(!0), R({ x: i, y: s }), z({ ...t });
+    },
+    [t]
+  ), q = G(
+    (n) => (i) => {
+      i.preventDefault(), i.stopPropagation();
+      const s = "touches" in i ? i.touches[0].clientX : i.clientX, u = "touches" in i ? i.touches[0].clientY : i.clientY;
+      _(!0), S(n), R({ x: s, y: u }), z({ ...t });
+    },
+    [t]
+  );
+  j(() => {
+    const n = (s) => {
+      if (!P && !T) return;
+      const u = "touches" in s ? s.touches[0].clientX : s.clientX, k = "touches" in s ? s.touches[0].clientY : s.clientY, y = u - V.x, D = k - V.y, B = r.x, L = r.y, N = r.x + r.width, A = r.y + r.height;
+      if (P) {
+        let g = e.x + y, w = e.y + D;
+        g = Math.max(B, Math.min(g, N - t.width)), w = Math.max(L, Math.min(w, A - t.height)), U((d) => ({ ...d, x: g, y: w }));
+      }
+      if (T && l) {
+        let g = e.x, w = e.y, d = e.width, c = e.height;
+        switch (l) {
+          case "se":
+            d = Math.max(m, e.width + y), c = d / o;
+            break;
+          case "sw":
+            d = Math.max(m, e.width - y), c = d / o, g = e.x + e.width - d;
+            break;
+          case "ne":
+            d = Math.max(m, e.width + y), c = d / o, w = e.y + e.height - c;
+            break;
+          case "nw":
+            d = Math.max(m, e.width - y), c = d / o, g = e.x + e.width - d, w = e.y + e.height - c;
+            break;
+          case "e":
+            d = Math.max(m, e.width + y), c = d / o, w = e.y + (e.height - c) / 2;
+            break;
+          case "w":
+            d = Math.max(m, e.width - y), c = d / o, g = e.x + e.width - d, w = e.y + (e.height - c) / 2;
+            break;
+          case "s":
+            c = Math.max(m, e.height + D), d = c * o, g = e.x + (e.width - d) / 2;
+            break;
+          case "n":
+            c = Math.max(m, e.height - D), d = c * o, g = e.x + (e.width - d) / 2, w = e.y + e.height - c;
+            break;
+        }
+        const p = l.includes("w") ? e.x + e.width : l.includes("e") ? e.x : e.x + e.width / 2, $ = l.includes("n") ? e.y + e.height : l.includes("s") ? e.y : e.y + e.height / 2;
+        let x, E;
+        l.includes("w") ? x = p - B : l.includes("e") ? x = N - p : x = Math.min(p - B, N - p) * 2, l.includes("n") ? E = $ - L : l.includes("s") ? E = A - $ : E = Math.min($ - L, A - $) * 2, X && (o >= 1 ? x = Math.min(x, X) : E = Math.min(E, X)), x / o < E ? E = x / o : x = E * o, d > x && (d = x, c = d / o), l.includes("w") ? g = p - d : l.includes("e") ? g = p : g = p - d / 2, l.includes("n") ? w = $ - c : l.includes("s") ? w = $ : w = $ - c / 2, d >= m && c >= m && U({ x: g, y: w, width: d, height: c });
+      }
+    }, i = () => {
+      Z(!1), _(!1), S(null);
+    };
+    return (P || T) && (window.addEventListener("mousemove", n), window.addEventListener("mouseup", i), window.addEventListener("touchmove", n), window.addEventListener("touchend", i)), () => {
+      window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", i), window.removeEventListener("touchmove", n), window.removeEventListener("touchend", i);
+    };
+  }, [
+    P,
+    T,
+    l,
+    V,
+    e,
+    r,
+    t.width,
+    t.height,
+    o,
+    m,
+    X
+  ]), j(() => {
+    if (K && Y && r.width > 0) {
+      const n = f.width / r.width, i = f.height / r.height;
+      K({
+        x: (t.x - r.x) * n,
+        y: (t.y - r.y) * i,
+        width: t.width * n,
+        height: t.height * i,
+        scale: n
+      });
+    }
+  }, [t, f, r, Y, K]);
+  const te = G(() => new Promise((n, i) => {
+    if (!W.current || !Q.current) {
+      i(new Error("Image or canvas not ready"));
+      return;
+    }
+    const s = Q.current, u = s.getContext("2d");
+    if (!u) {
+      i(new Error("Could not get canvas context"));
+      return;
+    }
+    const k = f.width / r.width, y = f.height / r.height, D = (t.x - r.x) * k, B = (t.y - r.y) * y, L = t.width * k, N = t.height * y;
+    s.width = L, s.height = N, I === "rounded" && (u.beginPath(), u.arc(
+      L / 2,
+      N / 2,
+      Math.min(L, N) / 2,
+      0,
+      Math.PI * 2
+    ), u.closePath(), u.clip()), u.drawImage(
+      W.current,
+      D,
+      B,
+      L,
+      N,
+      0,
+      0,
+      L,
+      N
+    ), s.toBlob(
+      (A) => {
+        A ? n(A) : i(new Error("Failed to create blob"));
+      },
+      "image/png",
+      1
+    );
+  }), [t, f, r, I]);
+  j(() => {
+    J && te().then(J).catch(() => {
+    });
+  }, [te, J]);
+  const C = (n) => {
+    const i = {
+      nw: h.handleNW,
+      ne: h.handleNE,
+      sw: h.handleSW,
+      se: h.handleSE
+    };
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        className: `${h.cornerHandle} ${i[n]}`,
+        onMouseDown: q(n),
+        onTouchStart: q(n),
+        children: [
+          /* @__PURE__ */ a("div", { className: h.cornerHandleArm, "data-direction": "horizontal" }),
+          /* @__PURE__ */ a("div", { className: h.cornerHandleArm, "data-direction": "vertical" })
+        ]
+      }
+    );
+  }, F = (n) => {
+    const i = {
+      n: h.handleN,
+      s: h.handleS,
+      e: h.handleE,
+      w: h.handleW
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: `${h.edgeHandle} ${i[n]}`,
+        onMouseDown: q(n),
+        onTouchStart: q(n),
+        children: /* @__PURE__ */ a("div", { className: h.edgeHandleBar })
+      }
+    );
+  };
+  return /* @__PURE__ */ b(oe, { className: h.container, ref: he, children: [
+    /* @__PURE__ */ a("canvas", { ref: Q, style: { display: "none" } }),
+    /* @__PURE__ */ a(
+      "img",
+      {
+        ref: W,
+        src: ie,
+        alt: "Crop preview",
+        className: h.image,
+        onLoad: re,
+        draggable: !1
+      }
+    ),
+    Y && /* @__PURE__ */ b(O, { children: [
+      I === "square" ? /* @__PURE__ */ b(O, { children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: h.overlay,
+            style: {
+              top: 0,
+              left: 0,
+              right: 0,
+              height: t.y
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: h.overlay,
+            style: {
+              top: t.y + t.height,
+              left: 0,
+              right: 0,
+              bottom: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: h.overlay,
+            style: {
+              top: t.y,
+              left: 0,
+              width: t.x,
+              height: t.height
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: h.overlay,
+            style: {
+              top: t.y,
+              left: t.x + t.width,
+              right: 0,
+              height: t.height
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ a(
+        "div",
+        {
+          className: h.circularOverlay,
+          style: {
+            left: t.x + t.width / 2,
+            top: t.y + t.height / 2,
+            width: t.width - 4,
+            height: t.height - 4
+          }
+        }
+      ),
+      /* @__PURE__ */ b(
+        "div",
+        {
+          className: `${h.cropArea} ${I === "rounded" ? h.cropAreaRounded : ""}`,
+          style: {
+            left: t.x,
+            top: t.y,
+            width: t.width,
+            height: t.height
+          },
+          onMouseDown: ee,
+          onTouchStart: ee,
+          children: [
+            I === "square" ? /* @__PURE__ */ a("div", { className: h.dashedBorder }) : /* @__PURE__ */ b(O, { children: [
+              /* @__PURE__ */ a("div", { className: `${h.edgeLine} ${h.edgeLineTop}` }),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `${h.edgeLine} ${h.edgeLineBottom}`
+                }
+              ),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `${h.edgeLine} ${h.edgeLineLeft}`
+                }
+              ),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `${h.edgeLine} ${h.edgeLineRight}`
+                }
+              )
+            ] }),
+            C("nw"),
+            C("ne"),
+            C("sw"),
+            C("se"),
+            I === "square" && /* @__PURE__ */ b(O, { children: [
+              F("n"),
+              F("s"),
+              F("e"),
+              F("w")
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  fe as ImageCropper
+};

package/dist/components/ImageCropper/ImageCropper.module.css.js

@@ -0,0 +1,51 @@
+const e = "_container_z996o_1", n = "_image_z996o_12", o = "_overlay_z996o_19", _ = "_circularOverlay_z996o_25", d = "_cropArea_z996o_33", a = "_dashedBorder_z996o_39", l = "_edgeLine_z996o_46", r = "_edgeLineTop_z996o_52", c = "_edgeLineBottom_z996o_60", t = "_edgeLineLeft_z996o_68", s = "_edgeLineRight_z996o_76", h = "_cornerHandle_z996o_84", g = "_cornerHandleArm_z996o_92", i = "_handleNW_z996o_107", z = "_handleNE_z996o_123", L = "_handleSW_z996o_139", H = "_handleSE_z996o_156", m = "_edgeHandle_z996o_172", B = "_edgeHandleBar_z996o_181", E = "_handleN_z996o_107", N = "_handleS_z996o_139", S = "_handleE_z996o_213", W = "_handleW_z996o_227", p = {
+  container: e,
+  image: n,
+  overlay: o,
+  circularOverlay: _,
+  cropArea: d,
+  dashedBorder: a,
+  edgeLine: l,
+  edgeLineTop: r,
+  edgeLineBottom: c,
+  edgeLineLeft: t,
+  edgeLineRight: s,
+  cornerHandle: h,
+  cornerHandleArm: g,
+  handleNW: i,
+  handleNE: z,
+  handleSW: L,
+  handleSE: H,
+  edgeHandle: m,
+  edgeHandleBar: B,
+  handleN: E,
+  handleS: N,
+  handleE: S,
+  handleW: W
+};
+export {
+  _ as circularOverlay,
+  e as container,
+  h as cornerHandle,
+  g as cornerHandleArm,
+  d as cropArea,
+  a as dashedBorder,
+  p as default,
+  m as edgeHandle,
+  B as edgeHandleBar,
+  l as edgeLine,
+  c as edgeLineBottom,
+  t as edgeLineLeft,
+  s as edgeLineRight,
+  r as edgeLineTop,
+  S as handleE,
+  E as handleN,
+  z as handleNE,
+  i as handleNW,
+  N as handleS,
+  H as handleSE,
+  L as handleSW,
+  W as handleW,
+  n as image,
+  o as overlay
+};

package/dist/components/ImageCropper/cropUtils.d.ts

@@ -0,0 +1,22 @@
+export interface CropBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type CropShape = 'square' | 'rounded';
+export interface CropImageOptions {
+    image: HTMLImageElement;
+    bounds: CropBounds;
+    shape: CropShape;
+    outputWidth?: number;
+    outputHeight?: number;
+    quality?: number;
+    mimeType?: 'image/png' | 'image/jpeg' | 'image/webp';
+}
+export declare const cropImage: ({ image, bounds, shape, outputWidth, outputHeight, quality, mimeType, }: CropImageOptions) => Promise<Blob>;
+export declare const blobToBase64: (blob: Blob) => Promise<string>;
+export declare const scaleCropBounds: (cropBounds: CropBounds, containerWidth: number, containerHeight: number, imageWidth: number, imageHeight: number) => CropBounds;
+export declare const getInitialCropBounds: (containerWidth: number, containerHeight: number, aspectRatio: number, sizePercent?: number) => CropBounds;
+export declare const constrainCropBounds: (bounds: CropBounds, containerWidth: number, containerHeight: number, minSize: number) => CropBounds;
+//# sourceMappingURL=cropUtils.d.ts.map

package/dist/components/ImageCropper/cropUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropUtils.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/cropUtils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,gBAAgB,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;CACtD;AAED,eAAO,MAAM,SAAS,GAAU,yEAQ7B,gBAAgB,KAAG,OAAO,CAAC,IAAI,CAuDjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAavD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,YAAY,UAAU,EACtB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,YAAY,MAAM,EAClB,aAAa,MAAM,KAClB,UAUF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,aAAa,MAAM,EACnB,oBAAiB,KAChB,UAkBF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,UAAU,EAClB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,SAAS,MAAM,KACd,UAiBF,CAAC"}

package/dist/components/ImageCropper/cropUtils.js

@@ -0,0 +1,42 @@
+const d = async ({
+  image: h,
+  bounds: t,
+  shape: o,
+  outputWidth: g,
+  outputHeight: l,
+  quality: m = 1,
+  mimeType: s = "image/png"
+}) => new Promise((w, c) => {
+  const a = document.createElement("canvas"), e = a.getContext("2d");
+  if (!e) {
+    c(new Error("Could not get canvas context"));
+    return;
+  }
+  const n = g ?? t.width, i = l ?? t.height;
+  a.width = n, a.height = i, o === "rounded" && (e.beginPath(), e.arc(
+    n / 2,
+    i / 2,
+    Math.min(n, i) / 2,
+    0,
+    Math.PI * 2
+  ), e.closePath(), e.clip()), e.drawImage(
+    h,
+    t.x,
+    t.y,
+    t.width,
+    t.height,
+    0,
+    0,
+    n,
+    i
+  ), a.toBlob(
+    (r) => {
+      r ? w(r) : c(new Error("Failed to create blob"));
+    },
+    s,
+    m
+  );
+});
+export {
+  d as cropImage
+};

package/dist/components/ImageCropper/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageCropper, type ImageCropperProps, type CropData } from './ImageCropper';
+export { useCropInteraction } from './useCropInteraction';
+export { cropImage } from './cropUtils';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageCropper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/ImageCropper/useCropInteraction.d.ts

@@ -0,0 +1,28 @@
+interface CropBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface ContainerSize {
+    width: number;
+    height: number;
+}
+type ResizeHandle = 'nw' | 'ne' | 'sw' | 'se' | null;
+interface UseCropInteractionOptions {
+    initialCrop: CropBounds;
+    containerSize: ContainerSize;
+    aspectRatio: number;
+    minSize: number;
+    onCropChange: (crop: CropBounds) => void;
+}
+interface UseCropInteractionReturn {
+    isDragging: boolean;
+    isResizing: boolean;
+    activeHandle: ResizeHandle;
+    handleCropMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
+    handleResizeMouseDown: (handle: Exclude<ResizeHandle, null>) => (e: React.MouseEvent | React.TouchEvent) => void;
+}
+export declare const useCropInteraction: ({ initialCrop, containerSize, aspectRatio, minSize, onCropChange, }: UseCropInteractionOptions) => UseCropInteractionReturn;
+export {};
+//# sourceMappingURL=useCropInteraction.d.ts.map

package/dist/components/ImageCropper/useCropInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCropInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/useCropInteraction.ts"],"names":[],"mappings":"AAOA,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,UAAU,yBAAyB;IACjC,WAAW,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtE,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAClH;AAED,eAAO,MAAM,kBAAkB,GAAI,qEAMhC,yBAAyB,KAAG,wBAwJ9B,CAAC"}

package/dist/components/ImageCropper/useCropInteraction.js

@@ -0,0 +1,76 @@
+import { useState as g, useCallback as D, useEffect as P } from "react";
+const W = ({
+  initialCrop: u,
+  containerSize: l,
+  aspectRatio: d,
+  minSize: w,
+  onCropChange: x
+}) => {
+  const [r, Y] = g(!1), [a, M] = g(!1), [f, y] = g(null), [m, E] = g({ x: 0, y: 0 }), [t, L] = g(u), b = D(
+    (n) => {
+      n.preventDefault(), n.stopPropagation();
+      const s = "touches" in n ? n.touches[0].clientX : n.clientX, i = "touches" in n ? n.touches[0].clientY : n.clientY;
+      Y(!0), E({ x: s, y: i }), L(u);
+    },
+    [u]
+  ), k = D(
+    (n) => (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const i = "touches" in s ? s.touches[0].clientX : s.clientX, X = "touches" in s ? s.touches[0].clientY : s.clientY;
+      M(!0), y(n), E({ x: i, y: X }), L(u);
+    },
+    [u]
+  );
+  return P(() => {
+    const n = (i) => {
+      if (!r && !a) return;
+      const X = "touches" in i ? i.touches[0].clientX : i.clientX, H = "touches" in i ? i.touches[0].clientY : i.clientY, v = X - m.x, I = H - m.y;
+      if (r) {
+        let o = t.x + v, c = t.y + I;
+        o = Math.max(0, Math.min(o, l.width - t.width)), c = Math.max(0, Math.min(c, l.height - t.height)), x({ ...t, x: o, y: c });
+      }
+      if (a && f) {
+        let o = t.x, c = t.y, e = t.width, h = t.height;
+        switch (f) {
+          case "se":
+            e = Math.max(w, t.width + v), h = e / d;
+            break;
+          case "sw":
+            e = Math.max(w, t.width - v), h = e / d, o = t.x + t.width - e;
+            break;
+          case "ne":
+            e = Math.max(w, t.width + v), h = e / d, c = t.y + t.height - h;
+            break;
+          case "nw":
+            e = Math.max(w, t.width - v), h = e / d, o = t.x + t.width - e, c = t.y + t.height - h;
+            break;
+        }
+        o < 0 && (e += o, h = e / d, o = 0), c < 0 && (h += c, e = h * d, c = 0), o + e > l.width && (e = l.width - o, h = e / d), c + h > l.height && (h = l.height - c, e = h * d), e >= w && h >= w && x({ x: o, y: c, width: e, height: h });
+      }
+    }, s = () => {
+      Y(!1), M(!1), y(null);
+    };
+    return (r || a) && (window.addEventListener("mousemove", n), window.addEventListener("mouseup", s), window.addEventListener("touchmove", n), window.addEventListener("touchend", s)), () => {
+      window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", s), window.removeEventListener("touchmove", n), window.removeEventListener("touchend", s);
+    };
+  }, [
+    r,
+    a,
+    f,
+    m,
+    t,
+    l,
+    d,
+    w,
+    x
+  ]), {
+    isDragging: r,
+    isResizing: a,
+    activeHandle: f,
+    handleCropMouseDown: b,
+    handleResizeMouseDown: k
+  };
+};
+export {
+  W as useCropInteraction
+};

package/dist/components/IntegrationFlowAnimation/IntegrationFlowAnimation.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export interface IntegrationFlowAnimationProps {
+    /** Icon component to display on the left (source) */
+    leftIcon: ReactNode;
+    /** Icon component to display on the right (destination) */
+    rightIcon: ReactNode;
+    /** Height of the component */
+    height?: number | string;
+    /** Number of particles to animate */
+    particleCount?: number;
+    /** Custom colors for particles (defaults to blue, green, yellow-orange distribution) */
+    colors?: string[];
+    /** Background image URL */
+    backgroundImage?: string;
+}
+/**
+ * A reusable animation component showing data flow between two integration icons.
+ * Displays animated particles flowing from left icon to right icon.
+ */
+export declare const IntegrationFlowAnimation: ({ leftIcon, rightIcon, height, particleCount, colors, backgroundImage, }: IntegrationFlowAnimationProps) => ReactNode;
+//# sourceMappingURL=IntegrationFlowAnimation.d.ts.map

package/dist/components/IntegrationFlowAnimation/IntegrationFlowAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationFlowAnimation.d.ts","sourceRoot":"","sources":["../../../src/components/IntegrationFlowAnimation/IntegrationFlowAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAiD1D,MAAM,WAAW,6BAA6B;IAC5C,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,SAAS,EAAE,SAAS,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GAAI,0EAOtC,6BAA6B,KAAG,SAqElC,CAAC"}