@buoy-gg/react-query 2.1.1 → 2.1.2

package/lib/commonjs/react-query/components/DataEditorMode.js

@@ -80,13 +80,11 @@ function DataEditorMode({
         paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionsGrid,
+        style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })
@@ -114,13 +112,11 @@ function DataEditorActionsFooter({
       paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
     }],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.actionsGrid,
+      style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": `ignore action button ${action.label}`,
         onClick: action.onPress,
         text: action.label,
-        bgColorClass: action.bgColorClass,
-        _textColorClass: action.textColorClass,
+        variant: action.variant,
         disabled: action.disabled
       }, index))
     })
@@ -230,23 +226,20 @@ const styles = _reactNative.StyleSheet.create({
     lineHeight: 20,
     maxWidth: 280
   },
-  // Action footer matching main dev tools exactly
+  // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
     borderTopColor: _sharedUi.buoyColors.border,
-    paddingTop: 4,
+    paddingTop: 8,
     paddingHorizontal: 12,
     backgroundColor: _sharedUi.buoyColors.base,
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
-  actionsGrid: {
+  actionsRow: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    // Reduced from 8
-    justifyContent: "space-between",
-    paddingBottom: 2
+    alignItems: "center",
+    gap: 8
   },
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {

package/lib/commonjs/react-query/components/MutationEditorMode.js

@@ -73,11 +73,9 @@ function MutationEditorMode({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.actionsGrid,
         children: actionButtons.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })

package/lib/commonjs/react-query/components/query-browser/ActionButton.js

@@ -7,63 +7,54 @@ exports.default = ActionButton;
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
-// Define the color mappings using Buoy theme colors
+// Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
-  btnRefetch: {
-    color: _sharedUi.buoyColors.success,
-    backgroundColor: _sharedUi.buoyColors.success + "15",
-    borderColor: _sharedUi.buoyColors.success + "40",
-    textColor: _sharedUi.buoyColors.success
+  refetch: {
+    dotColor: _sharedUi.buoyColors.success,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnInvalidate: {
-    color: _sharedUi.buoyColors.warning,
-    backgroundColor: _sharedUi.buoyColors.warning + "15",
-    borderColor: _sharedUi.buoyColors.warning + "40",
-    textColor: _sharedUi.buoyColors.warning
+  invalidate: {
+    dotColor: _sharedUi.buoyColors.warning,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnReset: {
-    color: _sharedUi.buoyColors.textSecondary,
-    backgroundColor: _sharedUi.buoyColors.textSecondary + "26",
-    borderColor: _sharedUi.buoyColors.textSecondary + "59",
-    textColor: _sharedUi.buoyColors.textSecondary
+  reset: {
+    dotColor: _sharedUi.buoyColors.textSecondary,
+    textColor: _sharedUi.buoyColors.text,
+    borderColor: _sharedUi.buoyColors.border
   },
-  btnRemove: {
-    color: _sharedUi.buoyColors.error,
-    backgroundColor: _sharedUi.buoyColors.error + "15",
-    borderColor: _sharedUi.buoyColors.error + "40",
-    textColor: _sharedUi.buoyColors.error
+  remove: {
+    dotColor: _sharedUi.buoyColors.error,
+    textColor: _sharedUi.buoyColors.error,
+    borderColor: _sharedUi.buoyColors.error + "40"
   },
-  btnTriggerLoading: {
-    color: _sharedUi.buoyColors.primary,
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40",
-    textColor: _sharedUi.buoyColors.primary
+  triggerLoading: {
+    dotColor: _sharedUi.buoyColors.info,
+    textColor: _sharedUi.buoyColors.info,
+    borderColor: _sharedUi.buoyColors.info + "40"
   },
-  btnTriggerLoadiError: {
-    color: _sharedUi.buoyColors.textMuted,
-    backgroundColor: _sharedUi.buoyColors.textMuted + "26",
-    borderColor: _sharedUi.buoyColors.textMuted + "59",
-    textColor: _sharedUi.buoyColors.textMuted
+  triggerError: {
+    dotColor: _sharedUi.buoyColors.error,
+    textColor: _sharedUi.buoyColors.error,
+    borderColor: _sharedUi.buoyColors.error + "40"
   }
 };
-/** Generic rectangular action button used throughout the query modal footers. */
+/** Clean, minimal action button matching React Query DevTools style. */
 function ActionButton({
   onClick,
   text,
-  _textColorClass,
-  bgColorClass,
+  variant,
   disabled
 }) {
-  // Get the button configuration
-  const config = buttonConfigs[bgColorClass];
+  const config = buttonConfigs[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      backgroundColor: disabled ? _sharedUi.buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? _sharedUi.buoyColors.textMuted + "33" : config.borderColor,
-      opacity: disabled ? 0.5 : 1
+      borderColor: disabled ? _sharedUi.buoyColors.border : config.borderColor,
+      opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
     accessibilityRole: "button",
@@ -73,7 +64,7 @@ function ActionButton({
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.color
+        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.dotColor
       }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.text, {
@@ -88,40 +79,20 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: 6,
-    // rectangular button shape
+    borderRadius: 4,
     borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    height: 25,
-    minWidth: 80,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "transparent"
   },
   dot: {
-    width: 5,
-    height: 5,
+    width: 6,
+    height: 6,
     borderRadius: 3,
-    marginRight: 6,
-    shadowColor: _sharedUi.buoyColors.text,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 2
+    marginRight: 6
   },
   text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: "monospace",
-    height: 12
+    fontSize: 12,
+    fontWeight: "500"
   }
 });

package/lib/commonjs/react-query/components/query-browser/QueryActions.js

@@ -29,108 +29,94 @@ function QueryActions({
     return null;
   }
   const queryStatus = query.state.status;
+  const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.headerText,
-      children: "Actions"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.buttonsContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query refetch action",
-        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
-        onClick: () => {
-          (0, _refetch.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionLabel,
+        children: "Actions"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: isFetching,
+          onClick: () => (0, _refetch.default)({
             query
-          });
-        },
-        bgColorClass: "btnRefetch",
-        text: "Refetch",
-        _textColorClass: "btnRefetch"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query invalidate action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _invalidate.default)({
+          }),
+          variant: "refetch",
+          text: "Refetch"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _invalidate.default)({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnInvalidate",
-        text: "Invalidate",
-        _textColorClass: "btnInvalidate"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query reset action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _reset.default)({
-            queryClient,
-            query
-          });
-        },
-        bgColorClass: "btnReset",
-        text: "Reset",
-        _textColorClass: "btnReset"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query remove action",
-        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
-        onClick: () => {
-          (0, _remove.default)({
+          }),
+          variant: "invalidate",
+          text: "Invalidate"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _reset.default)({
             queryClient,
             query
-          });
-          setSelectedQuery(undefined);
-        },
-        bgColorClass: "btnRemove",
-        text: "Remove",
-        _textColorClass: "btnRemove"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query trigger loading action",
-        disabled: false,
-        onClick: () => {
-          (0, _triggerLoading.default)({
+          }),
+          variant: "reset",
+          text: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: isFetching,
+          onClick: () => {
+            (0, _remove.default)({
+              queryClient,
+              query
+            });
+            setSelectedQuery(undefined);
+          },
+          variant: "remove",
+          text: "Remove"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionLabel,
+        children: "Triggers"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: false,
+          onClick: () => (0, _triggerLoading.default)({
             query
-          });
-        },
-        bgColorClass: "btnTriggerLoading",
-        text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
-        _textColorClass: "btnTriggerLoading"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-        "sentry-label": "ignore devtools query trigger error action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          (0, _triggerError.default)({
+          }),
+          variant: "triggerLoading",
+          text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+          disabled: queryStatus === "pending",
+          onClick: () => (0, _triggerError.default)({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnTriggerLoadiError",
-        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
-        _textColorClass: "btnTriggerLoadiError"
+          }),
+          variant: "triggerError",
+          text: queryStatus === "error" ? "Restore Error" : "Trigger Error"
+        })]
       })]
     })]
   });
 }
 const styles = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: _sharedUi.buoyColors.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
