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

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/package.json

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

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -45,7 +45,6 @@ export const CollapsibleNavGroup = ({
       href={href}
       label={label}
       icon={icon}
-      tall
       onNavigate={onNavigate}
       trailing={
         <IconButton

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -4,9 +4,10 @@ import { cn } from "../../utils/cn";
 import {
   sidebarLinkActive,
   sidebarLinkIdle,
-  sidebarRowClass,
   sidebarRowInteractiveHover,
   sidebarSectionIconClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
 } from "./sidebar-styles";
 
 export type SidebarActionProps = {
@@ -33,20 +34,23 @@ export const SidebarAction = ({
       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,
-        ),
+      className={cn(
+        collapsed ? sidebarSectionShellCollapsed : sidebarSectionShell,
+        "cursor-pointer text-left",
+        active ? sidebarLinkActive : sidebarLinkIdle,
+        !active && sidebarRowInteractiveHover,
+        !collapsed && "gap-2",
+        className,
       )}
       data-active={active}
       data-collapsed={collapsed}
     >
       {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
-      {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
+      {!collapsed && (
+        <span className="min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]">
+          {label}
+        </span>
+      )}
     </button>
   );
 

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -75,9 +75,7 @@ export const SidebarEntry = ({
       />
 
       <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>
-        )}
+        {icon && <span className="shrink-0 [&>svg]:size-4">{icon}</span>}
         <span className="truncate">{label}</span>
       </div>
 

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

@@ -30,7 +30,8 @@ export const sidebarUnreadOverlay =
 export const sidebarUnreadDot =
   "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
 
-export 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 const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
 
 export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";