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

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

@@ -0,0 +1,101 @@
+import { cn } from "../../utils/cn";
+
+/** Figma sidebar surfaces use translucent grey overlays, not solid background-hover tokens. */
+export const sidebarSurfaceHover = "bg-[rgba(38,36,32,0.04)]";
+export const sidebarSurfaceSelected = "bg-[rgba(38,36,32,0.08)]";
+
+/** 8px between top-level sidebar blocks (Figma Top gap). */
+export const sidebarBlockGap = "gap-2";
+
+/** 4px between entries inside a group (Activity, Ships). */
+export const sidebarGroupGap = "gap-1";
+
+/** Section row shell — 36px total (Figma Section symbols). */
+export const sidebarSectionShell =
+  "box-border flex h-9 w-full items-center rounded-control p-2";
+
+/** Taller section row — 40px (New chat, Ships header). */
+export const sidebarSectionShellTall =
+  "box-border flex h-10 w-full items-center rounded-control p-2";
+
+/** Collapsed icon-only section — Figma Section/Collapsed On: w-full, p-2, 16px icon. */
+export const sidebarSectionShellCollapsed =
+  "relative box-border flex w-full flex-col items-center justify-center rounded-control p-2";
+
+/** Figma Indicator overlay — 24×24 anchored top-left of icon content. */
+export const sidebarUnreadOverlay =
+  "pointer-events-none absolute left-0 top-0 size-6";
+
+/** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
+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";
+
+export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
+
+export 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). */
+export const sidebarQuaternaryIconButton =
+  "bg-transparent text-action-quaternary-on-idle hover:bg-[rgba(38,36,32,0.04)] hover:text-action-quaternary-on-hover disabled:bg-transparent disabled:opacity-50";
+
+/** Scrollable nav region — thin thumb flush to the right edge (matches shipping-ai). */
+export const sidebarScrollRegion =
+  "sidebar-scroll flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto";
+
+/** Nav row — grey hover surface (Section, Entry, collapsed + expanded). */
+export const sidebarRowInteractiveHover =
+  "transition-colors hover:bg-[rgba(38,36,32,0.04)] hover:text-display-on-light-primary";
+
+/** @deprecated Use sidebarRowInteractiveHover */
+export const sidebarCollapsedRowHover = sidebarRowInteractiveHover;
+
+/** New chat — primary blue hover (Figma New chat Hover variant). */
+export const sidebarNewChatInteractiveHover =
+  "group/newchat transition-colors hover:bg-action-primary-hover hover:text-action-primary-on-hover";
+
+export const sidebarNewChatIconHover =
+  "group-hover/newchat:text-action-primary-on-hover";
+
+export const sidebarLinkIdle = "text-display-on-light-secondary";
+
+export const sidebarLinkHover =
+  cn(sidebarSurfaceHover, "text-display-on-light-primary");
+
+export const sidebarLinkActive =
+  cn(sidebarSurfaceSelected, "text-display-on-light-primary");
+
+export const sidebarEntryIdle = "text-display-on-light-secondary";
+export const sidebarEntryHover = cn(sidebarSurfaceHover, "text-display-on-light-primary");
+export const sidebarEntrySelected = cn(sidebarSurfaceSelected, "text-display-on-light-primary");
+
+/** Entry row — Figma min-h-[36px] px-[8px] py-[6px]. */
+export const sidebarEntryShell =
+  "box-border flex h-9 w-full items-center gap-1 rounded-control px-2 py-1.5";
+
+export const sidebarRowPadding = "px-2 py-1.5";
+export const sidebarRowMinHeight = "min-h-9";
+export const sidebarRowRadius = "rounded-control";
+
+export const sidebarRowClass = (className?: string) =>
+  cn(
+    "group/row relative flex w-full items-center gap-1",
+    sidebarRowPadding,
+    sidebarRowMinHeight,
+    sidebarRowRadius,
+    className,
+  );
+
+export const sidebarAnchorClass = (className?: string) =>
+  cn(
+    "flex min-w-0 flex-1 items-center gap-2 truncate text-left text-caption-2 transition-colors",
+    className,
+  );
+
+export const sidebarSectionAnchorClass = (className?: string) =>
+  cn(
+    "flex min-w-0 flex-1 items-center gap-2 truncate text-left text-caption-2 transition-colors",
+    className,
+  );

