@lateralus-ai/shipping-ui 2.0.0-dev.5 → 2.0.0-dev.7

package/dist/patterns/Search/ResultRow.d.ts

@@ -1,13 +1,19 @@
 import { ReactNode } from 'react';
-export type ResultRowVariant = "report" | "chat" | "issue";
-export type ResultRowState = "idle" | "active";
+import { EntryProps, EntryState, EntryVariant } from '../../components/Entry';
+/** @deprecated Prefer `EntryVariant`. */
+export type ResultRowVariant = EntryVariant;
+/** @deprecated Prefer `EntryState`. */
+export type ResultRowState = EntryState;
 export type ResultRowProps = {
-    variant?: ResultRowVariant;
-    state?: ResultRowState;
+    variant?: EntryVariant;
+    state?: EntryState;
     title?: ReactNode;
-    /** Secondary line — excerpt, metadata, or highlighted query match. */
     subtitle?: ReactNode;
     onClick?: () => void;
     className?: string;
 };
+/**
+ * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
+ */
 export declare const ResultRow: ({ variant, state, title, subtitle, onClick, className, }: ResultRowProps) => import("react/jsx-runtime").JSX.Element;
+export type { EntryProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.5",
+  "version": "2.0.0-dev.7",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/Entry.tsx

@@ -1,64 +1,138 @@
-import { type ReactNode } from "react";
-import { ChatIcon, IssuesIcon } from "../icons";
+import {
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { ChatIcon, IssuesIcon, ReportIcon, StatusIcon } from "../icons";
 import { cn } from "../utils/cn";
 
-export type EntryType = "chat" | "issue";
-export type EntryState = "idle" | "selected";
+export type EntryVariant = "chat" | "issue" | "report";
+/** @deprecated Prefer `EntryVariant`. */
+export type EntryType = EntryVariant;
+export type EntryState = "idle" | "active";
 
 export type EntryProps = {
-  type: EntryType;
+  /** Visual type — drives the default leading icon. */
+  variant?: EntryVariant;
+  /** @deprecated Use `variant`. */
+  type?: EntryVariant;
   state?: EntryState;
-  title: string;
-  subtitle?: string;
-  meta?: ReactNode;
+  title?: ReactNode;
+  /** Secondary line — excerpt, metadata, or highlighted query match. */
+  subtitle?: ReactNode;
+  /** Unread count badge in the title row (Figma red pill). */
+  count?: number;
+  /** Trailing actions (e.g. ellipsis menu). Shown on hover / when forced. */
+  trailing?: ReactNode;
+  /** Override the default variant icon. */
+  icon?: ReactNode;
   onClick?: () => void;
   className?: string;
+  /** @deprecated Use `count` or `trailing`. */
+  meta?: ReactNode;
 };
 
-const typeIcons: Record<EntryType, ReactNode> = {
-  chat: <ChatIcon size="small" />,
-  issue: <IssuesIcon size="small" />,
+const variantIcons: Record<EntryVariant, ReactNode> = {
+  chat: <ChatIcon className="size-4" />,
+  issue: <StatusIcon className="size-4" />,
+  report: <ReportIcon className="size-4" />,
 };
 
+/**
+ * List entry row — Figma `Entry` (389:10001).
+ * Shared by search results and activity lists.
+ *
+ * Renders a `div` (not `<button>`) so trailing controls can be real buttons
+ * without nested-button issues. Whole-row click uses `onClick` + keyboard.
+ */
 export const Entry = ({
+  variant,
   type,
   state = "idle",
-  title,
+  title = "Title",
   subtitle,
-  meta,
+  count,
+  trailing,
+  icon,
   onClick,
   className,
-}: EntryProps) => (
-  <button
-    type="button"
-    data-type={type}
-    data-state={state}
-    onClick={onClick}
-    className={cn(
-      "flex w-full items-start gap-3 rounded-control px-3 py-2.5 text-left transition-colors",
-      "hover:bg-background-secondary",
-      "data-[state=selected]:bg-background-selected data-[state=selected]:text-display-on-dark-primary",
-      "data-[state=selected]:[&_.entry-subtitle]:text-display-on-dark-secondary",
-      "data-[state=selected]:[&_.entry-meta]:text-display-on-dark-tertiary",
-      "data-[state=selected]:[&_.entry-icon]:text-display-on-dark-secondary",
-      className,
-    )}
-  >
-    <span className="entry-icon mt-0.5 shrink-0 text-display-on-light-secondary">
-      {typeIcons[type]}
-    </span>
-    <span className="min-w-0 flex-1">
-      <span className="block truncate text-caption-2-em">{title}</span>
-      {subtitle && (
-        <span className="entry-subtitle mt-0.5 block truncate text-footnote text-display-on-light-tertiary">
-          {subtitle}
-        </span>
+  meta,
+}: EntryProps) => {
+  const resolvedVariant: EntryVariant = variant ?? type ?? "chat";
+  const isInteractive = typeof onClick === "function";
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      data-variant={resolvedVariant}
+      data-state={state}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "group flex w-full items-center gap-4 rounded-control p-2 text-left transition-colors",
+        "hover:bg-[rgba(38,36,32,0.04)]",
+        state === "active" && "bg-[rgba(38,36,32,0.04)]",
+        isInteractive && "cursor-pointer",
+        className,
       )}
-    </span>
-    {meta && (
-      <span className="entry-meta shrink-0 text-footnote text-display-on-light-quaternary">
-        {meta}
+    >
+      <span className="shrink-0 text-display-on-light-secondary">
+        {icon ?? variantIcons[resolvedVariant] ?? (
+          <IssuesIcon className="size-4" />
+        )}
+      </span>
+
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="flex min-h-6 w-full items-center gap-4">
+          <span className="min-w-0 flex-1 truncate text-caption-1-em text-display-on-light-primary">
+            {title}
+          </span>
+          {typeof count === "number" && count > 0 && (
+            <span
+              className="inline-flex min-h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-red-600 px-0.5 text-footnote-em text-white"
+              aria-label={`${count} unread`}
+            >
+              {count > 99 ? "99+" : count}
+            </span>
+          )}
+          {meta != null && typeof count !== "number" && (
+            <span className="shrink-0 text-footnote text-display-on-light-quaternary">
+              {meta}
+            </span>
+          )}
+        </span>
+
+        {(subtitle != null && subtitle !== false) || trailing ? (
+          <span className="flex min-h-6 w-full items-center gap-4">
+            {subtitle != null && subtitle !== false ? (
+              <span className="min-w-0 flex-1 truncate text-caption-2 text-display-on-light-secondary">
+                {subtitle}
+              </span>
+            ) : (
+              <span className="min-w-0 flex-1" />
+            )}
+            {trailing != null && (
+              <span
+                className="inline-flex size-5 shrink-0 items-center justify-center"
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                {trailing}
+              </span>
+            )}
+          </span>
+        ) : null}
       </span>
-    )}
-  </button>
-);
+    </div>
+  );
+};

