Segmented tabs

"use client";

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

type Size = "sm" | "default";
type Shape = "pill" | "rounded";

const ListContext = React.createContext<{ size: Size }>({ size: "default" });

/** Root. Controlled or uncontrolled through radix: value, defaultValue, onValueChange. */
function SegmentedTabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return <TabsPrimitive.Root data-slot="segmented-tabs" className={cn("flex flex-col gap-3", className)} {...props} />;
}

type ListProps = React.ComponentProps<typeof TabsPrimitive.List> & {
  /** Height of the track. sm is 28px, default is 32px. */
  size?: Size;
  /** Fully round or softly rounded corners. */
  shape?: Shape;
};

/**
 * The track. Measures the active trigger and slides one indicator under it.
 * The indicator is a sibling, so triggers stay plain buttons for radix and screen readers.
 */
function SegmentedTabsList({ className, size = "default", shape = "pill", children, ...props }: ListProps) {
  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);
    // data-state flips on the trigger when the value changes; watch it instead of threading value through.
    const mutation = new MutationObserver(measure);
    mutation.observe(list, { attributes: true, subtree: true, attributeFilter: ["data-state"] });
    return () => {
      resize.disconnect();
      mutation.disconnect();
    };
  }, []);

  const radius = shape === "pill" ? "rounded-full" : "rounded-md";

  return (
    <ListContext.Provider value={{ size }}>
      <TabsPrimitive.List
        ref={ref}
        data-slot="segmented-tabs-list"
        data-size={size}
        className={cn(
          "relative isolate inline-flex w-fit max-w-full items-center gap-px overflow-x-auto bg-muted p-0.5 text-foreground/70",
          size === "sm" ? "h-7" : "h-8",
          radius,
          className,
        )}
        {...props}
      >
        {indicator && (
          <span
            aria-hidden="true"
            data-slot="segmented-tabs-indicator"
            className={cn(
              "absolute inset-y-0.5 left-0 -z-10 bg-background shadow-xs transition-[transform,width] duration-150 ease-out motion-reduce:transition-none",
              radius,
            )}
            style={{ width: indicator.width, transform: `translateX(${indicator.x}px)` }}
          />
        )}
        {children}
      </TabsPrimitive.List>
    </ListContext.Provider>
  );
}

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

function SegmentedTabsTrigger({ className, count, children, ...props }: TriggerProps) {
  const { size } = React.useContext(ListContext);
  return (
    <TabsPrimitive.Trigger
      data-slot="segmented-tabs-trigger"
      className={cn(
        "inline-flex h-full shrink-0 items-center justify-center gap-1.5 rounded-full px-3 font-medium whitespace-nowrap transition-colors duration-100 ease-out outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground",
        size === "sm" ? "text-xs" : "text-sm",
        className,
      )}
      {...props}
    >
      {children}
      {count !== undefined && (
        <span className="font-mono text-xs font-normal text-foreground/70" aria-label={`${count} items`}>
          {count}
        </span>
      )}
    </TabsPrimitive.Trigger>
  );
}

function SegmentedTabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="segmented-tabs-content"
      className={cn("outline-none focus-visible:ring-2 focus-visible:ring-ring/50", className)}
      {...props}
    />
  );
}

export { SegmentedTabs, SegmentedTabsList, SegmentedTabsTrigger, SegmentedTabsContent };