"use client";
import * as React from "react";
import * as T from "@radix-ui/react-tabs";
import { motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const TabsCtx = React.createContext<{ value?: string; id: string }>({ id: "" });

/** Same API as Radix Tabs. Tracks the value so the active pill can slide between triggers. */
export function Tabs({ value, defaultValue, onValueChange, ...p }: React.ComponentProps<typeof T.Root>) {
  const [inner, setInner] = React.useState(defaultValue);
  const current = value ?? inner;
  const id = React.useId();
  return (
    <TabsCtx.Provider value={{ value: current, id }}>
      <T.Root
        value={current}
        onValueChange={(v) => {
          setInner(v);
          onValueChange?.(v);
        }}
        {...p}
      />
    </TabsCtx.Provider>
  );
}
export function TabsList({ className, ...p }: React.ComponentProps<typeof T.List>) {
  // Never wider than its container: on narrow spaces the track scrolls sideways (scrollbar hidden) instead of spilling out.
  return (
    <T.List
      className={cn(
        "inline-flex max-w-full gap-1 overflow-x-auto rounded-full bg-surface-sunken p-1.5 shadow-well [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        className
      )}
      {...p}
    />
  );
}
export function TabsTrigger({ className, value, children, ...p }: React.ComponentProps<typeof T.Trigger>) {
  const ctx = React.useContext(TabsCtx);
  const active = ctx.value === value;
  return (
    <T.Trigger
      value={value}
      className={cn(
        "relative shrink-0 cursor-pointer whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-bold transition-colors duration-200 hover:text-on-surface data-[state=active]:text-on-primary sm:px-4 [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",
        className
      )}
      {...p}
    >
      {active && (
        <motion.span
          layoutId={`${ctx.id}-pill`}
          className="absolute inset-0 rounded-full bg-primary shadow-clay-sm"
          transition={springs.snappy}
        />
      )}
      <span className="relative inline-flex items-center gap-1.5">{children}</span>
    </T.Trigger>
  );
}
export function TabsContent({ className, children, ...p }: React.ComponentProps<typeof T.Content>) {
  return (
    <T.Content className={cn("mt-4 outline-none", className)} {...p}>
      <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={springs.gentle}>
        {children}
      </motion.div>
    </T.Content>
  );
}
Installation
