@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.10

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -0,0 +1,129 @@
+import { type MouseEvent, type ReactNode, useState } from "react";
+import { DropdownMenu, DropdownMenuItem, IconButton } from "../../primitives";
+import { MoreIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import {
+  sidebarAnchorClass,
+  sidebarEntryHover,
+  sidebarEntryIdle,
+  sidebarEntrySelected,
+  sidebarEntryShell,
+  sidebarQuaternaryIconButton,
+  sidebarRowInteractiveHover,
+} from "./sidebar-styles";
+
+export type SidebarEntryMenuItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  destructive?: boolean;
+  onSelect: () => void;
+};
+
+export type SidebarEntryState = "idle" | "hover" | "selected";
+
+export type SidebarEntryProps = {
+  href: string;
+  label: string;
+  state?: SidebarEntryState;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  menuItems?: SidebarEntryMenuItem[];
+  forceMenuVisible?: boolean;
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+const stateStyles: Record<SidebarEntryState, string> = {
+  idle: sidebarEntryIdle,
+  hover: sidebarEntryHover,
+  selected: sidebarEntrySelected,
+};
+
+export const SidebarEntry = ({
+  href,
+  label,
+  state = "idle",
+  icon,
+  badge,
+  menuItems,
+  forceMenuVisible = false,
+  className,
+  onNavigate,
+}: SidebarEntryProps) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const showMenu = Boolean(menuItems?.length);
+  const menuVisible = forceMenuVisible || menuOpen;
+
+  return (
+    <div
+      className={cn(
+        "group/row relative w-full",
+        sidebarEntryShell,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      data-state={state}
+    >
+      <a
+        href={href}
+        className={sidebarAnchorClass("gap-1")}
+        aria-current={state === "selected" ? "true" : undefined}
+        onClick={onNavigate}
+      >
+        {icon && <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>}
+        <span className="truncate">{label}</span>
+      </a>
+
+      {badge && !(showMenu && menuVisible) && (
+        <span
+          className={cn("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>
+  );
+};
+
+/** @deprecated Use SidebarEntry */
+export const Entry = SidebarEntry;
+export type EntryProps = SidebarEntryProps;
+export type EntryState = SidebarEntryState;

package/src/patterns/Sidebar/SidebarHeading.tsx

@@ -0,0 +1,38 @@
+import { ChevronIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import { sidebarRowInteractiveHover, sidebarSurfaceHover } from "./sidebar-styles";
+
+export type SidebarHeadingProps = {
+  title: string;
+  /** Figma Collapsed=On — section label with trailing chevron */
+  collapsed?: boolean;
+  state?: "idle" | "hover";
+  className?: string;
+};
+
+export const SidebarHeading = ({
+  title,
+  collapsed = false,
+  state = "idle",
+  className,
+}: SidebarHeadingProps) => (
+  <div
+    className={cn(
+      "flex w-full items-center justify-between rounded-control px-2 py-1",
+      state === "hover" && sidebarSurfaceHover,
+      state === "idle" && sidebarRowInteractiveHover,
+      className,
+    )}
+    data-collapsed={collapsed}
+    data-state={state}
+  >
+    <span className="truncate text-caption-2 text-display-on-light-secondary">{title}</span>
+    {collapsed && (
+      <ChevronIcon direction="right" className="size-4 shrink-0 text-display-on-light-primary" />
+    )}
+  </div>
+);
+
+/** @deprecated Use SidebarHeading */
+export const Heading = SidebarHeading;
+export type HeadingProps = SidebarHeadingProps;

package/src/patterns/Sidebar/SidebarLink.tsx

@@ -0,0 +1,125 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { Tooltip } from "../../primitives";
+import { cn } from "../../utils/cn";
+import {
+  sidebarLinkActive,
+  sidebarLinkHover,
+  sidebarLinkIdle,
+  sidebarRowInteractiveHover,
+  sidebarSectionContent,
+  sidebarSectionIconClass,
+  sidebarSectionLabelClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
+  sidebarSectionShellTall,
+  sidebarUnreadDot,
+  sidebarUnreadOverlay,
+} from "./sidebar-styles";
+
+export type SidebarLinkState = "idle" | "hover" | "active";
+
+export type SidebarLinkProps = {
+  href: string;
+  label: string;
+  icon?: ReactNode;
+  state?: SidebarLinkState;
+  collapsed?: boolean;
+  tall?: boolean;
+  badge?: ReactNode;
+  trailing?: ReactNode;
+  tooltip?: string;
+  presentation?: boolean;
+  unread?: boolean;
+  className?: string;
+  onNavigate?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+const stateStyles: Record<SidebarLinkState, string> = {
+  idle: sidebarLinkIdle,
+  hover: sidebarLinkHover,
+  active: sidebarLinkActive,
+};
+
+export const SidebarLink = ({
+  href,
+  label,
+  icon,
+  state = "idle",
+  collapsed = false,
+  tall = false,
+  badge,
+  trailing,
+  tooltip,
+  presentation = false,
+  unread = false,
+  className,
+  onNavigate,
+}: SidebarLinkProps) => {
+  const row = collapsed ? (
+    <div
+      className={cn(
+        sidebarSectionShellCollapsed,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      data-state={state}
+      data-collapsed={collapsed}
+    >
+      <a
+        href={href}
+        className="flex w-full items-center justify-center"
+        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>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        tall ? sidebarSectionShellTall : sidebarSectionShell,
+        stateStyles[state],
+        state === "idle" && sidebarRowInteractiveHover,
+        className,
+      )}
+      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}
+        >
+          {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
+          <span className={sidebarSectionLabelClass}>{label}</span>
+          {badge}
+        </a>
+        {trailing}
+      </div>
+    </div>
+  );
+
+  if (presentation || !collapsed || !tooltip) return row;
+
+  return (
+    <Tooltip content={tooltip ?? label} side="right" className="w-full">
+      {row}
+    </Tooltip>
+  );
+};
+
+/** @deprecated Use SidebarLink */
+export const Section = SidebarLink;
+export type SectionProps = SidebarLinkProps;
+export type SectionState = SidebarLinkState;

package/src/patterns/Sidebar/SidebarShell.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export type SidebarShellProps = {
+  sidebar: ReactNode;
+  children: ReactNode;
+  /** Pixels subtracted from viewport height (e.g. app banner). */
+  bannerOffset?: number;
+  className?: string;
+  mainClassName?: string;
+};
+
+/** Viewport-height app shell: sidebar stays put, main scrolls independently. */
+export const SidebarShell = ({
+  sidebar,
+  children,
+  bannerOffset = 0,
+  className,
+  mainClassName,
+}: SidebarShellProps) => (
+  <div
+    className={cn("flex overflow-hidden bg-background-primary", className)}
+    style={{
+      height: bannerOffset > 0 ? `calc(100dvh - ${bannerOffset}px)` : "100dvh",
+    }}
+  >
+    {sidebar}
+    <main className={cn("min-h-0 min-w-0 flex-1 overflow-auto", mainClassName)}>
+      {children}
+    </main>
+  </div>
+);

package/src/patterns/Sidebar/Switcher.tsx

@@ -0,0 +1,116 @@
+import { Logo } from "../../primitives";
+import { cn } from "../../utils/cn";
+
+export type Chief = "technical" | "compliance";
+
+export type SwitcherProps = {
+  chief: Chief;
+  expanded?: boolean;
+  onChiefChange?: (chief: Chief) => void;
+  className?: string;
+};
+
+const chiefLabels: Record<Chief, string> = {
+  technical: "Technical",
+  compliance: "Compliance",
+};
+
+const SwitcherTab = ({
+  tabChief,
+  active,
+  onSelect,
+}: {
+  tabChief: Chief;
+  active: boolean;
+  onSelect?: (chief: Chief) => void;
+}) => {
+  const tabClassName = cn(
+    "box-border flex h-[34px] flex-1 items-center gap-[2px] rounded-[4px] py-2 pl-[14px] pr-4",
+    active
+      ? "bg-background-primary text-display-on-light-primary shadow-[0_1px_1px_rgba(0,0,0,0.06)]"
+      : "text-display-on-light-quaternary",
+    onSelect && !active && "cursor-pointer hover:text-display-on-light-secondary",
+  );
+
+  const content = (
+    <>
+      <div
+        className={cn(
+          "flex size-[18px] shrink-0 items-center justify-center rounded-full",
+          active && "bg-background-primary",
+        )}
+      >
+        <Logo chief={tabChief} muted={!active} className="size-[18px]" />
+      </div>
+      <span
+        className={cn(
+          "truncate text-[11px] uppercase leading-4 tracking-normal",
+          active ? "text-display-on-light-primary" : "text-display-on-light-quaternary",
+        )}
+      >
+        {chiefLabels[tabChief]}
+      </span>
+    </>
+  );
+
+  if (!onSelect) {
+    return (
+      <div className={tabClassName} data-active={active}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={tabClassName}
+      data-active={active}
+      aria-pressed={active}
+      aria-label={`Switch to ${chiefLabels[tabChief]}`}
+      disabled={active}
+      onClick={() => onSelect(tabChief)}
+    >
+      {content}
+    </button>
+  );
+};
+
+export const Switcher = ({
+  chief,
+  expanded = true,
+  onChiefChange,
+  className,
+}: SwitcherProps) => {
+  if (!expanded) {
+    return (
+      <div
+        className={cn(
+          "flex h-8 w-10 shrink-0 items-center justify-center self-center rounded-control",
+          className,
+        )}
+        data-expanded={expanded}
+        data-chief={chief}
+        aria-label={`Switch chief: ${chiefLabels[chief]}`}
+      >
+        <Logo chief={chief} className="size-6 shrink-0" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "box-border flex h-11 w-full gap-1 rounded-control bg-background-secondary p-[5px] shadow-[inset_0_0_0_1px_theme(colors.divider.primary)]",
+        className,
+      )}
+      data-expanded={expanded}
+      data-chief={chief}
+      role="group"
+      aria-label="Chief switcher"
+    >
+      <SwitcherTab tabChief="technical" active={chief === "technical"} onSelect={onChiefChange} />
+      <SwitcherTab tabChief="compliance" active={chief === "compliance"} onSelect={onChiefChange} />
+    </div>
+  );
+};

package/src/patterns/Sidebar/assets/logo-compliance-mark.png

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance-mask.png

@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask" clip-path="url(#clip0_0_4)">
+<g id="icon-compliance.svg">
+<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
+<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-avatar.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-mark.png

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical.svg

@@ -0,0 +1,16 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/constants.ts

@@ -0,0 +1,2 @@
+export const SIDEBAR_EXPANDED_WIDTH = 280;
+export const SIDEBAR_COLLAPSED_WIDTH = 56;

package/src/patterns/Sidebar/figma-assets.ts

@@ -0,0 +1,4 @@
+import accountAvatar from "./assets/account-avatar.jpg";
+import accountAvatar24 from "./assets/account-avatar-24.jpg";
+
+export { accountAvatar, accountAvatar24 };

package/src/patterns/Sidebar/figma-demo-content.ts

@@ -0,0 +1,30 @@
+export type FigmaActivityIcon = "status" | "statusClosed" | "chat" | "chatPro";
+
+export const FIGMA_ACTIVITY_ENTRIES = [
+  { id: "1", label: "Winch Slipping Under Load", href: "#chat-1", count: 1, icon: "status" as const },
+  { id: "2", label: "Excessive Vibration Propeller Shaft", href: "#chat-2", icon: "chatPro" as const },
+  { id: "3", label: "Winch Slipping Under Load", href: "#chat-3", icon: "chat" as const },
+  { id: "4", label: "Freshwater Pressure Drop Causes", href: "#chat-4", icon: "chat" as const },
+  { id: "5", label: "Excessive Vibration Propeller Shaft", href: "#chat-5", icon: "status" as const },
+  { id: "6", label: "Freshwater Pressure Drop Causes", href: "#chat-6", icon: "statusClosed" as const },
+  { id: "7", label: "Rust Prevention On Deck Fittings", href: "#chat-7", icon: "chatPro" as const },
+  { id: "8", label: "Persistent Engine Room Oil Leak", href: "#chat-8", icon: "chat" as const },
+] as const;
+
+export const FIGMA_SHIP_ENTRIES = [
+  { id: "1", name: "The Coral Explorer", href: "#ship-1", count: 3 },
+  { id: "2", name: "Silver Wave", href: "#ship-2", count: 1 },
+  { id: "3", name: "Ocean Voyager", href: "#ship-3" },
+  { id: "4", name: "Albatross Wind", href: "#ship-4" },
+] as const;
+
+export const FIGMA_ACCOUNT_NAME = "Panos Tsamoudakis";
+
+export const FIGMA_SECTION_LABEL = "Name";
+export const FIGMA_HEADING_LABEL = "Label";
+export const FIGMA_ENTRY_LABEL = "New chat";
+
+export const DEMO_SIDEBAR_ENTRY_MENU_ITEMS = [
+  { id: "example-1", label: "Example one", onSelect: () => undefined },
+  { id: "example-2", label: "Example two", onSelect: () => undefined },
+] as const;

package/src/patterns/Sidebar/figma-sidebar-nav.ts

@@ -0,0 +1,79 @@
+import type { Chief } from "./Switcher";
+
+export type FigmaNavItemId =
+  | "search"
+  | "workflows"
+  | "analytics"
+  | "forms"
+  | "ships"
+  | "defectReports"
+  | "tasks"
+  | "knowledge"
+  | "activity";
+
+export type FigmaCollapsedNavItem = {
+  id: FigmaNavItemId;
+  unread?: boolean;
+};
+
+export type FigmaSidebarNavConfig = {
+  expandedItems: FigmaNavItemId[];
+  collapsedItems: FigmaCollapsedNavItem[];
+};
+
+const technicalExpanded: FigmaNavItemId[] = [
+  "search",
+  "workflows",
+  "analytics",
+  "ships",
+  "defectReports",
+  "knowledge",
+  "activity",
+];
+
+const complianceExpanded: FigmaNavItemId[] = [
+  "search",
+  "workflows",
+  "forms",
+  "ships",
+  "tasks",
+  "knowledge",
+  "analytics",
+  "activity",
+];
+
+const technicalCollapsed: FigmaCollapsedNavItem[] = [
+  { id: "search" },
+  { id: "workflows" },
+  { id: "analytics" },
+  { id: "ships", unread: true },
+  { id: "defectReports" },
+  { id: "activity", unread: true },
+];
+
+const complianceCollapsed: FigmaCollapsedNavItem[] = [
+  { id: "search" },
+  { id: "workflows", unread: true },
+  { id: "ships" },
+  { id: "tasks" },
+  { id: "knowledge" },
+  { id: "analytics" },
+  { id: "activity", unread: true },
+];
+
+export const FIGMA_NAV_LABELS: Record<FigmaNavItemId, string> = {
+  search: "Search",
+  workflows: "Workflows",
+  analytics: "Analytics",
+  forms: "Forms",
+  ships: "Ships",
+  defectReports: "Defect Reports",
+  tasks: "Tasks",
+  knowledge: "Knowledge",
+  activity: "Activity",
+};
+
+export const getFigmaSidebarNav = (chief: Chief): FigmaSidebarNavConfig => ({
+  expandedItems: chief === "compliance" ? complianceExpanded : technicalExpanded,
+  collapsedItems: chief === "compliance" ? complianceCollapsed : technicalCollapsed,
+});

package/src/patterns/Sidebar/index.ts

@@ -0,0 +1,13 @@
+export { Account, type AccountMenuItem, type AccountProps } from "./Account";
+export { ActivityNavGroup, Activity, type ActivityNavGroupProps, type ActivityProps } from "./ActivityNavGroup";
+export { CollapsibleNavGroup, Ships, type CollapsibleNavGroupProps, type Ship, type ShipsProps } from "./CollapsibleNavGroup";
+export { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_EXPANDED_WIDTH } from "./constants";
+export { Entry, SidebarEntry, type EntryProps, type EntryState, type SidebarEntryMenuItem, type SidebarEntryProps, type SidebarEntryState } from "./SidebarEntry";
+export { Heading, SidebarHeading, type HeadingProps, type SidebarHeadingProps } from "./SidebarHeading";
+export { Indicator, type IndicatorProps } from "./Indicator";
+export { NewChat, type NewChatProps } from "./NewChat";
+export { Section, SidebarLink, type SectionProps, type SectionState, type SidebarLinkProps, type SidebarLinkState } from "./SidebarLink";
+export { SidebarAction, type SidebarActionProps } from "./SidebarAction";
+export { Sidebar, type SidebarProps } from "./Sidebar";
+export { SidebarShell, type SidebarShellProps } from "./SidebarShell";
+export { Switcher, type Chief, type SwitcherProps } from "./Switcher";