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

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/dist/patterns/Sidebar/sidebar-styles.d.ts

@@ -15,7 +15,8 @@ export declare const sidebarSectionShellCollapsed = "relative box-border flex w-
 export declare const sidebarUnreadOverlay = "pointer-events-none absolute left-0 top-0 size-6";
 /** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
 export declare const sidebarUnreadDot = "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
-export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
+/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
+export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
 export declare const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
 export declare const sidebarSectionLabelClass = "min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]";
 /** Figma sidebar icon buttons — transparent idle, grey hover (no white fill). */

package/dist/primitives/Badge.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
-type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-type BadgeType = "label" | "icon";
+export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+export type BadgeType = "label" | "icon";
 export type BadgeProps = {
     color: BadgeColor;
+    /** `label` grows with content (pill). `icon` is a compact circle for a glyph/digit. */
     type?: BadgeType;
     children: ReactNode;
     className?: string;
 };
-export declare const Badge: ({ color, type, children, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
+ */
+export declare const Badge: ({ color, type, children, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/Button.d.ts

@@ -13,10 +13,12 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "childre
     disabled?: boolean;
     icon?: ComponentType<IconProps> | ReactNode;
     startIcon?: ComponentType<IconProps> | ReactNode;
+    /** Renders after the label, inside the same button (no split/dropdown segment). */
+    endIcon?: ComponentType<IconProps> | ReactNode;
     dropdownOptions?: ButtonDropdownOption[];
     dropdownOpen?: boolean;
     onDropdownOpenChange?: (open: boolean) => void;
     forcedState?: ButtonAppearance;
     children: ReactNode;
 };
-export declare const Button: ({ hierarchy, disabled, icon, startIcon, dropdownOptions, dropdownOpen, onDropdownOpenChange, forcedState, children, className, type, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ hierarchy, disabled, icon, startIcon, endIcon, dropdownOptions, dropdownOpen, onDropdownOpenChange, forcedState, children, className, type, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/Switch.d.ts

@@ -4,4 +4,9 @@ export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChang
     onChange: (checked: boolean) => void;
     disabled?: boolean;
 };
+/**
+ * On/off control — Figma Switch (3068:65681).
+ * Track: 36×16 (grey-400 off / grey-900 on). Thumb: 24×24 white (grey-50 off),
+ * 1px border matching track, Raise-2 shadow. Off left / on right, edges flush.
+ */
 export declare const Switch: ({ checked, onChange, disabled, className, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/primitives/index.d.ts

@@ -11,5 +11,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from '.
 export { ThinkingDot, type ThinkingDotProps } from './ThinkingDot';
 export { Count, type CountProps } from './Count';
 export { Switch, type SwitchProps } from './Switch';
-export { Badge, type BadgeProps } from './Badge';
+export { Badge, type BadgeProps, type BadgeColor, type BadgeType } from './Badge';
 export { Callout, type CalloutProps } from './Callout';

package/dist/tailwind-theme.d.ts

@@ -82,6 +82,10 @@ export declare const theme: {
         md: "6px";
         sm: "4px";
     };
+    /** Extends Tailwind’s max-width scale (7xl = 1280px). */
+    maxWidth: {
+        "8xl": string;
+    };
     colors: {
         grey: {
             readonly 50: "#fdfdfc";
@@ -233,10 +237,10 @@ export declare const theme: {
             };
         };
         accent: {
-            onLight: string;
-            onDark: string;
-            bgLight: string;
-            bgLighter: string;
+            "on-light": string;
+            "on-dark": string;
+            "bg-light": string;
+            "bg-lighter": string;
         };
         divider: {
             primary: string;

package/dist/theme-entry-Dwr2mV7_.js

@@ -0,0 +1 @@
+"use strict";const n={50:"#fdfdfc",100:"#f4f2ea",200:"#e1ddce",300:"#bfb9a5",400:"#969080",500:"#6e6960",600:"#524e47",700:"#3a3733",800:"#312e2a",900:"#262420"},o={50:"#f5f8f2",100:"#dde6d2",200:"#c5d4b3",300:"#a8bf8f",400:"#7a9a5e",500:"#5a7a42",600:"#456332",700:"#304624",800:"#223018",900:"#141c0e"},d={50:"#eef1f8",100:"#dae0ef",200:"#b8c4e0",300:"#8fa3cc",400:"#5274ae",500:"#3a5d96",600:"#154199",700:"#103480",800:"#0c2860",900:"#081c42"},c={50:"#faf3f1",100:"#f0d3cc",200:"#e4b0a5",300:"#c97a6b",400:"#b85a48",500:"#a0392a",600:"#802c20",700:"#621f16",800:"#45150f",900:"#2a0c08"},l={50:"#faf1de",100:"#f5e4c0",200:"#efd49a",300:"#e4bc6a",400:"#d9a03e",500:"#c48820",600:"#8f6318",700:"#5a3d0d",800:"#3d2a09",900:"#261a05"},s={50:"#f6f2f8",100:"#e2d9e8",200:"#cbbad6",300:"#b09bc3",400:"#957cb0",500:"#7a5d9d",600:"#5e4680",700:"#3d2e4a",800:"#2a2033",900:"#18121c"},p="#ffffff",a={grey:n,green:o,blue:d,red:c,orange:l,purple:s},t={raise1:"0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",raise2:"0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",raise3:"0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"},r={control:"8px",lg:"8px",md:"6px",sm:"4px"},e=(v,i)=>[v,{lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,...i.fontWeight?{fontWeight:String(i.fontWeight)}:{}}],g={fontFamily:{heading:['"TRY Vesterbro"',"Libre Baskerville","Georgia","serif"],sans:['"Matter-TRIAL"',"DM Sans","system-ui","sans-serif"],mono:["Roboto Mono","monospace"]},fontSize:{title:e("28px",{lineHeight:"34px",letterSpacing:"-0.02em"}),"title-em":e("28px",{lineHeight:"34px",letterSpacing:"-0.02em",fontWeight:500}),heading:e("22px",{lineHeight:"28px",letterSpacing:"0",fontWeight:500}),subheader:e("18px",{lineHeight:"28px",letterSpacing:"-0.01em"}),"subheader-em":e("18px",{lineHeight:"28px",letterSpacing:"-0.01em",fontWeight:500}),body:e("16px",{lineHeight:"24px",letterSpacing:"-0.01em"}),"body-em":e("16px",{lineHeight:"24px",letterSpacing:"-0.01em",fontWeight:500}),"caption-1":e("16px",{lineHeight:"22px",letterSpacing:"0.02em"}),"caption-1-em":e("16px",{lineHeight:"22px",letterSpacing:"0.02em",fontWeight:500}),"caption-2":e("14px",{lineHeight:"20px",letterSpacing:"0.01em"}),"caption-2-em":e("14px",{lineHeight:"20px",letterSpacing:"0.01em",fontWeight:500}),footnote:e("13px",{lineHeight:"17px",letterSpacing:"0"}),"footnote-em":e("13px",{lineHeight:"17px",letterSpacing:"0",fontWeight:500})},boxShadow:{raise1:t.raise1,raise2:t.raise2,raise3:t.raise3},borderRadius:{control:r.control,lg:r.lg,md:r.md,sm:r.sm},maxWidth:{"8xl":"1640px"},colors:{grey:a.grey,gray:a.grey,green:a.green,blue:a.blue,red:a.red,orange:a.orange,purple:a.purple,white:"#ffffff",action:{primary:{idle:"var(--action-primary-idle)","on-idle":"var(--action-primary-on-idle)",hover:"var(--action-primary-hover)","on-hover":"var(--action-primary-on-hover)",disabled:"var(--action-primary-disabled)","on-disabled":"var(--action-primary-on-disabled)"},secondary:{idle:"var(--action-secondary-idle)","on-idle":"var(--action-secondary-on-idle)",hover:"var(--action-secondary-hover)","on-hover":"var(--action-secondary-on-hover)",disabled:"var(--action-secondary-disabled)","on-disabled":"var(--action-secondary-on-disabled)"},tertiary:{idle:"var(--action-tertiary-idle)","on-idle":"var(--action-tertiary-on-idle)",hover:"var(--action-tertiary-hover)","on-hover":"var(--action-tertiary-on-hover)",disabled:"var(--action-tertiary-disabled)","on-disabled":"var(--action-tertiary-on-disabled)"},quaternary:{idle:"var(--action-quaternary-idle)","on-idle":"var(--action-quaternary-on-idle)",hover:"var(--action-quaternary-hover)","on-hover":"var(--action-quaternary-on-hover)",disabled:"var(--action-quaternary-disabled)","on-disabled":"var(--action-quaternary-on-disabled)"},destructive:{idle:"var(--action-destructive-idle)","on-idle":"var(--action-destructive-on-idle)",hover:"var(--action-destructive-hover)","on-hover":"var(--action-destructive-on-hover)",disabled:"var(--action-destructive-disabled)","on-disabled":"var(--action-destructive-on-disabled)"}},background:{primary:"var(--background-primary)",secondary:"var(--background-secondary)",tertiary:"var(--background-tertiary)",hover:"var(--background-hover)",selected:"var(--background-selected)",overlay:"var(--background-overlay)"},display:{"on-light":{primary:"var(--display-on-light-primary)",secondary:"var(--display-on-light-secondary)",tertiary:"var(--display-on-light-tertiary)",quaternary:"var(--display-on-light-quaternary)"},"on-dark":{primary:"var(--display-on-dark-primary)",secondary:"var(--display-on-dark-secondary)",tertiary:"var(--display-on-dark-tertiary)",quaternary:"var(--display-on-dark-quaternary)"}},accent:{"on-light":"var(--accent-on-light)","on-dark":"var(--accent-on-dark)","bg-light":"var(--accent-bg-light)","bg-lighter":"var(--accent-bg-lighter)"},divider:{primary:"var(--divider-primary)",secondary:"var(--divider-secondary)"},meta:{green:"var(--meta-green)",onGreen:"var(--meta-on-green)",orange:"var(--meta-orange)",onOrange:"var(--meta-on-orange)",red:"var(--meta-red)",onRed:"var(--meta-on-red)",blue:"var(--meta-blue)",onBlue:"var(--meta-on-blue)",purple:"var(--meta-purple)",onPurple:"var(--meta-on-purple)"},"text-primary":"var(--display-on-light-primary)","text-secondary":"var(--display-on-light-secondary)","text-tertiary":"var(--display-on-light-tertiary)","surface-primary":"var(--background-primary)","surface-secondary":"var(--background-secondary)","surface-hover":"var(--background-secondary)","border-light":"var(--divider-primary)","border-medium":"var(--divider-secondary)"}};exports.blue=d;exports.borderRadius=r;exports.colorScales=a;exports.elevation=t;exports.green=o;exports.grey=n;exports.orange=l;exports.purple=s;exports.red=c;exports.theme=g;exports.white=p;

package/dist/{theme-entry-CxDa1D0_.mjs → theme-entry-tLBc6zGT.mjs}

@@ -53,7 +53,7 @@ const o = {
   700: "#5a3d0d",
   800: "#3d2a09",
   900: "#261a05"
-}, v = {
+}, p = {
   50: "#f6f2f8",
   100: "#e2d9e8",
   200: "#cbbad6",
@@ -64,7 +64,7 @@ const o = {
   700: "#3d2e4a",
   800: "#2a2033",
   900: "#18121c"
-}, p = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: v }, t = {
+}, v = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: p }, t = {
   raise1: "0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",
   raise2: "0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",
   raise3: "0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"
@@ -140,6 +140,10 @@ const o = {
     md: i.md,
     sm: i.sm
   },
+  /** Extends Tailwind’s max-width scale (7xl = 1280px). */
+  maxWidth: {
+    "8xl": "1640px"
+  },
   colors: {
     grey: a.grey,
     gray: a.grey,
@@ -214,10 +218,10 @@ const o = {
       }
     },
     accent: {
-      onLight: "var(--accent-on-light)",
-      onDark: "var(--accent-on-dark)",
-      bgLight: "var(--accent-bg-light)",
-      bgLighter: "var(--accent-bg-lighter)"
+      "on-light": "var(--accent-on-light)",
+      "on-dark": "var(--accent-on-dark)",
+      "bg-light": "var(--accent-bg-light)",
+      "bg-lighter": "var(--accent-bg-lighter)"
     },
     divider: {
       primary: "var(--divider-primary)",
@@ -254,8 +258,8 @@ export {
   t as e,
   o as g,
   s as o,
-  v as p,
+  p,
   l as r,
   g as t,
-  p as w
+  v as w
 };

package/dist/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-D2X3Ptjf.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-Dwr2mV7_.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;

package/dist/theme.esm.js

@@ -1,4 +1,4 @@
-import { t as a, t as m } from "./theme-entry-CxDa1D0_.mjs";
+import { t as a, t as m } from "./theme-entry-tLBc6zGT.mjs";
 export {
   a as tailwindTheme,
   m as theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.3",
+  "version": "2.0.0-dev.30",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -50,7 +50,7 @@
     "release:dev:init": "npx release-it --config .release-it.dev.json major --preRelease=dev",
     "release:dev:init:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init major --preRelease=dev",
     "release:dev": "npx release-it --config .release-it.dev.json --preRelease=dev",
-    "release:dev:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
+    "release:dev:publish": "npm run build && npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
   },
   "repository": {
     "type": "git",
@@ -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/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>
+  );
+};