@ayasofyazilim/ui 0.0.0 → 0.0.2

package/dist/custom/date-tooltip.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ClockIcon } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@repo/ayasofyazilim-ui/components/tooltip";
+function DateTooltip({
+  icon = /* @__PURE__ */ jsx(ClockIcon, { className: "w-4 h-4" }),
+  date,
+  dateOptions = {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  },
+  localization
+}) {
+  const tenantDate = formatToLocalizedDate({
+    localization,
+    date,
+    dateOptions,
+    timeZone: localization.timeZone
+  });
+  const utcDate = formatToLocalizedDate({
+    localization,
+    date,
+    dateOptions,
+    timeZone: "UTC"
+  });
+  const userDate = formatToLocalizedDate({ localization, date, dateOptions });
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        className: "flex items-center gap-1 underline decoration-dotted underline-offset-2",
+        asChild: true,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          icon,
+          " ",
+          tenantDate
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(TooltipContent, { className: "bg-gray-100 text-gray-900 border border-gray-300 z-100 [&_svg]:fill-gray-100", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold mr-2", children: "UTC:" }),
+        utcDate
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold mr-2", children: "Tenant:" }),
+        tenantDate
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold mr-2", children: "You:" }),
+        userDate
+      ] })
+    ] })
+  ] });
+}
+var date_tooltip_default = DateTooltip;
+function formatToLocalizedDate({
+  localization,
+  date,
+  dateOptions = {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  },
+  timeZone
+}) {
+  const _date = typeof date === "string" ? new Date(date) : date;
+  const dateString = _date.toLocaleDateString(localization.lang, {
+    ...dateOptions,
+    timeZone
+  });
+  return dateString;
+}
+export {
+  date_tooltip_default as default,
+  formatToLocalizedDate
+};
+//# sourceMappingURL=date-tooltip.js.map

package/dist/custom/date-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/date-tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { ClockIcon } from \"lucide-react\";\r\nimport {\r\n  Tooltip,\r\n  TooltipContent,\r\n  TooltipTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/tooltip\";\r\n\r\nexport type Localization = { locale: string; timeZone: string; lang: string };\r\n\r\nfunction DateTooltip({\r\n  icon = <ClockIcon className=\"w-4 h-4\" />,\r\n  date,\r\n  dateOptions = {\r\n    day: \"2-digit\",\r\n    month: \"long\",\r\n    year: \"numeric\",\r\n    hour: \"2-digit\",\r\n    minute: \"2-digit\",\r\n    hour12: false,\r\n  },\r\n  localization,\r\n}: {\r\n  icon?: React.ReactNode;\r\n  date: string | Date;\r\n  dateOptions?: Intl.DateTimeFormatOptions;\r\n  localization: Localization;\r\n}) {\r\n  const tenantDate = formatToLocalizedDate({\r\n    localization,\r\n    date,\r\n    dateOptions,\r\n    timeZone: localization.timeZone,\r\n  });\r\n  const utcDate = formatToLocalizedDate({\r\n    localization,\r\n    date,\r\n    dateOptions,\r\n    timeZone: \"UTC\",\r\n  });\r\n  const userDate = formatToLocalizedDate({ localization, date, dateOptions });\r\n  return (\r\n    <Tooltip>\r\n      <TooltipTrigger\r\n        className=\"flex items-center gap-1 underline decoration-dotted underline-offset-2\"\r\n        asChild\r\n      >\r\n        <div>\r\n          {icon} {tenantDate}\r\n        </div>\r\n      </TooltipTrigger>\r\n      <TooltipContent className=\"bg-gray-100 text-gray-900 border border-gray-300 z-100 [&_svg]:fill-gray-100\">\r\n        <p className=\"flex justify-between\">\r\n          <span className=\"font-semibold mr-2\">UTC:</span>\r\n          {utcDate}\r\n        </p>\r\n        <p className=\"flex justify-between\">\r\n          <span className=\"font-semibold mr-2\">Tenant:</span>\r\n          {tenantDate}\r\n        </p>\r\n        <p className=\"flex justify-between\">\r\n          <span className=\"font-semibold mr-2\">You:</span>\r\n          {userDate}\r\n        </p>\r\n      </TooltipContent>\r\n    </Tooltip>\r\n  );\r\n}\r\n\r\nexport default DateTooltip;\r\n\r\nexport function formatToLocalizedDate({\r\n  localization,\r\n  date,\r\n  dateOptions = {\r\n    day: \"2-digit\",\r\n    month: \"long\",\r\n    year: \"numeric\",\r\n    hour: \"2-digit\",\r\n    minute: \"2-digit\",\r\n    hour12: false,\r\n  },\r\n  timeZone,\r\n}: {\r\n  localization: Localization;\r\n  date: string | Date;\r\n  dateOptions?: Intl.DateTimeFormatOptions;\r\n  timeZone?: string;\r\n}) {\r\n  const _date = typeof date === \"string\" ? new Date(date) : date;\r\n  const dateString = _date.toLocaleDateString(localization.lang, {\r\n    ...dateOptions,\r\n    timeZone,\r\n  });\r\n  return dateString;\r\n}\r\n"],"mappings":";AAaS,cAoCD,YApCC;AAVT,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,YAAY;AAAA,EACnB,OAAO,oBAAC,aAAU,WAAU,WAAU;AAAA,EACtC;AAAA,EACA,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA;AACF,GAKG;AACD,QAAM,aAAa,sBAAsB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,aAAa;AAAA,EACzB,CAAC;AACD,QAAM,UAAU,sBAAsB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,WAAW,sBAAsB,EAAE,cAAc,MAAM,YAAY,CAAC;AAC1E,SACE,qBAAC,WACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAO;AAAA,QAEP,+BAAC,SACE;AAAA;AAAA,UAAK;AAAA,UAAE;AAAA,WACV;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,kBAAe,WAAU,gFACxB;AAAA,2BAAC,OAAE,WAAU,wBACX;AAAA,4BAAC,UAAK,WAAU,sBAAqB,kBAAI;AAAA,QACxC;AAAA,SACH;AAAA,MACA,qBAAC,OAAE,WAAU,wBACX;AAAA,4BAAC,UAAK,WAAU,sBAAqB,qBAAO;AAAA,QAC3C;AAAA,SACH;AAAA,MACA,qBAAC,OAAE,WAAU,wBACX;AAAA,4BAAC,UAAK,WAAU,sBAAqB,kBAAI;AAAA,QACxC;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;AAER,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,OAAO,SAAS,WAAW,IAAI,KAAK,IAAI,IAAI;AAC1D,QAAM,aAAa,MAAM,mBAAmB,aAAa,MAAM;AAAA,IAC7D,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACD,SAAO;AACT;","names":[]}

