@primer/brand-mcp 0.77.1-rc.bd5b9efe → 0.78.0-rc.6fbe9fb5

package/dist/catalog.json

@@ -1,7 +1,7 @@
 {
   "brandPackage": "@primer/react-brand",
-  "generatedFromVersion": "0.77.1-rc.bd5b9efe",
-  "generatedAt": "2026-09-29T12:39:46.017Z",
+  "generatedFromVersion": "0.78.0-rc.6fbe9fb5",
+  "generatedAt": "2026-10-05T16:42:34.069Z",
   "components": [
     {
       "name": "Hero",
@@ -274,6 +274,83 @@
         "click"
       ]
     },
+    {
+      "name": "IconButton",
+      "module": "@primer/react-brand",
+      "subcomponents": [],
+      "props": [
+        {
+          "name": "as",
+          "type": "C",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "IconButtonVariant",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Icon",
+          "required": true
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "inactive",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "loadingAnnouncement",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "rounded",
+          "type": "boolean",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "IconButtonSize",
+          "required": false
+        },
+        {
+          "name": "tooltipDirection",
+          "type": "TooltipDirection",
+          "required": false
+        }
+      ],
+      "examples": [
+        {
+          "title": "IconButton example",
+          "code": "<Stack direction=\"vertical\" alignItems=\"flex-start\" gap=\"condensed\">\n  <div role=\"group\" aria-label=\"Text formatting\">\n    <ButtonGroup variant=\"joined\" buttonSize=\"small\">\n      <IconButton\n        icon={BoldIcon}\n        aria-label=\"Bold\"\n        aria-pressed={activeFormats.includes('bold')}\n        variant={activeFormats.includes('bold') ? 'primary' : 'secondary'}\n        onClick={() => toggleFormat('bold')}\n      />\n      <IconButton\n        icon={ItalicIcon}\n        aria-label=\"Italic\"\n        aria-pressed={activeFormats.includes('italic')}\n        variant={activeFormats.includes('italic') ? 'primary' : 'secondary'}\n        onClick={() => toggleFormat('italic')}\n      />\n      <IconButton\n        icon={ListUnorderedIcon}\n        aria-label=\"Bulleted list\"\n        aria-pressed={activeFormats.includes('bulleted list')}\n        variant={activeFormats.includes('bulleted list') ? 'primary' : 'secondary'}\n        onClick={() => toggleFormat('bulleted list')}\n      />\n    </ButtonGroup>\n  </div>\n  <Text as=\"p\" size=\"100\" variant=\"muted\" aria-live=\"polite\">\n    {activeFormats.length > 0 ? `Selected: ${activeFormats.join(', ')}` : 'No formatting selected'}\n  </Text>\n</Stack>",
+          "source": "story"
+        }
+      ],
+      "description": "Use an icon button to represent an action with an Octicon instead of a visible text label.",
+      "keywords": [
+        "action",
+        "button",
+        "control",
+        "icon",
+        "interactive"
+      ]
+    },
     {
       "name": "ButtonGroup",
       "module": "@primer/react-brand",
@@ -297,6 +374,11 @@
             "a"
           ],
           "required": false
+        },
+        {
+          "name": "variant",
+          "type": "ButtonGroupVariant",
+          "required": false
         }
       ],
       "examples": [
@@ -1076,7 +1158,7 @@
         },
         {
           "name": "size",
-          "type": "FormInputSizes",
+          "type": "TextInputSize",
           "description": "Applies alternative sizing to the input",
           "required": false
         },
@@ -1990,6 +2072,7 @@
       "module": "@primer/react-brand",
       "subcomponents": [
         "ActionMenu.Button",
+        "ActionMenu.IconButton",
         "ActionMenu.Item",
         "ActionMenu.Overlay",
         "ActionMenu.testIds"
@@ -2029,7 +2112,7 @@
         },
         {
           "name": "size",
-          "type": "ActionMenuSizes",
+          "type": "ActionMenuSize",
           "description": "Size configuratin of the ActionMenu",
           "required": false
         },
