kaleido-ui 0.1.20 → 0.1.21

package/dist/web/index.cjs

@@ -3070,9 +3070,14 @@ function AssetSelector({
                     " available"
                   ] })
                 ] }),
-                selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-2.5 py-1", children: [
+                selected && /* Network-coloured chip — uses the existing NetworkBadge
+                   so the asset's network color carries through (matches
+                   the showcase / wallet main page styling). When the
+                   asset has no network we fall back to a neutral pill. */
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-tiny font-semibold text-primary", children: selected.ticker })
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
+                  selected.network && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
                 ] })
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-shrink-0 border-b border-white/[0.08] px-4 py-3", children: [
@@ -3093,7 +3098,7 @@ function AssetSelector({
                       value: search,
                       onChange: (event) => setSearch(event.target.value),
                       placeholder: "Search...",
-                      className: "h-11 w-full rounded-2xl border bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                      className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
                     }
                   )
                 ] }),
@@ -3116,7 +3121,7 @@ function AssetSelector({
                   );
                 }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2", 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)(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" }),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
                   "No results",
@@ -3293,6 +3298,7 @@ function SwapInputCard({
   quoteExpiresUrgent = false,
   warning,
   submitLabel,
+  submitIcon,
   submitVariant = "cta",
   submitDisabled = false,
   onFromTickerChange,
@@ -3306,7 +3312,26 @@ function SwapInputCard({
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative mb-3 flex flex-col rounded-3xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "p-3.5 pb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-2 flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "button",
+            {
+              type: "button",
+              disabled: percentageDisabled,
+              onClick: () => onPercentageClick(percent),
+              className: cn(
+                "rounded px-1.5 py-0.5 text-xxs font-bold transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-40",
+                selectedPercentage === percent ? "border-primary/50 bg-primary/20 text-primary shadow-sm" : "bg-white/[0.03] text-muted-foreground hover:text-white"
+              ),
+              children: [
+                percent,
+                "%"
+              ]
+            },
+            percent
+          )) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             AssetSelector,
@@ -3338,44 +3363,25 @@ function SwapInputCard({
               {
                 type: "button",
                 onClick: onToggleFromUnit,
-                className: "mt-0.5 text-right text-xs text-muted-foreground underline decoration-dotted transition-colors hover:text-primary",
+                className: "mt-0.5 text-right text-xs text-muted-foreground transition-colors hover:text-primary",
                 title: "Tap to switch unit",
                 children: fromUnitLabel
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: fromUnitLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-            "button",
-            {
-              type: "button",
-              disabled: percentageDisabled,
-              onClick: () => onPercentageClick(percent),
-              className: cn(
-                "rounded px-1.5 py-0.5 text-xxs font-bold transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-40",
-                selectedPercentage === percent ? "border-primary/50 bg-primary/20 text-primary shadow-sm" : "bg-white/[0.03] text-muted-foreground hover:text-white"
-              ),
-              children: [
-                percent,
-                "%"
-              ]
-            },
-            percent
-          )) })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card shadow-lg shadow-black/35", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
           onClick: onFlip,
           title: "Flip assets",
-          className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card text-primary shadow-lg shadow-black/35 transition-all duration-500 hover:rotate-180 hover:bg-accent active:scale-95 active:shadow-none",
+          className: "flex h-11 w-11 items-center justify-center rounded-full bg-card text-primary transition-transform duration-500 hover:rotate-180 hover:bg-accent active:scale-95",
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { name: "swap_vert", size: "md" })
         }
-      ) }),
+      ) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "rounded-b-3xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mb-2 text-xs font-bold uppercase tracking-widest text-primary/70", children: "You Receive" }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -3434,7 +3440,10 @@ function SwapInputCard({
         className: "w-full",
         onClick: onSubmit,
         disabled: submitDisabled,
-        children: submitLabel
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "inline-flex items-center justify-center gap-2", children: [
+          submitIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: submitLabel })
+        ] })
       }
     )
   ] });

package/dist/web/index.d.cts

@@ -618,6 +618,8 @@ interface SwapInputCardProps {
     quoteExpiresUrgent?: boolean;
     warning?: string | null;
     submitLabel: string;
+    /** Optional leading icon for the submit CTA (e.g. a Material-Symbols glyph). */
+    submitIcon?: ReactNode;
     submitVariant?: ButtonProps['variant'];
     submitDisabled?: boolean;
     onFromTickerChange: (ticker: string) => void;
@@ -628,7 +630,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;

package/dist/web/index.d.ts

@@ -618,6 +618,8 @@ interface SwapInputCardProps {
     quoteExpiresUrgent?: boolean;
     warning?: string | null;
     submitLabel: string;
+    /** Optional leading icon for the submit CTA (e.g. a Material-Symbols glyph). */
+    submitIcon?: ReactNode;
     submitVariant?: ButtonProps['variant'];
     submitDisabled?: boolean;
     onFromTickerChange: (ticker: string) => void;
@@ -628,7 +630,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;

package/dist/web/index.js

@@ -2915,9 +2915,14 @@ function AssetSelector({
                     " available"
                   ] })
                 ] }),
