@opencode-ai/ui 0.0.0-dev-202607010703 → 0.0.0-dev-202607010816

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

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

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "solid-js";
+import "./loader-v2.css";
+export declare function LoaderV2(props: ComponentProps<"svg">): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202607010703",
+  "version": "0.0.0-dev-202607010816",
   "type": "module",
   "license": "MIT",
   "repository": {

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

@@ -28,7 +28,7 @@
   outline: none;
 }
 
-[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
   outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 2.5px;
 }
@@ -170,6 +170,15 @@
   cursor: not-allowed;
 }
 
+/* Loading */
+[data-component="button-v2"][data-variant="loading"] {
+  background: #f2f2f2;
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
+  cursor: default;
+  pointer-events: none;
+}
+
 /* Ghost */
 [data-component="button-v2"][data-variant="ghost"] {
   background-color: transparent;

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" | "outline"
+  variant?: "neutral" | "danger" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 

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

@@ -0,0 +1,32 @@
+[data-component="loader-v2"] {
+  --_duration: 900ms;
+  display: block;
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted, #808080);
+  animation: loader-v2-spin var(--_duration) linear infinite;
+  transform-origin: center;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-background"] {
+  stroke: currentColor;
+  opacity: 0.2;
+}
+
+[data-component="loader-v2"] [data-slot="loader-v2-progress"] {
+  stroke: currentColor;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+@keyframes loader-v2-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="loader-v2"] {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { splitProps, type ComponentProps } from "solid-js"
+import "./loader-v2.css"
+
+export function LoaderV2(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-component="loader-v2"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <circle cx="8" cy="8" r="6" data-slot="loader-v2-background" stroke-width="2" />
+      <circle
+        cx="8"
+        cy="8"
+        r="6"
+        data-slot="loader-v2-progress"
+        pathLength="100"
+        stroke-width="2"
+        stroke-dasharray="33 67"
+      />
+    </svg>
+  )
+}

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

@@ -45,6 +45,7 @@
 }
 
 [data-slot="radio-v2-item"] {
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -131,10 +132,6 @@
       linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
   }
 
-  &:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {
-    opacity: 0.5;
-  }
-
   &:where([data-invalid]):where(:not([data-checked])) [data-slot="radio-v2-item-control"] {
     background: var(--v2-state-bg-danger);
     box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
@@ -195,8 +192,11 @@
     user-select: none;
   }
 
-  &:where([data-disabled]) [data-slot="radio-v2-item-label"],
+  &:where([data-disabled]) [data-slot="radio-v2-item-label-text"] {
+    color: var(--v2-text-text-muted);
+  }
+
   &:where([data-disabled]) [data-slot="radio-v2-item-description"] {
-    opacity: 0.5;
+    color: var(--v2-text-text-faint);
   }
 }