@gostudent/shared-ui-library-mcp 4.1.1 → 4.2.0-DT-17190.2

package/library-manifest.json

@@ -277,6 +277,11 @@
             "lg"
           ]
         },
+        {
+          "name": "paddingOverride",
+          "description": "Overrides `padding` with an explicit CSS value (e.g. \"12px 24px\").",
+          "options": []
+        },
         {
           "name": "radius",
           "description": "Border radius: sm=8px | md=12px | lg=16px.",
@@ -286,6 +291,17 @@
             "lg"
           ]
         },
+        {
+          "name": "background",
+          "description": "Background surface colour.",
+          "options": [
+            "default",
+            "subtle",
+            "branded",
+            "blue",
+            "lightSteel"
+          ]
+        },
         {
           "name": "bordered",
           "description": "Show a 1px border using the default border colour.",
@@ -302,6 +318,11 @@
           "name": "NoBorder",
           "jsx": "<Card padding=\"lg\" radius=\"sm\" bordered={false} children=\"This card has no border.\" />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-card--no-border"
+        },
+        {
+          "name": "PaddingOverride",
+          "jsx": "<Card paddingOverride=\"12px 40px\" radius=\"sm\" children=\"Custom padding via paddingOverride=\"12px 40px\".\" />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-card--padding-override"
         }
       ]
     },
@@ -428,7 +449,7 @@
     },
     {
       "name": "Disclosure",
-      "description": "A lightweight disclosure (expand/collapse) component that reveals inline content when toggled.\n\nFollows the WAI-ARIA disclosure pattern — the trigger is a `<button>` with `aria-expanded`,\nand the collapsible region appears directly below, pushing layout down (not a floating overlay).\n\nSupports both **uncontrolled** (via `defaultOpen`) and **controlled** (via `open` + `onToggle`) modes.\n\n### Usage\n\n```tsx\nimport { Disclosure, InfoIcon } from '@gostudent/shared-ui-library';\n\n<Disclosure\n  trigger={\n    <>\n      <InfoIcon size=\"sm\" />\n      <span>5 pending feedback</span>\n    </>\n  }\n>\n  <ul>\n    <li>Alice — awaiting review</li>\n    <li>Bob — submitted</li>\n  </ul>\n</Disclosure>\n```",
+      "description": "A lightweight disclosure (expand/collapse) component that reveals inline content when toggled.\n\nFollows the WAI-ARIA disclosure pattern — the trigger is a `<button>` with `aria-expanded`,\nand the collapsible region appears directly below, pushing layout down (not a floating overlay).\n\nSupports both **uncontrolled** (via `defaultOpen`) and **controlled** (via `open` + `onToggle`) modes.\n\n### Usage\n\n```tsx\nimport { Disclosure, InfoIcon } from '@gostudent/shared-ui-library';\n\n<Disclosure\n  trigger={\n    <>\n      <InfoIcon size=\"sm\" />\n      <span>5 pending feedback</span>\n    </>\n  }\n>\n  <ul>\n    <li>Alice — awaiting review</li>\n    <li>Bob — submitted</li>\n  </ul>\n</Disclosure>\n```\n\n### Compound usage\n\nWhen the trigger and the collapsible region need to live in different parts of a layout\n(e.g. an icon-only chevron in a header row, with the panel spanning full width below it),\nuse the compound parts directly. They share open/closed state through context, so `Trigger`\nand `Content` can be placed anywhere inside `Root`:\n\n```tsx\nimport { Disclosure } from '@gostudent/shared-ui-library';\n\n<Disclosure.Root open={isOpen} onToggle={setIsOpen}>\n  <div className={styles.headerRow}>\n    {metadata}\n    <Disclosure.Trigger iconOnly aria-label=\"Show services\" />\n  </div>\n  <Disclosure.Content>{servicesList}</Disclosure.Content>\n</Disclosure.Root>\n```\n\nThe single-component `<Disclosure trigger={…}>` API above is built on top of these same parts,\nand keeps working for triggers and content that always render stacked together.",
       "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-layout-disclosure",
       "props": [
         {
@@ -465,6 +486,15 @@
           "name": "triggerClassName",
           "description": "Additional CSS class applied to the inner trigger `<button>` (className only reaches the root).",
           "options": []
+        },
+        {
+          "name": "variant",
+          "description": "Trigger colour/underline style.",
+          "options": [
+            "negative",
+            "link",
+            "neutral"
+          ]
         }
       ],
       "examples": [
@@ -1030,6 +1060,45 @@
         }
       ]
     },
