Tabs

1import { cva, type VariantProps } from "class-variance-authority";2import { cn } from "@/lib/utils";3import { Tabs as TabsPrimitive } from "@sprawlify/solid/tabs";4import type { ComponentProps } from "solid-js";5import { splitProps } from "solid-js";67function Tabs(props: ComponentProps<typeof TabsPrimitive.Root>) {8  const [local, others] = splitProps(props, ["class"]);910  return (11    <TabsPrimitive.Root12      data-slot="tabs"13      class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", local.class)}14      {...others}15    />16  );17}1819const tabsListVariants = cva(20  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",21  {22    variants: {23      variant: {24        default: "bg-muted",25        line: "gap-1 bg-transparent",26      },27    },28    defaultVariants: {29      variant: "default",30    },31  },32);3334function TabsList(35  props: ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>,36) {37  const [local, others] = splitProps(props, ["class", "variant"]);38  const variant = () => local.variant ?? "default";3940  return (41    <TabsPrimitive.List42      data-slot="tabs-list"43      data-variant={variant()}44      class={cn(tabsListVariants({ variant: variant(), class: local.class }))}45      {...others}46    />47  );48}4950function TabsTrigger(props: ComponentProps<typeof TabsPrimitive.Trigger>) {51  const [local, others] = splitProps(props, ["class"]);5253  return (54    <TabsPrimitive.Trigger55      data-slot="tabs-trigger"56      class={cn(57        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",58        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent",59        "data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground",60        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100",61        local.class,62      )}63      {...others}64    />65  );66}6768function TabsContent(props: ComponentProps<typeof TabsPrimitive.Content>) {69  const [local, others] = splitProps(props, ["class"]);7071  return (72    <TabsPrimitive.Content73      data-slot="tabs-content"74      class={cn("text-sm flex-1 outline-none", local.class)}75      {...others}76    />77  );78}7980export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };81