@opencode-ai/ui 0.0.0-dev-17913 → 0.0.0-dev-202608221251

package/src/{forms/select/select.tsx → v2/components/select-v2.tsx}

@@ -1,17 +1,6 @@
-import {
-  Content,
-  Item,
-  ItemIndicator,
-  ItemLabel,
-  Listbox,
-  Portal,
-  Root,
-  Section,
-  Trigger,
-  Value,
-} from "@kobalte/core/select"
+import { Select as Kobalte } from "@kobalte/core/select"
 import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import "./select.css"
+import "./select-v2.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
   if (!groupBy) {
@@ -51,8 +40,8 @@ const CheckSmall = () => (
   </svg>
 )
 
-export type SelectProps<T> = Omit<
-  ComponentProps<typeof Root<T, { category: string; options: T[] }>>,
+export type SelectV2Props<T> = Omit<
+  ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
   "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
 > & {
   placeholder?: string
@@ -64,13 +53,15 @@ export type SelectProps<T> = Omit<
   groupBy?: (x: T) => string
   onSelect?: (value: T | null) => void
   onHighlight?: (value: T | undefined) => void | (() => void)
+  /** `base` / `large` match text-input-v2; `inline` is a compact settings-row trigger. */
+  appearance?: "base" | "large" | "inline"
   invalid?: boolean
   numeric?: boolean
   children?: (item: T) => JSX.Element
   valueClass?: string
 }
 
-export function Select<T>(props: SelectProps<T>) {
+export function SelectV2<T>(props: SelectV2Props<T>) {
   const [local, others] = splitProps(props, [
     "class",
     "classList",
@@ -84,6 +75,7 @@ export function Select<T>(props: SelectProps<T>) {
     "onHighlight",
     "onOpenChange",
     "children",
+    "appearance",
     "invalid",
     "numeric",
     "disabled",
@@ -96,6 +88,8 @@ export function Select<T>(props: SelectProps<T>) {
     "fitViewport",
   ])
 
+  const inline = () => (local.appearance ?? "base") === "inline"
+
   const state: { key?: string; cleanup?: void | (() => void) } = {}
 
   const stop = () => {
@@ -124,15 +118,15 @@ export function Select<T>(props: SelectProps<T>) {
   const grouped = createMemo(() => groupOptions(local.options, local.groupBy))
 
   return (
-    <Root<T, { category: string; options: T[] }>
+    <Kobalte<T, { category: string; options: T[] }>
       {...others}
       multiple={false}
       allowDuplicateSelectionEvents={false}
       disabled={local.disabled}
       data-component="select-v2-root"
-      placement={local.placement ?? "bottom-end"}
+      placement={local.placement ?? (inline() ? "bottom-end" : "bottom-start")}
       gutter={local.gutter ?? 4}
-      sameWidth={local.sameWidth ?? false}
+      sameWidth={local.sameWidth ?? !inline()}
       flip={local.flip ?? true}
       slide={local.slide ?? true}
       fitViewport={local.fitViewport ?? false}
@@ -143,31 +137,31 @@ export function Select<T>(props: SelectProps<T>) {
       optionGroupChildren="options"
       placeholder={local.placeholder}
       sectionComponent={(sectionProps) => (
-        <Section>
+        <Kobalte.Section>
           <Show when={sectionProps.section.rawValue.category}>
             <div data-slot="menu-v2-group-label">{sectionProps.section.rawValue.category}</div>
           </Show>
-        </Section>
+        </Kobalte.Section>
       )}
       itemComponent={(itemProps) => (
-        <Item
+        <Kobalte.Item
           {...itemProps}
           data-component="menu-v2-item"
           onPointerEnter={() => move(itemProps.item.rawValue)}
           onPointerMove={() => move(itemProps.item.rawValue)}
           onFocus={() => move(itemProps.item.rawValue)}
         >
-          <ItemLabel data-slot="menu-v2-item-content" as="span">
+          <Kobalte.ItemLabel data-slot="menu-v2-item-content" as="span">
             {local.children
               ? local.children(itemProps.item.rawValue)
               : local.label
                 ? local.label(itemProps.item.rawValue)
                 : String(itemProps.item.rawValue as string)}
-          </ItemLabel>
-          <ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+          </Kobalte.ItemLabel>
+          <Kobalte.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
             <CheckSmall />
-          </ItemIndicator>
-        </Item>
+          </Kobalte.ItemIndicator>
+        </Kobalte.Item>
       )}
       onChange={(next) => {
         const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
@@ -179,10 +173,10 @@ export function Select<T>(props: SelectProps<T>) {
         if (!open) stop()
       }}
     >
-      <Trigger
+      <Kobalte.Trigger
         as="div"
         data-component="select-v2"
-        data-appearance="inline"
+        data-appearance={local.appearance ?? "base"}
         data-invalid={local.invalid ? "" : undefined}
         data-numeric={local.numeric ? "" : undefined}
         disabled={local.disabled}
@@ -193,23 +187,23 @@ export function Select<T>(props: SelectProps<T>) {
         }}
       >
         <div data-slot="select-v2-value">
-          <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
+          <Kobalte.Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
               if (local.label && selected != null) return local.label(selected)
               return selected != null ? (selected as string) : ""
             }}
-          </Value>
+          </Kobalte.Value>
         </div>
         <span data-slot="select-v2-chevron" aria-hidden="true">
           <ChevronDown />
         </span>
-      </Trigger>
-      <Portal>
-        <Content data-component="menu-v2-content" data-slot="select-v2-content">
-          <Listbox data-slot="select-v2-listbox" />
-        </Content>
-      </Portal>
-    </Root>
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
+          <Kobalte.Listbox data-slot="select-v2-listbox" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
   )
 }

package/src/{actions/split-button/split-button.css → v2/components/split-button-v2.css}

@@ -87,8 +87,13 @@
   flex-shrink: 0;
 }
 
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
+  width: 16px;
+  height: 16px;
+}

package/src/{actions/split-button/split-button.tsx → v2/components/split-button-v2.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
-import "./split-button.css"
+import "./split-button-v2.css"
 
-export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
+export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
     <div
@@ -17,7 +17,7 @@ export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export function SplitButtonAction(props: ComponentProps<"button">) {
+export function SplitButtonV2Action(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
@@ -32,7 +32,7 @@ export function SplitButtonAction(props: ComponentProps<"button">) {
   )
 }
 
-export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
+export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button

package/src/{forms/switch/switch.css → v2/components/switch-v2.css}

@@ -160,113 +160,3 @@
     pointer-events: none;
   }
 }
-
-[data-component="switch"][data-appearance="standard"] {
-  [data-slot="switch-control"] {
-    padding: 0;
-    width: 28px;
-    height: 16px;
-    border-radius: 3px;
-    border: 1px solid var(--border-weak-base);
-    background: var(--surface-base);
-    box-shadow: none;
-    transition:
-      background-color 150ms,
-      border-color 150ms;
-  }
-
-  [data-slot="switch-thumb"] {
-    box-sizing: content-box;
-    width: 14px;
-    height: 14px;
-    border-radius: 2px;
-    border: 1px solid var(--border-base);
-    background: var(--icon-invert-base);
-    box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
-    transform: translateX(-1px);
-    transition:
-      transform 150ms,
-      background-color 150ms;
-  }
-
-  [data-slot="switch-label"] {
-    color: var(--text-base);
-    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);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-error"] {
-    color: var(--text-error);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background: var(--surface-hover);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    width: 14px;
-    border-radius: 2px;
-  }
-
-  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
-    border-color: var(--border-focus);
-    outline: none;
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  &[data-checked] [data-slot="switch-control"] {
-    border-color: var(--icon-strong-base);
-    background: var(--icon-strong-base);
-    box-shadow: none;
-  }
-
-  &[data-checked] [data-slot="switch-thumb"],
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    width: 14px;
-    border: none;
-    border-radius: 2px;
-    transform: translateX(12px);
-    background: var(--icon-invert-base);
-  }
-
-  &:dir(rtl)[data-checked] [data-slot="switch-thumb"],
-  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    transform: translateX(-12px);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background: var(--surface-hover);
-  }
-
-  &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
-    background: var(--surface-disabled);
-    opacity: 1;
-  }
-
-  &[data-disabled] [data-slot="switch-thumb"] {
-    background: var(--icon-disabled);
-  }
-
-  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--border-error);
-  }
-}

