kaleido-ui 0.1.106 → 0.1.107

package/dist/web/index.cjs

@@ -3800,6 +3800,42 @@ function readableTagColor(color) {
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
   return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
 }
+var chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
+var chipActiveClass = "bg-primary/[0.14] text-primary";
+var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
+function AssetSelectorNetworkMark({ network }) {
+  return network.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
+}
+function AssetSelectorNetworkFilterTrigger({
+  activeNetworkOption,
+  open,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        chipBaseClass,
+        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        activeNetworkOption || open ? chipActiveClass : chipIdleClass
+      ),
+      children: [
+        activeNetworkOption && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+        activeNetworkOption ? activeNetworkOption.label : "All",
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          Icon,
+          {
+            name: "expand_more",
+            size: "xs",
+            className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3858,36 +3894,13 @@ function AssetSelector({
     disabled: option.id === disabledId || option.ticker === disabledTicker
   }));
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
-  const chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
-  const chipActiveClass = "bg-primary/[0.14] text-primary";
-  const chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
-  const networkMark = (network) => network.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
   const networkFilterButton = hasNetworkFilter && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative shrink-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      AssetSelectorNetworkFilterTrigger,
       {
-        type: "button",
-        onClick: () => setNetworkMenuOpen((value) => !value),
-        className: cn(
-          chipBaseClass,
-          "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
-          activeNetworkOption || networkMenuOpen ? chipActiveClass : chipIdleClass
-        ),
-        children: [
-          activeNetworkOption ? networkMark(activeNetworkOption) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "hub", size: "xs", className: "shrink-0" }),
-          activeNetworkOption ? activeNetworkOption.label : "All",
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            Icon,
-            {
-              name: "expand_more",
-              size: "xs",
-              className: cn(
-                "shrink-0 transition-transform duration-200",
-                networkMenuOpen && "rotate-180"
-              )
-            }
-          )
-        ]
+        activeNetworkOption,
+        open: networkMenuOpen,
+        onClick: () => setNetworkMenuOpen((value) => !value)
       }
     ),
     networkMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute right-0 top-full z-10 mt-1.5 w-48 overflow-hidden rounded-xl border border-white/[0.08] bg-popover shadow-popover", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "max-h-60 overflow-y-auto p-1", children: [
@@ -3925,7 +3938,7 @@ function AssetSelector({
               isActive ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
             ),
             children: [
-              networkMark(network),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetSelectorNetworkMark, { network }),
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: network.label }),
               isActive && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
             ]

package/dist/web/index.js

@@ -3618,6 +3618,42 @@ function readableTagColor(color) {
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
   return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
 }
+var chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
+var chipActiveClass = "bg-primary/[0.14] text-primary";
+var chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
+function AssetSelectorNetworkMark({ network }) {
+  return network.iconUrl ? /* @__PURE__ */ jsx38("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx38("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
+}
+function AssetSelectorNetworkFilterTrigger({
+  activeNetworkOption,
+  open,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs25(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        chipBaseClass,
+        "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
+        activeNetworkOption || open ? chipActiveClass : chipIdleClass
+      ),
+      children: [
+        activeNetworkOption && /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+        activeNetworkOption ? activeNetworkOption.label : "All",
+        /* @__PURE__ */ jsx38(
+          Icon,
+          {
+            name: "expand_more",
+            size: "xs",
+            className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3676,36 +3712,13 @@ function AssetSelector({
     disabled: option.id === disabledId || option.ticker === disabledTicker
   }));
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
-  const chipBaseClass = "shrink-0 rounded-full text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors";
-  const chipActiveClass = "bg-primary/[0.14] text-primary";
-  const chipIdleClass = "bg-surface-card text-text-dimmed hover:text-white/75";
-  const networkMark = (network) => network.iconUrl ? /* @__PURE__ */ jsx38("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx38("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: network.label.charAt(0) });
   const networkFilterButton = hasNetworkFilter && /* @__PURE__ */ jsxs25("div", { className: "relative shrink-0", children: [
-    /* @__PURE__ */ jsxs25(
-      "button",
+    /* @__PURE__ */ jsx38(
+      AssetSelectorNetworkFilterTrigger,
       {
-        type: "button",
-        onClick: () => setNetworkMenuOpen((value) => !value),
-        className: cn(
-          chipBaseClass,
-          "flex items-center gap-1.5 py-1.5 pl-2 pr-2.5",
-          activeNetworkOption || networkMenuOpen ? chipActiveClass : chipIdleClass
-        ),
-        children: [
-          activeNetworkOption ? networkMark(activeNetworkOption) : /* @__PURE__ */ jsx38(Icon, { name: "hub", size: "xs", className: "shrink-0" }),
-          activeNetworkOption ? activeNetworkOption.label : "All",
-          /* @__PURE__ */ jsx38(
-            Icon,
-            {
-              name: "expand_more",
-              size: "xs",
-              className: cn(
-                "shrink-0 transition-transform duration-200",
-                networkMenuOpen && "rotate-180"
-              )
-            }
-          )
-        ]
+        activeNetworkOption,
+        open: networkMenuOpen,
+        onClick: () => setNetworkMenuOpen((value) => !value)
       }
     ),
     networkMenuOpen && /* @__PURE__ */ jsx38("div", { className: "absolute right-0 top-full z-10 mt-1.5 w-48 overflow-hidden rounded-xl border border-white/[0.08] bg-popover shadow-popover", children: /* @__PURE__ */ jsxs25("div", { className: "max-h-60 overflow-y-auto p-1", children: [
@@ -3743,7 +3756,7 @@ function AssetSelector({
               isActive ? "bg-primary/[0.14] text-primary" : "text-white/75 hover:bg-accent hover:text-white"
             ),
             children: [
-              networkMark(network),
+              /* @__PURE__ */ jsx38(AssetSelectorNetworkMark, { network }),
               /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate text-left", children: network.label }),
               isActive && /* @__PURE__ */ jsx38(Icon, { name: "check", size: "xs", className: "shrink-0 text-primary" })
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.106",
+  "version": "0.1.107",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -43,6 +43,7 @@
     "showcase": "vite --config showcase/vite.config.ts",
     "showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",
     "type-check": "tsc --noEmit",
+    "test": "node --import tsx --test tests/*.test.tsx",
     "clean": "rm -rf dist"
   },
   "dependencies": {