@muibook/components 3.0.0 → 4.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.
Files changed (32) hide show
  1. package/dist/esm/agent/prompts/index.js +429 -428
  2. package/dist/esm/components/mui-accordion/block/index.js +26 -9
  3. package/dist/esm/components/mui-accordion/core/index.js +75 -0
  4. package/dist/esm/components/mui-accordion/index.js +1 -0
  5. package/dist/esm/components/mui-badge/index.js +9 -4
  6. package/dist/esm/components/mui-card/body/index.js +31 -17
  7. package/dist/esm/components/mui-card/footer/index.js +17 -11
  8. package/dist/esm/components/mui-checkbox/index.js +186 -0
  9. package/dist/esm/components/mui-chip/index.js +179 -0
  10. package/dist/esm/components/mui-code/index.js +7 -2
  11. package/dist/esm/components/mui-field/index.js +4 -0
  12. package/dist/esm/components/mui-icons/gear/index.js +55 -0
  13. package/dist/esm/components/mui-icons/index.js +1 -0
  14. package/dist/esm/components/mui-icons/toggle/index.js +23 -13
  15. package/dist/esm/components/mui-link/index.js +29 -17
  16. package/dist/esm/components/mui-rule/index.js +14 -14
  17. package/dist/esm/components/mui-slat/group/index.js +136 -0
  18. package/dist/esm/components/mui-slat/index.js +1 -0
  19. package/dist/esm/css/mui-base.css +47 -67
  20. package/dist/esm/css/mui-reset.css +27 -22
  21. package/dist/esm/css/mui-tokens.css +49 -0
  22. package/dist/esm/index.js +9 -4
  23. package/dist/types/components/mui-accordion/core/index.d.ts +1 -0
  24. package/dist/types/components/mui-accordion/index.d.ts +1 -0
  25. package/dist/types/components/mui-checkbox/index.d.ts +1 -0
  26. package/dist/types/components/mui-chip/index.d.ts +1 -0
  27. package/dist/types/components/mui-icons/gear.d.ts +1 -0
  28. package/dist/types/components/mui-icons/index.d.ts +1 -0
  29. package/dist/types/components/mui-slat/group/index.d.ts +1 -0
  30. package/dist/types/components/mui-slat/index.d.ts +1 -0
  31. package/dist/types/index.d.ts +5 -0
  32. package/package.json +21 -1
