@lateralus-ai/shipping-ui 2.0.0-dev.0 → 2.0.0-dev.11

package/src/index.ts

@@ -1,50 +1,76 @@
-export { theme as tailwindTheme } from "./tailwind-theme";
-
-export * from "./tokens";
-export * from "./icons";
-export * from "./primitives";
-export * from "./illustrations";
-
-export {
-  Input,
-  ReportInput,
-  InputType,
-  Chip,
-  Checkbox,
-  Tab,
-  Tabs,
-  Header,
-  Entry,
-  EmptyState,
-  ModalPanel,
-  PdfViewer,
-  ImageViewer,
-  DocumentEditor,
-} from "./components";
-
-export type {
-  InputProps,
-  InputState,
-  ReportInputProps,
-  ReportInputState,
-  InputTypeProps,
-  InputTypeKind,
-  InputTypeState,
-  ChipProps,
-  ChipVariant,
-  CheckboxProps,
-  TabProps,
-  TabState,
-  TabsProps,
-  TabsItem,
-  TabsType,
-  HeaderProps,
-  HeaderVariant,
-  EntryProps,
-  EntryType,
-  EntryState,
-  EmptyStateProps,
-} from "./components";
-
-export * as Patterns from "./patterns";
-export * as Domain from "./domain";
+import "./style.css";
+
+export { theme as tailwindTheme } from "./tailwind-theme";
+
+export * from "./tokens";
+export * from "./icons";
+export * from "./primitives";
+export * from "./illustrations";
+
+export {
+  Input,
+  ReportInput,
+  InputType,
+  Chip,
+  Checkbox,
+  Tab,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Header,
+  Entry,
+  EmptyState,
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalTitle,
+  ModalDescription,
+  ModalHeaderSlot,
+  ModalBody,
+  ModalPanel,
+  PdfViewer,
+  ImageViewer,
+  DocumentEditor,
+} from "./components";
+
+export type {
+  InputProps,
+  InputState,
+  ReportInputProps,
+  ReportInputState,
+  InputTypeProps,
+  InputTypeKind,
+  InputTypeState,
+  ChipProps,
+  ChipVariant,
+  CheckboxProps,
+  TabProps,
+  TabState,
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+  TabsItem,
+  TabsType,
+  TabsAppearance,
+  HeaderProps,
+  HeaderVariant,
+  EntryProps,
+  EntryType,
+  EntryState,
+  EntryVariant,
+  EmptyStateProps,
+  ModalProps,
+  ModalOverlayProps,
+  ModalContentProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+  ModalBodyProps,
+} from "./components";
+
+export * as Patterns from "./patterns";
+export * as Domain from "./domain";

package/src/patterns/Search/ResultRow.tsx

@@ -1,52 +1,44 @@
-import { type ReactNode } from "react";
-import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
-import { cn } from "../../utils/cn";
-
-export type ResultRowVariant = "report" | "chat" | "issue";
-export type ResultRowState = "idle";
-
-export type ResultRowProps = {
-  variant?: ResultRowVariant;
-  state?: ResultRowState;
-  title?: string;
-  subtitle?: string;
-  className?: string;
-};
-
-const variantIcons: Record<ResultRowVariant, ReactNode> = {
-  report: <ReportIcon className="size-5" />,
-  chat: <ChatIcon className="size-5" />,
-  issue: <IssuesIcon className="size-5" />,
-};
-
-const variantColors: Record<ResultRowVariant, string> = {
-  report: "text-meta-blue",
-  chat: "text-meta-purple",
-  issue: "text-meta-red",
-};
-
-export const ResultRow = ({
-  variant = "report",
-  state = "idle",
-  title = "Search result",
-  subtitle,
-  className,
-}: ResultRowProps) => (
-  <button
-    type="button"
-    className={cn(
-      "flex w-full items-center gap-3 rounded-control px-3 py-2 text-left transition-colors hover:bg-background-hover",
-      className,
-    )}
-    data-variant={variant}
-    data-state={state}
-  >
-    <span className={cn("shrink-0", variantColors[variant])}>{variantIcons[variant]}</span>
-    <div className="min-w-0 flex-1">
-      <p className="truncate text-caption-1-em text-display-on-light-primary">{title}</p>
-      {subtitle && (
-        <p className="truncate text-caption-2 text-display-on-light-tertiary">{subtitle}</p>
-      )}
-    </div>
-  </button>
-);
+import { type ReactNode } from "react";
+import {
+  Entry,
+  type EntryProps,
+  type EntryState,
+  type EntryVariant,
+} from "../../components/Entry";
+
+/** @deprecated Prefer `EntryVariant`. */
+export type ResultRowVariant = EntryVariant;
+/** @deprecated Prefer `EntryState`. */
+export type ResultRowState = EntryState;
+
+export type ResultRowProps = {
+  variant?: EntryVariant;
+  state?: EntryState;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+};
+
+/**
+ * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
+ */
+export const ResultRow = ({
+  variant = "report",
+  state = "idle",
+  title = "Search result",
+  subtitle,
+  onClick,
+  className,
+}: ResultRowProps) => (
+  <Entry
+    variant={variant}
+    state={state}
+    title={title}
+    subtitle={subtitle}
+    onClick={onClick}
+    className={className}
+  />
+);
+
+export type { EntryProps };

