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

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

@@ -1,13 +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>
+<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

@@ -1,17 +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>
+<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

@@ -1,17 +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>
+<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

@@ -1,5 +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>
+<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

@@ -1,16 +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>
+<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/Skeleton/Skeleton.tsx

@@ -1,57 +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>
-);
-
-const SearchSkeleton = () => (
-  <div className="flex flex-col gap-3 p-4" aria-hidden>
-    <div className="h-10 animate-pulse rounded-control bg-grey-200" />
-    <div className="flex gap-2">
-      <div className="h-7 w-16 animate-pulse rounded-full bg-grey-100" />
-      <div className="h-7 w-20 animate-pulse rounded-full bg-grey-100" />
-      <div className="h-7 w-14 animate-pulse rounded-full bg-grey-100" />
-    </div>
-    {Array.from({ length: 4 }).map((_, index) => (
-      <div key={index} className="flex items-center gap-3 py-1">
-        <div className="size-5 animate-pulse rounded bg-grey-200" />
-        <div className="flex flex-1 flex-col gap-1.5">
-          <div className="h-3.5 w-3/4 animate-pulse rounded bg-grey-200" />
-          <div className="h-3 w-1/2 animate-pulse rounded bg-grey-100" />
-        </div>
-      </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,30 +1,40 @@
 import { type ReactNode } from "react";
 import { cn } from "../utils/cn";
 
-type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
-type BadgeType = "label" | "icon";
+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-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",
+  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",
 };
 
-export const Badge = ({ color, type = "label", children, className }: BadgeProps) => (
+/**
+ * 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",
-      type === "label" ? "rounded-control px-2 py-0.5" : "size-6 rounded-full",
+      "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,
     )}

package/src/primitives/Button.tsx

@@ -1,67 +1,231 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+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";
 
-type ButtonHierarchy = "primary" | "secondary" | "tertiary" | "quaternary";
-type ButtonOutcome = "action" | "destructive";
+export type ButtonDropdownOption = {
+  label: string;
+  onSelect: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+  icon?: ComponentType<IconProps>;
+};
 
-export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
   hierarchy?: ButtonHierarchy;
-  outcome?: ButtonOutcome;
   disabled?: boolean;
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
+  icon?: ComponentType<IconProps> | ReactNode;
+  startIcon?: ComponentType<IconProps> | ReactNode;
+  dropdownOptions?: ButtonDropdownOption[];
+  dropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  forcedState?: ButtonAppearance;
   children: ReactNode;
 };
 
-const baseStyles =
-  "inline-flex min-h-10 items-center justify-center gap-2 rounded-control px-2 text-caption-1 transition-colors disabled:cursor-not-allowed";
-
-const actionStyles: Record<ButtonHierarchy, string> = {
-  primary:
-    "bg-action-primary-idle text-action-primary-on-idle hover:bg-action-primary-hover hover:text-action-primary-on-hover disabled:bg-action-primary-disabled disabled:text-action-primary-on-disabled",
-  secondary:
-    "border border-divider-primary bg-action-secondary-idle text-action-secondary-on-idle hover:bg-action-secondary-hover hover:text-action-secondary-on-hover disabled:bg-action-secondary-disabled disabled:text-action-secondary-on-disabled",
-  tertiary:
-    "bg-action-tertiary-idle text-action-tertiary-on-idle hover:bg-action-tertiary-hover hover:text-action-tertiary-on-hover disabled:bg-action-tertiary-disabled disabled:text-action-tertiary-on-disabled",
-  quaternary:
-    "bg-action-quaternary-idle text-action-quaternary-on-idle hover:bg-action-quaternary-hover hover:text-action-quaternary-on-hover disabled:bg-action-quaternary-disabled disabled:text-action-quaternary-on-disabled",
+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 destructiveStyles: Record<ButtonHierarchy, string> = {
-  primary:
-    "bg-action-destructive-idle text-action-destructive-on-idle hover:bg-action-destructive-hover hover:text-action-destructive-on-hover disabled:bg-action-destructive-disabled disabled:text-action-destructive-on-disabled",
-  secondary:
-    "border border-red-300 bg-grey-50 text-red-500 hover:bg-red-50 hover:text-red-700 disabled:bg-grey-50 disabled:text-red-300",
-  tertiary:
-    "bg-white text-red-500 hover:bg-red-50 hover:text-red-700 disabled:bg-white disabled:text-red-300",
-  quaternary:
-    "bg-white text-red-500 hover:bg-grey-100 hover:text-red-700 disabled:bg-white disabled:text-red-300",
+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",
-  outcome = "action",
   disabled = false,
+  icon,
   startIcon,
-  endIcon,
+  dropdownOptions,
+  dropdownOpen,
+  onDropdownOpenChange,
+  forcedState,
   children,
   className,
   type = "button",
+  onClick,
   ...props
 }: ButtonProps) => {
-  const variantStyles =
-    outcome === "destructive" ? destructiveStyles[hierarchy] : actionStyles[hierarchy];
+  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>
+    </>
+  );
 
-  return (
+  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}
-      className={cn(baseStyles, variantStyles, className)}
+      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}
     >
-      {startIcon && <span className="shrink-0 [&>svg]:size-4">{startIcon}</span>}
-      <span>{children}</span>
-      {endIcon && <span className="shrink-0 [&>svg]:size-4">{endIcon}</span>}
+      <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>
+  );
 };