wip: css/ui work

packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./button"
 export * from "./icon"
 export * from "./select"
+export * from "./tabs"

packages/ui/src/components/select.tsx

@@ -79,11 +79,17 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
           }}
         </Kobalte.Value>
         <Kobalte.Icon data-slot="icon">
-          <Icon name="chevron-down" size={16} class="-my-2 group-data-[expanded]:rotate-180" />
+          <Icon name="chevron-down" size={16} />
         </Kobalte.Icon>
       </Kobalte.Trigger>
       <Kobalte.Portal>
-        <Kobalte.Content data-component="select-content">
+        <Kobalte.Content
+          classList={{
+            ...(props.classList ?? {}),
+            [props.class ?? ""]: !!props.class,
+          }}
+          data-component="select-content"
+        >
           <Kobalte.Listbox data-slot="list" />
         </Kobalte.Content>
       </Kobalte.Portal>

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,
+})