@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

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

@@ -0,0 +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,
+});

package/src/components/ScrollableList.tsx

@@ -0,0 +1,61 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { cn } from "../utils/cn";
+
+export type ScrollableListProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListHeaderProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListBodyProps = ComponentPropsWithoutRef<"div">;
+
+/**
+ * Fill-height list chrome — Figma `Table` (6154:152285).
+ * Outer grey-100 frame + header slot + internally scrolling grey-50 body.
+ * Column layout and rows are caller-owned children.
+ */
+function ScrollableListRoot({ className, ...props }: ScrollableListProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden rounded-lg bg-grey-100 p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Column title bar. Default left padding aligns with a 24px leading icon +
+ * 8px gap + 8px row padding (Figma). Override `className` when rows have no icon.
+ */
+function ScrollableListHeader({
+  className,
+  ...props
+}: ScrollableListHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-start gap-8 pl-10 pr-2 py-1",
+        "text-caption-2-em text-display-on-light-secondary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Internally scrolling row region. */
+function ScrollableListBody({ className, ...props }: ScrollableListBodyProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto rounded bg-grey-50 p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const ScrollableList = Object.assign(ScrollableListRoot, {
+  Header: ScrollableListHeader,
+  Body: ScrollableListBody,
+});

package/src/components/Tabs.tsx

@@ -11,26 +11,37 @@ import { cn } from "../utils/cn";
 
 export type TabsType = "tabs" | "pills";
 
+/** Soft = search filters (filled idle, light accent active). Solid = list filters (grey-100 idle, blue-600 active). */
+export type TabsAppearance = "soft" | "solid";
+
 type TabsContextValue = {
   type: TabsType;
+  appearance: TabsAppearance;
 };
 
-const TabsContext = createContext<TabsContextValue>({ type: "tabs" });
+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 }}>
+  <TabsContext.Provider value={{ type, appearance }}>
     <TabsPrimitive.Root
       className={cn("flex flex-col", className)}
       data-type={type}
+      data-appearance={type === "pills" ? appearance : undefined}
       {...props}
     >
       {children}
@@ -51,7 +62,7 @@ export const TabsList = forwardRef<
       ref={ref}
       className={cn(
         "flex items-center",
-        type === "tabs" && "gap-1 border-b border-divider-primary",
+        type === "tabs" && "gap-6 border-b border-divider-primary",
         type === "pills" && "gap-2",
         className,
       )}
@@ -64,52 +75,48 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 export type TabsTriggerProps = ComponentPropsWithoutRef<
   typeof TabsPrimitive.Trigger
 > & {
-  /** Optional count badge (pill variant / search filters). */
-  count?: number;
   children: ReactNode;
 };
 
 export const TabsTrigger = forwardRef<
   ElementRef<typeof TabsPrimitive.Trigger>,
   TabsTriggerProps
->(({ className, count, children, ...props }, ref) => {
-  const { type } = useContext(TabsContext);
+>(({ className, children, ...props }, ref) => {
+  const { type, appearance } = useContext(TabsContext);
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center transition-colors outline-none",
+        "inline-flex items-center justify-center gap-2.5 transition-colors outline-none",
         "disabled:pointer-events-none disabled:opacity-50",
         type === "tabs" && [
-          "relative px-3 py-2 text-caption-2 text-display-on-light-secondary",
+          "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" && [
-          "min-h-9 gap-2.5 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 === "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-grey-100 text-display-on-light-tertiary",
+            "hover:bg-grey-200 hover:text-display-on-light-primary",
+            "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
+            "data-[state=active]:hover:bg-blue-600",
+          ],
         className,
       )}
       {...props}
     >
       {children}
-      {typeof count === "number" && (
-        <span
-          className={cn(
-            "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-footnote-em",
-            "bg-accent-bg-light text-display-on-light-tertiary",
-          )}
-          aria-label={`Count: ${count}`}
-        >
-          {count > 99 ? "99+" : count}
-        </span>
-      )}
     </TabsPrimitive.Trigger>
   );
 });

package/src/components/index.ts

@@ -15,9 +15,23 @@ export {
   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 } from "./Entry";
+export {
+  PageHeader,
+  type PageHeaderProps,
+  type PageHeaderCrumb,
+  type PageHeaderShellProps,
+  type PageHeaderBodyProps,
+} from "./PageHeader";
+export {
+  ScrollableList,
+  type ScrollableListProps,
+  type ScrollableListHeaderProps,
+  type ScrollableListBodyProps,
+} from "./ScrollableList";
+export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export {
   Modal,