package/src/components/index.ts

@@ -17,7 +17,7 @@ export {
   type TabsType,
 } from "./Tabs";
 export { Header, type HeaderProps, type HeaderVariant } from "./Header";
-export { Entry, type EntryProps, type EntryType, type EntryState } from "./Entry";
+export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export {
   Modal,

package/src/index.ts

@@ -61,6 +61,7 @@ export type {
   EntryProps,
   EntryType,
   EntryState,
+  EntryVariant,
   EmptyStateProps,
   ModalProps,
   ModalOverlayProps,

package/src/patterns/Search/ResultRow.tsx

@@ -1,26 +1,28 @@
 import { type ReactNode } from "react";
-import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
-import { cn } from "../../utils/cn";
+import {
+  Entry,
+  type EntryProps,
+  type EntryState,
+  type EntryVariant,
+} from "../../components/Entry";
 
-export type ResultRowVariant = "report" | "chat" | "issue";
-export type ResultRowState = "idle" | "active";
+/** @deprecated Prefer `EntryVariant`. */
+export type ResultRowVariant = EntryVariant;
+/** @deprecated Prefer `EntryState`. */
+export type ResultRowState = EntryState;
 
 export type ResultRowProps = {
-  variant?: ResultRowVariant;
-  state?: ResultRowState;
+  variant?: EntryVariant;
+  state?: EntryState;
   title?: ReactNode;
-  /** Secondary line — excerpt, metadata, or highlighted query match. */
   subtitle?: ReactNode;
   onClick?: () => void;
   className?: string;
 };
 
-const variantIcons: Record<ResultRowVariant, ReactNode> = {
-  report: <ReportIcon className="size-4" />,
-  chat: <ChatIcon className="size-4" />,
-  issue: <IssuesIcon className="size-4" />,
-};
-
+/**
+ * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
+ */
 export const ResultRow = ({
   variant = "report",
   state = "idle",
@@ -29,30 +31,14 @@ export const ResultRow = ({
   onClick,
   className,
 }: ResultRowProps) => (
-  <button
-    type="button"
-    className={cn(
-      "flex w-full items-center gap-4 rounded-control px-3 py-2.5 text-left transition-colors",
-      "hover:bg-[rgba(38,36,32,0.04)]",
-      state === "active" && "bg-[rgba(38,36,32,0.04)]",
-      className,
-    )}
-    data-variant={variant}
-    data-state={state}
+  <Entry
+    variant={variant}
+    state={state}
+    title={title}
+    subtitle={subtitle}
     onClick={onClick}
-  >
-    <span className="shrink-0 text-display-on-light-secondary">
-      {variantIcons[variant]}
-    </span>
-    <span className="min-w-0 flex-1">
-      <span className="block truncate text-caption-1-em text-display-on-light-primary">
-        {title}
-      </span>
-      {subtitle != null && subtitle !== false && (
-        <span className="mt-0.5 block truncate text-caption-2 text-display-on-light-secondary">
-          {subtitle}
-        </span>
-      )}
-    </span>
-  </button>
+    className={className}
+  />
 );
+
+export type { EntryProps };

package/src/stories/canvases/ContentCanvas.tsx

@@ -82,9 +82,29 @@ export const ContentCanvas = () => (
 
       <FigmaSection label="Entry">
         <div className="max-w-xl space-y-2">
-          <Entry type="chat" title="Hull inspection report" subtitle="2 hours ago" meta="17" />
-          <Entry type="issue" title="Critical valve malfunction" state="selected" meta="High" />
-          <Entry type="chat" title="Port state control checklist" subtitle="Yesterday" className="bg-background-hover" />
+          <Entry
+            variant="chat"
+            title="Hull inspection report"
+            subtitle="We’ve got a persistent oil leak from the fuel pump."
+          />
+          <Entry
+            variant="chat"
+            state="active"
+            title="Ballast Pump Not Starting"
+            subtitle="The fuel pump won’t start consistently."
+            trailing={<span className="text-display-on-light-secondary">···</span>}
+          />
+          <Entry
+            variant="issue"
+            title="Excessive Rust on Fuel Pump"
+            subtitle="Created by Jake Silva on March 28"
+            count={3}
+          />
+          <Entry
+            variant="report"
+            title="Engine Room Oil Leak"
+            subtitle="We’ve spotted a steady oil leak near the fuel pump."
+          />
         </div>
       </FigmaSection>