@triptease/design-system-mcp 1.0.13 → 1.0.15
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.
- package/CHANGELOG.md +17 -0
- package/dist/package.json +5 -5
- package/dist/src/manifests/components/entries/banner.d.ts +23 -0
- package/dist/src/manifests/components/entries/banner.js +68 -0
- package/dist/src/manifests/components/entries/banner.js.map +1 -0
- package/dist/src/manifests/components/index.js +2 -0
- package/dist/src/manifests/components/index.js.map +1 -1
- package/package.json +5 -5
- package/src/manifests/components/entries/banner.ts +69 -0
- package/src/manifests/components/index.ts +2 -0
- package/src/tools/getCSSTokens/__snapshots__/handler.test.ts.snap +1 -1
- package/src/tools/getSetupGuide/__snapshots__/handler.test.ts.snap +1 -1
- package/src/tools/listCSSTokens/__snapshots__/handler.test.ts.snap +1 -1
- package/src/tools/listComponents/__snapshots__/handler.test.ts.snap +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @triptease/design-system-mcp
|
|
2
2
|
|
|
3
|
+
## 1.0.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Add banner component
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
- @triptease/stylesheet@1.4.5
|
|
11
|
+
|
|
12
|
+
## 1.0.14
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- @triptease/tt-combobox@5.6.6
|
|
17
|
+
- @triptease/tt-date-picker@6.1.3
|
|
18
|
+
- @triptease/tt-date-range-picker@6.2.4
|
|
19
|
+
|
|
3
20
|
## 1.0.13
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@triptease/design-system-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.15",
|
|
4
4
|
"description": "MCP server for Triptease design system documentation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@modelcontextprotocol/sdk": "^1.26.0",
|
|
22
|
-
"@triptease/stylesheet": "1.4.
|
|
22
|
+
"@triptease/stylesheet": "1.4.5",
|
|
23
23
|
"@triptease/tt-bar-chart": "1.0.7",
|
|
24
|
-
"@triptease/tt-combobox": "5.6.
|
|
24
|
+
"@triptease/tt-combobox": "5.6.6",
|
|
25
25
|
"@triptease/tt-data-point": "1.0.1",
|
|
26
26
|
"@triptease/tt-dataset": "1.0.2",
|
|
27
|
-
"@triptease/tt-date-picker": "6.1.
|
|
28
|
-
"@triptease/tt-date-range-picker": "6.2.
|
|
27
|
+
"@triptease/tt-date-picker": "6.1.3",
|
|
28
|
+
"@triptease/tt-date-range-picker": "6.2.4",
|
|
29
29
|
"@triptease/tt-dialog": "5.1.1",
|
|
30
30
|
"@triptease/tt-highlight": "1.0.2",
|
|
31
31
|
"@triptease/tt-line-chart": "1.0.10",
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
badge: {
|
|
3
|
+
name: string;
|
|
4
|
+
description: string;
|
|
5
|
+
element: string;
|
|
6
|
+
usageGuidance: {
|
|
7
|
+
whenToUse: string[];
|
|
8
|
+
avoid: string[];
|
|
9
|
+
};
|
|
10
|
+
dataAttributes: {
|
|
11
|
+
'data-theme': {
|
|
12
|
+
type: string;
|
|
13
|
+
values: string[];
|
|
14
|
+
description: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
examples: {
|
|
18
|
+
title: string;
|
|
19
|
+
code: string;
|
|
20
|
+
}[];
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
badge: {
|
|
3
|
+
name: 'Banner',
|
|
4
|
+
description: 'Banners prominently display information to users and sometimes prompt them to take action.',
|
|
5
|
+
element: 'div',
|
|
6
|
+
usageGuidance: {
|
|
7
|
+
whenToUse: [
|
|
8
|
+
"To display information that requires the users' immediate attention.",
|
|
9
|
+
'To capture the users attention and prompt them to take action.',
|
|
10
|
+
],
|
|
11
|
+
avoid: [
|
|
12
|
+
"To display non-important information that does not require the users' immediate attention.",
|
|
13
|
+
'To advertise new features, services or updates.',
|
|
14
|
+
'To display form validation errors (place an error message beneath, or as close as is possible to, the input instead).',
|
|
15
|
+
"To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead).'",
|
|
16
|
+
],
|
|
17
|
+
},
|
|
18
|
+
dataAttributes: {
|
|
19
|
+
'data-theme': {
|
|
20
|
+
type: 'enum',
|
|
21
|
+
values: ['alert', 'warning'],
|
|
22
|
+
description: 'Shows info variant when data-theme is not set',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
examples: [
|
|
26
|
+
{
|
|
27
|
+
title: 'Basic usage',
|
|
28
|
+
code: `
|
|
29
|
+
<div class="banner">
|
|
30
|
+
<p class="banner--body">Content inside banner</p>
|
|
31
|
+
</div>`,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
title: 'With title',
|
|
35
|
+
code: `
|
|
36
|
+
<div class="banner">
|
|
37
|
+
<p class="banner--title">Banner title</p>
|
|
38
|
+
<p class="banner--body">Content inside banner</p>
|
|
39
|
+
</div>`,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
title: 'With Action',
|
|
43
|
+
code: `
|
|
44
|
+
<div class="banner">
|
|
45
|
+
<p class="banner--body">Content inside banner</p>
|
|
46
|
+
<button class="banner--action small" data-theme="tertiary">
|
|
47
|
+
Action
|
|
48
|
+
</button>
|
|
49
|
+
</div>`,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
title: 'Warning',
|
|
53
|
+
code: `
|
|
54
|
+
<div class="banner" data-theme="warning">
|
|
55
|
+
<p class="banner--body">Content inside banner</p>
|
|
56
|
+
</div>`,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
title: 'Alert',
|
|
60
|
+
code: `
|
|
61
|
+
<div class="banner" data-theme="alert">
|
|
62
|
+
<p class="banner--body">Content inside banner</p>
|
|
63
|
+
</div>`,
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/banner.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,4FAA4F;QACzG,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,sEAAsE;gBACtE,gEAAgE;aACjE;YACD,KAAK,EAAE;gBACL,4FAA4F;gBAC5F,iDAAiD;gBACjD,uHAAuH;gBACvH,4JAA4J;aAC7J;SACF;QACD,cAAc,EAAE;YACd,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC;gBAC5B,WAAW,EAAE,+CAA+C;aAC7D;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;WAGH;aACJ;YACD;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE;;;;WAIH;aACJ;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;;;;WAMH;aACJ;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE;;;WAGH;aACJ;YACD;gBACE,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE;;;WAGH;aACJ;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n badge: {\n name: 'Banner',\n description: 'Banners prominently display information to users and sometimes prompt them to take action.',\n element: 'div',\n usageGuidance: {\n whenToUse: [\n \"To display information that requires the users' immediate attention.\",\n 'To capture the users attention and prompt them to take action.',\n ],\n avoid: [\n \"To display non-important information that does not require the users' immediate attention.\",\n 'To advertise new features, services or updates.',\n 'To display form validation errors (place an error message beneath, or as close as is possible to, the input instead).',\n \"To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead).'\",\n ],\n },\n dataAttributes: {\n 'data-theme': {\n type: 'enum',\n values: ['alert', 'warning'],\n description: 'Shows info variant when data-theme is not set',\n },\n },\n examples: [\n {\n title: 'Basic usage',\n code: `\n <div class=\"banner\">\n <p class=\"banner--body\">Content inside banner</p>\n </div>`,\n },\n {\n title: 'With title',\n code: `\n <div class=\"banner\">\n <p class=\"banner--title\">Banner title</p>\n <p class=\"banner--body\">Content inside banner</p>\n </div>`,\n },\n {\n title: 'With Action',\n code: `\n <div class=\"banner\">\n <p class=\"banner--body\">Content inside banner</p>\n <button class=\"banner--action small\" data-theme=\"tertiary\">\n Action\n </button>\n </div>`,\n },\n {\n title: 'Warning',\n code: `\n <div class=\"banner\" data-theme=\"warning\">\n <p class=\"banner--body\">Content inside banner</p>\n </div>`,\n },\n {\n title: 'Alert',\n code: `\n <div class=\"banner\" data-theme=\"alert\">\n <p class=\"banner--body\">Content inside banner</p>\n </div>`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}
|
|
@@ -17,6 +17,7 @@ import dateRangePicker from '../../manifests/components/entries/dateRangePicker.
|
|
|
17
17
|
import barChart from '../../manifests/components/entries/barChart.js';
|
|
18
18
|
import lineChart from '../../manifests/components/entries/lineChart.js';
|
|
19
19
|
import statistic from '../../manifests/components/entries/statistic.js';
|
|
20
|
+
import banner from '../../manifests/components/entries/banner.js';
|
|
20
21
|
export const componentManifest = {
|
|
21
22
|
...button,
|
|
22
23
|
...textinput,
|
|
@@ -37,5 +38,6 @@ export const componentManifest = {
|
|
|
37
38
|
...barChart,
|
|
38
39
|
...lineChart,
|
|
39
40
|
...statistic,
|
|
41
|
+
...banner,
|
|
40
42
|
};
|
|
41
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/manifests/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,WAAW,MAAM,+CAA+C,CAAC;AACxE,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,IAAI,MAAM,wCAAwC,CAAC;AAC1D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,eAAe,MAAM,mDAAmD,CAAC;AAChF,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,SAAS,MAAM,6CAA6C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/manifests/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,WAAW,MAAM,+CAA+C,CAAC;AACxE,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,IAAI,MAAM,wCAAwC,CAAC;AAC1D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,eAAe,MAAM,mDAAmD,CAAC;AAChF,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAsB;IAClD,GAAG,MAAM;IACT,GAAG,SAAS;IACZ,GAAG,WAAW;IACd,GAAG,QAAQ;IACX,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,KAAK;IACR,GAAG,MAAM;IACT,GAAG,KAAK;IACR,GAAG,IAAI;IACP,GAAG,KAAK;IACR,GAAG,UAAU;IACb,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,UAAU;IACb,GAAG,eAAe;IAClB,GAAG,QAAQ;IACX,GAAG,SAAS;IACZ,GAAG,SAAS;IACZ,GAAG,MAAM;CACV,CAAC","sourcesContent":["import type { ComponentManifest } from './types.js';\n\nimport button from '@/manifests/components/entries/button.js';\nimport textinput from '@/manifests/components/entries/textinput.js';\nimport numberinput from '@/manifests/components/entries/numberinput.js';\nimport textarea from '@/manifests/components/entries/textarea.js';\nimport select from '@/manifests/components/entries/select.js';\nimport checkbox from '@/manifests/components/entries/checkbox.js';\nimport radio from '@/manifests/components/entries/radio.js';\nimport toggle from '@/manifests/components/entries/toggle.js';\nimport badge from '@/manifests/components/entries/badge.js';\nimport card from '@/manifests/components/entries/card.js';\nimport table from '@/manifests/components/entries/table.js';\nimport typography from '@/manifests/components/entries/typography.js';\nimport dialog from '@/manifests/components/entries/dialog.js';\nimport combobox from '@/manifests/components/entries/combobox.js';\nimport datePicker from '@/manifests/components/entries/datePicker.js';\nimport dateRangePicker from '@/manifests/components/entries/dateRangePicker.js';\nimport barChart from '@/manifests/components/entries/barChart.js';\nimport lineChart from '@/manifests/components/entries/lineChart.js';\nimport statistic from '@/manifests/components/entries/statistic.js';\nimport banner from '@/manifests/components/entries/banner.js';\n\nexport const componentManifest: ComponentManifest = {\n ...button,\n ...textinput,\n ...numberinput,\n ...textarea,\n ...select,\n ...checkbox,\n ...radio,\n ...toggle,\n ...badge,\n ...card,\n ...table,\n ...typography,\n ...dialog,\n ...combobox,\n ...datePicker,\n ...dateRangePicker,\n ...barChart,\n ...lineChart,\n ...statistic,\n ...banner,\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@triptease/design-system-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.15",
|
|
4
4
|
"description": "MCP server for Triptease design system documentation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@modelcontextprotocol/sdk": "^1.26.0",
|
|
22
|
-
"@triptease/stylesheet": "1.4.
|
|
22
|
+
"@triptease/stylesheet": "1.4.5",
|
|
23
23
|
"@triptease/tt-bar-chart": "1.0.7",
|
|
24
|
-
"@triptease/tt-combobox": "5.6.
|
|
24
|
+
"@triptease/tt-combobox": "5.6.6",
|
|
25
25
|
"@triptease/tt-data-point": "1.0.1",
|
|
26
26
|
"@triptease/tt-dataset": "1.0.2",
|
|
27
|
-
"@triptease/tt-date-picker": "6.1.
|
|
28
|
-
"@triptease/tt-date-range-picker": "6.2.
|
|
27
|
+
"@triptease/tt-date-picker": "6.1.3",
|
|
28
|
+
"@triptease/tt-date-range-picker": "6.2.4",
|
|
29
29
|
"@triptease/tt-dialog": "5.1.1",
|
|
30
30
|
"@triptease/tt-highlight": "1.0.2",
|
|
31
31
|
"@triptease/tt-line-chart": "1.0.10",
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { ComponentManifest } from '@/manifests/components/types.js';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
badge: {
|
|
5
|
+
name: 'Banner',
|
|
6
|
+
description: 'Banners prominently display information to users and sometimes prompt them to take action.',
|
|
7
|
+
element: 'div',
|
|
8
|
+
usageGuidance: {
|
|
9
|
+
whenToUse: [
|
|
10
|
+
"To display information that requires the users' immediate attention.",
|
|
11
|
+
'To capture the users attention and prompt them to take action.',
|
|
12
|
+
],
|
|
13
|
+
avoid: [
|
|
14
|
+
"To display non-important information that does not require the users' immediate attention.",
|
|
15
|
+
'To advertise new features, services or updates.',
|
|
16
|
+
'To display form validation errors (place an error message beneath, or as close as is possible to, the input instead).',
|
|
17
|
+
"To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead).'",
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
dataAttributes: {
|
|
21
|
+
'data-theme': {
|
|
22
|
+
type: 'enum',
|
|
23
|
+
values: ['alert', 'warning'],
|
|
24
|
+
description: 'Shows info variant when data-theme is not set',
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
examples: [
|
|
28
|
+
{
|
|
29
|
+
title: 'Basic usage',
|
|
30
|
+
code: `
|
|
31
|
+
<div class="banner">
|
|
32
|
+
<p class="banner--body">Content inside banner</p>
|
|
33
|
+
</div>`,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
title: 'With title',
|
|
37
|
+
code: `
|
|
38
|
+
<div class="banner">
|
|
39
|
+
<p class="banner--title">Banner title</p>
|
|
40
|
+
<p class="banner--body">Content inside banner</p>
|
|
41
|
+
</div>`,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
title: 'With Action',
|
|
45
|
+
code: `
|
|
46
|
+
<div class="banner">
|
|
47
|
+
<p class="banner--body">Content inside banner</p>
|
|
48
|
+
<button class="banner--action small" data-theme="tertiary">
|
|
49
|
+
Action
|
|
50
|
+
</button>
|
|
51
|
+
</div>`,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
title: 'Warning',
|
|
55
|
+
code: `
|
|
56
|
+
<div class="banner" data-theme="warning">
|
|
57
|
+
<p class="banner--body">Content inside banner</p>
|
|
58
|
+
</div>`,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
title: 'Alert',
|
|
62
|
+
code: `
|
|
63
|
+
<div class="banner" data-theme="alert">
|
|
64
|
+
<p class="banner--body">Content inside banner</p>
|
|
65
|
+
</div>`,
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
} satisfies ComponentManifest;
|
|
@@ -19,6 +19,7 @@ import dateRangePicker from '@/manifests/components/entries/dateRangePicker.js';
|
|
|
19
19
|
import barChart from '@/manifests/components/entries/barChart.js';
|
|
20
20
|
import lineChart from '@/manifests/components/entries/lineChart.js';
|
|
21
21
|
import statistic from '@/manifests/components/entries/statistic.js';
|
|
22
|
+
import banner from '@/manifests/components/entries/banner.js';
|
|
22
23
|
|
|
23
24
|
export const componentManifest: ComponentManifest = {
|
|
24
25
|
...button,
|
|
@@ -40,4 +41,5 @@ export const componentManifest: ComponentManifest = {
|
|
|
40
41
|
...barChart,
|
|
41
42
|
...lineChart,
|
|
42
43
|
...statistic,
|
|
44
|
+
...banner,
|
|
43
45
|
};
|
|
@@ -37,7 +37,7 @@ exports[`getCSSTokens handler > should return all color tokens 1`] = `
|
|
|
37
37
|
{
|
|
38
38
|
"content": [
|
|
39
39
|
{
|
|
40
|
-
"text": "[{"token":"--color-alert-100","value":"#FFD6D6"},{"token":"--color-alert-200","value":"#FF9999"},{"token":"--color-alert-300","value":"#F93939"},{"token":"--color-alert-400","value":"#DA0707"},{"token":"--color-alert-500","value":"#A80505"},{"token":"--color-border-100","value":"#E8EAEC"},{"token":"--color-border-200","value":"#E0E1E5"},{"token":"--color-border-300","value":"#D7D9DD"},{"token":"--color-border-400","value":"#C5C8CE"},{"token":"--color-border-500","value":"#B7BBC2"},{"token":"--color-text-100","value":"#FFFFFF"},{"token":"--color-text-200","value":"#B5B0B5"},{"token":"--color-text-300","value":"#575157"},{"token":"--color-text-400","value":"#3B353B"},{"token":"--color-text-500","value":"#0D0C0D"},{"token":"--color-text-inverted-100","value":"#0D0C0D"},{"token":"--color-text-inverted-200","value":"#77758A"},{"token":"--color-text-inverted-300","value":"#9D9CAB"},{"token":"--color-text-inverted-400","value":"#D3D3DA"},{"token":"--color-text-inverted-500","value":"#FFFFFF"},{"token":"--color-info-100","value":"#E5F3FF"},{"token":"--color-info-200","value":"#C2E3FF"},{"token":"--color-info-300","value":"#8FCBFF"},{"token":"--color-info-400","value":"#0B99FF"},{"token":"--color-info-500","value":"#007DD6"},{"token":"--color-primary-100","value":"#F3F0FA"},{"token":"--color-primary-200","value":"#E8E3F6"},{"token":"--color-primary-300","value":"#CFC6ED"},{"token":"--color-primary-400","value":"#5E43C2"},{"token":"--color-primary-500","value":"#4D35A1"},{"token":"--color-success-100","value":"#E8F6E3"},{"token":"--color-success-200","value":"#C8E9BB"},{"token":"--color-success-300","value":"#A7DB93"},{"token":"--color-success-400","value":"#86D06D"},{"token":"--color-success-500","value":"#65C345"},{"token":"--color-surface-100","value":"#FFFFFF"},{"token":"--color-surface-200","value":"#F9FAFB"},{"token":"--color-surface-300","value":"#F1F2F4"},{"token":"--color-surface-400","value":"#E8EAEC"},{"token":"--color-surface-500","value":"#E0E1E5"},{"token":"--color-surface-600","value":"#D7D9DD"},{"token":"--color-surface-700","value":"#75767E"},{"token":"--color-surface-800","value":"#1C1B27"},{"token":"--color-surface-inverted-100","value":"#1C1B27"},{"token":"--color-surface-inverted-200","value":"#3A384D"},{"token":"--color-surface-inverted-300","value":"#5B5974"},{"token":"--color-surface-inverted-400","value":"#7F7D95"},{"token":"--color-surface-inverted-500","value":"#ACAABC"},{"token":"--color-warning-100","value":"#FFEDD6"},{"token":"--color-warning-200","value":"#FFE0B8"},{"token":"--color-warning-300","value":"#FFCE8F"},{"token":"--color-warning-400","value":"#FFB95E"},{"token":"--color-warning-500","value":"#FF9D1F"}]",
|
|
40
|
+
"text": "[{"token":"--color-alert-100","value":"#FFD6D6"},{"token":"--color-alert-200","value":"#FF9999"},{"token":"--color-alert-300","value":"#F93939"},{"token":"--color-alert-400","value":"#DA0707"},{"token":"--color-alert-500","value":"#A80505"},{"token":"--color-alert-subtle","value":"#FFD8EB"},{"token":"--color-alert-strong","value":"#D02521"},{"token":"--color-border-100","value":"#E8EAEC"},{"token":"--color-border-200","value":"#E0E1E5"},{"token":"--color-border-300","value":"#D7D9DD"},{"token":"--color-border-400","value":"#C5C8CE"},{"token":"--color-border-500","value":"#B7BBC2"},{"token":"--color-text-100","value":"#FFFFFF"},{"token":"--color-text-200","value":"#B5B0B5"},{"token":"--color-text-300","value":"#575157"},{"token":"--color-text-400","value":"#3B353B"},{"token":"--color-text-500","value":"#0D0C0D"},{"token":"--color-text-inverted-100","value":"#0D0C0D"},{"token":"--color-text-inverted-200","value":"#77758A"},{"token":"--color-text-inverted-300","value":"#9D9CAB"},{"token":"--color-text-inverted-400","value":"#D3D3DA"},{"token":"--color-text-inverted-500","value":"#FFFFFF"},{"token":"--color-info-100","value":"#E5F3FF"},{"token":"--color-info-200","value":"#C2E3FF"},{"token":"--color-info-300","value":"#8FCBFF"},{"token":"--color-info-400","value":"#0B99FF"},{"token":"--color-info-500","value":"#007DD6"},{"token":"--color-info-subtle","value":"#F0F8FF"},{"token":"--color-info-strong","value":"#2475B9"},{"token":"--color-primary-100","value":"#F3F0FA"},{"token":"--color-primary-200","value":"#E8E3F6"},{"token":"--color-primary-300","value":"#CFC6ED"},{"token":"--color-primary-400","value":"#5E43C2"},{"token":"--color-primary-500","value":"#4D35A1"},{"token":"--color-success-100","value":"#E8F6E3"},{"token":"--color-success-200","value":"#C8E9BB"},{"token":"--color-success-300","value":"#A7DB93"},{"token":"--color-success-400","value":"#86D06D"},{"token":"--color-success-500","value":"#65C345"},{"token":"--color-success-subtle","value":"#DEF5D6"},{"token":"--color-success-strong","value":"#227D02"},{"token":"--color-surface-100","value":"#FFFFFF"},{"token":"--color-surface-200","value":"#F9FAFB"},{"token":"--color-surface-300","value":"#F1F2F4"},{"token":"--color-surface-400","value":"#E8EAEC"},{"token":"--color-surface-500","value":"#E0E1E5"},{"token":"--color-surface-600","value":"#D7D9DD"},{"token":"--color-surface-700","value":"#75767E"},{"token":"--color-surface-800","value":"#1C1B27"},{"token":"--color-surface-inverted-100","value":"#1C1B27"},{"token":"--color-surface-inverted-200","value":"#3A384D"},{"token":"--color-surface-inverted-300","value":"#5B5974"},{"token":"--color-surface-inverted-400","value":"#7F7D95"},{"token":"--color-surface-inverted-500","value":"#ACAABC"},{"token":"--color-warning-100","value":"#FFEDD6"},{"token":"--color-warning-200","value":"#FFE0B8"},{"token":"--color-warning-300","value":"#FFCE8F"},{"token":"--color-warning-400","value":"#FFB95E"},{"token":"--color-warning-500","value":"#FF9D1F"},{"token":"--color-warning-subtle","value":"#FFEDD6"},{"token":"--color-warning-strong","value":"#AC5500"}]",
|
|
41
41
|
"type": "text",
|
|
42
42
|
},
|
|
43
43
|
],
|
|
@@ -15,7 +15,7 @@ exports[`getSetupGuide handler > should return all setup guides if no type is gi
|
|
|
15
15
|
{
|
|
16
16
|
"content": [
|
|
17
17
|
{
|
|
18
|
-
"text": "{"message":"Multiple setup options available. Choose based on user preference or project requirements.","options":[{"type":"npm","name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","guide":{"name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","steps":[{"title":"Install the stylesheet package","description":"Choose your package manager:","code":"# NPM\\nnpm install @triptease/stylesheet\\n\\n# Yarn\\nyarn add @triptease/stylesheet\\n\\n# Bun\\nbun add @triptease/stylesheet","language":"bash"},{"title":"Import the stylesheet","description":"Add this import to your application entry point:","code":"import '@triptease/stylesheet';","language":"typescript"}],"notes":["Current version: @triptease/stylesheet@1.4.
|
|
18
|
+
"text": "{"message":"Multiple setup options available. Choose based on user preference or project requirements.","options":[{"type":"npm","name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","guide":{"name":"NPM Stylesheet Setup","description":"Setup instructions for using the stylesheet package via npm.","steps":[{"title":"Install the stylesheet package","description":"Choose your package manager:","code":"# NPM\\nnpm install @triptease/stylesheet\\n\\n# Yarn\\nyarn add @triptease/stylesheet\\n\\n# Bun\\nbun add @triptease/stylesheet","language":"bash"},{"title":"Import the stylesheet","description":"Add this import to your application entry point:","code":"import '@triptease/stylesheet';","language":"typescript"}],"notes":["Current version: @triptease/stylesheet@1.4.5"]}},{"type":"cdn","name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN.","guide":{"name":"CDN Stylesheet Setup","description":"Setup instructions for using the stylesheet via CDN.","steps":[{"title":"Add stylesheet link to HTML","description":"Include this in the <head> of your HTML document:","code":"<head>\\n <!-- Specific version (recommended) -->\\n <link rel=\\"stylesheet\\" href=\\"https://cdn.design-system.triptease.io/1.4.5/triptease.css\\">\\n\\n <!-- Or, latest version (dangerous - breaking changes may occur) -->\\n <link rel=\\"stylesheet\\" href=\\"https://cdn.design-system.triptease.io/triptease.css\\">\\n</head>","language":"html"}]}}]}",
|
|
19
19
|
"type": "text",
|
|
20
20
|
},
|
|
21
21
|
],
|
|
@@ -4,7 +4,7 @@ exports[`listCSSTokens handler > should summarise all available tokens 1`] = `
|
|
|
4
4
|
{
|
|
5
5
|
"content": [
|
|
6
6
|
{
|
|
7
|
-
"text": "{"color":{"count":
|
|
7
|
+
"text": "{"color":{"count":61},"font":{"count":15},"space":{"count":20},"border":{"count":1},"border-radius":{"count":3},"box-shadow":{"count":3}}",
|
|
8
8
|
"type": "text",
|
|
9
9
|
},
|
|
10
10
|
],
|
|
@@ -4,7 +4,7 @@ exports[`listComponents tool > should list all components within the manifest 1`
|
|
|
4
4
|
{
|
|
5
5
|
"content": [
|
|
6
6
|
{
|
|
7
|
-
"text": "{"components":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"textinput","name":"Text Input","description":"Text input field for single-line text entry with automatic validation styling","element":"input"},{"key":"numberinput","name":"Number Input","description":"Number input field with browser-provided increment/decrement controls","element":"input[type='number']"},{"key":"textarea","name":"Textarea","description":"Multi-line text input field","element":"textarea"},{"key":"select","name":"Select Input","description":"Dropdown list for selecting a single option","element":"select"},{"key":"checkbox","name":"Checkbox","description":"Checkbox input for multiple selections","element":"input[type='checkbox']"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"},{"key":"toggle","name":"Toggle","description":"Toggle switch for binary on/off states with immediate effect","element":"input[type='checkbox'][data-theme='toggle']"},{"key":"badge","name":"
|
|
7
|
+
"text": "{"components":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"textinput","name":"Text Input","description":"Text input field for single-line text entry with automatic validation styling","element":"input"},{"key":"numberinput","name":"Number Input","description":"Number input field with browser-provided increment/decrement controls","element":"input[type='number']"},{"key":"textarea","name":"Textarea","description":"Multi-line text input field","element":"textarea"},{"key":"select","name":"Select Input","description":"Dropdown list for selecting a single option","element":"select"},{"key":"checkbox","name":"Checkbox","description":"Checkbox input for multiple selections","element":"input[type='checkbox']"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"},{"key":"toggle","name":"Toggle","description":"Toggle switch for binary on/off states with immediate effect","element":"input[type='checkbox'][data-theme='toggle']"},{"key":"badge","name":"Banner","description":"Banners prominently display information to users and sometimes prompt them to take action.","element":"div"},{"key":"card","name":"Card","description":"Container component that groups related content and actions in a visually distinct area","element":"div"},{"key":"table","name":"Table","description":"Organize and display data in rows and columns","element":"table"},{"key":"typography","name":"Typography","description":"Text styling using semantic HTML elements and utility classes","element":"h1-h4, p, strong, a"},{"key":"dialog","name":"Dialog - Web Component","description":"Dialog component that displays content in a layer above the page","element":"tt-dialog"},{"key":"combobox","name":"Combobox","description":"Searchable dropdown that combines a text input with a list, available as both React component and Web Component","element":"Combobox (React) / tt-combobox (Web Component)"},{"key":"date-picker","name":"Date Picker","description":"Date picker for selecting a single date, available as both React component and Web Component","element":"DatePicker (React) / tt-date-picker (Web Component)"},{"key":"date-range-picker","name":"Date Range Picker","description":"Date range picker for selecting start and end dates, available as both React component and Web Component","element":"DateRangePicker (React) / tt-date-range-picker (Web Component)"},{"key":"bar-chart","name":"Bar Chart - Web Component","description":"Bar chart for comparing values across categories","element":"tt-bar-chart"},{"key":"line-chart","name":"Line Chart - Web Component","description":"Line chart for visualizing trends over continuous data","element":"tt-line-chart"},{"key":"statistic","name":"Statistic","description":"A consistent, structured layout for displaying a statistic or a few statistics.","element":"div"}]}",
|
|
8
8
|
"type": "text",
|
|
9
9
|
},
|
|
10
10
|
],
|