kaleido-ui 0.1.108 → 0.1.109

package/dist/web/index.cjs

@@ -4711,7 +4711,7 @@ function ActivityList({
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center justify-center py-16", children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-4 flex size-16 items-center justify-center rounded-full bg-white/5", children: emptyIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultEmptyIcon, { name: "receipt_long" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "mb-1 text-base font-semibold", children: hasActiveFilters ? filteredEmptyTitle : emptyTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mb-4 max-w-[240px] text-center text-xs text-muted-foreground", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mb-4 max-w-[240px] text-center text-xs text-white/70", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
       hasActiveFilters && onClearFilters ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: "surface", size: "sm", onClick: onClearFilters, children: "Clear Filters" }) : renderEmptyActions?.()
     ] });
   }
@@ -4721,7 +4721,7 @@ function ActivityList({
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
-        className: "relative overflow-hidden rounded-2xl bg-surface-card bg-gradient-to-b from-white/[0.025] to-primary/[0.035] shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
+        className: "relative overflow-hidden rounded-2xl bg-card bg-none shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             TransactionCard,
@@ -4734,7 +4734,7 @@ function ActivityList({
               onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id),
-              className: "relative z-[1]"
+              className: cn("relative z-[1] bg-card", isExpanded && "shadow-none")
             }
           ),
           isExpanded && // -mt-4/pt-4 slides the details up behind the card's bottom
@@ -4766,63 +4766,69 @@ function ActivityFilterBar({
   onClearFilters,
   searchPlaceholder = "Search by txid, asset..."
 }) {
-  return (
-    // All three controls (search input, status dropdown, clear button) share
-    // the same h-11 height and rounded-2xl card radius so the bar reads as
-    // one family with the cards below it.
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-11 items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative h-full flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          AppIcon,
-          {
-            name: "search",
-            className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-white/40"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "text",
-            placeholder: searchPlaceholder,
-            value: searchTerm,
-            onChange: (event) => onSearchTermChange(event.target.value),
-            className: "h-full w-full rounded-2xl bg-surface-card pl-9 pr-8 text-xs text-white shadow-inner backdrop-blur-xl transition-all placeholder:text-white/30 focus:bg-surface-elevated focus:outline-none"
-          }
-        ),
-        searchTerm && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => onSearchTermChange(""),
-            className: "absolute right-2 top-1/2 -translate-y-1/2 text-white/40 transition-colors hover:text-white",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", className: "size-icon-sm" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-11 items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative h-full flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        AppIcon,
         {
-          value: statusFilter,
-          onValueChange: (value) => onStatusFilterChange(value),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectTrigger, { className: "h-full rounded-2xl border-0 bg-surface-card px-3 py-0 text-xs font-bold text-white shadow-inner backdrop-blur-xl hover:bg-surface-elevated focus:ring-0 data-[state=open]:bg-surface-elevated", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
-          ]
+          name: "search",
+          size: "sm",
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-white/30"
         }
-      ) }),
-      hasActiveFilters && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        Button,
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "input",
         {
-          variant: "surface",
-          size: "icon-lg",
-          onClick: onClearFilters,
-          title: "Clear Filters",
-          className: "h-11 w-11 shrink-0 rounded-2xl",
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", className: "size-icon-lg" })
+          type: "text",
+          "data-testid": "activity-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: (event) => onSearchTermChange(event.target.value),
+          className: "h-full w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-8 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          onClick: () => onSearchTermChange(""),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-white/40 transition-colors hover:text-white",
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", size: "sm" })
         }
       )
-    ] })
-  );
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      Select,
+      {
+        value: statusFilter,
+        onValueChange: (value) => onStatusFilterChange(value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            SelectTrigger,
+            {
+              "aria-label": "Filter activity by status",
+              className: "h-full rounded-xl border-0 bg-white/5 px-3 py-0 text-xs font-bold text-white shadow-none hover:bg-white/8 focus:ring-0 data-[state=open]:bg-white/8",
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
+        ]
+      }
+    ) }),
+    hasActiveFilters && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Button,
+      {
+        variant: "surface",
+        size: "icon-lg",
+        onClick: onClearFilters,
+        "aria-label": "Clear filters",
+        title: "Clear Filters",
+        className: "h-11 w-11 shrink-0 rounded-xl",
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", size: "lg" })
+      }
+    )
+  ] });
 }
 
 // src/web/components/activity-network-filters.tsx
@@ -4845,118 +4851,81 @@ function ActivityNetworkFilters({
   filters,
   activeFilter,
   onChange,
-  className
+  className,
+  ariaLabel = "Filter activity by network"
 }) {
   if (filters.length <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("flex gap-1.5 overflow-x-auto py-0.5 no-scrollbar", className), children: filters.map((filter) => {
-    const isActive = activeFilter === filter.value;
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(filter.value),
-        className: cn(
-          // `leading-none` on the button normalizes the line-box for
-          // both the icon span and the label span; without it the
-          // icon (now `leading-none` from Icon primitive) and the text
-          // (default leading) get center-aligned along different
-          // visual axes and the glyph drifts above the text.
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider leading-none transition-all active:scale-95",
-          isActive ? "bg-primary/15 text-primary shadow-inner hover:bg-primary/20" : "bg-surface-card text-white/45 hover:bg-surface-elevated hover:text-white/80"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            "span",
-            {
-              className: cn(
-                "flex items-center justify-center",
-                isActive ? "opacity-100" : "scale-90 opacity-70"
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn("flex gap-1.5 overflow-x-auto pb-0.5 no-scrollbar", className),
+      children: filters.map((filter) => {
+        const isActive = activeFilter === filter.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isActive,
+            onClick: () => onChange(filter.value),
+            className: cn(
+              "flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider transition-all",
+              isActive ? "bg-primary/15 text-primary ring-1 ring-primary/20" : "bg-white/5 text-muted-foreground hover:bg-white/8 hover:text-white"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "flex size-3 items-center justify-center",
+                  children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
+                }
               ),
-              children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: filter.label })
-        ]
-      },
-      filter.value
-    );
-  }) });
+              filter.label
+            ]
+          },
+          filter.value
+        );
+      })
+    }
+  );
 }
 
 // src/web/components/activity-type-tabs.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ActivityTypeTabs({ counts = {} }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "all",
-        className: "h-full rounded-xl px-2 text-xs font-bold tracking-wide transition-all data-[state=active]:bg-surface-elevated data-[state=active]:text-white",
-        children: [
-          "All",
-          counts.all ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1 opacity-60", children: [
-            "(",
-            counts.all,
-            ")"
-          ] }) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "received",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-receive data-[state=active]:bg-tx-receive/15 data-[state=active]:text-tx-receive data-[state=active]:hover:bg-tx-receive/20 data-[state=active]:hover:text-tx-receive",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "receive",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-receive group-data-[state=active]:text-tx-receive"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "In" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "sent",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-sent data-[state=active]:bg-tx-sent/15 data-[state=active]:text-tx-sent data-[state=active]:hover:bg-tx-sent/20 data-[state=active]:hover:text-tx-sent",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "send",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-sent group-data-[state=active]:text-tx-sent"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Out" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "swaps",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-network-arkade data-[state=active]:bg-network-arkade/15 data-[state=active]:text-network-arkade data-[state=active]:hover:bg-network-arkade/20 data-[state=active]:hover:text-network-arkade",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "swap",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-network-arkade group-data-[state=active]:text-network-arkade"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Swaps" })
-        ]
-      }
-    )
-  ] });
+  const actions = [
+    { value: "all", label: "All" },
+    { value: "received", label: "In", icon: "receive", actionIcon: "call_received" },
+    { value: "swaps", label: "Swap", icon: "swap", actionIcon: "swap_horiz" },
+    { value: "sent", label: "Out", icon: "send", actionIcon: "arrow_outward" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    TabsTrigger,
+    {
+      value: action.value,
+      "data-action-icon": action.actionIcon,
+      className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide text-muted-foreground transition-all hover:text-primary data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:hover:bg-primary/20 data-[state=active]:hover:text-primary",
+      children: [
+        action.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          AppIcon,
+          {
+            name: action.icon,
+            size: "sm",
+            className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-primary group-data-[state=active]:text-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: action.label }),
+        action.value === "all" && counts.all ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1", children: [
+          "(",
+          counts.all,
+          ")"
+        ] }) : null
+      ]
+    },
+    action.value
+  )) });
 }
 
 // src/web/components/activity-detail-row.tsx

package/dist/web/index.d.cts

@@ -910,9 +910,10 @@ interface ActivityNetworkFiltersProps<TValue extends string = ActivityNetworkFil
     activeFilter: TValue;
     onChange: (value: TValue) => void;
     className?: string;
+    ariaLabel?: string;
 }
 declare function getActivityNetworkFilterIcon(filter: ActivityNetworkFilterValue): react_jsx_runtime.JSX.Element;
