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

package/src/components/Tabs.tsx

@@ -11,37 +11,26 @@ 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",
-  appearance: "soft",
-});
+const TabsContext = createContext<TabsContextValue>({ type: "tabs" });
 
 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, appearance }}>
+  <TabsContext.Provider value={{ type }}>
     <TabsPrimitive.Root
       className={cn("flex flex-col", className)}
       data-type={type}
-      data-appearance={type === "pills" ? appearance : undefined}
       {...props}
     >
       {children}
@@ -62,7 +51,7 @@ export const TabsList = forwardRef<
       ref={ref}
       className={cn(
         "flex items-center",
-        type === "tabs" && "gap-6 border-b border-divider-primary",
+        type === "tabs" && "gap-1 border-b border-divider-primary",
         type === "pills" && "gap-2",
         className,
       )}
@@ -75,48 +64,53 @@ 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, children, ...props }, ref) => {
-  const { type, appearance } = useContext(TabsContext);
+>(({ className, count, children, ...props }, ref) => {
+  const { type } = useContext(TabsContext);
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center gap-2.5 transition-colors outline-none",
+        "inline-flex items-center justify-center transition-colors outline-none",
         "disabled:pointer-events-none disabled:opacity-50",
         type === "tabs" && [
-          "relative h-12 gap-2 px-0 py-0 text-caption-2 text-display-on-light-secondary",
+          "relative px-3 py-2 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" &&
-          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",
-          ],
+        type === "pills" && [
+          "group 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",
+        ],
         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-secondary",
+            "group-data-[state=active]:text-display-on-light-tertiary",
+          )}
+          aria-label={`Count: ${count}`}
+        >
+          {count > 99 ? "99+" : count}
+        </span>
+      )}
     </TabsPrimitive.Trigger>
   );
 });

package/src/components/index.ts

@@ -15,23 +15,9 @@ export {
   type TabsContentProps,
   type TabsItem,
   type TabsType,
-  type TabsAppearance,
 } from "./Tabs";
 export { Header, type HeaderProps, type HeaderVariant } from "./Header";
