Tabs

1"use client";
2 
3import * as React from "react";
4import * as TabsPrimitive from "@radix-ui/react-tabs";
5 
6import { cn } from "@/lib/utils";
7import { floatingSurfaceVariants, type FloatingSurfaceProps } from "@/components/ui/recipes";
8 
9type TabsVariant = "line" | "soft" | "glass";
10const TabsStyleContext = React.createContext<{ variant: TabsVariant }>({ variant: "line" });
11 
12const Tabs = TabsPrimitive.Root;
13 
14const TabsList = React.forwardRef<
15  React.ElementRef<typeof TabsPrimitive.List>,
16  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
17    variant?: TabsVariant;
18    radius?: "none" | "sm" | "md" | "lg" | "full";
19  }
20>(({ className, variant = "line", radius = "lg", children, ...props }, forwardedRef) => {
21  const listRef = React.useRef<React.ElementRef<typeof TabsPrimitive.List>>(null);
22  const [indicator, setIndicator] = React.useState({ left: 0, width: 0, visible: false });
23 
24  React.useImperativeHandle(
25    forwardedRef,
26    () => listRef.current as React.ElementRef<typeof TabsPrimitive.List>,
27  );
28 
29  React.useLayoutEffect(() => {
30    const list = listRef.current;
31    if (!list || variant !== "line") return;
32 
33    const update = () => {
34      const active = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]');
35      if (!active) {
36        setIndicator((current) => ({ ...current, visible: false }));
37        return;
38      }
39      setIndicator({ left: active.offsetLeft, width: active.offsetWidth, visible: true });
40    };
41 
42    update();
43    const mutationObserver = new MutationObserver(update);
44    mutationObserver.observe(list, {
45      attributes: true,
46      subtree: true,
47      attributeFilter: ["data-state"],
48    });
49    const resizeObserver = new ResizeObserver(update);
50    resizeObserver.observe(list);
51    list
52      .querySelectorAll<HTMLElement>('[role="tab"]')
53      .forEach((tab) => resizeObserver.observe(tab));
54 
55    return () => {
56      mutationObserver.disconnect();
57      resizeObserver.disconnect();
58    };
59  }, [variant, children]);
60 
61  return (
62    <TabsStyleContext.Provider value={{ variant }}>
63      <TabsPrimitive.List
64        ref={listRef}
65        className={cn(
66          "relative inline-flex min-h-10 max-w-full items-center overflow-x-auto overflow-y-clip p-1 text-muted-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
67          "transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)]",
68// … truncated