Animated Tabs

"use client";

import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { cn } from "@/lib/utils";

// Animated tabs. The indicator (an underline or a pill) springs from tab to
// tab, and a soft highlight follows the pointer across the ones it passes.
// The new panel slides in from the side you moved toward while the old one
// leaves the other way, so the direction of travel is always readable, and
// the panel area eases to the new panel's height instead of jumping.
//
// Follows the tabs pattern: arrows, Home and End move between tabs and show
// each as they go, and only the tab that's showing is a Tab stop.

export type AnimatedTab = {
  value: string;
  label: ReactNode;
  icon?: ReactNode;
  /** The panel shown while this tab is selected. */
  content: ReactNode;
  disabled?: boolean;
};