wip: desktop work

1 files changed, 95 insertions, 0 deletions

diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
new file mode 100644
index 000000000..c6d09c656
--- /dev/null
+++ b/packages/ui/src/components/tabs.css
@@ -0,0 +1,95 @@
+[data-component="tabs"] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-sm);
+  border-color: var(--border-weak-base);
+  background-color: var(--background-stronger);
+  overflow: clip;
+
+  & [data-slot="list"] {
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* After element to fill remaining space */
+    &::after {
+      content: "";
+      display: block;
+      flex-grow: 1;
+      height: 100%;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: var(--background-base);
+      border-top-right-radius: var(--radius-sm);
+    }
+
+    &:empty::after {
+      display: none;
+    }
+  }
+
+  & [data-slot="trigger"] {
+    position: relative;
+    height: 36px;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-weak);
+    cursor: pointer;
+    white-space: nowrap;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border-weak-base);
+    border-right: 1px solid var(--border-weak-base);
+    background-color: var(--background-weak);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:disabled {
+      pointer-events: none;
+      color: var(--text-weaker);
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--border-focus);
+    }
+    &[data-selected] {
+      color: var(--text-base);
+      background-color: transparent;
+      border-bottom-color: transparent;
+    }
+    &:hover:not(:disabled):not([data-selected]) {
+      color: var(--text-strong);
+    }
+  }
+
+  & [data-slot="content"] {
+    overflow-y: auto;
+    flex: 1;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}