kaleido-ui 0.1.110 → 0.1.111

package/dist/web/index.cjs

@@ -3861,24 +3861,37 @@ var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
 function AssetSelectorNetworkMark({ network }) {
   return network.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
 }
+var NETWORK_STACK_VISIBLE = 3;
 function AssetSelectorNetworkFilterTrigger({
   activeNetworkOption,
+  networks,
   open,
   onClick
 }) {
+  const visibleNetworks = networks.slice(0, NETWORK_STACK_VISIBLE);
+  const overflowCount = networks.length - visibleNetworks.length;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "button",
     {
       type: "button",
       onClick,
+      "aria-label": activeNetworkOption ? void 0 : "All networks",
       className: cn(
         chipBaseClass,
-        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
         activeNetworkOption || open ? chipActiveClass : chipIdleClass
       ),
       children: [
-        activeNetworkOption && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network: activeNetworkOption }),
-        activeNetworkOption ? activeNetworkOption.label : "All",
+        activeNetworkOption ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+          activeNetworkOption.label
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex items-center -space-x-1.5", "aria-hidden": "true", children: [
+          visibleNetworks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full ring-2 ring-card", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network }) }, network.id)),
+          overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold leading-none text-muted-foreground ring-2 ring-card", children: [
+            "+",
+            overflowCount
+          ] })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Icon,
           {
@@ -3954,6 +3967,7 @@ function AssetSelector({
       AssetSelectorNetworkFilterTrigger,
       {
         activeNetworkOption,
+        networks,
         open: networkMenuOpen,
         onClick: () => setNetworkMenuOpen((value) => !value)
       }

package/dist/web/index.js

@@ -3676,24 +3676,37 @@ var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
 function AssetSelectorNetworkMark({ network }) {
   return network.iconUrl ? /* @__PURE__ */ jsx38("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx38("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
 }
+var NETWORK_STACK_VISIBLE = 3;
 function AssetSelectorNetworkFilterTrigger({
   activeNetworkOption,
+  networks,
   open,
   onClick
 }) {
+  const visibleNetworks = networks.slice(0, NETWORK_STACK_VISIBLE);
+  const overflowCount = networks.length - visibleNetworks.length;
   return /* @__PURE__ */ jsxs25(
     "button",
     {
       type: "button",
       onClick,
+      "aria-label": activeNetworkOption ? void 0 : "All networks",
       className: cn(
         chipBaseClass,
-        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
         activeNetworkOption || open ? chipActiveClass : chipIdleClass
       ),
       children: [
-        activeNetworkOption && /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network: activeNetworkOption }),
-        activeNetworkOption ? activeNetworkOption.label : "All",
+        activeNetworkOption ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+          /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+          activeNetworkOption.label
+        ] }) : /* @__PURE__ */ jsxs25("span", { className: "flex items-center -space-x-1.5", "aria-hidden": "true", children: [
+          visibleNetworks.map((network) => /* @__PURE__ */ jsx38("span", { className: "rounded-full ring-2 ring-card", children: /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network }) }, network.id)),
+          overflowCount > 0 && /* @__PURE__ */ jsxs25("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold leading-none text-muted-foreground ring-2 ring-card", children: [
+            "+",
+            overflowCount
+          ] })
+        ] }),
         /* @__PURE__ */ jsx38(
           Icon,
           {
@@ -3769,6 +3782,7 @@ function AssetSelector({
       AssetSelectorNetworkFilterTrigger,
       {
         activeNetworkOption,
+        networks,
         open: networkMenuOpen,
         onClick: () => setNetworkMenuOpen((value) => !value)
       }

package/package.json

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