Tabs

1import type { ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as TabsPrimitive from "@kobalte/core/tabs"
6 
7import { cn } from "~/lib/utils"
8 
9const Tabs = TabsPrimitive.Root
10 
11type TabsListProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsListProps<T> & {
12  class?: string | undefined
13}
14 
15const TabsList = <T extends ValidComponent = "div">(
16  props: PolymorphicProps<T, TabsListProps<T>>
17) => {
18  const [local, others] = splitProps(props as TabsListProps, ["class"])
19  return (
20    <TabsPrimitive.List
21      class={cn(
22        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
23        local.class
24      )}
25      {...others}
26    />
27  )
28}
29 
30type TabsTriggerProps<T extends ValidComponent = "button"> = TabsPrimitive.TabsTriggerProps<T> & {
31  class?: string | undefined
32}
33 
34const TabsTrigger = <T extends ValidComponent = "button">(
35  props: PolymorphicProps<T, TabsTriggerProps<T>>
36) => {
37  const [local, others] = splitProps(props as TabsTriggerProps, ["class"])
38  return (
39    <TabsPrimitive.Trigger
40      class={cn(
41        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm",
42        local.class
43      )}
44      {...others}
45    />
46  )
47}
48 
49type TabsContentProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsContentProps<T> & {
50  class?: string | undefined
51}
52 
53const TabsContent = <T extends ValidComponent = "div">(
54  props: PolymorphicProps<T, TabsContentProps<T>>
55) => {
56  const [local, others] = splitProps(props as TabsContentProps, ["class"])
57  return (
58    <TabsPrimitive.Content
59      class={cn(
60        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
61        local.class
62      )}
63      {...others}
64    />
65  )
66}
67 
68type TabsIndicatorProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsIndicatorProps<T> & {
69  class?: string | undefined
70}
71 
72const TabsIndicator = <T extends ValidComponent = "div">(
73  props: PolymorphicProps<T, TabsIndicatorProps<T>>
74) => {
75// … truncated