@tangle-network/ui 11.8.0 → 11.10.0

package/src/primitives/toast.tsx

@@ -9,6 +9,7 @@ import {
   X,
 } from "lucide-react";
 import * as React from "react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 const toastVariants = cva(
@@ -76,7 +77,10 @@ function ToastComponent({
       <button
         type="button"
         onClick={() => onDismiss(id)}
-        className="shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
+        className={cn(
+          "shrink-0 rounded-md p-1 opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100",
+          focusRing,
+        )}
         aria-label="Dismiss notification"
       >
         <X className="h-4 w-4" />

package/src/tool-previews/command-preview.tsx

@@ -5,6 +5,7 @@ import {
   ChevronRight,
   Loader2,
 } from "lucide-react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import type { ToolPart } from "../types/parts";
 import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives";
@@ -76,7 +77,10 @@ export const CommandPreview = memo(({ part }: CommandPreviewProps) => {
     >
       <button
         onClick={() => setExpanded((value) => !value)}
-        className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-accent-hover)] hover:bg-accent/45"
+        className={cn(
+          "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-strong)] hover:bg-accent/45",
+          focusRing,
+        )}
       >
         <code className="min-w-0 flex-1 truncate text-xs font-mono text-foreground">
           {command}

package/src/tool-previews/web-search-preview.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo } from "react";
 import { Globe } from "lucide-react";
+import { focusRing } from "../lib/focus";
 import type { ToolPart } from "../types/parts";
 import { PreviewCard, PreviewEmpty, PreviewError, PreviewLoading } from "./preview-primitives";
 
@@ -94,7 +95,7 @@ export const WebSearchPreview = memo(({ part }: WebSearchPreviewProps) => {
             href={result.url}
             target="_blank"
             rel="noreferrer"
-            className="block rounded-[var(--radius-md)] border border-border bg-muted/55 px-3 py-3 transition-colors hover:border-[var(--border-accent-hover)] hover:bg-accent/50"
+            className={`block rounded-[var(--radius-md)] border border-border bg-muted/55 px-3 py-3 transition-colors hover:border-[var(--border-strong)] hover:bg-accent/50 ${focusRing}`}
           >
             <div className="text-sm font-medium text-foreground">
               {result.title}

package/src/utils/index.ts

@@ -8,3 +8,10 @@ export {
   TOOL_CATEGORY_ICONS,
 } from './tool-display';
 export { cn } from '../lib/utils';
+export {
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
+} from '../lib/focus';

package/dist/document-editor-pane-A3JURPW5.js

@@ -1,12 +0,0 @@
-"use client";
-import {
-  DocumentEditorPane
-} from "./chunk-QGTIBEPX.js";
-import "./chunk-Q56BYXQF.js";
-import "./chunk-LTEKI7YJ.js";
-import "./chunk-P5F43A65.js";
-import "./chunk-WUQDUBJG.js";
-import "./chunk-RQHJBTEU.js";
-export {
-  DocumentEditorPane
-};