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

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

@@ -1,19 +1,13 @@
 import { ReactNode } from 'react';
-import { EntryProps, EntryState, EntryVariant } from '../../components/Entry';
-/** @deprecated Prefer `EntryVariant`. */
-export type ResultRowVariant = EntryVariant;
-/** @deprecated Prefer `EntryState`. */
-export type ResultRowState = EntryState;
+export type ResultRowVariant = "report" | "chat" | "issue";
+export type ResultRowState = "idle" | "active";
 export type ResultRowProps = {
-    variant?: EntryVariant;
-    state?: EntryState;
+    variant?: ResultRowVariant;
+    state?: ResultRowState;
     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,8 +15,7 @@ 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]";
-/** 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 sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
 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,14 +1,11 @@
 import { ReactNode } from 'react';
-export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-export type BadgeType = "label" | "icon";
+type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+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;
 };
-/**
- * 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;
+export declare const Badge: ({ color, type, children, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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, type BadgeColor, type BadgeType } from './Badge';
+export { Badge, type BadgeProps } from './Badge';
 export { Callout, type CalloutProps } from './Callout';

package/dist/tailwind-theme.d.ts

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

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

@@ -53,7 +53,7 @@ const o = {
   700: "#5a3d0d",
   800: "#3d2a09",
   900: "#261a05"
-}, p = {
+}, v = {
   50: "#f6f2f8",
   100: "#e2d9e8",
   200: "#cbbad6",
@@ -64,7 +64,7 @@ const o = {
   700: "#3d2e4a",
   800: "#2a2033",
   900: "#18121c"
-}, v = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: p }, t = {
+}, p = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: v }, 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,10 +140,6 @@ 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,
@@ -218,10 +214,10 @@ const o = {
       }
     },
     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)"
+      onLight: "var(--accent-on-light)",
+      onDark: "var(--accent-on-dark)",
+      bgLight: "var(--accent-bg-light)",
+      bgLighter: "var(--accent-bg-lighter)"
     },
     divider: {
       primary: "var(--divider-primary)",
@@ -258,8 +254,8 @@ export {
   t as e,
   o as g,
   s as o,
-  p,
+  v as p,
   l as r,
   g as t,
-  v as w
+  p as w
 };

package/dist/theme-entry-D2X3Ptjf.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},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:{onLight:"var(--accent-on-light)",onDark:"var(--accent-on-dark)",bgLight:"var(--accent-bg-light)",bgLighter:"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.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-Dwr2mV7_.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-D2X3Ptjf.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-tLBc6zGT.mjs";
+import { t as a, t as m } from "./theme-entry-CxDa1D0_.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.20",
+  "version": "2.0.0-dev.3",
   "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": "npm run build && npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
+    "release:dev:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
   },
   "repository": {
     "type": "git",

package/src/components/Entry.tsx

@@ -1,138 +1,64 @@
-import {
-  type KeyboardEvent,
-  type ReactNode,
-} from "react";
-import { ChatIcon, IssuesIcon, ReportIcon, StatusIcon } from "../icons";
+import { type ReactNode } from "react";
+import { ChatIcon, IssuesIcon } from "../icons";
 import { cn } from "../utils/cn";
 
-export type EntryVariant = "chat" | "issue" | "report";
-/** @deprecated Prefer `EntryVariant`. */
-export type EntryType = EntryVariant;
-export type EntryState = "idle" | "active";
+export type EntryType = "chat" | "issue";
+export type EntryState = "idle" | "selected";
 
 export type EntryProps = {
-  /** Visual type — drives the default leading icon. */
-  variant?: EntryVariant;
-  /** @deprecated Use `variant`. */
-  type?: EntryVariant;
+  type: EntryType;
   state?: EntryState;
-  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;
+  title: string;
+  subtitle?: string;
+  meta?: ReactNode;
   onClick?: () => void;
   className?: string;
-  /** @deprecated Use `count` or `trailing`. */
-  meta?: ReactNode;
 };
 
-const variantIcons: Record<EntryVariant, ReactNode> = {
-  chat: <ChatIcon className="size-4" />,
-  issue: <StatusIcon className="size-4" />,
-  report: <ReportIcon className="size-4" />,
+const typeIcons: Record<EntryType, ReactNode> = {
+  chat: <ChatIcon size="small" />,
+  issue: <IssuesIcon size="small" />,
 };
 
-/**
- * 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,
-  count,
-  trailing,
-  icon,
+  meta,
   onClick,
   className,
-  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 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>
-          )}
+}: 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>
-
-        {(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>
+    {meta && (
+      <span className="entry-meta shrink-0 text-footnote text-display-on-light-quaternary">
+        {meta}
       </span>
-    </div>
-  );
-};
+    )}
+  </button>
+);