package/src/v2/components/switch-v2.tsx

@@ -0,0 +1,28 @@
+import { Switch as Kobalte } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch-v2.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+  hideLabel?: boolean
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
+  return (
+    <Kobalte {...others} class={local.class} data-component="switch">
+      <Kobalte.Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Kobalte.Label>
+        )}
+      </Show>
+      <Kobalte.Control data-slot="switch-control">
+        <Kobalte.Thumb data-slot="switch-thumb" />
+      </Kobalte.Control>
+      <Kobalte.ErrorMessage data-slot="switch-error" />
+    </Kobalte>
+  )
+}

package/src/{navigation/tabs/tabs-current.css → v2/components/tabs-v2.css}

@@ -68,29 +68,22 @@
   box-shadow: none;
 }
 
-[data-slot="tabs-v2-trigger-close-button"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-inline-start: -5px;
-  flex: none;
-}
-
-[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
   width: 20px;
   height: 20px;
-  padding: 0;
+  margin-inline-start: -5px;
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--v2-text-text-faint);
 }
 
-[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"]:hover {
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"] [data-component="icon-button-v2"] {
+[data-component="tabs-v2"] [data-component="icon-button"] {
   margin: 0;
 }
 
@@ -182,7 +175,7 @@
   border: 0.5px solid var(--v2-border-border-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] > [data-slot="tabs-v2-list"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
   flex-direction: column;
   width: 240px;
   min-width: 200px;
@@ -193,9 +186,7 @@
   border-inline-end: 1px solid var(--v2-border-border-base);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-section-title"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
   width: 100%;
   padding-inline-start: 4px;
   color: var(--v2-text-text-muted);
@@ -204,9 +195,7 @@
   user-select: none;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger-wrapper"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"] {
   width: 100%;
   height: 28px;
   border-radius: 4px;
@@ -214,9 +203,7 @@
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
   width: 100%;
   height: 100%;
   justify-content: flex-start;
@@ -225,14 +212,12 @@
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);

package/src/v2/components/tabs-v2.tsx

@@ -0,0 +1,149 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps, ParentProps, Component } from "solid-js"
+import { useI18n } from "../../context/i18n"
+import "./tabs-v2.css"
+
+export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
+  variant?: "normal" | "pill" | "settings"
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {}
+export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  onMiddleClick?: () => void
+  /** Optional subtext shown beside the primary content (muted style) */
+  subtext?: JSX.Element | string
+}
+export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {}
+export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function TabsV2Root(props: TabsV2Props) {
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
+  return (
+    <Kobalte
+      {...rest}
+      orientation={split.orientation}
+      data-component="tabs-v2"
+      data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2List(props: TabsV2ListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="tabs-v2-list"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
+  return (
+    <div
+      data-slot="tabs-v2-trigger-wrapper"
+      data-value={props.value}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      onMouseDown={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+        }
+      }}
+      onAuxClick={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+          split.onMiddleClick()
+        }
+      }}
+    >
+      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
+        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+          {split.children}
+          <Show when={split.subtext}>
+            {(subtext) => (
+              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
+                {subtext()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </Kobalte.Trigger>
+    </div>
+  )
+}
+
+function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const i18n = useI18n()
+  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
+  return (
+    <div
+      role="button"
+      tabindex={0}
+      aria-label={i18n.t("ui.tabs.close")}
+      data-slot="tabs-v2-close-button"
+      {...rest}
+      classList={{
+        [split.class ?? ""]: !!split.class,
+        ...split.classList,
+      }}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (typeof split.onClick === "function") {
+          split.onClick(e)
+        }
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
+        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
+      </svg>
+    </div>
+  )
+}
+
+function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="tabs-v2-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+const TabsV2SectionTitle: Component<ParentProps> = (props) => {
+  return <div data-slot="tabs-v2-section-title">{props.children}</div>
+}
+
+export const TabsV2 = Object.assign(TabsV2Root, {
+  List: TabsV2List,
+  Trigger: TabsV2Trigger,
+  CloseButton: TabsV2CloseButton,
+  Content: TabsV2Content,
+  SectionTitle: TabsV2SectionTitle,
+})

package/src/{forms/text-input/text-input.tsx → v2/components/text-input-v2.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Icon } from "./icon"
 import { useI18n } from "../../context/i18n"
-import "./text-input.css"
+import "./text-input-v2.css"
 
-export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
+export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
   /** Icon or adornment shown before the field value. */
   leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
@@ -25,7 +25,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
   type?: ComponentProps<"input">["type"]
 }
 
-export function TextInput(props: TextInputProps) {
+export function TextInputV2(props: TextInputV2Props) {
   const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",