kaleido-ui 0.1.24 → 0.1.26

package/dist/web/index.cjs

@@ -3102,24 +3102,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 +3175,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 })
                         ] })
                       ] })
                     ]
@@ -3296,6 +3313,8 @@ function SwapInputCard({
   quoteFeeText,
   quoteExpiresText,
   quoteExpiresUrgent = false,
+  quoteVenueText,
+  quoteVenueTone = "primary",
   warning,
   submitLabel,
   submitIcon,
@@ -3405,7 +3424,25 @@ function SwapInputCard({
         ] })
       ] })
     ] }),
-    (quoteError || quoteRateText || quoteFeeText || quoteExpiresText) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "rounded-xl bg-card/60 p-3", children: quoteError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-xs text-danger", children: quoteError }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-1.5", children: [
+    (quoteError || quoteRateText || quoteFeeText || quoteExpiresText || quoteVenueText) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "rounded-xl bg-card/60 p-3", children: quoteError ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-xs text-danger", children: quoteError }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-1.5", children: [
+      quoteVenueText && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-white/40", children: "Provider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "inline-flex items-center gap-1.5 font-medium text-white/65", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "span",
+            {
+              className: cn(
+                "size-1.5 rounded-full",
+                quoteVenueTone === "spark" && "bg-network-spark",
+                quoteVenueTone === "info" && "bg-info",
+                quoteVenueTone === "primary" && "bg-primary"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          quoteVenueText
+        ] })
+      ] }),
       quoteRateText && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-white/40", children: "Rate" }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-medium text-white/65", children: quoteRateText })

package/dist/web/index.d.cts

@@ -616,6 +616,10 @@ interface SwapInputCardProps {
     quoteFeeText?: string | null;
     quoteExpiresText?: string | null;
     quoteExpiresUrgent?: boolean;
+    /** Routing venue label shown next to the rate row (e.g. "KaleidoSwap"). */
+    quoteVenueText?: string | null;
+    /** Tone of the venue dot — primary for KaleidoSwap, info/spark for Flashnet. */
+    quoteVenueTone?: 'primary' | 'spark' | 'info';
     warning?: string | null;
     submitLabel: string;
     /** Optional leading icon for the submit CTA (e.g. a Material-Symbols glyph). */
@@ -630,7 +634,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, submitIcon, 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, quoteVenueText, quoteVenueTone, 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

@@ -616,6 +616,10 @@ interface SwapInputCardProps {
     quoteFeeText?: string | null;
     quoteExpiresText?: string | null;
     quoteExpiresUrgent?: boolean;
+    /** Routing venue label shown next to the rate row (e.g. "KaleidoSwap"). */
+    quoteVenueText?: string | null;
+    /** Tone of the venue dot — primary for KaleidoSwap, info/spark for Flashnet. */
+    quoteVenueTone?: 'primary' | 'spark' | 'info';
     warning?: string | null;
     submitLabel: string;
     /** Optional leading icon for the submit CTA (e.g. a Material-Symbols glyph). */
@@ -630,7 +634,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, submitIcon, 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, quoteVenueText, quoteVenueTone, 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

@@ -2947,24 +2947,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 +3020,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 })
                         ] })
                       ] })
                     ]
@@ -3141,6 +3158,8 @@ function SwapInputCard({
   quoteFeeText,
   quoteExpiresText,
   quoteExpiresUrgent = false,
+  quoteVenueText,
+  quoteVenueTone = "primary",
   warning,
   submitLabel,
   submitIcon,
@@ -3250,7 +3269,25 @@ function SwapInputCard({
         ] })
       ] })
     ] }),
-    (quoteError || quoteRateText || quoteFeeText || quoteExpiresText) && /* @__PURE__ */ jsx35("div", { className: "rounded-xl bg-card/60 p-3", children: quoteError ? /* @__PURE__ */ jsx35("p", { className: "text-center text-xs text-danger", children: quoteError }) : /* @__PURE__ */ jsxs23("div", { className: "space-y-1.5", children: [
+    (quoteError || quoteRateText || quoteFeeText || quoteExpiresText || quoteVenueText) && /* @__PURE__ */ jsx35("div", { className: "rounded-xl bg-card/60 p-3", children: quoteError ? /* @__PURE__ */ jsx35("p", { className: "text-center text-xs text-danger", children: quoteError }) : /* @__PURE__ */ jsxs23("div", { className: "space-y-1.5", children: [
+      quoteVenueText && /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ jsx35("span", { className: "text-white/40", children: "Provider" }),
+        /* @__PURE__ */ jsxs23("span", { className: "inline-flex items-center gap-1.5 font-medium text-white/65", children: [
+          /* @__PURE__ */ jsx35(
+            "span",
+            {
+              className: cn(
+                "size-1.5 rounded-full",
+                quoteVenueTone === "spark" && "bg-network-spark",
+                quoteVenueTone === "info" && "bg-info",
+                quoteVenueTone === "primary" && "bg-primary"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          quoteVenueText
+        ] })
+      ] }),
       quoteRateText && /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between text-xs", children: [
         /* @__PURE__ */ jsx35("span", { className: "text-white/40", children: "Rate" }),
         /* @__PURE__ */ jsx35("span", { className: "font-medium text-white/65", children: quoteRateText })

package/package.json

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