package/dist/custom/document-scanner/consts.js

@@ -0,0 +1,13 @@
+const DEFAULT_VIDEO_DIMENSIONS = { width: 1080, height: 1080 };
+const DEFAULT_MIN_DOCUMENT_SIZE = 0.1;
+const DEFAULT_MAX_DOCUMENT_SIZE = 0.98;
+const DEFAULT_IMAGE_QUALITY = 0.95;
+const DEFAULT_CAPTURE_INTERVAL = 2;
+export {
+  DEFAULT_CAPTURE_INTERVAL,
+  DEFAULT_IMAGE_QUALITY,
+  DEFAULT_MAX_DOCUMENT_SIZE,
+  DEFAULT_MIN_DOCUMENT_SIZE,
+  DEFAULT_VIDEO_DIMENSIONS
+};
+//# sourceMappingURL=consts.js.map

package/dist/custom/document-scanner/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/document-scanner/consts.ts"],"sourcesContent":["export const DEFAULT_VIDEO_DIMENSIONS = { width: 1080, height: 1080 };\r\nexport const DEFAULT_MIN_DOCUMENT_SIZE = 0.1;\r\nexport const DEFAULT_MAX_DOCUMENT_SIZE = 0.98;\r\nexport const DEFAULT_IMAGE_QUALITY = 0.95;\r\nexport const DEFAULT_CAPTURE_INTERVAL = 2;\r\n"],"mappings":"AAAO,MAAM,2BAA2B,EAAE,OAAO,MAAM,QAAQ,KAAK;AAC7D,MAAM,4BAA4B;AAClC,MAAM,4BAA4B;AAClC,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/action-buttons.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+const ActionButtons = memo(
+  ({
+    allowCrop,
+    allowRetry,
+    cropButtonText,
+    retryButtonText,
+    onCrop,
+    onRetry
+  }) => {
+    if (!allowCrop && !allowRetry) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 right-2 flex gap-2", children: [
+      allowRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onRetry, size: "sm", children: retryButtonText }),
+      allowCrop && /* @__PURE__ */ jsx(Button, { onClick: onCrop, size: "sm", children: cropButtonText })
+    ] });
+  }
+);
+ActionButtons.displayName = "ActionButtons";
+export {
+  ActionButtons
+};
+//# sourceMappingURL=action-buttons.js.map

