@opencode-ai/ui 0.0.0-tui-v2-202606261840 → 1.17.12

package/dist/components/progress-circle.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "solid-js";
-export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
     percentage: number;
     size?: number;
     strokeWidth?: number;

package/dist/v2/components/button-v2.d.ts

@@ -4,7 +4,7 @@ import { 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" | "contrast" | "ghost" | "ghost-muted";
+    variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "outline";
     icon?: IconProps["name"];
 }
 export declare function ButtonV2(props: ButtonV2Props): import("solid-js").JSX.Element;

package/dist/v2/components/dialog-v2.d.ts

@@ -23,3 +23,4 @@ export declare function DialogTitle(props: ParentProps): import("solid-js").JSX.
 export declare function DialogTitleGroup(props: DialogTitleGroupProps): import("solid-js").JSX.Element;
 export declare function DialogHeader(props: DialogHeaderProps): import("solid-js").JSX.Element;
 export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;
+export declare const DialogV2: typeof Dialog;

package/dist/v2/components/icon.d.ts

@@ -84,6 +84,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-copy": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-square-arrow": {
+        viewBox: string;
+        body: string;
+    };
     archive: {
         viewBox: string;
         body: string;

package/dist/v2/components/progress-circle-v2.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps } from "solid-js";
+import "./progress-circle-v2.css";
+export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+    percentage: number;
+    size?: number;
+    strokeWidth?: number;
+}
+export declare function ProgressCircleV2(props: ProgressCircleV2Props): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-tui-v2-202606261840",
+  "version": "1.17.12",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -106,15 +106,16 @@
     "generate:v2-oc2": "bun run script/build-oc2-v2-overrides.ts"
   },
   "devDependencies": {
+    "@solidjs/meta": "0.29.4",
     "@tailwindcss/vite": "4.1.11",
     "@tsconfig/node22": "22.0.2",
     "@types/bun": "1.3.13",
     "@types/katex": "0.16.7",
     "@types/luxon": "3.7.1",
     "@typescript/native-preview": "7.0.0-dev.20251207.1",
-    "@solidjs/meta": "0.29.4",
     "solid-js": "1.9.10",
     "tailwindcss": "4.1.11",
+    "tw-animate-css": "1.4.0",
     "typescript": "5.8.2",
     "vite": "7.1.4",
     "vite-plugin-icons-spritesheet": "3.0.1",

package/src/components/progress-circle.css

@@ -2,11 +2,15 @@
   transform: rotate(-90deg);
 
   [data-slot="progress-circle-background"] {
-    stroke: var(--border-weak-base);
+    stroke: var(--progress-circle-background, var(--border-weak-base));
+  }
+
+  [data-slot="progress-circle-background-overlay"] {
+    stroke: var(--progress-circle-background-overlay, transparent);
   }
 
   [data-slot="progress-circle-progress"] {
-    stroke: var(--border-active);
+    stroke: var(--progress-circle-progress, var(--border-active));
     transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
   }
 }

package/src/components/progress-circle.tsx

@@ -1,6 +1,6 @@
 import { type ComponentProps, createMemo, splitProps } from "solid-js"
 
-export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
   percentage: number
   size?: number
   strokeWidth?: number
@@ -43,6 +43,13 @@ export function ProgressCircle(props: ProgressCircleProps) {
         data-slot="progress-circle-background"
         stroke-width={strokeWidth()}
       />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-background-overlay"
+        stroke-width={strokeWidth()}
+      />
       <circle
         cx={center}
         cy={center}

package/src/components/select.css

@@ -140,9 +140,6 @@
 
     color: var(--text-strong);
 
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
     outline: none;
     user-select: none;
 

package/src/components/tooltip.tsx

@@ -107,6 +107,8 @@ export function Tooltip(props: TooltipProps) {
       <Match when={true}>
         <KobalteTooltip
           gutter={4}
+          openDelay={400}
+          skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}

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

@@ -113,6 +113,26 @@
   cursor: not-allowed;
 }
 
+/* Outline */
+[data-component="button-v2"][data-variant="outline"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Contrast */
 [data-component="button-v2"][data-variant="contrast"] {
   background-image:

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

@@ -7,7 +7,7 @@ export interface ButtonV2Props
   extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted"
+  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "outline"
   icon?: IconProps["name"]
 }
 

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

@@ -59,6 +59,7 @@
           margin: 0;
           flex: 1;
           min-width: 0;
+          user-select: none;
           font-weight: 530;
           font-size: 13px;
           line-height: 16px;
@@ -80,6 +81,7 @@
           margin: 0;
           flex: none;
           flex-grow: 0;
+          user-select: none;
           font-weight: 530;
           font-size: 15px;
           line-height: 20px;
@@ -91,6 +93,7 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
+          user-select: none;
           font-weight: 440;
           font-size: 13px;
           line-height: 20px;

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

@@ -110,3 +110,5 @@ export function Dialog(props: DialogProps) {
     </div>
   )
 }
+
+export const DialogV2 = Dialog

package/src/v2/components/icon.tsx

@@ -85,6 +85,14 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor"/><path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor"/><path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor"/>`,
   },
+  "outline-copy": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M4.14908 11.0081H1.76282V1.51758H9.1038V2.55588M14.2225 4.99681H6.75397V14.4873H14.2225V4.99681Z" stroke="currentColor"/>`,
+  },
+  "outline-square-arrow": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M13.5555 6.66656V2.44434H9.33326M13.5555 2.44434L7.99993 7.99989M13.5555 9.33324V13.5555C13.5555 13.5555 12.7599 13.5555 11.7777 13.5555H2.44438C2.44438 13.5555 2.44438 12.7599 2.44438 11.7777V4.22213C2.44438 3.2399 2.44434 2.44435 2.44434 2.44435H6.66661" stroke="currentColor"/>`,
+  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,

package/src/v2/components/progress-circle-v2.css

@@ -0,0 +1,13 @@
+[data-component="progress-circle-v2"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-progress"] {
+  stroke: var(--v2-icon-icon-muted);
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/v2/components/progress-circle-v2.tsx

@@ -0,0 +1,52 @@
+import { type ComponentProps, createMemo, splitProps } from "solid-js"
+import "./progress-circle-v2.css"
+
+export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircleV2(props: ProgressCircleV2Props) {
+  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
+
+  const size = () => split.size ?? 14
+  const strokeWidth = () => split.strokeWidth ?? 1.5
+  const viewBoxSize = 14
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, split.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      data-component="progress-circle-v2"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-background"
+        stroke-width={strokeWidth()}
+      />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

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

@@ -55,3 +55,10 @@
     transform: scale(0.96);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="tooltip-v2"],
+  [data-component="tooltip-v2"][data-closed] {
+    animation: none;
+  }
+}

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

@@ -88,8 +88,9 @@ export function TooltipV2(props: TooltipV2Props) {
       <Match when={true}>
         <KobalteTooltip
           gutter={4}
+          openDelay={400}
+          skipDelayDuration={300}
           {...others}
-          openDelay={0}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
           open={local.forceOpen || state.open}