@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.20",
+  "version": "2.0.0-dev.21",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -112,6 +112,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.19",
     "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-tabs": "^1.1.17",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hooks-library/core": "^0.6.2",

package/src/components/EmptyState.tsx

@@ -1,44 +1,44 @@
-import { type ReactNode } from "react";
-import { Button, type ButtonProps } from "../primitives";
-import { cn } from "../utils/cn";
-
-export type EmptyStateProps = {
-  illustration?: ReactNode;
-  title: string;
-  description?: string;
-  action?: Pick<ButtonProps, "children" | "onClick" | "hierarchy" | "icon" | "startIcon">;
-  className?: string;
-};
-
-export const EmptyState = ({
-  illustration,
-  title,
-  description,
-  action,
-  className,
-}: EmptyStateProps) => (
-  <div
-    className={cn(
-      "flex max-w-sm flex-col items-center gap-4 px-6 py-10 text-center",
-      className,
-    )}
-  >
-    {illustration && <div className="shrink-0">{illustration}</div>}
-    <div className="flex flex-col gap-1">
-      <h3 className="text-subheader-em text-display-on-light-primary">{title}</h3>
-      {description && (
-        <p className="text-body text-display-on-light-secondary">{description}</p>
-      )}
-    </div>
-    {action && (
-      <Button
-        hierarchy={action.hierarchy ?? "primary"}
-        onClick={action.onClick}
-        icon={action.icon}
-        startIcon={action.startIcon}
-      >
-        {action.children}
-      </Button>
-    )}
-  </div>
-);
+import { type ReactNode } from "react";
+import { Button, type ButtonProps } from "../primitives";
+import { cn } from "../utils/cn";
+
+export type EmptyStateProps = {
+  illustration?: ReactNode;
+  title: string;
+  description?: string;
+  action?: Pick<ButtonProps, "children" | "onClick" | "hierarchy" | "icon" | "startIcon">;
+  className?: string;
+};
+
+export const EmptyState = ({
+  illustration,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) => (
+  <div
+    className={cn(
+      "flex max-w-sm flex-col items-center gap-4 px-6 py-10 text-center",
+      className,
+    )}
+  >
+    {illustration && <div className="shrink-0">{illustration}</div>}
+    <div className="flex flex-col gap-1">
+      <h3 className="text-subheader-em text-display-on-light-primary">{title}</h3>
+      {description && (
+        <p className="text-body text-display-on-light-secondary">{description}</p>
+      )}
+    </div>
+    {action && (
+      <Button
+        hierarchy={action.hierarchy ?? "primary"}
+        onClick={action.onClick}
+        icon={action.icon}
+        startIcon={action.startIcon}
+      >
+        {action.children}
+      </Button>
+    )}
+  </div>
+);

package/src/components/Modal.tsx

@@ -1,141 +1,141 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type ReactNode,
-} from "react";
-import { cn } from "../utils/cn";
-
-export type ModalProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
-
-/** Generic dialog shell — portal, backdrop, focus trap, Escape. */
-export const Modal = DialogPrimitive.Root;
-
-export const ModalTrigger = DialogPrimitive.Trigger;
-
-export const ModalClose = DialogPrimitive.Close;
-
-export type ModalPortalProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Portal
->;
-
-export const ModalPortal = DialogPrimitive.Portal;
-
-export type ModalOverlayProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Overlay
->;
-
-/** Dark gray backdrop (app convention; Figma search frames omit overlay). */
-export const ModalOverlay = forwardRef<
-  ElementRef<typeof DialogPrimitive.Overlay>,
-  ModalOverlayProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-[999] bg-grey-900/65 transition-opacity",
-      "data-[state=open]:animate-in data-[state=open]:fade-in",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out",
-      className,
-    )}
-    {...props}
-  />
-));
-ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-export type ModalContentProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
-> & {
-  /** When false, backdrop is omitted. Defaults to true. */
-  showOverlay?: boolean;
-  overlayClassName?: string;
-};
-
-export const ModalContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Content>,
-  ModalContentProps
->(
-  (
-    {
-      className,
-      children,
-      showOverlay = true,
-      overlayClassName,
-      ...props
-    },
-    ref,
-  ) => (
-    <ModalPortal>
-      {showOverlay && <ModalOverlay className={overlayClassName} />}
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          "fixed left-1/2 top-1/2 z-[999] w-full max-w-xl -translate-x-1/2 -translate-y-1/2",
-          "overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3",
-          "outline-none",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-90",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
-    </ModalPortal>
-  ),
-);
-ModalContent.displayName = DialogPrimitive.Content.displayName;
-
-export type ModalTitleProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Title
->;
-
-export const ModalTitle = forwardRef<
-  ElementRef<typeof DialogPrimitive.Title>,
-  ModalTitleProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-subheader-em text-display-on-light-primary", className)}
-    {...props}
-  />
-));
-ModalTitle.displayName = DialogPrimitive.Title.displayName;
-
-export type ModalDescriptionProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Description
->;
-
-export const ModalDescription = forwardRef<
-  ElementRef<typeof DialogPrimitive.Description>,
-  ModalDescriptionProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-caption-2 text-display-on-light-secondary", className)}
-    {...props}
-  />
-));
-ModalDescription.displayName = DialogPrimitive.Description.displayName;
-
-export type ModalHeaderSlotProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-export const ModalHeaderSlot = ({
-  children,
-  className,
-}: ModalHeaderSlotProps) => (
-  <div className={cn("shrink-0", className)}>{children}</div>
-);
-
-export type ModalBodyProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-export const ModalBody = ({ children, className }: ModalBodyProps) => (
-  <div className={cn("min-h-0 overflow-auto", className)}>{children}</div>
-);
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type ModalProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+
+/** Generic dialog shell — portal, backdrop, focus trap, Escape. */
+export const Modal = DialogPrimitive.Root;
+
+export const ModalTrigger = DialogPrimitive.Trigger;
+
+export const ModalClose = DialogPrimitive.Close;
+
+export type ModalPortalProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Portal
+>;
+
+export const ModalPortal = DialogPrimitive.Portal;
+
+export type ModalOverlayProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>;
+
+/** Dark gray backdrop (app convention; Figma search frames omit overlay). */
+export const ModalOverlay = forwardRef<
+  ElementRef<typeof DialogPrimitive.Overlay>,
+  ModalOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-[999] bg-grey-900/65 transition-opacity",
+      "data-[state=open]:animate-in data-[state=open]:fade-in",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out",
+      className,
+    )}
+    {...props}
+  />
+));
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+export type ModalContentProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> & {
+  /** When false, backdrop is omitted. Defaults to true. */
+  showOverlay?: boolean;
+  overlayClassName?: string;
+};
+
+export const ModalContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(
+  (
+    {
+      className,
+      children,
+      showOverlay = true,
+      overlayClassName,
+      ...props
+    },
+    ref,
+  ) => (
+    <ModalPortal>
+      {showOverlay && <ModalOverlay className={overlayClassName} />}
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[999] w-full max-w-xl -translate-x-1/2 -translate-y-1/2",
+          "overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3",
+          "outline-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-90",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  ),
+);
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+
+export type ModalTitleProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Title
+>;
+
+export const ModalTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  ModalTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-subheader-em text-display-on-light-primary", className)}
+    {...props}
+  />
+));
+ModalTitle.displayName = DialogPrimitive.Title.displayName;
+
+export type ModalDescriptionProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+>;
+
+export const ModalDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  ModalDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-caption-2 text-display-on-light-secondary", className)}
+    {...props}
+  />
+));
+ModalDescription.displayName = DialogPrimitive.Description.displayName;
+
+export type ModalHeaderSlotProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const ModalHeaderSlot = ({
+  children,
+  className,
+}: ModalHeaderSlotProps) => (
+  <div className={cn("shrink-0", className)}>{children}</div>
+);
+
+export type ModalBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const ModalBody = ({ children, className }: ModalBodyProps) => (
+  <div className={cn("min-h-0 overflow-auto", className)}>{children}</div>
+);