package/dist/esm/agent/prompts/index.js CHANGED
@@ -1,7 +1,38 @@
1
- const t = [
1
+ const i = [
2
2
  {
3
3
  role: "system",
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."
4
+ content: `
5
+ You are an assistant that converts UI prompts into MUI-style web components using custom tags.
6
+
7
+ Each user message may include tags like [button], [card], etc. Use these to help determine intent.
8
+
9
+ Here is the full list of supported components:
10
+ <mui-field>, <mui-file-upload>, <mui-addon>, <mui-input>, <mui-select>, <mui-switch>,
11
+ <mui-table>, <mui-table-cell>, <mui-table-row>, <mui-table-row-group>,
12
+ <mui-slat>, <mui-slat-accessory>,
13
+ <mui-accordion-group>, <mui-accordion-inline>, <mui-accordion-block>,
14
+ <mui-heading>, <mui-body>, <mui-quote>, <mui-code>, <mui-image>,
15
+ <mui-smart-card>,
16
+ <mui-list>, <mui-list-item>,
17
+ <mui-icon-accessibility>, <mui-icon-add>, <mui-icon-attention>, <mui-icon-check>,
18
+ <mui-icon-close>, <mui-icon-down-chevron>, <mui-icon-globe>, <mui-icon-grid>,
19
+ <mui-icon-info>, <mui-icon-left-arrow>, <mui-icon-left-sidebar>, <mui-icon-left-chevron>,
20
+ <mui-icon-menu>, <mui-icon-message>, <mui-icon-moon>, <mui-icon-notification>,
21
+ <mui-icon-right-chevron>, <mui-icon-stop>, <mui-icon-subtract>, <mui-icon-sun>,
22
+ <mui-icon-toggle>, <mui-icon-up-arrow>, <mui-icon-up-chevron>, <mui-icon-warning>,
23
+ <mui-icon-down-arrow-circle>, <mui-icon-ellipsis>,
24
+ <mui-h-stack>, <mui-v-stack>, <mui-grid>, <mui-responsive>, <mui-container>, <mui-rule>,
25
+ <mui-card>, <mui-card-header>, <mui-card-body>, <mui-card-footer>,
26
+ <mui-alert>, <mui-message>, <mui-badge>,
27
+ <mui-button>, <mui-button-group>, <mui-link>,
28
+ <mui-tabs-controller>, <mui-tabs-item>, <mui-tabs-panel>, <mui-tabs-tab-bar>,
29
+ <mui-carousel-controller>, <mui-carousel-panel>
30
+
31
+ Use only these components when constructing UIs. When helpful, you may suggest new components, but clearly mark them with a comment like:
32
+ <!-- 🚧 Not yet in system, consider adding -->
33
+
34
+ Structure layouts using primitives like <mui-v-stack>, <mui-h-stack>, <mui-grid> or <mui-card-body> when composing forms or groups of fields.
35
+ `
5
36
  },
6
37
  // FIELD
7
38
  {
@@ -21,12 +52,14 @@ const t = [
21
52
  },
22
53
  {
23
54
  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>`
55
+ content: `
56
+ <mui-slat>
57
+ <mui-heading slot="start" size="5">...</mui-heading>
58
+ <mui-h-stack slot="end">
59
+ <mui-body>...</mui-body>
60
+ </mui-h-stack>
61
+ </mui-slat>
62
+ `
30
63
  },
31
64
  {
32
65
  role: "user",
@@ -34,12 +67,13 @@ const t = [
34
67
  },
35
68
  {
36
69
  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>`
70
+ content: `
71
+ <mui-slat variant="header">
72
+ <mui-heading slot="start" size="6">Heading</mui-heading>
73
+ <mui-h-stack slot="end" alignX="end">
74
+ <mui-body size="small">End slot</mui-body>
75
+ </mui-h-stack>
76
+ </mui-slat>`
43
77
  },
44
78
  {
45
79
  role: "user",
@@ -47,16 +81,17 @@ const t = [
47
81
  },
48
82
  {
49
83
  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>`
84
+ content: `
85
+ <mui-slat variant="row">
86
+ <mui-v-stack slot="start">
87
+ <mui-body size="medium" weight="bold">...</mui-body>
88
+ <mui-body size="small">...</mui-body>
89
+ </mui-v-stack>
90
+ <mui-v-stack slot="end" alignX="end">
91
+ <mui-body size="small">...</mui-body>
92
+ <mui-body size="small">...</mui-body>
93
+ </mui-v-stack>
94
+ </mui-slat>`
60
95
  },
61
96
  {
62
97
  role: "user",
@@ -64,37 +99,8 @@ const t = [
64
99
  },
65
100
  {
66
101
  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">
102
+ content: `
103
+ <mui-slat variant="row">
98
104
  <mui-slat-accessory slot="accessory">
99
105
  <mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
100
106
  </mui-slat-accessory>
@@ -102,43 +108,68 @@ const t = [
102
108
  <mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
103
109
  <mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
104
110
  </mui-v-stack>
105
- <mui-v-stack slot="end" space="0">
111
+ <mui-v-stack slot="end" space="0" alignX="end">
106
112
  <mui-body size="x-small">Pending</mui-body>
107
113
  <mui-body size="small" weight="bold">-$8.12</mui-body>
108
114
  </mui-v-stack>
109
- </mui-slat>
110
- </mui-v-stack>
111
- </mui-card-body>
112
- </mui-card>`
115
+ </mui-slat>`
116
+ },
117
+ {
118
+ role: "user",
119
+ content: "[card] Create a card with a slat header and action rows"
120
+ },
121
+ {
122
+ role: "assistant",
123
+ content: `
124
+ <mui-card>
125
+ <mui-card-body>
126
+ <mui-slat variant="header">
127
+ <mui-heading slot="start" size="6">Today</mui-heading>
128
+ <mui-h-stack slot="end" alignX="end">
129
+ <mui-body size="small">22 July 2025</mui-body>
130
+ </mui-h-stack>
131
+ </mui-slat>
132
+ <mui-rule></mui-rule>
133
+ <mui-v-stack space="var(--space-000)" style="margin-top: var(--space-200)">
134
+ <mui-slat variant="action">
135
+ <mui-slat-accessory slot="accessory">
136
+ <mui-icon-left-sidebar size="small"></mui-icon-left-sidebar>
137
+ </mui-slat-accessory>
138
+ <mui-v-stack slot="start" space="0">
139
+ <mui-body size="medium" weight="bold">Espresso & Muffin Bar</mui-body>
140
+ <mui-body size="small">Food & Drink • Richmond, VIC</mui-body>
141
+ </mui-v-stack>
142
+ <mui-v-stack slot="end" space="0">
143
+ <mui-body size="x-small">Pending</mui-body>
144
+ <mui-body size="small" weight="bold">-$8.12</mui-body>
145
+ </mui-v-stack>
146
+ </mui-slat>
147
+ </mui-v-stack>
148
+ </mui-card-body>
149
+ </mui-card>`
113
150
  },
114
151
  // TABLE
115
152
  {
116
153
  role: "user",
117
- content: "[table] Show a table with 3 columns and 2 rows"
118
- },
119
- {
120
- role: "assistant",
121
- content: `<mui-table>
122
- <mui-row-group heading>
123
- <mui-row columns="1fr 1fr 1fr">
124
- <mui-cell>Heading 1</mui-cell>
125
- <mui-cell>Heading 2</mui-cell>
126
- <mui-cell>Heading 3</mui-cell>
127
- </mui-row>
128
- </mui-row-group>
129
- <mui-row-group>
130
- <mui-row columns="1fr 1fr 1fr">
131
- <mui-cell>Row 1</mui-cell>
132
- <mui-cell>Row 1</mui-cell>
133
- <mui-cell>Row 1</mui-cell>
134
- </mui-row>
135
- <mui-row columns="1fr 1fr 1fr">
136
- <mui-cell>Row 2</mui-cell>
137
- <mui-cell>Row 2</mui-cell>
138
- <mui-cell>Row 2</mui-cell>
139
- </mui-row>
140
- </mui-row-group>
141
- </mui-table>`
154
+ content: "[table] Add a table"
155
+ },
156
+ {
157
+ role: "assistant",
158
+ content: `
159
+ <mui-table>
160
+ <mui-row-group heading>
161
+ <mui-row columns="1fr 1fr">
162
+ <mui-cell>Heading 1</mui-cell>
163
+ <mui-cell>Heading 2</mui-cell>
164
+ </mui-row>
165
+ </mui-row-group>
166
+ <mui-row-group>
167
+ <mui-row columns="1fr 1fr">
168
+ <mui-cell>Row 1</mui-cell>
169
+ <mui-cell>Row 1</mui-cell>
170
+ </mui-row>
171
+ </mui-row-group>
172
+ </mui-table>`
142
173
  },
143
174
  // ACCORDION
144
175
  {
@@ -147,62 +178,19 @@ const t = [
147
178
  },
148
179
  {
149
180
  role: "assistant",
150
- content: `<mui-accordion-group>
151
- <mui-accordion-block heading="Section A">
152
- <div slot="detail">Details A</div>
153
- </mui-accordion-block>
154
- <mui-accordion-block heading="Section B">
155
- <div slot="detail">Details B</div>
156
- </mui-accordion-block>
157
- </mui-accordion-group>`
181
+ content: `
182
+ <mui-accordion-group>
183
+ <mui-accordion-block heading="Section A">
184
+ <div slot="detail">Details A</div>
185
+ </mui-accordion-block>
186
+ <mui-accordion-block heading="Section B">
187
+ <div slot="detail">Details B</div>
188
+ </mui-accordion-block>
189
+ </mui-accordion-group>`
158
190
  },
159
191
  // 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>" },
192
+ { role: "user", content: "[icon] Add an icon" },
193
+ { role: "assistant", content: "<mui-icon-{name}></mui-icon-{name}]>" },
206
194
  // IMAGE
207
195
  {
208
196
  role: "user",
@@ -210,109 +198,11 @@ const t = [
210
198
  },
211
199
  {
212
200
  role: "assistant",
213
- content: `<mui-image>
214
- <img slot="image" src="..." alt="Descriptive alt text" />
215
- <figcaption slot="caption">This is a caption</figcaption>
216
- </mui-image>`
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
- />`
201
+ content: `
202
+ <mui-image>
203
+ <img slot="image" src="..." alt="Descriptive alt text" />
204
+ <figcaption slot="caption">This is a caption</figcaption>
205
+ </mui-image>`
316
206
  },
317
207
  // STACK
318
208
  {
@@ -406,18 +296,19 @@ const t = [
406
296
  },
407
297
  {
408
298
  role: "assistant",
409
- content: `<mui-card>
410
- <mui-card-header>
411
- <mui-heading size="3">...</mui-heading>
412
- </mui-card-header>
413
- <mui-card-body>...</mui-card-body>
414
- <mui-card-footer>
415
- <mui-button-group right>
416
- <mui-button variant="secondary">Cancel</mui-button>
417
- <mui-button variant="primary">Submit</mui-button>
418
- </mui-button-group>
419
- </mui-card-footer>
420
- </mui-card>`
299
+ content: `
300
+ <mui-card>
301
+ <mui-card-header>
302
+ <mui-heading size="3">...</mui-heading>
303
+ </mui-card-header>
304
+ <mui-card-body>...</mui-card-body>
305
+ <mui-card-footer>
306
+ <mui-button-group right>
307
+ <mui-button variant="secondary">Cancel</mui-button>
308
+ <mui-button variant="primary">Submit</mui-button>
309
+ </mui-button-group>
310
+ </mui-card-footer>
311
+ </mui-card>`
421
312
  },
422
313
  {
423
314
  role: "user",
@@ -425,36 +316,37 @@ const t = [
425
316
  },
426
317
  {
427
318
  role: "assistant",
428
- content: `<mui-card>
429
- <mui-card-header>
430
- <mui-heading size="3">Title</mui-heading>
431
- </mui-card-header>
432
- <mui-rule></mui-rule>
433
- <mui-card-body>
434
- <mui-table>
435
- <mui-row-group heading>
436
- <mui-row columns="1fr 1fr 1fr auto">
437
- <mui-cell heading>Office</mui-cell>
438
- <mui-cell heading>Revenue</mui-cell>
439
- <mui-cell heading>Cost</mui-cell>
440
- <mui-cell heading action></mui-cell>
441
- </mui-row>
442
- </mui-row-group>
443
- <mui-row-group>
444
- <mui-row columns="1fr 1fr 1fr auto">
445
- <mui-cell>Whalen</mui-cell>
446
- <mui-cell>$4,400.00</mui-cell>
447
- <mui-cell>$1,100.00</mui-cell>
448
- <mui-cell action>
449
- <mui-button variant="tertiary">
450
- <mui-icon-add size="small"></mui-icon-add>
451
- </mui-button>
452
- </mui-cell>
453
- </mui-row>
454
- </mui-row-group>
455
- </mui-table>
456
- </mui-card-body>
457
- </mui-card>`
319
+ content: `
320
+ <mui-card>
321
+ <mui-card-header>
322
+ <mui-heading size="3">Title</mui-heading>
323
+ </mui-card-header>
324
+ <mui-rule></mui-rule>
325
+ <mui-card-body>
326
+ <mui-table>
327
+ <mui-row-group heading>
328
+ <mui-row columns="1fr 1fr 1fr auto">
329
+ <mui-cell heading>Office</mui-cell>
330
+ <mui-cell heading>Revenue</mui-cell>
331
+ <mui-cell heading>Cost</mui-cell>
332
+ <mui-cell heading action></mui-cell>
333
+ </mui-row>
334
+ </mui-row-group>
335
+ <mui-row-group>
336
+ <mui-row columns="1fr 1fr 1fr auto">
337
+ <mui-cell>Whalen</mui-cell>
338
+ <mui-cell>$4,400.00</mui-cell>
339
+ <mui-cell>$1,100.00</mui-cell>
340
+ <mui-cell action>
341
+ <mui-button variant="tertiary">
342
+ <mui-icon-add size="small"></mui-icon-add>
343
+ </mui-button>
344
+ </mui-cell>
345
+ </mui-row>
346
+ </mui-row-group>
347
+ </mui-table>
348
+ </mui-card-body>
349
+ </mui-card>`
458
350
  },
459
351
  {
460
352
  role: "system",
@@ -469,27 +361,30 @@ const t = [
469
361
  { role: "user", content: "[message] Create an info message with heading and body" },
470
362
  {
471
363
  role: "assistant",
472
- content: `<mui-message heading="Message heading" variant="info">
473
- <mui-body>...</mui-body>
474
- </mui-message>`
364
+ content: `
365
+ <mui-message heading="Message heading" variant="info">
366
+ <mui-body>...</mui-body>
367
+ </mui-message>`
475
368
  },
476
369
  { role: "user", content: "[message] Create a positive message with link" },
477
370
  {
478
371
  role: "assistant",
479
- content: `<mui-message heading="Message heading" variant="positive">
480
- <mui-body>The report has been...</mui-body>
481
- <mui-link>Download Your Report</mui-link>
482
- </mui-message>`
372
+ content: `
373
+ <mui-message heading="Message heading" variant="positive">
374
+ <mui-body>The report has been...</mui-body>
375
+ <mui-link>Download Your Report</mui-link>
376
+ </mui-message>`
483
377
  },
484
378
  { role: "user", content: "[message] Create a message with a list" },
485
379
  {
486
380
  role: "assistant",
487
- content: `<mui-message heading="Message heading">
488
- <mui-list as="ul">
489
- <mui-list-item size="small">Item 1</mui-list-item>
490
- <mui-list-item size="small">Item 2</mui-list-item>
491
- </mui-list>
492
- </mui-message>`
381
+ content: `
382
+ <mui-message heading="Message heading">
383
+ <mui-list as="ul">
384
+ <mui-list-item size="small">Item 1</mui-list-item>
385
+ <mui-list-item size="small">Item 2</mui-list-item>
386
+ </mui-list>
387
+ </mui-message>`
493
388
  },
494
389
  // BADGES
495
390
  { role: "user", content: "[badge] Show a warning badge" },
@@ -500,17 +395,19 @@ const t = [
500
395
  { role: "user", content: "[button-group] Create a right-aligned button group with cancel and submit" },
501
396
  {
502
397
  role: "assistant",
503
- content: `<mui-button-group right>
504
- <mui-button variant="secondary">Cancel</mui-button>
505
- <mui-button variant="primary">Submit</mui-button>
506
- </mui-button-group>`
398
+ content: `
399
+ <mui-button-group right>
400
+ <mui-button variant="secondary">Cancel</mui-button>
401
+ <mui-button variant="primary">Submit</mui-button>
402
+ </mui-button-group>`
507
403
  },
508
404
  { role: "user", content: "[button] Create a tertiary button with add icon" },
509
405
  {
510
406
  role: "assistant",
511
- content: `<mui-button variant="tertiary">
512
- <mui-icon-add></mui-icon-add>
513
- </mui-button>`
407
+ content: `
408
+ <mui-button variant="tertiary">
409
+ <mui-icon-add></mui-icon-add>
410
+ </mui-button>`
514
411
  },
515
412
  // LINK
516
413
  { role: "user", content: "[link] Create a primary link" },
@@ -521,150 +418,254 @@ const t = [
521
418
  { role: "user", content: "[tab] Create a tab controller with three tabs" },
522
419
  {
523
420
  role: "assistant",
524
- content: `<mui-tab-controller>
525
- <mui-tab-bar>
526
- <mui-tab-item active id="item1">Item 1</mui-tab-item>
527
- <mui-tab-item id="item2">Item 2</mui-tab-item>
528
- <mui-tab-item id="item3">Item 3</mui-tab-item>
529
- </mui-tab-bar>
530
- <mui-tab-panel item="item1">Content 1</mui-tab-panel>
531
- <mui-tab-panel item="item2">Content 2</mui-tab-panel>
532
- <mui-tab-panel item="item3">Content 3</mui-tab-panel>
533
- </mui-tab-controller>`
421
+ content: `
422
+ <mui-tab-controller>
423
+ <mui-tab-bar>
424
+ <mui-tab-item active id="item1">Item 1</mui-tab-item>
425
+ <mui-tab-item id="item2">Item 2</mui-tab-item>
426
+ <mui-tab-item id="item3">Item 3</mui-tab-item>
427
+ </mui-tab-bar>
428
+ <mui-tab-panel item="item1">Content 1</mui-tab-panel>
429
+ <mui-tab-panel item="item2">Content 2</mui-tab-panel>
430
+ <mui-tab-panel item="item3">Content 3</mui-tab-panel>
431
+ </mui-tab-controller>`
534
432
  },
535
433
  // CAROUSEL
536
434
  { role: "user", content: "[carousel] Create a carousel controller with tabs and panels" },
537
435
  {
538
436
  role: "assistant",
539
- content: `<mui-carousel-controller>
540
- <mui-tab-bar slot="controls">
541
- <mui-tab-item active id="one">1</mui-tab-item>
542
- <!-- Add other tabs -->
543
- </mui-tab-bar>
544
- <mui-carousel-panel slot="item" item="one">
545
- <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
546
- <mui-v-stack style="padding: var(--space-500) var(--space-600);">
547
- <mui-heading level="3" size="2">Item 1</mui-heading>
548
- <mui-body>Content...</mui-body>
549
- </mui-v-stack>
550
- </mui-grid>
551
- </mui-carousel-panel>
552
- <!-- Add other panels -->
553
- </mui-carousel-controller>`
554
- },
555
- // WALLET COMPOSITION
437
+ content: `
438
+ <mui-carousel-controller>
439
+ <mui-tab-bar slot="controls">
440
+ <mui-tab-item active id="one">1</mui-tab-item>
441
+ <!-- Add other tabs -->
442
+ </mui-tab-bar>
443
+ <mui-carousel-panel slot="item" item="one">
444
+ <mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
445
+ <mui-v-stack style="padding: var(--space-500) var(--space-600);">
446
+ <mui-heading level="3" size="2">Item 1</mui-heading>
447
+ <mui-body>Content...</mui-body>
448
+ </mui-v-stack>
449
+ </mui-grid>
450
+ </mui-carousel-panel>
451
+ <!-- Add other panels -->
452
+ </mui-carousel-controller>`
453
+ },
454
+ // SMART CARD
455
+ { role: "user", content: "[smart-card] Basic plain card with number and logo" },
456
+ {
457
+ role: "assistant",
458
+ content: `
459
+ <mui-smart-card
460
+ number="1234"
461
+ type="Debit"
462
+ logo="https://muibook.com/images/image-220.png"
463
+ partner="https://muibook.com/images/visa-black.svg"
464
+ variant="plain"
465
+ />`
466
+ },
467
+ { role: "user", content: "[smart-card] Plain card with inverted style" },
468
+ {
469
+ role: "assistant",
470
+ content: `
471
+ <mui-smart-card
472
+ inverted
473
+ number="1234"
474
+ type="Debit"
475
+ logo="https://muibook.com/images/image-220.png"
476
+ partner="https://muibook.com/images/visa-white.svg"
477
+ variant="plain"
478
+ />`
479
+ },
480
+ { role: "user", content: "[smart-card] Animated card with background image" },
481
+ {
482
+ role: "assistant",
483
+ content: `
484
+ <mui-smart-card
485
+ number="1234"
486
+ type="Debit"
487
+ bg-image="https://muibook.com/images/buttercup.png"
488
+ logo="https://muibook.com/images/image-220.png"
489
+ partner="https://muibook.com/images/visa-black.svg"
490
+ variant="animated"
491
+ />`
492
+ },
493
+ { role: "user", content: "[smart-card] Card with custom logo size" },
494
+ {
495
+ role: "assistant",
496
+ content: `
497
+ <mui-smart-card
498
+ logo="https://muibook.com/images/guides.svg"
499
+ logo-height="80"
500
+ />`
501
+ },
502
+ { role: "user", content: "[smart-card] Frozen card state" },
503
+ {
504
+ role: "assistant",
505
+ content: `
506
+ <mui-smart-card
507
+ state="frozen"
508
+ number="1234"
509
+ type="Debit"
510
+ logo="https://muibook.com/images/image-220.png"
511
+ partner="https://muibook.com/images/visa-black.svg"
512
+ variant="plain"
513
+ />`
514
+ },
515
+ { role: "user", content: "[smart-card] Card with background color" },
516
+ {
517
+ role: "assistant",
518
+ content: `
519
+ <mui-smart-card
520
+ variant="plain"
521
+ bg-color="#a4fc67"
522
+ number="1234"
523
+ type="Debit"
524
+ logo="https://muibook.com/images/image-220.png"
525
+ partner="https://muibook.com/images/visa-black.svg"
526
+ />`
527
+ },
528
+ { role: "user", content: "[smart-card] Card with background image (non-animated)" },
529
+ {
530
+ role: "assistant",
531
+ content: `
532
+ <mui-smart-card
533
+ variant="plain"
534
+ bg-image="https://muibook.com/images/image-395.png"
535
+ number="1234"
536
+ type="Debit"
537
+ logo="https://muibook.com/images/image-220.png"
538
+ partner="https://muibook.com/images/visa-black.svg"
539
+ />`
540
+ },
541
+ { role: "user", content: "[smart-card] Premier reward card" },
542
+ {
543
+ role: "assistant",
544
+ content: `
545
+ <mui-smart-card
546
+ type="Premier"
547
+ partner="https://muibook.com/images/emerald.svg"
548
+ bg-image="https://muibook.com/images/premier.png"
549
+ />`
550
+ },
551
+ { role: "user", content: "[smart-card] Diamond reward card (inverted)" },
552
+ {
553
+ role: "assistant",
554
+ content: `
555
+ <mui-smart-card
556
+ inverted
557
+ type="Diamond"
558
+ partner="https://muibook.com/images/emerald.svg"
559
+ bg-image="https://muibook.com/images/diamond.png"
560
+ />`
561
+ },
562
+ // COMPOSITION: WALLET
556
563
  {
557
564
  role: "user",
558
565
  content: "[wallet] Create a wallet layout with a smart card and tabbed transactions"
559
566
  },
560
567
  {
561
568
  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>
569
+ content: `
570
+ <mui-v-stack alignX="stretch" slot="body" style="max-width: 365px; margin: 0 auto; padding-top: var(--space-700); padding-bottom: var(--space-700)">
571
+ <mui-smart-card
572
+ variant="animated"
573
+ partner="https://muibook.com/images/visa-black.svg"
574
+ type="Debit"
575
+ number="1234"
576
+ logo="https://muibook.com/images/guides.svg"
577
+ logo-height="80"
578
+ bg-image="https://muibook.com/images/buttercup.png"
579
+ ></mui-smart-card>
572
580
 
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>
581
+ <mui-tab-controller>
582
+ <mui-v-stack alignX="stretch" style="max-width: 100%;" space="var(--space-300)">
583
+ <mui-tab-bar>
584
+ <mui-tab-item active id="item1">Transactions</mui-tab-item>
585
+ <mui-tab-item id="item2">Statements</mui-tab-item>
586
+ </mui-tab-bar>
588
587
 
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>
588
+ <mui-tab-panel item="item1">
589
+ <mui-v-stack alignX="stretch" space="var(--space-000)">
590
+ <mui-slat variant="header">
591
+ <mui-heading slot="start" size="6">Today</mui-heading>
592
+ <mui-h-stack slot="end" alignX="end">
593
+ <mui-body size="small">22 July 2025</mui-body>
594
+ </mui-h-stack>
595
+ </mui-slat>
611
596
 
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>
597
+ <mui-v-stack space="var(--space-025)">
598
+ <mui-slat variant="row">
599
+ <mui-v-stack slot="start" space="0">
600
+ <mui-body size="medium" weight="bold">Espresso Bar</mui-body>
601
+ <mui-body size="small">Food & Drink</mui-body>
602
+ </mui-v-stack>
603
+ <mui-v-stack space="0" slot="end" alignX="end">
604
+ <mui-body size="small">Pending</mui-body>
605
+ <mui-body size="small">-$8.12</mui-body>
606
+ </mui-v-stack>
607
+ </mui-slat>
608
+ </mui-v-stack>
618
609
 
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
610
  </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>
611
+ </mui-tab-panel>
633
612
 
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>
613
+ <mui-tab-panel item="item2">
614
+ <mui-v-stack alignX="stretch" space="var(--space-000)">
615
+ <mui-slat variant="header">
616
+ <mui-heading size="6" slot="start">Recents</mui-heading>
617
+ </mui-slat>
618
+ <mui-v-stack space="var(--space-025)">
619
+ <mui-slat variant="action">
620
+ <mui-v-stack space="0" slot="start">
621
+ <mui-body size="medium" weight="bold">Get a Transactions Report</mui-body>
622
+ <mui-body size="small">Generate a PDF of your recent transactions</mui-body>
623
+ </mui-v-stack>
624
+ </mui-slat>
644
625
  </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>
626
+ </mui-tab-panel>
649
627
  </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>`
628
+ </mui-tab-controller>
629
+ </mui-v-stack>`
630
+ },
631
+ // COMPOSITION: SIGN UP
632
+ {
633
+ role: "user",
634
+ content: "[composition] Create a sign-up form with fields for first name, last name, email, password, confirm password, a checkbox to agree to terms, and a submit button."
635
+ },
636
+ {
637
+ role: "assistant",
638
+ content: `
639
+ <mui-container small center>
640
+ <mui-card>
641
+ <mui-card-header>
642
+ <mui-heading size="3">Sign up for our product!</mui-heading>
643
+ </mui-card-header>
644
+ <mui-card-body>
645
+ <form>
646
+ <mui-v-stack space="var(--space-400)">
647
+ <mui-field id="emailField" label="Email">
648
+ <mui-input type="email" placeholder="john@example.com" />
649
+ </mui-field>
650
+ <mui-field id="passwordField" label="Password">
651
+ <mui-input type="password" />
652
+ </mui-field>
653
+ <mui-field id="confirmPasswordField" label="Confirm Password">
654
+ <mui-input type="password" />
655
+ </mui-field>
656
+ <mui-field id="termsField">
657
+ <mui-checkbox id="agreeTerms">I agree to the <mui-link href="/terms">terms and conditions</mui-link></mui-checkbox>
658
+ </mui-field>
659
+ <mui-button-group right>
660
+ <mui-button variant="primary">Sign up</mui-button>
661
+ </mui-button-group>
662
+ </mui-v-stack>
663
+ </form>
664
+ </mui-card-body>
665
+ </mui-card>
666
+ </mui-container>`
666
667
  }
667
668
  ];
668
669
  export {
669
- t as muiPrompts
670
+ i as muiPrompts
670
671
  };