@123usmanhaider321/ui 0.1.6 → 1.0.0

package/dist/components/ImageCropModal/index.js

@@ -1,464 +0,0 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import Cropper from "react-easy-crop";
-import { useState, useRef, useEffect, Fragment } from "react";
-import getCroppedImage from "../../lib/cropImage.js";
-import { getImageLuminance, calculateInitialZoom } from "../../lib/imageAnalysis.js";
-import Modal from "../ui/Modal/index.js";
-import { Transition, Dialog } from "@headlessui/react";
-import { Image, X, Move, ZoomOut, ZoomIn, RotateCw, Stamp, Palette } from "lucide-react";
-import Image$1 from "next/image";
-import { Button } from "../Button/Button.js";
-function ImageCropModal({
-  open,
-  imageSrc,
-  onClose,
-  onConfirm,
-  aspect = 16 / 9,
-  cropShape = "rect",
-  showRotationControl = false,
-  allowBackgroundColor = false,
-  allowBothFitting = false,
-  hideWatermark = false
-}) {
-  const getLuminance = (hex) => {
-    const c = hex.substring(1);
-    const rgb = parseInt(c, 16);
-    const r = rgb >> 16 & 255;
-    const g = rgb >> 8 & 255;
-    const b = rgb >> 0 & 255;
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  };
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [rotation, setRotation] = useState(0);
-  const [zoom, setZoom] = useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
-  const [watermarkPos, setWatermarkPos] = useState({ x: 20, y: 20 });
-  const [isDraggingWatermark, setIsDraggingWatermark] = useState(false);
-  const [watermarkTheme, setWatermarkTheme] = useState("auto");
-  const dragStart = useRef({ x: 0, y: 0 });
-  const [cropSize, setCropSize] = useState(void 0);
-  const [mediaSize, setMediaSize] = useState(void 0);
-  const [isDarkImage, setIsDarkImage] = useState(false);
-  const containerRef = useRef(null);
-  const watermarkRef = useRef(null);
-  const initializedRef = useRef(false);
-  useEffect(() => {
-    if (imageSrc) {
-      getImageLuminance(imageSrc).then((brightness) => {
-        setIsDarkImage(brightness < 128);
-      });
-    }
-  }, [imageSrc]);
-  useEffect(() => {
-    const calculateCropSize = () => {
-      if (!containerRef.current) return;
-      const { clientWidth, clientHeight } = containerRef.current;
-      const fitRatio = aspect;
-      const containerRatio = clientWidth / clientHeight;
-      let width, height;
-      if (containerRatio > fitRatio) {
-        height = clientHeight;
-        width = height * fitRatio;
-      } else {
-        width = clientWidth;
-        height = width / fitRatio;
-      }
-      const newCropSize = { width: width * 0.9, height: height * 0.9 };
-      setCropSize(newCropSize);
-      if (mediaSize && !initializedRef.current) {
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const containerW = containerRect.width;
-        const containerH = containerRect.height;
-        const targetZoom = calculateInitialZoom({
-          containerSize: { width: containerW, height: containerH },
-          mediaSize: { naturalWidth: mediaSize.naturalWidth, naturalHeight: mediaSize.naturalHeight },
-          cropSize: newCropSize,
-          allowBothFitting
-        });
-        setZoom(targetZoom);
-        const wmWidth = newCropSize.width * 0.15;
-        const wmHeight = wmWidth / 3;
-        setWatermarkPos({
-          x: newCropSize.width - wmWidth - 20,
-          // 20px padding
-          y: newCropSize.height - wmHeight - 20
-        });
-        initializedRef.current = true;
-      }
-    };
-    const observer = new ResizeObserver(() => {
-      calculateCropSize();
-    });
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
-    }
-    return () => {
-      observer.disconnect();
-    };
-  }, [aspect, open, mediaSize]);
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isDraggingWatermark || !cropSize) return;
-      const dx = e.clientX - dragStart.current.x;
-      const dy = e.clientY - dragStart.current.y;
-      setWatermarkPos((prev) => {
-        const newX = prev.x + dx;
-        const newY = prev.y + dy;
-        const watermarkWidth = cropSize.width * 0.15;
-        const ratio = watermarkRef.current ? watermarkRef.current.naturalWidth / watermarkRef.current.naturalHeight : 1;
-        const watermarkHeight = watermarkWidth / ratio;
-        return {
-          x: Math.min(Math.max(0, newX), cropSize.width - watermarkWidth),
-          y: Math.min(Math.max(0, newY), cropSize.height - watermarkHeight)
-        };
-      });
-      dragStart.current = { x: e.clientX, y: e.clientY };
-    };
-    const handleMouseUp = () => {
-      setIsDraggingWatermark(false);
-    };
-    if (isDraggingWatermark) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDraggingWatermark, cropSize]);
-  const cropOffset = containerRef.current && cropSize ? {
-    x: (containerRef.current.clientWidth - cropSize.width) / 2,
-    y: (containerRef.current.clientHeight - cropSize.height) / 2
-  } : { x: 0, y: 0 };
-  const getWatermarkUrl = () => {
-    if (watermarkTheme === "dark") return "/images/logo/login.svg";
-    if (watermarkTheme === "light") return "/logos/ticketly-logo.svg";
-    const shouldUseLightLogo = allowBackgroundColor ? getLuminance(backgroundColor) <= 128 : isDarkImage;
-    return shouldUseLightLogo ? "/logos/ticketly-logo.svg" : "/images/logo/login.svg";
-  };
-  const watermarkUrl = getWatermarkUrl();
-  const handleSave = async () => {
-    var _a, _b;
-    if (!croppedAreaPixels) return;
-    try {
-      setLoading(true);
-      let currentBlob = null;
-      let currentMaxDim = 2500;
-      let currentQuality = 0.85;
-      let attempt = 0;
-      const maxAttempts = 3;
-      while (attempt < maxAttempts) {
-        console.log(`[Crop Export] Attempt ${attempt + 1}: Dim=${currentMaxDim}, Qual=${currentQuality}`);
-        currentBlob = await getCroppedImage(
-          imageSrc,
-          croppedAreaPixels,
-          rotation,
-          void 0,
-          backgroundColor,
-          hideWatermark ? void 0 : {
-            url: watermarkUrl,
-            // Calculate relative position in the final cropped image
-            x: watermarkPos.x / ((cropSize == null ? void 0 : cropSize.width) || 1) * croppedAreaPixels.width,
-            y: watermarkPos.y / ((cropSize == null ? void 0 : cropSize.height) || 1) * croppedAreaPixels.height,
-            // Width is 15% of the final cropped image width
-            width: croppedAreaPixels.width * 0.15,
-            // Calculate height based on aspect ratio
-            height: croppedAreaPixels.width * 0.15 / ((((_a = watermarkRef.current) == null ? void 0 : _a.naturalWidth) || 100) / (((_b = watermarkRef.current) == null ? void 0 : _b.naturalHeight) || 100))
-          },
-          allowBackgroundColor ? void 0 : true,
-          currentMaxDim,
-          currentQuality
-        );
-        if (currentBlob.size <= 4.5 * 1024 * 1024) {
-          break;
-        }
-        attempt++;
-        if (attempt === 1) {
-          currentMaxDim = 2e3;
-          currentQuality = 0.75;
-        } else if (attempt === 2) {
-          currentMaxDim = 1600;
-          currentQuality = 0.65;
-        }
-      }
-      if (currentBlob) {
-        onConfirm(currentBlob);
-        onClose();
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(Modal, { open, handleClose: onClose, children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center px-4 py-2 text-center", children: /* @__PURE__ */ jsx(
-    Transition.Child,
-    {
-      as: Fragment,
-      enter: "ease-out duration-300",
-      enterFrom: "opacity-0 scale-95",
-      enterTo: "opacity-100 scale-100",
-      leave: "ease-in duration-200",
-      leaveFrom: "opacity-100 scale-100",
-      leaveTo: "opacity-0 scale-95",
-      children: /* @__PURE__ */ jsxs(Dialog.Panel, { className: "w-full max-w-5xl transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl transition-all", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-grey-200 px-6 py-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "p-2 bg-primaryx-50 rounded-lg", children: /* @__PURE__ */ jsx(Image, { className: "w-5 h-5 text-primaryx-600" }) }),
-            /* @__PURE__ */ jsx(Dialog.Title, { className: "text-lg font-semibold text-grey-900", children: cropShape === "round" ? "Crop profile picture" : "Crop image" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onClose,
-              className: "rounded-lg p-2 text-grey-400 hover:bg-grey-100 hover:text-grey-500 transition-colors focus:outline-none",
-              children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: containerRef,
-            className: "relative h-[70vh] w-full bg-grey-900",
-            children: [
-              !allowBackgroundColor && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
-                /* @__PURE__ */ jsx(
-                  Image$1,
-                  {
-                    src: imageSrc,
-                    className: "w-full h-full object-cover blur-[20px] scale-110 opacity-70",
-                    alt: "blur-bg",
-                    width: 1,
-                    height: 1
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Cropper,
-                {
-                  image: imageSrc,
-                  crop,
-                  rotation,
-                  zoom,
-                  aspect,
-                  cropShape,
-                  onCropChange: setCrop,
-                  onRotationChange: setRotation,
-                  onZoomChange: setZoom,
-                  onMediaLoaded: (media) => {
-                    setMediaSize(media);
-                    initializedRef.current = false;
-                  },
-                  maxZoom: 3,
-                  minZoom: 0.1,
-                  zoomSpeed: 0.01,
-                  onCropComplete: (_, areaPixels) => setCroppedAreaPixels(areaPixels),
-                  cropSize,
-                  restrictPosition: false,
-                  objectFit: "contain",
-                  style: {
-                    containerStyle: {
-                      background: allowBackgroundColor ? backgroundColor : "transparent",
-                      width: "100%"
-                    },
-                    cropAreaStyle: {
-                      border: "2px solid white",
-                      boxShadow: "0 0 0 9999em rgba(0, 0, 0, 0.5)"
-                    }
-                  }
-                }
-              ),
-              !hideWatermark && cropSize && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute pointer-events-none",
-                  style: {
-                    left: cropOffset.x,
-                    top: cropOffset.y,
-                    width: cropSize.width,
-                    height: cropSize.height,
-                    border: "1px dashed rgba(255,255,255,0.3)"
-                  },
-                  children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "absolute cursor-move select-none pointer-events-auto group",
-                      style: {
-                        left: watermarkPos.x,
-                        top: watermarkPos.y,
-                        width: `${cropSize.width * 0.15}px`
-                        // 15% of crop width
-                      },
-                      onMouseDown: (e) => {
-                        e.preventDefault();
-                        setIsDraggingWatermark(true);
-                        dragStart.current = { x: e.clientX, y: e.clientY };
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: "absolute -top-8 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2.5 py-1 bg-grey-900/90 text-white text-[10px] font-medium rounded-full transition-all duration-200 pointer-events-none whitespace-nowrap shadow-lg backdrop-blur-sm", children: [
-                          /* @__PURE__ */ jsx(Move, { className: "w-3 h-3" }),
-                          /* @__PURE__ */ jsx("span", { children: "Drag to move" })
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "relative rounded transition-all duration-200 group-hover:ring-2 group-hover:ring-primaryx-500/50 group-hover:scale-[1.02]", children: [
-                          /* @__PURE__ */ jsx(
-                            Image$1,
-                            {
-                              ref: watermarkRef,
-                              src: watermarkUrl,
-                              alt: "Watermark",
-                              className: "w-full h-auto opacity-90 block",
-                              width: 100,
-                              height: 100
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-1 rounded-full backdrop-blur-[1px]", children: /* @__PURE__ */ jsx(Move, { className: "w-4 h-4 text-white drop-shadow-md" }) }) })
-                        ] })
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-white px-6 py-5 border-t border-grey-100 flex flex-col md:flex-row md:items-center gap-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(ZoomOut, { className: "w-4 h-4 text-grey-400" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "range",
-                  min: 0.7,
-                  max: 3,
-                  step: 0.01,
-                  value: zoom,
-                  onChange: (e) => setZoom(Number(e.target.value)),
-                  className: "flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20"
-                }
-              ),
-              /* @__PURE__ */ jsx(ZoomIn, { className: "w-4 h-4 text-grey-400" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: "Zoom" }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded", children: [
-                Math.round(zoom * 100),
-                "%"
-              ] })
-            ] })
-          ] }),
-          showRotationControl && /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(RotateCw, { className: "w-3.5 h-3.5" }),
-                "Rotate"
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded", children: [
-                rotation,
-                "°"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-medium", children: "0°" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "range",
-                  min: 0,
-                  max: 360,
-                  step: 1,
-                  value: rotation,
-                  onChange: (e) => setRotation(Number(e.target.value)),
-                  className: "flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-medium", children: "360°" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
-          !hideWatermark && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-[140px]", children: [
-            /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Stamp, { className: "w-3.5 h-3.5" }),
-              "Watermark"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 bg-grey-50 p-1 rounded-lg border border-grey-200", children: ["auto", "light", "dark"].map((theme) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setWatermarkTheme(theme),
-                className: `
-                                                        flex-1 px-2 py-1 text-[10px] font-medium rounded-md transition-all uppercase
-                                                        ${watermarkTheme === theme ? "bg-white text-grey-900 shadow-sm ring-1 ring-black/5" : "text-grey-500 hover:text-grey-700 hover:bg-grey-100"}
-                                                    `,
-                children: theme
-              },
-              theme
-            )) })
-          ] }),
-          allowBackgroundColor && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
-            /* @__PURE__ */ jsxs("label", { htmlFor: "cropper-background-color", className: "flex items-center gap-3 p-1.5 pr-4 rounded-xl border border-grey-200 bg-white shadow-sm hover:border-grey-300 transition-colors cursor-pointer group relative overflow-hidden", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-8 h-8 rounded-lg border border-grey-200 shadow-inner flex items-center justify-center overflow-hidden relative",
-                  style: { backgroundColor },
-                  children: /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "color",
-                      id: "cropper-background-color",
-                      value: backgroundColor,
-                      onChange: (e) => setBackgroundColor(e.target.value),
-                      className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer p-0 border-0"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col pointer-events-none", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-grey-700 group-hover:text-grey-900", children: "Background" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-mono uppercase", children: backgroundColor })
-              ] }),
-              /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4 text-grey-400 ml-2" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: "rounded-lg border border-grey-300 bg-white px-4 py-2 text-sm font-medium text-grey-700 hover:bg-grey-50 focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 transition-all shadow-sm",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                onClick: handleSave,
-                disabled: loading,
-                className: "relative inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 disabled:opacity-70 disabled:cursor-not-allowed",
-                children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", children: [
-                    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-                  ] }),
-                  "Processing..."
-                ] }) : "Apply Crop"
-              }
-            )
-          ] })
-        ] })
-      ] })
-    }
-  ) }) }) });
-}
-export {
-  ImageCropModal as default
-};
-//# sourceMappingURL=index.js.map

