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

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

@@ -1,18 +1,16 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge.css"
+import "./badge-v2.css"
 
-export interface BadgeProps extends ComponentProps<"span"> {
-  appearance?: "standard" | "compact"
+export interface TagProps extends ComponentProps<"span"> {
   variant?: "neutral" | "accent"
 }
 
-export function Badge(props: BadgeProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
-      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,

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

@@ -260,32 +260,3 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-/* Ghost faint */
-[data-component="button-v2"][data-variant="ghost-faint"] {
-  background-color: transparent;
-  color: var(--v2-text-text-faint);
-}
-
-[data-component="button-v2"][data-variant="ghost-faint"] [data-slot="icon-svg"] {
-  color: var(--v2-icon-icon-faint);
-}
-
-[data-component="button-v2"][data-variant="ghost-faint"]:is(:hover, [data-state="hover"]):not(:disabled):not(
-    [data-expanded]
-  ) {
-  background-color: var(--v2-overlay-simple-overlay-hover);
-}
-
-[data-component="button-v2"][data-variant="ghost-faint"]:is(:active, [data-state="pressed"]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-pressed);
-}
-
-[data-component="button-v2"][data-variant="ghost-faint"]:where([data-expanded]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-pressed);
-}
-
-[data-component="button-v2"][data-variant="ghost-faint"]:is(:disabled, [data-state="disabled"]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

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

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

package/src/v2/components/checkbox-v2.css

@@ -0,0 +1,184 @@
+[data-slot="checkbox-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: default;
+
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  [data-slot="checkbox-v2-error"] {
+    color: var(--v2-state-fg-danger);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-v2-error"]:empty {
+    display: none;
+  }
+}
+
+[data-slot="checkbox-v2-row"] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 8px;
+
+  [data-slot="checkbox-v2-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="checkbox-v2-control-stack"] {
+    position: relative;
+    width: 16px;
+    height: 20px;
+    flex: none;
+  }
+
+  [data-slot="checkbox-v2-control"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    flex: none;
+    flex-shrink: 0;
+    left: 0;
+    top: calc(50% - 16px / 2);
+    border-radius: 4px;
+    border: none;
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    transition:
+      background 170ms ease-out,
+      opacity 170ms ease-out,
+      outline-color 170ms ease-out;
+  }
+
+  [data-slot="checkbox-v2-indicator"] {
+    position: absolute;
+    inset: 0;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  [data-slot="checkbox-v2-text"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 6px;
+  }
+
+  [data-slot="checkbox-v2-label"] {
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    font-style: normal;
+    font-weight: 440;
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="checkbox-v2-label-text"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-base);
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
+  [data-slot="checkbox-v2-description"] {
+    color: var(--v2-text-text-muted);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+}
+
+[data-slot="checkbox-v2"]:where(:not([data-readonly]))
+  [data-slot="checkbox-v2-input"]:focus-visible
+  ~ [data-slot="checkbox-v2-control-stack"]
+  [data-slot="checkbox-v2-control"] {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+
+[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
+    :not([data-checked], [data-indeterminate])
+  )
+  [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
+  opacity: 0.5;
+}
+
+[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+}
+
+[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
+    :not([data-disabled], [data-readonly])
+  )
+  [data-slot="checkbox-v2-control"] {
+  background:
+    linear-gradient(
+      0deg,
+      var(--v2-overlay-simple-overlay-contrast-hover),
+      var(--v2-overlay-simple-overlay-contrast-hover)
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+}
+
+[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
+  [data-slot="checkbox-v2-control"] {
+  background: var(--v2-state-bg-danger);
+  box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
+}
+
+[data-slot="checkbox-v2"] .checkbox-v2-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
+  display: block;
+}
+
+[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
+  display: block;
+}
+
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
+[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,65 @@
+import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import "./checkbox-v2.css"
+
+export interface CheckboxV2Props extends ComponentProps<typeof Kobalte> {
+  label: JSX.Element
+  description?: JSX.Element
+  hideLabel?: boolean
+}
+
+export function CheckboxV2(props: CheckboxV2Props) {
+  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+  return (
+    <Kobalte
+      {...others}
+      data-slot="checkbox-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="checkbox-v2-row">
+        <Kobalte.Input data-slot="checkbox-v2-input" />
+        <div data-slot="checkbox-v2-control-stack">
+          <Kobalte.Control data-slot="checkbox-v2-control">
+            <Kobalte.Indicator data-slot="checkbox-v2-indicator">
+              <svg
+                class="checkbox-v2-icon checkbox-v2-icon--check"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25" stroke="#FAFAFA" stroke-width="1" />
+              </svg>
+              <svg
+                class="checkbox-v2-icon checkbox-v2-icon--minus"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path d="M12.75 8H3.25" stroke="#FAFAFA" stroke-linejoin="round" stroke-width="1" />
+              </svg>
+            </Kobalte.Indicator>
+          </Kobalte.Control>
+        </div>
+        <Kobalte.Label data-slot="checkbox-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <div data-slot="checkbox-v2-text">
+            <span data-slot="checkbox-v2-label-text">{local.label}</span>
+            <Show when={local.description}>
+              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
+            </Show>
+          </div>
+        </Kobalte.Label>
+      </div>
+      <Kobalte.ErrorMessage data-slot="checkbox-v2-error" />
+    </Kobalte>
+  )
+}

package/src/{overlays/dialog/dialog.css → v2/components/dialog-v2.css}

@@ -93,9 +93,6 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
-          min-width: 0;
-          max-width: 100%;
-          overflow-wrap: anywhere;
           user-select: none;
           font-weight: 440;
           font-size: 13px;

package/src/{overlays/dialog/dialog.tsx → v2/components/dialog-v2.tsx}

@@ -1,7 +1,7 @@
-import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog.css"
+import "./dialog-v2.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Title data-slot="dialog-header-title">{props.children}</Title>
+  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
-      <Description data-slot="dialog-description">{description()}</Description>
+      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
+      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      <Show when={!hideClose()}>
-        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      {!hideClose() && (
+        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </CloseButton>
-      </Show>
+        </Kobalte.CloseButton>
+      )}
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Content
+        <Kobalte.Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,8 +108,10 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Content>
+        </Kobalte.Content>
       </div>
     </div>
   )
 }
+
+export const DialogV2 = Dialog

package/src/v2/components/diff-changes-v2.css

@@ -0,0 +1,26 @@
+[data-component="diff-changes"] {
+  display: flex;
+  direction: ltr;
+  unicode-bidi: isolate;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    text-align: right;
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}

package/src/{data-display/diff-changes/diff-changes.tsx → v2/components/diff-changes-v2.tsx}

@@ -1,9 +1,8 @@
 import { createMemo, Show } from "solid-js"
-import "./diff-changes.css"
+import "./diff-changes-v2.css"
 
 export function DiffChanges(props: {
   class?: string
-  appearance?: "standard" | "compact"
   changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
 }) {
   const additions = createMemo(() =>
@@ -20,11 +19,7 @@ export function DiffChanges(props: {
 
   return (
     <Show when={total() > 0}>
-      <div
-        data-component="diff-changes"
-        data-appearance={props.appearance ?? "compact"}
-        classList={{ [props.class ?? ""]: true }}
-      >
+      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
         <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
         <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
       </div>

package/src/{layout/divider/divider.tsx → v2/components/divider-v2.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./divider.css"
+import "./divider-v2.css"
 
-export interface DividerProps extends ComponentProps<"div"> {}
+export interface DividerV2Props extends ComponentProps<"div"> {}
 
-export function Divider(props: DividerProps) {
+export function DividerV2(props: DividerV2Props) {
   const [local, rest] = splitProps(props, ["class", "classList"])
   return (
     <div

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

@@ -20,7 +20,7 @@
   font-style: normal;
   font-weight: 530;
   font-size: 13px;
-  line-height: var(--line-height-compact);
+  line-height: 1;
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;

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

@@ -11,8 +11,8 @@ import {
   type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import "./field.css"
+import { TooltipV2 } from "./tooltip-v2"
+import "./field-v2.css"
 
 type FieldContextValue = {
   controlId: string
@@ -40,14 +40,14 @@ function useField() {
 const CONTROL_SELECTOR = [
   "[data-slot='text-input-v2-input']",
   "[data-slot='textarea-v2-textarea']",
-  "[data-component='inline-input']",
+  "[data-slot='inline-input-v2-input']",
 ].join(", ")
 
-export interface FieldProps extends ComponentProps<"div"> {
+export interface FieldV2Props extends ComponentProps<"div"> {
   invalid?: boolean
 }
 
-function FieldRoot(props: ParentProps<FieldProps>) {
+function FieldV2Root(props: ParentProps<FieldV2Props>) {
   const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
 
   const controlId = `field-control-${createUniqueId()}`
@@ -86,7 +86,7 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     if (!control) return
 
     const shell = control.closest(
-      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input-v2']",
     ) as HTMLElement | null
 
     control.id = controlId
@@ -173,7 +173,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
       <span data-slot="field-v2-label-text">{local.children}</span>
       <Show when={local.tooltip}>
         {(tooltip) => (
-          <Tooltip value={tooltip()}>
+          <TooltipV2 value={tooltip()}>
             <button
               type="button"
               data-slot="field-v2-label-info"
@@ -182,7 +182,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
             >
               <FieldLabelInfoIcon />
             </button>
-          </Tooltip>
+          </TooltipV2>
         )}
       </Show>
     </label>
@@ -255,9 +255,11 @@ function FieldControl(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export const Field = Object.assign(FieldRoot, {
+export const FieldV2 = Object.assign(FieldV2Root, {
   Label: FieldLabel,
   Prefix: FieldPrefix,
   Suffix: FieldSuffix,
   Control: FieldControl,
 })
+
+export const Field = FieldV2

package/src/v2/components/icon-button-v2.tsx

@@ -0,0 +1,37 @@
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button-v2.css"
+
+export interface IconButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  // temporary
+  icon?: JSX.Element
+  // icon: IconProps["name"]
+  size?: "small" | "normal" | "large"
+  // iconSize?: IconProps["size"]
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButtonV2(props: ComponentProps<"button"> & IconButtonV2Props) {
+  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList", "state"])
+  return (
+    <Kobalte
+      {...rest}
+      data-component="icon-button-v2"
+      // data-icon={props.icon}
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-state={split.state}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.icon}
+      {/*<Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />*/}
+    </Kobalte>
+  )
+}