"use client"; /** * @author: @dorian_baffier * @description: Smooth Tab * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://clumpui.amardeep.space * @github: https://github.com/kokonut-labs/kokonutui */ import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils"; import type { LucideIcon } from "lucide-react"; interface TabItem { id: string; title: string; icon?: LucideIcon; content?: React.ReactNode; cardContent?: React.ReactNode; color: string; } const WaveformPath = () => ( ); const DEFAULT_TABS: TabItem[] = [ { id: "Models", title: "Models", color: "bg-blue-500 hover:bg-blue-600", cardContent: (

Models

Choose the model you want to use

), }, { id: "MCPs", title: "MCPs", color: "bg-purple-500 hover:bg-purple-600", cardContent: (

MCPs

Choose the MCP you want to use

), }, { id: "Agents", title: "Agents", color: "bg-emerald-500 hover:bg-emerald-600", cardContent: (

Agents

Choose the agent you want to use

), }, { id: "Users", title: "Users", color: "bg-amber-500 hover:bg-amber-600", cardContent: (

Users

Choose the user you want to use

), }, ]; interface SmoothTabProps { items?: TabItem[]; defaultTabId?: string; className?: string; activeColor?: string; onChange?: (tabId: string) => void; } const slideVariants = { enter: (direction: number) => ({ x: direction > 0 ? "100%" : "-100%", opacity: 0, filter: "blur(8px)", scale: 0.95, position: "absolute" as const, }), center: { x: 0, opacity: 1, filter: "blur(0px)", scale: 1, position: "absolute" as const, }, exit: (direction: number) => ({ x: direction < 0 ? "100%" : "-100%", opacity: 0, filter: "blur(8px)", scale: 0.95, position: "absolute" as const, }), }; const transition = { duration: 0.4, ease: [0.32, 0.72, 0, 1], }; export default function SmoothTab({ items = DEFAULT_TABS, defaultTabId = DEFAULT_TABS[0].id, className, activeColor = "bg-[#1F9CFE]", onChange, }: SmoothTabProps) { const [selected, setSelected] = React.useState(defaultTabId); const [direction, setDirection] = React.useState(0); const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 }); // Reference for the selected button const buttonRefs = React.useRef>(new Map()); const containerRef = React.useRef(null); // Update dimensions whenever selected tab changes or on mount React.useLayoutEffect(() => { const updateDimensions = () => { const selectedButton = buttonRefs.current.get(selected); const container = containerRef.current; if (selectedButton && container) { const rect = selectedButton.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); setDimensions({ width: rect.width, left: rect.left - containerRect.left, }); } }; // Initial update requestAnimationFrame(() => { updateDimensions(); }); // Update on resize window.addEventListener("resize", updateDimensions); return () => window.removeEventListener("resize", updateDimensions); }, [selected]); const handleTabClick = (tabId: string) => { const currentIndex = items.findIndex((item) => item.id === selected); const newIndex = items.findIndex((item) => item.id === tabId); setDirection(newIndex > currentIndex ? 1 : -1); setSelected(tabId); onChange?.(tabId); }; const handleKeyDown = ( e: React.KeyboardEvent, tabId: string ) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleTabClick(tabId); } }; const selectedItem = items.find((item) => item.id === selected); return (

{/* Card Content Area */}

{selectedItem?.cardContent}

{/* Bottom Toolbar */}

{/* Sliding Background */}

{items.map((item) => { const isSelected = selected === item.id; return ( { if (el) buttonRefs.current.set(item.id, el); else buttonRefs.current.delete(item.id); }} type="button" role="tab" aria-selected={isSelected} aria-controls={`panel-${item.id}`} id={`tab-${item.id}`} tabIndex={isSelected ? 0 : -1} onClick={() => handleTabClick(item.id)} onKeyDown={(e) => handleKeyDown(e, item.id)} className={cn( "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5", "text-sm font-medium transition-all duration-300", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", "truncate", isSelected ? "text-white" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground" )} > {item.title} ); })}

); }