@lateralus-ai/shipping-ui 1.4.11 → 1.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/PdfViewer/PdfViewer.tsx

@@ -11,6 +11,8 @@ import {
   ChangeEvent,
   useMemo,
   MouseEvent as ReactMouseEvent,
+  useRef,
+  useEffect,
 } from "react"
 import { useZoom } from "./useZoom"
 import { useRotation } from "./useRotation"
@@ -37,6 +39,24 @@ export const PdfViewer = ({
   const [rotation, rotationActions] = useRotation()
   const [{ currentPage, totalPages }, pageActions] = usePageManagement()
   const [{ pan, isDragging }, panActions] = usePanning()
+  const [scale, setScale] = useState(1)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const calculateScale = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.offsetWidth
+
+        // Assuming standard PDF page width is ~612 points (8.5 inches)
+        const baseScale = containerWidth / 612
+        setScale(baseScale * (zoom / 100))
+      }
+    }
+
+    calculateScale()
+    window.addEventListener("resize", calculateScale)
+    return () => window.removeEventListener("resize", calculateScale)
+  }, [zoom])
 
   const handleOpen = (event: ReactMouseEvent<HTMLButtonElement>) => {
     if (onOpen) {
@@ -68,15 +88,18 @@ export const PdfViewer = ({
   )
 
   return (
-    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
+    <div
+      className={cn("shadow rounded-t-lg flex flex-col h-full", className)}
+      ref={containerRef}
+    >
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>
 
-      <div className="grid grow h-full overflow-hidden">
+      <div className="grid grow h-full overflow-hidden shadow">
         <div
           className={cn(
-            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center",
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8 flex justify-center items-center mt-8",
             isDragging ? "cursor-grabbing" : "cursor-grab"
           )}
           onMouseDown={panActions.handleMouseDown}
@@ -102,7 +125,7 @@ export const PdfViewer = ({
               onLoadSuccess={({ numPages }) => {
                 pageActions.setTotalPages(numPages)
               }}
-              scale={zoom / 100}
+              scale={scale}
               rotate={rotation}
             >
               <Page
@@ -114,67 +137,19 @@ export const PdfViewer = ({
           </div>
         </div>
 
-        <div className="col-start-1 row-start-1 self-end p-4 flex gap-2 justify-between w-full z-10">
-          <ButtonGroup className="divide-x-0 h-[52px]">
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={zoomActions.zoomOut}
-            >
-              <Icon icon="lucide:minus" />
-            </IconButton>
-            <Tooltip content="Click to reset zoom and pan">
-              <button
-                className="!bg-white text-center cursor-pointer w-[60px]"
-                onClick={() => {
-                  zoomActions.reset()
-                  panActions.reset()
-                }}
-              >
-                {zoom}%
-              </button>
-            </Tooltip>
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={zoomActions.zoomIn}
-            >
-              <Icon icon="lucide:plus" />
-            </IconButton>
-          </ButtonGroup>
-          <ButtonGroup className="divide-x-0 h-[52px]">
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
-              onClick={rotationActions.rotateClockwise}
-            >
-              <Icon icon="lucide:iteration-cw" />
-            </IconButton>
-
+        <div className="col-start-1 row-start-1 self-start flex justify-between w-full z-10 flex-wrap items-center gap-3 bg-gray-50 p-2 shadow">
+          <ButtonGroup className="divide-x-1 gap-1">
             <IconButton
               variant="filled"
               color="white"
-              className="py-[26px]"
-              onClick={rotationActions.rotateCounterClockwise}
-            >
-              <Icon icon="lucide:iteration-ccw" />
-            </IconButton>
-          </ButtonGroup>
-          <ButtonGroup className="divide-x-0 ">
-            <IconButton
-              variant="filled"
-              color="white"
-              className="py-[26px]"
+              className="w-8 h-8 rounded border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               onClick={pageActions.prevPage}
               disabled={currentPage === 1}
             >
               <Icon icon="lucide:chevron-left" />
             </IconButton>
             <input
-              className="bg-white pl-4 flex items-center w-[50px] text-center focus:outline-none w-[60px]"
+              className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
               value={currentPage}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 const page = parseInt(e.target.value)
@@ -186,19 +161,70 @@ export const PdfViewer = ({
               min="1"
               max={totalPages}
             />
-            <div className="flex items-center bg-white px-2">
+            <div className="flex items-center bg-transparent px-2">
               of {totalPages}
             </div>
             <IconButton
               variant="filled"
               color="white"
-              className="py-[26px]"
+              className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
               onClick={pageActions.nextPage}
               disabled={currentPage === totalPages}
             >
               <Icon icon="lucide:chevron-right" />
             </IconButton>
           </ButtonGroup>
+          <div className="flex gap-2 items-center">
+            <ButtonGroup className="divide-x-1 gap-1">
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomOut}
+              >
+                <Icon icon="lucide:minus" />
+              </IconButton>
+              <Tooltip content="Click to reset zoom and pan">
+                <button
+                  className="w-14 h-8 rounded border !border-gray-300 bg-white px-1 py-1 text-center text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  onClick={() => {
+                    zoomActions.reset()
+                    panActions.reset()
+                  }}
+                >
+                  {zoom}%
+                </button>
+              </Tooltip>
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={zoomActions.zoomIn}
+              >
+                <Icon icon="lucide:plus" />
+              </IconButton>
+            </ButtonGroup>
+            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
+            <ButtonGroup className="divide-x-1 gap-1">
+              {/* <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateClockwise}
+              >
+                <Icon icon="lucide:iteration-cw" />
+              </IconButton> */}
+
+              <IconButton
+                variant="filled"
+                color="white"
+                className="w-8 h-8 rounded border !border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-200 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:outline-none max-w-auto"
+                onClick={rotationActions.rotateCounterClockwise}
+              >
+                <Icon icon="lucide:iteration-ccw" />
+              </IconButton>
+            </ButtonGroup>
+          </div>
         </div>
       </div>
     </div>