kaleido-ui 0.1.9 → 0.1.10

package/dist/web/index.cjs

@@ -1141,6 +1141,22 @@ function NetworkBadge({
   const content = children ?? (shouldShowLabel ? label : null);
   const chipSize = size === "sm" ? "size-6" : "size-8";
   const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
+  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className: cn("material-symbols-outlined leading-none", color, className2),
+      style: { fontSize: size === "sm" ? 12 : 16 },
+      "aria-hidden": true,
+      children: "link"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "img",
+    {
+      src: icon,
+      alt: network,
+      className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
+    }
+  );
   if (!content) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "span",
@@ -1151,14 +1167,7 @@ function NetworkBadge({
           iconBg,
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "img",
-          {
-            src: icon,
-            alt: network,
-            className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
-          }
-        )
+        children: renderGlyph(imageSize)
       }
     );
   }
@@ -1173,14 +1182,7 @@ function NetworkBadge({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "img",
-          {
-            src: icon,
-            alt: network,
-            className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
-          }
-        ),
+        renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
         content
       ]
     }
@@ -1359,7 +1361,7 @@ function AssetCard({
                   children: name
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
@@ -2371,7 +2373,8 @@ function AccountSettingsShell({
   accountId,
   title,
   subtitle,
-  children
+  children,
+  onBack
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2381,6 +2384,7 @@ function AccountSettingsShell({
         subtitle,
         titleAlign: "start",
         left: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccountHeaderIcons, { accountId }),
+        onBack,
         className: "px-5 py-4"
       }
     ),
@@ -5726,7 +5730,7 @@ function DepositAssetSelection({
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
+                      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                       "div",

package/dist/web/index.d.cts

@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
     current: AccountSettingsNetwork;
     onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
+declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
     accountId: AccountSettingsProtocol;
     title: string;
     subtitle: string;
     children: ReactNode;
+    /** Optional back callback — if provided, renders a back button inline with the title. */
+    onBack?: () => void;
 }): react_jsx_runtime.JSX.Element;
 declare function AccountInfoGrid({ items }: {
     items: Array<{

package/dist/web/index.d.ts

@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
     current: AccountSettingsNetwork;
     onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
+declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
     accountId: AccountSettingsProtocol;
     title: string;
     subtitle: string;
     children: ReactNode;
+    /** Optional back callback — if provided, renders a back button inline with the title. */
+    onBack?: () => void;
 }): react_jsx_runtime.JSX.Element;
 declare function AccountInfoGrid({ items }: {
     items: Array<{

package/dist/web/index.js

@@ -980,6 +980,22 @@ function NetworkBadge({
   const content = children ?? (shouldShowLabel ? label : null);
   const chipSize = size === "sm" ? "size-6" : "size-8";
   const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
+  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx15(
+    "span",
+    {
+      className: cn("material-symbols-outlined leading-none", color, className2),
+      style: { fontSize: size === "sm" ? 12 : 16 },
+      "aria-hidden": true,
+      children: "link"
+    }
+  ) : /* @__PURE__ */ jsx15(
+    "img",
+    {
+      src: icon,
+      alt: network,
+      className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
+    }
+  );
   if (!content) {
     return /* @__PURE__ */ jsx15(
       "span",
@@ -990,14 +1006,7 @@ function NetworkBadge({
           iconBg,
           className
         ),
-        children: /* @__PURE__ */ jsx15(
-          "img",
-          {
-            src: icon,
-            alt: network,
-            className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
-          }
-        )
+        children: renderGlyph(imageSize)
       }
     );
   }
@@ -1012,14 +1021,7 @@ function NetworkBadge({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx15(
-          "img",
-          {
-            src: icon,
-            alt: network,
-            className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
-          }
-        ),
+        renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
         content
       ]
     }
@@ -1198,7 +1200,7 @@ function AssetCard({
                   children: name
                 }
               ),
-              /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
+              /* @__PURE__ */ jsx17("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs7("div", { className: "text-right", children: [
@@ -2216,7 +2218,8 @@ function AccountSettingsShell({
   accountId,
   title,
   subtitle,
-  children
+  children,
+  onBack
 }) {
   return /* @__PURE__ */ jsxs18("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
     /* @__PURE__ */ jsx30(
@@ -2226,6 +2229,7 @@ function AccountSettingsShell({
         subtitle,
         titleAlign: "start",
         left: /* @__PURE__ */ jsx30(AccountHeaderIcons, { accountId }),
+        onBack,
         className: "px-5 py-4"
       }
     ),
@@ -5571,7 +5575,7 @@ function DepositAssetSelection({
                   children: [
                     /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
                       /* @__PURE__ */ jsx58(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ jsx58(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
+                      /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
                     ] }),
                     /* @__PURE__ */ jsx58("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx58(
                       "div",

package/package.json

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