+    {
+      "name": "Menu",
+      "description": "**Menu** is a presentational action-list panel. It does not own open state, trigger or positioning —\nthe consumer (e.g. `TopNavigation`) is responsible for that.\n\n### Usage\n\n```tsx\nimport { Menu, MenuHeader, MenuItem } from '@gostudent/shared-ui-library';\n\n<Menu aria-label=\"Account menu\">\n  <MenuHeader>\n    <Avatar name=\"Anna James\" />\n    <span>Anna James</span>\n    <RoleTag role=\"student\" />\n  </MenuHeader>\n  <MenuItem onClick={() => {}}>My profile</MenuItem>\n  <MenuItem icon={<GlobeIcon />} trailing={<ChevronRightIcon />}>English</MenuItem>\n  <MenuItem onClick={() => {}}>Logout</MenuItem>\n</Menu>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-menu",
+      "props": [
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "aria-label",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--default"
+        },
+        {
+          "name": "WithHeader",
+          "jsx": "// See \"WithHeader\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--with-header"
+        },
+        {
+          "name": "WithIcons",
+          "jsx": "// See \"WithIcons\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-menu--with-icons"
+        }
+      ]
+    },
     {
       "name": "MetadataItem",
       "description": "The **MetadataItem** component pairs a small icon with a text label for displaying\nstructured information such as dates, times, durations, or participant counts.\n\n### Usage\n\n```tsx\nimport { MetadataItem, EventNoteIcon } from '@gostudent/shared-ui-library';\n\n<MetadataItem icon={<EventNoteIcon />}>Mon, 14 Apr 2025</MetadataItem>\n```",
@@ -1062,6 +1131,40 @@
         }
       ]
     },
+    {
+      "name": "MobileSubmenu",
+      "description": "**MobileSubmenu** is the drawer chrome (back button, title, close button) shown when a user drills\ninto a submenu in a mobile navigation drawer. It is not a drawer itself — the consumer renders it\ninside `Drawer`.\n\nThe body is a generic slot — a submenu doesn't always look like a list of selectable options, so\n`MobileSubmenu` composes whatever content the consumer passes it (e.g. `Radio` options, a `Menu`,\nplain text) rather than owning a fixed `options`/`value` API.\n\n### Usage\n\n```tsx\nimport { Drawer, MobileSubmenu, Radio } from '@gostudent/shared-ui-library';\n\n<Drawer isOpen={isOpen} onClose={onClose} position=\"right\" fullScreenOnMobile>\n  <MobileSubmenu title=\"Language\" onBack={() => setView('nav')} onClose={onClose}>\n    <div role=\"radiogroup\">\n      <Radio name=\"language\" value=\"en\" checked={language === 'en'} onChange={() => setLanguage('en')} label=\"English\" />\n      <Radio name=\"language\" value=\"de\" checked={language === 'de'} onChange={() => setLanguage('de')} label=\"German\" />\n    </div>\n  </MobileSubmenu>\n</Drawer>\n```\n\n### Compound usage\n\nFor layouts where the header and body chrome need finer control, use the compound parts directly:\n\n```tsx\n<MobileSubmenu.Root>\n  <MobileSubmenu.Header title=\"Language\" onBack={onBack} onClose={onClose} />\n  <MobileSubmenu.Body>{content}</MobileSubmenu.Body>\n</MobileSubmenu.Root>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-mobilesubmenu",
+      "props": [
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--default"
+        },
+        {
+          "name": "NonSelectionContent",
+          "jsx": "// See \"NonSelectionContent\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--non-selection-content"
+        },
+        {
+          "name": "LongList",
+          "jsx": "// See \"LongList\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-mobilesubmenu--long-list"
+        }
+      ]
+    },
     {
       "name": "Modal",
       "description": "A primitive overlay dialog. Handles the portal, scrim, focus trap, scroll lock, size variants, and keyboard/click dismissal.\n\nAll content is composed via `children`. Use `labelledBy` to wire up `aria-labelledby` by pointing it at the `id` of your heading element inside children.\n\n### Usage\n\n```tsx\nimport { Modal } from '@gostudent/shared-ui-library';\n\nfunction ConfirmModal({ isOpen, onClose }) {\n  return (\n    <Modal isOpen={isOpen} onClose={onClose} labelledBy=\"confirm-title\">\n      <h2 id=\"confirm-title\">Confirm action</h2>\n      <p>This cannot be undone.</p>\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button variant=\"secondary\" size=\"md\" onClick={onClose}>Cancel</Button>\n        <Button variant=\"primary\" size=\"md\" onClick={handleConfirm}>Confirm</Button>\n      </div>\n    </Modal>\n  );\n}\n```",
@@ -1251,6 +1354,50 @@
         }
       ]
     },
