Taffy Tabs

'use client'

import { useLayoutEffect, useRef, useState } from 'react'
import './taffy-tabs.css'

export interface TaffyTab {
  id: string
  label: string
  icon?: React.ReactNode
  /** Indicator colour while this tab is active. */
  color?: string
}

export interface TaffyTabsProps {
  tabs: TaffyTab[]
  value?: string
  defaultValue?: string
  onValueChange?: (id: string) => void
  /** Accessible name for the tab list. */
  label?: string
  /** Pull items toward the pointer. */
  magnetic?: boolean
  className?: string
}

/**
 * A tab bar whose indicator stretches toward the new tab — the leading edge
 * moves first and the trailing edge catches up — then settles with a spring.
 */
export function TaffyTabs({
  tabs,
  value,
  defaultValue,
  onValueChange,
  label = 'Sections',
  magnetic = true,
  className,
}: TaffyTabsProps) {
  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.id)
  const active = value ?? internal
  const listRef = useRef<HTMLDivElement>(null)
  const itemRefs = useRef(new Map<string, HTMLButtonElement>())
  const prevIndex = useRef(tabs.findIndex((t) => t.id === active))
  const [edges, setEdges] = useState<{ l: number; r: number; dir: 1 | -1 } | null>(null)

  const index = tabs.findIndex((t) => t.id === active)

  useLayoutEffect(() => {
    const measure = () => {
      const el = itemRefs.current.get(active)
      const list = listRef.current
      if (!el || !list) return
      const l = el.offsetLeft
      const r = list.clientWidth - (el.offsetLeft + el.offsetWidth)
      setEdges({ l, r, dir: index >= prevIndex.current ? 1 : -1 })
      prevIndex.current = index
    }
    measure()
    const ro = new ResizeObserver(measure)
    if (listRef.current) ro.observe(listRef.current)
    return () => ro.disconnect()
  }, [active, index])

  const select = (id: string) => {
    if (value === undefined) setInternal(id)
    onValueChange?.(id)
  }

  const onKeyDown = (e: React.KeyboardEvent) => {
    const keys: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 }
    let next = index
    if (e.key in keys) next = (index + keys[e.key] + tabs.length) % tabs.length
    else if (e.key === 'Home') next = 0
    else if (e.key === 'End') next = tabs.length - 1
    else return
    e.preventDefault()
    select(tabs[next].id)
    itemRefs.current.get(tabs[next].id)?.focus()
  }

  const color = tabs[index]?.color

  return (
    <div
      ref={listRef}
      role="tablist"
      aria-label={label}
      className={['sd-taffy', className].filter(Boolean).join(' ')}
      onKeyDown={onKeyDown}
      style={
        {
          '--taffy-l': edges ? `${edges.l}px` : undefined,
          '--taffy-r': edges ? `${edges.r}px` : undefined,
          '--taffy-color': color,
        } as React.CSSProperties
      }
      data-dir={edges?.dir === -1 ? 'left' : 'right'}
      data-ready={edges ? '' : undefined}
    >
      <span className="sd-taffy__blob" aria-hidden="true" />
      {tabs.map((t) => (
        <button
          key={t.id}
          ref={(el) => {
            if (el) itemRefs.current.set(t.id, el)
            else itemRefs.current.delete(t.id)
          }}
          type="button"
          role="tab"
          aria-selected={t.id === active}
          tabIndex={t.id === active ? 0 : -1}
          className="sd-taffy__tab"
          onClick={() => select(t.id)}
          onPointerMove={
            magnetic
              ? (e) => {
                  const r = e.currentTarget.getBoundingClientRect()
                  const x = (e.clientX - (r.left + r.width / 2)) / r.width
                  const y = (e.clientY - (r.top + r.height / 2)) / r.height
                  e.currentTarget.style.setProperty('--mx', `${x * 6}px`)
                  e.currentTarget.style.setProperty('--my', `${y * 4}px`)
                }
              : undefined
          }
          onPointerLeave={(e) => {
            e.currentTarget.style.removeProperty('--mx')
            e.currentTarget.style.removeProperty('--my')
          }}
        >
          {t.icon && <span className="sd-taffy__icon">{t.icon}</span>}
          <span className="sd-taffy__label">{t.label}</span>
        </button>
      ))}
    </div>
  )
}

