wip: css/ui and desktop work

6 files changed, 137 insertions, 11 deletions

diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
index f42781543..6f3e388e9 100644
--- a/packages/ui/src/app.tsx
+++ b/packages/ui/src/app.tsx
@@ -1,6 +1,5 @@
 import type { Component } from "solid-js"
-import { Button, Select, Tabs } from "./components"
-import "@opencode-ai/css"
+import { Button, Select, Tabs, Tooltip, Fonts } from "./components"
 import "./index.css"
 
 const App: Component = () => {
@@ -17,6 +16,9 @@ const App: Component = () => {
         <Button variant="ghost" size="normal">
           Normal Ghost
         </Button>
+        <Button variant="secondary" size="normal" disabled>
+          Normal Disabled
+        </Button>
         <Button variant="primary" size="large">
           Large Primary
         </Button>
@@ -26,6 +28,9 @@ const App: Component = () => {
         <Button variant="ghost" size="large">
           Large Ghost
         </Button>
+        <Button variant="secondary" size="large" disabled>
+          Large Disabled
+        </Button>
       </section>
       <h3>Select</h3>
       <section>
@@ -88,14 +93,35 @@ const App: Component = () => {
           </Tabs.Content>
         </Tabs>
       </section>
+      <h3>Tooltips</h3>
+      <section>
+        <Tooltip value="This is a top tooltip" placement="top">
+          <Button variant="secondary">Top Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a bottom tooltip" placement="bottom">
+          <Button variant="secondary">Bottom Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a left tooltip" placement="left">
+          <Button variant="secondary">Left Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a right tooltip" placement="right">
+          <Button variant="secondary">Right Tooltip</Button>
+        </Tooltip>
+        <Tooltip value={() => `Dynamic tooltip: ${new Date().toLocaleTimeString()}`} placement="top">
+          <Button variant="primary">Dynamic Tooltip</Button>
+        </Tooltip>
+      </section>
     </div>
   )
 
   return (
-    <main>
-      <Content />
-      <Content dark />
-    </main>
+    <>
+      <Fonts />
+      <main>
+        <Content />
+        <Content dark />
+      </main>
+    </>
   )
 }
 
diff --git a/packages/ui/src/components/fonts.tsx b/packages/ui/src/components/fonts.tsx
new file mode 100644
index 000000000..447c486e4
--- /dev/null
+++ b/packages/ui/src/components/fonts.tsx
@@ -0,0 +1,44 @@
+import { Style, Link } from "@solidjs/meta"
+import geist from "@opencode-ai/css/fonts/geist.woff2"
+import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2"
+
+export const Fonts = () => {
+  return (
+    <>
+      <Style>{`
+        @font-face {
+          font-family: "geist";
+          src: url("${geist}") format("woff2-variations");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 100 900;
+        }
+        @font-face {
+          font-family: "geist-fallback";
+          src: local("Arial");
+          size-adjust: 100%;
+          ascent-override: 97%;
+          descent-override: 25%;
+          line-gap-override: 1%;
+        }
+        @font-face {
+          font-family: "geist-mono";
+          src: url("${geistMono}") format("woff2-variations");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 100 900;
+        }
+        @font-face {
+          font-family: "geist-mono-fallback";
+          src: local("Courier New");
+          size-adjust: 100%;
+          ascent-override: 97%;
+          descent-override: 25%;
+          line-gap-override: 1%;
+        }
+      `}</Style>
+      <Link rel="preload" href={geist} as="font" type="font/woff2" crossorigin="anonymous" />
+      <Link rel="preload" href={geistMono} as="font" type="font/woff2" crossorigin="anonymous" />
+    </>
+  )
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index be12d6a67..2048ec639 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,4 +1,6 @@
 export * from "./button"
 export * from "./icon"
+export * from "./fonts"
 export * from "./select"
 export * from "./tabs"
+export * from "./tooltip"
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
new file mode 100644
index 000000000..7cb22b290
--- /dev/null
+++ b/packages/ui/src/components/tooltip.tsx
@@ -0,0 +1,44 @@
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { children, createEffect, createSignal, splitProps } from "solid-js"
+import type { ComponentProps } from "solid-js"
+
+export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
+  value: string | (() => string)
+  class?: string
+}
+
+export function Tooltip(props: TooltipProps) {
+  const [open, setOpen] = createSignal(false)
+  const [local, others] = splitProps(props, ["children", "class"])
+
+  const c = children(() => local.children)
+
+  createEffect(() => {
+    const childElements = c()
+    if (childElements instanceof HTMLElement) {
+      childElements.addEventListener("focus", () => setOpen(true))
+      childElements.addEventListener("blur", () => setOpen(false))
+    } else if (Array.isArray(childElements)) {
+      for (const child of childElements) {
+        if (child instanceof HTMLElement) {
+          child.addEventListener("focus", () => setOpen(true))
+          child.addEventListener("blur", () => setOpen(false))
+        }
+      }
+    }
+  })
+
+  return (
+    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
+      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger">
+        {c()}
+      </KobalteTooltip.Trigger>
+      <KobalteTooltip.Portal>
+        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
+          {typeof others.value === "function" ? others.value() : others.value}
+          <KobalteTooltip.Arrow data-slot="arrow" size={18} />
+        </KobalteTooltip.Content>
+      </KobalteTooltip.Portal>
+    </KobalteTooltip>
+  )
+}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index b5f1cf302..ab8e72091 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1,8 +1,10 @@
+@import "@opencode-ai/css";
+
 :root {
   body {
     margin: 0;
-    background-color: var(--background-background);
-    color: var(--text-default-text);
+    background-color: var(--background-base);
+    color: var(--text-base);
   }
   main {
     display: flex;
@@ -35,6 +37,6 @@
 }
 
 .dark {
-  background-color: var(--background-background);
-  color: var(--text-default-text);
+  background-color: var(--background-base);
+  color: var(--text-base);
 }
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 0e4c4a018..caa8b1ccd 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,5 +1,6 @@
 /* @refresh reload */
 import { render } from "solid-js/web"
+import { MetaProvider } from "@solidjs/meta"
 
 import App from "./app"
 
@@ -11,4 +12,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   )
 }
 
-render(() => <App />, root!)
+render(
+  () => (
+    <MetaProvider>
+      <App />
+    </MetaProvider>
+  ),
+  root!,
+)