-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 { Entry, type EntryProps, type EntryType, type EntryState } from "./Entry";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export {
   Modal,

package/src/index.ts

@@ -19,7 +19,6 @@ export {
   TabsTrigger,
   TabsContent,
   Header,
-  PageHeader,
   Entry,
   EmptyState,
   Modal,
@@ -36,7 +35,6 @@ export {
   PdfViewer,
   ImageViewer,
   DocumentEditor,
-  ScrollableList,
 } from "./components";
 
 export type {
@@ -58,20 +56,11 @@ export type {
   TabsContentProps,
   TabsItem,
   TabsType,
-  TabsAppearance,
   HeaderProps,
   HeaderVariant,
-  PageHeaderProps,
-  PageHeaderCrumb,
-  PageHeaderShellProps,
-  PageHeaderBodyProps,
-  ScrollableListProps,
-  ScrollableListHeaderProps,
-  ScrollableListBodyProps,
   EntryProps,
   EntryType,
   EntryState,
-  EntryVariant,
   EmptyStateProps,
   ModalProps,
   ModalOverlayProps,

package/src/patterns/Search/ResultRow.tsx

@@ -1,28 +1,26 @@
 import { type ReactNode } from "react";
-import {
-  Entry,
-  type EntryProps,
-  type EntryState,
-  type EntryVariant,
-} from "../../components/Entry";
+import { ChatIcon, IssuesIcon, ReportIcon } from "../../icons";
+import { cn } from "../../utils/cn";
 
-/** @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.
- */
+const variantIcons: Record<ResultRowVariant, ReactNode> = {
+  report: <ReportIcon className="size-4" />,
+  chat: <ChatIcon className="size-4" />,
+  issue: <IssuesIcon className="size-4" />,
+};
+
 export const ResultRow = ({
   variant = "report",
   state = "idle",
@@ -31,14 +29,30 @@ export const ResultRow = ({
   onClick,
   className,
 }: ResultRowProps) => (
-  <Entry
-    variant={variant}
-    state={state}
-    title={title}
-    subtitle={subtitle}
+  <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}
     onClick={onClick}
-    className={className}
-  />
+  >
+    <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>
 );
-
-export type { EntryProps };

package/src/patterns/Search/SearchModal.tsx

@@ -13,7 +13,6 @@ import {
   type ModalProps,
 } from "../../components/Modal";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/Tabs";
-import { Badge } from "../../primitives/Badge";
 import { cn } from "../../utils/cn";
 import { ResultRow, type ResultRowProps } from "./ResultRow";
 import { SectionHeader } from "./SectionHeader";
@@ -177,13 +176,8 @@ export const SearchModalFilters = ({
       )}
     >
       {tabs.map((tab) => (
-        <TabsTrigger key={tab.value} value={tab.value}>
+        <TabsTrigger key={tab.value} value={tab.value} count={tab.count}>
           {tab.label}
-          {typeof tab.count === "number" && (
-            <Badge color="blue">
-              {tab.count > 99 ? "99+" : tab.count}
-            </Badge>
-          )}
         </TabsTrigger>
       ))}
     </TabsList>

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -45,6 +45,7 @@ export const CollapsibleNavGroup = ({
       href={href}
       label={label}
       icon={icon}
+      tall
       onNavigate={onNavigate}
       trailing={
         <IconButton
@@ -92,7 +93,6 @@ export const CollapsibleNavGroup = ({
               ) : undefined
             }
             menuItems={entryMenuItems}
-            onNavigate={onNavigate}
           />
         ))}
       </div>

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -1,14 +1,7 @@
 import { type ReactNode } from "react";
 import { Tooltip } from "../../primitives";
 import { cn } from "../../utils/cn";
-import {
-  sidebarLinkActive,
-  sidebarLinkIdle,
-  sidebarRowInteractiveHover,
-  sidebarSectionIconClass,
-  sidebarSectionShell,
-  sidebarSectionShellCollapsed,
-} from "./sidebar-styles";
+import { sidebarLinkActive, sidebarLinkIdle, sidebarRowClass, sidebarRowInteractiveHover, sidebarSectionAnchorClass } from "./sidebar-styles";
 
 export type SidebarActionProps = {
   label: string;
@@ -30,28 +23,26 @@ export const SidebarAction = ({
   className,
 }: SidebarActionProps) => {
   const row = (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label={label}
-      className={cn(
-        collapsed ? sidebarSectionShellCollapsed : sidebarSectionShell,
-        "cursor-pointer text-left",
-        active ? sidebarLinkActive : sidebarLinkIdle,
-        !active && sidebarRowInteractiveHover,
-        !collapsed && "gap-2",
-        className,
+    <div
+      className={sidebarRowClass(
+        cn(
+          active ? sidebarLinkActive : sidebarLinkIdle,
+          !active && sidebarRowInteractiveHover,
+          className,
+        ),
       )}
       data-active={active}
       data-collapsed={collapsed}
     >
-      {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
-      {!collapsed && (
-        <span className="min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]">
-          {label}
-        </span>
-      )}
-    </button>
+      <button
+        type="button"
+        className={sidebarSectionAnchorClass(collapsed ? "justify-center" : undefined)}
+        onClick={onClick}
+      >
+        {icon && <span className="shrink-0 [&>svg]:size-5">{icon}</span>}
+        {!collapsed && <span className="truncate">{label}</span>}
+      </button>
+    </div>
   );
 
   if (!collapsed || !tooltip) return row;

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -3,6 +3,7 @@ import { DropdownMenu, DropdownMenuItem, IconButton } from "../../primitives";
 import { MoreIcon } from "../../icons";
 import { cn } from "../../utils/cn";
 import {
+  sidebarAnchorClass,
   sidebarEntryHover,
   sidebarEntryIdle,
   sidebarEntrySelected,
@@ -65,74 +66,58 @@ export const SidebarEntry = ({
       )}
       data-state={state}
     >
-      {/* Stretch hit target over shell padding (hover was on the shell, link was content-only). */}
       <a
         href={href}
-        className="absolute inset-0 z-0 rounded-control"
-        aria-label={label}
+        className={sidebarAnchorClass("gap-1")}
         aria-current={state === "selected" ? "true" : undefined}
         onClick={onNavigate}
-      />
-
-      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 text-caption-2">
-        {icon && <span className="shrink-0 [&>svg]:size-4">{icon}</span>}
+      >
+        {icon && <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>}
         <span className="truncate">{label}</span>
-      </div>
+      </a>
 
       {badge && !(showMenu && menuVisible) && (
         <span
-          className={cn(
-            "pointer-events-none relative z-10 shrink-0",
-            showMenu && !forceMenuVisible && "group-hover/row:hidden",
-          )}
+          className={cn("shrink-0", showMenu && !forceMenuVisible && "group-hover/row:hidden")}
         >
           {badge}
         </span>
       )}
 
       {showMenu && (
-        <div className="relative z-10 shrink-0">
-          <DropdownMenu
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            align="end"
-            trigger={
-              <IconButton
-                hierarchy="quaternary"
-                size="small"
-                aria-label={`Actions for ${label}`}
-                aria-haspopup="menu"
-                aria-expanded={menuOpen}
-                className={cn(
-                  "size-6 min-h-6 shrink-0 p-1",
-                  sidebarQuaternaryIconButton,
-                  !forceMenuVisible &&
-                    !menuOpen &&
-                    "hidden group-hover/row:inline-flex",
-                  (forceMenuVisible || menuOpen) && "inline-flex",
-                )}
-              >
-                <MoreIcon size="small" />
-              </IconButton>
-            }
-          >
-            {menuItems?.map((item) => (
-              <DropdownMenuItem
-                key={item.id}
-                className={cn(
-                  item.destructive &&
-                    "text-red-500 hover:bg-red-50 hover:text-red-700",
-                )}
-                onSelect={() => item.onSelect()}
-              >
-                {item.icon && (
-                  <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>
-                )}
-                {item.label}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenu>
-        </div>
+        <DropdownMenu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          align="end"
+          trigger={
+            <IconButton
+              hierarchy="quaternary"
+              size="small"
+              aria-label={`Actions for ${label}`}
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              className={cn(
+                "size-6 min-h-6 shrink-0 p-1",
+                sidebarQuaternaryIconButton,
+                !forceMenuVisible && !menuOpen && "hidden group-hover/row:inline-flex",
+                (forceMenuVisible || menuOpen) && "inline-flex",
+              )}
+            >
+              <MoreIcon size="small" />
+            </IconButton>
+          }
+        >
+          {menuItems?.map((item) => (
+            <DropdownMenuItem
+              key={item.id}
+              className={cn(item.destructive && "text-red-500 hover:bg-red-50 hover:text-red-700")}
+              onSelect={() => item.onSelect()}
+            >
+              {item.icon && <span className="shrink-0 [&>svg]:size-4">{item.icon}</span>}
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenu>
       )}
     </div>
   );

package/src/patterns/Sidebar/SidebarLink.tsx

@@ -58,7 +58,6 @@ export const SidebarLink = ({
   const row = collapsed ? (
     <div
       className={cn(
-        "relative",
         sidebarSectionShellCollapsed,
         stateStyles[state],
         state === "idle" && sidebarRowInteractiveHover,
@@ -69,24 +68,24 @@ export const SidebarLink = ({
     >
       <a
         href={href}
-        className="absolute inset-0 z-0 rounded-control"
+        className="flex w-full items-center justify-center"
         aria-current={state === "active" ? "page" : undefined}
         aria-label={label}
         onClick={onNavigate}
-      />
-      <span className="pointer-events-none relative z-10 inline-flex shrink-0 items-center">
-        {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
-        {unread && (
-          <span aria-hidden className={sidebarUnreadOverlay}>
-            <span className={sidebarUnreadDot} />
-          </span>
-        )}
-      </span>
+      >
+        <span className="relative inline-flex shrink-0 items-center">
+          {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+          {unread && (
+            <span aria-hidden className={sidebarUnreadOverlay}>
+              <span className={sidebarUnreadDot} />
+            </span>
+          )}
+        </span>
+      </a>
     </div>
   ) : (
     <div
       className={cn(
-        "relative",
         tall ? sidebarSectionShellTall : sidebarSectionShell,
         stateStyles[state],
         state === "idle" && sidebarRowInteractiveHover,
@@ -95,27 +94,18 @@ export const SidebarLink = ({
       data-state={state}
       data-collapsed={collapsed}
     >
-      <a
-        href={href}
-        className="absolute inset-0 z-0 rounded-control"
-        aria-current={state === "active" ? "page" : undefined}
-        aria-label={label}
-        onClick={onNavigate}
-      />
-      <div
-        className={cn(
-          sidebarSectionContent,
-          "pointer-events-none relative z-10",
-        )}
-      >
-        <span className="flex min-w-0 flex-1 items-center gap-2 truncate text-left">
+      <div className={sidebarSectionContent}>
+        <a
+          href={href}
+          className="flex min-w-0 flex-1 items-center gap-2 truncate text-left"
+          aria-current={state === "active" ? "page" : undefined}
+          onClick={onNavigate}
+        >
           {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
           <span className={sidebarSectionLabelClass}>{label}</span>
           {badge}
-        </span>
-        {trailing != null && (
-          <span className="pointer-events-auto shrink-0">{trailing}</span>
-        )}
+        </a>
+        {trailing}
       </div>
     </div>
   );

package/src/patterns/Sidebar/sidebar-styles.ts

@@ -30,8 +30,7 @@ export const sidebarUnreadOverlay =
 export 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 const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
+export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
 
 export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
 

package/src/primitives/Badge.tsx

@@ -1,40 +1,30 @@
 import { type ReactNode } from "react";
 import { cn } from "../utils/cn";
 
-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;
 };
 
 const colorStyles: Record<BadgeColor, string> = {
-  blue: "bg-meta-blue text-meta-onBlue",
-  green: "bg-meta-green text-meta-onGreen",
-  red: "bg-meta-red text-meta-onRed",
-  orange: "bg-meta-orange text-meta-onOrange",
-  purple: "bg-meta-purple text-meta-onPurple",
+  blue: "bg-meta-blue text-meta-on-blue",
+  green: "bg-meta-green text-meta-on-green",
+  red: "bg-meta-red text-meta-on-red",
+  orange: "bg-meta-orange text-meta-on-orange",
+  purple: "bg-meta-purple text-meta-on-purple",
   grey: "bg-grey-100 text-display-on-light-secondary",
 };
 
-/**
- * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
- */
-export const Badge = ({
-  color,
-  type = "label",
-  children,
-  className,
-}: BadgeProps) => (
+export const Badge = ({ color, type = "label", children, className }: BadgeProps) => (
   <span
     className={cn(
-      "inline-flex shrink-0 items-center justify-center text-footnote-em leading-none",
-      type === "label" && "rounded-full px-1.5 py-0.5",
-      type === "icon" && "size-5 rounded-full [&>svg]:size-3",
+      "inline-flex shrink-0 items-center justify-center text-footnote-em",
+      type === "label" ? "rounded-control px-2 py-0.5" : "size-6 rounded-full",
       colorStyles[color],
       className,
     )}