-declare function ActivityNetworkFilters<TValue extends string = ActivityNetworkFilterValue>({ filters, activeFilter, onChange, className, }: ActivityNetworkFiltersProps<TValue>): react_jsx_runtime.JSX.Element | null;
+declare function ActivityNetworkFilters<TValue extends string = ActivityNetworkFilterValue>({ filters, activeFilter, onChange, className, ariaLabel, }: ActivityNetworkFiltersProps<TValue>): react_jsx_runtime.JSX.Element | null;
 
 type ActivityTypeTabValue = 'all' | 'received' | 'sent' | 'swaps';
 interface ActivityTypeTabCounts {

package/dist/web/index.d.ts

@@ -910,9 +910,10 @@ interface ActivityNetworkFiltersProps<TValue extends string = ActivityNetworkFil
     activeFilter: TValue;
     onChange: (value: TValue) => void;
     className?: string;
+    ariaLabel?: string;
 }
 declare function getActivityNetworkFilterIcon(filter: ActivityNetworkFilterValue): react_jsx_runtime.JSX.Element;
-declare function ActivityNetworkFilters<TValue extends string = ActivityNetworkFilterValue>({ filters, activeFilter, onChange, className, }: ActivityNetworkFiltersProps<TValue>): react_jsx_runtime.JSX.Element | null;
+declare function ActivityNetworkFilters<TValue extends string = ActivityNetworkFilterValue>({ filters, activeFilter, onChange, className, ariaLabel, }: ActivityNetworkFiltersProps<TValue>): react_jsx_runtime.JSX.Element | null;
 
 type ActivityTypeTabValue = 'all' | 'received' | 'sent' | 'swaps';
 interface ActivityTypeTabCounts {

package/dist/web/index.js

@@ -4529,7 +4529,7 @@ function ActivityList({
     return /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center py-16", children: [
       /* @__PURE__ */ jsx41("div", { className: "mb-4 flex size-16 items-center justify-center rounded-full bg-white/5", children: emptyIcon ?? /* @__PURE__ */ jsx41(DefaultEmptyIcon, { name: "receipt_long" }) }),
       /* @__PURE__ */ jsx41("h3", { className: "mb-1 text-base font-semibold", children: hasActiveFilters ? filteredEmptyTitle : emptyTitle }),
-      /* @__PURE__ */ jsx41("p", { className: "mb-4 max-w-[240px] text-center text-xs text-muted-foreground", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
+      /* @__PURE__ */ jsx41("p", { className: "mb-4 max-w-[240px] text-center text-xs text-white/70", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
       hasActiveFilters && onClearFilters ? /* @__PURE__ */ jsx41(Button, { variant: "surface", size: "sm", onClick: onClearFilters, children: "Clear Filters" }) : renderEmptyActions?.()
     ] });
   }
@@ -4539,7 +4539,7 @@ function ActivityList({
     return /* @__PURE__ */ jsxs28(
       "div",
       {
-        className: "relative overflow-hidden rounded-2xl bg-surface-card bg-gradient-to-b from-white/[0.025] to-primary/[0.035] shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
+        className: "relative overflow-hidden rounded-2xl bg-card bg-none shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
         children: [
           /* @__PURE__ */ jsx41(
             TransactionCard,
@@ -4552,7 +4552,7 @@ function ActivityList({
               onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id),
-              className: "relative z-[1]"
+              className: cn("relative z-[1] bg-card", isExpanded && "shadow-none")
             }
           ),
           isExpanded && // -mt-4/pt-4 slides the details up behind the card's bottom
@@ -4584,63 +4584,69 @@ function ActivityFilterBar({
   onClearFilters,
   searchPlaceholder = "Search by txid, asset..."
 }) {
-  return (
-    // All three controls (search input, status dropdown, clear button) share
-    // the same h-11 height and rounded-2xl card radius so the bar reads as
-    // one family with the cards below it.
-    /* @__PURE__ */ jsxs29("div", { className: "flex h-11 items-center gap-2", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "relative h-full flex-1", children: [
-        /* @__PURE__ */ jsx42(
-          AppIcon,
-          {
-            name: "search",
-            className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-white/40"
-          }
-        ),
-        /* @__PURE__ */ jsx42(
-          "input",
-          {
-            type: "text",
-            placeholder: searchPlaceholder,
-            value: searchTerm,
-            onChange: (event) => onSearchTermChange(event.target.value),
-            className: "h-full w-full rounded-2xl bg-surface-card pl-9 pr-8 text-xs text-white shadow-inner backdrop-blur-xl transition-all placeholder:text-white/30 focus:bg-surface-elevated focus:outline-none"
-          }
-        ),
-        searchTerm && /* @__PURE__ */ jsx42(
-          "button",
-          {
-            type: "button",
-            onClick: () => onSearchTermChange(""),
-            className: "absolute right-2 top-1/2 -translate-y-1/2 text-white/40 transition-colors hover:text-white",
-            children: /* @__PURE__ */ jsx42(AppIcon, { name: "close", className: "size-icon-sm" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx42("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ jsxs29(
-        Select,
+  return /* @__PURE__ */ jsxs29("div", { className: "flex h-11 items-center gap-2", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "relative h-full flex-1", children: [
+      /* @__PURE__ */ jsx42(
+        AppIcon,
         {
-          value: statusFilter,
-          onValueChange: (value) => onStatusFilterChange(value),
-          children: [
-            /* @__PURE__ */ jsx42(SelectTrigger, { className: "h-full rounded-2xl border-0 bg-surface-card px-3 py-0 text-xs font-bold text-white shadow-inner backdrop-blur-xl hover:bg-surface-elevated focus:ring-0 data-[state=open]:bg-surface-elevated", children: /* @__PURE__ */ jsx42(SelectValue, {}) }),
-            /* @__PURE__ */ jsx42(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ jsx42(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
-          ]
+          name: "search",
+          size: "sm",
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-white/30"
         }
-      ) }),
-      hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx42(
-        Button,
+      ),
+      /* @__PURE__ */ jsx42(
+        "input",
         {
-          variant: "surface",
-          size: "icon-lg",
-          onClick: onClearFilters,
-          title: "Clear Filters",
-          className: "h-11 w-11 shrink-0 rounded-2xl",
-          children: /* @__PURE__ */ jsx42(AppIcon, { name: "close", className: "size-icon-lg" })
+          type: "text",
+          "data-testid": "activity-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: (event) => onSearchTermChange(event.target.value),
+          className: "h-full w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-8 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          onClick: () => onSearchTermChange(""),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-white/40 transition-colors hover:text-white",
+          children: /* @__PURE__ */ jsx42(AppIcon, { name: "close", size: "sm" })
         }
       )
-    ] })
-  );
+    ] }),
+    /* @__PURE__ */ jsx42("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ jsxs29(
+      Select,
+      {
+        value: statusFilter,
+        onValueChange: (value) => onStatusFilterChange(value),
+        children: [
+          /* @__PURE__ */ jsx42(
+            SelectTrigger,
+            {
+              "aria-label": "Filter activity by status",
+              className: "h-full rounded-xl border-0 bg-white/5 px-3 py-0 text-xs font-bold text-white shadow-none hover:bg-white/8 focus:ring-0 data-[state=open]:bg-white/8",
+              children: /* @__PURE__ */ jsx42(SelectValue, {})
+            }
+          ),
+          /* @__PURE__ */ jsx42(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ jsx42(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
+        ]
+      }
+    ) }),
+    hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx42(
+      Button,
+      {
+        variant: "surface",
+        size: "icon-lg",
+        onClick: onClearFilters,
+        "aria-label": "Clear filters",
+        title: "Clear Filters",
+        className: "h-11 w-11 shrink-0 rounded-xl",
+        children: /* @__PURE__ */ jsx42(AppIcon, { name: "close", size: "lg" })
+      }
+    )
+  ] });
 }
 
 // src/web/components/activity-network-filters.tsx
@@ -4663,118 +4669,81 @@ function ActivityNetworkFilters({
   filters,
   activeFilter,
   onChange,
-  className
+  className,
+  ariaLabel = "Filter activity by network"
 }) {
   if (filters.length <= 1) return null;
-  return /* @__PURE__ */ jsx43("div", { className: cn("flex gap-1.5 overflow-x-auto py-0.5 no-scrollbar", className), children: filters.map((filter) => {
-    const isActive = activeFilter === filter.value;
-    return /* @__PURE__ */ jsxs30(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(filter.value),
-        className: cn(
-          // `leading-none` on the button normalizes the line-box for
-          // both the icon span and the label span; without it the
-          // icon (now `leading-none` from Icon primitive) and the text
-          // (default leading) get center-aligned along different
-          // visual axes and the glyph drifts above the text.
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider leading-none transition-all active:scale-95",
-          isActive ? "bg-primary/15 text-primary shadow-inner hover:bg-primary/20" : "bg-surface-card text-white/45 hover:bg-surface-elevated hover:text-white/80"
-        ),
-        children: [
-          /* @__PURE__ */ jsx43(
-            "span",
-            {
-              className: cn(
-                "flex items-center justify-center",
-                isActive ? "opacity-100" : "scale-90 opacity-70"
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn("flex gap-1.5 overflow-x-auto pb-0.5 no-scrollbar", className),
+      children: filters.map((filter) => {
+        const isActive = activeFilter === filter.value;
+        return /* @__PURE__ */ jsxs30(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isActive,
+            onClick: () => onChange(filter.value),
+            className: cn(
+              "flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider transition-all",
+              isActive ? "bg-primary/15 text-primary ring-1 ring-primary/20" : "bg-white/5 text-muted-foreground hover:bg-white/8 hover:text-white"
+            ),
+            children: [
+              /* @__PURE__ */ jsx43(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "flex size-3 items-center justify-center",
+                  children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
+                }
               ),
-              children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
-            }
-          ),
-          /* @__PURE__ */ jsx43("span", { children: filter.label })
-        ]
-      },
-      filter.value
-    );
-  }) });
+              filter.label
+            ]
+          },
+          filter.value
+        );
+      })
+    }
+  );
 }
 
 // src/web/components/activity-type-tabs.tsx
 import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function ActivityTypeTabs({ counts = {} }) {
-  return /* @__PURE__ */ jsxs31(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: [
-    /* @__PURE__ */ jsxs31(
-      TabsTrigger,
-      {
-        value: "all",
-        className: "h-full rounded-xl px-2 text-xs font-bold tracking-wide transition-all data-[state=active]:bg-surface-elevated data-[state=active]:text-white",
-        children: [
-          "All",
-          counts.all ? /* @__PURE__ */ jsxs31("span", { className: "ml-1 opacity-60", children: [
-            "(",
-            counts.all,
-            ")"
-          ] }) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs31(
-      TabsTrigger,
-      {
-        value: "received",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-receive data-[state=active]:bg-tx-receive/15 data-[state=active]:text-tx-receive data-[state=active]:hover:bg-tx-receive/20 data-[state=active]:hover:text-tx-receive",
-        children: [
-          /* @__PURE__ */ jsx44(
-            AppIcon,
-            {
-              name: "receive",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-receive group-data-[state=active]:text-tx-receive"
-            }
-          ),
-          /* @__PURE__ */ jsx44("span", { children: "In" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs31(
-      TabsTrigger,
-      {
-        value: "sent",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-sent data-[state=active]:bg-tx-sent/15 data-[state=active]:text-tx-sent data-[state=active]:hover:bg-tx-sent/20 data-[state=active]:hover:text-tx-sent",
-        children: [
-          /* @__PURE__ */ jsx44(
-            AppIcon,
-            {
-              name: "send",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-sent group-data-[state=active]:text-tx-sent"
-            }
-          ),
-          /* @__PURE__ */ jsx44("span", { children: "Out" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs31(
-      TabsTrigger,
-      {
-        value: "swaps",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-network-arkade data-[state=active]:bg-network-arkade/15 data-[state=active]:text-network-arkade data-[state=active]:hover:bg-network-arkade/20 data-[state=active]:hover:text-network-arkade",
-        children: [
-          /* @__PURE__ */ jsx44(
-            AppIcon,
-            {
-              name: "swap",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-network-arkade group-data-[state=active]:text-network-arkade"
-            }
-          ),
-          /* @__PURE__ */ jsx44("span", { children: "Swaps" })
-        ]
-      }
-    )
-  ] });
+  const actions = [
+    { value: "all", label: "All" },
+    { value: "received", label: "In", icon: "receive", actionIcon: "call_received" },
+    { value: "swaps", label: "Swap", icon: "swap", actionIcon: "swap_horiz" },
+    { value: "sent", label: "Out", icon: "send", actionIcon: "arrow_outward" }
+  ];
+  return /* @__PURE__ */ jsx44(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: actions.map((action) => /* @__PURE__ */ jsxs31(
+    TabsTrigger,
+    {
+      value: action.value,
+      "data-action-icon": action.actionIcon,
+      className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide text-muted-foreground transition-all hover:text-primary data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:hover:bg-primary/20 data-[state=active]:hover:text-primary",
+      children: [
+        action.icon && /* @__PURE__ */ jsx44(
+          AppIcon,
+          {
+            name: action.icon,
+            size: "sm",
+            className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-primary group-data-[state=active]:text-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx44("span", { children: action.label }),
+        action.value === "all" && counts.all ? /* @__PURE__ */ jsxs31("span", { className: "ml-1", children: [
+          "(",
+          counts.all,
+          ")"
+        ] }) : null
+      ]
+    },
+    action.value
+  )) });
 }
 
 // src/web/components/activity-detail-row.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",