@@ -2041,7 +2124,7 @@
         },
         {
           "name": "mode",
-          "type": "ActionMenuButtonModes",
+          "type": "ActionMenuButtonMode",
           "description": "Alternative behavior for the button and menu items - `default`: The button and menu items behave as a standard button and menu item. - `split-button`: The button behaves as a split button, and the menu items behave as links.",
           "required": false
         }
@@ -2945,6 +3028,11 @@
           "type": "TooltipDirection",
           "required": false
         },
+        {
+          "name": "delay",
+          "type": "TooltipDelay",
+          "required": false
+        },
         {
           "name": "text",
           "type": "string",
@@ -7005,6 +7093,16 @@
       "value": "var(--brand-color-accent-primary)",
       "group": "functional"
     },
+    {
+      "name": "--brand-ActionMenu-color-splitButton-divider-default",
+      "value": "var(--brand-color-border-muted)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-ActionMenu-color-splitButton-divider-primary",
+      "value": "var(--base-color-scale-green-7)",
+      "group": "functional"
+    },
     {
       "name": "--brand-ActionMenu-color-item-hover",
       "value": "var(--base-color-scale-gray-1)",
@@ -7080,6 +7178,36 @@
       "value": "var(--base-color-scale-gray-6)",
       "group": "functional"
     },
+    {
+      "name": "--brand-Button-icon-size-large",
+      "value": "var(--base-size-20)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Button-icon-size-medium",
+      "value": "var(--base-size-16)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Button-icon-size-small",
+      "value": "var(--base-size-16)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Button-control-size-large",
+      "value": "var(--brand-control-large-size)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Button-control-size-medium",
+      "value": "var(--brand-control-medium-size)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Button-control-size-small",
+      "value": "var(--brand-control-small-size)",
+      "group": "functional"
+    },
     {
       "name": "--brand-button-primary-bgColor-rest",
       "value": "var(--base-color-scale-green-6)",
@@ -8025,6 +8153,116 @@
       "value": "var(--base-color-scale-yellow-5)",
       "group": "functional"
     },
+    {
+      "name": "--brand-IconButton-loadingIndicator-animationDuration-reducedMotion",
+      "value": "1.6s",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-loadingIndicator-animationDuration-default",
+      "value": "0.8s",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-icon-size-large",
+      "value": "var(--brand-Button-icon-size-large)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-icon-size-medium",
+      "value": "var(--brand-Button-icon-size-large)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-icon-size-small",
+      "value": "var(--brand-Button-icon-size-small)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-control-size-large",
+      "value": "var(--brand-Button-control-size-large)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-control-size-medium",
+      "value": "var(--brand-Button-control-size-medium)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-control-size-small",
+      "value": "var(--brand-Button-control-size-small)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-fgColor-rest",
+      "value": "var(--brand-color-danger-fg)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-fgColor-hover",
+      "value": "var(--base-color-scale-white-0)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-fgColor-active",
+      "value": "var(--base-color-scale-white-0)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-bgColor-rest",
+      "value": "var(--brand-button-secondary-bgColor-rest)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-bgColor-hover",
+      "value": "var(--brand-color-danger-emphasis)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-bgColor-active",
+      "value": "var(--brand-color-danger-emphasis)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-borderColor-rest",
+      "value": "var(--brand-button-secondary-borderColor-rest)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-borderColor-hover",
+      "value": "var(--brand-color-danger-emphasis)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-danger-borderColor-active",
+      "value": "var(--brand-color-danger-emphasis)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-inactive-fgColor",
+      "value": "var(--brand-color-text-muted)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-inactive-bgColor",
+      "value": "var(--brand-color-canvas-subtle)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-inactive-borderColor",
+      "value": "var(--brand-color-canvas-subtle)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-invisible-bgColor-rest",
+      "value": "transparent",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-IconButton-invisible-borderColor-rest",
+      "value": "transparent",
+      "group": "functional"
+    },
     {
       "name": "--brand-IDE-height",
       "value": "50rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-mcp",
-  "version": "0.77.1-rc.bd5b9efe",
+  "version": "0.78.0-rc.6fbe9fb5",
   "description": "MCP (Model Context Protocol) server that helps AI agents use Primer Brand (@primer/react-brand) correctly when building GitHub marketing and landing pages.",
   "keywords": [
     "primer",