kaleido-ui 0.1.25 → 0.1.27

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,20 +2502,30 @@ 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
 }) {
   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: [
@@ -2525,7 +2536,14 @@ function AccountSettingsRow({
             ] }),
             /* @__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
+            }
+          ) })
         ] })
       ] })
     }
@@ -3102,24 +3120,46 @@ function AssetSelector({
                     }
                   )
                 ] }),
-                hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: categories.map((category) => {
-                  const isActive = activeCategories.includes(category.id);
-                  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                hasCategoryFilters && /*
+                 * Multi-select category chips — spec calls for "Filter and
+                 * Order menus (like in Blog)" but multi-select is the more
+                 * useful behaviour for an asset picker (lets the user see
+                 * stables + RWA together while comparing) and chips are
+                 * more discoverable than a dropdown for 3 short labels.
+                 * Restyle the chips to read as borderless pills consistent
+                 * with the rest of the modal, and add a small "Clear"
+                 * affordance when at least one chip is off so the user
+                 * can return to "all" without toggling each one.
+                 */
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+                  categories.map((category) => {
+                    const isActive = activeCategories.includes(category.id);
+                    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setActiveCategories(
+                          (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
+                        ),
+                        className: cn(
+                          "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
+                          isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
+                        ),
+                        children: category.label
+                      },
+                      category.id
+                    );
+                  }),
+                  activeCategories.length !== categories.length && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "button",
                     {
                       type: "button",
-                      onClick: () => setActiveCategories(
-                        (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                      ),
-                      className: cn(
-                        "rounded-full border px-3 py-1 text-xxs font-bold uppercase tracking-eyebrow transition-colors",
-                        isActive ? "border-primary/35 bg-primary/[0.14] text-primary" : "border-border bg-white/[0.03] text-white/40 hover:border-white/20 hover:text-white/65"
-                      ),
-                      children: category.label
-                    },
-                    category.id
-                  );
-                }) })
+                      onClick: () => setActiveCategories(categories.map((category) => category.id)),
+                      className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
+                      children: "All"
+                    }
+                  )
+                ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, { name: "search", size: "md", className: "opacity-40" }),
@@ -3153,34 +3193,29 @@ function AssetSelector({
                         {
                           ticker: option.ticker,
                           logoUri: option.icon,
-                          size: 32,
+                          size: 38,
                           className: cn(
-                            "transition-transform duration-200",
+                            "shrink-0 transition-transform duration-200",
                             !isDisabled && "group-hover:scale-[1.04]"
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-2 font-semibold text-white", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: option.ticker }),
-                            option.network && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                              NetworkBadge,
-                              {
-                                network: option.network,
-                                showLabel: true,
-                                className: "py-[1px]"
-                              }
-                            )
-                          ] }),
-                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" })
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
+                          option.network && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            NetworkBadge,
+                            {
+                              network: option.network,
+                              showLabel: true,
+                              size: "sm",
+                              className: "py-[1px]"
+                            }
+                          ) })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-0.5 flex items-center justify-between gap-3", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate text-xs text-white/35", children: option.name ?? option.ticker }),
-                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-                            optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-border-default bg-surface-overlay px-2 py-0.5 text-xxs font-semibold uppercase tracking-eyebrow text-text-dimmed", children: optionCategoryLabel }),
-                            isDisabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xxs font-medium uppercase tracking-wide text-white/25", children: "In use" })
-                          ] })
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
+                          isSelected ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: isDisabled ? "In use" : option.ticker })
                         ] })
                       ] })
                     ]

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,19 @@ 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, }: {
     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;
 }): 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,19 @@ 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, }: {
     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;
 }): 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,20 +2347,30 @@ 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
 }) {
   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: [
@@ -2370,7 +2381,14 @@ function AccountSettingsRow({
             ] }),
             /* @__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
+            }
+          ) })
         ] })
       ] })
     }
@@ -2947,24 +2965,46 @@ function AssetSelector({
                     }
                   )
                 ] }),
-                hasCategoryFilters && /* @__PURE__ */ jsx34("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: categories.map((category) => {
-                  const isActive = activeCategories.includes(category.id);
-                  return /* @__PURE__ */ jsx34(
+                hasCategoryFilters && /*
+                 * Multi-select category chips — spec calls for "Filter and
+                 * Order menus (like in Blog)" but multi-select is the more
+                 * useful behaviour for an asset picker (lets the user see
+                 * stables + RWA together while comparing) and chips are
+                 * more discoverable than a dropdown for 3 short labels.
+                 * Restyle the chips to read as borderless pills consistent
+                 * with the rest of the modal, and add a small "Clear"
+                 * affordance when at least one chip is off so the user
+                 * can return to "all" without toggling each one.
+                 */
+                /* @__PURE__ */ jsxs22("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+                  categories.map((category) => {
+                    const isActive = activeCategories.includes(category.id);
+                    return /* @__PURE__ */ jsx34(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setActiveCategories(
+                          (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
+                        ),
+                        className: cn(
+                          "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
+                          isActive ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
+                        ),
+                        children: category.label
+                      },
+                      category.id
+                    );
+                  }),
+                  activeCategories.length !== categories.length && /* @__PURE__ */ jsx34(
                     "button",
                     {
                       type: "button",
-                      onClick: () => setActiveCategories(
-                        (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
-                      ),
-                      className: cn(
-                        "rounded-full border px-3 py-1 text-xxs font-bold uppercase tracking-eyebrow transition-colors",
-                        isActive ? "border-primary/35 bg-primary/[0.14] text-primary" : "border-border bg-white/[0.03] text-white/40 hover:border-white/20 hover:text-white/65"
-                      ),
-                      children: category.label
-                    },
-                    category.id
-                  );
-                }) })
+                      onClick: () => setActiveCategories(categories.map((category) => category.id)),
+                      className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
+                      children: "All"
+                    }
+                  )
+                ] })
               ] }),
               /* @__PURE__ */ jsx34(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
                 /* @__PURE__ */ jsx34(Icon2, { name: "search", size: "md", className: "opacity-40" }),
@@ -2998,34 +3038,29 @@ function AssetSelector({
                         {
                           ticker: option.ticker,
                           logoUri: option.icon,
-                          size: 32,
+                          size: 38,
                           className: cn(
-                            "transition-transform duration-200",
+                            "shrink-0 transition-transform duration-200",
                             !isDisabled && "group-hover:scale-[1.04]"
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1 text-left", children: [
-                        /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between gap-2 font-semibold text-white", children: [
-                          /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsx34("span", { children: option.ticker }),
-                            option.network && /* @__PURE__ */ jsx34(
-                              NetworkBadge,
-                              {
-                                network: option.network,
-                                showLabel: true,
-                                className: "py-[1px]"
-                              }
-                            )
-                          ] }),
-                          isSelected && /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" })
+                      /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
+                        /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex flex-col leading-tight", children: [
+                          /* @__PURE__ */ jsx34("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
+                          option.network && /* @__PURE__ */ jsx34("span", { className: "mt-1", children: /* @__PURE__ */ jsx34(
+                            NetworkBadge,
+                            {
+                              network: option.network,
+                              showLabel: true,
+                              size: "sm",
+                              className: "py-[1px]"
+                            }
+                          ) })
                         ] }),
-                        /* @__PURE__ */ jsxs22("div", { className: "mt-0.5 flex items-center justify-between gap-3", children: [
-                          /* @__PURE__ */ jsx34("div", { className: "truncate text-xs text-white/35", children: option.name ?? option.ticker }),
-                          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-                            optionCategoryLabel && /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-border-default bg-surface-overlay px-2 py-0.5 text-xxs font-semibold uppercase tracking-eyebrow text-text-dimmed", children: optionCategoryLabel }),
-                            isDisabled && /* @__PURE__ */ jsx34("span", { className: "text-xxs font-medium uppercase tracking-wide text-white/25", children: "In use" })
-                          ] })
+                        /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
+                          isSelected ? /* @__PURE__ */ jsx34("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ jsx34("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
+                          /* @__PURE__ */ jsx34("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: isDisabled ? "In use" : option.ticker })
                         ] })
                       ] })
                     ]

package/package.json

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