Split Button

'use client'

import { useEffect, useRef, useState } from 'react'
import './split-button.css'

export interface SplitAction { id: string; label: string; detail?: string }
export interface SplitButtonProps {
  actions: SplitAction[]
  onAction?: (id: string) => void
  remember?: boolean
  fill?: 'dark' | 'light'
  className?: string
}

/** Primary action plus a menu of variants. */
export function SplitButton({ actions, onAction, remember = true, fill = 'dark', className }: SplitButtonProps) {
  const [def, setDef] = useState(actions[0].id)
  const [open, setOpen] = useState(false)
  const [ran, setRan] = useState('')
  const items = useRef<(HTMLButtonElement | null)[]>([])
  const chev = useRef<HTMLButtonElement>(null)
  const cur = actions.find((a) => a.id === def) ?? actions[0]
  const run = (a: SplitAction) => { setRan(a.label); onAction?.(a.id); if (remember) setDef(a.id) }
  useEffect(() => { if (open) items.current[Math.max(0, actions.findIndex((a) => a.id === def))]?.focus() }, [open, actions, def])
  useEffect(() => { if (!ran) return; const t = setTimeout(() => setRan(''), 1800); return () => clearTimeout(t) }, [ran])
  return (
    <div className={['sd-spb', className].filter(Boolean).join(' ')} data-fill={fill} onKeyDown={(e) => { if (e.key === 'Escape' && open) { setOpen(false); chev.current?.focus() } }}>
      <div className="sd-spb__grp" role="group" aria-label="Merge options">
        <button type="button" className="sd-spb__main" onClick={() => run(cur)}><span key={cur.id}>{cur.label}</span></button>
        <button ref={chev} type="button" className="sd-spb__chev" aria-haspopup="menu" aria-expanded={open} aria-label="More options" onClick={() => setOpen(!open)} onKeyDown={(e) => { if (e.key === 'ArrowDown') { e.preventDefault(); setOpen(true) } }}>
          <svg viewBox="0 0 12 12" aria-hidden><path d="m3 4.5 3 3 3-3" /></svg>
        </button>
      </div>
      {open && (
        <div className="sd-spb__menu" role="menu">
          {actions.map((a, i) => (
            <button
              key={a.id}
              ref={(el) => { items.current[i] = el }}
              type="button"
              role="menuitemradio"
              aria-checked={a.id === def}
              className="sd-spb__it"
              onClick={() => { setOpen(false); run(a); chev.current?.focus() }}
              onKeyDown={(e) => { const d = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0; if (d) { e.preventDefault(); items.current[(i + d + actions.length) % actions.length]?.focus() } }}
            >
              <span>{a.id === def && <svg viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>}</span>
              <span><b>{a.label}</b>{a.detail && <small>{a.detail}</small>}</span>
            </button>
          ))}
        </div>
      )}
      {ran && !open && <div className="sd-spb__done" role="status">{ran}: done</div>}
    </div>
  )
}

.sd-spb { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-spb[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-spb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-spb :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-spb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-spb { position: relative; display: inline-flex; align-self: start; margin-top: 50px; }
.sd-spb__grp { display: inline-flex; border-radius: 12px; background: var(--strong); color: var(--on); }
.sd-spb__main { height: 42px; padding: 0 16px; border-radius: 12px 0 0 12px; color: var(--on) !important; font-weight: 600; font-size: 14px; transition: background-color 150ms; }
.sd-spb__main span { display: inline-block; animation: sd-spb-in 240ms ease; }
@keyframes sd-spb-in { from { opacity: 0; transform: translateY(5px); } }
.sd-spb__chev { display: grid; place-items: center; width: 38px; height: 42px; border-radius: 0 12px 12px 0; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--on) 20%, transparent); color: var(--on) !important; }
.sd-spb__main:hover, .sd-spb__chev:hover { background: color-mix(in srgb, var(--on) 10%, transparent) !important; }
.sd-spb__chev svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms; }
.sd-spb__chev[aria-expanded='true'] svg { transform: rotate(180deg); }
.sd-spb__menu { position: absolute; top: 50px; right: 0; width: 260px; max-width: calc(100vw - 32px); padding: 5px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -18px rgb(0 0 0 / 0.55); transform-origin: top right; animation: sd-spb-pop 180ms cubic-bezier(0.2, 1.2, 0.3, 1); z-index: 4; }
@keyframes sd-spb-pop { from { opacity: 0; transform: scale(0.95); } }
.sd-spb__it { display: grid; grid-template-columns: 18px 1fr; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; outline: 0; }
.sd-spb__it:hover, .sd-spb__it:focus-visible { background: var(--soft) !important; }
.sd-spb__it svg { width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-spb__it b { display: block; font-size: 13.5px; font-weight: 600; }
.sd-spb__it small { font-size: 12px; color: var(--mute); }
.sd-spb__done { position: absolute; top: 52px; left: 0; white-space: nowrap; font-size: 12.5px; color: var(--mute); animation: sd-spb-in 240ms ease; }
@media (prefers-reduced-motion: reduce) { .sd-spb *, .sd-spb *::before, .sd-spb *::after { animation: none !important; transition: none !important; } }