package/dist/components/ImageCropModal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ImageCropModal/index.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n\"use client\"\r\n\r\nimport Cropper from \"react-easy-crop\"\r\nimport { useState, Fragment, useRef, useEffect } from \"react\"\r\nimport getCroppedImage from \"@/lib/cropImage\"\r\nimport { getImageLuminance, calculateInitialZoom } from \"@/lib/imageAnalysis\"\r\nimport Modal from \"@/components/ui/Modal\"\r\nimport { Dialog, Transition } from \"@headlessui/react\"\r\nimport { X, ZoomIn, ZoomOut, Image as ImageIcon, RotateCw, Palette, Stamp, Move } from \"lucide-react\"\r\nimport Image from \"next/image\"\r\nimport { Button } from \"../Button\"\r\n\r\ninterface Props {\r\n    open: boolean\r\n    imageSrc: string\r\n    onClose: () => void\r\n    onConfirm: (blob: Blob) => void\r\n    aspect?: number\r\n    cropShape?: 'rect' | 'round'\r\n    showRotationControl?: boolean\r\n    allowBackgroundColor?: boolean\r\n    allowBothFitting?: boolean\r\n    hideWatermark?: boolean\r\n}\r\n\r\nexport default function ImageCropModal({\r\n    open,\r\n    imageSrc,\r\n    onClose,\r\n    onConfirm,\r\n    aspect = 16 / 9,\r\n    cropShape = 'rect',\r\n    showRotationControl = false,\r\n    allowBackgroundColor = false,\r\n    allowBothFitting = false,\r\n    hideWatermark = false,\r\n}: Props) {\r\n    // Helper to calculate luminance\r\n    const getLuminance = (hex: string) => {\r\n        const c = hex.substring(1)      // strip #\r\n        const rgb = parseInt(c, 16)   // convert rrggbb to decimal\r\n        const r = (rgb >> 16) & 0xff  // extract red\r\n        const g = (rgb >> 8) & 0xff   // extract green\r\n        const b = (rgb >> 0) & 0xff   // extract blue\r\n\r\n        // sRGB luma\r\n        return 0.2126 * r + 0.7152 * g + 0.0722 * b\r\n    }\r\n    const [crop, setCrop] = useState({ x: 0, y: 0 })\r\n    const [rotation, setRotation] = useState(0)\r\n    const [zoom, setZoom] = useState(1)\r\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null)\r\n    const [loading, setLoading] = useState(false)\r\n\r\n    const [backgroundColor, setBackgroundColor] = useState('#ffffff')\r\n    const [watermarkPos, setWatermarkPos] = useState({ x: 20, y: 20 })\r\n    const [isDraggingWatermark, setIsDraggingWatermark] = useState(false)\r\n    const [watermarkTheme, setWatermarkTheme] = useState<'auto' | 'dark' | 'light'>('auto')\r\n    const dragStart = useRef({ x: 0, y: 0 })\r\n\r\n    // State to force the crop box to fill the container\r\n    const [cropSize, setCropSize] = useState<{ width: number; height: number } | undefined>(undefined)\r\n    const [mediaSize, setMediaSize] = useState<{ width: number; height: number; naturalWidth: number; naturalHeight: number } | undefined>(undefined)\r\n    const [isDarkImage, setIsDarkImage] = useState(false)\r\n    const containerRef = useRef<HTMLDivElement>(null)\r\n    const watermarkRef = useRef<HTMLImageElement>(null)\r\n    const initializedRef = useRef(false)\r\n\r\n    // Calculate luminance when image changes\r\n    useEffect(() => {\r\n        if (imageSrc) {\r\n            getImageLuminance(imageSrc).then((brightness) => {\r\n                setIsDarkImage(brightness < 128)\r\n            })\r\n        }\r\n    }, [imageSrc])\r\n\r\n    // Calculate crop size based on container dimensions to ensure it maximizes space relative to parent\r\n    // Also calculate initial zoom to cover\r\n    useEffect(() => {\r\n        const calculateCropSize = () => {\r\n            if (!containerRef.current) return\r\n            const { clientWidth, clientHeight } = containerRef.current\r\n\r\n            // Calculate dimensions that fit within the container while maintaining aspect ratio\r\n            const fitRatio = aspect\r\n            const containerRatio = clientWidth / clientHeight\r\n\r\n            let width, height;\r\n\r\n            if (containerRatio > fitRatio) {\r\n                // Container is wider than the aspect ratio -> constrain by height\r\n                height = clientHeight\r\n                width = height * fitRatio\r\n            } else {\r\n                // Container is taller than the aspect ratio -> constrain by width\r\n                width = clientWidth\r\n                height = width / fitRatio\r\n            }\r\n\r\n            // Calculate new crop size\r\n            const newCropSize = { width: width * 0.9, height: height * 0.9 }\r\n            setCropSize(newCropSize)\r\n\r\n            // Calculate Auto-Zoom to Cover if media is loaded\r\n            if (mediaSize && !initializedRef.current) {\r\n\r\n                // REWRITTEN ZOOM LOGIC\r\n                // Goal: Calculate precise zoom to ensure image fills the crop box.\r\n\r\n                // 1. Get exact container geometry\r\n                const containerRect = containerRef.current.getBoundingClientRect()\r\n                const containerW = containerRect.width\r\n                const containerH = containerRect.height\r\n\r\n                // 2. Get exact image geometry\r\n\r\n                // 3. Determine how the image is displayed at Zoom=1 (fit to container)\r\n                // react-easy-crop uses 'contain' logic: fits the largest dimension\r\n                const targetZoom = calculateInitialZoom({\r\n                    containerSize: { width: containerW, height: containerH },\r\n                    mediaSize: { naturalWidth: mediaSize.naturalWidth, naturalHeight: mediaSize.naturalHeight },\r\n                    cropSize: newCropSize,\r\n                    allowBothFitting\r\n                })\r\n\r\n                setZoom(targetZoom)\r\n\r\n                // Initial Watermark Position: Right Bottom\r\n                // We need cropSize to determine offsets.\r\n                const wmWidth = newCropSize.width * 0.15\r\n                // Approx height? \r\n                const wmHeight = wmWidth / 3 // roughly 3:1 aspect for logo\r\n\r\n                setWatermarkPos({\r\n                    x: newCropSize.width - wmWidth - 20, // 20px padding\r\n                    y: newCropSize.height - wmHeight - 20\r\n                })\r\n\r\n                initializedRef.current = true\r\n            }\r\n        }\r\n\r\n        // Use ResizeObserver to handle window resizes or modal transitions\r\n        const observer = new ResizeObserver(() => {\r\n            calculateCropSize()\r\n        })\r\n\r\n        if (containerRef.current) {\r\n            observer.observe(containerRef.current)\r\n        }\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [aspect, open, mediaSize])\r\n\r\n    useEffect(() => {\r\n        const handleMouseMove = (e: MouseEvent) => {\r\n            if (!isDraggingWatermark || !cropSize) return\r\n\r\n            const dx = e.clientX - dragStart.current.x\r\n            const dy = e.clientY - dragStart.current.y\r\n\r\n            setWatermarkPos(prev => {\r\n                const newX = prev.x + dx\r\n                const newY = prev.y + dy\r\n\r\n                // Constrain to crop box\r\n                const watermarkWidth = cropSize.width * 0.15 // 15% of crop width\r\n                // Maintain aspect ratio of watermark for height constraint\r\n                // We don't have exact height here easily without loading image meta, but we can approximate or use ref\r\n                const ratio = watermarkRef.current ? watermarkRef.current.naturalWidth / watermarkRef.current.naturalHeight : 1\r\n                const watermarkHeight = watermarkWidth / ratio\r\n\r\n                return {\r\n                    x: Math.min(Math.max(0, newX), cropSize.width - watermarkWidth),\r\n                    y: Math.min(Math.max(0, newY), cropSize.height - watermarkHeight)\r\n                }\r\n            })\r\n\r\n            dragStart.current = { x: e.clientX, y: e.clientY }\r\n        }\r\n\r\n        const handleMouseUp = () => {\r\n            setIsDraggingWatermark(false)\r\n        }\r\n\r\n        if (isDraggingWatermark) {\r\n            window.addEventListener('mousemove', handleMouseMove)\r\n            window.addEventListener('mouseup', handleMouseUp)\r\n        }\r\n\r\n        return () => {\r\n            window.removeEventListener('mousemove', handleMouseMove)\r\n            window.removeEventListener('mouseup', handleMouseUp)\r\n        }\r\n    }, [isDraggingWatermark, cropSize])\r\n\r\n    // Calculate offset to position watermark over the centered crop area\r\n    const cropOffset = containerRef.current && cropSize ? {\r\n        x: (containerRef.current.clientWidth - cropSize.width) / 2,\r\n        y: (containerRef.current.clientHeight - cropSize.height) / 2\r\n    } : { x: 0, y: 0 }\r\n\r\n    // Dynamic watermark based on background contrast\r\n    const getWatermarkUrl = () => {\r\n        if (watermarkTheme === 'dark') return '/images/logo/login.svg'\r\n        if (watermarkTheme === 'light') return '/logos/ticketly-logo.svg'\r\n\r\n        // Auto logic\r\n        const shouldUseLightLogo = allowBackgroundColor\r\n            ? getLuminance(backgroundColor) <= 128 // Dark BG -> Light Logo\r\n            : isDarkImage // Dark Image -> Light Logo\r\n\r\n        return shouldUseLightLogo\r\n            ? '/logos/ticketly-logo.svg' // Light/White Logo\r\n            : '/images/logo/login.svg' // Dark/Black Logo\r\n    }\r\n\r\n    const watermarkUrl = getWatermarkUrl()\r\n\r\n    const handleSave = async () => {\r\n        if (!croppedAreaPixels) return\r\n        try {\r\n            setLoading(true)\r\n\r\n            let currentBlob: Blob | null = null;\r\n            let currentMaxDim = 2500;\r\n            let currentQuality = 0.85;\r\n            let attempt = 0;\r\n            const maxAttempts = 3;\r\n\r\n            while (attempt < maxAttempts) {\r\n                console.log(`[Crop Export] Attempt ${attempt + 1}: Dim=${currentMaxDim}, Qual=${currentQuality}`);\r\n\r\n                currentBlob = await getCroppedImage(\r\n                    imageSrc,\r\n                    croppedAreaPixels,\r\n                    rotation,\r\n                    undefined,\r\n                    backgroundColor,\r\n                    hideWatermark ? undefined : {\r\n                        url: watermarkUrl,\r\n                        // Calculate relative position in the final cropped image\r\n                        x: (watermarkPos.x / (cropSize?.width || 1)) * croppedAreaPixels.width,\r\n                        y: (watermarkPos.y / (cropSize?.height || 1)) * croppedAreaPixels.height,\r\n                        // Width is 15% of the final cropped image width\r\n                        width: croppedAreaPixels.width * 0.15,\r\n                        // Calculate height based on aspect ratio\r\n                        height: (croppedAreaPixels.width * 0.15) / ((watermarkRef.current?.naturalWidth || 100) / (watermarkRef.current?.naturalHeight || 100))\r\n                    },\r\n                    allowBackgroundColor ? undefined : true,\r\n                    currentMaxDim,\r\n                    currentQuality\r\n                )\r\n\r\n                // If blob is under 4.5MB, we are good\r\n                if (currentBlob.size <= 4.5 * 1024 * 1024) {\r\n                    break;\r\n                }\r\n\r\n                // If still too large, reduce settings for next attempt\r\n                attempt++;\r\n                if (attempt === 1) {\r\n                    currentMaxDim = 2000;\r\n                    currentQuality = 0.75;\r\n                } else if (attempt === 2) {\r\n                    currentMaxDim = 1600;\r\n                    currentQuality = 0.65;\r\n                }\r\n            }\r\n\r\n            if (currentBlob) {\r\n                onConfirm(currentBlob)\r\n                onClose()\r\n            }\r\n        } catch (e) {\r\n            console.error(e)\r\n        } finally {\r\n            setLoading(false)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Modal open={open} handleClose={onClose}>\r\n            <div className=\"fixed inset-0 overflow-y-auto\">\r\n                <div className=\"flex min-h-full items-center justify-center px-4 py-2 text-center\">\r\n                    <Transition.Child\r\n                        as={Fragment}\r\n                        enter=\"ease-out duration-300\"\r\n                        enterFrom=\"opacity-0 scale-95\"\r\n                        enterTo=\"opacity-100 scale-100\"\r\n                        leave=\"ease-in duration-200\"\r\n                        leaveFrom=\"opacity-100 scale-100\"\r\n                        leaveTo=\"opacity-0 scale-95\"\r\n                    >\r\n                        <Dialog.Panel className=\"w-full max-w-5xl transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl transition-all\">\r\n                            {/* Header */}\r\n                            <div className=\"flex items-center justify-between border-b border-grey-200 px-6 py-4\">\r\n                                <div className=\"flex items-center gap-2\">\r\n                                    <div className=\"p-2 bg-primaryx-50 rounded-lg\">\r\n                                        <ImageIcon className=\"w-5 h-5 text-primaryx-600\" />\r\n                                    </div>\r\n                                    <Dialog.Title className=\"text-lg font-semibold text-grey-900\">\r\n                                        {cropShape === 'round' ? 'Crop profile picture' : 'Crop image'}\r\n                                    </Dialog.Title>\r\n                                </div>\r\n                                <button\r\n                                    onClick={onClose}\r\n                                    className=\"rounded-lg p-2 text-grey-400 hover:bg-grey-100 hover:text-grey-500 transition-colors focus:outline-none\"\r\n                                >\r\n                                    <X className=\"w-5 h-5\" />\r\n                                </button>\r\n                            </div>\r\n\r\n                            {/* Body */}\r\n                            <div className=\"p-0\">\r\n                                {/* Cropper Container */}\r\n                                <div\r\n                                    ref={containerRef}\r\n                                    className=\"relative h-[70vh] w-full bg-grey-900\"\r\n                                >\r\n                                    {/* Blurred Background Layer - Render BEFORE Cropper to be behind it */}\r\n                                    {!allowBackgroundColor && (\r\n                                        <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\r\n                                            <Image\r\n                                                src={imageSrc}\r\n                                                className=\"w-full h-full object-cover blur-[20px] scale-110 opacity-70\"\r\n                                                alt=\"blur-bg\"\r\n                                                width={1}\r\n                                                height={1}\r\n                                            />\r\n                                            <div className=\"absolute inset-0 bg-black/30\" />\r\n                                        </div>\r\n                                    )}\r\n\r\n                                    <Cropper\r\n                                        image={imageSrc}\r\n                                        crop={crop}\r\n                                        rotation={rotation}\r\n                                        zoom={zoom}\r\n                                        aspect={aspect}\r\n                                        cropShape={cropShape}\r\n                                        onCropChange={setCrop}\r\n                                        onRotationChange={setRotation}\r\n                                        onZoomChange={setZoom}\r\n                                        onMediaLoaded={(media) => {\r\n                                            setMediaSize(media)\r\n                                            // Reset init flag on new media\r\n                                            initializedRef.current = false\r\n                                        }}\r\n                                        maxZoom={3}\r\n                                        minZoom={0.1}\r\n                                        zoomSpeed={0.01}\r\n                                        onCropComplete={(_, areaPixels) =>\r\n                                            setCroppedAreaPixels(areaPixels)\r\n                                        }\r\n                                        cropSize={cropSize} // Force crop box size relative to container\r\n                                        restrictPosition={false} // Allows free drag of the image\r\n                                        objectFit=\"contain\" // Ensures image is contained within the view, allowing crop box to be larger\r\n                                        style={{\r\n                                            containerStyle: {\r\n                                                background: allowBackgroundColor ? backgroundColor : 'transparent',\r\n                                                width: '100%'\r\n                                            },\r\n                                            cropAreaStyle: {\r\n                                                border: '2px solid white',\r\n                                                boxShadow: '0 0 0 9999em rgba(0, 0, 0, 0.5)',\r\n                                            }\r\n                                        }}\r\n                                    />\r\n\r\n                                    {/* Watermark Overlay */}\r\n                                    {!hideWatermark && cropSize && (\r\n                                        <div\r\n                                            className=\"absolute pointer-events-none\"\r\n                                            style={{\r\n                                                left: cropOffset.x,\r\n                                                top: cropOffset.y,\r\n                                                width: cropSize.width,\r\n                                                height: cropSize.height,\r\n                                                border: '1px dashed rgba(255,255,255,0.3)',\r\n                                            }}\r\n                                        >\r\n                                            {/* We use specific standard size for watermark on screen */}\r\n                                            <div\r\n                                                className=\"absolute cursor-move select-none pointer-events-auto group\"\r\n                                                style={{\r\n                                                    left: watermarkPos.x,\r\n                                                    top: watermarkPos.y,\r\n                                                    width: `${cropSize.width * 0.15}px`, // 15% of crop width\r\n                                                }}\r\n                                                onMouseDown={(e) => {\r\n                                                    e.preventDefault()\r\n                                                    setIsDraggingWatermark(true)\r\n                                                    dragStart.current = { x: e.clientX, y: e.clientY }\r\n                                                }}\r\n                                            >\r\n                                                {/* Drag Tooltip - Always Visible */}\r\n                                                <div className=\"absolute -top-8 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2.5 py-1 bg-grey-900/90 text-white text-[10px] font-medium rounded-full transition-all duration-200 pointer-events-none whitespace-nowrap shadow-lg backdrop-blur-sm\">\r\n                                                    <Move className=\"w-3 h-3\" />\r\n                                                    <span>Drag to move</span>\r\n                                                </div>\r\n\r\n                                                {/* Image Container with Hover Effect */}\r\n                                                <div className=\"relative rounded transition-all duration-200 group-hover:ring-2 group-hover:ring-primaryx-500/50 group-hover:scale-[1.02]\">\r\n                                                    <Image\r\n                                                        ref={watermarkRef}\r\n                                                        src={watermarkUrl}\r\n                                                        alt=\"Watermark\"\r\n                                                        className=\"w-full h-auto opacity-90 block\"\r\n                                                        width={100}\r\n                                                        height={100}\r\n                                                    />\r\n\r\n                                                    {/* Center Move Icon Overlay */}\r\n                                                    <div className=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\r\n                                                        <div className=\"bg-black/20 p-1 rounded-full backdrop-blur-[1px]\">\r\n                                                            <Move className=\"w-4 h-4 text-white drop-shadow-md\" />\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    )}\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <div className=\"bg-white px-6 py-5 border-t border-grey-100 flex flex-col md:flex-row md:items-center gap-6\">\r\n                                {/* Zoom Control */}\r\n                                <div className=\"flex-1 w-full space-y-2\">\r\n                                    <div className=\"flex items-center gap-3\">\r\n                                        <ZoomOut className=\"w-4 h-4 text-grey-400\" />\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min={0.7}\r\n                                            max={3}\r\n                                            step={0.01}\r\n                                            value={zoom}\r\n                                            onChange={(e) => setZoom(Number(e.target.value))}\r\n                                            className=\"flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20\"\r\n                                        />\r\n                                        <ZoomIn className=\"w-4 h-4 text-grey-400\" />\r\n                                    </div>\r\n                                    <div className=\"flex items-center justify-between\">\r\n                                        <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                            Zoom\r\n                                        </label>\r\n                                        <span className=\"text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded\">\r\n                                            {Math.round(zoom * 100)}%\r\n                                        </span>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n                                {/* Rotation Control */}\r\n                                {showRotationControl && (\r\n                                    <div className=\"flex-1 w-full space-y-2\">\r\n                                        <div className=\"flex items-center justify-between\">\r\n                                            <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                                <RotateCw className=\"w-3.5 h-3.5\" />\r\n                                                Rotate\r\n                                            </label>\r\n                                            <span className=\"text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded\">\r\n                                                {rotation}°\r\n                                            </span>\r\n                                        </div>\r\n                                        <div className=\"flex items-center gap-3\">\r\n                                            <span className=\"text-[10px] text-grey-400 font-medium\">0°</span>\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min={0}\r\n                                                max={360}\r\n                                                step={1}\r\n                                                value={rotation}\r\n                                                onChange={(e) => setRotation(Number(e.target.value))}\r\n                                                className=\"flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20\"\r\n                                            />\r\n                                            <span className=\"text-[10px] text-grey-400 font-medium\">360°</span>\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n\r\n                                {/* Divider for desktop */}\r\n                                <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n\r\n                                {/* Watermark Theme Control */}\r\n                                {!hideWatermark && (\r\n                                    <div className=\"flex flex-col gap-1.5 min-w-[140px]\">\r\n                                        <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                            <Stamp className=\"w-3.5 h-3.5\" />\r\n                                            Watermark\r\n                                        </label>\r\n                                        <div className=\"flex items-center gap-1 bg-grey-50 p-1 rounded-lg border border-grey-200\">\r\n                                            {(['auto', 'light', 'dark'] as const).map((theme) => (\r\n                                                <button\r\n                                                    key={theme}\r\n                                                    onClick={() => setWatermarkTheme(theme)}\r\n                                                    className={`\r\n                                                        flex-1 px-2 py-1 text-[10px] font-medium rounded-md transition-all uppercase\r\n                                                        ${watermarkTheme === theme\r\n                                                            ? 'bg-white text-grey-900 shadow-sm ring-1 ring-black/5'\r\n                                                            : 'text-grey-500 hover:text-grey-700 hover:bg-grey-100'\r\n                                                        }\r\n                                                    `}\r\n                                                >\r\n                                                    {theme}\r\n                                                </button>\r\n                                            ))}\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n\r\n                                {/* Background Color - Conditional */}\r\n                                {allowBackgroundColor && (\r\n                                    <>\r\n                                        <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n                                        <label htmlFor=\"cropper-background-color\" className=\"flex items-center gap-3 p-1.5 pr-4 rounded-xl border border-grey-200 bg-white shadow-sm hover:border-grey-300 transition-colors cursor-pointer group relative overflow-hidden\">\r\n                                            <div\r\n                                                className=\"w-8 h-8 rounded-lg border border-grey-200 shadow-inner flex items-center justify-center overflow-hidden relative\"\r\n                                                style={{ backgroundColor: backgroundColor }}\r\n                                            >\r\n                                                {/* Invisible Color Input Overlay */}\r\n                                                <input\r\n                                                    type=\"color\"\r\n                                                    id=\"cropper-background-color\"\r\n                                                    value={backgroundColor}\r\n                                                    onChange={(e) => setBackgroundColor(e.target.value)}\r\n                                                    className=\"absolute inset-0 opacity-0 w-full h-full cursor-pointer p-0 border-0\"\r\n                                                />\r\n                                            </div>\r\n                                            <div className=\"flex flex-col pointer-events-none\">\r\n                                                <span className=\"text-xs font-semibold text-grey-700 group-hover:text-grey-900\">Background</span>\r\n                                                <span className=\"text-[10px] text-grey-400 font-mono uppercase\">{backgroundColor}</span>\r\n                                            </div>\r\n                                            <Palette className=\"w-4 h-4 text-grey-400 ml-2\" />\r\n                                        </label>\r\n                                    </>\r\n                                )}\r\n\r\n                                {/* Divider for desktop */}\r\n                                <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n\r\n                                <div className=\"flex items-center justify-end gap-3\">\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        onClick={onClose}\r\n                                        className=\"rounded-lg border border-grey-300 bg-white px-4 py-2 text-sm font-medium text-grey-700 hover:bg-grey-50 focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 transition-all shadow-sm\"\r\n                                    >\r\n                                        Cancel\r\n                                    </button>\r\n                                    <Button\r\n                                        type=\"button\"\r\n                                        onClick={handleSave}\r\n                                        disabled={loading}\r\n                                        className=\"relative inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 disabled:opacity-70 disabled:cursor-not-allowed\"\r\n                                    >\r\n                                        {loading ? (\r\n                                            <>\r\n                                                <svg className=\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                                                    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\r\n                                                    <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\r\n                                                </svg>\r\n                                                Processing...\r\n                                            </>\r\n                                        ) : (\r\n                                            'Apply Crop'\r\n                                        )}\r\n                                    </Button>\r\n                                </div>\r\n                            </div>\r\n                        </Dialog.Panel>\r\n                    </Transition.Child>\r\n                </div>\r\n            </div>\r\n        </Modal>\r\n    )\r\n}"],"names":["Fragment","ImageIcon","Image"],"mappings":"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"}

