@muibook/components 2.0.0 → 3.0.0
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/dist/esm/agent/keywords/index.js +104 -4
- package/dist/esm/agent/prompts/index.js +392 -37
- package/dist/esm/components/mui-accordion/block/index.js +2 -6
- package/dist/esm/components/mui-accordion/group/index.js +1 -1
- package/dist/esm/components/mui-accordion/inline/index.js +2 -6
- package/dist/esm/components/mui-addon/index.js +1 -1
- package/dist/esm/components/mui-alert/index.js +10 -5
- package/dist/esm/components/mui-badge/index.js +4 -4
- package/dist/esm/components/mui-body/index.js +4 -4
- package/dist/esm/components/mui-button/index.js +5 -7
- package/dist/esm/components/mui-button-group/index.js +1 -1
- package/dist/esm/components/mui-card/body/index.js +22 -18
- package/dist/esm/components/mui-card/card/index.js +1 -1
- package/dist/esm/components/mui-card/footer/index.js +1 -1
- package/dist/esm/components/mui-card/header/index.js +1 -1
- package/dist/esm/components/mui-carousel/controller/index.js +1 -1
- package/dist/esm/components/mui-carousel/panel/index.js +2 -2
- package/dist/esm/components/mui-code/index.js +9 -6
- package/dist/esm/components/mui-container/index.js +1 -1
- package/dist/esm/components/mui-field/index.js +10 -7
- package/dist/esm/components/mui-file-upload/index.js +5 -4
- package/dist/esm/components/mui-grid/index.js +1 -1
- package/dist/esm/components/mui-heading/index.js +1 -1
- package/dist/esm/components/mui-icons/accessibility/index.js +4 -4
- package/dist/esm/components/mui-icons/add/index.js +5 -5
- package/dist/esm/components/mui-icons/attention/index.js +5 -5
- package/dist/esm/components/mui-icons/check/index.js +6 -6
- package/dist/esm/components/mui-icons/close/index.js +2 -2
- package/dist/esm/components/mui-icons/down-arrow-circle/index.js +55 -0
- package/dist/esm/components/mui-icons/down-chevron/index.js +2 -2
- package/dist/esm/components/mui-icons/ellipsis/index.js +55 -0
- package/dist/esm/components/mui-icons/globe/index.js +5 -5
- package/dist/esm/components/mui-icons/grid/index.js +1 -1
- package/dist/esm/components/mui-icons/index.js +2 -0
- package/dist/esm/components/mui-icons/info/index.js +2 -2
- package/dist/esm/components/mui-icons/left-arrow/index.js +1 -1
- package/dist/esm/components/mui-icons/left-chevron/index.js +1 -1
- package/dist/esm/components/mui-icons/left-sidebar/index.js +6 -6
- package/dist/esm/components/mui-icons/menu/index.js +6 -6
- package/dist/esm/components/mui-icons/message/index.js +6 -6
- package/dist/esm/components/mui-icons/moon/index.js +2 -2
- package/dist/esm/components/mui-icons/notification/index.js +2 -2
- package/dist/esm/components/mui-icons/right-chevron/index.js +5 -5
- package/dist/esm/components/mui-icons/stop/index.js +2 -2
- package/dist/esm/components/mui-icons/subtract/index.js +7 -7
- package/dist/esm/components/mui-icons/sun/index.js +6 -6
- package/dist/esm/components/mui-icons/toggle/index.js +1 -1
- package/dist/esm/components/mui-icons/up-arrow/index.js +4 -4
- package/dist/esm/components/mui-icons/up-chevron/index.js +1 -1
- package/dist/esm/components/mui-icons/warning/index.js +2 -2
- package/dist/esm/components/mui-image/index.js +1 -1
- package/dist/esm/components/mui-input/index.js +21 -27
- package/dist/esm/components/mui-link/index.js +13 -17
- package/dist/esm/components/mui-list/item/index.js +1 -1
- package/dist/esm/components/mui-list/list/index.js +1 -1
- package/dist/esm/components/mui-message/index.js +14 -9
- package/dist/esm/components/mui-quote/index.js +1 -1
- package/dist/esm/components/mui-responsive/index.js +1 -1
- package/dist/esm/components/mui-rule/index.js +5 -5
- package/dist/esm/components/mui-select/index.js +28 -27
- package/dist/esm/components/mui-slat/accessory/index.js +29 -0
- package/dist/esm/components/mui-slat/index.js +2 -21
- package/dist/esm/components/mui-slat/slat/index.js +139 -0
- package/dist/esm/components/mui-smart-card/index.js +14 -15
- package/dist/esm/components/mui-stack/hstack/index.js +1 -1
- package/dist/esm/components/mui-stack/vstack/index.js +1 -1
- package/dist/esm/components/mui-switch/index.js +3 -9
- package/dist/esm/components/mui-table/cell/index.js +1 -1
- package/dist/esm/components/mui-table/row/index.js +1 -1
- package/dist/esm/components/mui-table/row-group/index.js +1 -1
- package/dist/esm/components/mui-table/table/index.js +1 -1
- package/dist/esm/components/mui-tabs/controller/index.js +1 -1
- package/dist/esm/components/mui-tabs/item/index.js +2 -2
- package/dist/esm/components/mui-tabs/panel/index.js +1 -1
- package/dist/esm/components/mui-tabs/tab-bar/index.js +1 -1
- package/dist/esm/css/mui-tokens.css +19 -1
- package/dist/esm/index.js +8 -5
- package/dist/types/components/mui-accordion/block/index.d.ts +1 -1
- package/dist/types/components/mui-accordion/inline/index.d.ts +1 -1
- package/dist/types/components/mui-alert/index.d.ts +5 -1
- package/dist/types/components/mui-field/index.d.ts +3 -1
- package/dist/types/components/mui-file-upload/index.d.ts +1 -1
- package/dist/types/components/mui-icons/down-arrow-circle.d.ts +1 -0
- package/dist/types/components/mui-icons/ellipsis.d.ts +1 -0
- package/dist/types/components/mui-icons/index.d.ts +2 -0
- package/dist/types/components/mui-message/index.d.ts +6 -1
- package/dist/types/components/mui-select/index.d.ts +1 -1
- package/dist/types/components/mui-slat/accessory/index.d.ts +1 -0
- package/dist/types/components/mui-slat/index.d.ts +2 -1
- package/dist/types/components/mui-slat/slat/index.d.ts +3 -0
- package/dist/types/components/mui-smart-card/index.d.ts +2 -1
- package/dist/types/index.d.ts +4 -1
- package/package.json +17 -1
- package/readme.md +19 -0
|
@@ -1,10 +1,37 @@
|
|
|
1
|
-
const
|
|
1
|
+
const a = {
|
|
2
2
|
alert: ["alert", "success", "info", "warning", "error", "message", "banner", "notification"],
|
|
3
3
|
message: ["message", "notice", "notification", "alert", "info", "positive", "neutral", "warning", "attention"],
|
|
4
4
|
badge: ["badge", "label", "tag", "notification"],
|
|
5
5
|
button: ["button", "click", "action", "submit", "cta", "primary", "secondary", "tertiary", "attention"],
|
|
6
6
|
"button-group": ["button group", "buttons", "actions", "group", "right", "align"],
|
|
7
|
-
icon: [
|
|
7
|
+
icon: [
|
|
8
|
+
"icon",
|
|
9
|
+
"glyph",
|
|
10
|
+
"symbol",
|
|
11
|
+
"add",
|
|
12
|
+
"plus",
|
|
13
|
+
"close",
|
|
14
|
+
"x",
|
|
15
|
+
"check",
|
|
16
|
+
"tick",
|
|
17
|
+
"warning",
|
|
18
|
+
"alert",
|
|
19
|
+
"chevron",
|
|
20
|
+
"arrow",
|
|
21
|
+
"accessibility",
|
|
22
|
+
"sun",
|
|
23
|
+
"moon",
|
|
24
|
+
"info",
|
|
25
|
+
"stop",
|
|
26
|
+
"globe",
|
|
27
|
+
"menu",
|
|
28
|
+
"ellipsis",
|
|
29
|
+
"grid",
|
|
30
|
+
"message",
|
|
31
|
+
"sidebar",
|
|
32
|
+
"subtract",
|
|
33
|
+
"minus"
|
|
34
|
+
],
|
|
8
35
|
link: ["link", "anchor", "hyperlink", "navigation", "primary", "secondary", "tertiary", "attention"],
|
|
9
36
|
tab: ["tab", "tab bar", "tab controller", "tab panel", "navigation", "tabs"],
|
|
10
37
|
carousel: ["carousel", "slider", "carousel controller", "carousel panel", "carousel item", "carousel tabs"],
|
|
@@ -16,8 +43,81 @@ const t = {
|
|
|
16
43
|
rule: ["rule", "divider", "separator", "line", "hr"],
|
|
17
44
|
heading: ["heading", "title", "h1", "h2", "h3", "level"],
|
|
18
45
|
body: ["body", "text", "paragraph", "copy"],
|
|
19
|
-
list: ["list", "items", "ul", "li"]
|
|
46
|
+
list: ["list", "items", "ul", "li"],
|
|
47
|
+
slat: [
|
|
48
|
+
"slat",
|
|
49
|
+
"row",
|
|
50
|
+
"summary",
|
|
51
|
+
"item row",
|
|
52
|
+
"preview",
|
|
53
|
+
"cell",
|
|
54
|
+
"list item",
|
|
55
|
+
"entry",
|
|
56
|
+
"stacked",
|
|
57
|
+
"slat header",
|
|
58
|
+
"slat action",
|
|
59
|
+
"slat content"
|
|
60
|
+
],
|
|
61
|
+
table: [
|
|
62
|
+
"table",
|
|
63
|
+
"data table",
|
|
64
|
+
"grid",
|
|
65
|
+
"data grid",
|
|
66
|
+
"spreadsheet",
|
|
67
|
+
"rows",
|
|
68
|
+
"columns",
|
|
69
|
+
"cells",
|
|
70
|
+
"header row",
|
|
71
|
+
"data",
|
|
72
|
+
"record",
|
|
73
|
+
"tabular"
|
|
74
|
+
],
|
|
75
|
+
smartCard: [
|
|
76
|
+
"card",
|
|
77
|
+
"smart card",
|
|
78
|
+
"debit",
|
|
79
|
+
"credit",
|
|
80
|
+
"reward",
|
|
81
|
+
"payment",
|
|
82
|
+
"bank",
|
|
83
|
+
"plain",
|
|
84
|
+
"animated",
|
|
85
|
+
"inverted",
|
|
86
|
+
"frozen",
|
|
87
|
+
"logo",
|
|
88
|
+
"partner",
|
|
89
|
+
"network",
|
|
90
|
+
"diamond",
|
|
91
|
+
"premier",
|
|
92
|
+
"sapphire",
|
|
93
|
+
"crystal",
|
|
94
|
+
"visa",
|
|
95
|
+
"mastercard",
|
|
96
|
+
"amex",
|
|
97
|
+
"payment network",
|
|
98
|
+
"background image",
|
|
99
|
+
"bg-image",
|
|
100
|
+
"background color",
|
|
101
|
+
"bg-color",
|
|
102
|
+
"number",
|
|
103
|
+
"type",
|
|
104
|
+
"variant",
|
|
105
|
+
"state"
|
|
106
|
+
],
|
|
107
|
+
// COMPOSITIONS
|
|
108
|
+
wallet: [
|
|
109
|
+
"wallet",
|
|
110
|
+
"smart card",
|
|
111
|
+
"debit card",
|
|
112
|
+
"transaction list",
|
|
113
|
+
"banking",
|
|
114
|
+
"spending",
|
|
115
|
+
"activity",
|
|
116
|
+
"statements",
|
|
117
|
+
"account",
|
|
118
|
+
"balance"
|
|
119
|
+
]
|
|
20
120
|
};
|
|
21
121
|
export {
|
|
22
|
-
|
|
122
|
+
a as muiKeywords
|
|
23
123
|
};
|
|
@@ -3,28 +3,7 @@ const t = [
|
|
|
3
3
|
role: "system",
|
|
4
4
|
content: "You are an assistant that converts UI prompts into MUI-style web components using custom tags like <mui-v-stack> and <mui-button>. Each user message may include tags like [button], [card], etc. Use these to help determine intent."
|
|
5
5
|
},
|
|
6
|
-
|
|
7
|
-
{
|
|
8
|
-
role: "assistant",
|
|
9
|
-
content: `<mui-v-stack space="var(--space-400)">
|
|
10
|
-
<mui-card>...</mui-card>
|
|
11
|
-
<mui-card>...</mui-card>
|
|
12
|
-
</mui-v-stack>`
|
|
13
|
-
},
|
|
14
|
-
// CONTAINER
|
|
15
|
-
{ role: "user", content: "[layout] Create a small container" },
|
|
16
|
-
{ role: "assistant", content: "<mui-container small>...</mui-container>" },
|
|
17
|
-
{ role: "user", content: "[layout] Create a medium container" },
|
|
18
|
-
{ role: "assistant", content: "<mui-container medium>...</mui-container>" },
|
|
19
|
-
{ role: "user", content: "[layout] Create a large container" },
|
|
20
|
-
{ role: "assistant", content: "<mui-container large>...</mui-container>" },
|
|
21
|
-
{ role: "user", content: "[layout] Create a fluid container" },
|
|
22
|
-
{ role: "assistant", content: "<mui-container fluid>...</mui-container>" },
|
|
23
|
-
{ role: "user", content: "[layout] Create a small container and centered" },
|
|
24
|
-
{ role: "assistant", content: "<mui-container small center>...</mui-container>" },
|
|
25
|
-
{ role: "user", content: "[button] Create a primary button" },
|
|
26
|
-
{ role: "assistant", content: "<mui-button variant='primary'>...</mui-button>" },
|
|
27
|
-
// NEW TAGGED PROMPTS
|
|
6
|
+
// FIELD
|
|
28
7
|
{
|
|
29
8
|
role: "user",
|
|
30
9
|
content: "[input] Add a field to enter an email address"
|
|
@@ -34,7 +13,105 @@ const t = [
|
|
|
34
13
|
content: `<mui-field label="Email">
|
|
35
14
|
<mui-input type="email" placeholder="you@example.com"></mui-input>
|
|
36
15
|
</mui-field>`
|
|
16
|
+
},
|
|
17
|
+
// SLAT
|
|
18
|
+
{
|
|
19
|
+
role: "user",
|
|
20
|
+
content: "[slat] Create a default slat with heading and body"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
role: "assistant",
|
|
24
|
+
content: `<mui-slat>
|
|
25
|
+
<mui-heading slot="start" size="5">...</mui-heading>
|
|
26
|
+
<mui-h-stack slot="end">
|
|
27
|
+
<mui-body>...</mui-body>
|
|
28
|
+
</mui-h-stack>
|
|
29
|
+
</mui-slat>`
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
role: "user",
|
|
33
|
+
content: "[slat] Create a header slat"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
role: "assistant",
|
|
37
|
+
content: `<mui-slat variant="header">
|
|
38
|
+
<mui-heading slot="start" size="6">Heading</mui-heading>
|
|
39
|
+
<mui-h-stack slot="end" alignX="end">
|
|
40
|
+
<mui-body size="small">End slot</mui-body>
|
|
41
|
+
</mui-h-stack>
|
|
42
|
+
</mui-slat>`
|
|
37
43
|
},
|
|
44
|
+
{
|
|
45
|
+
role: "user",
|
|
46
|
+
content: "[slat] Create a row slat with vertical stacks"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
role: "assistant",
|
|
50
|
+
content: `<mui-slat variant="row">
|
|
51
|
+
<mui-v-stack slot="start">
|
|
52
|
+
<mui-body size="medium" weight="bold">...</mui-body>
|
|
53
|
+
<mui-body size="small">...</mui-body>
|
|
54
|
+
</mui-v-stack>
|
|
55
|
+
<mui-v-stack slot="end" alignX="end">
|
|
56
|
+
<mui-body size="small">...</mui-body>
|
|
57
|
+
<mui-body size="small">...</mui-body>
|
|
58
|
+
</mui-v-stack>
|
|
59
|
+
</mui-slat>`
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
role: "user",
|
|
63
|
+
content: "[slat] Create a row slat with an icon accessory"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
role: "assistant",
|
|
67
|
+
content: `<mui-slat variant="row">
|
|
68
|
+
<mui-slat-accessory slot="accessory">
|
|
69
|
+
<mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
|
|
70
|
+
</mui-slat-accessory>
|
|
71
|
+
<mui-v-stack slot="start" space="0">
|
|
72
|
+
<mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
|
|
73
|
+
<mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
|
|
74
|
+
</mui-v-stack>
|
|
75
|
+
<mui-v-stack slot="end" space="0" alignX="end">
|
|
76
|
+
<mui-body size="x-small">Pending</mui-body>
|
|
77
|
+
<mui-body size="small" weight="bold">-$8.12</mui-body>
|
|
78
|
+
</mui-v-stack>
|
|
79
|
+
</mui-slat>`
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
role: "user",
|
|
83
|
+
content: "[card] Create a card with a slat header and action rows"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
role: "assistant",
|
|
87
|
+
content: `<mui-card>
|
|
88
|
+
<mui-card-body>
|
|
89
|
+
<mui-slat variant="header">
|
|
90
|
+
<mui-heading slot="start" size="6">Today</mui-heading>
|
|
91
|
+
<mui-h-stack slot="end" alignX="end">
|
|
92
|
+
<mui-body size="small">22 July 2025</mui-body>
|
|
93
|
+
</mui-h-stack>
|
|
94
|
+
</mui-slat>
|
|
95
|
+
<mui-rule></mui-rule>
|
|
96
|
+
<mui-v-stack space="var(--space-000)" style="margin-top: var(--space-200)">
|
|
97
|
+
<mui-slat variant="action">
|
|
98
|
+
<mui-slat-accessory slot="accessory">
|
|
99
|
+
<mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
|
|
100
|
+
</mui-slat-accessory>
|
|
101
|
+
<mui-v-stack slot="start" space="0">
|
|
102
|
+
<mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
|
|
103
|
+
<mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
|
|
104
|
+
</mui-v-stack>
|
|
105
|
+
<mui-v-stack slot="end" space="0">
|
|
106
|
+
<mui-body size="x-small">Pending</mui-body>
|
|
107
|
+
<mui-body size="small" weight="bold">-$8.12</mui-body>
|
|
108
|
+
</mui-v-stack>
|
|
109
|
+
</mui-slat>
|
|
110
|
+
</mui-v-stack>
|
|
111
|
+
</mui-card-body>
|
|
112
|
+
</mui-card>`
|
|
113
|
+
},
|
|
114
|
+
// TABLE
|
|
38
115
|
{
|
|
39
116
|
role: "user",
|
|
40
117
|
content: "[table] Show a table with 3 columns and 2 rows"
|
|
@@ -63,6 +140,7 @@ const t = [
|
|
|
63
140
|
</mui-row-group>
|
|
64
141
|
</mui-table>`
|
|
65
142
|
},
|
|
143
|
+
// ACCORDION
|
|
66
144
|
{
|
|
67
145
|
role: "user",
|
|
68
146
|
content: "[accordion] Add a block accordion with two sections"
|
|
@@ -78,14 +156,54 @@ const t = [
|
|
|
78
156
|
</mui-accordion-block>
|
|
79
157
|
</mui-accordion-group>`
|
|
80
158
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
},
|
|
159
|
+
// ICONS
|
|
160
|
+
{ role: "user", content: "[icon] Add an accessibility icon" },
|
|
161
|
+
{ role: "assistant", content: "<mui-icon-accessibility></mui-icon-accessibility>" },
|
|
162
|
+
{ role: "user", content: "[icon] Add an add icon" },
|
|
163
|
+
{ role: "assistant", content: "<mui-icon-add></mui-icon-add>" },
|
|
164
|
+
{ role: "user", content: "[icon] Add a close icon" },
|
|
165
|
+
{ role: "assistant", content: "<mui-icon-close></mui-icon-close>" },
|
|
166
|
+
{ role: "user", content: "[icon] Add an up chevron icon" },
|
|
167
|
+
{ role: "assistant", content: "<mui-icon-up-chevron></mui-icon-up-chevron>" },
|
|
168
|
+
{ role: "user", content: "[icon] Add a down chevron icon" },
|
|
169
|
+
{ role: "assistant", content: "<mui-icon-down-chevron></mui-icon-down-chevron>" },
|
|
170
|
+
{ role: "user", content: "[icon] Add a left sidebar icon" },
|
|
171
|
+
{ role: "assistant", content: "<mui-icon-left-sidebar></mui-icon-left-sidebar>" },
|
|
172
|
+
{ role: "user", content: "[icon] Add a left chevron icon" },
|
|
173
|
+
{ role: "assistant", content: "<mui-icon-left-chevron></mui-icon-left-chevron>" },
|
|
174
|
+
{ role: "user", content: "[icon] Add a right chevron icon" },
|
|
175
|
+
{ role: "assistant", content: "<mui-icon-right-chevron></mui-icon-right-chevron>" },
|
|
176
|
+
{ role: "user", content: "[icon] Add a grid icon" },
|
|
177
|
+
{ role: "assistant", content: "<mui-icon-grid></mui-icon-grid>" },
|
|
178
|
+
{ role: "user", content: "[icon] Add a left arrow icon" },
|
|
179
|
+
{ role: "assistant", content: "<mui-icon-left-arrow></mui-icon-left-arrow>" },
|
|
180
|
+
{ role: "user", content: "[icon] Add a menu icon" },
|
|
181
|
+
{ role: "assistant", content: "<mui-icon-menu></mui-icon-menu>" },
|
|
182
|
+
{ role: "user", content: "[icon] Add a message icon" },
|
|
183
|
+
{ role: "assistant", content: "<mui-icon-message></mui-icon-message>" },
|
|
184
|
+
{ role: "user", content: "[icon] Add a moon icon" },
|
|
185
|
+
{ role: "assistant", content: "<mui-icon-moon></mui-icon-moon>" },
|
|
186
|
+
{ role: "user", content: "[icon] Add a sun icon" },
|
|
187
|
+
{ role: "assistant", content: "<mui-icon-sun></mui-icon-sun>" },
|
|
188
|
+
{ role: "user", content: "[icon] Add a subtract icon" },
|
|
189
|
+
{ role: "assistant", content: "<mui-icon-subtract></mui-icon-subtract>" },
|
|
190
|
+
{ role: "user", content: "[icon] Add a check icon" },
|
|
191
|
+
{ role: "assistant", content: "<mui-icon-check></mui-icon-check>" },
|
|
192
|
+
{ role: "user", content: "[icon] Add an info icon" },
|
|
193
|
+
{ role: "assistant", content: "<mui-icon-info></mui-icon-info>" },
|
|
194
|
+
{ role: "user", content: "[icon] Add a warning icon" },
|
|
195
|
+
{ role: "assistant", content: "<mui-icon-warning></mui-icon-warning>" },
|
|
196
|
+
{ role: "user", content: "[icon] Add an attention icon" },
|
|
197
|
+
{ role: "assistant", content: "<mui-icon-attention></mui-icon-attention>" },
|
|
198
|
+
{ role: "user", content: "[icon] Add a globe icon" },
|
|
199
|
+
{ role: "assistant", content: "<mui-icon-globe></mui-icon-globe>" },
|
|
200
|
+
{ role: "user", content: "[icon] Add a stop icon" },
|
|
201
|
+
{ role: "assistant", content: "<mui-icon-stop></mui-icon-stop>" },
|
|
202
|
+
{ role: "user", content: "[icon] Add a down arrow circle icon" },
|
|
203
|
+
{ role: "assistant", content: "<mui-icon-down-arrow-circle></mui-icon-down-arrow-circle>" },
|
|
204
|
+
{ role: "user", content: "[icon] Add an ellipsis icon" },
|
|
205
|
+
{ role: "assistant", content: "<mui-icon-ellipsis></mui-icon-ellipsis>" },
|
|
206
|
+
// IMAGE
|
|
89
207
|
{
|
|
90
208
|
role: "user",
|
|
91
209
|
content: "[image] Show an image with a caption"
|
|
@@ -97,6 +215,106 @@ const t = [
|
|
|
97
215
|
<figcaption slot="caption">This is a caption</figcaption>
|
|
98
216
|
</mui-image>`
|
|
99
217
|
},
|
|
218
|
+
// SMART CARD
|
|
219
|
+
{ role: "user", content: "[smart-card] Basic plain card with number and logo" },
|
|
220
|
+
{
|
|
221
|
+
role: "assistant",
|
|
222
|
+
content: `<mui-smart-card
|
|
223
|
+
number="1234"
|
|
224
|
+
type="Debit"
|
|
225
|
+
logo="./images/card/image-220.png"
|
|
226
|
+
partner="./images/networks/visa-black.svg"
|
|
227
|
+
variant="plain"
|
|
228
|
+
/>`
|
|
229
|
+
},
|
|
230
|
+
{ role: "user", content: "[smart-card] Plain card with inverted style" },
|
|
231
|
+
{
|
|
232
|
+
role: "assistant",
|
|
233
|
+
content: `<mui-smart-card
|
|
234
|
+
inverted
|
|
235
|
+
number="1234"
|
|
236
|
+
type="Debit"
|
|
237
|
+
logo="./images/card/image-220.png"
|
|
238
|
+
partner="./images/card/visa-white.svg"
|
|
239
|
+
variant="plain"
|
|
240
|
+
/>`
|
|
241
|
+
},
|
|
242
|
+
{ role: "user", content: "[smart-card] Animated card with background image" },
|
|
243
|
+
{
|
|
244
|
+
role: "assistant",
|
|
245
|
+
content: `<mui-smart-card
|
|
246
|
+
number="1234"
|
|
247
|
+
type="Debit"
|
|
248
|
+
bg-image="./images/mesh/buttercup.png"
|
|
249
|
+
logo="./images/card/image-220.png"
|
|
250
|
+
partner="./images/networks/visa-black.svg"
|
|
251
|
+
variant="animated"
|
|
252
|
+
/>`
|
|
253
|
+
},
|
|
254
|
+
{ role: "user", content: "[smart-card] Card with custom logo size" },
|
|
255
|
+
{
|
|
256
|
+
role: "assistant",
|
|
257
|
+
content: `<mui-smart-card
|
|
258
|
+
logo="./images/guru/guides.svg"
|
|
259
|
+
logo-height="80"
|
|
260
|
+
/>`
|
|
261
|
+
},
|
|
262
|
+
{ role: "user", content: "[smart-card] Frozen card state" },
|
|
263
|
+
{
|
|
264
|
+
role: "assistant",
|
|
265
|
+
content: `<mui-smart-card
|
|
266
|
+
state="frozen"
|
|
267
|
+
number="1234"
|
|
268
|
+
type="Debit"
|
|
269
|
+
logo="./images/card/image-220.png"
|
|
270
|
+
partner="./images/networks/visa-black.svg"
|
|
271
|
+
variant="plain"
|
|
272
|
+
/>`
|
|
273
|
+
},
|
|
274
|
+
{ role: "user", content: "[smart-card] Card with background color" },
|
|
275
|
+
{
|
|
276
|
+
role: "assistant",
|
|
277
|
+
content: `<mui-smart-card
|
|
278
|
+
variant="plain"
|
|
279
|
+
bg-color="#a4fc67"
|
|
280
|
+
number="1234"
|
|
281
|
+
type="Debit"
|
|
282
|
+
logo="./images/card/image-220.png"
|
|
283
|
+
partner="./images/networks/visa-black.svg"
|
|
284
|
+
/>`
|
|
285
|
+
},
|
|
286
|
+
{ role: "user", content: "[smart-card] Card with background image (non-animated)" },
|
|
287
|
+
{
|
|
288
|
+
role: "assistant",
|
|
289
|
+
content: `<mui-smart-card
|
|
290
|
+
variant="plain"
|
|
291
|
+
bg-image="./images/card/image-395.png"
|
|
292
|
+
number="1234"
|
|
293
|
+
type="Debit"
|
|
294
|
+
logo="./images/card/image-220.png"
|
|
295
|
+
partner="./images/networks/visa-black.svg"
|
|
296
|
+
/>`
|
|
297
|
+
},
|
|
298
|
+
{ role: "user", content: "[smart-card] Premier reward card" },
|
|
299
|
+
{
|
|
300
|
+
role: "assistant",
|
|
301
|
+
content: `<mui-smart-card
|
|
302
|
+
type="Premier"
|
|
303
|
+
partner="/emerald.svg"
|
|
304
|
+
bg-image="./images/jal/premier.png"
|
|
305
|
+
/>`
|
|
306
|
+
},
|
|
307
|
+
{ role: "user", content: "[smart-card] Diamond reward card (inverted)" },
|
|
308
|
+
{
|
|
309
|
+
role: "assistant",
|
|
310
|
+
content: `<mui-smart-card
|
|
311
|
+
inverted
|
|
312
|
+
type="Diamond"
|
|
313
|
+
partner="/emerald.svg"
|
|
314
|
+
bg-image="./images/jal/diamond.png"
|
|
315
|
+
/>`
|
|
316
|
+
},
|
|
317
|
+
// STACK
|
|
100
318
|
{
|
|
101
319
|
role: "user",
|
|
102
320
|
content: "[stack] Create a horizontal stack with two cards and spacing"
|
|
@@ -119,6 +337,7 @@ const t = [
|
|
|
119
337
|
<mui-card>...</mui-card>
|
|
120
338
|
</mui-v-stack>`
|
|
121
339
|
},
|
|
340
|
+
// GRID
|
|
122
341
|
{
|
|
123
342
|
role: "user",
|
|
124
343
|
content: "[layout] Create a grid with 2 columns and card content"
|
|
@@ -130,6 +349,7 @@ const t = [
|
|
|
130
349
|
<mui-card>...</mui-card>
|
|
131
350
|
</mui-grid>`
|
|
132
351
|
},
|
|
352
|
+
// RESPONSIVE
|
|
133
353
|
{
|
|
134
354
|
role: "user",
|
|
135
355
|
content: "[responsive] Show a div above 600px and a different one below"
|
|
@@ -141,6 +361,20 @@ const t = [
|
|
|
141
361
|
<div slot="showBelow">...</div>
|
|
142
362
|
</mui-responsive>`
|
|
143
363
|
},
|
|
364
|
+
// CONTAINER
|
|
365
|
+
{ role: "user", content: "[layout] Create a small container" },
|
|
366
|
+
{ role: "assistant", content: "<mui-container small>...</mui-container>" },
|
|
367
|
+
{ role: "user", content: "[layout] Create a medium container" },
|
|
368
|
+
{ role: "assistant", content: "<mui-container medium>...</mui-container>" },
|
|
369
|
+
{ role: "user", content: "[layout] Create a large container" },
|
|
370
|
+
{ role: "assistant", content: "<mui-container large>...</mui-container>" },
|
|
371
|
+
{ role: "user", content: "[layout] Create a fluid container" },
|
|
372
|
+
{ role: "assistant", content: "<mui-container fluid>...</mui-container>" },
|
|
373
|
+
{ role: "user", content: "[layout] Create a small container and centered" },
|
|
374
|
+
{ role: "assistant", content: "<mui-container small center>...</mui-container>" },
|
|
375
|
+
{ role: "user", content: "[button] Create a primary button" },
|
|
376
|
+
{ role: "assistant", content: "<mui-button variant='primary'>...</mui-button>" },
|
|
377
|
+
// RULE
|
|
144
378
|
{
|
|
145
379
|
role: "user",
|
|
146
380
|
content: "[rule] Insert a horizontal divider"
|
|
@@ -157,6 +391,15 @@ const t = [
|
|
|
157
391
|
role: "assistant",
|
|
158
392
|
content: '<mui-rule direction="vertical" length="100px"></mui-rule>'
|
|
159
393
|
},
|
|
394
|
+
// CARD
|
|
395
|
+
{ role: "user", content: "[card] Create a vertical stack with two cards" },
|
|
396
|
+
{
|
|
397
|
+
role: "assistant",
|
|
398
|
+
content: `<mui-v-stack space="var(--space-400)">
|
|
399
|
+
<mui-card>...</mui-card>
|
|
400
|
+
<mui-card>...</mui-card>
|
|
401
|
+
</mui-v-stack>`
|
|
402
|
+
},
|
|
160
403
|
{
|
|
161
404
|
role: "user",
|
|
162
405
|
content: "[card] Create a card with heading and footer actions"
|
|
@@ -217,12 +460,12 @@ const t = [
|
|
|
217
460
|
role: "system",
|
|
218
461
|
content: "You are an assistant that converts UI prompts into MUI-style web components using custom tags like <mui-button>, <mui-alert>, <mui-message>, <mui-badge>, <mui-tab-controller>, and <mui-carousel-controller>. Each user message may include tags like [button], [alert], [tab], etc. Use these to help determine intent."
|
|
219
462
|
},
|
|
220
|
-
//
|
|
463
|
+
// ALERTS
|
|
221
464
|
{ role: "user", content: "[alert] Show a success alert" },
|
|
222
465
|
{ role: "assistant", content: '<mui-alert variant="success">...</mui-alert>' },
|
|
223
466
|
{ role: "user", content: "[alert] Show an error alert" },
|
|
224
467
|
{ role: "assistant", content: '<mui-alert variant="error">...</mui-alert>' },
|
|
225
|
-
//
|
|
468
|
+
// MESSAGES
|
|
226
469
|
{ role: "user", content: "[message] Create an info message with heading and body" },
|
|
227
470
|
{
|
|
228
471
|
role: "assistant",
|
|
@@ -248,10 +491,10 @@ const t = [
|
|
|
248
491
|
</mui-list>
|
|
249
492
|
</mui-message>`
|
|
250
493
|
},
|
|
251
|
-
//
|
|
494
|
+
// BADGES
|
|
252
495
|
{ role: "user", content: "[badge] Show a warning badge" },
|
|
253
496
|
{ role: "assistant", content: '<mui-badge variant="warning">...</mui-badge>' },
|
|
254
|
-
//
|
|
497
|
+
// BUTTON
|
|
255
498
|
{ role: "user", content: "[button] Create a primary button" },
|
|
256
499
|
{ role: "assistant", content: '<mui-button variant="primary">...</mui-button>' },
|
|
257
500
|
{ role: "user", content: "[button-group] Create a right-aligned button group with cancel and submit" },
|
|
@@ -269,12 +512,12 @@ const t = [
|
|
|
269
512
|
<mui-icon-add></mui-icon-add>
|
|
270
513
|
</mui-button>`
|
|
271
514
|
},
|
|
272
|
-
//
|
|
515
|
+
// LINK
|
|
273
516
|
{ role: "user", content: "[link] Create a primary link" },
|
|
274
517
|
{ role: "assistant", content: '<mui-link variant="primary" href="links.html">...</mui-link>' },
|
|
275
518
|
{ role: "user", content: "[link] Create a small sized link" },
|
|
276
519
|
{ role: "assistant", content: '<mui-link size="small">Link text</mui-link>' },
|
|
277
|
-
//
|
|
520
|
+
// TABS
|
|
278
521
|
{ role: "user", content: "[tab] Create a tab controller with three tabs" },
|
|
279
522
|
{
|
|
280
523
|
role: "assistant",
|
|
@@ -289,7 +532,7 @@ const t = [
|
|
|
289
532
|
<mui-tab-panel item="item3">Content 3</mui-tab-panel>
|
|
290
533
|
</mui-tab-controller>`
|
|
291
534
|
},
|
|
292
|
-
//
|
|
535
|
+
// CAROUSEL
|
|
293
536
|
{ role: "user", content: "[carousel] Create a carousel controller with tabs and panels" },
|
|
294
537
|
{
|
|
295
538
|
role: "assistant",
|
|
@@ -308,6 +551,118 @@ const t = [
|
|
|
308
551
|
</mui-carousel-panel>
|
|
309
552
|
<!-- Add other panels -->
|
|
310
553
|
</mui-carousel-controller>`
|
|
554
|
+
},
|
|
555
|
+
// WALLET COMPOSITION
|
|
556
|
+
{
|
|
557
|
+
role: "user",
|
|
558
|
+
content: "[wallet] Create a wallet layout with a smart card and tabbed transactions"
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
role: "assistant",
|
|
562
|
+
content: `<mui-v-stack alignX="stretch" slot="body" style="max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)">
|
|
563
|
+
<mui-smart-card
|
|
564
|
+
variant="animated"
|
|
565
|
+
partner="\${Visa}"
|
|
566
|
+
type="Debit"
|
|
567
|
+
number="1234"
|
|
568
|
+
logo="\${Mui}"
|
|
569
|
+
logo-height="100"
|
|
570
|
+
bg-image="\${Snow}"
|
|
571
|
+
></mui-smart-card>
|
|
572
|
+
|
|
573
|
+
<mui-tab-controller>
|
|
574
|
+
<mui-v-stack alignX="stretch" style="max-width: 100%;" space="var(--space-300)">
|
|
575
|
+
<mui-tab-bar>
|
|
576
|
+
<mui-tab-item active id="item1">Transactions</mui-tab-item>
|
|
577
|
+
<mui-tab-item id="item2">Statements</mui-tab-item>
|
|
578
|
+
</mui-tab-bar>
|
|
579
|
+
|
|
580
|
+
<mui-tab-panel item="item1">
|
|
581
|
+
<mui-v-stack alignX="stretch" space="var(--space-000)">
|
|
582
|
+
<mui-slat variant="header">
|
|
583
|
+
<mui-heading slot="start" size="6">Today</mui-heading>
|
|
584
|
+
<mui-h-stack slot="end" alignX="end">
|
|
585
|
+
<mui-body size="small">22 July 2025</mui-body>
|
|
586
|
+
</mui-h-stack>
|
|
587
|
+
</mui-slat>
|
|
588
|
+
|
|
589
|
+
<mui-v-stack space="var(--space-025)">
|
|
590
|
+
<mui-slat variant="row">
|
|
591
|
+
<mui-v-stack slot="start" space="0">
|
|
592
|
+
<mui-body size="medium" weight="bold">Espresso Bar</mui-body>
|
|
593
|
+
<mui-body size="small">Food & Drink</mui-body>
|
|
594
|
+
</mui-v-stack>
|
|
595
|
+
<mui-v-stack space="0" slot="end" alignX="end">
|
|
596
|
+
<mui-body size="small">Pending</mui-body>
|
|
597
|
+
<mui-body size="small">-$8.12</mui-body>
|
|
598
|
+
</mui-v-stack>
|
|
599
|
+
</mui-slat>
|
|
600
|
+
<mui-slat variant="row">
|
|
601
|
+
<mui-v-stack slot="start" space="0">
|
|
602
|
+
<mui-body size="medium" weight="bold">Apple App Store</mui-body>
|
|
603
|
+
<mui-body size="small">Entertainment</mui-body>
|
|
604
|
+
</mui-v-stack>
|
|
605
|
+
<mui-v-stack space="0" slot="end" alignX="end">
|
|
606
|
+
<mui-body size="small">Pending</mui-body>
|
|
607
|
+
<mui-body size="small">-$4.99</mui-body>
|
|
608
|
+
</mui-v-stack>
|
|
609
|
+
</mui-slat>
|
|
610
|
+
</mui-v-stack>
|
|
611
|
+
|
|
612
|
+
<mui-slat variant="header">
|
|
613
|
+
<mui-heading slot="start" size="6">Yesterday</mui-heading>
|
|
614
|
+
<mui-h-stack slot="end" alignX="end">
|
|
615
|
+
<mui-body size="small">21 July 2025</mui-body>
|
|
616
|
+
</mui-h-stack>
|
|
617
|
+
</mui-slat>
|
|
618
|
+
|
|
619
|
+
<mui-v-stack space="var(--space-025)">
|
|
620
|
+
<mui-slat variant="row">
|
|
621
|
+
<mui-v-stack slot="start" space="0">
|
|
622
|
+
<mui-body size="medium" weight="bold">IGA South Yarra</mui-body>
|
|
623
|
+
<mui-body size="small">Groceries</mui-body>
|
|
624
|
+
</mui-v-stack>
|
|
625
|
+
<mui-v-stack space="0" slot="end" alignX="end">
|
|
626
|
+
<mui-body size="small">Pending</mui-body>
|
|
627
|
+
<mui-body size="medium">-$26.89</mui-body>
|
|
628
|
+
</mui-v-stack>
|
|
629
|
+
</mui-slat>
|
|
630
|
+
</mui-v-stack>
|
|
631
|
+
</mui-v-stack>
|
|
632
|
+
</mui-tab-panel>
|
|
633
|
+
|
|
634
|
+
<mui-tab-panel item="item2">
|
|
635
|
+
<mui-v-stack alignX="stretch" space="var(--space-000)">
|
|
636
|
+
<mui-slat variant="header">
|
|
637
|
+
<mui-heading size="6" slot="start">Recents</mui-heading>
|
|
638
|
+
</mui-slat>
|
|
639
|
+
<mui-v-stack space="var(--space-025)">
|
|
640
|
+
<mui-slat variant="action">
|
|
641
|
+
<mui-v-stack space="0" slot="start">
|
|
642
|
+
<mui-body size="medium" weight="bold">Get a Transactions Report</mui-body>
|
|
643
|
+
<mui-body size="small">Generate a PDF of your recent transactions</mui-body>
|
|
644
|
+
</mui-v-stack>
|
|
645
|
+
</mui-slat>
|
|
646
|
+
<mui-slat variant="action">
|
|
647
|
+
<mui-body size="medium" weight="bold" slot="start">21 Mar 2025</mui-body>
|
|
648
|
+
</mui-slat>
|
|
649
|
+
</mui-v-stack>
|
|
650
|
+
<mui-slat variant="header">
|
|
651
|
+
<mui-heading size="6" slot="start">All</mui-heading>
|
|
652
|
+
</mui-slat>
|
|
653
|
+
<mui-v-stack space="var(--space-025)">
|
|
654
|
+
<mui-slat variant="action">
|
|
655
|
+
<mui-body size="medium" weight="bold" slot="start">2025</mui-body>
|
|
656
|
+
</mui-slat>
|
|
657
|
+
<mui-slat variant="action">
|
|
658
|
+
<mui-body size="medium" weight="bold" slot="start">2024</mui-body>
|
|
659
|
+
</mui-slat>
|
|
660
|
+
</mui-v-stack>
|
|
661
|
+
</mui-v-stack>
|
|
662
|
+
</mui-tab-panel>
|
|
663
|
+
</mui-v-stack>
|
|
664
|
+
</mui-tab-controller>
|
|
665
|
+
</mui-v-stack>`
|
|
311
666
|
}
|
|
312
667
|
];
|
|
313
668
|
export {
|
|
@@ -6,11 +6,7 @@ class c extends HTMLElement {
|
|
|
6
6
|
}
|
|
7
7
|
connectedCallback() {
|
|
8
8
|
var o, r;
|
|
9
|
-
if (
|
|
10
|
-
"mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
|
|
11
|
-
), customElements.get("mui-heading") || console.warn(
|
|
12
|
-
"[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
|
|
13
|
-
), !this.shadowRoot) return;
|
|
9
|
+
if (!this.shadowRoot) return;
|
|
14
10
|
const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", s = this.getAttribute("level") || "3", a = this.getAttribute("detail-space"), n = a ? `detail-space-${a}` : "";
|
|
15
11
|
let d = (
|
|
16
12
|
/*html*/
|
|
@@ -169,4 +165,4 @@ class c extends HTMLElement {
|
|
|
169
165
|
this.setOpen(!1);
|
|
170
166
|
}
|
|
171
167
|
}
|
|
172
|
-
customElements.define("mui-accordion-block", c);
|
|
168
|
+
customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", c);
|