Split Button

<!-- Primary split button -->
<div class="split-btn" role="group" aria-label="Save options">
  <button class="split-btn-main" type="button">
    Save
  </button>
  <button
    class="split-btn-trigger"
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-label="More save options"
  >
    <svg class="split-btn-arrow" aria-hidden="true" viewBox="0 0 24 24" width="16" height="16">
      <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </button>

  <!-- Dropdown menu (hidden by default) -->
  <div class="split-btn-menu" role="menu" hidden>
    <button class="split-btn-menu-item" role="menuitem">Save as Draft</button>
    <button class="split-btn-menu-item" role="menuitem">Save and Close</button>
    <button class="split-btn-menu-item" role="menuitem">Save as Template</button>
    <hr class="split-btn-menu-divider" role="separator" />
    <button class="split-btn-menu-item split-btn-menu-item--danger" role="menuitem">Discard Changes</button>
  </div>
</div>

<style>
.split-btn {
  display: inline-flex;
  position: relative;
}

.split-btn-main {
  padding: 8px 16px;
  background: var(--color-primary-600);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.15s;
}

.split-btn-main:hover {
  background: var(--color-primary-700);
}

.split-btn-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: var(--color-primary-600);
  color: var(--color-on-primary);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  transition: background-color 0.15s;
}

.split-btn-trigger:hover {
  background: var(--color-primary-800);
}

.split-btn-trigger[aria-expanded="true"] .split-btn-arrow {
  transform: rotate(180deg);
}

.split-btn-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px;
  z-index: 1000;
}

.split-btn-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.split-btn-menu-item:hover,
.split-btn-menu-item:focus {
  background: var(--color-action-hover);
}

.split-btn-menu-item--danger {
  color: var(--color-error-600);
}

.split-btn-menu-divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 4px 0;
}

.split-btn-main:focus-visible,
.split-btn-trigger:focus-visible {
  outline: 2px solid var(--color-primary-300);
  outline-offset: 2px;
  z-index: 1;
}
</style>

import React, { useState, useRef, useEffect, useCallback } from 'react';
import styles from './SplitButton.module.css';
import clsx from 'clsx';

interface MenuItem {
  label: string;
  onClick: () => void;
  icon?: React.ReactNode;
  disabled?: boolean;
  destructive?: boolean;
}

interface SplitButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
  size?: 'sm' | 'md' | 'lg';
  label: string;
  icon?: React.ReactNode;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
  menuItems: MenuItem[];
  menuPlacement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
  dropdownAriaLabel?: string;
  fullWidth?: boolean;
}

export function SplitButton({
  variant = 'primary',
  size = 'md',
  label,
  icon,
  onClick,
  disabled = false,
  loading = false,
  menuItems,
  menuPlacement = 'bottom-end',
  dropdownAriaLabel = 'More options',
  fullWidth = false,
}: SplitButtonProps) {
  const [open, setOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  const closeMenu = useCallback(() => {
    setOpen(false);
    triggerRef.current?.focus();
  }, []);

  useEffect(() => {
    if (!open) return;
    const handleClickOutside = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') closeMenu();
    };
    document.addEventListener('mousedown', handleClickOutside);
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('keydown', handleEscape);
    };
  }, [open, closeMenu]);

  const handleMenuKeyDown = (e: React.KeyboardEvent) => {
    const items = menuRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)');
    if (!items) return;
    const list = Array.from(items) as HTMLElement[];
    const idx = list.indexOf(document.activeElement as HTMLElement);

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      list[(idx + 1) % list.length]?.focus();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      list[(idx - 1 + list.length) % list.length]?.focus();
    } else if (e.key === 'Home') {
      e.preventDefault();
      list[0]?.focus();
    } else if (e.key === 'End') {
      e.preventDefault();
      list[list.length - 1]?.focus();
    }
  };

  return (
    <div
      className={clsx(styles.root, styles[variant], styles[size], {
        [styles.fullWidth]: fullWidth,
      })}
      role="group"
      aria-label={`${label} options`}
    >
      <button
        className={styles.main}
        onClick={onClick}
        disabled={disabled || loading}
        type="button"
      >
        {loading ? (
          <span className={styles.spinner} aria-hidden="true" />
        ) : (
          <>
            {icon && <span className={styles.icon} aria-hidden="true">{icon}</span>}
            {label}
          </>
        )}
      </button>

      <button
        ref={triggerRef}
        className={styles.trigger}
        onClick={() => setOpen(!open)}
        disabled={disabled || loading}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={dropdownAriaLabel}
      >
        <svg className={styles.arrow} viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </svg>
      </button>

      {open && (
        <div
          ref={menuRef}
          className={clsx(styles.menu, styles[menuPlacement])}
          role="menu"
          onKeyDown={handleMenuKeyDown}
        >
          {menuItems.map((item, i) => (
            <button
              key={i}
              className={clsx(styles.menuItem, {
                [styles.destructive]: item.destructive,
              })}
              role="menuitem"
              disabled={item.disabled}
              onClick={() => {
                item.onClick();
                closeMenu();
              }}
            >
              {item.icon && <span className={styles.menuIcon} aria-hidden="true">{item.icon}</span>}
              {item.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}