@opencode-ai/ui 1.18.11 → 1.18.13

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

@@ -1,6 +1,7 @@
 import { Tabs as Kobalte } from "@kobalte/core/tabs"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps, Component } from "solid-js"
+import { useI18n } from "../../context/i18n"
 import "./tabs-v2.css"
 
 export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
@@ -74,7 +75,7 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
           {split.children}
           <Show when={split.subtext}>
             {(subtext) => (
-              <span data-slot="tabs-v2-subtext" class="ml-2 text-xs text-text-weak">
+              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
                 {subtext()}
               </span>
             )}
@@ -86,12 +87,13 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
 }
 
 function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const i18n = useI18n()
   const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
   return (
     <div
       role="button"
       tabindex={0}
-      aria-label="Close tab"
+      aria-label={i18n.t("ui.tabs.close")}
       data-slot="tabs-v2-close-button"
       {...rest}
       classList={{

package/src/v2/components/text-input-v2.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: 0 8px 0 0;
+  padding-block: 0;
+  padding-inline: 0 8px;
   gap: 8px;
   width: 280px;
   height: 28px;
@@ -64,7 +65,7 @@
   flex: none;
   align-items: center;
   justify-content: center;
-  padding-left: 8px;
+  padding-inline-start: 8px;
   color: var(--v2-icon-icon-muted);
 }
 
@@ -74,7 +75,7 @@
 }
 
 [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
@@ -82,7 +83,8 @@
   width: 100%;
   min-width: 0;
   height: 100%;
-  padding: 0 0 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 0;
   margin: 0;
   border: 0;
   background: transparent;
@@ -165,7 +167,7 @@
   height: 28px;
   padding: 0;
   border-radius: 6px;
-  margin-right: -8px;
+  margin-inline-end: -8px;
 }
 
 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {

package/src/v2/components/text-input-v2.tsx

@@ -1,5 +1,6 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
 import { Icon } from "./icon"
+import { useI18n } from "../../context/i18n"
 import "./text-input-v2.css"
 
 export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
@@ -25,6 +26,7 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
 }
 
 export function TextInputV2(props: TextInputV2Props) {
+  const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
@@ -71,7 +73,11 @@ export function TextInputV2(props: TextInputV2Props) {
           type="button"
           data-slot="text-input-v2-icon-button"
           data-variant={local.showClearButton ? "clear" : "copy"}
-          aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
+          aria-label={
+            local.showClearButton
+              ? (local.clearLabel ?? i18n.t("ui.common.clear"))
+              : (local.copyLabel ?? i18n.t("ui.message.copy"))
+          }
           disabled={local.disabled}
           onMouseDown={(event) => {
             if (!local.showClearButton) return

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

@@ -1,13 +1,16 @@
 import { Toaster, toast, type ToasterProps } from "solid-sonner"
+import { isRTL } from "@kobalte/core/i18n"
 import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
+import { useI18n } from "../../context/i18n"
 import "./button-v2.css"
 import "./toast-v2.css"
 
 export interface ToastV2RegionProps extends ToasterProps {}
 
 function ToastV2Region(props: ToastV2RegionProps) {
+  const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
     const sync = () => {
@@ -44,8 +47,8 @@ function ToastV2Region(props: ToastV2RegionProps) {
   return (
     <Portal>
       <Toaster
-        position="bottom-right"
-        offset={{ right: 32, bottom: 48 }}
+        position={isRTL(i18n.locale()) ? "bottom-left" : "bottom-right"}
+        offset={isRTL(i18n.locale()) ? { left: 32, bottom: 48 } : { right: 32, bottom: 48 }}
         mobileOffset={16}
         gap={12}
         duration={5000}
@@ -56,7 +59,7 @@ function ToastV2Region(props: ToastV2RegionProps) {
           ...local.toastOptions,
           unstyled: true,
           closeButton: true,
-          closeButtonAriaLabel: local.toastOptions?.closeButtonAriaLabel ?? "Dismiss",
+          closeButtonAriaLabel: local.toastOptions?.closeButtonAriaLabel ?? i18n.t("ui.common.dismiss"),
         }}
         {...rest}
       />
@@ -96,13 +99,14 @@ function ToastV2Actions(props: ComponentProps<"div">) {
 }
 
 function ToastV2CloseButton(props: ComponentProps<"button">) {
+  const i18n = useI18n()
   const toastId = useContext(ToastV2Context)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
       type="button"
       data-slot="toast-v2-close-button"
-      aria-label="Dismiss"
+      aria-label={i18n.t("ui.common.dismiss")}
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)

package/dist/context/marked-code-span.d.ts

@@ -1,10 +0,0 @@
-export declare const markedCodeSpanBoundary: {
-    tokenizer: {
-        inlineText(this: import("marked").Tokenizer<string, string>, src: string): false | {
-            type: "text";
-            raw: string;
-            text: string;
-            escaped: boolean;
-        };
-    };
-};

package/src/context/marked-code-span.ts

@@ -1,17 +0,0 @@
-import type { MarkedExtension } from "marked"
-
-// Keep adjacent tilde and backtick runs separate until markedjs/marked#4011 is released.
-export const markedCodeSpanBoundary = {
-  tokenizer: {
-    inlineText(src) {
-      const match = /^(`+(?=~)|~+(?=`))/.exec(src)
-      if (!match) return false
-      return {
-        type: "text",
-        raw: match[0],
-        text: match[0],
-        escaped: this.lexer.state.inRawBlock,
-      }
-    },
-  },
-} satisfies MarkedExtension