Submit Button

'use client'

import './submit-button.css'

export type SubmitStatus = 'idle' | 'loading' | 'success' | 'error'
export interface SubmitButtonProps {
  status: SubmitStatus
  labels?: Partial<Record<SubmitStatus, string>>
  message?: string
  onClick?: () => void
  fill?: 'dark' | 'light'
  className?: string
}

const DEF: Record<SubmitStatus, string> = { idle: 'Save changes', loading: 'Saving', success: 'Saved', error: 'Try again' }

/** A button that shows async state without changing size. */
export function SubmitButton({ status, labels, message, onClick, fill = 'dark', className }: SubmitButtonProps) {
  const L = { ...DEF, ...labels }
  const widest = Object.values(L).reduce((a, b) => (b.length > a.length ? b : a), '')
  return (
    <div className={['sd-sbm', className].filter(Boolean).join(' ')} data-fill={fill}>
      <button type="submit" className="sd-sbm__b" data-s={status} aria-busy={status === 'loading'} aria-disabled={status === 'loading'} onClick={() => status !== 'loading' && onClick?.()}>
        <span className="sd-sbm__ghost" aria-hidden><span style={{ width: 17 }} />{widest}</span>
        <span data-hide={status !== 'idle' && status !== 'error' ? '' : undefined}>{status === 'error' ? L.error : L.idle}</span>
        <span data-hide={status !== 'loading' ? '' : undefined} aria-hidden={status !== 'loading'}><span className="sd-sbm__spin" /></span>
        <span data-hide={status !== 'success' ? '' : undefined} aria-hidden={status !== 'success'}><svg className="sd-sbm__ok" viewBox="0 0 16 16"><path d="m3.5 8.5 3 3 6-7" /></svg>{L.success}</span>
      </button>
      <span className="sd-sbm__msg" aria-live="polite">{status === 'loading' ? `${L.loading}…` : message ?? ''}</span>
    </div>
  )
}

.sd-sbm { --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-sbm[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-sbm button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-sbm :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-sbm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-sbm { display: grid; justify-items: center; gap: 10px; }
.sd-sbm__b { position: relative; display: inline-grid; place-items: center; height: 46px; padding: 0 22px; border-radius: 12px; background: var(--strong) !important; color: var(--on) !important; font-weight: 600; font-size: 14.5px; transition: transform 140ms, background-color 250ms, color 250ms; }
.sd-sbm__b:active { transform: scale(0.97); }
.sd-sbm__b[data-s='error'] { animation: sd-sbm-shake 400ms; }
.sd-sbm__b[data-s='success'] { background: transparent !important; color: var(--fg) !important; box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-sbm__b > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity 200ms, transform 260ms cubic-bezier(0.3, 1.4, 0.4, 1); }
.sd-sbm__b > [data-hide] { opacity: 0; transform: translateY(6px); }
.sd-sbm__ghost { visibility: hidden; }
.sd-sbm__spin { width: 18px; height: 18px; border-radius: 99px; border: 2px solid currentColor; border-right-color: transparent; animation: sd-sbm-rot 700ms linear infinite; }
@keyframes sd-sbm-rot { to { transform: rotate(360deg); } }
.sd-sbm__ok { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sd-sbm__b[data-s='success'] .sd-sbm__ok path { stroke-dasharray: 16; animation: sd-sbm-draw 380ms 80ms ease both; }
@keyframes sd-sbm-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes sd-sbm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.sd-sbm__msg { min-height: 18px; font-size: 12.5px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sd-sbm *, .sd-sbm *::before, .sd-sbm *::after { animation: none !important; transition: none !important; } }