@opencode-ai/ui 0.0.0-dev-19219 → 0.0.0-dev-202609070344

package/src/components/button.css

@@ -0,0 +1,194 @@
+[data-component="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  user-select: none;
+  cursor: default;
+  outline: none;
+  white-space: nowrap;
+
+  &[data-variant="primary"] {
+    background-color: var(--button-primary-base);
+    border-color: var(--border-weak-base);
+    color: var(--icon-invert-base);
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-invert-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--icon-strong-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--icon-strong-focus);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--icon-strong-active);
+    }
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-invert-base);
+      }
+    }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-strong);
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-base-hover);
+    }
+    &:focus-visible:not(:disabled) {
+      background-color: var(--surface-base-hover);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--surface-base-active);
+    }
+    &:disabled {
+      color: var(--text-weak);
+      cursor: not-allowed;
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-disabled);
+      }
+    }
+    &[data-selected="true"]:not(:disabled) {
+      background-color: var(--surface-base-hover);
+    }
+    &[data-active="true"] {
+      background-color: var(--surface-base-active);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border: transparent;
+    background-color: var(--button-secondary-base);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-xs-border-base);
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-secondary-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
+    }
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+    &:disabled {
+      border-color: var(--border-disabled);
+      background-color: var(--surface-disabled);
+      color: var(--text-weak);
+      cursor: not-allowed;
+    }
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+  }
+
+  &[data-size="small"] {
+    height: 24px;
+    padding: 0 8px;
+    &[data-icon] {
+      padding: 0 12px 0 4px;
+    }
+
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+    gap: 8px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="normal"] {
+    height: 28px;
+    line-height: 28px;
+    padding: 0 6px;
+    &[data-icon] {
+      padding: 0 12px 0 4px;
+    }
+
+    font-size: var(--font-size-small);
+    gap: 8px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="large"] {
+    height: 32px;
+    padding: 6px 12px;
+
+    &[data-icon] {
+      padding: 0 12px 0 8px;
+    }
+
+    gap: 8px;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
+  color: var(--icon-strong-base);
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
+  background-color: var(--surface-base-active);
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] {
+  color: var(--icon-strong-base);
+}
+
+[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) {
+  background-color: var(--surface-base-active);
+}

package/src/{actions/button → components}/button.tsx

@@ -1,41 +1,33 @@
-import { Root } from "@kobalte/core/button"
+import { Button as Kobalte } from "@kobalte/core/button"
 import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, type IconProps } from "@opencode-ai/ui/icon"
-import "./button.css"
+import { Icon, IconProps } from "./icon"
 
 export interface ButtonProps
-  extends ComponentProps<typeof Root>,
+  extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?:
-    | "neutral"
-    | "danger"
-    | "warning"
-    | "outline"
-    | "contrast"
-    | "ghost"
-    | "ghost-muted"
-    | "ghost-faint"
-    | "loading"
+  variant?: "primary" | "secondary" | "ghost"
   icon?: IconProps["name"]
 }
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
   return (
-    <Root
+    <Kobalte
       {...rest}
-      data-component="button-v2"
+      data-component="button"
       data-size={split.size || "normal"}
-      data-variant={split.variant || "neutral"}
+      data-variant={split.variant || "secondary"}
       data-icon={split.icon}
       classList={{
         ...split.classList,
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Show when={split.icon}>{(icon) => <Icon name={icon()} />}</Show>
+      <Show when={split.icon}>
+        <Icon name={split.icon!} size="small" />
+      </Show>
       {props.children}
-    </Root>
+    </Kobalte>
   )
 }

package/src/components/card.css

@@ -58,7 +58,7 @@
     gap: var(--card-gap);
   }
 
-  :where([data-slot="card-title"]) [data-slot="icon-svg"] {
+  :where([data-slot="card-title"]) [data-component="icon"] {
     color: var(--card-accent);
   }
 
@@ -71,7 +71,7 @@
     flex: 0 0 auto;
   }
 
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-slot="icon-svg"] {
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
     color: var(--v2-text-text-faint);
   }
 
@@ -92,3 +92,24 @@
     padding-left: var(--card-indent);
   }
 }