-    padding: 16,
-    gap: 12
+    gap: 16
+  },
+  section: {
+    gap: 8
   },
-  headerText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.primary,
-    marginBottom: 8,
-    textAlign: "left",
-    fontFamily: "monospace",
-    letterSpacing: 1,
-    textTransform: "uppercase"
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
   },
-  buttonsContainer: {
+  buttonsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 8

package/lib/commonjs/react-query/hooks/useActionButtons.js

@@ -11,14 +11,12 @@ var _triggerError = _interopRequireDefault(require("../utils/actions/triggerErro
 var _getQueryStatusLabel = require("../utils/getQueryStatusLabel");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * Derives the default action button configuration for an inspected query. Encapsulates business
- * rules around when to show refetch, loading, or error simulation actions.
+ * Derives compact action button configuration for the footer. Returns 3 essential buttons
+ * (Refetch, Loading, Error) optimized for small device footprints.
  *
  * @param selectedQuery - The query to derive actions for
  * @param queryClient - The query client for executing actions
  * @param queryVersion - Optional version number that increments on query state changes.
- *                       React Query mutates Query objects in place, so this version ensures
- *                       the useMemo recomputes when state changes.
  */
 function useActionButtons(selectedQuery, queryClient, queryVersion) {
   const actionButtons = (0, _react.useMemo)(() => {
@@ -26,24 +24,21 @@ function useActionButtons(selectedQuery, queryClient, queryVersion) {
     const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(selectedQuery) === "fetching";
     const buttons = [{
       label: "Refetch",
-      bgColorClass: "btnRefetch",
-      textColorClass: "btnRefetch",
+      variant: "refetch",
       disabled: isFetching,
       onPress: () => (0, _refetch.default)({
         query: selectedQuery
       })
     }, {
-      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore" : "Loading",
-      bgColorClass: "btnTriggerLoading",
-      textColorClass: "btnTriggerLoading",
+      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
+      variant: "triggerLoading",
       disabled: false,
       onPress: () => (0, _triggerLoading.default)({
         query: selectedQuery
       })
     }, {
-      label: queryStatus === "error" ? "Restore" : "Error",
-      bgColorClass: "btnTriggerLoadiError",
-      textColorClass: "btnTriggerLoadiError",
+      label: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+      variant: "triggerError",
       disabled: queryStatus === "pending",
       onPress: () => (0, _triggerError.default)({
         query: selectedQuery,
@@ -51,9 +46,6 @@ function useActionButtons(selectedQuery, queryClient, queryVersion) {
       })
     }];
     return buttons;
-    // queryVersion is the key dependency that ensures this recomputes when query state changes.
-    // React Query mutates Query objects in place, so comparing selectedQuery.state.* values
-    // doesn't work reliably (the "previous" and "current" values read from the same mutated object).
   }, [selectedQuery, queryClient, queryVersion]);
   return actionButtons;
 }

package/lib/commonjs/react-query/hooks/useMutationActionButtons.js

@@ -14,8 +14,7 @@ function useMutationActionButtons(selectedMutation) {
   const queryClient = (0, _reactQuery.useQueryClient)();
   return (0, _react.useMemo)(() => [{
     label: "Remove",
-    bgColorClass: "btnRemove",
-    textColorClass: "btnRemove",
+    variant: "remove",
     disabled: false,
     onPress: () => queryClient.getMutationCache().remove(selectedMutation)
   }], [selectedMutation, queryClient]);

package/lib/module/react-query/components/DataEditorMode.js

@@ -74,13 +74,11 @@ export function DataEditorMode({
         paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
       }],
       children: /*#__PURE__*/_jsx(View, {
-        style: styles.actionsGrid,
+        style: styles.actionsRow,
         children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })
@@ -108,13 +106,11 @@ export function DataEditorActionsFooter({
       paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
     }],
     children: /*#__PURE__*/_jsx(View, {
-      style: styles.actionsGrid,
+      style: styles.actionsRow,
       children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": `ignore action button ${action.label}`,
         onClick: action.onPress,
         text: action.label,
-        bgColorClass: action.bgColorClass,
-        _textColorClass: action.textColorClass,
+        variant: action.variant,
         disabled: action.disabled
       }, index))
     })
@@ -224,23 +220,20 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     maxWidth: 280
   },
-  // Action footer matching main dev tools exactly
+  // Action footer - compact single row layout
   actionFooter: {
     borderTopWidth: 1,
     borderTopColor: buoyColors.border,
-    paddingTop: 4,
+    paddingTop: 8,
     paddingHorizontal: 12,
     backgroundColor: buoyColors.base,
     borderBottomLeftRadius: 14,
     borderBottomRightRadius: 14
   },
-  actionsGrid: {
+  actionsRow: {
     flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    // Reduced from 8
-    justifyContent: "space-between",
-    paddingBottom: 2
+    alignItems: "center",
+    gap: 8
   },
   // Query Explorer styled container matching QueryDetails
   queryExplorerContainer: {

package/lib/module/react-query/components/MutationEditorMode.js

@@ -68,11 +68,9 @@ export function MutationEditorMode({
       children: /*#__PURE__*/_jsx(View, {
         style: styles.actionsGrid,
         children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          "sentry-label": `ignore action button ${action.label}`,
           onClick: action.onPress,
           text: action.label,
-          bgColorClass: action.bgColorClass,
-          _textColorClass: action.textColorClass,
+          variant: action.variant,
           disabled: action.disabled
         }, index))
       })

package/lib/module/react-query/components/query-browser/ActionButton.js

@@ -2,65 +2,55 @@
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { buoyColors } from "@buoy-gg/shared-ui";
-
-// Define the color mappings using Buoy theme colors
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
-  btnRefetch: {
-    color: buoyColors.success,
-    backgroundColor: buoyColors.success + "15",
-    borderColor: buoyColors.success + "40",
-    textColor: buoyColors.success
+  refetch: {
+    dotColor: buoyColors.success,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnInvalidate: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+  invalidate: {
+    dotColor: buoyColors.warning,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnReset: {
-    color: buoyColors.textSecondary,
-    backgroundColor: buoyColors.textSecondary + "26",
-    borderColor: buoyColors.textSecondary + "59",
-    textColor: buoyColors.textSecondary
+  reset: {
+    dotColor: buoyColors.textSecondary,
+    textColor: buoyColors.text,
+    borderColor: buoyColors.border
   },
-  btnRemove: {
-    color: buoyColors.error,
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40",
-    textColor: buoyColors.error
+  remove: {
+    dotColor: buoyColors.error,
+    textColor: buoyColors.error,
+    borderColor: buoyColors.error + "40"
   },
-  btnTriggerLoading: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
+  triggerLoading: {
+    dotColor: buoyColors.info,
+    textColor: buoyColors.info,
+    borderColor: buoyColors.info + "40"
   },
-  btnTriggerLoadiError: {
-    color: buoyColors.textMuted,
-    backgroundColor: buoyColors.textMuted + "26",
-    borderColor: buoyColors.textMuted + "59",
-    textColor: buoyColors.textMuted
+  triggerError: {
+    dotColor: buoyColors.error,
+    textColor: buoyColors.error,
+    borderColor: buoyColors.error + "40"
   }
 };
-/** Generic rectangular action button used throughout the query modal footers. */
+/** Clean, minimal action button matching React Query DevTools style. */
 export default function ActionButton({
   onClick,
   text,
-  _textColorClass,
-  bgColorClass,
+  variant,
   disabled
 }) {
-  // Get the button configuration
-  const config = buttonConfigs[bgColorClass];
+  const config = buttonConfigs[variant];
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools action button",
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
-      opacity: disabled ? 0.5 : 1
+      borderColor: disabled ? buoyColors.border : config.borderColor,
+      opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
     accessibilityRole: "button",
@@ -70,7 +60,7 @@ export default function ActionButton({
     },
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.color
+        backgroundColor: disabled ? buoyColors.textMuted : config.dotColor
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
@@ -85,40 +75,20 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: 6,
-    // rectangular button shape
+    borderRadius: 4,
     borderWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    height: 25,
-    minWidth: 80,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: "transparent"
   },
   dot: {
-    width: 5,
-    height: 5,
+    width: 6,
+    height: 6,
     borderRadius: 3,
-    marginRight: 6,
-    shadowColor: buoyColors.text,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 2
+    marginRight: 6
   },
   text: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: "monospace",
-    height: 12
+    fontSize: 12,
+    fontWeight: "500"
   }
 });

package/lib/module/react-query/components/query-browser/QueryActions.js

@@ -24,108 +24,94 @@ export default function QueryActions({
     return null;
   }
   const queryStatus = query.state.status;
+  const isFetching = getQueryStatusLabel(query) === "fetching";
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.headerText,
-      children: "Actions"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.buttonsContainer,
-      children: [/*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query refetch action",
-        disabled: getQueryStatusLabel(query) === "fetching",
-        onClick: () => {
-          refetch({
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionLabel,
+        children: "Actions"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/_jsx(ActionButton, {
+          disabled: isFetching,
+          onClick: () => refetch({
             query
-          });
-        },
-        bgColorClass: "btnRefetch",
-        text: "Refetch",
-        _textColorClass: "btnRefetch"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query invalidate action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          invalidate({
+          }),
+          variant: "refetch",
+          text: "Refetch"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => invalidate({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnInvalidate",
-        text: "Invalidate",
-        _textColorClass: "btnInvalidate"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query reset action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          reset({
-            queryClient,
-            query
-          });
-        },
-        bgColorClass: "btnReset",
-        text: "Reset",
-        _textColorClass: "btnReset"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query remove action",
-        disabled: getQueryStatusLabel(query) === "fetching",
-        onClick: () => {
-          remove({
+          }),
+          variant: "invalidate",
+          text: "Invalidate"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => reset({
             queryClient,
             query
-          });
-          setSelectedQuery(undefined);
-        },
-        bgColorClass: "btnRemove",
-        text: "Remove",
-        _textColorClass: "btnRemove"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query trigger loading action",
-        disabled: false,
-        onClick: () => {
-          triggerLoading({
+          }),
+          variant: "reset",
+          text: "Reset"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: isFetching,
+          onClick: () => {
+            remove({
+              queryClient,
+              query
+            });
+            setSelectedQuery(undefined);
+          },
+          variant: "remove",
+          text: "Remove"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionLabel,
+        children: "Triggers"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonsRow,
+        children: [/*#__PURE__*/_jsx(ActionButton, {
+          disabled: false,
+          onClick: () => triggerLoading({
             query
-          });
-        },
-        bgColorClass: "btnTriggerLoading",
-        text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
-        _textColorClass: "btnTriggerLoading"
-      }), /*#__PURE__*/_jsx(ActionButton, {
-        "sentry-label": "ignore devtools query trigger error action",
-        disabled: queryStatus === "pending",
-        onClick: () => {
-          triggerError({
+          }),
+          variant: "triggerLoading",
+          text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading"
+        }), /*#__PURE__*/_jsx(ActionButton, {
+          disabled: queryStatus === "pending",
+          onClick: () => triggerError({
             query,
             queryClient
-          });
-        },
-        bgColorClass: "btnTriggerLoadiError",
-        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
-        _textColorClass: "btnTriggerLoadiError"
+          }),
+          variant: "triggerError",
+          text: queryStatus === "error" ? "Restore Error" : "Trigger Error"
+        })]
       })]
     })]
   });
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    padding: 16,
-    gap: 12
+    gap: 16
+  },
+  section: {
+    gap: 8
   },