+    {
+      "name": "Radio",
+      "description": "A styled radio input with an optional label. Wraps a native `<input type=\"radio\">` so all standard input props (checked, name, value, onChange, disabled, etc.) work out of the box.\n\nTypography is responsive: body-md on mobile, body-sm on desktop (tablet breakpoint).\n\n### Accessibility\n\nThe component renders as a `<label>` wrapping a visually-hidden native radio, preserving full keyboard and screen-reader support. Focus ring is displayed on `:focus-visible` only.\n\n### Usage\n\n```tsx\nimport { Radio } from '@gostudent/shared-ui-library';\n\n<Radio\n  name=\"plan\"\n  value=\"monthly\"\n  label=\"Monthly\"\n  checked={value === 'monthly'}\n  onChange={() => setValue('monthly')}\n/>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-inputs-radio",
+      "props": [
+        {
+          "name": "label",
+          "description": "Text or React node rendered next to the radio circle.",
+          "options": []
+        },
+        {
+          "name": "checked",
+          "description": "Whether the radio is checked (controlled).",
+          "options": []
+        },
+        {
+          "name": "disabled",
+          "description": "When true, the radio is non-interactive and visually muted.",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "Change handler — receives the native `React.ChangeEvent<HTMLInputElement>`.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Radio name=\"default-example\" label=\"Option label\" />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--default"
+        },
+        {
+          "name": "Checked",
+          "jsx": "<Radio name=\"checked-example\" label=\"Option label\" checked={true} onChange={() => {}} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--checked"
+        },
+        {
+          "name": "Disabled",
+          "jsx": "<Radio name=\"disabled-example\" label=\"Disabled unchecked\" disabled={true} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-radio--disabled"
+        }
+      ]
+    },
     {
       "name": "ScoreIndicator",
       "description": "The **ScoreIndicator** displays a numeric score or letter grade in a coloured circle — for\nexample an average grade or a subject-specific score. Unlike `Avatar`, it is not tied to a\nperson's identity: it always renders the `value` text (no image, no initials fallback).\n\nThree sizes are available — `sm` (24px), `md` (40px), `lg` (48px) — and the background\ncolour is driven by `subject`, reusing the same semantic subject colours as elsewhere in the\ndesign system.\n\n### Usage\n\n```tsx\nimport { ScoreIndicator } from '@gostudent/shared-ui-library';\n\n<ScoreIndicator value=\"4.7\" subject=\"DE/BI/PH/HI\" />\n<ScoreIndicator value=\"A+\" size=\"sm\" subject=\"NL/EN\" />\n```",
@@ -1433,6 +1580,75 @@
         }
       ]
     },
