Tabs

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as TabsPrimitive from "@kobalte/core/tabs";
6

7
import { cn } from "~/lib/utils";
8

9
const Tabs = <T extends ValidComponent = "div">(
10
  props: PolymorphicProps<T, TabsPrimitive.TabsRootProps<T>>,
11
) => {
12
  return <TabsPrimitive.Root data-slot="tabs" {...props} />;
13
};
14

15
type TabsListProps<T extends ValidComponent = "div"> =
16
  TabsPrimitive.TabsListProps<T> & {
17
    class?: string | undefined;
18
  };
19

20
const TabsList = <T extends ValidComponent = "div">(
21
  props: PolymorphicProps<T, TabsListProps<T>>,
22
) => {
23
  const [local, others] = splitProps(props as TabsListProps, ["class"]);
24
  return (
25
    <TabsPrimitive.List
26
      data-slot="tabs-list"
27
      class={cn(
28
        "inline-flex h-12 items-center justify-center rounded-base border-2 border-border bg-background p-1 text-foreground",
29
        local.class,
30
      )}
31
      {...others}
32
    />
33
  );
34
};
35

36
type TabsTriggerProps<T extends ValidComponent = "button"> =
37
  TabsPrimitive.TabsTriggerProps<T> & {
38
    class?: string | undefined;
39
  };
40

41
const TabsTrigger = <T extends ValidComponent = "button">(
42
  props: PolymorphicProps<T, TabsTriggerProps<T>>,
43
) => {
44
  const [local, others] = splitProps(props as TabsTriggerProps, ["class"]);
45
  return (
46
    <TabsPrimitive.Trigger
47
      data-slot="tabs-trigger"
48
      class={cn(
49
        "inline-flex items-center justify-center gap-1.5 rounded-base border-2 border-transparent px-2 py-1 text-sm font-heading whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 ui-selected:border-border ui-selected:bg-primary ui-selected:text-primary-foreground",
50
        local.class,
51
      )}
52
      {...others}
53
    />
54
  );
55
};
56

57
type TabsContentProps<T extends ValidComponent = "div"> =
58
  TabsPrimitive.TabsContentProps<T> & {
59
    class?: string | undefined;
60
  };
61

62
const TabsContent = <T extends ValidComponent = "div">(
63
  props: PolymorphicProps<T, TabsContentProps<T>>,
64
) => {
65
  const [local, others] = splitProps(props as TabsContentProps, ["class"]);
66
  return (
67
    <TabsPrimitive.Content
68
      data-slot="tabs-content"
69
      class={cn(
70
        "mt-2 ring-offset-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
71
        local.class,
72
      )}
73
      {...others}
74
    />
75
  );
76
};
77

78
type TabsIndicatorProps<T extends ValidComponent = "div"> =
79
  TabsPrimitive.TabsIndicatorProps<T> & {
80
    class?: string | undefined;
81
  };
82

83
const TabsIndicator = <T extends ValidComponent = "div">(
84
  props: PolymorphicProps<T, TabsIndicatorProps<T>>,
85
) => {
86
  const [local, others] = splitProps(props as TabsIndicatorProps, ["class"]);
87
  return (
88
    <TabsPrimitive.Indicator
89
      data-slot="tabs-indicator"
90
      class={cn(
91
        "duration-250ms absolute transition-all data-[orientation=horizontal]:-bottom-px data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:-right-px data-[orientation=vertical]:w-[2px]",
92
        local.class,
93
      )}
94
      {...others}
95
    />
96
  );
97
};
98

99
export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };