@gostudent/shared-ui-library-mcp 1.25.1 → 1.26.0

package/library-manifest.json

@@ -1,9 +1,9 @@
 {
-  "libraryVersion": "1.25.1",
+  "libraryVersion": "1.26.0",
   "components": [
     {
       "name": "Avatar",
-      "description": "The **Avatar** component displays a user's photo or, when no image is available, their\ninitials on a colour background. The background colour is derived deterministically from\nthe user's name so the same person always gets the same colour.\n\nThree sizes are available — `sm` (32px), `md` (40px), `lg` (48px) — and four colour\nvariants: `pink`, `purple`, `green`, `orange`.\n\n### Usage\n\n```tsx\nimport { Avatar } from '@gostudent/shared-ui-library';\n\n<Avatar name=\"Jane Doe\" />\n<Avatar name=\"Jane Doe\" src=\"/path/to/photo.jpg\" />\n<Avatar name=\"Jane Doe\" status=\"done\" />\n```\n\n### Accessibility\n\n- Renders a `role=\"img\"` span with `aria-label` set to the user's name.\n- The initials text is `aria-hidden` to avoid redundant screen reader output.\n- The status badge is `aria-hidden` as it is decorative.",
+      "description": "The **Avatar** component displays a user's photo or, when no image is available, their\ninitials on a colour background. The background colour is derived deterministically from\nthe user's name so the same person always gets the same colour.\n\nFour sizes are available — `xs` (24px), `sm` (32px), `md` (40px), `lg` (48px) — and\nfour colour variants: `pink`, `purple`, `green`, `orange`.\n\n### Usage\n\n```tsx\nimport { Avatar } from '@gostudent/shared-ui-library';\n\n<Avatar name=\"Jane Doe\" />\n<Avatar name=\"Jane Doe\" src=\"/path/to/photo.jpg\" />\n<Avatar name=\"Jane Doe\" status=\"done\" />\n<Avatar name=\"Jane Doe\" status=\"pending\" />\n```\n\n### Accessibility\n\n- Renders a `role=\"img\"` span with `aria-label` set to the user's name.\n- The initials text is `aria-hidden` to avoid redundant screen reader output.\n- The status badge is `aria-hidden` as it is decorative.",
       "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-data-display-avatar",
       "props": [
         {
@@ -18,8 +18,9 @@
         },
         {
           "name": "size",
-          "description": "Avatar diameter: sm=32px, md=40px, lg=48px.",
+          "description": "Avatar diameter: xs=24px, sm=32px, md=40px, lg=48px.",
           "options": [
+            "xs",
             "sm",
             "md",
             "lg"
@@ -37,10 +38,11 @@
         },
         {
           "name": "status",
-          "description": "When \"done",
+          "description": "When \"done\", renders a green tick badge; when \"pending\", renders a yellow pending badge — both top-right.",
           "options": [
             "default",
-            "done"
+            "done",
+            "pending"
           ]
         },
         {
@@ -97,7 +99,7 @@
         },
         {
           "name": "size",
-          "description": "Height and font-size scale. Accepts a single size or a `[mobile, desktop]",
+          "description": "Height and font-size scale. Accepts a single size or a `[mobile, desktop]` tuple for responsive behaviour, e.g. `size={[\"md\", \"sm\"]}`. The controls panel only supports a single value — see the **Responsive** story for the tuple API.",
           "options": [
             "xxs",
             "xs",
@@ -163,12 +165,12 @@
       "props": [
         {
           "name": "value",
-          "description": "Currently selected date. Pass `null",
+          "description": "Currently selected date. Pass `null` or `undefined` for no selection.",
           "options": []
         },
         {
           "name": "onChange",
-          "description": "Called with a noon-normalised `Date",
+          "description": "Called with a noon-normalised `Date` when the user selects a day or clicks Today.",
           "options": []
         },
         {
@@ -183,7 +185,7 @@
         },
         {
           "name": "locale",
-          "description": "A `date-fns",
+          "description": "A `date-fns` `Locale` object. Defaults to `enGB` when omitted.",
           "options": []
         },
         {
@@ -193,7 +195,7 @@
         },
         {
           "name": "renderDayContent",
-          "description": "Render prop called with the selected date. Return content shown below the calendar grid. Nothing is rendered when `value",
+          "description": "Render prop called with the selected date. Return content shown below the calendar grid. Nothing is rendered when `value` is null or the function returns null/undefined.",
           "options": []
         },
         {
@@ -322,7 +324,7 @@
         },
         {
           "name": "Checked",
-          "jsx": "<Checkbox label=\"Option label\" checked={true} onChange={() => {} />",
+          "jsx": "<Checkbox label=\"Option label\" checked={true} onChange={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-checkbox--checked"
         },
         {
@@ -344,7 +346,7 @@
         },
         {
           "name": "items",
-          "description": "Array of data rows. Each item requires `id",
+          "description": "Array of data rows. Each item requires `id`, `date`, `eventType`, `subject`, `grade`, and an optional `actions` React node.",
           "options": []
         },
         {
@@ -359,7 +361,7 @@
         },
         {
           "name": "emptyStateText",
-          "description": "Placeholder text shown inside the empty state container when `items",
+          "description": "Placeholder text shown inside the empty state container when `items` is empty.",
           "options": []
         },
         {
@@ -371,12 +373,12 @@
       "examples": [
         {
           "name": "Default",
-          "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} onAdd={() => {} />",
+          "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} onAdd={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-datalist--default"
         },
         {
           "name": "EmptyState",
-          "jsx": "<DataList title=\"Grades (optional)\" items={[]} onAdd={() => {} />",
+          "jsx": "<DataList title=\"Grades (optional)\" items={[]} onAdd={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-datalist--empty-state"
         },
         {
@@ -403,7 +405,7 @@
         },
         {
           "name": "defaultOpen",
-          "description": "Initial open state in uncontrolled mode. Ignored when `open",
+          "description": "Initial open state in uncontrolled mode. Ignored when `open` is provided.",
           "options": []
         },
         {
@@ -425,17 +427,17 @@
       "examples": [
         {
           "name": "Default",
-          "jsx": "<Disclosure trigger={(      <>        <InfoIcon size=\"sm\" />        <span>5 pending feedback</span>      </>    )} children={(      <ul style={{ margin: '8px 0 0'} padding=\"0 0 0 1.25rem\" listStyle=\"disc' }}>        <li>Alice — awaiting review</li>        <li>Bob — submitted</li>        <li>Charlie — in progress</li>        <li>Diana — not started</li>        <li>Eve — awaiting review</li>      </ul>    ) defaultOpen={false} />",
+          "jsx": "<Disclosure trigger={( <> <InfoIcon size=\"sm\" /> <span>5 pending feedback</span> </> )} children={( <ul style={{ margin: '8px 0 0', padding: '0 0 0 1.25rem', listStyle: 'disc' }}> <li>Alice — awaiting review</li> <li>Bob — submitted</li> <li>Charlie — in progress</li> <li>Diana — not started</li> <li>Eve — awaiting review</li> </ul> )} defaultOpen={false} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--default"
         },
         {
           "name": "DefaultOpen",
-          "jsx": "<Disclosure trigger={(      <>        <InfoIcon size=\"sm\" />        <span>5 pending feedback</span>      </>    )} children={(      <ul style={{ margin: '8px 0 0'} padding=\"0 0 0 1.25rem\" listStyle=\"disc' }}>        <li>Alice — awaiting review</li>        <li>Bob — submitted</li>        <li>Charlie — in progress</li>        <li>Diana — not started</li>        <li>Eve — awaiting review</li>      </ul>    ) defaultOpen={true} />",
+          "jsx": "<Disclosure trigger={( <> <InfoIcon size=\"sm\" /> <span>5 pending feedback</span> </> )} children={( <ul style={{ margin: '8px 0 0', padding: '0 0 0 1.25rem', listStyle: 'disc' }}> <li>Alice — awaiting review</li> <li>Bob — submitted</li> <li>Charlie — in progress</li> <li>Diana — not started</li> <li>Eve — awaiting review</li> </ul> )} defaultOpen={true} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--default-open"
         },
         {
           "name": "TextOnlyTrigger",
-          "jsx": "<Disclosure trigger={<span>Show details</span>} children={(      <p style={{ margin: '8px 0 0'} fontSize=\"14px' }}>        Any React content can go here — lists />",
+          "jsx": "<Disclosure trigger={<span>Show details</span>} children={( <p style={{ margin: '8px 0 0', fontSize: '14px' }}> Any React content can go here — lists, tables, forms, or custom components. </p> )} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--text-only-trigger"
         }
       ]
@@ -589,12 +591,12 @@
       "props": [
         {
           "name": "columns",
-          "description": "Number of equal-width columns. Accepts a single value, a `[mobile, desktop]",
+          "description": "Number of equal-width columns. Accepts a single value, a `[mobile, desktop]` 2-tuple, or a `[mobile, tablet, desktop]` 3-tuple.",
           "options": []
         },
         {
           "name": "gap",
-          "description": "Gap between cells, mapped to `--spacing-*",
+          "description": "Gap between cells, mapped to `--spacing-*` tokens. Accepts a single value, a `[mobile, desktop]` 2-tuple, or a `[mobile, tablet, desktop]` 3-tuple.",
           "options": [
             "none",
             "3xs",
@@ -610,7 +612,7 @@
         },
         {
           "name": "rowGap",
-          "description": "Separate row gap override. Falls back to `gap",
+          "description": "Separate row gap override. Falls back to `gap` when omitted. Accepts a single value, a `[mobile, desktop]` 2-tuple, or a `[mobile, tablet, desktop]` 3-tuple.",
           "options": [
             "none",
             "3xs",
@@ -797,7 +799,7 @@
         },
         {
           "name": "size",
-          "description": "Text size of the input. `md",
+          "description": "Text size of the input. `md` = 16px, `lg` = 14px. Pass a `[mobile, desktop]` tuple for responsive sizing.",
           "options": [
             "md",
             "lg"
@@ -805,7 +807,7 @@
         },
         {
           "name": "multiline",
-          "description": "When true, renders a `<textarea>",
+          "description": "When true, renders a `<textarea>` instead of `<input>`. Accepts `rows` and all other textarea attributes.",
           "options": []
         }
       ],
@@ -841,7 +843,7 @@
       "examples": [
         {
           "name": "Default",
-          "jsx": "<MetadataItem icon={<EventNoteIcon />} children=\"Mon />",
+          "jsx": "<MetadataItem icon={<EventNoteIcon />} children=\"Mon, 14 Apr 2025\" />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-metadataitem--default"
         }
       ]
@@ -1109,7 +1111,7 @@
         },
         {
           "name": "stepLabel",
-          "description": "Translated step label shown on the left (e.g. t(\\'stepper.label\\",
+          "description": "Translated step label shown on the left (e.g. t(\\'stepper.label\\', { currentStep, totalSteps })). Lokalise key example: \"Step {{currentStep}} of {{totalSteps}}\". Omit to hide.",
           "options": []
         },
         {
@@ -1198,7 +1200,7 @@
         },
         {
           "name": "shape",
-          "description": "`pill",
+          "description": "`pill` uses fully-round radius and switches to label typography (12/16 SemiBold) regardless of `size`.",
           "options": [
             "rounded",
             "pill"
@@ -1206,8 +1208,9 @@
         },
         {
           "name": "size",
-          "description": "Size scale. Accepts a single size or a `[mobile, desktop]",
+          "description": "`xs` is only meaningful with `shape=\"pill\"` (8/16 SemiBold — a compact pill for dense contexts). Accepts a single size or a `[mobile, desktop]` tuple for responsive behaviour, e.g. `size={[\"md\", \"sm\"]}`. See the **Responsive** story.",
           "options": [
+            "xs",
             "sm",
             "md"
           ]
@@ -1224,7 +1227,7 @@
         },
         {
           "name": "actionLabel",
-          "description": "Required when `onAction",
+          "description": "Required when `onAction` is set — used as `aria-label` on the action button.",
           "options": []
         },
         {
@@ -1305,7 +1308,7 @@
         },
         {
           "name": "as",
-          "description": "Override the rendered HTML element (e.g. `span",
+          "description": "Override the rendered HTML element (e.g. `span`, `div`, `h2`).",
           "options": []
         },
         {
@@ -1420,7 +1423,7 @@
       "props": [
         {
           "name": "label",
-          "description": "Localized label supplied by the app, e.g. \"November 2026",
+          "description": "Localized label supplied by the app, e.g. \"November 2026\" or \"Thursday, 18/11/2026\".",
           "options": []
         },
         {
@@ -1457,98 +1460,6 @@
         }
       ]
     },
-    {
-      "name": "LessonCard",
-      "description": "A domain-level card that displays a lesson session with all associated metadata.\n\nSupports states driven by the `lessonState`, `type`, `modality`, and `feedbackState` props:\n\n| `lessonState` | `type`        | `modality`  | `feedbackState` | Description |\n|----------------|-----------------|--------------|-----------------|-------------|\n| `upcoming`   | `individual`  | `online`   | —               | Single student avatar, \"Start lesson\" button |\n| `upcoming`   | `group`       | `online`   | —               | Avatar group, optional kebab menu with dropdown |\n| `upcoming`   | `individual`  | `offline`  | —               | Offline modality tag |\n| `upcoming`   | `group`       | `offline`  | —               | Offline modality tag, avatar group |\n| `completed`  | `individual`  | `online`   | `pending`     | Disclosure toggle revealing student feedback status, \"Leave feedback\" button |\n| `completed`  | `group`       | `online`   | `pending`     | Same as above with multiple students |\n| `completed`  | `group`       | `online`   | `submitted`   | \"Review feedback\" button, student names summary below divider |\n\n### Usage\n\n```tsx\nimport { LessonCard } from '@gostudent/shared-ui-library';\n\n<LessonCard\n  title=\"English lesson\"\n  modality=\"online\"\n  type=\"individual\"\n  subjects={['English']}\n  date=\"Tuesday, 16 May\"\n  time=\"17:00 - 18:00\"\n  lessonState=\"upcoming\"\n  students={[{ name: 'Alice Smith' }]}\n  isStartLessonDisabled\n/>\n```",
-      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-lessoncard",
-      "props": [
-        {
-          "name": "title",
-          "description": "Lesson title shown as the card heading.",
-          "options": [
-            "online",
-            "offline"
-          ]
-        },
-        {
-          "name": "type",
-          "description": "Lesson type — affects avatar area and metadata count item.",
-          "options": [
-            "individual",
-            "group"
-          ]
-        },
-        {
-          "name": "subjects",
-          "description": "Array of subject labels rendered as Tag pills.",
-          "options": []
-        },
-        {
-          "name": "date",
-          "description": "Formatted date string.",
-          "options": [
-            "upcoming",
-            "in-progress",
-            "completed"
-          ]
-        },
-        {
-          "name": "feedbackState",
-          "description": "Feedback phase for completed lessons.",
-          "options": [
-            "pending",
-            "submitted"
-          ]
-        },
-        {
-          "name": "pendingFeedbackCount",
-          "description": "Number shown in the Disclosure trigger for pending feedback.",
-          "options": []
-        },
-        {
-          "name": "isStartLessonDisabled",
-          "description": "Disables the \"Start lesson",
-          "options": []
-        },
-        {
-          "name": "hasKebab",
-          "description": "Show or hide the kebab menu. When enabled, passes menu items to the card.",
-          "options": []
-        },
-        {
-          "name": "students",
-          "description": "Array of student objects (name, optional avatarSrc, optional feedbackStatus).",
-          "options": []
-        },
-        {
-          "name": "menuItems",
-          "description": "Kebab menu items. When provided, the kebab button is shown regardless of lesson state.",
-          "options": []
-        },
-        {
-          "name": "onStartLesson",
-          "description": "Called when \"Start lesson",
-          "options": []
-        }
-      ],
-      "examples": [
-        {
-          "name": "UpcomingIndividual",
-          "jsx": "<LessonCard title=\"Title goes here\" modality=\"online\" type=\"individual\" subjects={['English']} date=\"Tuesday time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[{ name: 'Marcus Johnson' }]} hasKebab={true} />",
-          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-individual"
-        },
-        {
-          "name": "UpcomingGroup",
-          "jsx": "<LessonCard title=\"Title goes here\" modality=\"online\" type=\"group\" subjects={['English'} date=\"Tuesday time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={STUDENTS_GROUP} hasKebab={true} />",
-          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-group"
-        },
-        {
-          "name": "UpcomingIndividualOffline",
-          "jsx": "<LessonCard title=\"Title goes here\" modality=\"offline\" type=\"individual\" subjects={['English']} date=\"Tuesday time=\"17:00 - 18:00\" room=\"Room 1\" lessonCenter=\"Centrostudi Navigli\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[{ name: 'Marcus Johnson' }]} hasKebab={true} />",
-          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-individual-offline"
-        }
-      ]
-    },
     {
       "name": "LessonStatusTag",
       "description": "",
@@ -1605,6 +1516,43 @@
       ],
       "examples": []
     },
+    {
+      "name": "StudentDetails",
+      "description": "Renders a list of students, each shown as an **Avatar** plus name and grade · subject.\n\nOn mobile, students stack vertically. From the `tablet` breakpoint up, they render in a\nsingle row separated by a vertical divider.\n\nTwo sizes are available — `md` (32px avatar, default) and `sm` (24px avatar).\n\nOptional `BuT` / `Trial` pills can be shown next to a student's name via the `but` / `trial`\nflags on each student.\n\nSetting `disabled` on a student dims them to 50% opacity and shows an \"Absent\" tooltip on\nhover/focus (override via `disabledLabel`) — used when a student is removed from an upcoming\nlesson or absent from a previous one.\n\nIntended for use inside `LessonCard` to summarise the students on a group lesson.\n\n### Usage\n\n```tsx\nimport { StudentDetails } from '@gostudent/shared-ui-library';\n\n<StudentDetails\n  students={[\n    { name: 'Angela Swan', grade: '8', subject: 'Mathematics' },\n    { name: 'Victor Ismat', grade: '8', subject: 'Mathematics' },\n  ]}\n/>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-studentdetails",
+      "props": [
+        {
+          "name": "students",
+          "description": "Avatar size: sm=24px, md=32px (default).",
+          "options": [
+            "sm",
+            "md"
+          ]
+        },
+        {
+          "name": "className",
+          "description": "Tooltip text shown on hover/focus of a disabled student. Defaults to \"Absent\".",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "OneStudent",
+          "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 1)} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--one-student"
+        },
+        {
+          "name": "TwoStudents",
+          "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 2)} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--two-students"
+        },
+        {
+          "name": "ThreeStudents",
+          "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 3)} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--three-students"
+        }
+      ]
+    },
     {
       "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```",
@@ -1699,15 +1647,107 @@
         },
         {
           "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\" 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\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
           "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop-s-k"
         }
       ]
+    },
+    {
+      "name": "TutorLessonCard",
+      "description": "A domain-level card that displays a lesson session with all associated metadata.\n\nSupports states driven by the `lessonState`, `type`, `modality`, and `feedbackState` props:\n\n| `lessonState` | `type`        | `modality`  | `feedbackState` | Description |\n|----------------|-----------------|--------------|-----------------|-------------|\n| `upcoming`   | `individual`  | `online`   | —               | Metadata row (time) + actions in a wrapping flex row, \"Workspace\" link + \"Start GoClass\" button, `StudentDetails` always visible below |\n| `upcoming`   | `group`       | `online`   | —               | Metadata row (time, student count) + actions in a wrapping flex row, optional kebab menu, always-visible `StudentDetails` (desktop) / \"N students\" disclosure (mobile) below |\n| `upcoming`   | `individual`  | `offline`  | —               | Offline modality tag, metadata row includes room/lesson center, single \"Document lesson\" button |\n| `upcoming`   | `group`       | `offline`  | —               | Offline modality tag, metadata row includes room/lesson center, \"N students\" disclosure below |\n| `completed`  | `individual`  | `online`   | `pending`     | `StudentDetails` (24px, pending badge) inline, no dropdown, \"Document lesson\" button |\n| `completed`  | `group`       | `online`   | `pending`     | Disclosure toggle revealing `StudentDetails` (24px, done/pending badges), \"Document lesson\" button |\n| `completed`  | `group`       | `online`   | `submitted`   | \"Review feedback\" button, always-visible `StudentDetails` (desktop) / \"N students\" disclosure (mobile) |\n| `completed`  | `individual`  | `online`   | `submitted`   | \"Review feedback\" button, `StudentDetails` inline at both breakpoints |\n\nOnline lessons also show a \"Workspace\" link (secondary/link-styled) alongside \"Start GoClass\" /\n\"Document lesson\", for every lesson state.\n\n### Usage\n\n```tsx\nimport { TutorLessonCard } from '@gostudent/shared-ui-library';\n\n<TutorLessonCard\n  title=\"English lesson\"\n  modality=\"online\"\n  type=\"individual\"\n  subjects={['English']}\n  time=\"17:00 - 18:00\"\n  lessonState=\"upcoming\"\n  students={[{ name: 'Alice Smith', grade: '8', subject: 'English' }]}\n  isStartLessonDisabled\n/>\n```",
+      "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-tutorlessoncard",
+      "props": [
+        {
+          "name": "title",
+          "description": "Lesson title shown as the card heading.",
+          "options": [
+            "online",
+            "offline"
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Lesson type — affects student list layout and metadata count item.",
+          "options": [
+            "individual",
+            "group"
+          ]
+        },
+        {
+          "name": "subjects",
+          "description": "Array of subject labels rendered as Tag pills.",
+          "options": []
+        },
+        {
+          "name": "time",
+          "description": "Formatted time range, e.g. \"17:00 - 18:00\".",
+          "options": [
+            "upcoming",
+            "in-progress",
+            "completed"
+          ]
+        },
+        {
+          "name": "feedbackState",
+          "description": "Feedback phase for completed lessons.",
+          "options": [
+            "pending",
+            "submitted"
+          ]
+        },
+        {
+          "name": "pendingFeedbackCount",
+          "description": "Number shown in the Disclosure trigger for pending feedback.",
+          "options": []
+        },
+        {
+          "name": "isStartLessonDisabled",
+          "description": "Disables the \"Start lesson\" button in upcoming state.",
+          "options": []
+        },
+        {
+          "name": "hasKebab",
+          "description": "Show or hide the kebab menu. When enabled, passes menu items to the card.",
+          "options": []
+        },
+        {
+          "name": "students",
+          "description": "Array of student objects (name, optional avatarSrc, optional feedbackStatus).",
+          "options": []
+        },
+        {
+          "name": "menuItems",
+          "description": "Kebab menu items. When provided, the kebab button is shown regardless of lesson state.",
+          "options": []
+        },
+        {
+          "name": "onStartLesson",
+          "description": "Called when \"Start GoClass\" is clicked.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "UpcomingIndividual",
+          "jsx": "<TutorLessonCard title=\"Individual lesson\" modality=\"online\" type=\"individual\" subjects={['English']} time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[{ name: 'Marcus Johnson', grade: '8', subject: 'Mathematics' }]} hasKebab={true} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-tutorlessoncard--upcoming-individual"
+        },
+        {
+          "name": "UpcomingGroup",
+          "jsx": "<TutorLessonCard title=\"Group lesson\" modality=\"online\" type=\"group\" subjects={['English', 'Biology', 'Math']} time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={STUDENTS_GROUP} hasKebab={true} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-tutorlessoncard--upcoming-group"
+        },
+        {
+          "name": "UpcomingGroupWithDisabledStudent",
+          "jsx": "<TutorLessonCard title=\"Group lesson\" modality=\"online\" type=\"group\" subjects={['English', 'Biology', 'Math']} time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[ ...STUDENTS_GROUP.slice(0, -1), { ...STUDENTS_GROUP[STUDENTS_GROUP.length - 1], disabled: true }, ]} hasKebab={true} />",
+          "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-tutorlessoncard--upcoming-group-with-disabled-student"
+        }
+      ]
     }
   ],
   "icons": {
@@ -1723,9 +1763,11 @@
       "DashboardIcon",
       "DeleteIcon",
       "EditSquareIcon",
+      "EnvelopeIcon",
       "ErrorFilledIcon",
       "EventNoteIcon",
       "GlobeIcon",
+      "GraduationCapIcon",
       "GroupIcon",
       "HistoryIcon",
       "HourglassIcon",
@@ -1736,6 +1778,7 @@
       "LogoutIcon",
       "MenuIcon",
       "OfflineIcon",
+      "PendingFilledIcon",
       "PlanetIcon",
       "PlusIcon",
       "StarsIcon",
@@ -1781,7 +1824,7 @@
       "warning": {
         "warning50": "var(--warning-50)",
         "warning500": "var(--warning-500)",
-        "warning700": "var(--warning-700)"
+        "warning900": "var(--warning-900)"
       },
       "color": {
         "colorBlack": "var(--color-black)",
@@ -2119,6 +2162,8 @@
         "colorFeedbackWarningBorder": "var(--color-feedback-warning-border)",
         "colorFeedbackWarningHelperText": "var(--color-feedback-warning-helper-text)",
         "colorFeedbackWarningText": "var(--color-feedback-warning-text)",
+        "colorFeedbackErrorIcon": "var(--color-feedback-error-icon)",
+        "colorFeedbackErrorText": "var(--color-feedback-error-text)",
         "colorSurfaceDefault": "var(--color-surface-default)",
         "colorSurfaceSubtleSteel": "var(--color-surface-subtle-steel)",
         "colorSurfaceHover": "var(--color-surface-hover)",
@@ -2129,6 +2174,7 @@
         "colorSurfaceIconsTooltip": "var(--color-surface-icons-tooltip)",
         "colorSurfaceIconsWhite": "var(--color-surface-icons-white)",
         "colorSurfaceIconsSecondary": "var(--color-surface-icons-secondary)",
+        "colorSurfaceIconsPending": "var(--color-surface-icons-pending)",
         "colorSurfaceSelected": "var(--color-surface-selected)",
         "colorSurfaceDisabled": "var(--color-surface-disabled)",
         "colorSurfaceSubtleBlue": "var(--color-surface-subtle-blue)",
@@ -2137,6 +2183,7 @@
         "colorSurfaceStepper": "var(--color-surface-stepper)",
         "colorSurfaceTooltip": "var(--color-surface-tooltip)",
         "colorSurfaceCalendarDate": "var(--color-surface-calendar-date)",
+        "colorSurfaceCalendarTriangle": "var(--color-surface-calendar-triangle)",
         "colorSurfaceCalendarDot": "var(--color-surface-calendar-dot)",
         "colorBorderDefault": "var(--color-border-default)",
         "colorBorderWhite": "var(--color-border-white)",
@@ -2160,6 +2207,8 @@
         "colorTagTextStudent": "var(--color-tag-text-student)",
         "colorTagTextTutor": "var(--color-tag-text-tutor)",
         "colorTagTextParent": "var(--color-tag-text-parent)",
+        "colorTagBuTBackground": "var(--color-tag-bu-t-background)",
+        "colorTagBuTBorder": "var(--color-tag-bu-t-border)",
         "colorInProgressBorder": "var(--color-in-progress-border)",
         "colorInProgressDot": "var(--color-in-progress-dot)",
         "colorInProgressDotFlash": "var(--color-in-progress-dot-flash)"
@@ -2396,6 +2445,8 @@
         "colorFeedbackWarningBorder": "var(--color-feedback-warning-border)",
         "colorFeedbackWarningHelperText": "var(--color-feedback-warning-helper-text)",
         "colorFeedbackWarningText": "var(--color-feedback-warning-text)",
+        "colorFeedbackErrorIcon": "var(--color-feedback-error-icon)",
+        "colorFeedbackErrorText": "var(--color-feedback-error-text)",
         "colorSurfaceDefault": "var(--color-surface-default)",
         "colorSurfaceSubtleSteel": "var(--color-surface-subtle-steel)",
         "colorSurfaceHover": "var(--color-surface-hover)",
@@ -2406,6 +2457,7 @@
         "colorSurfaceIconsTooltip": "var(--color-surface-icons-tooltip)",
         "colorSurfaceIconsWhite": "var(--color-surface-icons-white)",
         "colorSurfaceIconsSecondary": "var(--color-surface-icons-secondary)",
+        "colorSurfaceIconsPending": "var(--color-surface-icons-pending)",
         "colorSurfaceSelected": "var(--color-surface-selected)",
         "colorSurfaceDisabled": "var(--color-surface-disabled)",
         "colorSurfaceSubtleBlue": "var(--color-surface-subtle-blue)",
@@ -2414,6 +2466,7 @@
         "colorSurfaceStepper": "var(--color-surface-stepper)",
         "colorSurfaceTooltip": "var(--color-surface-tooltip)",
         "colorSurfaceCalendarDate": "var(--color-surface-calendar-date)",
+        "colorSurfaceCalendarTriangle": "var(--color-surface-calendar-triangle)",
         "colorSurfaceCalendarDot": "var(--color-surface-calendar-dot)",
         "colorBorderDefault": "var(--color-border-default)",
         "colorBorderWhite": "var(--color-border-white)",
@@ -2437,6 +2490,8 @@
         "colorTagTextStudent": "var(--color-tag-text-student)",
         "colorTagTextTutor": "var(--color-tag-text-tutor)",
         "colorTagTextParent": "var(--color-tag-text-parent)",
+        "colorTagBuTBackground": "var(--color-tag-bu-t-background)",
+        "colorTagBuTBorder": "var(--color-tag-bu-t-border)",
         "colorInProgressBorder": "var(--color-in-progress-border)",
         "colorInProgressDot": "var(--color-in-progress-dot)",
         "colorInProgressDotFlash": "var(--color-in-progress-dot-flash)"

package/package.json

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