wip: css/ui work

packages/ui/src/app.tsx

@@ -1,66 +1,100 @@
 import type { Component } from "solid-js"
-import { Button } from "./components/button"
-import { Select } from "./components"
+import { Button, Select, Tabs } from "./components"
 import "@opencode-ai/css"
 import "./index.css"
 
 const App: Component = () => {
+  const Content = (props: { dark?: boolean }) => (
+    <div class={`${props.dark ? "dark" : ""}`}>
+      <h3>Buttons</h3>
+      <section>
+        <Button variant="primary" size="normal">
+          Normal Primary
+        </Button>
+        <Button variant="secondary" size="normal">
+          Normal Secondary
+        </Button>
+        <Button variant="ghost" size="normal">
+          Normal Ghost
+        </Button>
+        <Button variant="primary" size="large">
+          Large Primary
+        </Button>
+        <Button variant="secondary" size="large">
+          Large Secondary
+        </Button>
+        <Button variant="ghost" size="large">
+          Large Ghost
+        </Button>
+      </section>
+      <h3>Select</h3>
+      <section>
+        <Select
+          // we have to pass dark bc of the portal,
+          // normally wouldn't be needed bc root element
+          // would have theme class
+          class={props.dark ? "dark" : ""}
+          variant="primary"
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Primary"
+        />
+        <Select
+          variant="secondary"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Secondary"
+        />
+        <Select
+          variant="ghost"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Ghost"
+        />
+      </section>
+      <h3>Tabs</h3>
+      <section>
+        <Tabs defaultValue="tab1" style={{ width: "100%" }}>
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            <Tabs.Trigger value="tab4" disabled>
+              Disabled Tab
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 1 Content</h4>
+              <p>This is the content for the first tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 2 Content</h4>
+              <p>This is the content for the second tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab3">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 3 Content</h4>
+              <p>This is the content for the third tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab4">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 4 Content</h4>
+              <p>This tab should be disabled.</p>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </section>
+    </div>
+  )
+
   return (
     <main>
-      <div class="light">
-        <h3>Buttons</h3>
-        <section>
-          <Button variant="primary" size="normal">
-            Normal Primary
-          </Button>
-          <Button variant="secondary" size="normal">
-            Normal Secondary
-          </Button>
-          <Button variant="ghost" size="normal">
-            Normal Ghost
-          </Button>
-          <Button variant="primary" size="large">
-            Large Primary
-          </Button>
-          <Button variant="secondary" size="large">
-            Large Secondary
-          </Button>
-          <Button variant="ghost" size="large">
-            Large Ghost
-          </Button>
-        </section>
-        <h3>Select</h3>
-        <section>
-          <Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
-        </section>
-      </div>
-      <div class="dark">
-        <h3>Buttons</h3>
-        <section>
-          <Button variant="primary" size="normal">
-            Normal Primary
-          </Button>
-          <Button variant="secondary" size="normal">
-            Normal Secondary
-          </Button>
-          <Button variant="ghost" size="normal">
-            Normal Ghost
-          </Button>
-          <Button variant="primary" size="large">
-            Large Primary
-          </Button>
-          <Button variant="secondary" size="large">
-            Large Secondary
-          </Button>
-          <Button variant="ghost" size="large">
-            Large Ghost
-          </Button>
-        </section>
-        <h3>Select</h3>
-        <section>
-          <Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
-        </section>
-      </div>
+      <Content />
+      <Content dark />
     </main>
   )
 }

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

packages/ui/src/index.css

@@ -12,7 +12,7 @@
   }
   main > div {
     flex: 1;
-    padding: 3rem;
+    padding: 2rem;
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -24,6 +24,7 @@
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 1rem 0;
+    margin-bottom: -1rem;
   }
   section {
     display: flex;

packages/ui/src/index.tsx

@@ -1,6 +1,5 @@
 /* @refresh reload */
 import { render } from "solid-js/web"
-import "solid-devtools"
 
 import App from "./app"