wip(desktop): layout improvements

15 files changed, 95 insertions, 49 deletions

diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index f949dc948..8cfac06b0 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -24,7 +24,7 @@
       [data-slot="accordion-trigger"] {
         width: 100%;
         display: flex;
-        height: 40px;
+        height: 32px;
         padding: 8px 12px;
         justify-content: space-between;
         align-items: center;
@@ -63,23 +63,24 @@
       margin-bottom: 8px;
 
       [data-slot="accordion-trigger"] {
-        border-radius: 8px 8px 0 0;
+        border-top-left-radius: var(--radius-md);
+        border-top-right-radius: var(--radius-md);
       }
 
       [data-slot="accordion-content"] {
         border: 1px solid var(--border-weak-base);
         border-top: none;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: var(--radius-md);
+        border-bottom-right-radius: var(--radius-md);
       }
 
       [data-slot="accordion-item"]:has(+ &) {
         &[data-closed] {
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-bottom-left-radius: var(--radius-md);
+          border-bottom-right-radius: var(--radius-md);
           [data-slot="accordion-trigger"] {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
+            border-bottom-left-radius: var(--radius-md);
+            border-bottom-right-radius: var(--radius-md);
           }
         }
         margin-bottom: 8px;
@@ -89,8 +90,8 @@
         margin-top: 8px;
 
         [data-slot="accordion-trigger"] {
-          border-top-left-radius: 8px;
-          border-top-right-radius: 8px;
+          border-top-left-radius: var(--radius-md);
+          border-top-right-radius: var(--radius-md);
         }
       }
     }
@@ -106,8 +107,8 @@
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
-          border-top-left-radius: 8px;
-          border-top-right-radius: 8px;
+          border-top-left-radius: var(--radius-md);
+          border-top-right-radius: var(--radius-md);
         }
       }
     }
@@ -117,8 +118,8 @@
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-bottom-left-radius: var(--radius-md);
+          border-bottom-right-radius: var(--radius-md);
         }
       }
     }
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 02f00b7be..535d38e3d 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -1,11 +1,9 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { createSignal, splitProps } from "solid-js"
+import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {
-  defaultOpen?: boolean
-}
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
 export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
@@ -25,14 +23,11 @@ function AccordionRoot(props: AccordionProps) {
 }
 
 function AccordionItem(props: AccordionItemProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "defaultOpen"])
-  const [open, setOpen] = createSignal(split.defaultOpen ?? false)
+  const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <Kobalte.Item
       {...rest}
       data-slot="accordion-item"
-      onOpenChange={setOpen}
-      open={open()}
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 80ded60fd..0fdb49cdc 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -4,7 +4,7 @@
   justify-content: center;
   border-style: solid;
   border-width: 1px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   user-select: none;
   cursor: default;
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
index a9b7c8784..6dae47223 100644
--- a/packages/ui/src/components/card.css
+++ b/packages/ui/src/components/card.css
@@ -5,7 +5,7 @@
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
   transition: background-color 0.15s ease;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 6px 12px;
   overflow: clip;
 
diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css
index 6e1e5ddd5..358391bd1 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/components/checkbox.css
@@ -25,7 +25,7 @@
     padding: 2px;
     aspect-ratio: 1;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     border: 1px solid var(--border-weak-base);
     /* background-color: var(--surface-weak); */
   }
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 4b2c14d4d..edd9952d7 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -5,7 +5,7 @@
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
   transition: background-color 0.15s ease;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: clip;
 
   [data-slot="collapsible-trigger"] {
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 750596308..7cf15bb23 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -43,7 +43,7 @@
       /* padding: 8px; */
       padding: 8px 8px 0 8px;
       border: 1px solid var(--border-base);
-      border-radius: 16px;
+      border-radius: var(--radius-md);
       background: var(--surface-raised-stronger-non-alpha);
       box-shadow:
         0 15px 45px 0 rgba(19, 16, 16, 0.22),
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index a491074fe..9e1c51cb2 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   user-select: none;
   aspect-ratio: 1;
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 27a43e51e..c69d04f7a 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -157,6 +157,7 @@ const newIcons = {
   "speech-bubble": `<path d="M18.3334 10.0003C18.3334 5.57324 15.0927 2.91699 10.0001 2.91699C4.90749 2.91699 1.66675 5.57324 1.66675 10.0003C1.66675 11.1497 2.45578 13.1016 2.5771 13.3949C2.5878 13.4207 2.59839 13.4444 2.60802 13.4706C2.69194 13.6996 3.04282 14.9364 1.66675 16.7684C3.5186 17.6538 5.48526 16.1982 5.48526 16.1982C6.84592 16.9202 8.46491 17.0837 10.0001 17.0837C15.0927 17.0837 18.3334 14.4274 18.3334 10.0003Z" stroke="currentColor" stroke-linecap="square"/>`,
   "align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
   expand: `<path d="M4.58301 10.4163V15.4163H9.58301M10.4163 4.58301H15.4163V9.58301" stroke="currentColor" stroke-linecap="square"/>`,
+  collapse: `<path d="M16.666 8.33398H11.666V3.33398" stroke="currentColor" stroke-linecap="square"/><path d="M8.33398 16.666V11.666H3.33398" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index 67db2c619..2136c4f92 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -14,7 +14,7 @@
     padding: 4px 12px;
     text-align: left;
 
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     transition: background-color 0.2s ease-in-out;
 
     &[data-active="true"] {
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 41d8f3921..6ca8fa0f3 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -7,7 +7,7 @@
   gap: 12px;
   align-self: stretch;
 
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface-base);
 
   [data-slot="input-container"] {
@@ -100,7 +100,7 @@
         align-items: center;
 
         &[data-active="true"] {
-          border-radius: 8px;
+          border-radius: var(--radius-md);
           background: var(--surface-raised-base-hover);
         }
       }
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 79445420a..7bafa39f7 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -21,7 +21,7 @@
 [data-component="select-content"] {
   min-width: 4rem;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border-width: 1px;
   border-style: solid;
   border-color: var(--border-weak-base);
@@ -60,7 +60,7 @@
     display: flex;
     align-items: center;
     padding: 0 6px 0 6px;
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 67f289283..91efbe50d 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -6,7 +6,7 @@
   background-color: var(--background-stronger);
   overflow: clip;
 
-  [data-slot="list"] {
+  [data-slot="tabs-list"] {
     height: 48px;
     width: 100%;
     position: relative;
@@ -36,12 +36,12 @@
     }
   }
 
-  [data-slot="trigger"] {
+  [data-slot="tabs-trigger-wrapper"] {
     position: relative;
     height: 100%;
-    padding: 14px 24px;
     display: flex;
     align-items: center;
+    gap: 12px;
     color: var(--text-base);
 
     /* text-14-medium */
@@ -58,6 +58,23 @@
     border-right: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
 
+    [data-slot="tabs-trigger"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 24px;
+    }
+
+    [data-slot="tabs-trigger-close-button"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [data-component="icon-button"] {
+      margin: -0.25rem;
+    }
+
     &:disabled {
       pointer-events: none;
       color: var(--text-weaker);
@@ -66,17 +83,38 @@
       outline: none;
       box-shadow: 0 0 0 2px var(--border-focus);
     }
-    &[data-selected] {
+    &:has([data-hidden]) {
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 0;
+      }
+
+      &:hover {
+        [data-slot="tabs-trigger-close-button"] {
+          opacity: 1;
+        }
+      }
+    }
+    &:has([data-selected]) {
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 1;
+      }
     }
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
+    &:has([data-slot="tabs-trigger-close-button"]) {
+      padding-right: 12px;
+
+      [data-slot="tabs-trigger"] {
+        padding-right: 0;
+      }
+    }
   }
 
-  [data-slot="content"] {
+  [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
 
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 5e047a7ca..e2f72f158 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -1,10 +1,13 @@
 import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { splitProps } from "solid-js"
+import { Show, splitProps, type JSX } 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 TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideCloseButton?: boolean
+  closeButton?: JSX.Element
+}
 export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
 function TabsRoot(props: TabsProps) {
@@ -26,7 +29,7 @@ function TabsList(props: TabsListProps) {
   return (
     <Kobalte.List
       {...rest}
-      data-slot="list"
+      data-slot="tabs-list"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
@@ -36,18 +39,26 @@ function TabsList(props: TabsListProps) {
 }
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "closeButton", "hideCloseButton"])
   return (
-    <Kobalte.Trigger
-      {...rest}
-      data-slot="trigger"
+    <div
+      data-slot="tabs-trigger-wrapper"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {split.children}
-    </Kobalte.Trigger>
+      <Kobalte.Trigger {...rest} data-slot="tabs-trigger" class="group/tab">
+        {split.children}
+      </Kobalte.Trigger>
+      <Show when={split.closeButton}>
+        {(closeButton) => (
+          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
   )
 }
 
@@ -56,7 +67,7 @@ function TabsContent(props: ParentProps<TabsContentProps>) {
   return (
     <Kobalte.Content
       {...rest}
-      data-slot="content"
+      data-slot="tabs-content"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
index 92825aca1..bde2a97dd 100644
--- a/packages/ui/src/components/tooltip.css
+++ b/packages/ui/src/components/tooltip.css
@@ -6,7 +6,7 @@
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background-color: var(--surface-float-base);
   color: rgba(253, 252, 252, 0.94);
   padding: 2px 8px;