-                selected && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-2.5 py-1", children: [
+                selected && /* Network-coloured chip — uses the existing NetworkBadge
+                   so the asset's network color carries through (matches
+                   the showcase / wallet main page styling). When the
+                   asset has no network we fall back to a neutral pill. */
+                /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
                   /* @__PURE__ */ jsx34(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
-                  /* @__PURE__ */ jsx34("span", { className: "text-tiny font-semibold text-primary", children: selected.ticker })
+                  /* @__PURE__ */ jsx34("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
+                  selected.network && /* @__PURE__ */ jsx34(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxs22("div", { className: "flex-shrink-0 border-b border-white/[0.08] px-4 py-3", children: [
@@ -2938,7 +2943,7 @@ function AssetSelector({
                       value: search,
                       onChange: (event) => setSearch(event.target.value),
                       placeholder: "Search...",
-                      className: "h-11 w-full rounded-2xl border bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
+                      className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
                     }
                   )
                 ] }),
@@ -2961,7 +2966,7 @@ function AssetSelector({
                   );
                 }) })
               ] }),
-              /* @__PURE__ */ jsx34(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2", 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(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" }),
                 /* @__PURE__ */ jsxs22("span", { children: [
                   "No results",
@@ -3138,6 +3143,7 @@ function SwapInputCard({
   quoteExpiresUrgent = false,
   warning,
   submitLabel,
+  submitIcon,
   submitVariant = "cta",
   submitDisabled = false,
   onFromTickerChange,
@@ -3151,7 +3157,26 @@ function SwapInputCard({
   return /* @__PURE__ */ jsxs23(Fragment8, { children: [
     /* @__PURE__ */ jsxs23("div", { className: "relative mb-3 flex flex-col rounded-3xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
       /* @__PURE__ */ jsxs23("div", { className: "p-3.5 pb-4", children: [
-        /* @__PURE__ */ jsx35("div", { className: "mb-2 flex items-center justify-between", children: /* @__PURE__ */ jsx35("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }) }),
+        /* @__PURE__ */ jsxs23("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx35("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
+          /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ jsxs23(
+            "button",
+            {
+              type: "button",
+              disabled: percentageDisabled,
+              onClick: () => onPercentageClick(percent),
+              className: cn(
+                "rounded px-1.5 py-0.5 text-xxs font-bold transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-40",
+                selectedPercentage === percent ? "border-primary/50 bg-primary/20 text-primary shadow-sm" : "bg-white/[0.03] text-muted-foreground hover:text-white"
+              ),
+              children: [
+                percent,
+                "%"
+              ]
+            },
+            percent
+          )) })
+        ] }),
         /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx35(
             AssetSelector,
@@ -3183,44 +3208,25 @@ function SwapInputCard({
               {
                 type: "button",
                 onClick: onToggleFromUnit,
-                className: "mt-0.5 text-right text-xs text-muted-foreground underline decoration-dotted transition-colors hover:text-primary",
+                className: "mt-0.5 text-right text-xs text-muted-foreground transition-colors hover:text-primary",
                 title: "Tap to switch unit",
                 children: fromUnitLabel
               }
             ) : /* @__PURE__ */ jsx35("p", { className: "mt-0.5 text-xs text-muted-foreground", children: fromUnitLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx35("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }),
-          /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ jsxs23(
-            "button",
-            {
-              type: "button",
-              disabled: percentageDisabled,
-              onClick: () => onPercentageClick(percent),
-              className: cn(
-                "rounded px-1.5 py-0.5 text-xxs font-bold transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-40",
-                selectedPercentage === percent ? "border-primary/50 bg-primary/20 text-primary shadow-sm" : "bg-white/[0.03] text-muted-foreground hover:text-white"
-              ),
-              children: [
-                percent,
-                "%"
-              ]
-            },
-            percent
-          )) })
-        ] })
+        /* @__PURE__ */ jsx35("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx35("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }) })
       ] }),
-      /* @__PURE__ */ jsx35("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx35("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ jsx35("span", { className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card shadow-lg shadow-black/35", children: /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
           onClick: onFlip,
           title: "Flip assets",
-          className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card text-primary shadow-lg shadow-black/35 transition-all duration-500 hover:rotate-180 hover:bg-accent active:scale-95 active:shadow-none",
+          className: "flex h-11 w-11 items-center justify-center rounded-full bg-card text-primary transition-transform duration-500 hover:rotate-180 hover:bg-accent active:scale-95",
           children: /* @__PURE__ */ jsx35(Icon2, { name: "swap_vert", size: "md" })
         }
-      ) }),
+      ) }) }),
       /* @__PURE__ */ jsxs23("div", { className: "rounded-b-3xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
         /* @__PURE__ */ jsx35("p", { className: "mb-2 text-xs font-bold uppercase tracking-widest text-primary/70", children: "You Receive" }),
         /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
@@ -3279,7 +3285,10 @@ function SwapInputCard({
         className: "w-full",
         onClick: onSubmit,
         disabled: submitDisabled,
-        children: submitLabel
+        children: /* @__PURE__ */ jsxs23("span", { className: "inline-flex items-center justify-center gap-2", children: [
+          submitIcon,
+          /* @__PURE__ */ jsx35("span", { children: submitLabel })
+        ] })
       }
     )
   ] });

package/package.json

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