Bottom Nav

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6export interface BottomNavItem {
7  key: string
8  label: string
9  icon: React.ReactNode
10  /** Selected-state glyph (usually the filled twin of `icon`); falls back to `icon`. */
11  activeIcon?: React.ReactNode
12  /** Unread count. 0 / undefined renders nothing; anything above 99 renders "99+". */
13  badge?: number
14  /** When set the item renders a real <a> — routing stays with the consumer. */
15  href?: string
16  /** Per-item side effect, fired alongside onValueChange. */
17  onSelect?: () => void
18}
19 
20export interface BottomNavProps extends React.HTMLAttributes<HTMLElement> {
21  items: BottomNavItem[]
22  /** Controlled: key of the active item. */
23  value: string
24  onValueChange?: (key: string) => void
25  /** Text labels for every item, only under the active one, or never (icons keep their aria-label). */
26  showLabels?: "always" | "active" | "never"
27  indicator?: "bar" | "pill" | "none"
28  /** Accessible name of the <nav> landmark. */
29  label?: string
30}
31 
32interface Metrics {
33  left: number
34  width: number
35}
36 
37/**
38 * Mobile tab bar. The indicator is measured from the active item's own box and
39 * moved with a transform, so it tracks any item count / width without the
40 * consumer declaring geometry.
41 */
42export const BottomNav = React.forwardRef<HTMLElement, BottomNavProps>(
43  (
44    {
45      items,
46      value,
47      onValueChange,
48      showLabels = "always",
49      indicator = "bar",
50      label = "Primary",
51      className,
52      ...props
53    },
54    ref,
55  ) => {
56    const rowRef = React.useRef<HTMLDivElement | null>(null)
57    const itemRefs = React.useRef(new Map<string, HTMLElement>())
58    const [metrics, setMetrics] = React.useState<Metrics | null>(null)
59    // no transition on the first frame: place the indicator, then allow gliding from the next
60    // one (otherwise it flies in from 0 at mount)
61    const [glide, setGlide] = React.useState(false)
62 
63    const setItemRef = (key: string) => (node: HTMLElement | null) => {
64      if (node) itemRefs.current.set(key, node)
65      else itemRefs.current.delete(key)
66    }
67 
68    // an inline items literal is a new array every render; joined into a key, unchanged contents
69    // mean the ResizeObserver is not rebuilt.
70    const itemsKey = items.map(item => item.key).join("\n")
71 
72    React.useEffect(() => {
73      if (indicator === "none") return
74      const row = rowRef.current
75      const active = itemRefs.current.get(value)
76      if (!row || !active) {
77// … truncated