wip: desktop work

packages/ui/src/components/list.tsx

@@ -9,6 +9,7 @@ export interface ListProps<T> {
   key: (x: T) => string
   current?: T
   onSelect?: (value: T | undefined) => void
+  onHover?: (value: T | undefined) => void
   class?: ComponentProps<"div">["class"]
 }
 
@@ -45,6 +46,7 @@ export function List<T>(props: ListProps<T>) {
   createEffect(() => {
     if (store.mouseActive || props.data.length === 0) return
     const index = props.data.findIndex((x) => props.key(x) === list.active())
+    props.onHover?.(props.data[index])
     if (index === 0) {
       virtualizer()?.scrollTo(0)
       return

packages/ui/src/components/tooltip.tsx

@@ -30,11 +30,11 @@ export function Tooltip(props: TooltipProps) {
 
   return (
     <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
-      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger">
+      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
         {c()}
       </KobalteTooltip.Trigger>
       <KobalteTooltip.Portal>
-        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
+        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
           {typeof others.value === "function" ? others.value() : others.value}
           {/* <KobalteTooltip.Arrow data-slot="arrow" size={18} /> */}
         </KobalteTooltip.Content>

packages/ui/src/styles/tailwind/index.css

@@ -32,6 +32,15 @@
   --tracking-tight: var(--letter-spacing-tight);
   --tracking-tightest: var(--letter-spacing-tightest);
 
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
   --shadow-xs: var(--shadow-xs);
   --shadow-md: var(--shadow-md);
   --shadow-xs-border-selected: var(--shadow-xs-border-selected);

packages/ui/src/styles/theme.css

@@ -277,7 +277,7 @@
   --markdown-code-block: #1a1a1a;
   --border-color: #ffffff;
 
-  .dark {
+  @media (prefers-color-scheme: dark) {
     /* OC-1-Dark */
     color-scheme: dark;
     --background-base: var(--smoke-dark-1);