package/src/patterns/Search/SearchModal.tsx

@@ -1,88 +1,310 @@
-import { SearchIcon } from "../../icons";
-import { cn } from "../../utils/cn";
-import { Pill } from "./Pill";
-import { ResultRow } from "./ResultRow";
-import { SectionHeader } from "./SectionHeader";
-
-export type SearchModalState = "idle" | "loading" | "results";
-
-export type SearchModalProps = {
-  state?: SearchModalState;
-  className?: string;
-};
-
-const placeholderResults = [
-  { variant: "report" as const, title: "Hull inspection report Q3", subtitle: "MV Atlantic Star" },
-  { variant: "chat" as const, title: "Port state control discussion", subtitle: "2 days ago" },
-  { variant: "issue" as const, title: "Critical valve malfunction", subtitle: "Open · High priority" },
-];
-
-export const SearchModal = ({ state = "idle", className }: SearchModalProps) => (
-  <div
-    className={cn(
-      "w-full max-w-xl overflow-hidden rounded-lg border border-divider-primary bg-background-primary shadow-raise2",
-      className,
-    )}
-    role="dialog"
-    aria-label="Search"
-    data-state={state}
-  >
-    <div className="flex items-center gap-2 border-b border-divider-primary px-4 py-3">
-      <SearchIcon className="size-5 shrink-0 text-display-on-light-quaternary" />
-      <input
-        type="search"
-        placeholder="Search reports, chats, and issues..."
-        className="flex-1 bg-transparent text-body text-display-on-light-primary placeholder:text-display-on-light-quaternary focus:outline-none"
-        aria-label="Search query"
-        readOnly
-        defaultValue={state === "results" ? "inspection" : ""}
-      />
-      {state === "loading" && (
-        <span className="size-4 animate-spin rounded-full border-2 border-divider-primary border-t-blue-600" />
-      )}
-    </div>
-
-    <div className="flex gap-2 px-4 py-2">
-      <Pill state={state === "results" ? "active" : "idle"} size="small">
-        All
-      </Pill>
-      <Pill state="idle" size="small">
-        Reports
-      </Pill>
-      <Pill state="idle" size="small">
-        Chats
-      </Pill>
-      <Pill state="idle" size="small">
-        Issues
-      </Pill>
-    </div>
-
-    <div className="max-h-80 overflow-y-auto px-2 pb-2">
-      {state === "idle" && (
-        <p className="px-2 py-8 text-center text-caption-2 text-display-on-light-tertiary">
-          Start typing to search across your workspace
-        </p>
-      )}
-
-      {state === "loading" && (
-        <p className="px-2 py-8 text-center text-caption-2 text-display-on-light-tertiary">
-          Searching...
-        </p>
-      )}
-
-      {state === "results" && (
-        <>
-          <SectionHeader label="Results" />
-          {placeholderResults.map((result) => (
-            <ResultRow
-              key={result.title}
-              variant={result.variant}
-              title={result.title}
-              subtitle={result.subtitle}
-            />
-          ))}
-        </>
-      )}
-    </div>
-  </div>
-);
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalTitle,
+  type ModalContentProps,
+  type ModalProps,
+} from "../../components/Modal";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs";
+import { Badge } from "../../primitives/Badge";
+import { cn } from "../../utils/cn";
+import { ResultRow, type ResultRowProps } from "./ResultRow";
+import { SectionHeader } from "./SectionHeader";
+import { Skeleton } from "../Skeleton";
+
+export type SearchModalState = "idle" | "loading" | "results";
+
+export type SearchFilterTab = {
+  value: string;
+  label: string;
+  count?: number;
+};
+
+export type SearchModalProps = ModalProps & {
+  /** Panel state when using the built-in layout helpers. */
+  state?: SearchModalState;
+  className?: string;
+  contentClassName?: string;
+  showOverlay?: boolean;
+  overlayClassName?: string;
+  children?: ReactNode;
+};
+
+const DEFAULT_FILTERS: SearchFilterTab[] = [
+  { value: "all", label: "All", count: 0 },
+  { value: "reports", label: "Reports", count: 0 },
+  { value: "chats", label: "Chats", count: 0 },
+  { value: "issues", label: "Issues", count: 0 },
+];
+
+/**
+ * Search dialog composed on Modal.
+ * Use compound parts (Input / Body / Filters / Results) for app wiring,
+ * or pass `state` + demo children for Storybook.
+ */
+export const SearchModal = ({
+  state,
+  className,
+  contentClassName,
+  showOverlay = true,
+  overlayClassName,
+  children,
+  ...modalProps
+}: SearchModalProps) => (
+  <Modal {...modalProps}>
+    <ModalContent
+      showOverlay={showOverlay}
+      overlayClassName={overlayClassName}
+      className={cn(
+        "flex max-h-[min(80vh,640px)] w-[min(100vw-2rem,700px)] max-w-[768px] flex-col p-0",
+        contentClassName,
+      )}
+      aria-label="Search"
+      data-state={state}
+    >
+      <ModalTitle className="sr-only">Search</ModalTitle>
+      <ModalDescription className="sr-only">
+        Search reports, chats, or issues
+      </ModalDescription>
+      <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
+        {children}
+      </div>
+    </ModalContent>
+  </Modal>
+);
+
+export type SearchModalInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+> & {
+  className?: string;
+  wrapperClassName?: string;
+};
+
+export const SearchModalInput = ({
+  className,
+  wrapperClassName,
+  placeholder = "Search reports, chats, or issues…",
+  ...props
+}: SearchModalInputProps) => (
+  <div
+    className={cn(
+      "shrink-0 p-3",
+      wrapperClassName,
+    )}
+  >
+    <div className="flex min-h-10 items-center px-3">
+      <input
+        type="search"
+        placeholder={placeholder}
+        className={cn(
+          "w-full bg-transparent text-caption-1 text-display-on-light-primary",
+          "placeholder:text-display-on-light-tertiary focus:outline-none",
+          className,
+        )}
+        aria-label="Search query"
+        {...props}
+      />
+    </div>
+  </div>
+);
+
+export const SearchModalDivider = ({ className }: { className?: string }) => (
+  <div
+    className={cn("h-px w-full shrink-0 bg-divider-primary", className)}
+    aria-hidden
+  />
+);
+
+export type SearchModalBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const SearchModalBody = ({
+  children,
+  className,
+}: SearchModalBodyProps) => (
+  <ModalBody
+    className={cn(
+      "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-2",
+      className,
+    )}
+  >
+    {children}
+  </ModalBody>
+);
+
+export type SearchModalFiltersProps = {
+  tabs?: SearchFilterTab[];
+  value: string;
+  onValueChange: (value: string) => void;
+  children?: ReactNode;
+  className?: string;
+  listClassName?: string;
+};
+
+/**
+ * Pill-style filter tabs for the results state.
+ * Children render below the tab list (typically a single filtered results list).
+ * For per-tab panels, nest `SearchModalFilterPanel` (TabsContent) as children.
+ */
+export const SearchModalFilters = ({
+  tabs = DEFAULT_FILTERS,
+  value,
+  onValueChange,
+  children,
+  className,
+  listClassName,
+}: SearchModalFiltersProps) => (
+  <Tabs
+    type="pills"
+    value={value}
+    onValueChange={onValueChange}
+    className={cn("min-h-0 flex-1 gap-0", className)}
+  >
+    <TabsList
+      className={cn(
+        "w-full shrink-0 bg-background-primary p-2",
+        listClassName,
+      )}
+    >
+      {tabs.map((tab) => (
+        <TabsTrigger key={tab.value} value={tab.value}>
+          {tab.label}
+          {typeof tab.count === "number" && (
+            <Badge color="blue">
+              {tab.count > 99 ? "99+" : tab.count}
+            </Badge>
+          )}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+    <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+  </Tabs>
+);
+
+export type SearchModalFilterPanelProps = {
+  value: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const SearchModalFilterPanel = ({
+  value,
+  children,
+  className,
+}: SearchModalFilterPanelProps) => (
+  <TabsContent value={value} className={className}>
+    {children}
+  </TabsContent>
+);
+
+export type SearchModalResultsProps = {
+  items?: ResultRowProps[];
+  children?: ReactNode;
+  className?: string;
+};
+
+export const SearchModalResults = ({
+  items,
+  children,
+  className,
+}: SearchModalResultsProps) => (
+  <div className={cn("flex flex-col", className)}>
+    {items?.map((item, index) => (
+      <ResultRow key={index} {...item} />
+    ))}
+    {children}
+  </div>
+);
+
+export type SearchModalIdleProps = {
+  label?: string;
+  items?: ResultRowProps[];
+  children?: ReactNode;
+  className?: string;
+};
+
+export const SearchModalIdle = ({
+  label = "Recently viewed",
+  items,
+  children,
+  className,
+}: SearchModalIdleProps) => (
+  <div className={cn("flex min-h-0 flex-1 flex-col p-1", className)}>
+    <SectionHeader
+      label={label}
+      className="shrink-0 px-3 py-1 text-caption-2 font-normal normal-case tracking-[0.01em] text-display-on-light-secondary"
+    />
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <SearchModalResults items={items}>{children}</SearchModalResults>
+    </div>
+  </div>
+);
+
+export type SearchModalLoadingProps = {
+  className?: string;
+};
+
+export const SearchModalLoading = ({ className }: SearchModalLoadingProps) => (
+  <Skeleton variant="search" className={cn("rounded-none", className)} />
+);
+
+/** Convenience controlled panel for Storybook / simple embeds. */
+export type SearchModalPanelProps = {
+  state?: SearchModalState;
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  filter?: string;
+  onFilterChange?: (filter: string) => void;
+  filters?: SearchFilterTab[];
+  recentItems?: ResultRowProps[];
+  resultItems?: ResultRowProps[];
+  className?: string;
+};
+
+export const SearchModalPanel = ({
+  state = "idle",
+  query = "",
+  onQueryChange,
+  filter = "all",
+  onFilterChange,
+  filters = DEFAULT_FILTERS,
+  recentItems,
+  resultItems,
+  className,
+}: SearchModalPanelProps) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onQueryChange?.(event.target.value);
+  };
+
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col", className)} data-state={state}>
+      <SearchModalInput value={query} onChange={handleChange} />
+      <SearchModalDivider />
+      <SearchModalBody className={state === "loading" ? "p-0" : undefined}>
+        {state === "idle" && <SearchModalIdle items={recentItems} />}
+        {state === "loading" && <SearchModalLoading />}
+        {state === "results" && (
+          <SearchModalFilters
+            tabs={filters}
+            value={filter}
+            onValueChange={(next) => onFilterChange?.(next)}
+          >
+            <SearchModalResults items={resultItems} />
+          </SearchModalFilters>
+        )}
+      </SearchModalBody>
+    </div>
+  );
+};
+
+export type { ModalContentProps };

package/src/patterns/Search/index.ts

@@ -1,5 +1,31 @@
-export { Pill, type PillProps, type PillSize, type PillState } from "./Pill";
-export { PillInfo, type PillInfoProps, type PillInfoType } from "./PillInfo";
-export { ResultRow, type ResultRowProps, type ResultRowState, type ResultRowVariant } from "./ResultRow";
-export { SearchModal, type SearchModalProps, type SearchModalState } from "./SearchModal";
-export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";
+export { Pill, type PillProps, type PillSize, type PillState } from "./Pill";
+export { PillInfo, type PillInfoProps, type PillInfoType } from "./PillInfo";
+export {
+  ResultRow,
+  type ResultRowProps,
+  type ResultRowState,
+  type ResultRowVariant,
+} from "./ResultRow";
+export {
+  SearchModal,
+  SearchModalBody,
+  SearchModalDivider,
+  SearchModalFilterPanel,
+  SearchModalFilters,
+  SearchModalIdle,
+  SearchModalInput,
+  SearchModalLoading,
+  SearchModalPanel,
+  SearchModalResults,
+  type SearchFilterTab,
+  type SearchModalBodyProps,
+  type SearchModalFiltersProps,
+  type SearchModalIdleProps,
+  type SearchModalInputProps,
+  type SearchModalLoadingProps,
+  type SearchModalPanelProps,
+  type SearchModalProps,
+  type SearchModalResultsProps,
+  type SearchModalState,
+} from "./SearchModal";
+export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";

package/src/patterns/Sidebar/assets/logo-compliance-mark.png

@@ -1,5 +1,5 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Logo">
-<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
-</g>
-</svg>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>