kaleido-ui 0.1.26 → 0.1.28

package/dist/web/index.cjs

@@ -2425,7 +2425,8 @@ function AccountNetworkNotice({
 }
 function AccountStatusPills({
   status,
-  network
+  network,
+  hideNetworkChip = false
 }) {
   const statusUi = getAccountStatusUi(status);
   const networkUi = getAccountNetworkUi(network);
@@ -2440,7 +2441,7 @@ function AccountStatusPills({
         children: statusUi.label === "Ready" ? "Connected" : statusUi.label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    !hideNetworkChip && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "span",
       {
         className: cn(
@@ -2501,31 +2502,52 @@ function TransferRouteCard({
 function ExpandIcon({ expanded }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { name: expanded ? "expand_less" : "expand_more", size: "md" });
 }
+var ACCOUNT_ACCENT_BG = {
+  RGB: "bg-gradient-to-br from-primary/[0.06] via-card to-primary/[0.10]",
+  SPARK: "bg-gradient-to-br from-info/[0.06] via-card to-info/[0.10]",
+  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]"
+};
 function AccountSettingsRow({
   accountId,
   title,
   status,
   network,
   description,
-  onClick
+  onClick,
+  hideNetworkChip = false,
+  accent = false,
+  beta = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       type: "button",
       onClick,
-      className: "w-full rounded-3xl bg-white/[0.03] p-4 text-left shadow-inner transition-colors hover:bg-white/[0.05]",
+      className: cn(
+        "w-full rounded-3xl p-4 text-left shadow-inner transition-colors hover:brightness-110",
+        accent ? ACCOUNT_ACCENT_BG[accountId] : "bg-white/[0.03] hover:bg-white/[0.05]"
+      ),
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccountHeaderIcons, { accountId }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm font-bold text-white", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm font-bold text-white", children: title }),
+                beta && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "rounded-full bg-warning/15 px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider text-warning", children: "Beta" })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: description })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon2, { name: "chevron_right", size: "sm", className: "text-white/40" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccountStatusPills, { status, network }) })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            AccountStatusPills,
+            {
+              status,
+              network,
+              hideNetworkChip
+            }
+          ) })
         ] })
       ] })
     }

package/dist/web/index.d.cts

