@lateralus-ai/shipping-ui 2.0.0-dev.13 → 2.0.0-dev.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.13",
+  "version": "2.0.0-dev.15",
   "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",

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -93,6 +93,7 @@ export const CollapsibleNavGroup = ({
               ) : undefined
             }
             menuItems={entryMenuItems}
+            onNavigate={onNavigate}
           />
         ))}
       </div>

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -1,7 +1,13 @@
 import { type ReactNode } from "react";
 import { Tooltip } from "../../primitives";
 import { cn } from "../../utils/cn";
-import { sidebarLinkActive, sidebarLinkIdle, sidebarRowClass, sidebarRowInteractiveHover, sidebarSectionAnchorClass } from "./sidebar-styles";
+import {
+  sidebarLinkActive,
+  sidebarLinkIdle,
+  sidebarRowClass,
+  sidebarRowInteractiveHover,
+  sidebarSectionIconClass,
+} from "./sidebar-styles";
 
 export type SidebarActionProps = {
   label: string;
@@ -23,26 +29,25 @@ export const SidebarAction = ({
   className,
 }: SidebarActionProps) => {
   const row = (
-    <div
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
       className={sidebarRowClass(
         cn(
+          "cursor-pointer text-left",
           active ? sidebarLinkActive : sidebarLinkIdle,
           !active && sidebarRowInteractiveHover,
+          collapsed ? "justify-center" : "gap-2",
           className,
         ),
       )}
       data-active={active}
       data-collapsed={collapsed}
     >
-      <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>
+      {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+      {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
+    </button>
   );
 
   if (!collapsed || !tooltip) return row;

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -3,7 +3,6 @@ import { DropdownMenu, DropdownMenuItem, IconButton } from "../../primitives";
 import { MoreIcon } from "../../icons";
 import { cn } from "../../utils/cn";
 import {
-  sidebarAnchorClass,
   sidebarEntryHover,
   sidebarEntryIdle,
   sidebarEntrySelected,
@@ -66,58 +65,76 @@ 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={sidebarAnchorClass("gap-1")}
+        className="absolute inset-0 z-0 rounded-control"
+        aria-label={label}
         aria-current={state === "selected" ? "true" : undefined}
         onClick={onNavigate}
-      >
-        {icon && <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>}
+      />
+
+      <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 px-1 py-0.5 [&>svg]:size-4">{icon}</span>
+        )}
         <span className="truncate">{label}</span>
-      </a>
+      </div>
 
       {badge && !(showMenu && menuVisible) && (
         <span
-          className={cn("shrink-0", showMenu && !forceMenuVisible && "group-hover/row:hidden")}
+          className={cn(
+            "pointer-events-none relative z-10 shrink-0",
+            showMenu && !forceMenuVisible && "group-hover/row:hidden",
+          )}
         >
           {badge}
         </span>
       )}
 
       {showMenu && (
-        <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 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>
       )}
     </div>
   );

package/src/patterns/Sidebar/SidebarLink.tsx

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