package/src/components/PageHeader.tsx

@@ -1,132 +1,132 @@
-import {
-  type ComponentPropsWithoutRef,
-  type MouseEvent,
-  type ReactNode,
-} from "react";
-import { cn } from "../utils/cn";
-
-export type PageHeaderCrumb = {
-  label: string;
-  /** Renders a real `<a href>` so native browser controls work. */
-  href: string;
-  /**
-   * Optional SPA handler. Callers should `preventDefault` only for unmodified
-   * primary clicks; modifier / middle-click keep native anchor behavior.
-   */
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-};
-
-export type PageHeaderProps = {
-  /** Leading icon (Figma 24×24). */
-  icon?: ReactNode;
-  /** Standard title, or current (last) segment when `crumbs` is set. */
-  title: ReactNode;
-  /**
-   * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
-   * + current `title` (non-link).
-   */
-  crumbs?: PageHeaderCrumb[];
-  /** Right-hand actions slot (buttons, menus, etc.). */
-  actions?: ReactNode;
-  className?: string;
-};
-
-export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
-
-export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
-
-/**
- * Page title row — Figma `Header` (389:8850).
- * Variants: Standard (icon + title) | Nested (icon + crumb trail).
- */
-function PageHeaderRoot({
-  icon,
-  title,
-  crumbs,
-  actions,
-  className,
-}: PageHeaderProps) {
-  const isNested = Boolean(crumbs?.length);
-
-  return (
-    <div
-      data-variant={isNested ? "nested" : "standard"}
-      className={cn(
-        "flex w-full shrink-0 items-center justify-between gap-4",
-        "min-h-10",
-        className,
-      )}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-2">
-        {icon != null && (
-          <span className="inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6">
-            {icon}
-          </span>
-        )}
-
-        {isNested ? (
-          <nav aria-label="Breadcrumb" className="min-w-0">
-            <ol className="flex min-w-0 flex-wrap items-center gap-2">
-              {crumbs!.map((crumb) => (
-                <li key={`${crumb.href}-${crumb.label}`} className="contents">
-                  <a
-                    href={crumb.href}
-                    onClick={crumb.onClick}
-                    className="truncate text-caption-1-em text-display-on-light-secondary transition-colors hover:text-display-on-light-primary"
-                  >
-                    {crumb.label}
-                  </a>
-                  <span
-                    aria-hidden
-                    className="text-caption-1-em text-display-on-light-secondary"
-                  >
-                    /
-                  </span>
-                </li>
-              ))}
-              <li
-                aria-current="page"
-                className="min-w-0 truncate text-caption-1-em text-display-on-light-primary"
-              >
-                {title}
-              </li>
-            </ol>
-          </nav>
-        ) : (
-          <h1 className="min-w-0 truncate text-caption-1-em text-display-on-light-primary">
-            {title}
-          </h1>
-        )}
-      </div>
-
-      {actions != null && (
-        <div className="flex shrink-0 items-center gap-2">{actions}</div>
-      )}
-    </div>
-  );
-}
-
-/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
-function PageHeaderShell({ className, ...props }: PageHeaderShellProps) {
-  return (
-    <div
-      className={cn("flex h-full min-h-0 flex-col", className)}
-      {...props}
-    />
-  );
-}
-
-/** Scrollable page content under a pinned PageHeader. */
-function PageHeaderBody({ className, ...props }: PageHeaderBodyProps) {
-  return (
-    <div
-      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
-      {...props}
-    />
-  );
-}
-
-export const PageHeader = Object.assign(PageHeaderRoot, {
-  Shell: PageHeaderShell,
-  Body: PageHeaderBody,
-});
+import {
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type PageHeaderCrumb = {
+  label: string;
+  /** Renders a real `<a href>` so native browser controls work. */
+  href: string;
+  /**
+   * Optional SPA handler. Callers should `preventDefault` only for unmodified
+   * primary clicks; modifier / middle-click keep native anchor behavior.
+   */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+export type PageHeaderProps = {
+  /** Leading icon (Figma 24×24). */
+  icon?: ReactNode;
+  /** Standard title, or current (last) segment when `crumbs` is set. */
+  title: ReactNode;
+  /**
+   * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
+   * + current `title` (non-link).
+   */
+  crumbs?: PageHeaderCrumb[];
+  /** Right-hand actions slot (buttons, menus, etc.). */
+  actions?: ReactNode;
+  className?: string;
+};
+
+export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
+
+export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
+
+/**
+ * Page title row — Figma `Header` (389:8850).
+ * Variants: Standard (icon + title) | Nested (icon + crumb trail).
+ */
+function PageHeaderRoot({
+  icon,
+  title,
+  crumbs,
+  actions,
+  className,
+}: PageHeaderProps) {
+  const isNested = Boolean(crumbs?.length);
+
+  return (
+    <div
+      data-variant={isNested ? "nested" : "standard"}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-between gap-4",
+        "min-h-10",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        {icon != null && (
+          <span className="inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6">
+            {icon}
+          </span>
+        )}
+
+        {isNested ? (
+          <nav aria-label="Breadcrumb" className="min-w-0">
+            <ol className="flex min-w-0 flex-wrap items-center gap-2">
+              {crumbs!.map((crumb) => (
+                <li key={`${crumb.href}-${crumb.label}`} className="contents">
+                  <a
+                    href={crumb.href}
+                    onClick={crumb.onClick}
+                    className="truncate text-caption-1-em text-display-on-light-secondary transition-colors hover:text-display-on-light-primary"
+                  >
+                    {crumb.label}
+                  </a>
+                  <span
+                    aria-hidden
+                    className="text-caption-1-em text-display-on-light-secondary"
+                  >
+                    /
+                  </span>
+                </li>
+              ))}
+              <li
+                aria-current="page"
+                className="min-w-0 truncate text-caption-1-em text-display-on-light-primary"
+              >
+                {title}
+              </li>
+            </ol>
+          </nav>
+        ) : (
+          <h1 className="min-w-0 truncate text-caption-1-em text-display-on-light-primary">
+            {title}
+          </h1>
+        )}
+      </div>
+
+      {actions != null && (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      )}
+    </div>
+  );
+}
+
+/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
+function PageHeaderShell({ className, ...props }: PageHeaderShellProps) {
+  return (
+    <div
+      className={cn("flex h-full min-h-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Scrollable page content under a pinned PageHeader. */
+function PageHeaderBody({ className, ...props }: PageHeaderBodyProps) {
+  return (
+    <div
+      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export const PageHeader = Object.assign(PageHeaderRoot, {
+  Shell: PageHeaderShell,
+  Body: PageHeaderBody,
+});