@opencode/ui 0.0.0-dev-19515 → 0.0.0-dev-19518

package/dist/forms/text-input/text-input.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentProps, type JSX } from "solid-js";
+import { Icon } from "@opencode/ui/icon";
 import "./text-input.css";
 export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
     /** Icon or adornment shown before the field value. */
@@ -7,6 +8,8 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
     showCopyButton?: boolean;
     /** Show the trailing clear action. */
     showClearButton?: boolean;
+    /** Icon used by the trailing clear action. */
+    clearIcon?: ComponentProps<typeof Icon>["name"];
     /** Accessible label for the copy button. */
     copyLabel?: string;
     /** Accessible label for the clear button. */

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

@@ -50,6 +50,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "circle-xmark": {
+        viewBox: string;
+        body: string;
+    };
     "sidebar-right": {
         viewBox: string;
         body: string;

package/package.json

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

package/src/forms/text-input/text-input.tsx

@@ -10,6 +10,8 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
   showCopyButton?: boolean
   /** Show the trailing clear action. */
   showClearButton?: boolean
+  /** Icon used by the trailing clear action. */
+  clearIcon?: ComponentProps<typeof Icon>["name"]
   /** Accessible label for the copy button. */
   copyLabel?: string
   /** Accessible label for the clear button. */
@@ -33,6 +35,7 @@ export function TextInput(props: TextInputProps) {
     "leadingIcon",
     "showCopyButton",
     "showClearButton",
+    "clearIcon",
     "copyLabel",
     "clearLabel",
     "onCopyClick",
@@ -91,7 +94,7 @@ export function TextInput(props: TextInputProps) {
             local.onCopyClick?.(event)
           }}
         >
-          <Icon name={local.showClearButton ? "xmark-small" : "copy"} />
+          <Icon name={local.showClearButton ? (local.clearIcon ?? "xmark-small") : "copy"} />
         </button>
       </Show>
     </div>

package/src/icons/icon/icon.tsx

@@ -52,6 +52,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M8.75 11.75H7.25V10.25H8.75V11.75Z" fill="currentColor"/><path d="M8.75 9.25H7.25V4.25H8.75V9.25Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C9.93286 1 11.684 1.7836 12.9502 3.0498C14.2164 4.31601 15 6.06714 15 8C15 11.866 11.866 15 8 15C6.06714 15 4.31601 14.2164 3.0498 12.9502C1.7836 11.684 1 9.93286 1 8C1 4.13401 4.13401 1 8 1ZM8 2C4.68629 2 2 4.68629 2 8C2 9.65699 2.67148 11.1559 3.75781 12.2422C4.84415 13.3285 6.34301 14 8 14C11.3137 14 14 11.3137 14 8C14 6.34301 13.3285 4.84415 12.2422 3.75781C11.1559 2.67148 9.65699 2 8 2Z" fill="currentColor"/>`,
   },
+  "circle-xmark": {
+    viewBox: "0 0 16 16",
+    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33334 8.00016C1.33334 4.31826 4.31811 1.3335 8.00001 1.3335C11.6819 1.3335 14.6667 4.31826 14.6667 8.00016C14.6667 11.6821 11.6819 14.6668 8.00001 14.6668C4.31811 14.6668 1.33334 11.6821 1.33334 8.00016ZM6.00001 5.29306L5.2929 6.00016L7.2929 8.00016L5.2929 10.0002L6.00001 10.7073L8.00001 8.70727L10 10.7073L10.7071 10.0002L8.70712 8.00016L10.7071 6.00016L10 5.29306L8.00001 7.29306L6.00001 5.29306Z" fill="currentColor"/>`,
+  },
   "sidebar-right": {
     viewBox: "0 0 20 20",
     body: `<path d="M2.91536 2.91406H2.36536V2.36406H2.91536V2.91406ZM2.91536 17.0807V17.6307H2.36536V17.0807H2.91536ZM17.082 17.0807H17.632V17.6307H17.082V17.0807ZM17.082 2.91406V2.36406H17.632V2.91406H17.082ZM6.9987 2.91406H6.4487V2.36406H6.9987V2.91406ZM6.9987 17.0807V17.6307H6.4487V17.0807H6.9987ZM2.91536 2.91406H3.46536V17.0807H2.91536H2.36536V2.91406H2.91536ZM2.91536 17.0807V16.5307H17.082V17.0807V17.6307H2.91536V17.0807ZM17.082 17.0807H16.532V2.91406H17.082H17.632V17.0807H17.082ZM17.082 2.91406V3.46406H2.91536V2.91406V2.36406H17.082V2.91406ZM6.9987 2.91406H7.5487V17.0807H6.9987H6.4487V2.91406H6.9987ZM17.082 17.0807L17.082 17.6307L6.9987 17.6307V17.0807V16.5307L17.082 16.5307L17.082 17.0807ZM6.9987 2.91406V2.36406H17.082V2.91406V3.46406H6.9987V2.91406Z" fill="currentColor"/>`,

package/src/styles/tokens/theme.css

@@ -168,7 +168,7 @@
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
-      --v2-icon-icon-faint: var(--v2-grey-500);
+      --v2-icon-icon-faint: var(--v2-grey-700);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -411,7 +411,7 @@
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
+    --v2-icon-icon-faint: var(--v2-grey-700);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);

package/src/theme/themes/oc-2.json

@@ -430,7 +430,7 @@
       "v2-text-text-code-path": "var(--v2-blue-300)",
       "v2-icon-icon-base": "var(--v2-grey-400)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
-      "v2-icon-icon-faint": "var(--v2-grey-500)",
+      "v2-icon-icon-faint": "var(--v2-grey-700)",
       "v2-icon-icon-inverse": "var(--v2-grey-1100)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-400)",