@opencode-ai/ui 0.0.0-dev-19010 → 0.0.0-dev-202609031506

package/src/{data-display/accordion → components}/accordion.tsx

@@ -1,17 +1,17 @@
-import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Root> {}
-export interface AccordionItemProps extends ComponentProps<typeof Item> {}
-export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
-export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
-export interface AccordionContentProps extends ComponentProps<typeof Content> {}
+export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
+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> {}
 
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Root
+    <Kobalte
       {...rest}
       data-component="accordion"
       classList={{
@@ -25,7 +25,7 @@ function AccordionRoot(props: AccordionProps) {
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Item
+    <Kobalte.Item
       {...rest}
       data-slot="accordion-item"
       classList={{
@@ -39,7 +39,7 @@ function AccordionItem(props: AccordionItemProps) {
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Header
+    <Kobalte.Header
       {...rest}
       data-slot="accordion-header"
       classList={{
@@ -48,14 +48,14 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
       }}
     >
       {split.children}
-    </Header>
+    </Kobalte.Header>
   )
 }
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Trigger
+    <Kobalte.Trigger
       {...rest}
       data-slot="accordion-trigger"
       classList={{
@@ -64,14 +64,14 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
       }}
     >
       {split.children}
-    </Trigger>
+    </Kobalte.Trigger>
   )
 }
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Content
+    <Kobalte.Content
       {...rest}
       data-slot="accordion-content"
       classList={{
@@ -80,7 +80,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
       }}
     >
       {split.children}
-    </Content>
+    </Kobalte.Content>
   )
 }
 

package/src/components/animated-number.css

@@ -17,7 +17,7 @@
   }
 
   [data-slot="animated-number-digit"] {
-    display: inline-grid;
+    display: inline-block;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -41,12 +41,19 @@
     mask-repeat: no-repeat;
   }
 
-  [data-slot="animated-number-static"],
   [data-slot="animated-number-strip"] {
-    grid-area: 1 / 1;
+    display: inline-flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
+    transition-property: transform;
+    transition-duration: var(--animated-number-duration, 560ms);
+    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-strip"][data-animating="false"] {
+    transition-duration: 0ms;
   }
 
-  [data-slot="animated-number-static"],
   [data-slot="animated-number-cell"] {
     display: inline-flex;
     align-items: center;
@@ -55,24 +62,6 @@
     height: 1em;
     line-height: 1em;
   }
-
-  [data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
-    visibility: hidden;
-  }
-
-  [data-slot="animated-number-strip"] {
-    display: inline-flex;
-    flex-direction: column;
-    margin-top: calc(var(--animated-number-offset, 10) * -1em);
-    transition-property: margin-top;
-    transition-duration: var(--animated-number-duration, 560ms);
-    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-  }
-
-  [data-slot="animated-number-digit"][data-animating="false"] [data-slot="animated-number-strip"] {
-    transition-duration: 0ms;
-    visibility: hidden;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -82,12 +71,5 @@
 
   [data-component="animated-number"] [data-slot="animated-number-strip"] {
     transition-duration: 0ms;
-    visibility: hidden;
-  }
-
-  [data-component="animated-number"]
-    [data-slot="animated-number-digit"][data-animating]
-    [data-slot="animated-number-static"] {
-    visibility: visible;
   }
 }

package/src/components/animated-number.tsx

@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   )
 
   return (
-    <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
-      <span data-slot="animated-number-static">{props.value}</span>
+    <span data-slot="animated-number-digit">
       <span
         data-slot="animated-number-strip"
+        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)

package/src/components/avatar.css

@@ -0,0 +1,49 @@
+[data-component="avatar"] {
+  --avatar-bg: var(--color-surface-info-base);
+  --avatar-fg: var(--color-text-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-weak-base);
+  font-family: var(--font-mono);
+  font-weight: 500;
+  text-transform: uppercase;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-fg);
+}
+
+[data-component="avatar"][data-has-image] {
+  background-color: transparent;
+  border: none;
+}
+
+[data-component="avatar"][data-size="small"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+[data-component="avatar"][data-size="normal"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+[data-component="avatar"][data-size="large"] {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.25rem;
+  line-height: 2rem;
+}
+
+[data-component="avatar"] [data-slot="avatar-image"] {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
+}

package/src/components/avatar.tsx

@@ -0,0 +1,55 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export interface AvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  background?: string
+  foreground?: string
+  size?: "small" | "normal" | "large"
+}
+
+export function Avatar(props: AvatarProps) {
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "background",
+    "foreground",
+    "size",
+    "class",
+    "classList",
+    "style",
+  ])
+  const src = split.src // did this so i can zero it out to test fallback
+  return (
+    <div
+      {...rest}
+      data-component="avatar"
+      data-size={split.size || "normal"}
+      data-has-image={src ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={{
+        ...(typeof split.style === "object" ? split.style : {}),
+        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
+      }}
+    >
+      <Show when={src} fallback={first(split.fallback)}>
+        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
+      </Show>
+    </div>
+  )
+}

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>
   )