@opencode/ui 0.0.0-beta-19289 → 0.0.0-beta-19365

package/dist/actions/button/button.d.ts

@@ -4,7 +4,7 @@ import { type IconProps } from "@opencode/ui/icon";
 import "./button.css";
 export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
     size?: "small" | "normal" | "large";
-    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
+    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "submit" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
     icon?: IconProps["name"];
 }
 export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/actions/icon-button/icon-button.d.ts

@@ -5,7 +5,7 @@ import "./icon-button.css";
 export interface IconButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList"> {
     icon?: JSX.Element;
     size?: "small" | "normal" | "large";
-    variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
+    variant?: "neutral" | "contrast" | "submit" | "ghost" | "ghost-muted";
     state?: "rest" | "hover" | "pressed";
 }
 export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;

package/dist/i18n/en.d.ts

@@ -108,7 +108,8 @@ declare const source: {
     "ui.messagePart.context.thought.other": string;
     "ui.messagePart.context.match.one": string;
     "ui.messagePart.context.match.other": string;
-    "ui.messagePart.tools.used": string;
+    "ui.messagePart.tools.used.one": string;
+    "ui.messagePart.tools.used.other": string;
     "ui.list.loading": string;
     "ui.list.empty": string;
     "ui.list.clearFilter": string;

package/dist/icons/icon/icon.d.ts

@@ -2,6 +2,10 @@ import { type ComponentProps } from "solid-js";
 import { additionalIcons } from "./additional-icons";
 import "./icon.css";
 declare const icons: {
+    lock: {
+        viewBox: string;
+        body: string;
+    };
     flask: {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "0.0.0-beta-19289",
+  "version": "0.0.0-beta-19365",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/actions/button/button.css

@@ -1,3 +1,5 @@
+@import "../submit.css";
+
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/src/actions/button/button.tsx

@@ -13,6 +13,7 @@ export interface ButtonProps
     | "warning"
     | "outline"
     | "contrast"
+    | "submit"
     | "ghost"
     | "ghost-muted"
     | "ghost-faint"

package/src/actions/icon-button/icon-button.css

@@ -1,3 +1,5 @@
+@import "../submit.css";
+
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -69,61 +71,6 @@
   cursor: not-allowed;
 }
 
-/* Contrast */
-[data-component="icon-button-v2"][data-variant="contrast"] {
-  --icon-button-contrast-highlight: var(--v2-alpha-light-20);
-  --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
-
-  background-image:
-    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-  color: var(--v2-text-text-contrast);
-  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
-  box-shadow: var(--v2-elevation-button-contrast);
-}
-
-[data-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
-  --icon-button-contrast-highlight: var(--v2-alpha-light-60);
-  --icon-button-contrast-hover: var(--v2-alpha-dark-8);
-
-  color: var(--v2-icon-icon-inverse);
-}
-
-[data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
-  background-image:
-    linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
-    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-}
-
-[data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
-      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
-    ),
-    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-}
-
-[data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 /* Ghost */
 [data-component="icon-button-v2"][data-variant="ghost"] {
   background-color: transparent;

package/src/actions/icon-button/icon-button.tsx

@@ -8,7 +8,7 @@ export interface IconButtonProps
     Pick<ComponentProps<"button">, "class" | "classList"> {
   icon?: JSX.Element
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  variant?: "neutral" | "contrast" | "submit" | "ghost" | "ghost-muted"
   state?: "rest" | "hover" | "pressed"
 }
 

package/src/actions/submit.css

@@ -0,0 +1,74 @@
+/* Shared by Composer submit actions and contrast icon buttons. */
+:is(
+  [data-component="button-v2"][data-variant="submit"],
+  [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+) {
+  --submit-highlight: var(--v2-alpha-light-20);
+  --submit-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+
+  background-image:
+    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+  color: var(--v2-text-text-contrast);
+  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--v2-elevation-button-contrast);
+}
+
+[data-color-scheme="dark"]
+  :is(
+    [data-component="button-v2"][data-variant="submit"],
+    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+  ) {
+  --submit-highlight: var(--v2-alpha-light-60);
+  --submit-hover: var(--v2-alpha-dark-8);
+
+  color: var(--v2-text-text-inverse);
+}
+
+[data-color-scheme="dark"] [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"]) {
+  color: var(--v2-icon-icon-inverse);
+}
+
+:is(
+    [data-component="button-v2"][data-variant="submit"],
+    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+  ):is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
+    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+:is(
+    [data-component="button-v2"][data-variant="submit"],
+    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+  ):is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
+    ),
+    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+:is(
+  [data-component="button-v2"][data-variant="submit"],
+  [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+):is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/i18n/en.ts

@@ -114,11 +114,12 @@ const source = {
   "ui.messagePart.context.list.other": "{{count}} lists",
   "ui.messagePart.context.notice.one": "{{count}} Notice",
   "ui.messagePart.context.notice.other": "{{count}} Notices",
-  "ui.messagePart.context.thought.one": "{{count}} Thought",
-  "ui.messagePart.context.thought.other": "{{count}} Thoughts",
+  "ui.messagePart.context.thought.one": "Thought",
+  "ui.messagePart.context.thought.other": "Thoughts",
   "ui.messagePart.context.match.one": "({{count}} match)",
   "ui.messagePart.context.match.other": "({{count}} matches)",
-  "ui.messagePart.tools.used": "Used {{tools}}",
+  "ui.messagePart.tools.used.one": "{{count}} used {{tools}}",
+  "ui.messagePart.tools.used.other": "{{count}} used {{tools}}",
 
   "ui.list.loading": "Loading",
   "ui.list.empty": "No results",

package/src/icons/icon/icon.tsx

@@ -4,6 +4,10 @@ import "./icon.css"
 
 // Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
+  lock: {
+    viewBox: "0 0 16 16",
+    body: `<rect x="3.5" y="7" width="9" height="7" rx="1" stroke="currentColor"/><path d="M5 7V5a3 3 0 0 1 6 0v2M8 10v1" stroke="currentColor" stroke-linecap="round"/>`,
+  },
   flask: {
     viewBox: "0 0 16 16",
     body: `<path d="M5.5 2H10.5M6 2V6L2.5 12C2 13 2.5 14 3.5 14H12.5C13.5 14 14 13 13.5 12L10 6V2M4.25 9H11.75" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,