"use client"

import * as React from "react"
import { createContext, useContext, useId, useState, useCallback } from "react"
import { Tabs as TabsPrimitive } from "radix-ui"
import { motion, AnimatePresence, LayoutGroup, useReducedMotion } from "motion/react"

import { cn } from "@/registry/lib/utils"

/* ─────────────────────────────────────────────────────────
 * ANIMATION: SLIDING PILL
 *
 * Active indicator slides between triggers via layoutId.
 * Each Tabs instance gets a unique scope so multiple tab
 * groups on the same page don't interfere.
 *
 * Spring: snappy settle, minimal bounce
 * ───────────────────────────────────────────────────────── */

const PILL = {
  spring: { type: "spring" as const, visualDuration: 0.2, bounce: 0.1 },
}

const TabsContext = createContext<{
  scopeId: string
  activeValue: string | undefined
}>({ scopeId: "", activeValue: undefined })

function Tabs({
  className,
  defaultValue,
  value,
  onValueChange,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  const scopeId = useId()
  const [internalValue, setInternalValue] = useState(defaultValue)

  const activeValue = value ?? internalValue

  const handleValueChange = useCallback((newValue: string) => {
    setInternalValue(newValue)
    onValueChange?.(newValue)
  }, [onValueChange])

  return (
    <TabsContext.Provider value={{ scopeId, activeValue }}>
      <LayoutGroup id={scopeId}>
        <TabsPrimitive.Root
          data-slot="tabs"
          className={cn("flex flex-col gap-2", className)}
          value={activeValue}
          onValueChange={handleValueChange}
          {...props}
        />
      </LayoutGroup>
    </TabsContext.Provider>
  )
}

function TabsList({
  className,
  fullWidth = false,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List> & {
  fullWidth?: boolean
}) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "text-muted-foreground inline-flex h-10 items-center justify-center rounded-lg border border-neutral-500/30 p-0.5 mb-3 bg-neutral-50 dark:bg-neutral-900 max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        fullWidth ? "w-full" : "w-fit",
        className
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  children,
  value,
  icon,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
  icon?: React.ReactNode
}) {
  const { scopeId, activeValue } = useContext(TabsContext)
  const isActive = value === activeValue
  const shouldReduceMotion = useReducedMotion()

  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      value={value}
      className={cn(
        "relative data-[state=active]:text-accent text-muted-foreground font-medium transition-colors duration-150 motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-ring-focus focus-visible:outline-ring inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm normal-case tracking-normal whitespace-nowrap focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <AnimatePresence>
        {isActive && (
          <motion.span
            layoutId={`tab-pill-${scopeId}`}
            className="absolute inset-0 rounded-md bg-accent-500/10 dark:bg-accent-500/15"
            transition={shouldReduceMotion ? { duration: 0 } : PILL.spring}
          />
        )}
      </AnimatePresence>
      <span className="relative z-10 inline-flex items-center gap-1.5">
        {icon}
        {children}
      </span>
    </TabsPrimitive.Trigger>
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn(
        "flex-1 outline-none transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none data-[state=inactive]:opacity-0 data-[state=inactive]:translate-x-4 data-[state=active]:opacity-100 data-[state=active]:translate-x-0",
        className
      )}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
Search documentation

Tabs

Installation

Usage

Examples

Default