package/dist/components/InformationPopover/InformationPopover.d.ts

@@ -1,7 +0,0 @@
-interface InformationPopoverProps {
-    text: string;
-    className?: string;
-    side?: "top" | "bottom" | "left" | "right";
-}
-export default function InformationPopover({ text, className, side, }: InformationPopoverProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/InformationPopover/InformationPopover.js

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Info } from "lucide-react";
-import { Tooltip } from "../Tooltip/Tooltip.js";
-function InformationPopover({
-  text,
-  className = "",
-  side = "top"
-}) {
-  return /* @__PURE__ */ jsx(Tooltip, { content: text, placement: side, children: /* @__PURE__ */ jsx(
-    Info,
-    {
-      className: `ui-h-4 ui-w-4 ui-text-grey-700 hover:ui-text-grey-800 ui-cursor-default ui-transition-colors ${className}`
-    }
-  ) });
-}
-export {
-  InformationPopover as default
-};
-//# sourceMappingURL=InformationPopover.js.map

package/dist/components/InformationPopover/InformationPopover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InformationPopover.js","sources":["../../../src/components/InformationPopover/InformationPopover.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\r\nimport { Tooltip } from \"../Tooltip/Tooltip\";\r\nimport React from \"react\";\r\n\r\ninterface InformationPopoverProps {\r\n  text: string;\r\n  className?: string;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n}\r\n\r\nexport default function InformationPopover({\r\n  text,\r\n  className = \"\",\r\n  side = \"top\",\r\n}: InformationPopoverProps) {\r\n  return (\r\n    <Tooltip content={text} placement={side}>\r\n      <Info\r\n        className={`ui-h-4 ui-w-4 ui-text-grey-700 hover:ui-text-grey-800 ui-cursor-default ui-transition-colors ${className}`}\r\n      />\r\n    </Tooltip>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;AAUA,SAAwB,mBAAmB;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAA4B;AAC1B,SACE,oBAAC,SAAA,EAAQ,SAAS,MAAM,WAAW,MACjC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gGAAgG,SAAS;AAAA,IAAA;AAAA,EAAA,GAExH;AAEJ;"}