+
+body:not([data-new-layout]) [data-component="card"] {
+  color: var(--text-strong);
+  --card-accent: var(--icon-active);
+
+  :where([data-card="title"], [data-slot="card-title"]) {
+    color: var(--text-strong);
+  }
+
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
+    color: var(--text-weak);
+  }
+
+  :where([data-card="description"], [data-slot="card-description"]) {
+    color: var(--text-base);
+  }
+
+  &[data-variant="error"] {
+    --card-accent: var(--icon-critical-base) !important;
+  }
+}

package/src/components/card.tsx

@@ -1,5 +1,5 @@
-import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { type ComponentProps, splitProps } from "solid-js"
+import { Icon, type IconProps } from "./icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
 
@@ -80,11 +80,11 @@ export function CardTitle(props: CardTitleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Show when={show()}>
+      {show() ? (
         <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
           <Icon name={name() ?? "dash"} size="small" />
         </span>
-      </Show>
+      ) : null}
       {split.children}
     </div>
   )

package/src/{forms/checkbox → components}/checkbox.css

@@ -32,6 +32,7 @@
       border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       box-shadow 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+    /* background-color: var(--surface-weak); */
   }
 
   [data-slot="checkbox-checkbox-indicator"] {
@@ -48,14 +49,19 @@
       transform 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
+  /* [data-slot="checkbox-checkbox-content"] { */
+  /* } */
+
   [data-slot="checkbox-checkbox-label"] {
     user-select: none;
     color: var(--text-base);
+
+    /* text-12-regular */
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
+    line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
   }
 

package/src/{forms/checkbox → components}/checkbox.tsx

@@ -1,8 +1,8 @@
-import { Control, Description, ErrorMessage, Indicator, Input, Label, Root } from "@kobalte/core/checkbox"
+import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
 import { Show, splitProps } from "solid-js"
 import type { ComponentProps, JSX, ParentProps } from "solid-js"
 
-export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>> {
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
   hideLabel?: boolean
   description?: string
   icon?: JSX.Element
@@ -11,10 +11,10 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>>
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
   return (
-    <Root {...others} data-component="checkbox">
-      <Input data-slot="checkbox-checkbox-input" />
-      <Control data-slot="checkbox-checkbox-control">
-        <Indicator data-slot="checkbox-checkbox-indicator">
+    <Kobalte {...others} data-component="checkbox">
+      <Kobalte.Input data-slot="checkbox-checkbox-input" />
+      <Kobalte.Control data-slot="checkbox-checkbox-control">
+        <Kobalte.Indicator data-slot="checkbox-checkbox-indicator">
           {local.icon || (
             <svg viewBox="0 0 12 12" fill="none" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -25,19 +25,19 @@ export function Checkbox(props: CheckboxProps) {
               />
             </svg>
           )}
-        </Indicator>
-      </Control>
+        </Kobalte.Indicator>
+      </Kobalte.Control>
       <div data-slot="checkbox-checkbox-content">
         <Show when={props.children}>
-          <Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
+          <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
             {props.children}
-          </Label>
+          </Kobalte.Label>
         </Show>
         <Show when={local.description}>
-          <Description data-slot="checkbox-checkbox-description">{local.description}</Description>
+          <Kobalte.Description data-slot="checkbox-checkbox-description">{local.description}</Kobalte.Description>
         </Show>
-        <ErrorMessage data-slot="checkbox-checkbox-error" />
+        <Kobalte.ErrorMessage data-slot="checkbox-checkbox-error" />
       </div>
-    </Root>
+    </Kobalte>
   )
 }

package/src/components/collapsible.tsx

@@ -1,6 +1,6 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
 import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Icon } from "./icon"
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -35,7 +35,7 @@ function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
       <span data-slot="collapsible-arrow-icon">
-        <Icon name="fill-triangle-down" size="small" />
+        <Icon name="chevron-down" size="small" />
       </span>
     </div>
   )

package/src/components/dialog.css