+    {
+      "name": "Submenu",
+      "description": "**Submenu** is a `MenuItem`-styled trigger row that opens a single-choice flyout beside it — used\ninside a **Menu** (e.g. a language switcher). It does not close the parent `Menu` itself; the\nconsumer decides via `onChange`.\n\n### Usage\n\n```tsx\nimport { Menu, Submenu } from '@gostudent/shared-ui-library';\n\n<Menu aria-label=\"Account menu\">\n  <Submenu\n    label=\"English\"\n    icon={<GlobeIcon />}\n    aria-label=\"Language\"\n    options={[{ value: 'en', label: 'English' }, { value: 'de', label: 'German' }]}\n    value={language}\n    onChange={setLanguage}\n  />\n</Menu>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-actions-submenu",
+      "props": [
+        {
+          "name": "label",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "icon",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "options",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "value",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "placement",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "aria-label",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "disabled",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--default"
+        },
+        {
+          "name": "PlacementRight",
+          "jsx": "// See \"PlacementRight\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--placement-right"
+        },
+        {
+          "name": "InMenuWithHeader",
+          "jsx": "// See \"InMenuWithHeader\" story — uses interactive render wrapper",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-actions-submenu--in-menu-with-header"
+        }
+      ]
+    },
     {
       "name": "Tabs",
       "description": "Compound tab component. Use `Tabs` as the root, `TabList` + `Tab` for the navigation bar,\nand `TabPanel` for the content areas. Tabs and panels are connected automatically via `value`.\n\n**Keyboard navigation:** Arrow Left/Right moves between tabs; Home/End jump to first/last.\n\n### Usage\n\n```tsx\nimport { Tabs, Tab, TabList, TabPanel } from '@gostudent/shared-ui-library';\n\n<Tabs defaultValue=\"lessons\">\n  <TabList>\n    <Tab value=\"lessons\">Lessons</Tab>\n    <Tab value=\"students\">Students</Tab>\n  </TabList>\n  <TabPanel value=\"lessons\">Lessons content</TabPanel>\n  <TabPanel value=\"students\">Students content</TabPanel>\n</Tabs>\n```\n\n**Standalone mode** (without `Tabs` wrapper — for custom state management):\n```tsx\n<TabList>\n  <Tab isSelected={active === 0} onClick={() => setActive(0)}>Lessons</Tab>\n  <Tab isSelected={active === 1} onClick={() => setActive(1)}>Students</Tab>\n</TabList>\n```",
@@ -2244,7 +2460,7 @@
     },
     {
       "name": "TopNavigation",
-      "description": "Responsive top navigation bar. On **mobile/tablet** (< 1024 px) it shows the logo and a hamburger button that opens a slide-in drawer.\nOn **desktop** (≥ 1024 px) it shows the logo, a tab list, and the user section (Avatar + name + role Tag + chevron) with a dropdown.\n\nThe drawer open/close state is managed internally — no external state needed.\n\n### Usage\n\n```tsx\nimport { TopNavigation } from '@gostudent/shared-ui-library';\n\n<TopNavigation\n  tabs={[\n    { label: 'Lessons', isSelected: true, onClick: () => {} },\n    { label: 'My availability', isSelected: false, onClick: () => {} },\n  ]}\n  userName=\"Anna James\"\n  userRole=\"tutor\"\n  navItems={[\n    { icon: DashboardIcon, label: 'Lessons', isSelected: true, onClick: () => {} },\n  ]}\n  languages={[{ value: 'en', label: 'English' }]}\n  onLanguageClick={() => {}}\n  onLogout={() => {}}\n/>\n```",
+      "description": "Responsive top navigation bar. On **mobile/tablet** (< 1024 px) it shows the logo and a hamburger button that opens a slide-in drawer.\nOn **desktop** (≥ 1024 px) it shows the logo, a tab list, and the user section (Avatar + chevron) with a dropdown whose header shows the name and role Tag.\n\nThe drawer open/close state is managed internally — no external state needed.\n\n### Usage\n\n```tsx\nimport { TopNavigation } from '@gostudent/shared-ui-library';\n\n<TopNavigation\n  tabs={[\n    { label: 'Lessons', isSelected: true, onClick: () => {} },\n    { label: 'My availability', isSelected: false, onClick: () => {} },\n  ]}\n  userName=\"Anna James\"\n  userRole=\"tutor\"\n  navItems={[\n    { icon: DashboardIcon, label: 'Lessons', isSelected: true, onClick: () => {} },\n  ]}\n  menuItems={[\n    { icon: UserIcon, label: 'My profile', onClick: () => navigate('/profile') },\n  ]}\n  languages={[{ value: 'en', label: 'English' }, { value: 'de', label: 'Deutsch' }]}\n  selectedLanguage=\"en\"\n  onLanguageChange={setLanguage}\n  onLogout={() => {}}\n/>\n```\n\nThe desktop user dropdown is built from `Menu` / `MenuHeader` / `MenuItem`: header → linked accounts →\ncustom `menuItems` → language (`Submenu` flyout) → logout. In the mobile drawer, `menuItems` render with the\npages, after `navItems`; the footer language row opens a `MobileSubmenu` with one `Radio` per language.",
       "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-topnavigation",
       "props": [
         {
@@ -2307,6 +2523,11 @@
           "description": "",
           "options": []
         },
+        {
+          "name": "menuItems",
+          "description": "",
+          "options": []
+        },
         {
           "name": "languages",
           "description": "",
@@ -2351,12 +2572,12 @@
         },
         {
           "name": "Desktop",
-          "jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
+          "jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" menuItems={PROFILE_MENU_ITEMS} languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop"
         },
         {
           "name": "DesktopSK",
-          "jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
+          "jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" menuItems={PROFILE_MENU_ITEMS} languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop-s-k"
         }
       ]
@@ -2571,6 +2792,7 @@
       "KebabIcon",
       "LocationCenterIcon",
       "LocationIcon",
+      "LockIcon",
       "LogoutIcon",
       "MenuIcon",
       "MoreIcon",
@@ -2591,6 +2813,7 @@
       "TickFilledIcon",
       "TickIcon",
       "UploadIcon",
+      "UserIcon",
       "WarningFilledIcon",
       "WarningOutlinedIcon"
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gostudent/shared-ui-library-mcp",
-  "version": "4.1.1",
+  "version": "4.2.0-DT-17190.2",
   "description": "MCP server for @gostudent/shared-ui-library — exposes components, icons, and tokens to Claude",
   "type": "module",
   "bin": {