package/dist/components/InformationPopover.js

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Info } from "lucide-react";
-import Tooltip from "./ui/Tooltip.js";
-function InformationPopover({
-  text,
-  className = "",
-  side = "top"
-}) {
-  return /* @__PURE__ */ jsx(Tooltip, { content: text, placement: side, children: /* @__PURE__ */ jsx(
-    Info,
-    {
-      className: `h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`
-    }
-  ) });
-}
-export {
-  InformationPopover as default
-};
-//# sourceMappingURL=InformationPopover.js.map

package/dist/components/InformationPopover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InformationPopover.js","sources":["../../src/components/InformationPopover.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\r\nimport Tooltip from \"@/components/ui/Tooltip\";\r\n\r\ninterface InformationPopoverProps {\r\n  text: string;\r\n  className?: string;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n}\r\n\r\nexport default function InformationPopover({\r\n  text,\r\n  className = \"\",\r\n  side = \"top\",\r\n}: InformationPopoverProps) {\r\n  return (\r\n    <Tooltip content={text} placement={side}>\r\n      <Info\r\n        className={`h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`}\r\n      />\r\n    </Tooltip>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;AASA,SAAwB,mBAAmB;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAA4B;AAC1B,SACE,oBAAC,SAAA,EAAQ,SAAS,MAAM,WAAW,MACjC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8EAA8E,SAAS;AAAA,IAAA;AAAA,EAAA,GAEtG;AAEJ;"}

package/dist/components/InputErrorMessage/InputErrorMessage.js

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { AnimatePresence, motion } from "framer-motion";
-import { memo } from "react";
-const InputErrorMessage = ({ error, className }) => {
-  return /* @__PURE__ */ jsx("div", { className: "ui-min-h-[1.25rem]", children: /* @__PURE__ */ jsx(AnimatePresence, { children: error && /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, y: -10, height: 0 },
-      animate: { opacity: 1, y: 0, height: "auto" },
-      exit: { opacity: 0, y: -10, height: 0 },
-      className: cn("ui-overflow-hidden", className),
-      children: /* @__PURE__ */ jsx("p", { className: "ui-text-xs ui-font-medium ui-text-red-600", children: error })
-    }
-  ) }) });
-};
-const InputErrorMessage$1 = memo(InputErrorMessage);
-export {
-  InputErrorMessage$1 as default
-};
-//# sourceMappingURL=InputErrorMessage.js.map