Orbit Nav

'use client'

import { useRef } from 'react'
import './orbit-nav.css'

export interface OrbitItem {
  id: string
  label: string
  icon: React.ReactNode
  badge?: number
}

export interface OrbitNavProps {
  items: OrbitItem[]
  value: string
  onValueChange: (id: string) => void
  shape?: 'pill' | 'squircle'
  accent?: string
  fill?: 'dark' | 'light'
  label?: string
  className?: string
}

/** An icon tab bar where the active tab grows into a labelled pill. Arrow keys move between tabs. */
export function OrbitNav({ items, value, onValueChange, shape = 'pill', accent = '#ffffff', fill = 'dark', label = 'Main', className }: OrbitNavProps) {
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const idx = Math.max(0, items.findIndex((i) => i.id === value))
  const move = (d: number) => {
    const n = (idx + d + items.length) % items.length
    onValueChange(items[n].id)
    refs.current[n]?.focus()
  }
  return (
    <nav className={['sd-on', className].filter(Boolean).join(' ')} data-fill={fill} data-shape={shape} style={{ '--on-accent': accent } as React.CSSProperties} aria-label={label}>
      <div role="tablist" aria-label={label} className="sd-on__bar">
        {items.map((it, i) => {
          const on = i === idx
          return (
            <button
              key={it.id}
              ref={(el) => {
                refs.current[i] = el
              }}
              type="button"
              role="tab"
              aria-selected={on}
              tabIndex={on ? 0 : -1}
              aria-label={it.badge ? `${it.label}, ${it.badge} new` : it.label}
              className="sd-on__tab"
              onClick={() => onValueChange(it.id)}
              onKeyDown={(e) => {
                if (e.key === 'ArrowRight') (e.preventDefault(), move(1))
                if (e.key === 'ArrowLeft') (e.preventDefault(), move(-1))
              }}
            >
              <span className="sd-on__icon" aria-hidden>
                {it.icon}
                {it.badge ? <b className="sd-on__badge">{it.badge}</b> : null}
              </span>
              <span className="sd-on__label" aria-hidden>
                <span>{it.label}</span>
              </span>
            </button>
          )
        })}
      </div>
    </nav>
  )
}

.sd-on { --bar: #232323; --fg: #e5e5e5; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.08); --on-fg: #0b0b0b; }
.sd-on[data-fill='light'] { --on-fg: #fff; --bar: #fff; --fg: #222; --mute: #777; --line: rgb(0 0 0 / 0.08); }
.sd-on__bar { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--bar); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -18px rgb(0 0 0 / 0.7); }
.sd-on[data-shape='squircle'] .sd-on__bar, .sd-on[data-shape='squircle'] .sd-on__tab { border-radius: 16px; }
.sd-on__tab { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 999px; color: var(--mute); transition: background-color 350ms, color 250ms, padding 450ms cubic-bezier(0.2, 1.2, 0.3, 1); }
.sd-on__tab[aria-selected='true'] { background: var(--on-accent); color: var(--on-fg); padding: 0 18px 0 14px; }
.sd-on__tab:not([aria-selected='true']):hover { color: var(--fg); }
.sd-on__tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-on__icon { position: relative; display: grid; width: 22px; height: 22px; }
.sd-on__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sd-on__badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bar); }
.sd-on__label { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 450ms cubic-bezier(0.2, 1.2, 0.3, 1); }
.sd-on__label > span { overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 600; padding-left: 0; transition: padding 450ms; }
.sd-on__tab[aria-selected='true'] .sd-on__label { grid-template-columns: 1fr; }
.sd-on__tab[aria-selected='true'] .sd-on__label > span { padding-left: 8px; }
@media (prefers-reduced-motion: reduce) { .sd-on * { transition: none !important; } }