@a4ui/core 0.31.1 → 0.33.0

package/src/ui/BorderBeam.tsx

@@ -0,0 +1,96 @@
+// BorderBeam — a small gradient light segment that travels continuously
+// around the border of its `position: relative` parent, tracing the box's
+// own edge via CSS `offset-path: rect(...)` with `offset-distance` animated
+// 0% → 100%. Pure CSS: no JS animation engine, no ResizeObserver — the
+// browser resolves the rect()'s `auto` edges against the element's own box,
+// so the path always matches the parent's current size however it resizes.
+// The traveling element is a thin bar (not a full square) so it hugs the
+// edge by itself, without needing a border-only mask trick. Reduced motion
+// swaps the moving beam for a static, non-animated edge glow.
+import { type JSX, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface BorderBeamProps {
+  /** Length of the traveling gradient segment, in px. @default 60 */
+  size?: number
+  /** Full trip duration around the border, in seconds. @default 6 */
+  duration?: number
+  /** Animation start offset, in seconds. @default 0 */
+  delay?: number
+  class?: string
+}
+
+const KEYFRAMES_ID = 'a4ui-border-beam-keyframes'
+const KEYFRAMES = '@keyframes border-beam-travel { to { offset-distance: 100%; } }'
+
+// Injected once, lazily, the first time a <BorderBeam> renders. The repo's
+// CSS doctrine keeps shared @keyframes in src/styles/tokens.css, but this
+// component ships standalone (tree-shakeable, no required stylesheet import)
+// so it carries its own single small <style> tag instead — de-duped by id,
+// so multiple instances on a page still only inject it once.
+function ensureKeyframes(): void {
+  if (typeof document === 'undefined' || document.getElementById(KEYFRAMES_ID)) return
+  const style = document.createElement('style')
+  style.id = KEYFRAMES_ID
+  style.textContent = KEYFRAMES
+  document.head.appendChild(style)
+}
+
+/**
+ * Decorative light segment that travels continuously around the border of
+ * its parent. The parent must be `position: relative` (or similar) — this
+ * renders an absolutely-positioned, `pointer-events-none` layer (`inset-0`,
+ * `rounded-[inherit]`) tracking the parent's own box. Purely cosmetic
+ * (`aria-hidden`); under reduced motion the moving beam is replaced with a
+ * static edge glow instead of animating.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-6">
+ *   <BorderBeam />
+ *   <p>Card content</p>
+ * </div>
+ * ```
+ */
+export function BorderBeam(props: BorderBeamProps): JSX.Element {
+  const size = () => props.size ?? 60
+  const duration = () => props.duration ?? 6
+  const delay = () => props.delay ?? 0
+
+  if (!motionReduced()) ensureKeyframes()
+
+  return (
+    <Show
+      when={!motionReduced()}
+      fallback={
+        <span
+          aria-hidden="true"
+          class={cn(
+            'pointer-events-none absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_hsl(var(--primary)/0.35)]',
+            props.class,
+          )}
+        />
+      }
+    >
+      <span
+        aria-hidden="true"
+        class={cn('pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]', props.class)}
+      >
+        <span
+          class="absolute top-0 left-0 h-[3px] rounded-full"
+          style={{
+            width: `${size()}px`,
+            'offset-path': `rect(0 auto auto 0 round ${size()}px)`,
+            'offset-distance': '0%',
+            background:
+              'linear-gradient(to right, transparent, hsl(var(--primary)), hsl(var(--accent)), transparent)',
+            animation: `border-beam-travel ${duration()}s linear infinite`,
+            'animation-delay': `${delay()}s`,
+          }}
+        />
+      </span>
+    </Show>
+  )
+}

package/src/ui/Callout.tsx

@@ -0,0 +1,66 @@
+// Prose-embed highlight block for docs/guidance content. Distinct from Alert
+// (a dismissible notification banner): Callout sits inline in a body of text —
+// left accent border, tinted background, comfortable padding — and is never
+// dismissed. Tone tokens are shared with Alert so info/success/warning/danger
+// read identically across both components.
+import { CircleCheck, CircleX, Info, TriangleAlert } from 'lucide-solid'
+import type { Component, JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** Semantic tone of a {@link Callout}; drives the accent border, tint, and default icon. */
+export type CalloutTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+
+const TONE: Record<CalloutTone, { wrap: string; icon: string; Icon: Component<{ class?: string }> }> = {
+  info: { wrap: 'border-sky-500 bg-sky-500/10', icon: 'text-sky-500', Icon: Info },
+  success: { wrap: 'border-emerald-500 bg-emerald-500/10', icon: 'text-emerald-500', Icon: CircleCheck },
+  warning: { wrap: 'border-amber-500 bg-amber-500/10', icon: 'text-amber-500', Icon: TriangleAlert },
+  danger: { wrap: 'border-rose-500 bg-rose-500/10', icon: 'text-rose-500', Icon: CircleX },
+  neutral: { wrap: 'border-border bg-muted', icon: 'text-muted-foreground', Icon: Info },
+}
+
+export interface CalloutProps {
+  /** Visual/semantic tone. Defaults to `'info'`. */
+  tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral'
+  /** Optional bold heading shown above the body. */
+  title?: JSX.Element
+  /** Overrides the tone's default icon. */
+  icon?: JSX.Element
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Inline highlighted block for embedding guidance/notes inside prose (docs,
+ * READMEs, long-form content) — a left accent border, a faint tone-tinted
+ * background, and an icon. Unlike {@link Alert} it isn't a dismissible
+ * notification; it's part of the content flow.
+ *
+ * @example
+ * ```tsx
+ * <Callout tone="warning" title="Before you continue">
+ *   This action can't be undone once the migration starts.
+ * </Callout>
+ * ```
+ */
+export function Callout(props: CalloutProps): JSX.Element {
+  const tone = () => TONE[props.tone ?? 'info']
+  return (
+    <div class={cn('flex gap-3 rounded-lg border-l-4 p-4 text-sm text-foreground', tone().wrap, props.class)}>
+      <Show
+        when={props.icon}
+        fallback={<Dynamic component={tone().Icon} class={cn('mt-0.5 h-4 w-4 shrink-0', tone().icon)} />}
+      >
+        {props.icon}
+      </Show>
+      <div class="flex-1">
+        <Show when={props.title}>
+          <p class="font-semibold">{props.title}</p>
+        </Show>
+        <div class="text-muted-foreground">{props.children}</div>
+      </div>
+    </div>
+  )
+}

package/src/ui/Confetti.tsx

@@ -0,0 +1,131 @@
+// Decorative confetti burst: a spawn-then-remove particle idiom (same as
+// Ripple.tsx) driven by the native Web Animations API — each piece is a
+// one-shot element with nothing for a JS animation engine to add. Angle and
+// velocity per piece are derived deterministically from the piece's index
+// (via Math.sin), not Math.random, so a burst is reproducible and doesn't
+// depend on an RNG.
+import { createEffect, on, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface ConfettiProps {
+  /** Bump this (e.g. a counter) to fire a burst. Mount does not count. */
+  trigger?: number
+  /** Number of pieces per burst. @default 80 */
+  count?: number
+  class?: string
+}
+
+const CONFETTI_COLORS = ['hsl(var(--primary))', 'hsl(var(--accent))', 'hsl(var(--foreground))']
+
+/**
+ * Fires one burst of confetti pieces from the bottom-center of `container`,
+ * flying up and outward in a fan, rotating, then falling with gravity and
+ * fading out — each piece removes itself once its animation finishes. Angle,
+ * speed, fall distance and spin are derived deterministically from each
+ * piece's index (Math.sin), so the same `count` always produces the same
+ * fan. `container` should be `position: relative` (or already positioned)
+ * with `overflow: hidden` so pieces don't affect layout. No-op under
+ * {@link motionReduced}. This is the primitive behind {@link Confetti}.
+ *
+ * @example
+ * ```ts
+ * fireConfetti(cardEl, { count: 120 })
+ * ```
+ */
+export function fireConfetti(container: HTMLElement, opts: { count?: number } = {}): void {
+  if (motionReduced()) return
+  const count = opts.count ?? 80
+  const rect = container.getBoundingClientRect()
+  const originX = rect.width / 2
+  const originY = rect.height
+
+  for (let i = 0; i < count; i++) {
+    // Fan the burst across a ~126° arc centered straight up; wobble is a
+    // deterministic pseudo-random 0..1 derived from the index.
+    const spread = Math.PI * 0.7
+    const wobble = Math.sin(i * 12.9898) * 0.5 + 0.5
+    const angle = -Math.PI / 2 + (wobble - 0.5) * spread
+    const speed = 180 + (Math.sin(i * 4.567) * 0.5 + 0.5) * 160
+    const dx = Math.cos(angle) * speed
+    const dy = Math.sin(angle) * speed
+    const fall = 200 + (Math.sin(i * 5.113) * 0.5 + 0.5) * 160
+    const rotation = 240 + (Math.sin(i * 3.377) * 0.5 + 0.5) * 640
+    const duration = 900 + (Math.sin(i * 2.1) * 0.5 + 0.5) * 500
+
+    const el = document.createElement('span')
+    el.setAttribute('aria-hidden', 'true')
+    Object.assign(el.style, {
+      position: 'absolute',
+      left: `${originX}px`,
+      top: `${originY}px`,
+      width: `${5 + (i % 3) * 2}px`,
+      height: `${10 + (i % 4) * 2}px`,
+      borderRadius: '1px',
+      background: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
+      pointerEvents: 'none',
+    })
+    container.appendChild(el)
+
+    const animation = el.animate(
+      [
+        { transform: 'translate(-50%,-50%) translate(0px,0px) rotate(0deg)', opacity: '1' },
+        {
+          transform: `translate(-50%,-50%) translate(${dx * 0.7}px,${dy}px) rotate(${rotation * 0.5}deg)`,
+          opacity: '1',
+          offset: 0.45,
+        },
+        {
+          transform: `translate(-50%,-50%) translate(${dx}px,${dy + fall}px) rotate(${rotation}deg)`,
+          opacity: '0',
+        },
+      ],
+      { duration, easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)' },
+    )
+    const done = (): void => el.remove()
+    animation.finished.then(done).catch(done)
+  }
+}
+
+/**
+ * Absolutely-positioned confetti layer: fires a burst of colored pieces from
+ * the bottom-center whenever `trigger` changes (the initial mount does not
+ * fire one). Purely decorative — `pointer-events-none` and `aria-hidden`.
+ * Place it inside a `position: relative` container; pair with a `count`
+ * prop, or reach for {@link fireConfetti} directly to fire into an
+ * arbitrary element outside Solid's render tree.
+ *
+ * @example
+ * ```tsx
+ * const [bursts, setBursts] = createSignal(0)
+ * return (
+ *   <div class="relative h-64">
+ *     <Confetti trigger={bursts()} count={100} />
+ *     <Button onClick={() => setBursts((n) => n + 1)}>Celebrate</Button>
+ *   </div>
+ * )
+ * ```
+ */
+export function Confetti(props: ConfettiProps): JSX.Element {
+  let containerEl: HTMLDivElement | undefined
+
+  createEffect(
+    on(
+      () => props.trigger,
+      () => {
+        if (!containerEl) return
+        fireConfetti(containerEl, { count: props.count })
+      },
+      { defer: true },
+    ),
+  )
+
+  return (
+    <div
+      ref={containerEl}
+      class={cn('absolute inset-0 overflow-hidden pointer-events-none', props.class)}
+      aria-hidden="true"
+    />
+  )
+}

package/src/ui/CursorTrail.tsx

@@ -0,0 +1,88 @@
+// Decorative cursor trail: same spawn-then-remove particle idiom as
+// Ripple.tsx / Confetti.tsx, driven by the native Web Animations API. The
+// layer itself is pointer-events-none, so the listener lives on the
+// `relative` parent that hosts it.
+import { onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface CursorTrailProps {
+  /** Blob tone. @default 'primary' */
+  color?: 'primary' | 'accent'
+  /** Blob diameter in px. @default 24 */
+  size?: number
+  class?: string
+}
+
+const SPAWN_THROTTLE_MS = 20
+
+/**
+ * Layer that spawns a soft, blurred blob at the cursor position on every
+ * throttled `pointermove` over its parent, scaling down and fading out as
+ * it removes itself — leaving a trail. Must sit inside a `position:
+ * relative` parent (the layer listens on `parentElement`, since it is
+ * itself `pointer-events-none`). Purely decorative — `pointer-events-none`
+ * and `aria-hidden`. No-op under {@link motionReduced}; listeners are
+ * cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative h-48 rounded-lg border">
+ *   <CursorTrail color="accent" size={32} />
+ * </div>
+ * ```
+ */
+export function CursorTrail(props: CursorTrailProps): JSX.Element {
+  let layerEl: HTMLDivElement | undefined
+  let lastSpawn = 0
+
+  const handlePointerMove = (event: PointerEvent): void => {
+    if (motionReduced() || !layerEl) return
+    const now = performance.now()
+    if (now - lastSpawn < SPAWN_THROTTLE_MS) return
+    lastSpawn = now
+
+    const rect = layerEl.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+    const size = props.size ?? 24
+    const tone = props.color === 'accent' ? 'accent' : 'primary'
+
+    const el = document.createElement('span')
+    el.setAttribute('aria-hidden', 'true')
+    Object.assign(el.style, {
+      position: 'absolute',
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${size}px`,
+      height: `${size}px`,
+      borderRadius: '9999px',
+      background: `hsl(var(--${tone}) / 0.35)`,
+      filter: 'blur(6px)',
+      pointerEvents: 'none',
+      transform: 'translate(-50%,-50%) scale(1)',
+    })
+    layerEl.appendChild(el)
+
+    const animation = el.animate(
+      [
+        { transform: 'translate(-50%,-50%) scale(1)', opacity: '1' },
+        { transform: 'translate(-50%,-50%) scale(0.2)', opacity: '0' },
+      ],
+      { duration: 500, easing: 'ease-out' },
+    )
+    const done = (): void => el.remove()
+    animation.finished.then(done).catch(done)
+  }
+
+  onMount(() => {
+    const parent = layerEl?.parentElement
+    parent?.addEventListener('pointermove', handlePointerMove)
+    onCleanup(() => parent?.removeEventListener('pointermove', handlePointerMove))
+  })
+
+  return (
+    <div ref={layerEl} class={cn('absolute inset-0 pointer-events-none', props.class)} aria-hidden="true" />
+  )
+}

package/src/ui/DiffViewer.tsx

@@ -0,0 +1,166 @@
+// Read-only unified-diff / line-diff renderer. Reuses the CodeTabs monospace
+// idiom (rounded border, bg-card, font-mono text-sm) and the Alert/Badge tone
+// tokens: `emerald` for added (their `success` tone) and the `destructive`
+// CSS-var token for removed. No syntax highlighting.
+import { type JSX, Show } from 'solid-js'
+import { createMemo, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single rendered row of a diff. */
+export interface DiffLine {
+  type: 'add' | 'remove' | 'context'
+  content: string
+  /** Line number in the old file. Present for `'remove'` and `'context'` rows. */
+  oldNum?: number
+  /** Line number in the new file. Present for `'add'` and `'context'` rows. */
+  newNum?: number
+}
+
+export interface DiffViewerProps {
+  /** Unified diff text (as produced by `git diff`/`diff -u`). Ignored if `lines` is set. */
+  diff?: string
+  /** Pre-parsed diff rows. Takes precedence over `diff`. */
+  lines?: DiffLine[]
+  /** Header label. If omitted, inferred from the `+++`/`---` headers of `diff`, when present. */
+  filename?: string
+  class?: string
+}
+
+const MARKER: Record<DiffLine['type'], string> = { add: '+', remove: '-', context: ' ' }
+
+const ROW_BG: Record<DiffLine['type'], string> = {
+  add: 'bg-emerald-500/10',
+  remove: 'bg-destructive/10',
+  context: '',
+}
+
+const MARKER_TONE: Record<DiffLine['type'], string> = {
+  add: 'text-emerald-500',
+  remove: 'text-destructive',
+  context: 'text-muted-foreground',
+}
+
+const CONTENT_TONE: Record<DiffLine['type'], string> = {
+  add: 'text-foreground',
+  remove: 'text-foreground',
+  context: 'text-muted-foreground',
+}
+
+const HUNK_HEADER = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/
+
+/** Parses a unified diff string into rows plus an optional inferred filename. */
+function parseUnifiedDiff(diff: string): { lines: DiffLine[]; filename?: string } {
+  const rawLines = diff.split('\n')
+  // Drop the trailing empty element produced when `diff` ends with a newline.
+  if (rawLines.length > 0 && rawLines[rawLines.length - 1] === '') rawLines.pop()
+
+  const lines: DiffLine[] = []
+  let filename: string | undefined
+  let oldNum = 0
+  let newNum = 0
+
+  for (const raw of rawLines) {
+    if (raw.startsWith('+++ ') || raw.startsWith('--- ')) {
+      const path = raw.slice(4).trim()
+      if (raw.startsWith('+++ ') && path !== '/dev/null') filename = path.replace(/^[ab]\//, '')
+      continue
+    }
+    const hunkMatch = HUNK_HEADER.exec(raw)
+    if (hunkMatch) {
+      oldNum = Number(hunkMatch[1])
+      newNum = Number(hunkMatch[2])
+      continue
+    }
+    if (raw.startsWith('\\')) continue // ""
+
+    if (raw.startsWith('+')) {
+      lines.push({ type: 'add', content: raw.slice(1), newNum: newNum++ })
+    } else if (raw.startsWith('-')) {
+      lines.push({ type: 'remove', content: raw.slice(1), oldNum: oldNum++ })
+    } else {
+      lines.push({
+        type: 'context',
+        content: raw.startsWith(' ') ? raw.slice(1) : raw,
+        oldNum: oldNum++,
+        newNum: newNum++,
+      })
+    }
+  }
+
+  return { lines, filename }
+}
+
+/**
+ * Read-only diff block: renders added/removed/context lines with a line-number
+ * gutter and a +/-/space marker. Accepts either a raw unified-diff string
+ * (parsed internally) or pre-parsed {@link DiffLine} rows.
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   filename="src/lib/cn.ts"
+ *   diff={`@@ -1,3 +1,3 @@\n-export const cn = (a) => a\n+export const cn = (a, b) => a + b\n context line`}
+ * />
+ * ```
+ */
+export function DiffViewer(props: DiffViewerProps): JSX.Element {
+  const parsed = createMemo(() =>
+    props.lines ? { lines: props.lines, filename: undefined } : parseUnifiedDiff(props.diff ?? ''),
+  )
+
+  const rows = () => parsed().lines
+  const displayFilename = () => props.filename ?? parsed().filename
+
+  const counts = createMemo(() => {
+    let added = 0
+    let removed = 0
+    for (const line of rows()) {
+      if (line.type === 'add') added++
+      else if (line.type === 'remove') removed++
+    }
+    return { added, removed }
+  })
+
+  const ariaLabel = () => {
+    const { added, removed } = counts()
+    const name = displayFilename()
+    return `Diff${name ? ` for ${name}` : ''}: ${added} added, ${removed} removed`
+  }
+
+  return (
+    <div
+      role="figure"
+      aria-label={ariaLabel()}
+      class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}
+    >
+      <Show when={displayFilename()}>
+        <div class="border-b border-border px-4 py-2 text-sm font-medium text-foreground">
+          {displayFilename()}
+        </div>
+      </Show>
+      <div class="overflow-x-auto">
+        <div class="min-w-max font-mono text-sm">
+          <For each={rows()}>
+            {(line) => (
+              <div class={cn('flex', ROW_BG[line.type])}>
+                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                  {line.oldNum ?? ''}
+                </span>
+                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                  {line.newNum ?? ''}
+                </span>
+                <span class={cn('w-5 shrink-0 select-none py-0.5 text-center', MARKER_TONE[line.type])}>
+                  {MARKER[line.type]}
+                </span>
+                <span class={cn('flex-1 whitespace-pre py-0.5 pr-4', CONTENT_TONE[line.type])}>
+                  {line.content}
+                </span>
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/Dock.tsx

@@ -0,0 +1,124 @@
+// Dock — macOS-style app dock. A horizontal glass pill of icon buttons that
+// magnify toward the cursor (closest item biggest, tapering over a fixed
+// radius), driven by direct transform + CSS transition (scale only, so it
+// stays on the compositor). No-op magnify under reduced motion — icons stay
+// static but remain clickable.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+/** Px radius from the cursor within which items magnify; beyond it, scale is 1×. */
+const FALLOFF_PX = 120
+/** Peak scale applied to the item directly under the cursor. */
+const PEAK_SCALE = 1.6
+
+export interface DockItem {
+  icon: JSX.Element
+  label?: string
+  onClick?: (e: MouseEvent) => void
+  href?: string
+}
+
+export interface DockProps {
+  items: DockItem[]
+  class?: string
+}
+
+/**
+ * macOS-style dock: a glass pill of icon buttons that magnify based on
+ * horizontal distance to the cursor. Scale-only transform (`transform-origin:
+ * bottom`), reset to 1× on pointerleave. Respects `prefers-reduced-motion`
+ * (renders static, still fully clickable/keyboard-focusable).
+ *
+ * @example
+ * ```tsx
+ * import { Home, Search, Settings } from 'lucide-solid'
+ *
+ * <Dock
+ *   items={[
+ *     { icon: <Home size={22} />, label: 'Home', onClick: () => {} },
+ *     { icon: <Search size={22} />, label: 'Search', onClick: () => {} },
+ *     { icon: <Settings size={22} />, label: 'Settings', href: '/settings' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Dock(props: DockProps): JSX.Element {
+  const itemEls: (HTMLElement | undefined)[] = []
+
+  const handlePointerMove = (event: PointerEvent): void => {
+    if (motionReduced()) return
+
+    for (const el of itemEls) {
+      if (!el) continue
+      const rect = el.getBoundingClientRect()
+      const center = rect.left + rect.width / 2
+      const distance = Math.abs(event.clientX - center)
+      const scale = 1 + (PEAK_SCALE - 1) * Math.max(0, 1 - distance / FALLOFF_PX)
+      el.style.transform = `scale(${scale})`
+    }
+  }
+
+  const handlePointerLeave = (): void => {
+    for (const el of itemEls) {
+      if (el) el.style.transform = 'scale(1)'
+    }
+  }
+
+  return (
+    <div
+      class={cn(
+        'inline-flex items-end gap-2 rounded-2xl border border-border bg-card/70 px-3 py-2 backdrop-blur',
+        props.class,
+      )}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+    >
+      <For each={props.items}>
+        {(item, i) => {
+          const shared = {
+            ref: (el: HTMLElement) => {
+              itemEls[i()] = el
+            },
+            class:
+              'group relative inline-flex h-11 w-11 shrink-0 origin-bottom items-center justify-center rounded-xl text-foreground transition-transform duration-150 ease-out will-change-transform hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'aria-label': item.label,
+            onClick: item.onClick,
+          }
+
+          return (
+            <Show
+              when={item.href}
+              fallback={
+                <button type="button" {...shared}>
+                  {item.icon}
+                  <Show when={item.label}>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border border-border bg-card px-2 py-1 text-xs whitespace-nowrap text-card-foreground opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                    >
+                      {item.label}
+                    </span>
+                  </Show>
+                </button>
+              }
+            >
+              <a href={item.href} {...shared}>
+                {item.icon}
+                <Show when={item.label}>
+                  <span
+                    aria-hidden="true"
+                    class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border border-border bg-card px-2 py-1 text-xs whitespace-nowrap text-card-foreground opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                  >
+                    {item.label}
+                  </span>
+                </Show>
+              </a>
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}