@lateralus-ai/shipping-ui 1.1.2 → 1.2.0

package/dist/material-theme.d.ts

@@ -413,4 +413,30 @@ export declare const materialTheme: {
             };
         };
     };
+    tabsHeader: {
+        defaultProps: {
+            className: string;
+        };
+    };
+    tab: {
+        defaultProps: {
+            className: string;
+        };
+        styles: {
+            base: {
+                indicator: {
+                    bg: string;
+                    borderRadius: string;
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+    tabPanel: {
+        styles: {
+            base: {
+                p: string;
+            };
+        };
+    };
 };

package/dist/stories/SearchModal.d.ts

@@ -0,0 +1 @@
+export declare const SearchModals: () => import("react/jsx-runtime").JSX.Element;

package/dist/style.css

@@ -0,0 +1 @@
+:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--total-scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--total-scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::-moz-selection{background:transparent}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}.tabs-container{width:100%;min-width:400px}.tabs-header{display:flex;border-bottom:2px solid #e5e7eb;margin-bottom:16px}.tab-button{padding:12px 24px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#6b7280;position:relative;transition:color .2s}.tab-button:hover{color:#374151}.tab-button.active{color:#3b82f6}.tab-button.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:#3b82f6}.tab-content{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

package/dist/tailwind-theme.d.ts

@@ -71,6 +71,18 @@ export declare const theme: {
         "accordion-up": string;
     };
     colors: {
+        brand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
         gray: {
             50: string;
             100: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -82,6 +82,7 @@
   "dependencies": {
     "@iconify/react": "^6.0.2",
     "@react-hooks-library/core": "^0.6.2",
+    "react-hotkeys-hook": "^5.1.0",
     "react-pdf": "^10.1.0",
     "react-router": "^7.9.3"
   }

package/src/components/ModalPanel.tsx

@@ -31,6 +31,19 @@ const Header = ({
   );
 };
 
+interface BodyProps {
+  className?: string;
+}
+
+const Body = ({ children, className = "" }: PropsWithChildren<BodyProps>) => {
+  return (
+    <div className={`w-full overflow-auto ${className}`}>
+      {children}
+    </div>
+  );
+};
+
 export const ModalPanel = {
   Header,
+  Body,
 };

package/src/components/PdfViewer/ImageViewer.tsx

@@ -7,6 +7,7 @@ import { useZoom } from "./useZoom";
 import { useRotation } from "./useRotation";
 import { usePanning } from "./usePanning";
 import { usePageManagement } from "./usePageManagement";
+import { cn } from "../../utils/cn";
 
 interface ImageViewerProps {
   onClose: () => void;
@@ -16,24 +17,28 @@ interface ImageViewerProps {
 }
 
 export const ImageViewer = ({
+  className,
   onClose,
   totalPages,
   getImageSrc,
+  documentUrl,
   title = "PDF Viewer",
 }: ImageViewerProps) => {
   const [zoom, zoomActions] = useZoom();
   const [rotation, rotationActions] = useRotation();
   const [{ pan, isDragging }, panActions] = usePanning();
-  const [currentPage, pageActions] = usePageManagement(totalPages);
+  const [{ currentPage }, pageActions] = usePageManagement(totalPages);
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
-      <ExpandIcon className="size-4" />
+      <a href={documentUrl} target="_blank" rel="noopener noreferrer">
+        <ExpandIcon className="size-4" />
+      </a>
     </IconButton>
   );
 
   return (
-    <div className="shadow rounded-t-lg">
+    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>

package/src/components/PdfViewer/PdfViewer.tsx

@@ -1,11 +1,20 @@
-import { useRef } from "react";
-import { IconButton } from "@material-tailwind/react";
+import { IconButton, ButtonGroup, Tooltip } from "@material-tailwind/react";
+import { Document, Page, pdfjs } from "react-pdf";
 import { ModalPanel } from "../ModalPanel";
 import ExpandIcon from "../icons/ExpandIcon";
-import { useRefDimensions } from "./useRefDimensions";
+import { Icon } from "@iconify/react";
 import { cn } from "../../utils/cn";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import { useState, ChangeEvent, useMemo } from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePageManagement } from "./usePageManagement";
+import { usePanning } from "./usePanning";
 
-interface PdfViewerProps {
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+interface PdfViewerProps extends React.HTMLProps<HTMLDivElement> {
   onClose: () => void;
   src: string;
   title?: string;
@@ -17,8 +26,11 @@ export const PdfViewer = ({
   title = "PDF Viewer",
   className,
 }: PdfViewerProps) => {
-  const containerRef = useRef(null);
-  const dimensions = useRefDimensions(containerRef);
+  const [zoom, zoomActions] = useZoom();
+  const [rotation, rotationActions] = useRotation();
+  const [{ currentPage, totalPages }, pageActions] = usePageManagement();
+  const [{ pan, isDragging }, panActions] = usePanning();
+
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
@@ -34,21 +46,130 @@ export const PdfViewer = ({
         {title}
       </ModalPanel.Header>
 
-      <div className="flex-1 grid">
-        <div className="grid relative">
+      <div className="grid grow h-full overflow-hidden">
+        <div
+          className={cn(
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8",
+            isDragging ? "cursor-grabbing" : "cursor-grab"
+          )}
+          onMouseDown={panActions.handleMouseDown}
+          onMouseMove={panActions.handleMouseMove}
+          onMouseUp={panActions.handleMouseUp}
+          onMouseLeave={panActions.handleMouseUp}
+          style={{
+            userSelect: 'none',
+          }}
+        >
           <div
-            ref={containerRef}
-            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-full relative"
+            style={{
+              transform: `translate(${pan.x}px, ${pan.y}px)`,
+              transition: isDragging ? 'none' : 'transform 0.1s',
+              pointerEvents: 'none',
+            }}
           >
-            <embed
-              src={`${src}#view=FitH&navpanes=0&scrollbar=0`}
-              type="application/pdf"
-              width="100%"
-              height="100%"
-              style={{ border: "none" }}
-            />
+            <Document
+              file={src}
+              onLoadSuccess={({ numPages }) => {
+                pageActions.setTotalPages(numPages);
+              }}
+              scale={zoom / 100}
+              rotate={rotation}
+            >
+              <Page
+                pageNumber={currentPage}
+                renderTextLayer={true}
+                renderAnnotationLayer={true}
+              />
+            </Document>
           </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>
+
+            <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]"
+              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]"
+              value={currentPage}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const page = parseInt(e.target.value);
+                if (!isNaN(page)) {
+                  pageActions.goToPage(page);
+                }
+              }}
+              type="number"
+              min="1"
+              max={totalPages}
+            />
+            <div className="flex items-center bg-white px-2">
+              of {totalPages}
+            </div>
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={pageActions.nextPage}
+              disabled={currentPage === totalPages}
+            >
+              <Icon icon="lucide:chevron-right" />
+            </IconButton>
+          </ButtonGroup>
+        </div>
       </div>
     </div>
   );

package/src/components/PdfViewer/usePageManagement.ts

@@ -1,14 +1,29 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 
-export const usePageManagement = (totalPages: number = 1) => {
+export const usePageManagement = (initialTotalPages: number = 0) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(initialTotalPages);
 
   const actions = {
-    nextPage: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
-    prevPage: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
-    goToPage: (page: number) =>
-      setCurrentPage(Math.max(1, Math.min(page, totalPages))),
+    nextPage: useCallback(() => {
+      setCurrentPage((prev) => {
+        return prev < totalPages ? prev + 1 : prev;
+      });
+    }, [totalPages]),
+    prevPage: useCallback(() => {
+      setCurrentPage((prev) => Math.max(prev - 1, 1));
+    }, []),
+    goToPage: useCallback(
+      (page: number) => {
+        setCurrentPage(() => Math.max(1, Math.min(page, totalPages)));
+      },
+      [totalPages],
+    ),
+    setTotalPages: useCallback((pages: number) => {
+      setTotalPages(pages);
+      setCurrentPage((prev) => Math.min(prev, pages));
+    }, []),
   };
 
-  return [currentPage, actions] as const;
+  return [{ currentPage, totalPages }, actions] as const;
 };

package/src/components/SearchModal.tsx

@@ -0,0 +1,320 @@
+import { Dialog, DialogBody } from "@material-tailwind/react";
+import { useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useMediaQuery } from "@uidotdev/usehooks";
+import { cn } from "../utils/cn";
+
+export const formatDateReport = (date: string | Date) => {
+  const formattedDate = new Date(date);
+  return formattedDate.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+const highlightText = (text: string, searchTerm: string) => {
+  if (!searchTerm) return text;
+
+  const regex = new RegExp(`(\\b${searchTerm}\\b)`, "gi");
+  const parts = text.split(regex);
+  const firstMatchIndex = parts.findIndex((part) => regex.test(part));
+
+  if (firstMatchIndex === -1) return text;
+
+  if (firstMatchIndex === 0) {
+    return parts.map((part, i) =>
+      regex.test(part) ? (
+        <span key={i} className="text-gray-900 font-medium">
+          {part}
+        </span>
+      ) : (
+        part
+      ),
+    );
+  }
+
+  const matchedPart = parts[firstMatchIndex];
+  const beforeMatch = parts.slice(0, firstMatchIndex).join("");
+  const afterMatch = parts.slice(firstMatchIndex + 1).join("");
+
+  return (
+    <>
+      <span key="match" className="text-gray-900 font-medium">
+        {beforeMatch && <>...</>}
+        {matchedPart}
+      </span>
+      {afterMatch && <span key="after"> {afterMatch}</span>}
+    </>
+  );
+};
+
+export interface SearchItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  metadata?: Record<string, any>;
+}
+
+export interface SearchModalProps {
+  open: boolean;
+  onClose: () => void;
+  items?: SearchItem[];
+  loading?: boolean;
+  placeholder?: string;
+  onSearch?: (query: string) => void;
+  onSelect?: (item: SearchItem) => void;
+  filterOptions?: string[];
+  selectedFilter?: string;
+  onFilterChange?: (filter: string) => void;
+  recentlyViewedLabel?: string;
+  noResultsText?: string;
+}
+
+const SearchFilters = ({
+  filters,
+  selected,
+  onChange,
+}: {
+  filters: string[];
+  selected: string;
+  onChange: (filter: string) => void;
+}) => {
+  return (
+    <div className="flex gap-2 px-2">
+      {filters.map((filter) => (
+        <button
+          key={filter}
+          onClick={() => onChange(filter)}
+          className={cn(
+            "px-3 py-1 text-sm rounded-full transition-colors",
+            selected === filter
+              ? "bg-brand-600 text-white"
+              : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+          )}
+        >
+          {filter}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const SearchSkeleton = () => {
+  return (
+    <div className="p-4 flex flex-col gap-[6px]">
+      {[...Array(8)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3 animate-pulse py-2">
+          <div className="size-3 bg-gray-100 rounded-full" />
+          <div className={cn(i % 2 === 0 ? "w-[250px]" : "w-[320px]","h-3 bg-gray-100 rounded-full")} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SearchItemComponent = ({
+  item,
+  isActive,
+  onClick,
+  searchTerm,
+}: {
+  item: SearchItem;
+  isActive: boolean;
+  onClick: () => void;
+  searchTerm: string;
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors",
+        isActive ? "bg-gray-100" : "hover:bg-gray-50",
+      )}
+    >
+      {item.icon && <div className="shrink-0 text-gray-600">{item.icon}</div>}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-gray-900 truncate">
+          {item.title}
+        </div>
+        {item.subtitle && (
+          <div className="text-sm text-gray-600 truncate">
+            {typeof item.subtitle === "string"
+              ? highlightText(item.subtitle, searchTerm)
+              : item.subtitle}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SearchModal = ({
+  open,
+  onClose,
+  items = [],
+  loading = false,
+  placeholder = "Search...",
+  onSearch,
+  onSelect,
+  filterOptions = [],
+  selectedFilter = "All",
+  onFilterChange,
+  recentlyViewedLabel = "Recently viewed",
+  noResultsText = "No results found.",
+}: SearchModalProps) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const isMobile = useMediaQuery("only screen and (max-width: 768px)");
+  const itemRefs = useRef<HTMLDivElement[]>([]);
+
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, items.length);
+  }, [items]);
+
+  useEffect(() => {
+    if (activeIndex > items.length) {
+      setActiveIndex(-1);
+    }
+  }, [items, activeIndex]);
+
+  useEffect(() => {
+    const currentItem = itemRefs.current[activeIndex];
+    currentItem?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }, [activeIndex]);
+
+  useHotkeys(
+    "ArrowUp",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "ArrowDown",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "Enter",
+    () => {
+      if (activeIndex >= 0 && activeIndex < items.length) {
+        handleItemSelect(items[activeIndex]);
+      }
+    },
+    {
+      enableOnFormTags: true,
+      preventDefault: true,
+      enabled: open,
+    },
+  );
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+
+  const handleItemSelect = (item: SearchItem) => {
+    onSelect?.(item);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setSearchValue("");
+    setActiveIndex(-1);
+    onClose();
+  };
+
+  const showFilters = filterOptions.length > 0 && searchValue;
+  const showRecentlyViewed = !searchValue && items.length > 0;
+
+  return (
+    <Dialog
+      open={open}
+      size="lg"
+      handler={handleClose}
+      className={cn(
+        isMobile && "w-screen m-0",
+        "focus:outline-none 2xl:min-w-px",
+      )}
+    >
+      <DialogBody className="relative px-0 py-2">
+        <div>
+          <div className="border-b border-b-gray-100 px-6 pb-2">
+            <input
+              type="text"
+              placeholder={placeholder}
+              value={searchValue}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="w-full bg-transparent p-2 px-0 text-sm font-medium text-gray-600 placeholder-gray-400 outline-none focus:outline-none"
+            />
+          </div>
+
+          {loading ? (
+            <SearchSkeleton />
+          ) : (
+            <div className="p-4 flex flex-col gap-2">
+              {showRecentlyViewed && (
+                <p className="text-sm font-normal text-gray-600 px-2">
+                  {recentlyViewedLabel}
+                </p>
+              )}
+
+              {showFilters && (
+                <SearchFilters
+                  filters={filterOptions}
+                  selected={selectedFilter}
+                  onChange={(filter) => onFilterChange?.(filter)}
+                />
+              )}
+
+              <div className="overflow-y-auto max-h-[320px]" tabIndex={0}>
+                {items.map((item, index) => (
+                  <div
+                    key={item.id}
+                    ref={(el) => {
+                      if (el) itemRefs.current[index] = el;
+                    }}
+                  >
+                    <SearchItemComponent
+                      item={item}
+                      isActive={activeIndex === index}
+                      onClick={() => handleItemSelect(item)}
+                      searchTerm={searchValue}
+                    />
+                  </div>
+                ))}
+
+                {!loading && items.length === 0 && (
+                  <div className="text-sm text-gray-900 font-medium">
+                    {noResultsText}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogBody>
+    </Dialog>
+  );
+};
+
+export default SearchModal;