@gostudent/shared-ui-library-mcp 1.25.0 → 1.25.1-DT-16975.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/library-manifest.json +90 -40
  2. package/package.json +1 -1
package/library-manifest.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
- "libraryVersion": "1.25.0",
2
+ "libraryVersion": "1.25.1",
3
3
  "components": [
4
4
  {
5
5
  "name": "Avatar",
6
- "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.",
6
+ "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.",
7
7
  "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/components-data-display-avatar",
8
8
  "props": [
9
9
  {
@@ -18,8 +18,9 @@
18
18
  },
19
19
  {
20
20
  "name": "size",
21
- "description": "Avatar diameter: sm=32px, md=40px, lg=48px.",
21
+ "description": "Avatar diameter: xs=24px, sm=32px, md=40px, lg=48px.",
22
22
  "options": [
23
+ "xs",
23
24
  "sm",
24
25
  "md",
25
26
  "lg"
@@ -37,10 +38,11 @@
37
38
  },
38
39
  {
39
40
  "name": "status",
40
- "description": "When \"done",
41
+ "description": "When \"done\", renders a green tick badge; when \"pending\", renders a yellow pending badge — both top-right.",
41
42
  "options": [
42
43
  "default",
43
- "done"
44
+ "done",
45
+ "pending"
44
46
  ]
45
47
  },
46
48
  {
@@ -97,7 +99,7 @@
97
99
  },
98
100
  {
99
101
  "name": "size",
100
- "description": "Height and font-size scale. Accepts a single size or a `[mobile, desktop]",
102
+ "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.",
101
103
  "options": [
102
104
  "xxs",
103
105
  "xs",
@@ -163,12 +165,12 @@
163
165
  "props": [
164
166
  {
165
167
  "name": "value",
166
- "description": "Currently selected date. Pass `null",
168
+ "description": "Currently selected date. Pass `null` or `undefined` for no selection.",
167
169
  "options": []
168
170
  },
169
171
  {
170
172
  "name": "onChange",
171
- "description": "Called with a noon-normalised `Date",
173
+ "description": "Called with a noon-normalised `Date` when the user selects a day or clicks Today.",
172
174
  "options": []
173
175
  },
174
176
  {
@@ -183,7 +185,7 @@
183
185
  },
184
186
  {
185
187
  "name": "locale",
186
- "description": "A `date-fns",
188
+ "description": "A `date-fns` `Locale` object. Defaults to `enGB` when omitted.",
187
189
  "options": []
188
190
  },
189
191
  {
@@ -193,7 +195,7 @@
193
195
  },
194
196
  {
195
197
  "name": "renderDayContent",
196
- "description": "Render prop called with the selected date. Return content shown below the calendar grid. Nothing is rendered when `value",
198
+ "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.",
197
199
  "options": []
198
200
  },
199
201
  {
@@ -322,7 +324,7 @@
322
324
  },
323
325
  {
324
326
  "name": "Checked",
325
- "jsx": "<Checkbox label=\"Option label\" checked={true} onChange={() => {} />",
327
+ "jsx": "<Checkbox label=\"Option label\" checked={true} onChange={() => {}} />",
326
328
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-inputs-checkbox--checked"
327
329
  },
328
330
  {
@@ -344,7 +346,7 @@
344
346
  },
345
347
  {
346
348
  "name": "items",
347
- "description": "Array of data rows. Each item requires `id",
349
+ "description": "Array of data rows. Each item requires `id`, `date`, `eventType`, `subject`, `grade`, and an optional `actions` React node.",
348
350
  "options": []
349
351
  },
350
352
  {
@@ -359,7 +361,7 @@
359
361
  },
360
362
  {
361
363
  "name": "emptyStateText",
362
- "description": "Placeholder text shown inside the empty state container when `items",
364
+ "description": "Placeholder text shown inside the empty state container when `items` is empty.",
363
365
  "options": []
364
366
  },
365
367
  {
@@ -371,12 +373,12 @@
371
373
  "examples": [
372
374
  {
373
375
  "name": "Default",
374
- "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} onAdd={() => {} />",
376
+ "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} onAdd={() => {}} />",
375
377
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-datalist--default"
376
378
  },
377
379
  {
378
380
  "name": "EmptyState",
379
- "jsx": "<DataList title=\"Grades (optional)\" items={[]} onAdd={() => {} />",
381
+ "jsx": "<DataList title=\"Grades (optional)\" items={[]} onAdd={() => {}} />",
380
382
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-datalist--empty-state"
381
383
  },
382
384
  {
@@ -403,7 +405,7 @@
403
405
  },
404
406
  {
405
407
  "name": "defaultOpen",
406
- "description": "Initial open state in uncontrolled mode. Ignored when `open",
408
+ "description": "Initial open state in uncontrolled mode. Ignored when `open` is provided.",
407
409
  "options": []
408
410
  },
409
411
  {
@@ -425,17 +427,17 @@
425
427
  "examples": [
426
428
  {
427
429
  "name": "Default",
428
- "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} />",
430
+ "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} />",
429
431
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--default"
430
432
  },
431
433
  {
432
434
  "name": "DefaultOpen",
433
- "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} />",
435
+ "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} />",
434
436
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--default-open"
435
437
  },
436
438
  {
437
439
  "name": "TextOnlyTrigger",
438
- "jsx": "<Disclosure trigger={<span>Show details</span>} children={( <p style={{ margin: '8px 0 0'} fontSize=\"14px' }}> Any React content can go here — lists />",
440
+ "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> )} />",
439
441
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-layout-disclosure--text-only-trigger"
440
442
  }
441
443
  ]
@@ -589,12 +591,12 @@
589
591
  "props": [
590
592
  {
591
593
  "name": "columns",
592
- "description": "Number of equal-width columns. Accepts a single value, a `[mobile, desktop]",
594
+ "description": "Number of equal-width columns. Accepts a single value, a `[mobile, desktop]` 2-tuple, or a `[mobile, tablet, desktop]` 3-tuple.",
593
595
  "options": []
594
596
  },
595
597
  {
596
598
  "name": "gap",
597
- "description": "Gap between cells, mapped to `--spacing-*",
599
+ "description": "Gap between cells, mapped to `--spacing-*` tokens. Accepts a single value, a `[mobile, desktop]` 2-tuple, or a `[mobile, tablet, desktop]` 3-tuple.",
598
600
  "options": [
599
601
  "none",
600
602
  "3xs",
@@ -610,7 +612,7 @@
610
612
  },
611
613
  {
612
614
  "name": "rowGap",
613
- "description": "Separate row gap override. Falls back to `gap",
615
+ "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.",
614
616
  "options": [
615
617
  "none",
616
618
  "3xs",
@@ -797,7 +799,7 @@
797
799
  },
798
800
  {
799
801
  "name": "size",
800
- "description": "Text size of the input. `md",
802
+ "description": "Text size of the input. `md` = 16px, `lg` = 14px. Pass a `[mobile, desktop]` tuple for responsive sizing.",
801
803
  "options": [
802
804
  "md",
803
805
  "lg"
@@ -805,7 +807,7 @@
805
807
  },
806
808
  {
807
809
  "name": "multiline",
808
- "description": "When true, renders a `<textarea>",
810
+ "description": "When true, renders a `<textarea>` instead of `<input>`. Accepts `rows` and all other textarea attributes.",
809
811
  "options": []
810
812
  }
811
813
  ],
@@ -841,7 +843,7 @@
841
843
  "examples": [
842
844
  {
843
845
  "name": "Default",
844
- "jsx": "<MetadataItem icon={<EventNoteIcon />} children=\"Mon />",
846
+ "jsx": "<MetadataItem icon={<EventNoteIcon />} children=\"Mon, 14 Apr 2025\" />",
845
847
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/components-data-display-metadataitem--default"
846
848
  }
847
849
  ]
@@ -1109,7 +1111,7 @@
1109
1111
  },
1110
1112
  {
1111
1113
  "name": "stepLabel",
1112
- "description": "Translated step label shown on the left (e.g. t(\\'stepper.label\\",
1114
+ "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.",
1113
1115
  "options": []
1114
1116
  },
1115
1117
  {
@@ -1198,7 +1200,7 @@
1198
1200
  },
1199
1201
  {
1200
1202
  "name": "shape",
1201
- "description": "`pill",
1203
+ "description": "`pill` uses fully-round radius and switches to label typography (12/16 SemiBold) regardless of `size`.",
1202
1204
  "options": [
1203
1205
  "rounded",
1204
1206
  "pill"
@@ -1206,8 +1208,9 @@
1206
1208
  },
1207
1209
  {
1208
1210
  "name": "size",
1209
- "description": "Size scale. Accepts a single size or a `[mobile, desktop]",
1211
+ "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.",
1210
1212
  "options": [
1213
+ "xs",
1211
1214
  "sm",
1212
1215
  "md"
1213
1216
  ]
@@ -1224,7 +1227,7 @@
1224
1227
  },
1225
1228
  {
1226
1229
  "name": "actionLabel",
1227
- "description": "Required when `onAction",
1230
+ "description": "Required when `onAction` is set — used as `aria-label` on the action button.",
1228
1231
  "options": []
1229
1232
  },
1230
1233
  {
@@ -1305,7 +1308,7 @@
1305
1308
  },
1306
1309
  {
1307
1310
  "name": "as",
1308
- "description": "Override the rendered HTML element (e.g. `span",
1311
+ "description": "Override the rendered HTML element (e.g. `span`, `div`, `h2`).",
1309
1312
  "options": []
1310
1313
  },
1311
1314
  {
@@ -1420,7 +1423,7 @@
1420
1423
  "props": [
1421
1424
  {
1422
1425
  "name": "label",
1423
- "description": "Localized label supplied by the app, e.g. \"November 2026",
1426
+ "description": "Localized label supplied by the app, e.g. \"November 2026\" or \"Thursday, 18/11/2026\".",
1424
1427
  "options": []
1425
1428
  },
1426
1429
  {
@@ -1459,7 +1462,7 @@
1459
1462
  },
1460
1463
  {
1461
1464
  "name": "LessonCard",
1462
- "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```",
1465
+ "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` | — | `StudentDetails` inline, \"Workspace\" link + \"Start GoClass\" button |\n| `upcoming` | `group` | `online` | — | Avatar group + always-visible `StudentDetails` (desktop) / \"N students\" disclosure (mobile), optional kebab menu |\n| `upcoming` | `individual` | `offline` | — | Offline modality tag, single \"Document lesson\" button |\n| `upcoming` | `group` | `offline` | — | Offline modality tag, avatar group / \"N students\" disclosure |\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 { 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', grade: '8', subject: 'English' }]}\n isStartLessonDisabled\n/>\n```",
1463
1466
  "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-lessoncard",
1464
1467
  "props": [
1465
1468
  {
@@ -1507,7 +1510,7 @@
1507
1510
  },
1508
1511
  {
1509
1512
  "name": "isStartLessonDisabled",
1510
- "description": "Disables the \"Start lesson",
1513
+ "description": "Disables the \"Start lesson\" button in upcoming state.",
1511
1514
  "options": []
1512
1515
  },
1513
1516
  {
@@ -1527,24 +1530,24 @@
1527
1530
  },
1528
1531
  {
1529
1532
  "name": "onStartLesson",
1530
- "description": "Called when \"Start lesson",
1533
+ "description": "Called when \"Start GoClass\" is clicked.",
1531
1534
  "options": []
1532
1535
  }
1533
1536
  ],
1534
1537
  "examples": [
1535
1538
  {
1536
1539
  "name": "UpcomingIndividual",
1537
- "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} />",
1540
+ "jsx": "<LessonCard title=\"Title goes here\" modality=\"online\" type=\"individual\" subjects={['English']} date=\"Tuesday, 16 May\" time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[{ name: 'Marcus Johnson', grade: '8', subject: 'Mathematics' }]} hasKebab={true} />",
1538
1541
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-individual"
1539
1542
  },
1540
1543
  {
1541
1544
  "name": "UpcomingGroup",
1542
- "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} />",
1545
+ "jsx": "<LessonCard title=\"Title goes here\" modality=\"online\" type=\"group\" subjects={['English', 'Biology', 'Math']} date=\"Tuesday, 16 May\" time=\"17:00 - 18:00\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={STUDENTS_GROUP} hasKebab={true} />",
1543
1546
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-group"
1544
1547
  },
1545
1548
  {
1546
1549
  "name": "UpcomingIndividualOffline",
1547
- "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} />",
1550
+ "jsx": "<LessonCard title=\"Title goes here\" modality=\"offline\" type=\"individual\" subjects={['English']} date=\"Tuesday, 16 May\" time=\"17:00 - 18:00\" room=\"Room 1\" lessonCenter=\"Centrostudi Navigli\" lessonState=\"upcoming\" isStartLessonDisabled={true} students={[{ name: 'Marcus Johnson', grade: '8', subject: 'Mathematics' }]} hasKebab={true} />",
1548
1551
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-lessoncard--upcoming-individual-offline"
1549
1552
  }
1550
1553
  ]
@@ -1605,6 +1608,38 @@
1605
1608
  ],
1606
1609
  "examples": []
1607
1610
  },
1611
+ {
1612
+ "name": "StudentDetails",
1613
+ "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\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```",
1614
+ "storybookUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/docs/compositions-studentdetails",
1615
+ "props": [
1616
+ {
1617
+ "name": "students",
1618
+ "description": "Avatar size: sm=24px, md=32px (default).",
1619
+ "options": [
1620
+ "sm",
1621
+ "md"
1622
+ ]
1623
+ }
1624
+ ],
1625
+ "examples": [
1626
+ {
1627
+ "name": "OneStudent",
1628
+ "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 1)} />",
1629
+ "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--one-student"
1630
+ },
1631
+ {
1632
+ "name": "TwoStudents",
1633
+ "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 2)} />",
1634
+ "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--two-students"
1635
+ },
1636
+ {
1637
+ "name": "ThreeStudents",
1638
+ "jsx": "<StudentDetails students={STUDENT_POOL.slice(0, 3)} />",
1639
+ "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-studentdetails--three-students"
1640
+ }
1641
+ ]
1642
+ },
1608
1643
  {
1609
1644
  "name": "TopNavigation",
1610
1645
  "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,12 +1734,12 @@
1699
1734
  },
1700
1735
  {
1701
1736
  "name": "Desktop",
1702
- "jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {} />",
1737
+ "jsx": "<TopNavigation logo={<GoStudentLogo />} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
1703
1738
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop"
1704
1739
  },
1705
1740
  {
1706
1741
  "name": "DesktopSK",
1707
- "jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {} />",
1742
+ "jsx": "<TopNavigation logo={<SKLogo />} mobileLogo={<SKLogoMobile />} logoOverflowsBar={true} tabs={defaultTabs} userName=\"Anna James\" userRole=\"tutor\" languages={LANGUAGES} selectedLanguage=\"en\" onLogout={() => {}} />",
1708
1743
  "storyUrl": "https://62835ff8873d45004a627ad4-snugmmtvrg.chromatic.com/?path=/story/compositions-topnavigation--desktop-s-k"
1709
1744
  }
1710
1745
  ]
@@ -1723,9 +1758,11 @@
1723
1758
  "DashboardIcon",
1724
1759
  "DeleteIcon",
1725
1760
  "EditSquareIcon",
1761
+ "EnvelopeIcon",
1726
1762
  "ErrorFilledIcon",
1727
1763
  "EventNoteIcon",
1728
1764
  "GlobeIcon",
1765
+ "GraduationCapIcon",
1729
1766
  "GroupIcon",
1730
1767
  "HistoryIcon",
1731
1768
  "HourglassIcon",
@@ -1736,6 +1773,7 @@
1736
1773
  "LogoutIcon",
1737
1774
  "MenuIcon",
1738
1775
  "OfflineIcon",
1776
+ "PendingFilledIcon",
1739
1777
  "PlanetIcon",
1740
1778
  "PlusIcon",
1741
1779
  "StarsIcon",
@@ -1781,7 +1819,7 @@
1781
1819
  "warning": {
1782
1820
  "warning50": "var(--warning-50)",
1783
1821
  "warning500": "var(--warning-500)",
1784
- "warning700": "var(--warning-700)"
1822
+ "warning900": "var(--warning-900)"
1785
1823
  },
1786
1824
  "color": {
1787
1825
  "colorBlack": "var(--color-black)",
@@ -2119,6 +2157,8 @@
2119
2157
  "colorFeedbackWarningBorder": "var(--color-feedback-warning-border)",
2120
2158
  "colorFeedbackWarningHelperText": "var(--color-feedback-warning-helper-text)",
2121
2159
  "colorFeedbackWarningText": "var(--color-feedback-warning-text)",
2160
+ "colorFeedbackErrorIcon": "var(--color-feedback-error-icon)",
2161
+ "colorFeedbackErrorText": "var(--color-feedback-error-text)",
2122
2162
  "colorSurfaceDefault": "var(--color-surface-default)",
2123
2163
  "colorSurfaceSubtleSteel": "var(--color-surface-subtle-steel)",
2124
2164
  "colorSurfaceHover": "var(--color-surface-hover)",
@@ -2129,6 +2169,7 @@
2129
2169
  "colorSurfaceIconsTooltip": "var(--color-surface-icons-tooltip)",
2130
2170
  "colorSurfaceIconsWhite": "var(--color-surface-icons-white)",
2131
2171
  "colorSurfaceIconsSecondary": "var(--color-surface-icons-secondary)",
2172
+ "colorSurfaceIconsPending": "var(--color-surface-icons-pending)",
2132
2173
  "colorSurfaceSelected": "var(--color-surface-selected)",
2133
2174
  "colorSurfaceDisabled": "var(--color-surface-disabled)",
2134
2175
  "colorSurfaceSubtleBlue": "var(--color-surface-subtle-blue)",
@@ -2137,6 +2178,7 @@
2137
2178
  "colorSurfaceStepper": "var(--color-surface-stepper)",
2138
2179
  "colorSurfaceTooltip": "var(--color-surface-tooltip)",
2139
2180
  "colorSurfaceCalendarDate": "var(--color-surface-calendar-date)",
2181
+ "colorSurfaceCalendarTriangle": "var(--color-surface-calendar-triangle)",
2140
2182
  "colorSurfaceCalendarDot": "var(--color-surface-calendar-dot)",
2141
2183
  "colorBorderDefault": "var(--color-border-default)",
2142
2184
  "colorBorderWhite": "var(--color-border-white)",
@@ -2160,6 +2202,8 @@
2160
2202
  "colorTagTextStudent": "var(--color-tag-text-student)",
2161
2203
  "colorTagTextTutor": "var(--color-tag-text-tutor)",
2162
2204
  "colorTagTextParent": "var(--color-tag-text-parent)",
2205
+ "colorTagBuTBackground": "var(--color-tag-bu-t-background)",
2206
+ "colorTagBuTBorder": "var(--color-tag-bu-t-border)",
2163
2207
  "colorInProgressBorder": "var(--color-in-progress-border)",
2164
2208
  "colorInProgressDot": "var(--color-in-progress-dot)",
2165
2209
  "colorInProgressDotFlash": "var(--color-in-progress-dot-flash)"
@@ -2396,6 +2440,8 @@
2396
2440
  "colorFeedbackWarningBorder": "var(--color-feedback-warning-border)",
2397
2441
  "colorFeedbackWarningHelperText": "var(--color-feedback-warning-helper-text)",
2398
2442
  "colorFeedbackWarningText": "var(--color-feedback-warning-text)",
2443
+ "colorFeedbackErrorIcon": "var(--color-feedback-error-icon)",
2444
+ "colorFeedbackErrorText": "var(--color-feedback-error-text)",
2399
2445
  "colorSurfaceDefault": "var(--color-surface-default)",
2400
2446
  "colorSurfaceSubtleSteel": "var(--color-surface-subtle-steel)",
2401
2447
  "colorSurfaceHover": "var(--color-surface-hover)",
@@ -2406,6 +2452,7 @@
2406
2452
  "colorSurfaceIconsTooltip": "var(--color-surface-icons-tooltip)",
2407
2453
  "colorSurfaceIconsWhite": "var(--color-surface-icons-white)",
2408
2454
  "colorSurfaceIconsSecondary": "var(--color-surface-icons-secondary)",
2455
+ "colorSurfaceIconsPending": "var(--color-surface-icons-pending)",
2409
2456
  "colorSurfaceSelected": "var(--color-surface-selected)",
2410
2457
  "colorSurfaceDisabled": "var(--color-surface-disabled)",
2411
2458
  "colorSurfaceSubtleBlue": "var(--color-surface-subtle-blue)",
@@ -2414,6 +2461,7 @@
2414
2461
  "colorSurfaceStepper": "var(--color-surface-stepper)",
2415
2462
  "colorSurfaceTooltip": "var(--color-surface-tooltip)",
2416
2463
  "colorSurfaceCalendarDate": "var(--color-surface-calendar-date)",
2464
+ "colorSurfaceCalendarTriangle": "var(--color-surface-calendar-triangle)",
2417
2465
  "colorSurfaceCalendarDot": "var(--color-surface-calendar-dot)",
2418
2466
  "colorBorderDefault": "var(--color-border-default)",
2419
2467
  "colorBorderWhite": "var(--color-border-white)",
@@ -2437,6 +2485,8 @@
2437
2485
  "colorTagTextStudent": "var(--color-tag-text-student)",
2438
2486
  "colorTagTextTutor": "var(--color-tag-text-tutor)",
2439
2487
  "colorTagTextParent": "var(--color-tag-text-parent)",
2488
+ "colorTagBuTBackground": "var(--color-tag-bu-t-background)",
2489
+ "colorTagBuTBorder": "var(--color-tag-bu-t-border)",
2440
2490
  "colorInProgressBorder": "var(--color-in-progress-border)",
2441
2491
  "colorInProgressDot": "var(--color-in-progress-dot)",
2442
2492
  "colorInProgressDotFlash": "var(--color-in-progress-dot-flash)"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gostudent/shared-ui-library-mcp",
3
- "version": "1.25.0",
3
+ "version": "1.25.1-DT-16975.2",
4
4
  "description": "MCP server for @gostudent/shared-ui-library — exposes components, icons, and tokens to Claude",
5
5
  "type": "module",
6
6
  "bin": {