@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.10

package/src/components/PdfViewer/PdfViewer.tsx

@@ -1,32 +1,33 @@
-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 { Icon } from "@iconify/react"
-import { cn } from "../../utils/cn"
-import "react-pdf/dist/Page/AnnotationLayer.css"
-import "react-pdf/dist/Page/TextLayer.css"
+import { Document, Page, pdfjs } from "react-pdf";
+import { ModalPanel } from "../ModalPanel";
+import { IconButton } from "../../primitives/IconButton";
+import { ChevronIcon, MinusIcon, PlusIcon, ExpandIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
 import {
   useState,
-  ChangeEvent,
-  useMemo,
-  MouseEvent as ReactMouseEvent,
+  type ChangeEvent,
   useRef,
   useEffect,
-} from "react"
-import { useZoom } from "./useZoom"
-import { useRotation } from "./useRotation"
-import { usePageManagement } from "./usePageManagement"
-import { usePanning } from "./usePanning"
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePageManagement } from "./usePageManagement";
+import { usePanning } from "./usePanning";
 
-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`
+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
-  onOpen?: (event: ReactMouseEvent<HTMLButtonElement>) => void
-}
+type PdfViewerProps = React.HTMLProps<HTMLDivElement> & {
+  onClose: () => void;
+  src: string;
+  title?: string;
+  onOpen?: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+};
+
+const toolbarButtonClass =
+  "flex h-8 w-8 items-center justify-center rounded-control border border-divider-primary bg-white text-display-on-light-secondary hover:bg-background-secondary disabled:opacity-50";
 
 export const PdfViewer = ({
   onClose,
@@ -35,80 +36,58 @@ export const PdfViewer = ({
   className,
   onOpen,
 }: PdfViewerProps) => {
-  const [zoom, zoomActions] = useZoom()
-  const [rotation, rotationActions] = useRotation()
-  const [{ currentPage, totalPages }, pageActions] = usePageManagement()
-  const [{ pan, isDragging }, panActions] = usePanning()
-  const [scale, setScale] = useState(1)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [zoom, zoomActions] = useZoom();
+  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))
-      }
-    }
+      if (!containerRef.current) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const baseScale = containerWidth / 612;
+      setScale(baseScale * (zoom / 100));
+    };
 
-    calculateScale()
-    window.addEventListener("resize", calculateScale)
-    return () => window.removeEventListener("resize", calculateScale)
-  }, [zoom])
+    calculateScale();
+    window.addEventListener("resize", calculateScale);
+    return () => window.removeEventListener("resize", calculateScale);
+  }, [zoom]);
 
   const handleOpen = (event: ReactMouseEvent<HTMLButtonElement>) => {
-    if (onOpen) {
-      console.debug("[PdfViewer] onOpen callback triggered", {
-        hasHandler: true,
-      })
-      onOpen(event)
-    } else {
-      console.debug("[PdfViewer] open button clicked", {
-        hasHandler: false,
-      })
-    }
-    if (event.defaultPrevented) {
-      return
+    onOpen?.(event);
+    if (event.defaultPrevented || !src) {
+      event.preventDefault();
+      return;
     }
-
-    if (!src) {
-      event.preventDefault()
-      return
-    }
-
-    window.open(src, "_blank", "noopener,noreferrer")
-  }
+    window.open(src, "_blank", "noopener,noreferrer");
+  };
 
   const rightButtons = (
-    <IconButton variant="text" color="gray" onClick={handleOpen}>
-      <ExpandIcon className="size-4" />
+    <IconButton hierarchy="quaternary" size="small" aria-label="Open in new tab" onClick={handleOpen}>
+      <ExpandIcon size="small" />
     </IconButton>
-  )
+  );
 
   return (
-    <div
-      className={cn("shadow rounded-t-lg flex flex-col h-full", className)}
-      ref={containerRef}
-    >
+    <div className={cn("flex h-full flex-col rounded-t-lg shadow-raise2", className)} ref={containerRef}>
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>
 
-      <div className="grid grow h-full overflow-hidden shadow">
+      <div className="grid h-full grow 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 mt-8",
-            isDragging ? "cursor-grabbing" : "cursor-grab"
+            "col-start-1 row-start-1 mt-8 flex h-full items-center justify-center overflow-hidden bg-background-tertiary p-8 select-none",
+            isDragging ? "cursor-grabbing" : "cursor-grab",
           )}
           onMouseDown={panActions.handleMouseDown}
           onMouseMove={panActions.handleMouseMove}
           onMouseUp={panActions.handleMouseUp}
           onMouseLeave={panActions.handleMouseUp}
-          style={{
-            userSelect: "none",
-          }}
+          style={{ userSelect: "none" }}
         >
           <div
             style={{
@@ -122,111 +101,80 @@ export const PdfViewer = ({
               externalLinkRel="noopener noreferrer"
               externalLinkTarget="_blank"
               file={src}
-              onLoadSuccess={({ numPages }) => {
-                pageActions.setTotalPages(numPages)
-              }}
+              onLoadSuccess={({ numPages }) => pageActions.setTotalPages(numPages)}
               scale={scale}
               rotate={rotation}
             >
-              <Page
-                pageNumber={currentPage}
-                renderTextLayer={true}
-                renderAnnotationLayer={true}
-              />
+              <Page pageNumber={currentPage} renderTextLayer renderAnnotationLayer />
             </Document>
           </div>
         </div>
 
-        <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="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"
+        <div className="z-10 col-start-1 row-start-1 flex w-full flex-wrap items-center justify-between gap-3 self-start bg-background-secondary p-2 shadow">
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              className={toolbarButtonClass}
               onClick={pageActions.prevPage}
               disabled={currentPage === 1}
+              aria-label="Previous page"
             >
-              <Icon icon="lucide:chevron-left" />
-            </IconButton>
+              <ChevronIcon direction="left" size="small" />
+            </button>
             <input
-              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"
+              className="h-8 w-14 rounded-control border border-divider-primary bg-white px-1 py-1 text-center text-caption-2 text-display-on-light-primary"
               value={currentPage}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                const page = parseInt(e.target.value)
-                if (!isNaN(page)) {
-                  pageActions.goToPage(page)
-                }
+                const page = parseInt(e.target.value, 10);
+                if (!isNaN(page)) pageActions.goToPage(page);
               }}
               type="number"
               min="1"
               max={totalPages}
             />
-            <div className="flex items-center bg-transparent px-2">
-              of {totalPages}
-            </div>
-            <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"
+            <span className="px-2 text-caption-2 text-display-on-light-secondary">of {totalPages}</span>
+            <button
+              type="button"
+              className={toolbarButtonClass}
               onClick={pageActions.nextPage}
               disabled={currentPage === totalPages}
+              aria-label="Next page"
             >
-              <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> */}
+              <ChevronIcon direction="right" size="small" />
+            </button>
+          </div>
 
-              <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}
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <button type="button" className={toolbarButtonClass} onClick={zoomActions.zoomOut} aria-label="Zoom out">
+                <MinusIcon size="small" />
+              </button>
+              <button
+                type="button"
+                className="h-8 w-14 rounded-control border border-divider-primary bg-white text-center text-caption-2 text-display-on-light-primary hover:bg-background-secondary"
+                onClick={() => {
+                  zoomActions.reset();
+                  panActions.reset();
+                }}
               >
-                <Icon icon="lucide:iteration-ccw" />
-              </IconButton>
-            </ButtonGroup>
+                {zoom}%
+              </button>
+              <button type="button" className={toolbarButtonClass} onClick={zoomActions.zoomIn} aria-label="Zoom in">
+                <PlusIcon size="small" />
+              </button>
+            </div>
+            <div className="h-6 w-px bg-divider-primary" />
+            <button
+              type="button"
+              className={toolbarButtonClass}
+              onClick={rotationActions.rotateCounterClockwise}
+              aria-label="Rotate counter-clockwise"
+            >
+              <ChevronIcon direction="left" size="small" />
+            </button>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};

package/src/components/ReportInput.tsx

@@ -0,0 +1,65 @@
+import { type TextareaHTMLAttributes, useId } from "react";
+import { cn } from "../utils/cn";
+
+export type ReportInputState = "idle" | "hover" | "edit";
+
+export type ReportInputProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "onChange"
+> & {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  state?: ReportInputState;
+  onChange?: (value: string) => void;
+};
+
+const fieldStyles: Record<ReportInputState, string> = {
+  idle: "border-divider-primary bg-white",
+  hover: "border-grey-300 bg-white",
+  edit: "border-accent-on-light bg-white ring-1 ring-accent-on-light",
+};
+
+export const ReportInput = ({
+  label,
+  value = "",
+  placeholder,
+  state = "idle",
+  onChange,
+  disabled,
+  className,
+  id: idProp,
+  rows = 4,
+  ...props
+}: ReportInputProps) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+
+  return (
+    <div className={cn("flex w-full flex-col gap-1", className)}>
+      {label && (
+        <label htmlFor={id} className="text-caption-2-em text-display-on-light-secondary">
+          {label}
+        </label>
+      )}
+      <textarea
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={rows}
+        data-state={state}
+        onChange={(event) => onChange?.(event.target.value)}
+        className={cn(
+          "min-h-[96px] w-full resize-y rounded-control border px-3 py-2 text-body text-display-on-light-primary outline-none transition-colors placeholder:text-display-on-light-quaternary",
+          "hover:border-grey-300 focus:border-accent-on-light focus:ring-1 focus:ring-accent-on-light",
+          "data-[state=hover]:border-grey-300",
+          "data-[state=edit]:border-accent-on-light data-[state=edit]:ring-1 data-[state=edit]:ring-accent-on-light",
+          disabled && "cursor-not-allowed border-divider-primary bg-grey-50 text-display-on-light-quaternary",
+          !disabled && fieldStyles[state],
+        )}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/Tab.tsx

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+
+export type TabState = "idle" | "active";
+
+export type TabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  label: string;
+  state?: TabState;
+};
+
+export const Tab = ({ label, state = "idle", className, ...props }: TabProps) => (
+  <button
+    type="button"
+    role="tab"
+    aria-selected={state === "active"}
+    data-state={state}
+    className={cn(
+      "relative inline-flex items-center px-3 py-2 text-caption-2 transition-colors",
+      "text-display-on-light-secondary hover:text-display-on-light-primary",
+      "data-[state=active]:text-display-on-light-primary data-[state=active]:text-caption-2-em",
+      className,
+    )}
+    {...props}
+  >
+    {label}
+    {state === "active" && (
+      <span
+        aria-hidden
+        className="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-grey-900"
+      />
+    )}
+  </button>
+);

package/src/components/Tabs.tsx

@@ -1,43 +1,146 @@
-import React, { useState } from "react";
-import "../styles/tabs.css";
-import {
-  Tabs,
-  TabPanel,
-  TabsBody,
-  TabsHeader,
-  Tab,
-} from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-import { cn } from "../utils/cn";
-import { SettingsIcon } from "./icons/SettingsIcon";
-
-interface Tab {
-  id: string;
-  label: string;
-  content: React.ReactNode;
-}
-
-interface TabsProps {
-  tabs: Tab[];
-  defaultTab?: string;
-}
-
-export const TabsContainer: React.FC<TabsProps> = () => {
-  return (
-    <Tabs className="w-[800px]">
-      <TabsHeader>
-        <Tab value="chats">Chats</Tab>
-        <Tab value="issues">Issues</Tab>
-
-        <button className="cursor-pointer mb-2 ml-auto rounded p-1 hover:bg-gray-100">
-          <SettingsIcon className="size-4" />
-        </button>
-      </TabsHeader>
-
-      <TabsBody>
-        <TabPanel value="chats">ChatsPanel</TabPanel>
-        <TabPanel value="issues">IssuesPanel</TabPanel>
-      </TabsBody>
-    </Tabs>
-  );
-};
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type TabsType = "tabs" | "pills";
+
+/** Soft = search filters (filled idle). Solid = workflow shell (ghost idle, blue active). */
+export type TabsAppearance = "soft" | "solid";
+
+type TabsContextValue = {
+  type: TabsType;
+  appearance: TabsAppearance;
+};
+
+const TabsContext = createContext<TabsContextValue>({
+  type: "tabs",
+  appearance: "soft",
+});
+
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  type?: TabsType;
+  /** Only applies when `type="pills"`. Defaults to `soft`. */
+  appearance?: TabsAppearance;
+};
+
+export const Tabs = ({
+  type = "tabs",
+  appearance = "soft",
+  className,
+  children,
+  ...props
+}: TabsProps) => (
+  <TabsContext.Provider value={{ type, appearance }}>
+    <TabsPrimitive.Root
+      className={cn("flex flex-col", className)}
+      data-type={type}
+      data-appearance={type === "pills" ? appearance : undefined}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Root>
+  </TabsContext.Provider>
+);
+
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, ...props }, ref) => {
+  const { type } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "flex items-center",
+        type === "tabs" && "gap-6 border-b border-divider-primary",
+        type === "pills" && "gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+export type TabsTriggerProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+> & {
+  children: ReactNode;
+};
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { type, appearance } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center gap-2.5 transition-colors outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        type === "tabs" && [
+          "relative h-12 gap-2 px-0 py-0 text-caption-2 text-display-on-light-secondary",
+          "hover:text-display-on-light-primary",
+          "data-[state=active]:text-caption-2-em data-[state=active]:text-display-on-light-primary",
+          "data-[state=active]:after:absolute data-[state=active]:after:inset-x-0 data-[state=active]:after:-bottom-px",
+          "data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-grey-900",
+        ],
+        type === "pills" &&
+          appearance === "soft" && [
+            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
+            "bg-grey-100 text-display-on-light-secondary",
+            "hover:bg-grey-200",
+            "data-[state=active]:bg-accent-bg-light data-[state=active]:text-display-on-light-primary",
+          ],
+        type === "pills" &&
+          appearance === "solid" && [
+            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
+            "bg-transparent text-display-on-light-primary",
+            "hover:bg-grey-900/[0.04]",
+            "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
+            "data-[state=active]:hover:bg-blue-600",
+          ],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Trigger>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+export type TabsContentProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+>;
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+/** @deprecated Prefer Tabs + TabsTrigger. Kept for Storybook atom demos. */
+export type TabsItem = {
+  label: string;
+  value?: string;
+  count?: number;
+};

package/src/components/index.ts

@@ -1,6 +1,43 @@
-export * from "./HelloWorld";
-export * as InputPrompt from "./InputPrompt";
-export * as Sidebar from "./Sidebar";
-export * from "./PdfViewer/";
-export * from "./Tabs";
-export * from "./DocumentEditor";
+export { Input, type InputProps, type InputState } from "./Input";
+export { ReportInput, type ReportInputProps, type ReportInputState } from "./ReportInput";
+export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState } from "./InputType";
+export { Chip, type ChipProps, type ChipVariant } from "./Chip";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Tab, type TabProps, type TabState } from "./Tab";
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+  type TabsItem,
+  type TabsType,
+  type TabsAppearance,
+} from "./Tabs";
+export { Header, type HeaderProps, type HeaderVariant } from "./Header";
+export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
+export { EmptyState, type EmptyStateProps } from "./EmptyState";
+export {
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalTitle,
+  ModalDescription,
+  ModalHeaderSlot,
+  ModalBody,
+  type ModalProps,
+  type ModalOverlayProps,
+  type ModalContentProps,
+  type ModalTitleProps,
+  type ModalDescriptionProps,
+  type ModalBodyProps,
+} from "./Modal";
+export { ModalPanel } from "./ModalPanel";
+export * from "./PdfViewer/";
+export * from "./DocumentEditor";