@@ -448,9 +448,15 @@ declare function AccountNetworkNotice({ network, children, }: {
     network: AccountSettingsNetwork;
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountStatusPills({ status, network, }: {
+declare function AccountStatusPills({ status, network, hideNetworkChip, }: {
     status: 'ready' | 'offline' | 'optional' | string;
     network: AccountSettingsNetwork;
+    /**
+     * Drop the network (MAINNET / Regtest / …) chip. Used on the Settings
+     * main page where the network is implicit context and the chip is
+     * design noise next to the connected/offline status.
+     */
+    hideNetworkChip?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ children }: {
     children: ReactNode;
@@ -470,13 +476,22 @@ declare function TransferRouteCard({ label, summary, eta, feeHint, }: {
 declare function ExpandIcon({ expanded }: {
     expanded: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountSettingsRow({ accountId, title, status, network, description, onClick, }: {
+declare function AccountSettingsRow({ accountId, title, status, network, description, onClick, hideNetworkChip, accent, beta, }: {
     accountId: AccountSettingsProtocol;
     title: string;
     status: 'ready' | 'offline' | 'optional' | string;
     network: AccountSettingsNetwork;
     description: string;
     onClick: () => void;
+    /** Drop the MAINNET / Regtest pill — useful in Settings where the row
+        is one of many and the network chip is redundant noise. */
+    hideNetworkChip?: boolean;
+    /** Render the row with the per-account accent gradient (used on the
+        Settings main page so account rows mirror dashboard asset cards). */
+    accent?: boolean;
+    /** Show a small BETA chip next to the title — used for accounts that
+        haven't graduated to mainnet yet (e.g. RGB on testchains only). */
+    beta?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 interface AccountCapabilitiesCardProps {

package/dist/web/index.d.ts

@@ -448,9 +448,15 @@ declare function AccountNetworkNotice({ network, children, }: {
     network: AccountSettingsNetwork;
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountStatusPills({ status, network, }: {
+declare function AccountStatusPills({ status, network, hideNetworkChip, }: {
     status: 'ready' | 'offline' | 'optional' | string;
     network: AccountSettingsNetwork;
+    /**
+     * Drop the network (MAINNET / Regtest / …) chip. Used on the Settings
+     * main page where the network is implicit context and the chip is
+     * design noise next to the connected/offline status.
+     */
+    hideNetworkChip?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ children }: {
     children: ReactNode;
@@ -470,13 +476,22 @@ declare function TransferRouteCard({ label, summary, eta, feeHint, }: {
 declare function ExpandIcon({ expanded }: {
     expanded: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function AccountSettingsRow({ accountId, title, status, network, description, onClick, }: {
+declare function AccountSettingsRow({ accountId, title, status, network, description, onClick, hideNetworkChip, accent, beta, }: {
     accountId: AccountSettingsProtocol;
     title: string;
     status: 'ready' | 'offline' | 'optional' | string;
     network: AccountSettingsNetwork;
     description: string;
     onClick: () => void;
+    /** Drop the MAINNET / Regtest pill — useful in Settings where the row
+        is one of many and the network chip is redundant noise. */
+    hideNetworkChip?: boolean;
+    /** Render the row with the per-account accent gradient (used on the
+        Settings main page so account rows mirror dashboard asset cards). */
+    accent?: boolean;
+    /** Show a small BETA chip next to the title — used for accounts that
+        haven't graduated to mainnet yet (e.g. RGB on testchains only). */
+    beta?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 interface AccountCapabilitiesCardProps {

package/dist/web/index.js

@@ -2270,7 +2270,8 @@ function AccountNetworkNotice({
 }
 function AccountStatusPills({
   status,
-  network
+  network,
+  hideNetworkChip = false
 }) {
   const statusUi = getAccountStatusUi(status);
   const networkUi = getAccountNetworkUi(network);
@@ -2285,7 +2286,7 @@ function AccountStatusPills({
         children: statusUi.label === "Ready" ? "Connected" : statusUi.label
       }
     ),
-    /* @__PURE__ */ jsx30(
+    !hideNetworkChip && /* @__PURE__ */ jsx30(
       "span",
       {
         className: cn(
@@ -2346,31 +2347,52 @@ function TransferRouteCard({
 function ExpandIcon({ expanded }) {
   return /* @__PURE__ */ jsx30(Icon2, { name: expanded ? "expand_less" : "expand_more", size: "md" });
 }
+var ACCOUNT_ACCENT_BG = {
+  RGB: "bg-gradient-to-br from-primary/[0.06] via-card to-primary/[0.10]",
+  SPARK: "bg-gradient-to-br from-info/[0.06] via-card to-info/[0.10]",
+  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]"
+};
 function AccountSettingsRow({
   accountId,
   title,
   status,
   network,
   description,
-  onClick
+  onClick,
+  hideNetworkChip = false,
+  accent = false,
+  beta = false
 }) {
   return /* @__PURE__ */ jsx30(
     "button",
     {
       type: "button",
       onClick,
-      className: "w-full rounded-3xl bg-white/[0.03] p-4 text-left shadow-inner transition-colors hover:bg-white/[0.05]",
+      className: cn(
+        "w-full rounded-3xl p-4 text-left shadow-inner transition-colors hover:brightness-110",
+        accent ? ACCOUNT_ACCENT_BG[accountId] : "bg-white/[0.03] hover:bg-white/[0.05]"
+      ),
       children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx30(AccountHeaderIcons, { accountId }),
         /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs18("div", { children: [
-              /* @__PURE__ */ jsx30("p", { className: "text-sm font-bold text-white", children: title }),
+            /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx30("p", { className: "text-sm font-bold text-white", children: title }),
+                beta && /* @__PURE__ */ jsx30("span", { className: "rounded-full bg-warning/15 px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider text-warning", children: "Beta" })
+              ] }),
               /* @__PURE__ */ jsx30("p", { className: "mt-1 text-xs text-muted-foreground", children: description })
             ] }),
             /* @__PURE__ */ jsx30(Icon2, { name: "chevron_right", size: "sm", className: "text-white/40" })
           ] }),
-          /* @__PURE__ */ jsx30("div", { className: "mt-3", children: /* @__PURE__ */ jsx30(AccountStatusPills, { status, network }) })
+          /* @__PURE__ */ jsx30("div", { className: "mt-3", children: /* @__PURE__ */ jsx30(
+            AccountStatusPills,
+            {
+              status,
+              network,
+              hideNetworkChip
+            }
+          ) })
         ] })
       ] })
     }

package/package.json

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