Tabs

import { mergeElementProps, Tabs as TabsPrimitive } from "@shadow-js/primitives";
import type { JSX } from "@shadow-js/web";

export const Tabs = TabsPrimitive;

export function TabsList(props: JSX.IntrinsicElements["div"]) {
  return (
    <TabsPrimitive.List
      {...mergeElementProps(
        { class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground" },
        props,
      )}
    />
  );
}

export function TabsTrigger(props: JSX.IntrinsicElements["button"] & { value: string }) {
  return (
    <TabsPrimitive.Trigger
      {...mergeElementProps(
        {
          class:
            "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
        },
        props,
      )}
      value={props.value}
    />
  );
}

export function TabsContent(props: JSX.IntrinsicElements["div"] & { value: string }) {
  return (
    <TabsPrimitive.Content
      {...mergeElementProps(
        {
          class:
            "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        },
        props,
      )}
      value={props.value}
    />
  );
}