package/src/patterns/Skeleton/Skeleton.tsx

@@ -0,0 +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>
+);

package/src/patterns/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./Skeleton";

package/src/patterns/index.ts

@@ -0,0 +1,5 @@
+export * from "./Sidebar";
+export * from "./Chat";
+export * from "./Modal";
+export * from "./Search";
+export * from "./Skeleton";

package/src/primitives/Avatar.tsx

@@ -0,0 +1,71 @@
+import { cn } from "../utils/cn";
+
+type ChiefType = "technical" | "compliance" | "initials";
+type AvatarSize = 32 | 24 | 18 | 16;
+
+export type AvatarProps = {
+  chief: ChiefType;
+  size?: AvatarSize;
+  initials?: string;
+  className?: string;
+};
+
+const sizeStyles: Record<AvatarSize, string> = {
+  32: "size-8 text-caption-2-em",
+  24: "size-6 text-footnote-em",
+  18: "size-[18px] text-[10px] font-medium leading-none",
+  16: "size-4 text-[9px] font-medium leading-none",
+};
+
+const chiefStyles: Record<ChiefType, string> = {
+  technical: "bg-blue-100 text-blue-700",
+  compliance: "bg-green-100 text-green-700",
+  initials: "bg-grey-200 text-display-on-light-secondary",
+};
+
+const TechnicalIcon = ({ size }: { size: AvatarSize }) => {
+  const iconSize = size >= 24 ? 12 : 8;
+
+  return (
+    <svg width={iconSize} height={iconSize} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path
+        d="M6 1.5v9M3.5 4h5M3.5 8h5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+const ComplianceIcon = ({ size }: { size: AvatarSize }) => {
+  const iconSize = size >= 24 ? 12 : 8;
+
+  return (
+    <svg width={iconSize} height={iconSize} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path
+        d="M3 6l2 2 4-4"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const Avatar = ({ chief, size = 32, initials, className }: AvatarProps) => (
+  <span
+    className={cn(
+      "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+      sizeStyles[size],
+      chiefStyles[chief],
+      className,
+    )}
+    aria-hidden={chief !== "initials"}
+  >
+    {chief === "technical" && <TechnicalIcon size={size} />}
+    {chief === "compliance" && <ComplianceIcon size={size} />}
+    {chief === "initials" && (initials?.slice(0, 2).toUpperCase() ?? "AC")}
+  </span>
+);

package/src/primitives/Badge.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+export 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",
+  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) => (
+  <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",
+      colorStyles[color],
+      className,
+    )}
+  >
+    {children}
+  </span>
+);

package/src/primitives/Button.tsx

