@muibook/components 9.0.0 → 9.1.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 +2 -2
- package/dist/esm/agent/prompts/index.js +855 -3
- package/dist/esm/components/mui-body/index.js +8 -0
- package/dist/esm/components/mui-button/index.js +46 -41
- package/dist/esm/components/mui-input/index.js +20 -10
- package/dist/esm/components/mui-select/index.js +9 -1
- package/dist/esm/components/mui-smart-card/index.js +1 -0
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/css/mui-tokens.css +2 -2
- package/dist/esm/custom-elements.json +124 -124
- package/dist/types/agent/prompts/index.d.ts +9 -0
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "javascript-module",
|
|
37
|
-
"path": "src/components/mui-
|
|
37
|
+
"path": "src/components/mui-addon/doc.ts",
|
|
38
38
|
"declarations": [
|
|
39
39
|
{
|
|
40
40
|
"kind": "variable",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"type": {
|
|
43
43
|
"text": "MuiDocs"
|
|
44
44
|
},
|
|
45
|
-
"default": "{
|
|
45
|
+
"default": "{ AddOn: { title: \"Add on\", description: \"Enhances form inputs by displaying supplementary information such as units, prefixes, or suffixes adjacent to the input field. Add Ons improve clarity by providing context without adding clutter to the input area.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3GH67kZLZAjADf3kTIoSV3/82a1ab87bc13b25e6dc1e81c81f69532/AddOn_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4065&t=rIU93UcpsUxOVNN9-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-addon--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-addon/index.ts\"], website: [\"https://muibook.com/#/addon\"], guides: [\"https://guides.muibook.com/add-on\"], usage: { list: [ \"Use to display units (e.g. %, $, kg) or fixed prefixes/suffixes alongside inputs.\", \"Ideal for improving data entry accuracy and user understanding.\", \"Ensure Add Ons are visually distinct but do not overpower the main input content.\", \"Avoid overcrowding inputs with multiple Add Ons to maintain clarity.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { list: [ \"Add-on placed before the Input Field\", \"Add-on placed after the Input Field\", \"Short text, an icon, or both to support input context.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/13NH06kdHIzm8hDGNBgihx/f5715279e5ab5e2ce6bfd5d38f5f2d1d/Add_on_-_Anatomy.png\", }, variants: { items: [ { key: \"text\", title: \"Text\", description: \"Use for units, currency, or short static labels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/VfAoQuP8u7icg5s6Shwd6/f5f838a3ffda0d0839ef062af308fc97/text-variant.png\", }, { key: \"icon\", title: \"Icon\", description: \"Use for symbolic cues or clarification of the input’s intent.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1LY5GdVijhp7bpfRs3WyFc/6d1708bd25496d7f33acba796b8b2aa6/icon-variant.png\", }, ], }, related: { items: [ { name: \"Field\", link: \"https://guides.muibook.com/field\" }, { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Select\", link: \"https://guides.muibook.com/select\" }, { name: \"File Upload\", link: \"https://guides.muibook.com/file-upload\" }, { name: \"Icons\", link: \"https://guides.muibook.com/icons\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
46
46
|
}
|
|
47
47
|
],
|
|
48
48
|
"exports": [
|
|
@@ -51,48 +51,20 @@
|
|
|
51
51
|
"name": "muiDocs",
|
|
52
52
|
"declaration": {
|
|
53
53
|
"name": "muiDocs",
|
|
54
|
-
"module": "src/components/mui-
|
|
54
|
+
"module": "src/components/mui-addon/doc.ts"
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
]
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"kind": "javascript-module",
|
|
61
|
-
"path": "src/components/mui-
|
|
61
|
+
"path": "src/components/mui-addon/index.ts",
|
|
62
62
|
"declarations": [
|
|
63
63
|
{
|
|
64
64
|
"kind": "class",
|
|
65
65
|
"description": "",
|
|
66
|
-
"name": "
|
|
66
|
+
"name": "MuiAddon",
|
|
67
67
|
"members": [
|
|
68
|
-
{
|
|
69
|
-
"kind": "field",
|
|
70
|
-
"name": "_imageFailed",
|
|
71
|
-
"type": {
|
|
72
|
-
"text": "boolean | undefined"
|
|
73
|
-
},
|
|
74
|
-
"privacy": "private"
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
"kind": "method",
|
|
78
|
-
"name": "hasSlottedContent"
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
"kind": "method",
|
|
82
|
-
"name": "getInitials",
|
|
83
|
-
"parameters": [
|
|
84
|
-
{
|
|
85
|
-
"name": "label",
|
|
86
|
-
"type": {
|
|
87
|
-
"text": "string | null"
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
]
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
"kind": "method",
|
|
94
|
-
"name": "getBackgroundCSS"
|
|
95
|
-
},
|
|
96
68
|
{
|
|
97
69
|
"kind": "method",
|
|
98
70
|
"name": "render"
|
|
@@ -100,42 +72,30 @@
|
|
|
100
72
|
],
|
|
101
73
|
"attributes": [
|
|
102
74
|
{
|
|
103
|
-
"name": "
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"name": "image"
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
"name": "size"
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "background"
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
"name": "background-color"
|
|
75
|
+
"name": "slot"
|
|
116
76
|
}
|
|
117
77
|
],
|
|
118
78
|
"superclass": {
|
|
119
79
|
"name": "HTMLElement"
|
|
120
80
|
},
|
|
121
|
-
"tagName": "mui-
|
|
81
|
+
"tagName": "mui-addon",
|
|
122
82
|
"customElement": true
|
|
123
83
|
}
|
|
124
84
|
],
|
|
125
85
|
"exports": [
|
|
126
86
|
{
|
|
127
87
|
"kind": "custom-element-definition",
|
|
128
|
-
"name": "mui-
|
|
88
|
+
"name": "mui-addon",
|
|
129
89
|
"declaration": {
|
|
130
|
-
"name": "
|
|
131
|
-
"module": "src/components/mui-
|
|
90
|
+
"name": "MuiAddon",
|
|
91
|
+
"module": "src/components/mui-addon/index.ts"
|
|
132
92
|
}
|
|
133
93
|
}
|
|
134
94
|
]
|
|
135
95
|
},
|
|
136
96
|
{
|
|
137
97
|
"kind": "javascript-module",
|
|
138
|
-
"path": "src/components/mui-
|
|
98
|
+
"path": "src/components/mui-avatar/doc.ts",
|
|
139
99
|
"declarations": [
|
|
140
100
|
{
|
|
141
101
|
"kind": "variable",
|
|
@@ -143,7 +103,7 @@
|
|
|
143
103
|
"type": {
|
|
144
104
|
"text": "MuiDocs"
|
|
145
105
|
},
|
|
146
|
-
"default": "{
|
|
106
|
+
"default": "{ Avatar: { title: \"Avatar\", description: \"Avatar components are used to represent users or entities visually, often through images, initials, or icons.\", hero: [\"https://images.ctfassets.net/i5uwscj4pkk2/2Qj1aPRsHVZZs6eF8XO6XC/54dd3c04d5a0ac379050cfa6f45d9732/Avatar_-_Home_Image.png\"], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1498-15366&t=2P2nhh7B70fl6xQ4-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-avatar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-avatar/index.ts\"], website: [\"https://muibook.com/#/avatar\"], guides: [\"https://guides.muibook.com/avatar\"], usage: { list: [ \"Represent a user or entity visually in lists, chats, comments, or profiles.\", \"Display a profile photo, initials, or icon associated with a person or object.\", \"Use in compact UI elements where space is limited (e.g., tables, cards).\", \"Pair with user metadata (name, role, status) for context.\", \"Indicate presence, status, or selection in collaborative interfaces.\", ], }, accessibility: { designerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], engineerList: [ \"Avatars should always include an accessible label via the label attribute to ensure screen readers can convey their purpose.\", \"When using images, ensure they are clear and appropriately sized for the avatar component.\", \"For avatars representing users, consider using initials or icons when images are not available to maintain visual consistency.\", ], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
147
107
|
}
|
|
148
108
|
],
|
|
149
109
|
"exports": [
|
|
@@ -152,20 +112,48 @@
|
|
|
152
112
|
"name": "muiDocs",
|
|
153
113
|
"declaration": {
|
|
154
114
|
"name": "muiDocs",
|
|
155
|
-
"module": "src/components/mui-
|
|
115
|
+
"module": "src/components/mui-avatar/doc.ts"
|
|
156
116
|
}
|
|
157
117
|
}
|
|
158
118
|
]
|
|
159
119
|
},
|
|
160
120
|
{
|
|
161
121
|
"kind": "javascript-module",
|
|
162
|
-
"path": "src/components/mui-
|
|
122
|
+
"path": "src/components/mui-avatar/index.ts",
|
|
163
123
|
"declarations": [
|
|
164
124
|
{
|
|
165
125
|
"kind": "class",
|
|
166
126
|
"description": "",
|
|
167
|
-
"name": "
|
|
127
|
+
"name": "MuiAvatar",
|
|
168
128
|
"members": [
|
|
129
|
+
{
|
|
130
|
+
"kind": "field",
|
|
131
|
+
"name": "_imageFailed",
|
|
132
|
+
"type": {
|
|
133
|
+
"text": "boolean | undefined"
|
|
134
|
+
},
|
|
135
|
+
"privacy": "private"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"kind": "method",
|
|
139
|
+
"name": "hasSlottedContent"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"kind": "method",
|
|
143
|
+
"name": "getInitials",
|
|
144
|
+
"parameters": [
|
|
145
|
+
{
|
|
146
|
+
"name": "label",
|
|
147
|
+
"type": {
|
|
148
|
+
"text": "string | null"
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"kind": "method",
|
|
155
|
+
"name": "getBackgroundCSS"
|
|
156
|
+
},
|
|
169
157
|
{
|
|
170
158
|
"kind": "method",
|
|
171
159
|
"name": "render"
|
|
@@ -173,23 +161,35 @@
|
|
|
173
161
|
],
|
|
174
162
|
"attributes": [
|
|
175
163
|
{
|
|
176
|
-
"name": "
|
|
164
|
+
"name": "label"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "image"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "size"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"name": "background"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"name": "background-color"
|
|
177
177
|
}
|
|
178
178
|
],
|
|
179
179
|
"superclass": {
|
|
180
180
|
"name": "HTMLElement"
|
|
181
181
|
},
|
|
182
|
-
"tagName": "mui-
|
|
182
|
+
"tagName": "mui-avatar",
|
|
183
183
|
"customElement": true
|
|
184
184
|
}
|
|
185
185
|
],
|
|
186
186
|
"exports": [
|
|
187
187
|
{
|
|
188
188
|
"kind": "custom-element-definition",
|
|
189
|
-
"name": "mui-
|
|
189
|
+
"name": "mui-avatar",
|
|
190
190
|
"declaration": {
|
|
191
|
-
"name": "
|
|
192
|
-
"module": "src/components/mui-
|
|
191
|
+
"name": "MuiAvatar",
|
|
192
|
+
"module": "src/components/mui-avatar/index.ts"
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
195
|
]
|
|
@@ -278,7 +278,7 @@
|
|
|
278
278
|
"type": {
|
|
279
279
|
"text": "MuiDocs"
|
|
280
280
|
},
|
|
281
|
-
"default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
281
|
+
"default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
282
282
|
}
|
|
283
283
|
],
|
|
284
284
|
"exports": [
|
|
@@ -4140,7 +4140,7 @@
|
|
|
4140
4140
|
},
|
|
4141
4141
|
{
|
|
4142
4142
|
"kind": "javascript-module",
|
|
4143
|
-
"path": "src/components/mui-
|
|
4143
|
+
"path": "src/components/mui-message/doc.ts",
|
|
4144
4144
|
"declarations": [
|
|
4145
4145
|
{
|
|
4146
4146
|
"kind": "variable",
|
|
@@ -4148,7 +4148,7 @@
|
|
|
4148
4148
|
"type": {
|
|
4149
4149
|
"text": "MuiDocs"
|
|
4150
4150
|
},
|
|
4151
|
-
"default": "{
|
|
4151
|
+
"default": "{ Message: { title: \"Message\", description: \"The message component provides persistent, non-dismissible notifications that remain visible until the system determines they should be suspended. Unlike alerts, these messages are static elements integrated into the page layout, offering continuous information without disrupting the user’s workflow.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/01OU9JbOlDZGvbpkq2ismi/b0410cb8002858ded88987d9556daa04/Message_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=9-1053&t=ZA9uH4LK37tSuk6r-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-message--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-message/index.ts\"], website: [\"https://muibook.com/#/message\"], guides: [\"https://guides.muibook.com/message\"], usage: { list: [ \"Plain: A subtle, transparent style suited for vibrant backgrounds where minimal visual impact is preferred.\", \"Neutral: A calm, balanced tone for non-critical, persistent messages.\", \"Positive: To confirm successful actions like form submissions, saves, or completed tasks.\", \"Info: To share feature announcements, enhancements, or contextual onboarding tips.\", \"Warning: Caution users about potential issues such as unsaved changes or upcoming expirations.\", \"Attention: Highlight urgent issues like system errors or security breaches requiring immediate action.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"Neutral, Postive, Info support the role of STATUS for screen reader feedback.\", \"Warning, Attention support the role of ALERT for screen reader feedback.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/6S1MOtZZKP2bxYuIUNScSC/993a910363fbfbba29a3de384ecb182a/Message_-_Anatomy.png\", list: [ \"Preset icon: Communicates the type of message visually. E.g. neutral, positive, info, warning, attention.\", \"Customisable title: Allows for a general heading that describes the message details or guidance relevant to the situation.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], }, variants: { items: [ { key: \"plain\", title: \"Plain\", description: \"A subtle, transparent style designed for vibrant backgrounds where minimal visual impact is preferred. Best for passive messages like accessibility notes, system status, or routine updates. Use for non-critical information that doesn’t require immediate attention or action. This variant sets aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/21KWc3TZOJPqZ2BtZ3ngrY/3cbf4aa6df3a72f195eebaa8fe8ecfde/message-plain.png\", }, { key: \"neutral\", title: \"Neutral\", description: \"The Neutral state offers a calm, balanced tone for non-critical, persistent messages. It is suitable for displaying non-urgent information, such as background status like sync confirmation or feature explanations. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2VF8KPxaXCm6P4dlpsAnXs/5a2011d1a63a900dcdd6669ec5c097e9/message-neutral.png\", }, { key: \"positive\", title: \"Positive\", description: \"The Positive state conveys successful actions, confirmations, or achievements, helping foster a sense of accomplishment and satisfaction. It’s used to indicate things like successful form submissions, completed tasks, or acknowledged milestones. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2HOuPOpHOuMGuVUoPAs5MI/ff1e156bc8f31e580972289fcc7bf3d7/message-positive.png\", }, { key: \"info\", title: \"Info\", description: \"The Info state provides helpful messages that inform users about system status, feature updates, or changes—guiding them without urgency. It’s suitable for announcing new features, enhancements, or system changes, and works well for onboarding tips or contextual help. This variant uses aria-live='polite' and role='status' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1x63W880Trpx0GYiYQJhCt/72c09a93d6ec34a18bc15310927fe9ef/message-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"The Warning state alerts users to potential issues that may require attention, helping prevent errors or misunderstandings. It’s commonly used to notify users of unsaved changes, actions with potential consequences, or upcoming limitations or expirations. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/50V1Ap7vVxPUWRbbKh0kx5/2fe4c203befa779087c8b23984d951b7/message-warning.png\", }, { key: \"attention\", title: \"Attention\", description: \"The Attention state demands immediate user focus, highlighting critical issues that require prompt action. It’s used to alert users to urgent problems like system errors or security breaches, or for time-sensitive notifications that significantly impact the user experience. This variant uses aria-live='assertive' and role='alert' for accessibility.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5GXIEuluNJBlg8h4hDCfWH/ddeec560354ab06af73bf5c5d8749c12/message-attention.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"plain-message\", name: \"Plain message\", description: \"This example uses the Plain variant, suitable for both white and colored backgrounds. It’s ideal for presenting information passively, without demanding user attention. In this case, it’s used to deliver accessibility notes.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3akJJDd28DOIhQrYq6g4y2/456c02f32dc9c40d84d92371b7ddbead/message-composition-neutral.png\", }, { key: \"info-message\", name: \"Info message\", description: \"Use a page-level Info message to remind users to log in to the provided tools, ensuring the MUI Guidelines are shown instead of the default guidelines.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1ySFimf3eEleYLPKomWuem/34772aed4257db976f2ca8cb633d3d5b/message-composition-info.png\", }, ], }, related: { items: [ { name: \"Alert\", link: \"https://guides.muibook.com/alert\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
4152
4152
|
}
|
|
4153
4153
|
],
|
|
4154
4154
|
"exports": [
|
|
@@ -4157,54 +4157,40 @@
|
|
|
4157
4157
|
"name": "muiDocs",
|
|
4158
4158
|
"declaration": {
|
|
4159
4159
|
"name": "muiDocs",
|
|
4160
|
-
"module": "src/components/mui-
|
|
4160
|
+
"module": "src/components/mui-message/doc.ts"
|
|
4161
4161
|
}
|
|
4162
4162
|
}
|
|
4163
4163
|
]
|
|
4164
4164
|
},
|
|
4165
4165
|
{
|
|
4166
4166
|
"kind": "javascript-module",
|
|
4167
|
-
"path": "src/components/mui-
|
|
4167
|
+
"path": "src/components/mui-message/index.ts",
|
|
4168
4168
|
"declarations": [
|
|
4169
4169
|
{
|
|
4170
4170
|
"kind": "class",
|
|
4171
4171
|
"description": "",
|
|
4172
|
-
"name": "
|
|
4173
|
-
"members": [
|
|
4174
|
-
{
|
|
4175
|
-
"kind": "method",
|
|
4176
|
-
"name": "render"
|
|
4177
|
-
}
|
|
4178
|
-
],
|
|
4179
|
-
"attributes": [
|
|
4180
|
-
{
|
|
4181
|
-
"name": "progress"
|
|
4182
|
-
},
|
|
4183
|
-
{
|
|
4184
|
-
"name": "state"
|
|
4185
|
-
}
|
|
4186
|
-
],
|
|
4172
|
+
"name": "MuiMessage",
|
|
4187
4173
|
"superclass": {
|
|
4188
4174
|
"name": "HTMLElement"
|
|
4189
4175
|
},
|
|
4190
|
-
"tagName": "mui-
|
|
4176
|
+
"tagName": "mui-message",
|
|
4191
4177
|
"customElement": true
|
|
4192
4178
|
}
|
|
4193
4179
|
],
|
|
4194
4180
|
"exports": [
|
|
4195
4181
|
{
|
|
4196
4182
|
"kind": "custom-element-definition",
|
|
4197
|
-
"name": "mui-
|
|
4183
|
+
"name": "mui-message",
|
|
4198
4184
|
"declaration": {
|
|
4199
|
-
"name": "
|
|
4200
|
-
"module": "src/components/mui-
|
|
4185
|
+
"name": "MuiMessage",
|
|
4186
|
+
"module": "src/components/mui-message/index.ts"
|
|
4201
4187
|
}
|
|
4202
4188
|
}
|
|
4203
4189
|
]
|
|
4204
4190
|
},
|
|
4205
4191
|
{
|
|
4206
4192
|
"kind": "javascript-module",
|
|
4207
|
-
"path": "src/components/mui-
|
|
4193
|
+
"path": "src/components/mui-progress/doc.ts",
|
|
4208
4194
|
"declarations": [
|
|
4209
4195
|
{
|
|
4210
4196
|
"kind": "variable",
|
|
@@ -4212,7 +4198,7 @@
|
|
|
4212
4198
|
"type": {
|
|
4213
4199
|
"text": "MuiDocs"
|
|
4214
4200
|
},
|
|
4215
|
-
"default": "{
|
|
4201
|
+
"default": "{ Progress: { title: \"Progress\", description: \"A Progress Bar visually represents completion status by filling a bar based on a percentage value. It gives users a clear indication of progress for a given task or process.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2NPcL7tA0zGUWFLShr66fS/23d0050dce8c8379afc6deb8e351d049/Progress_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4161&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-progress--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-progress/index.ts\"], website: [\"https://muibook.com/#/progress\"], guides: [\"https://guides.muibook.com/progress\"], usage: { list: [ \"Show task progress – Indicate how much of a task or process has been completed.\", \"Display loading states – Represent the progress of a background operation, such as file uploads.\", \"Track step completion – Show progress in multi-step workflows or onboarding processes.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/1iPll53Pmtgjh50qYwhsgY/908da9c51dd605895bd6306290fc6bd9/Progress_-_Anatomy.png\", list: [ \"Fill (Indicator) – The colored portion inside the track that represents the progress percentage.\", \"Track – The background of the progress bar, providing the visual boundary for progress.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
|
|
4216
4202
|
}
|
|
4217
4203
|
],
|
|
4218
4204
|
"exports": [
|
|
@@ -4221,33 +4207,47 @@
|
|
|
4221
4207
|
"name": "muiDocs",
|
|
4222
4208
|
"declaration": {
|
|
4223
4209
|
"name": "muiDocs",
|
|
4224
|
-
"module": "src/components/mui-
|
|
4210
|
+
"module": "src/components/mui-progress/doc.ts"
|
|
4225
4211
|
}
|
|
4226
4212
|
}
|
|
4227
4213
|
]
|
|
4228
4214
|
},
|
|
4229
4215
|
{
|
|
4230
4216
|
"kind": "javascript-module",
|
|
4231
|
-
"path": "src/components/mui-
|
|
4217
|
+
"path": "src/components/mui-progress/index.ts",
|
|
4232
4218
|
"declarations": [
|
|
4233
4219
|
{
|
|
4234
4220
|
"kind": "class",
|
|
4235
4221
|
"description": "",
|
|
4236
|
-
"name": "
|
|
4222
|
+
"name": "MuiProgress",
|
|
4223
|
+
"members": [
|
|
4224
|
+
{
|
|
4225
|
+
"kind": "method",
|
|
4226
|
+
"name": "render"
|
|
4227
|
+
}
|
|
4228
|
+
],
|
|
4229
|
+
"attributes": [
|
|
4230
|
+
{
|
|
4231
|
+
"name": "progress"
|
|
4232
|
+
},
|
|
4233
|
+
{
|
|
4234
|
+
"name": "state"
|
|
4235
|
+
}
|
|
4236
|
+
],
|
|
4237
4237
|
"superclass": {
|
|
4238
4238
|
"name": "HTMLElement"
|
|
4239
4239
|
},
|
|
4240
|
-
"tagName": "mui-
|
|
4240
|
+
"tagName": "mui-progress",
|
|
4241
4241
|
"customElement": true
|
|
4242
4242
|
}
|
|
4243
4243
|
],
|
|
4244
4244
|
"exports": [
|
|
4245
4245
|
{
|
|
4246
4246
|
"kind": "custom-element-definition",
|
|
4247
|
-
"name": "mui-
|
|
4247
|
+
"name": "mui-progress",
|
|
4248
4248
|
"declaration": {
|
|
4249
|
-
"name": "
|
|
4250
|
-
"module": "src/components/mui-
|
|
4249
|
+
"name": "MuiProgress",
|
|
4250
|
+
"module": "src/components/mui-progress/index.ts"
|
|
4251
4251
|
}
|
|
4252
4252
|
}
|
|
4253
4253
|
]
|
|
@@ -5982,37 +5982,6 @@
|
|
|
5982
5982
|
}
|
|
5983
5983
|
]
|
|
5984
5984
|
},
|
|
5985
|
-
{
|
|
5986
|
-
"kind": "javascript-module",
|
|
5987
|
-
"path": "src/components/mui-table/row/index.ts",
|
|
5988
|
-
"declarations": [
|
|
5989
|
-
{
|
|
5990
|
-
"kind": "class",
|
|
5991
|
-
"description": "",
|
|
5992
|
-
"name": "MuiRow",
|
|
5993
|
-
"attributes": [
|
|
5994
|
-
{
|
|
5995
|
-
"name": "columns"
|
|
5996
|
-
}
|
|
5997
|
-
],
|
|
5998
|
-
"superclass": {
|
|
5999
|
-
"name": "HTMLElement"
|
|
6000
|
-
},
|
|
6001
|
-
"tagName": "mui-row",
|
|
6002
|
-
"customElement": true
|
|
6003
|
-
}
|
|
6004
|
-
],
|
|
6005
|
-
"exports": [
|
|
6006
|
-
{
|
|
6007
|
-
"kind": "custom-element-definition",
|
|
6008
|
-
"name": "mui-row",
|
|
6009
|
-
"declaration": {
|
|
6010
|
-
"name": "MuiRow",
|
|
6011
|
-
"module": "src/components/mui-table/row/index.ts"
|
|
6012
|
-
}
|
|
6013
|
-
}
|
|
6014
|
-
]
|
|
6015
|
-
},
|
|
6016
5985
|
{
|
|
6017
5986
|
"kind": "javascript-module",
|
|
6018
5987
|
"path": "src/components/mui-table/row-group/index.ts",
|
|
@@ -6356,6 +6325,37 @@
|
|
|
6356
6325
|
}
|
|
6357
6326
|
}
|
|
6358
6327
|
]
|
|
6328
|
+
},
|
|
6329
|
+
{
|
|
6330
|
+
"kind": "javascript-module",
|
|
6331
|
+
"path": "src/components/mui-table/row/index.ts",
|
|
6332
|
+
"declarations": [
|
|
6333
|
+
{
|
|
6334
|
+
"kind": "class",
|
|
6335
|
+
"description": "",
|
|
6336
|
+
"name": "MuiRow",
|
|
6337
|
+
"attributes": [
|
|
6338
|
+
{
|
|
6339
|
+
"name": "columns"
|
|
6340
|
+
}
|
|
6341
|
+
],
|
|
6342
|
+
"superclass": {
|
|
6343
|
+
"name": "HTMLElement"
|
|
6344
|
+
},
|
|
6345
|
+
"tagName": "mui-row",
|
|
6346
|
+
"customElement": true
|
|
6347
|
+
}
|
|
6348
|
+
],
|
|
6349
|
+
"exports": [
|
|
6350
|
+
{
|
|
6351
|
+
"kind": "custom-element-definition",
|
|
6352
|
+
"name": "mui-row",
|
|
6353
|
+
"declaration": {
|
|
6354
|
+
"name": "MuiRow",
|
|
6355
|
+
"module": "src/components/mui-table/row/index.ts"
|
|
6356
|
+
}
|
|
6357
|
+
}
|
|
6358
|
+
]
|
|
6359
6359
|
}
|
|
6360
6360
|
]
|
|
6361
6361
|
}
|