wip: css/ui work

1 files changed, 74 insertions, 0 deletions

diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
new file mode 100644
index 000000000..5e047a7ca
--- /dev/null
+++ b/packages/ui/src/components/tabs.tsx
@@ -0,0 +1,74 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+
+export interface TabsProps extends ComponentProps<typeof Kobalte> {}
+export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function TabsRoot(props: TabsProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte
+      {...rest}
+      data-component="tabs"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="list"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Trigger
+      {...rest}
+      data-slot="trigger"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Trigger>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="content"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+})