/* TaffyTabs — Sundae S—002 */
.sd-taffy {
  --taffy-bg: #fff4e8;
  --taffy-fg: #3b2a1e;
  --taffy-fg-active: #fffaf4;
  --taffy-color: #ff6b3d;
  --taffy-height: 48px;
  --taffy-pad: 5px;
  --taffy-slow: 520ms;
  --taffy-fast: 260ms;

  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: var(--taffy-pad);
  border-radius: 999px;
  background: var(--taffy-bg);
  box-shadow:
    inset 0 0 0 1px rgb(59 42 30 / 0.08),
    0 10px 30px -12px rgb(160 80 30 / 0.35);
  font-family: ui-rounded, 'SF Pro Rounded', ui-sans-serif, system-ui, sans-serif;
  isolation: isolate;
}
:where(.dark) .sd-taffy {
  --taffy-bg: #231a14;
  --taffy-fg: #e9d9c8;
  --taffy-fg-active: #1a120c;
  box-shadow:
    inset 0 0 0 1px rgb(255 230 200 / 0.08),
    0 10px 30px -12px rgb(0 0 0 / 0.6);
}

.sd-taffy__blob {
  position: absolute;
  z-index: -1;
  top: var(--taffy-pad);
  bottom: var(--taffy-pad);
  left: calc(var(--taffy-l, 0px));
  right: calc(var(--taffy-r, 100%));
  border-radius: 999px;
  background: var(--taffy-color);
  box-shadow:
    0 6px 16px -6px color-mix(in oklab, var(--taffy-color) 70%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.35);
  opacity: 0;
  transition:
    background-color 400ms ease,
    box-shadow 400ms ease,
    opacity 200ms ease;
}
.sd-taffy[data-ready] .sd-taffy__blob {
  opacity: 1;
}
/* Leading edge fast, trailing edge slow, both with a little overshoot. */
.sd-taffy[data-ready][data-dir='right'] .sd-taffy__blob {
  transition:
    right var(--taffy-fast) cubic-bezier(0.3, 1.4, 0.6, 1),
    left var(--taffy-slow) cubic-bezier(0.5, 1.35, 0.45, 1),
    background-color 400ms ease,
    box-shadow 400ms ease,
    opacity 200ms ease;
}
.sd-taffy[data-ready][data-dir='left'] .sd-taffy__blob {
  transition:
    left var(--taffy-fast) cubic-bezier(0.3, 1.4, 0.6, 1),
    right var(--taffy-slow) cubic-bezier(0.5, 1.35, 0.45, 1),
    background-color 400ms ease,
    box-shadow 400ms ease,
    opacity 200ms ease;
}

.sd-taffy__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--taffy-height) - var(--taffy-pad) * 2);
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--taffy-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition:
    color 260ms ease,
    transform 360ms cubic-bezier(0.3, 1.5, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}
.sd-taffy__tab:hover:not([aria-selected='true']) {
  color: color-mix(in oklab, var(--taffy-fg) 75%, var(--taffy-color));
}
.sd-taffy__tab[aria-selected='true'] {
  color: var(--taffy-fg-active);
}
.sd-taffy__tab:active {
  transform: translate(var(--mx, 0), var(--my, 0)) scale(0.94);
}
.sd-taffy__tab:focus-visible {
  outline: 2px solid var(--taffy-color);
  outline-offset: 2px;
}
.sd-taffy__icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.sd-taffy__tab[aria-selected='true'] .sd-taffy__icon {
  transform: rotate(-8deg) scale(1.08);
}
.sd-taffy__icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 520px) {
  .sd-taffy__tab {
    padding: 0 12px;
  }
  .sd-taffy__tab:not([aria-selected='true']) .sd-taffy__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-taffy__blob,
  .sd-taffy__tab,
  .sd-taffy__icon {
    transition-duration: 1ms !important;
  }
}