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

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/patterns/Skeleton/Skeleton.tsx

@@ -1,56 +1,56 @@
-import { cn } from "../../utils/cn";
-
-export type SkeletonVariant = "content" | "search";
-
-export type SkeletonProps = {
-  variant?: SkeletonVariant;
-  className?: string;
-};
-
-const ContentSkeleton = () => (
-  <div className="flex flex-col gap-4 p-4" aria-hidden>
-    <div className="flex items-center gap-3">
-      <div className="size-8 animate-pulse rounded-full bg-grey-200" />
-      <div className="flex flex-1 flex-col gap-2">
-        <div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
-        <div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
-      </div>
-    </div>
-    <div className="flex flex-col gap-2">
-      <div className="h-4 w-full animate-pulse rounded bg-grey-200" />
-      <div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
-      <div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
-    </div>
-    <div className="h-24 animate-pulse rounded-control bg-grey-100" />
-  </div>
-);
-
-/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
-const SearchSkeleton = () => {
-  const widths = [250, 300, 220, 255, 250, 300, 220, 255];
-
-  return (
-    <div className="flex flex-col gap-1.5 p-4" aria-hidden>
-      {widths.map((width, index) => (
-        <div key={index} className="flex items-start gap-2 py-2">
-          <div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
-          <div
-            className="h-3 animate-pulse rounded-md bg-grey-200"
-            style={{ width }}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
-  <div
-    className={cn("rounded-control bg-background-primary", className)}
-    role="status"
-    aria-label="Loading"
-    data-variant={variant}
-  >
-    {variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
-  </div>
-);
+import { cn } from "../../utils/cn";
+
+export type SkeletonVariant = "content" | "search";
+
+export type SkeletonProps = {
+  variant?: SkeletonVariant;
+  className?: string;
+};
+
+const ContentSkeleton = () => (
+  <div className="flex flex-col gap-4 p-4" aria-hidden>
+    <div className="flex items-center gap-3">
+      <div className="size-8 animate-pulse rounded-full bg-grey-200" />
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
+        <div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
+      </div>
+    </div>
+    <div className="flex flex-col gap-2">
+      <div className="h-4 w-full animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
+    </div>
+    <div className="h-24 animate-pulse rounded-control bg-grey-100" />
+  </div>
+);
+
+/** Figma Search loading — 8 rows of icon + bar (no input/pills). */
+const SearchSkeleton = () => {
+  const widths = [250, 300, 220, 255, 250, 300, 220, 255];
+
+  return (
+    <div className="flex flex-col gap-1.5 p-4" aria-hidden>
+      {widths.map((width, index) => (
+        <div key={index} className="flex items-start gap-2 py-2">
+          <div className="size-3 shrink-0 animate-pulse rounded-md bg-grey-200" />
+          <div
+            className="h-3 animate-pulse rounded-md bg-grey-200"
+            style={{ width }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
+  <div
+    className={cn("rounded-control bg-background-primary", className)}
+    role="status"
+    aria-label="Loading"
+    data-variant={variant}
+  >
+    {variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
+  </div>
+);

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,
     )}

package/src/primitives/Button.tsx

@@ -121,8 +121,6 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const resolvedIcon = icon ?? startIcon;
-  const renderedIcon = renderIcon(resolvedIcon);
-  const hasIcon = renderedIcon != null;
   const hasDropdown = Boolean(dropdownOptions?.length);
   const dropdownDisabled = !dropdownOptions?.some((option) => !option.disabled);
   const mainAppearance = getAppearance(disabled, forcedState);
@@ -137,18 +135,11 @@ export const Button = ({
     dropdownAppearance,
     forcedState,
   );
-
-  /** Label-only: centered text. With start icon: gap between icon and label. */
-  const content = (
-    <span
-      className={cn(
-        "flex min-h-6 items-center justify-center",
-        hasIcon && "gap-2",
-      )}
-    >
-      {renderedIcon}
-      <span>{children}</span>
-    </span>
+  const label = (
+    <>
+      {renderIcon(resolvedIcon)}
+      <span className="px-2">{children}</span>
+    </>
   );
 
   if (!hasDropdown) {
@@ -165,7 +156,9 @@ export const Button = ({
         )}
         {...props}
       >
-        {content}
+        <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
+          {label}
+        </span>
       </button>
     );
   }
@@ -182,7 +175,9 @@ export const Button = ({
       )}
       {...props}
     >
-      {content}
+      <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
+        {label}
+      </span>
     </button>
   );
 

package/src/primitives/index.ts

@@ -14,5 +14,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";