Sliding Tabs

"use client";

import { Tabs as BaseTabs } from "@base-ui/react/tabs";
import { MotionConfig, motion, type Transition } from "motion/react";
import { createContext, useContext, useId } from "react";

function cx(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const defaultTransition: Transition = { type: "spring", bounce: 0.2, duration: 0.4 };

// Each SlidingTabs instance gets its own layoutId so pills never travel between separate tab groups.
const PillContext = createContext<{ layoutId: string; transition: Transition }>({
  layoutId: "seamless-sliding-tab-pill",
  transition: defaultTransition,
});

export interface SlidingTabsProps extends Omit<BaseTabs.Root.Props, "className"> {
  className?: string;
  /** Motion transition for the sliding pill. Defaults to a soft spring. */
  transition?: Transition;
}

/**
 * Tabs whose active pill slides between tabs with a spring.
 * With reduced motion preferred, the pill moves without animating.
 */
export function SlidingTabs({ className, transition = defaultTransition, ...props }: SlidingTabsProps) {
  const layoutId = `sliding-tab-pill-${useId()}`;

  return (
    <MotionConfig reducedMotion="user">
      <PillContext.Provider value={{ layoutId, transition }}>
        <BaseTabs.Root
          className={cx("flex flex-col gap-4 data-[orientation=vertical]:flex-row", className)}
          {...props}
        />
      </PillContext.Provider>
    </MotionConfig>
  );
}

export interface SlidingTabsListProps extends Omit<BaseTabs.List.Props, "className"> {
  className?: string;
}

/** The track that holds the tabs and the sliding pill. */
export function SlidingTabsList({ className, ...props }: SlidingTabsListProps) {
  return (
    <BaseTabs.List
      className={cx(
        "inline-flex w-fit gap-1 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-900",
        "data-[orientation=vertical]:flex-col",
        className,
      )}
      {...props}
    />
  );
}

export interface SlidingTabsTabProps extends Omit<BaseTabs.Tab.Props, "className" | "render"> {
  className?: string;
}

/** A single tab. Its `value` must match a `SlidingTabsPanel`'s `value`. */
export function SlidingTabsTab({ className, ...props }: SlidingTabsTabProps) {
  const { layoutId, transition } = useContext(PillContext);

  return (
    <BaseTabs.Tab
      className={cx(
        "relative inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md px-3 text-sm font-medium whitespace-nowrap select-none",
        "text-zinc-600 transition-colors duration-150 motion-reduce:transition-none",
        "hover:text-zinc-900 data-active:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 dark:data-active:text-white",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
        "data-disabled:pointer-events-none data-disabled:opacity-50",
        "data-[orientation=vertical]:justify-start [&_svg]:size-4 [&_svg]:shrink-0",
        className,
      )}
      render={(renderProps, state) => (
        <button {...renderProps}>
          {state.active ? (
            <motion.span
              aria-hidden="true"
              layoutId={layoutId}
              transition={transition}
              className="absolute inset-0 rounded-md bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-700 dark:ring-white/10"
            />
          ) : null}
          <span className="relative inline-flex items-center gap-2">{renderProps.children}</span>
        </button>
      )}
      {...props}
    />
  );
}

export interface SlidingTabsPanelProps extends Omit<BaseTabs.Panel.Props, "className"> {
  className?: string;
}

/** Content shown while the tab with the same `value` is active. */
export function SlidingTabsPanel({ className, ...props }: SlidingTabsPanelProps) {
  return (
    <BaseTabs.Panel
      className={cx(
        "rounded-md text-sm text-zinc-700 dark:text-zinc-300",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500",
        className,
      )}
      {...props}
    />
  );
}