-  headerText: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    marginBottom: 8,
-    textAlign: "left",
-    fontFamily: "monospace",
-    letterSpacing: 1,
-    textTransform: "uppercase"
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
   },
-  buttonsContainer: {
+  buttonsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 8

package/lib/module/react-query/hooks/useActionButtons.js

@@ -6,14 +6,12 @@ import refetch from "../utils/actions/refetch";
 import triggerError from "../utils/actions/triggerError";
 import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
 /**
- * Derives the default action button configuration for an inspected query. Encapsulates business
- * rules around when to show refetch, loading, or error simulation actions.
+ * Derives compact action button configuration for the footer. Returns 3 essential buttons
+ * (Refetch, Loading, Error) optimized for small device footprints.
  *
  * @param selectedQuery - The query to derive actions for
  * @param queryClient - The query client for executing actions
  * @param queryVersion - Optional version number that increments on query state changes.
- *                       React Query mutates Query objects in place, so this version ensures
- *                       the useMemo recomputes when state changes.
  */
 export function useActionButtons(selectedQuery, queryClient, queryVersion) {
   const actionButtons = useMemo(() => {
@@ -21,24 +19,21 @@ export function useActionButtons(selectedQuery, queryClient, queryVersion) {
     const isFetching = getQueryStatusLabel(selectedQuery) === "fetching";
     const buttons = [{
       label: "Refetch",
-      bgColorClass: "btnRefetch",
-      textColorClass: "btnRefetch",
+      variant: "refetch",
       disabled: isFetching,
       onPress: () => refetch({
         query: selectedQuery
       })
     }, {
-      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore" : "Loading",
-      bgColorClass: "btnTriggerLoading",
-      textColorClass: "btnTriggerLoading",
+      label: selectedQuery.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
+      variant: "triggerLoading",
       disabled: false,
       onPress: () => triggerLoading({
         query: selectedQuery
       })
     }, {
-      label: queryStatus === "error" ? "Restore" : "Error",
-      bgColorClass: "btnTriggerLoadiError",
-      textColorClass: "btnTriggerLoadiError",
+      label: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+      variant: "triggerError",
       disabled: queryStatus === "pending",
       onPress: () => triggerError({
         query: selectedQuery,
@@ -46,9 +41,6 @@ export function useActionButtons(selectedQuery, queryClient, queryVersion) {
       })
     }];
     return buttons;
-    // queryVersion is the key dependency that ensures this recomputes when query state changes.
-    // React Query mutates Query objects in place, so comparing selectedQuery.state.* values
-    // doesn't work reliably (the "previous" and "current" values read from the same mutated object).
   }, [selectedQuery, queryClient, queryVersion]);
   return actionButtons;
 }

package/lib/module/react-query/hooks/useMutationActionButtons.js

@@ -10,8 +10,7 @@ export function useMutationActionButtons(selectedMutation) {
   const queryClient = useQueryClient();
   return useMemo(() => [{
     label: "Remove",
-    bgColorClass: "btnRemove",
-    textColorClass: "btnRemove",
+    variant: "remove",
     disabled: false,
     onPress: () => queryClient.getMutationCache().remove(selectedMutation)
   }], [selectedMutation, queryClient]);

package/lib/typescript/react-query/components/DataEditorMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataEditorMode.d.ts","sourceRoot":"","sources":["../../../../src/react-query/components/DataEditorMode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AAyB9D,UAAU,mBAAmB;IAC3B,aAAa,EAAE,KAAK,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,cAAc,EACd,qBAA6B,EAC7B,YAAY,GACb,EAAE,mBAAmB,+BA8ErB;AAGD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE;IACD,aAAa,EAAE,KAAK,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,+BA2BA"}
+{"version":3,"file":"DataEditorMode.d.ts","sourceRoot":"","sources":["../../../../src/react-query/components/DataEditorMode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AAS9D,UAAU,mBAAmB;IAC3B,aAAa,EAAE,KAAK,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,aAAa,EACb,cAAc,EACd,qBAA6B,EAC7B,YAAY,GACb,EAAE,mBAAmB,+BA4ErB;AAGD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE;IACD,aAAa,EAAE,KAAK,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,+BAyBA"}

package/lib/typescript/react-query/components/MutationEditorMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MutationEditorMode.d.ts","sourceRoot":"","sources":["../../../../src/react-query/components/MutationEditorMode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQjD,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,QAAQ,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,GACf,EAAE,uBAAuB,+BAuEzB"}
+{"version":3,"file":"MutationEditorMode.d.ts","sourceRoot":"","sources":["../../../../src/react-query/components/MutationEditorMode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQjD,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,QAAQ,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,gBAAgB,EAChB,cAAc,GACf,EAAE,uBAAuB,+BAqEzB"}

package/lib/typescript/react-query/components/query-browser/ActionButton.d.ts

@@ -1,49 +1,11 @@
-declare const buttonConfigs: {
-    btnRefetch: {
-        color: "#20C997";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#20C997";
-    };
-    btnInvalidate: {
-        color: "#FFA94D";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#FFA94D";
-    };
-    btnReset: {
-        color: "#A0A0A0";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#A0A0A0";
-    };
-    btnRemove: {
-        color: "#EF4444";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#EF4444";
-    };
-    btnTriggerLoading: {
-        color: "#20C997";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#20C997";
-    };
-    btnTriggerLoadiError: {
-        color: "#888888";
-        backgroundColor: string;
-        borderColor: string;
-        textColor: "#888888";
-    };
-};
+export type ButtonVariant = "refetch" | "invalidate" | "reset" | "remove" | "triggerLoading" | "triggerError";
 interface Props {
     onClick: () => void;
     text: string;
-    bgColorClass: keyof typeof buttonConfigs;
-    _textColorClass: keyof typeof buttonConfigs;
+    variant: ButtonVariant;
     disabled: boolean;
 }
-/** Generic rectangular action button used throughout the query modal footers. */
-export default function ActionButton({ onClick, text, _textColorClass, bgColorClass, disabled, }: Props): import("react").JSX.Element;
+/** Clean, minimal action button matching React Query DevTools style. */
+export default function ActionButton({ onClick, text, variant, disabled, }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ActionButton.d.ts.map

package/lib/typescript/react-query/components/query-browser/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/ActionButton.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAEF,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,OAAO,aAAa,CAAC;IACzC,eAAe,EAAE,MAAM,OAAO,aAAa,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,iFAAiF;AACjF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,QAAQ,GACT,EAAE,KAAK,+BA0CP"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/ActionButton.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,cAAc,CAAC;AAuCnB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wEAAwE;AACxE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,+BAoCP"}

package/lib/typescript/react-query/components/query-browser/QueryActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryActions.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AAY9D,UAAU,KAAK;IACb,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B;AACD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,KAAK,sCAgFtE"}
+{"version":3,"file":"QueryActions.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,KAAK,EAAkB,MAAM,uBAAuB,CAAC;AAY9D,UAAU,KAAK;IACb,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,KAAK,sCAoEtE"}

package/lib/typescript/react-query/hooks/useActionButtons.d.ts

@@ -1,21 +1,18 @@
 import { Query, QueryClient } from "@tanstack/react-query";
-interface ActionButtonConfig {
+import type { ButtonVariant } from "../components/query-browser/ActionButton";
+export interface ActionButtonConfig {
     label: string;
-    bgColorClass: "btnRefetch" | "btnTriggerLoading" | "btnTriggerLoadiError" | "btnRemove";
-    textColorClass: "btnRefetch" | "btnTriggerLoading" | "btnTriggerLoadiError" | "btnRemove";
+    variant: ButtonVariant;
     disabled: boolean;
     onPress: () => void;
 }
 /**
- * Derives the default action button configuration for an inspected query. Encapsulates business
- * rules around when to show refetch, loading, or error simulation actions.
+ * Derives compact action button configuration for the footer. Returns 3 essential buttons
+ * (Refetch, Loading, Error) optimized for small device footprints.
  *
  * @param selectedQuery - The query to derive actions for
  * @param queryClient - The query client for executing actions
  * @param queryVersion - Optional version number that increments on query state changes.
- *                       React Query mutates Query objects in place, so this version ensures
- *                       the useMemo recomputes when state changes.
  */
 export declare function useActionButtons(selectedQuery: Query, queryClient: QueryClient, queryVersion?: number): ActionButtonConfig[];
-export {};
 //# sourceMappingURL=useActionButtons.d.ts.map

package/lib/typescript/react-query/hooks/useActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/react-query/hooks/useActionButtons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAM3D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EACR,YAAY,GACZ,mBAAmB,GACnB,sBAAsB,GACtB,WAAW,CAAC;IAChB,cAAc,EACV,YAAY,GACZ,mBAAmB,GACnB,sBAAsB,GACtB,WAAW,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,CAAC,EAAE,MAAM,GACpB,kBAAkB,EAAE,CAqCtB"}
+{"version":3,"file":"useActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/react-query/hooks/useActionButtons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAK3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAE9E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,CAAC,EAAE,MAAM,GACpB,kBAAkB,EAAE,CA+BtB"}

package/lib/typescript/react-query/hooks/useMutationActionButtons.d.ts

@@ -1,15 +1,8 @@
 import { Mutation } from "@tanstack/react-query";
-interface ActionButtonConfig {
-    label: string;
-    bgColorClass: "btnRefetch" | "btnTriggerLoading" | "btnTriggerLoadiError" | "btnRemove";
-    textColorClass: "btnRefetch" | "btnTriggerLoading" | "btnTriggerLoadiError" | "btnRemove";
-    disabled: boolean;
-    onPress: () => void;
-}
+import type { ActionButtonConfig } from "./useActionButtons";
 /**
  * Supplies action button metadata for a selected mutation. Currently exposes a remove control but
  * centralizes logic so future actions stay consistent across the UI.
  */
 export declare function useMutationActionButtons(selectedMutation: Mutation): ActionButtonConfig[];
-export {};
 //# sourceMappingURL=useMutationActionButtons.d.ts.map

package/lib/typescript/react-query/hooks/useMutationActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/react-query/hooks/useMutationActionButtons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAmB,MAAM,uBAAuB,CAAC;AAElE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EACR,YAAY,GACZ,mBAAmB,GACnB,sBAAsB,GACtB,WAAW,CAAC;IAChB,cAAc,EACV,YAAY,GACZ,mBAAmB,GACnB,sBAAsB,GACtB,WAAW,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,gBAAgB,EAAE,QAAQ,GACzB,kBAAkB,EAAE,CActB"}
+{"version":3,"file":"useMutationActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/react-query/hooks/useMutationActionButtons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,gBAAgB,EAAE,QAAQ,GACzB,kBAAkB,EAAE,CAatB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/react-query",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "react-query package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "2.1.1",
-    "@buoy-gg/shared-ui": "2.1.1"
+    "@buoy-gg/floating-tools-core": "2.1.2",
+    "@buoy-gg/shared-ui": "2.1.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",