Underline tabs

"use client";

import * as React from "react";
import { Tabs as TabsPrimitive } from "radix-ui";
import { Tabs, TabsContent } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

/** Root. Controlled or uncontrolled through radix: value, defaultValue, onValueChange. */
function UnderlineTabs({ className, ...props }: React.ComponentProps<typeof Tabs>) {
  return <Tabs data-slot="underline-tabs" className={cn("gap-4", className)} {...props} />;
}

/**
 * The tab row: a hairline underneath and one 2px indicator that slides to the active trigger.
 * The indicator is a sibling, so triggers stay plain buttons for radix and screen readers.
 */
function UnderlineTabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [indicator, setIndicator] = React.useState<{ x: number; width: number } | null>(null);

  React.useEffect(() => {
    const list = ref.current;
    if (!list) return;

    const measure = () => {
      const active = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]');
      if (!active) return setIndicator(null);
      setIndicator({ x: active.offsetLeft, width: active.offsetWidth });
    };

    measure();
    const resize = new ResizeObserver(measure);
    resize.observe(list);
    for (const tab of list.querySelectorAll<HTMLElement>('[role="tab"]')) resize.observe(tab);
    const mutation = new MutationObserver(measure);
    mutation.observe(list, { attributes: true, subtree: true, attributeFilter: ["data-state"] });
    return () => {
      resize.disconnect();
      mutation.disconnect();
    };
  }, []);

  return (
    <TabsPrimitive.List
      ref={ref}
      data-slot="underline-tabs-list"
      data-measured={indicator ? "true" : "false"}
      className={cn(
        "group/underline-tabs-list relative flex w-full items-end overflow-x-auto border-b text-muted-foreground",
        className,
      )}
      {...props}
    >
      {children}
      {indicator && (
        <span
          aria-hidden="true"
          data-slot="underline-tabs-indicator"
          className="absolute bottom-0 left-0 h-0.5 bg-foreground transition-[transform,width] duration-150 ease-out motion-reduce:transition-none"
          style={{ width: indicator.width, transform: `translateX(${indicator.x}px)` }}
        />
      )}
    </TabsPrimitive.List>
  );
}

type TriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger> & {
  /** Optional count in a pill after the label. */
  count?: number | string;
};

function UnderlineTabsTrigger({ className, count, children, ...props }: TriggerProps) {
  return (
    <TabsPrimitive.Trigger
      data-slot="underline-tabs-trigger"
      className={cn(
        "relative inline-flex h-9 shrink-0 items-center gap-1.5 px-1 text-sm font-medium whitespace-nowrap transition-colors duration-100 ease-out outline-none not-last:mr-4 hover:text-foreground focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground",
        // Before the first measurement, the active trigger draws its own underline so the row is never bare.
        "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:opacity-0 group-data-[measured=false]/underline-tabs-list:data-[state=active]:after:opacity-100",
        className,
      )}
      {...props}
    >
      {children}
      {count !== undefined && (
        <span
          className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-muted px-1.5 font-mono text-xs font-normal text-foreground/70 tabular-nums"
          aria-label={`${count} items`}
        >
          {count}
        </span>
      )}
    </TabsPrimitive.Trigger>
  );
}

function UnderlineTabsContent({ className, ...props }: React.ComponentProps<typeof TabsContent>) {
  return (
    <TabsContent
      data-slot="underline-tabs-content"
      className={cn("focus-visible:ring-2 focus-visible:ring-ring/50", className)}
      {...props}
    />
  );
}

export { UnderlineTabs, UnderlineTabsList, UnderlineTabsTrigger, UnderlineTabsContent };