package/dist/custom/document-scanner/corner-adjustment/action-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/document-scanner/corner-adjustment/action-buttons.tsx"],"sourcesContent":["import { memo } from \"react\";\r\nimport { ActionButtonsProps } from \"./types\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\n\r\nexport const ActionButtons = memo<ActionButtonsProps>(\r\n  ({\r\n    allowCrop,\r\n    allowRetry,\r\n    cropButtonText,\r\n    retryButtonText,\r\n    onCrop,\r\n    onRetry,\r\n  }) => {\r\n    if (!allowCrop && !allowRetry) return null;\r\n\r\n    return (\r\n      <div className=\"absolute bottom-2 right-2 flex gap-2\">\r\n        {allowRetry && (\r\n          <Button type=\"button\" variant=\"outline\" onClick={onRetry} size=\"sm\">\r\n            {retryButtonText}\r\n          </Button>\r\n        )}\r\n        {allowCrop && (\r\n          <Button onClick={onCrop} size=\"sm\">\r\n            {cropButtonText}\r\n          </Button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nActionButtons.displayName = \"ActionButtons\";\r\n"],"mappings":"AAgBM,SAEI,KAFJ;AAhBN,SAAS,YAAY;AAErB,SAAS,cAAc;AAEhB,MAAM,gBAAgB;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,QAAI,CAAC,aAAa,CAAC,WAAY,QAAO;AAEtC,WACE,qBAAC,SAAI,WAAU,wCACZ;AAAA,oBACC,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,SAAS,MAAK,MAC5D,2BACH;AAAA,MAED,aACC,oBAAC,UAAO,SAAS,QAAQ,MAAK,MAC3B,0BACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/corner-handle.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+const CornerHandle = memo(
+  ({
+    cornerKey,
+    corner,
+    videoDimensions,
+    isDragging,
+    cornerColor,
+    cornerTouchAreaSize,
+    onDragStart
+  }) => {
+    const percentX = corner.x / videoDimensions.width * 100;
+    const percentY = corner.y / videoDimensions.height * 100;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: cn(
+          "block border rounded-full min-w-5 min-h-5 absolute cursor-grab active:cursor-grabbing select-none",
+          isDragging ? "bg-blue-500/80 scale-125" : cornerColor,
+          isDragging ? "z-20" : "z-10"
+        ),
+        style: {
+          left: `${percentX}%`,
+          top: `${percentY}%`,
+          transform: `translate(-50%, -50%)`,
+          width: `${cornerTouchAreaSize}px`,
+          height: `${cornerTouchAreaSize}px`,
+          touchAction: "none"
+        },
+        onPointerDown: (e) => onDragStart(cornerKey, e),
+        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Drag ${cornerKey} corner` })
+      }
+    );
+  }
+);
+CornerHandle.displayName = "CornerHandle";
+export {
+  CornerHandle
+};
+//# sourceMappingURL=corner-handle.js.map

package/dist/custom/document-scanner/corner-adjustment/corner-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/document-scanner/corner-adjustment/corner-handle.tsx"],"sourcesContent":["import { memo } from \"react\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { CornerHandleProps } from \"./types\";\r\n\r\nexport const CornerHandle = memo<CornerHandleProps>(\r\n  ({\r\n    cornerKey,\r\n    corner,\r\n    videoDimensions,\r\n    isDragging,\r\n    cornerColor,\r\n    cornerTouchAreaSize,\r\n    onDragStart,\r\n  }) => {\r\n    const percentX = (corner.x / videoDimensions.width) * 100;\r\n    const percentY = (corner.y / videoDimensions.height) * 100;\r\n\r\n    return (\r\n      <div\r\n        role=\"button\"\r\n        tabIndex={0}\r\n        className={cn(\r\n          \"block border rounded-full min-w-5 min-h-5 absolute cursor-grab active:cursor-grabbing select-none\",\r\n          isDragging ? \"bg-blue-500/80 scale-125\" : cornerColor,\r\n          isDragging ? \"z-20\" : \"z-10\"\r\n        )}\r\n        style={{\r\n          left: `${percentX}%`,\r\n          top: `${percentY}%`,\r\n          transform: `translate(-50%, -50%)`,\r\n          width: `${cornerTouchAreaSize}px`,\r\n          height: `${cornerTouchAreaSize}px`,\r\n          touchAction: \"none\",\r\n        }}\r\n        onPointerDown={(e) => onDragStart(cornerKey, e)}\r\n      >\r\n        <span className=\"sr-only\">{`Drag ${cornerKey} corner`}</span>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nCornerHandle.displayName = \"CornerHandle\";\r\n"],"mappings":"AAoCQ;AApCR,SAAS,YAAY;AACrB,SAAS,UAAU;AAGZ,MAAM,eAAe;AAAA,EAC1B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,WAAY,OAAO,IAAI,gBAAgB,QAAS;AACtD,UAAM,WAAY,OAAO,IAAI,gBAAgB,SAAU;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aAAa,6BAA6B;AAAA,UAC1C,aAAa,SAAS;AAAA,QACxB;AAAA,QACA,OAAO;AAAA,UACL,MAAM,GAAG,QAAQ;AAAA,UACjB,KAAK,GAAG,QAAQ;AAAA,UAChB,WAAW;AAAA,UACX,OAAO,GAAG,mBAAmB;AAAA,UAC7B,QAAQ,GAAG,mBAAmB;AAAA,UAC9B,aAAa;AAAA,QACf;AAAA,QACA,eAAe,CAAC,MAAM,YAAY,WAAW,CAAC;AAAA,QAE9C,8BAAC,UAAK,WAAU,WAAW,kBAAQ,SAAS,WAAU;AAAA;AAAA,IACxD;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/hooks/use-corner-drag.js

@@ -0,0 +1,60 @@
+import { useCallback, useState } from "react";
+function useCornerDrag(detectedCorners, videoDimensions, onCornersChange) {
+  const [dragState, setDragState] = useState({
+    isDragging: null,
+    offset: { x: 0, y: 0 }
+  });
+  const handleCornerDragStart = useCallback(
+    (cornerKey, event) => {
+      event.preventDefault();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const containerRect = event.currentTarget.closest(".corner-adjustment-container")?.getBoundingClientRect();
+      if (containerRect) {
+        const newDragState = {
+          isDragging: cornerKey,
+          offset: {
+            x: event.clientX - rect.left - rect.width / 2,
+            y: event.clientY - rect.top - rect.height / 2
+          }
+        };
+        setDragState(newDragState);
+      }
+    },
+    []
+  );
+  const handleCornerDrag = useCallback(
+    (event) => {
+      if (!dragState.isDragging || !detectedCorners) {
+        return;
+      }
+      event.preventDefault();
+      const containerRect = event.currentTarget.getBoundingClientRect();
+      const newX = (event.clientX - containerRect.left - dragState.offset.x) / containerRect.width * videoDimensions.width;
+      const newY = (event.clientY - containerRect.top - dragState.offset.y) / containerRect.height * videoDimensions.height;
+      const clampedX = Math.max(0, Math.min(videoDimensions.width, newX));
+      const clampedY = Math.max(0, Math.min(videoDimensions.height, newY));
+      const updatedCorners = {
+        ...detectedCorners,
+        [dragState.isDragging]: { x: clampedX, y: clampedY }
+      };
+      onCornersChange(updatedCorners);
+    },
+    [dragState, detectedCorners, videoDimensions, onCornersChange]
+  );
+  const handleCornerDragEnd = useCallback(() => {
+    setDragState({
+      isDragging: null,
+      offset: { x: 0, y: 0 }
+    });
+  }, []);
+  return {
+    dragState,
+    handleCornerDragStart,
+    handleCornerDrag,
+    handleCornerDragEnd
+  };
+}
+export {
+  useCornerDrag
+};
+//# sourceMappingURL=use-corner-drag.js.map

package/dist/custom/document-scanner/corner-adjustment/hooks/use-corner-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/document-scanner/corner-adjustment/hooks/use-corner-drag.ts"],"sourcesContent":["import { useCallback, useState, PointerEvent } from \"react\";\r\nimport { DocumentCorners } from \"../../types\";\r\nimport { DragState } from \"../types\";\r\n\r\nexport function useCornerDrag(\r\n  detectedCorners: DocumentCorners,\r\n  videoDimensions: { width: number; height: number },\r\n  onCornersChange: (corners: DocumentCorners) => void\r\n) {\r\n  const [dragState, setDragState] = useState<DragState>({\r\n    isDragging: null,\r\n    offset: { x: 0, y: 0 },\r\n  });\r\n\r\n  const handleCornerDragStart = useCallback(\r\n    (cornerKey: string, event: PointerEvent) => {\r\n      event.preventDefault();\r\n\r\n      const rect = event.currentTarget.getBoundingClientRect();\r\n      const containerRect = event.currentTarget\r\n        .closest(\".corner-adjustment-container\")\r\n        ?.getBoundingClientRect();\r\n\r\n      if (containerRect) {\r\n        const newDragState = {\r\n          isDragging: cornerKey,\r\n          offset: {\r\n            x: event.clientX - rect.left - rect.width / 2,\r\n            y: event.clientY - rect.top - rect.height / 2,\r\n          },\r\n        };\r\n        setDragState(newDragState);\r\n      }\r\n    },\r\n    []\r\n  );\r\n\r\n  const handleCornerDrag = useCallback(\r\n    (event: PointerEvent) => {\r\n      if (!dragState.isDragging || !detectedCorners) {\r\n        return;\r\n      }\r\n\r\n      event.preventDefault();\r\n      const containerRect = event.currentTarget.getBoundingClientRect();\r\n\r\n      // Calculate new position relative to container\r\n      const newX =\r\n        ((event.clientX - containerRect.left - dragState.offset.x) /\r\n          containerRect.width) *\r\n        videoDimensions.width;\r\n      const newY =\r\n        ((event.clientY - containerRect.top - dragState.offset.y) /\r\n          containerRect.height) *\r\n        videoDimensions.height;\r\n\r\n      // Clamp to image bounds\r\n      const clampedX = Math.max(0, Math.min(videoDimensions.width, newX));\r\n      const clampedY = Math.max(0, Math.min(videoDimensions.height, newY));\r\n\r\n      // Update corners\r\n      const updatedCorners = {\r\n        ...detectedCorners,\r\n        [dragState.isDragging]: { x: clampedX, y: clampedY },\r\n      };\r\n\r\n      onCornersChange(updatedCorners);\r\n    },\r\n    [dragState, detectedCorners, videoDimensions, onCornersChange]\r\n  );\r\n\r\n  const handleCornerDragEnd = useCallback(() => {\r\n    setDragState({\r\n      isDragging: null,\r\n      offset: { x: 0, y: 0 },\r\n    });\r\n  }, []);\r\n\r\n  return {\r\n    dragState,\r\n    handleCornerDragStart,\r\n    handleCornerDrag,\r\n    handleCornerDragEnd,\r\n  };\r\n}\r\n"],"mappings":"AAAA,SAAS,aAAa,gBAA8B;AAI7C,SAAS,cACd,iBACA,iBACA,iBACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB;AAAA,IACpD,YAAY;AAAA,IACZ,QAAQ,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACvB,CAAC;AAED,QAAM,wBAAwB;AAAA,IAC5B,CAAC,WAAmB,UAAwB;AAC1C,YAAM,eAAe;AAErB,YAAM,OAAO,MAAM,cAAc,sBAAsB;AACvD,YAAM,gBAAgB,MAAM,cACzB,QAAQ,8BAA8B,GACrC,sBAAsB;AAE1B,UAAI,eAAe;AACjB,cAAM,eAAe;AAAA,UACnB,YAAY;AAAA,UACZ,QAAQ;AAAA,YACN,GAAG,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AAAA,YAC5C,GAAG,MAAM,UAAU,KAAK,MAAM,KAAK,SAAS;AAAA,UAC9C;AAAA,QACF;AACA,qBAAa,YAAY;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAwB;AACvB,UAAI,CAAC,UAAU,cAAc,CAAC,iBAAiB;AAC7C;AAAA,MACF;AAEA,YAAM,eAAe;AACrB,YAAM,gBAAgB,MAAM,cAAc,sBAAsB;AAGhE,YAAM,QACF,MAAM,UAAU,cAAc,OAAO,UAAU,OAAO,KACtD,cAAc,QAChB,gBAAgB;AAClB,YAAM,QACF,MAAM,UAAU,cAAc,MAAM,UAAU,OAAO,KACrD,cAAc,SAChB,gBAAgB;AAGlB,YAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,gBAAgB,OAAO,IAAI,CAAC;AAClE,YAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,gBAAgB,QAAQ,IAAI,CAAC;AAGnE,YAAM,iBAAiB;AAAA,QACrB,GAAG;AAAA,QACH,CAAC,UAAU,UAAU,GAAG,EAAE,GAAG,UAAU,GAAG,SAAS;AAAA,MACrD;AAEA,sBAAgB,cAAc;AAAA,IAChC;AAAA,IACA,CAAC,WAAW,iBAAiB,iBAAiB,eAAe;AAAA,EAC/D;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,iBAAa;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACvB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/index.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef, useLayoutEffect, useState } from "react";
+import { ActionButtons } from "./action-buttons";
+import { CornerHandle } from "./corner-handle";
+import { ZoomMagnifier } from "./zoom-magnifier";
+import { useCornerDrag } from "./hooks/use-corner-drag";
+import { generateClipPath } from "./utils/clip-path";
+const CornerAdjustment = memo(
+  ({
+    capturedImage,
+    detectedCorners,
+    videoDimensions,
+    onCornersChange,
+    onCrop,
+    onRetry,
+    cornerColor = "bg-white/80",
+    cornerTouchAreaSize = 20,
+    allowCrop = true,
+    allowRetry = true,
+    cropButtonText = "Crop",
+    retryButtonText = "Scan Again",
+    showMagnifier = true,
+    magnifierSize = 100,
+    zoomLevel = 2
+  }) => {
+    const containerRef = useRef(null);
+    const [containerDimensions, setContainerDimensions] = useState({
+      width: 0,
+      height: 0
+    });
+    const {
+      dragState,
+      handleCornerDragStart,
+      handleCornerDrag,
+      handleCornerDragEnd
+    } = useCornerDrag(detectedCorners, videoDimensions, onCornersChange);
+    useLayoutEffect(() => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerDimensions({ width: rect.width, height: rect.height });
+      }
+    }, []);
+    const clipPath = useMemo(
+      () => generateClipPath(detectedCorners, videoDimensions),
+      [detectedCorners, videoDimensions]
+    );
+    const cornerEntries = useMemo(
+      () => Object.entries(detectedCorners),
+      [detectedCorners]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "corner-adjustment-container size-full flex items-center justify-center relative bg-red-500",
+        onPointerMove: handleCornerDrag,
+        onPointerUp: handleCornerDragEnd,
+        onPointerLeave: handleCornerDragEnd,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: capturedImage,
+              alt: "Original",
+              className: "h-auto w-full object-contain absolute top-0 left-0 opacity-50",
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: capturedImage,
+              alt: "Document preview",
+              className: "h-full w-full object-contain",
+              style: { clipPath },
+              draggable: false
+            }
+          ),
+          showMagnifier && /* @__PURE__ */ jsx(
+            ZoomMagnifier,
+            {
+              capturedImage,
+              detectedCorners,
+              videoDimensions,
+              containerDimensions,
+              draggedCorner: dragState.isDragging,
+              zoomLevel,
+              magnifierSize
+            }
+          ),
+          cornerEntries.map(([cornerKey, corner]) => /* @__PURE__ */ jsx(
+            CornerHandle,
+            {
+              cornerKey,
+              corner,
+              videoDimensions,
+              isDragging: dragState.isDragging === cornerKey,
+              cornerColor,
+              cornerTouchAreaSize,
+              onDragStart: handleCornerDragStart
+            },
+            cornerKey
+          )),
+          !dragState.isDragging && /* @__PURE__ */ jsx(
+            ActionButtons,
+            {
+              allowCrop,
+              allowRetry,
+              cropButtonText,
+              retryButtonText,
+              onCrop,
+              onRetry
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CornerAdjustment.displayName = "CornerAdjustment";
+export {
+  CornerAdjustment
+};
+//# sourceMappingURL=index.js.map

package/dist/custom/document-scanner/corner-adjustment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/document-scanner/corner-adjustment/index.tsx"],"sourcesContent":["import { memo, useMemo, useRef, useLayoutEffect, useState } from \"react\";\r\nimport { ActionButtons } from \"./action-buttons\";\r\nimport { CornerHandle } from \"./corner-handle\";\r\nimport { ZoomMagnifier } from \"./zoom-magnifier\";\r\nimport { useCornerDrag } from \"./hooks/use-corner-drag\";\r\nimport { generateClipPath } from \"./utils/clip-path\";\r\nimport { CornerAdjustmentProps } from \"../types\";\r\n\r\nexport const CornerAdjustment = memo<CornerAdjustmentProps>(\r\n  ({\r\n    capturedImage,\r\n    detectedCorners,\r\n    videoDimensions,\r\n    onCornersChange,\r\n    onCrop,\r\n    onRetry,\r\n    cornerColor = \"bg-white/80\",\r\n    cornerTouchAreaSize = 20,\r\n    allowCrop = true,\r\n    allowRetry = true,\r\n    cropButtonText = \"Crop\",\r\n    retryButtonText = \"Scan Again\",\r\n    showMagnifier = true,\r\n    magnifierSize = 100,\r\n    zoomLevel = 2,\r\n  }) => {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const [containerDimensions, setContainerDimensions] = useState({\r\n      width: 0,\r\n      height: 0,\r\n    });\r\n\r\n    const {\r\n      dragState,\r\n      handleCornerDragStart,\r\n      handleCornerDrag,\r\n      handleCornerDragEnd,\r\n    } = useCornerDrag(detectedCorners, videoDimensions, onCornersChange);\r\n\r\n    // Update container dimensions\r\n    useLayoutEffect(() => {\r\n      if (containerRef.current) {\r\n        const rect = containerRef.current.getBoundingClientRect();\r\n        setContainerDimensions({ width: rect.width, height: rect.height });\r\n      }\r\n    }, []);\r\n\r\n    const clipPath = useMemo(\r\n      () => generateClipPath(detectedCorners, videoDimensions),\r\n      [detectedCorners, videoDimensions]\r\n    );\r\n\r\n    const cornerEntries = useMemo(\r\n      () => Object.entries(detectedCorners),\r\n      [detectedCorners]\r\n    );\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className=\"corner-adjustment-container size-full flex items-center justify-center relative bg-red-500\"\r\n        onPointerMove={handleCornerDrag}\r\n        onPointerUp={handleCornerDragEnd}\r\n        onPointerLeave={handleCornerDragEnd}\r\n      >\r\n        {/* Original image */}\r\n        <img\r\n          src={capturedImage}\r\n          alt=\"Original\"\r\n          className=\"h-auto w-full object-contain absolute top-0 left-0 opacity-50\"\r\n          draggable={false}\r\n        />\r\n        {/* Clipped image */}\r\n        <img\r\n          src={capturedImage}\r\n          alt=\"Document preview\"\r\n          className=\"h-full w-full object-contain\"\r\n          style={{ clipPath }}\r\n          draggable={false}\r\n        />\r\n\r\n        {/* Zoom Magnifier */}\r\n        {showMagnifier && (\r\n          <ZoomMagnifier\r\n            capturedImage={capturedImage}\r\n            detectedCorners={detectedCorners}\r\n            videoDimensions={videoDimensions}\r\n            containerDimensions={containerDimensions}\r\n            draggedCorner={dragState.isDragging}\r\n            zoomLevel={zoomLevel}\r\n            magnifierSize={magnifierSize}\r\n          />\r\n        )}\r\n\r\n        {/* Corner handles */}\r\n        {cornerEntries.map(([cornerKey, corner]) => (\r\n          <CornerHandle\r\n            key={cornerKey}\r\n            cornerKey={cornerKey}\r\n            corner={corner}\r\n            videoDimensions={videoDimensions}\r\n            isDragging={dragState.isDragging === cornerKey}\r\n            cornerColor={cornerColor}\r\n            cornerTouchAreaSize={cornerTouchAreaSize}\r\n            onDragStart={handleCornerDragStart}\r\n          />\r\n        ))}\r\n\r\n        {/* Action buttons */}\r\n        {!dragState.isDragging && (\r\n          <ActionButtons\r\n            allowCrop={allowCrop}\r\n            allowRetry={allowRetry}\r\n            cropButtonText={cropButtonText}\r\n            retryButtonText={retryButtonText}\r\n            onCrop={onCrop}\r\n            onRetry={onRetry}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nCornerAdjustment.displayName = \"CornerAdjustment\";\r\n"],"mappings":"AA0DM,SAQE,KARF;AA1DN,SAAS,MAAM,SAAS,QAAQ,iBAAiB,gBAAgB;AACjE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,mBAAmB;AAAA,EAC9B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd,MAAM;AACJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS;AAAA,MAC7D,OAAO;AAAA,MACP,QAAQ;AAAA,IACV,CAAC;AAED,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,cAAc,iBAAiB,iBAAiB,eAAe;AAGnE,oBAAgB,MAAM;AACpB,UAAI,aAAa,SAAS;AACxB,cAAM,OAAO,aAAa,QAAQ,sBAAsB;AACxD,+BAAuB,EAAE,OAAO,KAAK,OAAO,QAAQ,KAAK,OAAO,CAAC;AAAA,MACnE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,WAAW;AAAA,MACf,MAAM,iBAAiB,iBAAiB,eAAe;AAAA,MACvD,CAAC,iBAAiB,eAAe;AAAA,IACnC;AAEA,UAAM,gBAAgB;AAAA,MACpB,MAAM,OAAO,QAAQ,eAAe;AAAA,MACpC,CAAC,eAAe;AAAA,IAClB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAe;AAAA,QACf,aAAa;AAAA,QACb,gBAAgB;AAAA,QAGhB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAI;AAAA,cACJ,WAAU;AAAA,cACV,WAAW;AAAA;AAAA,UACb;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAI;AAAA,cACJ,WAAU;AAAA,cACV,OAAO,EAAE,SAAS;AAAA,cAClB,WAAW;AAAA;AAAA,UACb;AAAA,UAGC,iBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,UAAU;AAAA,cACzB;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAID,cAAc,IAAI,CAAC,CAAC,WAAW,MAAM,MACpC;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA,YAAY,UAAU,eAAe;AAAA,cACrC;AAAA,cACA;AAAA,cACA,aAAa;AAAA;AAAA,YAPR;AAAA,UAQP,CACD;AAAA,UAGA,CAAC,UAAU,cACV;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/custom/document-scanner/corner-adjustment/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/custom/document-scanner/corner-adjustment/utils/clip-path.js

@@ -0,0 +1,16 @@
+function generateClipPath(corners, videoDimensions) {
+  const { topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner } = corners;
+  const toPercent = (x, y) => ({
+    x: x / videoDimensions.width * 100,
+    y: y / videoDimensions.height * 100
+  });
+  const tl = toPercent(topLeftCorner.x, topLeftCorner.y);
+  const tr = toPercent(topRightCorner.x, topRightCorner.y);
+  const br = toPercent(bottomRightCorner.x, bottomRightCorner.y);
+  const bl = toPercent(bottomLeftCorner.x, bottomLeftCorner.y);
+  return `polygon(${tl.x}% ${tl.y}%, ${tr.x}% ${tr.y}%, ${br.x}% ${br.y}%, ${bl.x}% ${bl.y}%)`;
+}
+export {
+  generateClipPath
+};
+//# sourceMappingURL=clip-path.js.map

package/dist/custom/document-scanner/corner-adjustment/utils/clip-path.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/document-scanner/corner-adjustment/utils/clip-path.ts"],"sourcesContent":["import { DocumentCorners } from \"../../types\";\r\n\r\nexport function generateClipPath(\r\n  corners: DocumentCorners,\r\n  videoDimensions: { width: number; height: number }\r\n): string {\r\n  const { topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner } =\r\n    corners;\r\n\r\n  // Convert pixel coordinates to percentages\r\n  const toPercent = (x: number, y: number) => ({\r\n    x: (x / videoDimensions.width) * 100,\r\n    y: (y / videoDimensions.height) * 100,\r\n  });\r\n\r\n  const tl = toPercent(topLeftCorner.x, topLeftCorner.y);\r\n  const tr = toPercent(topRightCorner.x, topRightCorner.y);\r\n  const br = toPercent(bottomRightCorner.x, bottomRightCorner.y);\r\n  const bl = toPercent(bottomLeftCorner.x, bottomLeftCorner.y);\r\n\r\n  return `polygon(${tl.x}% ${tl.y}%, ${tr.x}% ${tr.y}%, ${br.x}% ${br.y}%, ${bl.x}% ${bl.y}%)`;\r\n}\r\n"],"mappings":"AAEO,SAAS,iBACd,SACA,iBACQ;AACR,QAAM,EAAE,eAAe,gBAAgB,mBAAmB,iBAAiB,IACzE;AAGF,QAAM,YAAY,CAAC,GAAW,OAAe;AAAA,IAC3C,GAAI,IAAI,gBAAgB,QAAS;AAAA,IACjC,GAAI,IAAI,gBAAgB,SAAU;AAAA,EACpC;AAEA,QAAM,KAAK,UAAU,cAAc,GAAG,cAAc,CAAC;AACrD,QAAM,KAAK,UAAU,eAAe,GAAG,eAAe,CAAC;AACvD,QAAM,KAAK,UAAU,kBAAkB,GAAG,kBAAkB,CAAC;AAC7D,QAAM,KAAK,UAAU,iBAAiB,GAAG,iBAAiB,CAAC;AAE3D,SAAO,WAAW,GAAG,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC;AAC1F;","names":[]}

package/dist/custom/document-scanner/corner-adjustment/zoom-magnifier.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+const ZoomMagnifier = memo(
+  ({
+    capturedImage,
+    detectedCorners,
+    videoDimensions,
+    containerDimensions,
+    draggedCorner,
+    zoomLevel = 3,
+    magnifierSize = 100
+  }) => {
+    const position = useMemo(() => {
+      if (!draggedCorner) return null;
+      const margin = 8;
+      let left = 0;
+      let top = 0;
+      switch (draggedCorner) {
+        case "topLeftCorner":
+          left = containerDimensions.width - magnifierSize - margin;
+          top = margin;
+          break;
+        case "topRightCorner":
+          left = margin;
+          top = margin;
+          break;
+        case "bottomLeftCorner":
+          left = containerDimensions.width - magnifierSize - margin;
+          top = containerDimensions.height - magnifierSize - margin;
+          break;
+        case "bottomRightCorner":
+          left = margin;
+          top = containerDimensions.height - magnifierSize - margin;
+          break;
+        default:
+          return null;
+      }
+      return { left, top };
+    }, [draggedCorner, containerDimensions, magnifierSize]);
+    const backgroundStyle = useMemo(() => {
+      if (!position || !draggedCorner) return {};
+      const activeCorner = detectedCorners[draggedCorner];
+      if (!activeCorner) return {};
+      const cornerX = activeCorner.x / videoDimensions.width * containerDimensions.width;
+      const cornerY = activeCorner.y / videoDimensions.height * containerDimensions.height;
+      const bgX = -cornerX * zoomLevel + magnifierSize / 2;
+      const bgY = -cornerY * zoomLevel + magnifierSize / 2;
+      return {
+        backgroundImage: `url(${capturedImage})`,
+        backgroundSize: `${containerDimensions.width * zoomLevel}px ${containerDimensions.height * zoomLevel}px`,
+        backgroundPosition: `${bgX}px ${bgY}px`,
+        backgroundRepeat: "no-repeat"
+      };
+    }, [
+      capturedImage,
+      detectedCorners,
+      draggedCorner,
+      videoDimensions,
+      containerDimensions,
+      zoomLevel,
+      magnifierSize,
+      position
+    ]);
+    if (!position || !draggedCorner) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute border-2 border-white rounded-md shadow-lg pointer-events-none z-30",
+        style: {
+          left: position.left,
+          top: position.top,
+          width: magnifierSize,
+          height: magnifierSize,
+          ...backgroundStyle
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "size-[5px] rounded-full border border-primary bg-white absolute" }) }) })
+      }
+    );
+  }
+);
+ZoomMagnifier.displayName = "ZoomMagnifier";
+export {
+  ZoomMagnifier
+};
+//# sourceMappingURL=zoom-magnifier.js.map

package/dist/custom/document-scanner/corner-adjustment/zoom-magnifier.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/document-scanner/corner-adjustment/zoom-magnifier.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { DocumentCorners } from \"../types\";\r\n\r\ninterface ZoomMagnifierProps {\r\n  capturedImage: string;\r\n  detectedCorners: DocumentCorners;\r\n  videoDimensions: { width: number; height: number };\r\n  containerDimensions: { width: number; height: number };\r\n  draggedCorner: string | null;\r\n  zoomLevel?: number;\r\n  magnifierSize?: number;\r\n}\r\n\r\nexport const ZoomMagnifier = memo<ZoomMagnifierProps>(\r\n  ({\r\n    capturedImage,\r\n    detectedCorners,\r\n    videoDimensions,\r\n    containerDimensions,\r\n    draggedCorner,\r\n    zoomLevel = 3,\r\n    magnifierSize = 100,\r\n  }) => {\r\n    const position = useMemo(() => {\r\n      if (!draggedCorner) return null;\r\n\r\n      const margin = 8;\r\n      let left = 0;\r\n      let top = 0;\r\n\r\n      // Position opposite to the corner being dragged\r\n      switch (draggedCorner) {\r\n        case \"topLeftCorner\":\r\n          left = containerDimensions.width - magnifierSize - margin;\r\n          top = margin;\r\n          break;\r\n        case \"topRightCorner\":\r\n          left = margin;\r\n          top = margin;\r\n          break;\r\n        case \"bottomLeftCorner\":\r\n          left = containerDimensions.width - magnifierSize - margin;\r\n          top = containerDimensions.height - magnifierSize - margin;\r\n          break;\r\n        case \"bottomRightCorner\":\r\n          left = margin;\r\n          top = containerDimensions.height - magnifierSize - margin;\r\n          break;\r\n        default:\r\n          return null;\r\n      }\r\n\r\n      return { left, top };\r\n    }, [draggedCorner, containerDimensions, magnifierSize]);\r\n\r\n    const backgroundStyle = useMemo(() => {\r\n      if (!position || !draggedCorner) return {};\r\n\r\n      // Get the active corner position\r\n      const activeCorner =\r\n        detectedCorners[draggedCorner as keyof DocumentCorners];\r\n      if (!activeCorner) return {};\r\n\r\n      // Convert corner position from video dimensions to container dimensions\r\n      const cornerX =\r\n        (activeCorner.x / videoDimensions.width) * containerDimensions.width;\r\n      const cornerY =\r\n        (activeCorner.y / videoDimensions.height) * containerDimensions.height;\r\n\r\n      // Calculate the background position to center the zoom on active corner\r\n      const bgX = -cornerX * zoomLevel + magnifierSize / 2;\r\n      const bgY = -cornerY * zoomLevel + magnifierSize / 2;\r\n\r\n      return {\r\n        backgroundImage: `url(${capturedImage})`,\r\n        backgroundSize: `${containerDimensions.width * zoomLevel}px ${containerDimensions.height * zoomLevel}px`,\r\n        backgroundPosition: `${bgX}px ${bgY}px`,\r\n        backgroundRepeat: \"no-repeat\",\r\n      };\r\n    }, [\r\n      capturedImage,\r\n      detectedCorners,\r\n      draggedCorner,\r\n      videoDimensions,\r\n      containerDimensions,\r\n      zoomLevel,\r\n      magnifierSize,\r\n      position,\r\n    ]);\r\n\r\n    if (!position || !draggedCorner) return null;\r\n\r\n    return (\r\n      <div\r\n        className=\"absolute border-2 border-white rounded-md shadow-lg pointer-events-none z-30\"\r\n        style={{\r\n          left: position.left,\r\n          top: position.top,\r\n          width: magnifierSize,\r\n          height: magnifierSize,\r\n          ...backgroundStyle,\r\n        }}\r\n      >\r\n        {/* Crosshair overlay */}\r\n        <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n          <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n            <div className=\"size-[5px] rounded-full border border-primary bg-white absolute\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nZoomMagnifier.displayName = \"ZoomMagnifier\";\r\n"],"mappings":"AA0GY;AA1GZ,SAAS,MAAM,eAAe;AAavB,MAAM,gBAAgB;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB,MAAM;AACJ,UAAM,WAAW,QAAQ,MAAM;AAC7B,UAAI,CAAC,cAAe,QAAO;AAE3B,YAAM,SAAS;AACf,UAAI,OAAO;AACX,UAAI,MAAM;AAGV,cAAQ,eAAe;AAAA,QACrB,KAAK;AACH,iBAAO,oBAAoB,QAAQ,gBAAgB;AACnD,gBAAM;AACN;AAAA,QACF,KAAK;AACH,iBAAO;AACP,gBAAM;AACN;AAAA,QACF,KAAK;AACH,iBAAO,oBAAoB,QAAQ,gBAAgB;AACnD,gBAAM,oBAAoB,SAAS,gBAAgB;AACnD;AAAA,QACF,KAAK;AACH,iBAAO;AACP,gBAAM,oBAAoB,SAAS,gBAAgB;AACnD;AAAA,QACF;AACE,iBAAO;AAAA,MACX;AAEA,aAAO,EAAE,MAAM,IAAI;AAAA,IACrB,GAAG,CAAC,eAAe,qBAAqB,aAAa,CAAC;AAEtD,UAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAI,CAAC,YAAY,CAAC,cAAe,QAAO,CAAC;AAGzC,YAAM,eACJ,gBAAgB,aAAsC;AACxD,UAAI,CAAC,aAAc,QAAO,CAAC;AAG3B,YAAM,UACH,aAAa,IAAI,gBAAgB,QAAS,oBAAoB;AACjE,YAAM,UACH,aAAa,IAAI,gBAAgB,SAAU,oBAAoB;AAGlE,YAAM,MAAM,CAAC,UAAU,YAAY,gBAAgB;AACnD,YAAM,MAAM,CAAC,UAAU,YAAY,gBAAgB;AAEnD,aAAO;AAAA,QACL,iBAAiB,OAAO,aAAa;AAAA,QACrC,gBAAgB,GAAG,oBAAoB,QAAQ,SAAS,MAAM,oBAAoB,SAAS,SAAS;AAAA,QACpG,oBAAoB,GAAG,GAAG,MAAM,GAAG;AAAA,QACnC,kBAAkB;AAAA,MACpB;AAAA,IACF,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,YAAY,CAAC,cAAe,QAAO;AAExC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,MAAM,SAAS;AAAA,UACf,KAAK,SAAS;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,GAAG;AAAA,QACL;AAAA,QAGA,8BAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,mEAAkE,GACnF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

package/dist/custom/document-scanner/hooks/use-document-capture.js

@@ -0,0 +1,61 @@
+import { useCallback } from "react";
+import { scanDocument } from "../lib";
+function useDocumentCapture({
+  videoDimensions,
+  callbacks,
+  customDetectionAlgorithm,
+  detectionSettings,
+  setCapturedImage,
+  setDetectedCorners,
+  handleError
+}) {
+  return useCallback(
+    (capturedImageBase64) => {
+      if (!capturedImageBase64) return;
+      setCapturedImage(capturedImageBase64);
+      callbacks.onImageCapture?.(capturedImageBase64);
+      callbacks.onScanAttempt?.();
+      if (customDetectionAlgorithm) {
+        customDetectionAlgorithm(capturedImageBase64, videoDimensions).then((corners) => {
+          if (corners) {
+            setDetectedCorners(corners);
+            callbacks.onStatusChange?.("detected");
+            callbacks.onDocumentDetected?.(corners, capturedImageBase64);
+          } else {
+            handleError("Document not detected by custom algorithm");
+          }
+        }).catch((error) => {
+          const errorMessage = error?.message || "Custom detection failed";
+          handleError(errorMessage);
+        });
+      } else {
+        scanDocument(
+          capturedImageBase64,
+          videoDimensions,
+          (corners) => {
+            setDetectedCorners(corners);
+            callbacks.onStatusChange?.("detected");
+            callbacks.onDocumentDetected?.(corners, capturedImageBase64);
+          },
+          (error) => {
+            handleError(error);
+          },
+          detectionSettings
+        );
+      }
+    },
+    [
+      videoDimensions,
+      callbacks,
+      customDetectionAlgorithm,
+      detectionSettings,
+      setCapturedImage,
+      setDetectedCorners,
+      handleError
+    ]
+  );
+}
+export {
+  useDocumentCapture
+};
+//# sourceMappingURL=use-document-capture.js.map

package/dist/custom/document-scanner/hooks/use-document-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/document-scanner/hooks/use-document-capture.ts"],"sourcesContent":["import { useCallback } from \"react\";\r\nimport { scanDocument } from \"../lib\";\r\nimport {\r\n  DocumentCorners,\r\n  DocumentScannerCallbacks,\r\n  DetectionSettings,\r\n} from \"../types\";\r\n\r\nexport interface UseDocumentCaptureProps {\r\n  videoDimensions: { width: number; height: number };\r\n  callbacks: DocumentScannerCallbacks;\r\n  customDetectionAlgorithm?: (\r\n    image: string,\r\n    dimensions: { width: number; height: number }\r\n  ) => Promise<DocumentCorners | null>;\r\n  detectionSettings: DetectionSettings;\r\n  setCapturedImage: (image: string | null) => void;\r\n  setDetectedCorners: (corners: DocumentCorners | undefined) => void;\r\n  handleError: (error: string) => void;\r\n}\r\n\r\nexport function useDocumentCapture({\r\n  videoDimensions,\r\n  callbacks,\r\n  customDetectionAlgorithm,\r\n  detectionSettings,\r\n  setCapturedImage,\r\n  setDetectedCorners,\r\n  handleError,\r\n}: UseDocumentCaptureProps) {\r\n  return useCallback(\r\n    (capturedImageBase64: string | null) => {\r\n      if (!capturedImageBase64) return;\r\n\r\n      setCapturedImage(capturedImageBase64);\r\n      callbacks.onImageCapture?.(capturedImageBase64);\r\n      callbacks.onScanAttempt?.();\r\n\r\n      // Use custom detection algorithm if provided\r\n      if (customDetectionAlgorithm) {\r\n        customDetectionAlgorithm(capturedImageBase64, videoDimensions)\r\n          .then((corners) => {\r\n            if (corners) {\r\n              setDetectedCorners(corners);\r\n              callbacks.onStatusChange?.(\"detected\");\r\n              callbacks.onDocumentDetected?.(corners, capturedImageBase64);\r\n            } else {\r\n              handleError(\"Document not detected by custom algorithm\");\r\n            }\r\n          })\r\n          .catch((error) => {\r\n            const errorMessage = error?.message || \"Custom detection failed\";\r\n            handleError(errorMessage);\r\n          });\r\n      } else {\r\n        scanDocument(\r\n          capturedImageBase64,\r\n          videoDimensions,\r\n          (corners) => {\r\n            setDetectedCorners(corners);\r\n            callbacks.onStatusChange?.(\"detected\");\r\n            callbacks.onDocumentDetected?.(corners, capturedImageBase64);\r\n          },\r\n          (error) => {\r\n            handleError(error);\r\n          },\r\n          detectionSettings\r\n        );\r\n      }\r\n    },\r\n    [\r\n      videoDimensions,\r\n      callbacks,\r\n      customDetectionAlgorithm,\r\n      detectionSettings,\r\n      setCapturedImage,\r\n      setDetectedCorners,\r\n      handleError,\r\n    ]\r\n  );\r\n}\r\n"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAoBtB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SAAO;AAAA,IACL,CAAC,wBAAuC;AACtC,UAAI,CAAC,oBAAqB;AAE1B,uBAAiB,mBAAmB;AACpC,gBAAU,iBAAiB,mBAAmB;AAC9C,gBAAU,gBAAgB;AAG1B,UAAI,0BAA0B;AAC5B,iCAAyB,qBAAqB,eAAe,EAC1D,KAAK,CAAC,YAAY;AACjB,cAAI,SAAS;AACX,+BAAmB,OAAO;AAC1B,sBAAU,iBAAiB,UAAU;AACrC,sBAAU,qBAAqB,SAAS,mBAAmB;AAAA,UAC7D,OAAO;AACL,wBAAY,2CAA2C;AAAA,UACzD;AAAA,QACF,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,gBAAM,eAAe,OAAO,WAAW;AACvC,sBAAY,YAAY;AAAA,QAC1B,CAAC;AAAA,MACL,OAAO;AACL;AAAA,UACE;AAAA,UACA;AAAA,UACA,CAAC,YAAY;AACX,+BAAmB,OAAO;AAC1B,sBAAU,iBAAiB,UAAU;AACrC,sBAAU,qBAAqB,SAAS,mBAAmB;AAAA,UAC7D;AAAA,UACA,CAAC,UAAU;AACT,wBAAY,KAAK;AAAA,UACnB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}