@@ -0,0 +1,231 @@
+import {
+  type ButtonHTMLAttributes,
+  type ComponentType,
+  isValidElement,
+  type ReactNode,
+} from "react";
+import { ChevronIcon } from "../icons";
+import type { IconProps } from "../icons";
+import { cn } from "../utils/cn";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+} from "./DropdownMenu";
+import {
+  getButtonAppearanceClasses,
+  getButtonInteractiveClasses,
+  type ButtonAppearance,
+  type ButtonHierarchy,
+} from "./button-styles";
+
+export type ButtonDropdownOption = {
+  label: string;
+  onSelect: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+  icon?: ComponentType<IconProps>;
+};
+
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  hierarchy?: ButtonHierarchy;
+  disabled?: boolean;
+  icon?: ComponentType<IconProps> | ReactNode;
+  startIcon?: ComponentType<IconProps> | ReactNode;
+  dropdownOptions?: ButtonDropdownOption[];
+  dropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  forcedState?: ButtonAppearance;
+  children: ReactNode;
+};
+
+const renderIcon = (icon?: ComponentType<IconProps> | ReactNode) => {
+  if (!icon) return null;
+
+  if (isValidElement(icon)) {
+    return <span className="shrink-0 [&>svg]:size-4">{icon}</span>;
+  }
+
+  if (
+    typeof icon === "string" ||
+    typeof icon === "number" ||
+    typeof icon === "boolean"
+  ) {
+    return <span className="shrink-0 [&>svg]:size-4">{icon}</span>;
+  }
+
+  const Icon = icon as ComponentType<IconProps>;
+  return <Icon size="small" className="shrink-0" />;
+};
+
+const getAppearance = (
+  disabled: boolean,
+  forcedState?: ButtonAppearance,
+): ButtonAppearance => {
+  if (forcedState) return forcedState;
+  if (disabled) return "disabled";
+  return "idle";
+};
+
+const getSegmentClasses = (
+  hierarchy: ButtonHierarchy,
+  appearance: ButtonAppearance,
+  forcedState?: ButtonAppearance,
+) => {
+  if (forcedState) {
+    return getButtonAppearanceClasses(hierarchy, appearance);
+  }
+
+  if (appearance === "disabled") {
+    return getButtonAppearanceClasses(hierarchy, "disabled");
+  }
+
+  if (appearance === "hover") {
+    return getButtonAppearanceClasses(hierarchy, "hover");
+  }
+
+  return getButtonInteractiveClasses(hierarchy, false);
+};
+
+const getCursorClass = (disabled: boolean) =>
+  disabled ? "cursor-not-allowed" : "cursor-pointer";
+
+const withSecondarySplitBorders = (
+  hierarchy: ButtonHierarchy,
+  segment: "main" | "dropdown",
+  classes: string,
+) => {
+  if (hierarchy !== "secondary") return classes;
+
+  return cn(
+    classes,
+    segment === "main" ? "border-r-0" : "border-l-0",
+  );
+};
+
+export const Button = ({
+  hierarchy = "primary",
+  disabled = false,
+  icon,
+  startIcon,
+  dropdownOptions,
+  dropdownOpen,
+  onDropdownOpenChange,
+  forcedState,
+  children,
+  className,
+  type = "button",
+  onClick,
+  ...props
+}: ButtonProps) => {
+  const resolvedIcon = icon ?? startIcon;
+  const hasDropdown = Boolean(dropdownOptions?.length);
+  const dropdownDisabled = !dropdownOptions?.some((option) => !option.disabled);
+  const mainAppearance = getAppearance(disabled, forcedState);
+  const dropdownAppearance = getAppearance(dropdownDisabled, forcedState);
+  const mainClasses = getSegmentClasses(
+    hierarchy,
+    mainAppearance,
+    forcedState,
+  );
+  const dropdownClasses = getSegmentClasses(
+    hierarchy,
+    dropdownAppearance,
+    forcedState,
+  );
+  const label = (
+    <>
+      {renderIcon(resolvedIcon)}
+      <span className="px-2">{children}</span>
+    </>
+  );
+
+  if (!hasDropdown) {
+    return (
+      <button
+        type={type}
+        disabled={disabled}
+        onClick={onClick}
+        className={cn(
+          "inline-flex min-h-10 items-center justify-center rounded-control p-2 text-caption-1 tracking-[0.32px] transition-colors",
+          getCursorClass(disabled),
+          mainClasses,
+          className,
+        )}
+        {...props}
+      >
+        <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
+          {label}
+        </span>
+      </button>
+    );
+  }
+
+  const mainButton = (
+    <button
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "inline-flex min-h-10 items-center justify-center rounded-none rounded-l-control p-2 text-caption-1 tracking-[0.32px] transition-colors",
+        getCursorClass(disabled),
+        withSecondarySplitBorders(hierarchy, "main", mainClasses),
+      )}
+      {...props}
+    >
+      <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
+        {label}
+      </span>
+    </button>
+  );
+
+  const dropdownTrigger = (
+    <button
+      type="button"
+      disabled={dropdownDisabled}
+      aria-label="Open menu"
+      className={cn(
+        "inline-flex min-h-10 shrink-0 items-center justify-center rounded-none rounded-r-control px-1 transition-colors",
+        getCursorClass(dropdownDisabled),
+        withSecondarySplitBorders(hierarchy, "dropdown", dropdownClasses),
+      )}
+    >
+      <ChevronIcon direction="down" size="small" />
+    </button>
+  );
+
+  return (
+    <div
+      className={cn(
+        "inline-flex min-h-10 items-stretch overflow-hidden rounded-control",
+        className,
+      )}
+    >
+      {mainButton}
+      <DropdownMenu
+        open={dropdownOpen}
+        onOpenChange={onDropdownOpenChange}
+        align="end"
+        trigger={dropdownTrigger}
+        contentClassName="min-w-[11rem]"
+      >
+        {dropdownOptions?.map((option) => (
+          <DropdownMenuItem
+            key={option.label}
+            disabled={option.disabled}
+            onSelect={option.onSelect}
+            className={cn(
+              option.destructive &&
+                "text-red-600 hover:bg-red-50 focus:bg-red-50 focus:text-red-600",
+            )}
+          >
+            {option.icon ? renderIcon(option.icon) : null}
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    </div>
+  );
+};

package/src/primitives/Callout.tsx

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type CalloutProps = {
+  children: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+};
+
+export const Callout = ({ children, icon, className }: CalloutProps) => (
+  <div
+    className={cn(
+      "flex items-start gap-2 rounded-control bg-meta-blue px-3 py-2 text-caption-2 text-meta-on-blue",
+      className,
+    )}
+    role="note"
+  >
+    {icon && <span className="shrink-0 pt-0.5 [&>svg]:size-4">{icon}</span>}
+    <span>{children}</span>
+  </div>
+);

package/src/primitives/Count.tsx

@@ -0,0 +1,18 @@
+import { cn } from "../utils/cn";
+
+export type CountProps = {
+  value: number;
+  className?: string;
+};
+
+export const Count = ({ value, className }: CountProps) => (
+  <span
+    className={cn(
+      "inline-flex min-w-5 items-center justify-center rounded-full bg-blue-600 px-1.5 py-0.5 text-footnote-em text-white",
+      className,
+    )}
+    aria-label={`Count: ${value}`}
+  >
+    {value > 99 ? "99+" : value}
+  </span>
+);

package/src/primitives/DropdownMenu.tsx

@@ -0,0 +1,60 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+export type DropdownMenuProps = {
+  trigger: ReactNode;
+  children: ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+
+export const DropdownMenu = ({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  open,
+  onOpenChange,
+  triggerClassName,
+  contentClassName,
+}: DropdownMenuProps) => (
+  <DropdownMenuPrimitive.Root open={open} onOpenChange={onOpenChange} modal={false}>
+    <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        side={side}
+        align={align}
+        sideOffset={4}
+        collisionPadding={8}
+        className={cn(
+          "z-[200] min-w-40 rounded-control border border-divider-primary bg-background-primary p-1 shadow-raise2",
+          contentClassName,
+        )}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  </DropdownMenuPrimitive.Root>
+);
+
+export const DropdownMenuItem = ({
+  className,
+  ...props
+}: DropdownMenuPrimitive.DropdownMenuItemProps) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-caption-1 text-display-on-light-primary outline-none transition-colors hover:bg-grey-100 focus:bg-grey-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const DropdownMenuSeparator = () => (
+  <DropdownMenuPrimitive.Separator className="my-1 h-px bg-divider-primary" />
+);

package/src/primitives/GroupedAvatars.tsx

@@ -0,0 +1,36 @@
+import { Avatar } from "./Avatar";
+import { cn } from "../utils/cn";
+
+type GroupCount = 1 | 2 | 3;
+
+export type GroupedAvatarsProps = {
+  count: GroupCount;
+  className?: string;
+};
+
+const groups: Record<GroupCount, Array<{ chief: "technical" | "compliance" | "initials"; initials?: string }>> = {
+  1: [{ chief: "technical" }],
+  2: [
+    { chief: "technical" },
+    { chief: "compliance" },
+  ],
+  3: [
+    { chief: "technical" },
+    { chief: "compliance" },
+    { chief: "initials", initials: "AC" },
+  ],
+};
+
+export const GroupedAvatars = ({ count, className }: GroupedAvatarsProps) => (
+  <div className={cn("inline-flex items-center", className)}>
+    {groups[count].map((avatar, index) => (
+      <Avatar
+        key={`${avatar.chief}-${index}`}
+        chief={avatar.chief}
+        initials={avatar.initials}
+        size={24}
+        className={cn("ring-2 ring-white", index > 0 && "-ml-2")}
+      />
+    ))}
+  </div>
+);