@smwb/ui-mcp-react 2.7.0 → 2.9.0

package/component-meta/navigation/tabs/tabs.json

@@ -1,6 +1,6 @@
 {
   "name": "Tabs",
-  "description": "Tab list container controlling associated panels.",
+  "description": "Tab list with arrow-key navigation (manual activation), optional TabPanels, link tabs for route navigation, drag-to-reorder, an overflow menu of the clipped tabs, and close/switch keyboard chords.",
   "ssr": {
     "safe": true,
     "rendering": "universal"
@@ -15,26 +15,44 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/menu/menu.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
-      "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
+      "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less",
+      "@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less\";"
   },
   "props": {
     "value": {
       "type": "number",
       "required": true,
-      "description": "Controlled value."
+      "description": "Index of the selected tab. Tabs count in the order they render: a tab left out,\nsuch as `{show && <Tab />}` while `show` is false, takes no index."
     },
     "onChange": {
       "type": "(e: React.MouseEvent<HTMLButtonElement>, index: number) => void",
       "required": true,
-      "description": "Callback fired when the value changes."
+      "description": "Called with the index of the clicked tab, counted as for `value`. A tab chosen from the keyboard\n(Enter or Space on the focused tab) calls it with that click too. A modified or non-primary\nclick (Ctrl, Meta, Shift or Alt held, or a button other than the main one) on a link tab\n(`Tab` with `href`) is the browser's, as \"open in a new tab\": it does not call `onChange`."
+    },
+    "orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "description": "Which way the tabs run. It sets `aria-orientation` on the tab list and picks the arrow keys that\nmove between tabs: Left and Right when horizontal, Up and Down when vertical. The styles draw\na horizontal row; a vertical list is yours to lay out."
+    },
+    "panels": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "The content of the tabs: `TabPanel`s, rendered after the tab row. With them each tab gets\n`aria-controls` its panel and each panel `aria-labelledby` its tab. Without them the tabs link\nto nothing, as before. Give a panel to every tab: a tab whose panel is left out still names it.\nA `TabPanel` placed anywhere else is not linked to the tabs and is always shown."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Base of the ids that link tabs and panels: tab `n` is `{id}-tab-{n}`, its panel `{id}-panel-{n}`.\nIt is also the id of the root element. A generated one by default."
     },
     "indicatorContent": {
       "type": "boolean",
       "required": false,
-      "description": "Indicator Content. Optional. Type: boolean."
+      "description": "Draw the indicator as wide as the selected tab's label rather than the whole tab."
     },
     "scrollable": {
       "type": "boolean",
@@ -44,7 +62,22 @@
     "scrollButtons": {
       "type": "boolean",
       "required": false,
-      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows."
+      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows. They are for\nthe pointer and stay out of the Tab order: the arrow keys reach every tab and scroll it into\nview."
+    },
+    "onReorder": {
+      "type": "(from: number, to: number) => void",
+      "required": false,
+      "description": "Present ⇒ the row is reorderable by dragging a tab onto another (pointer-only; there is no\nkeyboard reorder). `Tabs` does not move the tabs itself: it reports the drag with\n`onReorder(from, to)` — indexes counted as for `value` — and the owner reorders its state.\nThe tabs keep their focus through a reorder, and a reorder keeps the selection on the same tab:\nwhen the dragged tab is the selected one, its new index is reported through `onChange` too, so\na controlled owner moves its value along with its array. That report carries the drop event in\nplace of the click a keyboard or menu choice makes, so the index argument is the authoritative\none: on a drop `event.currentTarget` is the scroll area, not the moved tab."
+    },
+    "overflowMenu": {
+      "type": "boolean",
+      "required": false,
+      "description": "With `scrollable`: when the row overflows, a trigger button is rendered beside the scroller\n(in the scroll buttons' spot) that opens a menu of the tabs the viewport clips — any clipped\npart beyond a 1px tolerance counts. Each entry shows the tab's icon and label, the selected one\nis marked `aria-current=\"true\"`, and choosing one calls `onChange` for it and scrolls it into\nview. The trigger appears only after the browser has measured an overflow, so the server markup\nshows none."
+    },
+    "overflowMenuAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the overflow-menu trigger. English by default; set it to localise."
     },
     "dense": {
       "type": "boolean",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-mcp-react",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "Model Context Protocol server exposing the @smwb/ui-react (React) component catalog and customization guide.",
   "license": "MIT",
   "type": "module",
@@ -28,8 +28,8 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@smwb/ui-react": "^2.7.0",
-    "@smwb/ui-styles": "^1.5.0",
+    "@smwb/ui-react": "^2.9.0",
+    "@smwb/ui-styles": "^2.0.0",
     "glob": "^13.0.6",
     "typescript": "^6.0.3",
     "vitest": "^2.1.9"