@bug-on/m3-expressive 1.2.0 → 1.2.1

package/dist/core.js

@@ -7,6 +7,7 @@ var materialColorUtilities = require('@material/material-color-utilities');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var react = require('motion/react');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1501,6 +1502,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -1516,6 +1518,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
@@ -1577,7 +1580,87 @@ var IconButtonComponent = React11__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: asChild ? React11__namespace.Children.only(children).props.children : children
+        }),
+        "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      SIZE_STYLES[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React11__namespace.Children.only(children);
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": isToggle ? isSelected : void 0,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || restProps.disabled,
+          onClick: handleClick,
+          onPointerDown,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          className: containerClassName
+        }, restProps), {
+          children: React11__namespace.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -1593,67 +1676,9 @@ var IconButtonComponent = React11__namespace.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: {
-                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
-                width: isCustomSize ? `${iconSize}px` : void 0,
-                height: isCustomSize ? `${iconSize}px` : void 0
-              },
-              children
-            }),
-            "content"
-          ) })
-        ]
+        children: innerContent
       })
     ) });
   }