@@ -0,0 +1,181 @@
+/* [data-component="dialog-trigger"] { } */
+
+[data-component="dialog-overlay"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: hsl(from var(--background-base) h s l / 0.2);
+}
+
+[data-component="dialog"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  [data-slot="dialog-container"] {
+    position: relative;
+    z-index: 50;
+    width: min(calc(100vw - 16px), 640px);
+    height: min(calc(100vh - 16px), 512px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: start;
+    overflow: visible;
+
+    [data-slot="dialog-content"] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      width: 100%;
+      max-height: 100%;
+      min-height: 280px;
+      overflow: auto;
+      pointer-events: auto;
+
+      /* Hide scrollbar */
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      /* padding: 8px; */
+      /* padding: 8px 8px 0 8px; */
+      border-radius: var(--radius-xl);
+      background: var(--surface-raised-stronger-non-alpha);
+      background-clip: padding-box;
+      box-shadow: var(--shadow-lg-border-base);
+
+      [data-slot="dialog-header"] {
+        display: flex;
+        padding: 16px 20px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        [data-slot="dialog-title"] {
+          color: var(--text-strong);
+
+          /* text-16-medium */
+          font-family: var(--font-family-sans);
+          font-size: var(--font-size-large);
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-x-large); /* 150% */
+          letter-spacing: var(--letter-spacing-tight);
+        }
+        /* [data-slot="dialog-close-button"] {} */
+      }
+
+      [data-slot="dialog-description"] {
+        display: flex;
+        padding: 16px;
+        padding-left: 24px;
+        padding-top: 0;
+        margin-top: -8px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        color: var(--text-base);
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="dialog-body"] {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
+  &[data-fit] {
+    [data-slot="dialog-container"] {
+      height: auto;
+
+      [data-slot="dialog-content"] {
+        min-height: 0;
+      }
+    }
+  }
+
+  &[data-size="large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 800px);
+    height: min(calc(100vh - 32px), 600px);
+  }
+
+  &[data-size="x-large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 980px);
+    height: min(calc(100vh - 92px), 600px);
+  }
+}
+
+[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
+  animation: contentHide 100ms ease-in forwards;
+
+  &[data-expanded] {
+    animation: contentShow 150ms ease-out;
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes overlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}

package/src/components/dialog.tsx

@@ -0,0 +1,72 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
+import { useI18n } from "../context/i18n"
+import { IconButton } from "./icon-button"
+
+export interface DialogProps extends ParentProps {
+  title?: JSXElement
+  description?: JSXElement
+  action?: JSXElement
+  size?: "normal" | "large" | "x-large"
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  fit?: boolean
+  transition?: boolean
+}
+
+export function Dialog(props: DialogProps) {
+  const i18n = useI18n()
+  return (
+    <div
+      data-component="dialog"
+      data-fit={props.fit ? true : undefined}
+      data-size={props.size || "normal"}
+      data-transition={props.transition ? true : undefined}
+    >
+      <div data-slot="dialog-container">
+        <Kobalte.Content
+          data-slot="dialog-content"
+          data-no-header={!props.title && !props.action ? "" : undefined}
+          classList={{
+            ...props.classList,
+            [props.class ?? ""]: !!props.class,
+          }}
+          onOpenAutoFocus={(e) => {
+            const target = e.currentTarget as HTMLElement | null
+            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+            if (autofocusEl) {
+              e.preventDefault()
+              autofocusEl.focus()
+            }
+          }}
+        >
+          <Show when={props.title || props.action}>
+            <div data-slot="dialog-header">
+              <Show when={props.title}>
+                <Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
+              </Show>
+              <Switch>
+                <Match when={props.action}>{props.action}</Match>
+                <Match when={true}>
+                  <Kobalte.CloseButton
+                    data-slot="dialog-close-button"
+                    as={IconButton}
+                    icon="close"
+                    variant="ghost"
+                    aria-label={i18n.t("ui.common.close")}
+                  />
+                </Match>
+              </Switch>
+            </div>
+          </Show>
+          <Show when={props.description}>
+            <Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>
+              {props.description}
+            </Kobalte.Description>
+          </Show>
+          <div data-slot="dialog-body">{props.children}</div>
+        </Kobalte.Content>
+      </div>
+    </div>
+  )
+}