@luxfi/ui 7.4.10 → 7.4.11

package/dist/icon-button.js

@@ -209,59 +209,74 @@ var IconButtonFrame = styled(View, {
     size: {
       "2xs": { width: 20, height: 20, borderRadius: 4 },
       "2xs_alt": { width: 20, height: 20, borderRadius: 4 },
-      md: { width: 32, height: 32, borderRadius: "var(--radius-base, 8px)" }
+      md: { width: 32, height: 32, borderRadius: 8 }
     },
     disabled: {
-      true: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-        pointerEvents: "none"
-      }
+      true: { opacity: 0.4, cursor: "not-allowed", pointerEvents: "none" }
     }
   }
 });
-var VARIANT_CLASSES = {
-  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
-  icon_secondary: [
-    "bg-transparent text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  icon_background: [
-    "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  link: [
-    "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
-    "hover:bg-transparent hover:text-link-primary-hover",
-    "disabled:text-text-secondary"
-  ].join(" "),
-  dropdown: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
-    "data-[selected]:hover:text-hover"
-  ].join(" "),
-  pagination: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
-  ].join(" ")
-};
-var ICON_SIZE_CLASSES = {
-  "2xs": "[&_svg]:size-5",
-  "2xs_alt": "[&_svg]:size-3",
-  md: "[&_svg]:size-5"
+var HOVER = "var(--color-hover)";
+var SELECTED_BG = "var(--color-selected-control-bg)";
+var SELECTED_FG = "var(--color-selected-control-text)";
+var VARIANT = {
+  plain: {
+    rest: { backgroundColor: "transparent", hoverStyle: { backgroundColor: "transparent" } }
+  },
+  icon_secondary: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  icon_background: {
+    rest: {
+      backgroundColor: "var(--color-button-icon-background-bg)",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  link: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-link-primary)",
+      fontWeight: "400",
+      paddingHorizontal: 0,
+      height: "auto",
+      hoverStyle: { backgroundColor: "transparent", color: "var(--color-link-primary-hover)" },
+      disabledStyle: { color: "var(--color-text-secondary)" }
+    }
+  },
+  dropdown: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-dropdown-fg)",
+      borderColor: "var(--color-button-dropdown-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent", hoverStyle: { color: HOVER } },
+    expanded: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+  },
+  pagination: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-pagination-fg)",
+      borderColor: "var(--color-button-pagination-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent" }
+  }
 };
-var SP = 4;
+var ICON_SIZE = { "2xs": 20, "2xs_alt": 12, md: 20 };
 var IconButton = React.forwardRef(
   function IconButton2(props, ref) {
     const {
@@ -275,58 +290,43 @@ var IconButton = React.forwardRef(
       disabled,
       className,
       children,
-      as: _as,
+      as: asProp,
       style: styleProp,
-      // Strip Chakra style props
-      boxSize: _boxSize,
-      color: _color,
-      px: _px,
-      borderRadius: _borderRadius,
-      ml: _ml,
-      mr: _mr,
-      _hover,
-      _expanded,
       ...rest
     } = props;
-    const shimStyle = { ...styleProp };
-    if (_boxSize !== void 0) {
-      const bs = typeof _boxSize === "number" ? `${_boxSize * SP}px` : _boxSize;
-      shimStyle.width = bs;
-      shimStyle.height = bs;
-    }
-    if (_color) shimStyle.color = _color;
-    if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
-      shimStyle.paddingLeft = v;
-      shimStyle.paddingRight = v;
-    }
-    if (_borderRadius) shimStyle.borderRadius = _borderRadius;
-    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP}px` : _ml;
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP}px` : _mr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.plain;
-    const iconSizeClass = size ? ICON_SIZE_CLASSES[size] ?? "" : "";
-    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(" ");
+    const look = VARIANT[variant] ?? VARIANT.plain;
+    const iconSize = size ? ICON_SIZE[size] : void 0;
     const button = /* @__PURE__ */ jsx(
       IconButtonFrame,
       {
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React.createElement(_as) : void 0,
-        className: combinedClassName,
-        style: mergedStyle,
+        render: asProp ? React.createElement(asProp) : void 0,
+        className: ["lux-icon", className].filter(Boolean).join(" "),
+        style: { ...styleProp, ...iconSize ? { "--icon-size": `${iconSize}px` } : null },
+        ...look.rest,
+        ...selected ? look.selected : null,
+        ...expanded ? look.expanded : null,
         ...expanded ? { "data-expanded": true } : {},
         ...selected ? { "data-selected": true } : {},
         ...highlighted ? { "data-highlighted": true } : {},
         ...loadingSkeleton ? { "data-loading-skeleton": true } : {},
         ...rest,
         children: loading ? /* @__PURE__ */ jsx(
-          "span",
+          View,
           {
-            className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent",
+            className: "lux-spin",
+            render: /* @__PURE__ */ jsx("span", {}),
             role: "status",
-            "aria-label": "Loading"
+            "aria-label": "Loading",
+            width: 20,
+            height: 20,
+            borderRadius: 1e3,
+            borderWidth: 2,
+            borderColor: "currentColor",
+            borderBottomColor: "transparent",
+            borderLeftColor: "transparent"
           }
         ) : children
       }