bestax-mcp 1.18.13 → 1.18.14
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/data/bulma-classes.json +1 -0
- package/data/catalog.json +21 -1
- package/data/components/RingProgress.json +250 -0
- package/data/skills/bestax-custom-component/references/component-catalog.md +2 -1
- package/data/skills/bestax-migrate/references/bloomer/prop-map.md +1 -1
- package/data/skills/bestax-migrate/references/rbx/prop-map.md +1 -1
- package/data/skills/bestax-migrate/references/react-bulma-components/unmappables.md +1 -1
- package/data/skills/bestax-optimize/references/modular-build.md +1 -1
- package/data/skills/bestax-theming/references/css-variables.md +13 -0
- package/data/skills/bestax-theming/references/themeable-components.md +1 -0
- package/data/skills.json +7 -7
- package/package.json +2 -2
package/data/bulma-classes.json
CHANGED
|
@@ -13117,6 +13117,7 @@
|
|
|
13117
13117
|
"styled-radio": "Radio",
|
|
13118
13118
|
"rate": "Rate",
|
|
13119
13119
|
"reveal": "Reveal",
|
|
13120
|
+
"ring-progress": "RingProgress",
|
|
13120
13121
|
"scroll-area": "ScrollArea",
|
|
13121
13122
|
"sidebar": "Sidebar",
|
|
13122
13123
|
"slider": "Slider",
|
package/data/catalog.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"schemaVersion": 2,
|
|
3
3
|
"generatedFrom": {
|
|
4
4
|
"package": "@allxsmith/bestax-bulma",
|
|
5
|
-
"version": "5.
|
|
5
|
+
"version": "5.50.0"
|
|
6
6
|
},
|
|
7
7
|
"docsBase": "https://bestax.io/docs",
|
|
8
8
|
"categories": [
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"Paragraph",
|
|
34
34
|
"Pre",
|
|
35
35
|
"Progress",
|
|
36
|
+
"RingProgress",
|
|
36
37
|
"Skeleton",
|
|
37
38
|
"Span",
|
|
38
39
|
"Strong",
|
|
@@ -949,6 +950,17 @@
|
|
|
949
950
|
"propCount": 11,
|
|
950
951
|
"exampleCount": 5
|
|
951
952
|
},
|
|
953
|
+
{
|
|
954
|
+
"name": "RingProgress",
|
|
955
|
+
"kind": "component",
|
|
956
|
+
"category": "elements",
|
|
957
|
+
"purpose": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.",
|
|
958
|
+
"slug": "elements/ringprogress",
|
|
959
|
+
"import": "import { RingProgress } from '@allxsmith/bestax-bulma';",
|
|
960
|
+
"compound": false,
|
|
961
|
+
"propCount": 12,
|
|
962
|
+
"exampleCount": 7
|
|
963
|
+
},
|
|
952
964
|
{
|
|
953
965
|
"name": "ScrollArea",
|
|
954
966
|
"kind": "component",
|
|
@@ -2420,6 +2432,14 @@
|
|
|
2420
2432
|
"--bulma-reveal-offset": ["Reveal"],
|
|
2421
2433
|
"--bulma-reveal-offset-large": ["Reveal"],
|
|
2422
2434
|
"--bulma-reveal-scale": ["Reveal"],
|
|
2435
|
+
"--bulma-ring-progress-arc-color": ["RingProgress"],
|
|
2436
|
+
"--bulma-ring-progress-duration": ["RingProgress"],
|
|
2437
|
+
"--bulma-ring-progress-label-color": ["RingProgress"],
|
|
2438
|
+
"--bulma-ring-progress-label-size": ["RingProgress"],
|
|
2439
|
+
"--bulma-ring-progress-label-weight": ["RingProgress"],
|
|
2440
|
+
"--bulma-ring-progress-size": ["RingProgress"],
|
|
2441
|
+
"--bulma-ring-progress-thickness": ["RingProgress"],
|
|
2442
|
+
"--bulma-ring-progress-track-color": ["RingProgress"],
|
|
2423
2443
|
"--bulma-scroll-area-fade-size": ["ScrollArea"],
|
|
2424
2444
|
"--bulma-scroll-area-scrollbar-width": ["ScrollArea"],
|
|
2425
2445
|
"--bulma-scroll-area-thumb-color": ["ScrollArea"],
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "RingProgress",
|
|
3
|
+
"kind": "component",
|
|
4
|
+
"category": "elements",
|
|
5
|
+
"slug": "elements/ringprogress",
|
|
6
|
+
"docsUrl": "https://bestax.io/docs/api/elements/ringprogress",
|
|
7
|
+
"examples": [
|
|
8
|
+
{
|
|
9
|
+
"title": "Basic Usage",
|
|
10
|
+
"code": "<RingProgress value={72} label=\"Upload\" color=\"success\">\n 72%\n</RingProgress>"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"title": "Out of Something Else",
|
|
14
|
+
"code": "<RingProgress\n value={7}\n max={10}\n label=\"Weekly goal\"\n aria-valuetext=\"7 of 10 tasks\"\n>\n 7/10\n</RingProgress>"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"title": "A Level, Not a Task",
|
|
18
|
+
"code": "<RingProgress isMeter value={64} label=\"Storage used\" color=\"info\" size=\"large\">\n 64%\n</RingProgress>"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"title": "Sections",
|
|
22
|
+
"code": "<>\n <RingProgress\n label=\"Storage\"\n size=\"medium\"\n sections={[\n { value: 40, color: 'info', label: 'Documents' },\n { value: 15, color: 'warning', label: 'Photos' },\n { value: 15, color: 'danger', label: 'Video' },\n ]}\n >\n 70%\n </RingProgress>\n <Tags mt=\"3\">\n <Tag color=\"info\">Documents 40%</Tag>\n <Tag color=\"warning\">Photos 15%</Tag>\n <Tag color=\"danger\">Video 15%</Tag>\n </Tags>\n</>"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"title": "Colors",
|
|
26
|
+
"code": "<>\n <RingProgress value={70} label=\"Primary\" color=\"primary\" mr=\"3\" />\n <RingProgress value={70} label=\"Link\" color=\"link\" mr=\"3\" />\n <RingProgress value={70} label=\"Info\" color=\"info\" mr=\"3\" />\n <RingProgress value={70} label=\"Success\" color=\"success\" mr=\"3\" />\n <RingProgress value={70} label=\"Warning\" color=\"warning\" mr=\"3\" />\n <RingProgress value={70} label=\"Danger\" color=\"danger\" />\n</>"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"title": "Sizes and Rounded Ends",
|
|
30
|
+
"code": "<>\n <RingProgress value={60} label=\"Small\" size=\"small\" isRounded mr=\"4\" />\n <RingProgress value={60} label=\"Normal\" isRounded mr=\"4\" />\n <RingProgress value={60} label=\"Medium\" size=\"medium\" isRounded mr=\"4\" />\n <RingProgress value={60} label=\"Large\" size=\"large\" isRounded />\n</>"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"title": "A Value That Changes",
|
|
34
|
+
"code": "function example() {\n const [value, setValue] = useState(20);\n return (\n <>\n <RingProgress value={value} label=\"Upload\" color=\"success\" mb=\"3\">\n {value}%\n </RingProgress>\n <Paragraph role=\"status\">\n {value >= 100 ? 'Upload complete' : ''}\n </Paragraph>\n <Button size=\"small\" onClick={() => setValue(v => Math.min(100, v + 20))}>\n Move it on\n </Button>\n </>\n );\n}"
|
|
35
|
+
}
|
|
36
|
+
],
|
|
37
|
+
"accessibility": "- **Roles:** `role=\"progressbar\"` by default, `role=\"meter\"` with `isMeter`, and `role=\"img\"` with\n `sections`, on the ring itself, named by `label` (or `aria-label`, or `aria-labelledby` with a\n visible heading's id). A development build warns when it has no name.\n- **Values:** a progressbar or a meter has `aria-valuenow`, `aria-valuemin` and `aria-valuemax`,\n read as a percentage unless `aria-valuetext` says otherwise. With `sections`, use `label`, since\n a name from `aria-labelledby` would replace the one that lists the values.\n- **The drawing and the middle are hidden** from assistive tech, which reads the value from the\n ring, so nothing is heard twice.\n- **Contrast:** against the track, the `primary` and `link` arcs clear WCAG 1.4.11's 3:1 on a\n light page and the `info`, `success`, `warning` and `danger` arcs on a dark one. The others fall\n short in that scheme, as they do in Bulma's progress bar, so show the value as text in the middle\n where it matters.\n- **Forced colors:** the arcs take the system's text color and the track its gray, and sections\n get gaps between them, since they're one color there.\n- **Motion:** the arc doesn't slide under `prefers-reduced-motion: reduce`.\n- **Not live:** a changing value announces nothing on its own.",
|
|
38
|
+
"related": ["Loader", "Progress", "Tags", "useBulmaClasses"],
|
|
39
|
+
"storybook": "https://bestax.io/storybook/?path=/story/elements-ringprogress--default",
|
|
40
|
+
"summary": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle. It's a `progressbar` for a task moving toward done, or a `meter` with `isMeter` for a level within a range, named by `label`. With `sections` it draws several values around one ring and is an image whose name lists them. It has no state for work with no value: that's `Loader`.",
|
|
41
|
+
"import": "import { RingProgress } from '@allxsmith/bestax-bulma';",
|
|
42
|
+
"sourceFile": "bulma-ui/src/elements/RingProgress.tsx",
|
|
43
|
+
"rootClass": "ring-progress",
|
|
44
|
+
"parts": [
|
|
45
|
+
{
|
|
46
|
+
"path": "RingProgress",
|
|
47
|
+
"summary": "The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle. It's a `progressbar` for a task moving toward done, or a `meter` with `isMeter` for a level within a range, named by `label`. With `sections` it draws several values around one ring and is an image whose name lists them. It has no state for work with no value: that's `Loader`.",
|
|
48
|
+
"component": null,
|
|
49
|
+
"props": [
|
|
50
|
+
{
|
|
51
|
+
"name": "className",
|
|
52
|
+
"type": "string",
|
|
53
|
+
"default": null,
|
|
54
|
+
"description": "Additional CSS classes to apply.",
|
|
55
|
+
"required": false,
|
|
56
|
+
"inherited": false,
|
|
57
|
+
"deprecated": false
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "value",
|
|
61
|
+
"type": "number",
|
|
62
|
+
"default": null,
|
|
63
|
+
"description": "How far along it is, from 0 to `max`. Values outside that range are drawn, and read, at the nearest end. Ignored with `sections`.",
|
|
64
|
+
"required": false,
|
|
65
|
+
"inherited": false,
|
|
66
|
+
"deprecated": false
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "max",
|
|
70
|
+
"type": "number",
|
|
71
|
+
"default": "100",
|
|
72
|
+
"description": "The value that fills the ring.",
|
|
73
|
+
"required": false,
|
|
74
|
+
"inherited": false,
|
|
75
|
+
"deprecated": false
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"name": "sections",
|
|
79
|
+
"type": "{ value: number; color?: RingProgressColor; label: string }[]",
|
|
80
|
+
"default": null,
|
|
81
|
+
"description": "Several values around one ring, in order clockwise from the top, each with its own color and label. The ring is then an image whose name writes them out, such as \"Storage: Documents 40%, Photos 15%\", since a screen reader can't take several values from one element. A total over `max` fills the ring and stops.",
|
|
82
|
+
"required": false,
|
|
83
|
+
"inherited": false,
|
|
84
|
+
"deprecated": false
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "label",
|
|
88
|
+
"type": "string",
|
|
89
|
+
"default": null,
|
|
90
|
+
"description": "What it shows, such as \"Upload\" or \"Storage\". It names the ring, so it's read with the value. A development build warns when the ring has no name.",
|
|
91
|
+
"required": false,
|
|
92
|
+
"inherited": false,
|
|
93
|
+
"deprecated": false
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "isMeter",
|
|
97
|
+
"type": "boolean",
|
|
98
|
+
"default": "false",
|
|
99
|
+
"description": "A level within a range, such as storage used or a score, rather than a task moving toward done: `role=\"meter\"` in place of `role=\"progressbar\"`. Ignored with `sections`.",
|
|
100
|
+
"required": false,
|
|
101
|
+
"inherited": false,
|
|
102
|
+
"deprecated": false
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "color",
|
|
106
|
+
"type": "RingProgressColor",
|
|
107
|
+
"default": null,
|
|
108
|
+
"description": "The arc's color, and the color of sections without one.",
|
|
109
|
+
"required": false,
|
|
110
|
+
"inherited": false,
|
|
111
|
+
"deprecated": false
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "size",
|
|
115
|
+
"type": "'small' | 'medium' | 'large'",
|
|
116
|
+
"default": null,
|
|
117
|
+
"description": "The ring's size.",
|
|
118
|
+
"required": false,
|
|
119
|
+
"inherited": false,
|
|
120
|
+
"deprecated": false
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "isRounded",
|
|
124
|
+
"type": "boolean",
|
|
125
|
+
"default": "false",
|
|
126
|
+
"description": "Rounds the ends of the arc.",
|
|
127
|
+
"required": false,
|
|
128
|
+
"inherited": false,
|
|
129
|
+
"deprecated": false
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "children",
|
|
133
|
+
"type": "React.ReactNode",
|
|
134
|
+
"default": null,
|
|
135
|
+
"description": "What sits in the middle of the ring, such as the value as text. It's hidden from assistive tech, which reads the value from the ring itself, so the value isn't heard twice. Say anything more, such as \"7 of 10 tasks\", in `aria-valuetext`.",
|
|
136
|
+
"required": false,
|
|
137
|
+
"inherited": false,
|
|
138
|
+
"deprecated": false
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "textColor",
|
|
142
|
+
"type": "Bulma color | 'inherit' | 'current'",
|
|
143
|
+
"default": null,
|
|
144
|
+
"description": "Text color helper.",
|
|
145
|
+
"required": false,
|
|
146
|
+
"inherited": false,
|
|
147
|
+
"deprecated": false,
|
|
148
|
+
"valuesRef": "helpers/valid-values"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "bgColor",
|
|
152
|
+
"type": "Bulma color | 'inherit' | 'current'",
|
|
153
|
+
"default": null,
|
|
154
|
+
"description": "Background color helper.",
|
|
155
|
+
"required": false,
|
|
156
|
+
"inherited": false,
|
|
157
|
+
"deprecated": false,
|
|
158
|
+
"valuesRef": "helpers/valid-values"
|
|
159
|
+
}
|
|
160
|
+
],
|
|
161
|
+
"extraProps": [
|
|
162
|
+
{
|
|
163
|
+
"name": "ref",
|
|
164
|
+
"type": "React.Ref<HTMLDivElement>",
|
|
165
|
+
"default": null,
|
|
166
|
+
"description": "Ref forwarded to the root `<div>`.",
|
|
167
|
+
"required": false,
|
|
168
|
+
"inherited": false,
|
|
169
|
+
"deprecated": false
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "aria-labelledby",
|
|
173
|
+
"type": "string",
|
|
174
|
+
"default": null,
|
|
175
|
+
"description": "The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.",
|
|
176
|
+
"required": false,
|
|
177
|
+
"inherited": false,
|
|
178
|
+
"deprecated": false
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"name": "aria-valuetext",
|
|
182
|
+
"type": "string",
|
|
183
|
+
"default": null,
|
|
184
|
+
"description": "What a screen reader says for the value, such as \"7 of 10 tasks\". Without it, the value is read as a percentage.",
|
|
185
|
+
"required": false,
|
|
186
|
+
"inherited": false,
|
|
187
|
+
"deprecated": false
|
|
188
|
+
}
|
|
189
|
+
],
|
|
190
|
+
"catchAll": "All standard <div> attributes and Bulma helper props",
|
|
191
|
+
"types": [
|
|
192
|
+
{
|
|
193
|
+
"name": "RingProgressColor",
|
|
194
|
+
"expansion": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'",
|
|
195
|
+
"summary": "The Bulma colors an arc takes, the ones `Progress` takes."
|
|
196
|
+
}
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
"cssVars": [
|
|
201
|
+
{
|
|
202
|
+
"css": "--bulma-ring-progress-size",
|
|
203
|
+
"sass": "$ring-progress-size",
|
|
204
|
+
"default": "5rem",
|
|
205
|
+
"scope": "root"
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"css": "--bulma-ring-progress-thickness",
|
|
209
|
+
"sass": "$ring-progress-thickness",
|
|
210
|
+
"default": "10",
|
|
211
|
+
"scope": "root"
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"css": "--bulma-ring-progress-track-color",
|
|
215
|
+
"sass": "$ring-progress-track-color",
|
|
216
|
+
"default": "var(--bulma-border-weak)",
|
|
217
|
+
"scope": "root"
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"css": "--bulma-ring-progress-arc-color",
|
|
221
|
+
"sass": "$ring-progress-arc-color",
|
|
222
|
+
"default": "var(--bulma-primary)",
|
|
223
|
+
"scope": "root"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"css": "--bulma-ring-progress-duration",
|
|
227
|
+
"sass": "$ring-progress-duration",
|
|
228
|
+
"default": "var(--bulma-duration)",
|
|
229
|
+
"scope": "root"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"css": "--bulma-ring-progress-label-color",
|
|
233
|
+
"sass": "$ring-progress-label-color",
|
|
234
|
+
"default": "var(--bulma-text-strong)",
|
|
235
|
+
"scope": "root"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"css": "--bulma-ring-progress-label-weight",
|
|
239
|
+
"sass": "$ring-progress-label-weight",
|
|
240
|
+
"default": "var(--bulma-weight-semibold)",
|
|
241
|
+
"scope": "root"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"css": "--bulma-ring-progress-label-size",
|
|
245
|
+
"sass": "$ring-progress-label-size",
|
|
246
|
+
"default": "calc(var(--bulma-ring-progress-size) / 5)",
|
|
247
|
+
"scope": "root"
|
|
248
|
+
}
|
|
249
|
+
]
|
|
250
|
+
}
|
|
@@ -37,7 +37,7 @@ instead of hand-writing markup.
|
|
|
37
37
|
- Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
|
|
38
38
|
escape-hatch variants of the convenience wrappers above them; see the Form docs.
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
107 documented components. Generated from the API docs — every exported
|
|
41
41
|
component is guaranteed to appear (the generator fails if one lacks an API page).
|
|
42
42
|
|
|
43
43
|
## Elements
|
|
@@ -65,6 +65,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
|
|
|
65
65
|
- [Paragraph](https://bestax.io/docs/api/elements/paragraph) — The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
|
|
66
66
|
- [Pre](https://bestax.io/docs/api/elements/pre) — The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
|
|
67
67
|
- [Progress](https://bestax.io/docs/api/elements/progress) — The `Progress` component displays a Bulma-styled progress bar.
|
|
68
|
+
- [RingProgress](https://bestax.io/docs/api/elements/ringprogress) — The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
|
|
68
69
|
- [Skeleton](https://bestax.io/docs/api/elements/skeleton) — The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
|
|
69
70
|
- [Span](https://bestax.io/docs/api/elements/span) — The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
|
|
70
71
|
- [Strong](https://bestax.io/docs/api/elements/strong) — The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
|
|
@@ -192,7 +192,7 @@ value is flagged. The same conversion covers the modifiers bestax has no prop fo
|
|
|
192
192
|
bloomer forwarded no refs. bestax forwards a ref from the form controls, plus `Avatar`, `Button`,
|
|
193
193
|
`Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`,
|
|
194
194
|
`LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
|
|
195
|
-
`Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
|
|
195
|
+
`Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
|
|
196
196
|
`Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item` — pass `ref` directly on
|
|
197
197
|
those. "The form controls" means the inputs themselves: the `Field`, `Field.Label`, `Field.Body`,
|
|
198
198
|
`Checkboxes` and `Radios` wrappers around them forward nothing.
|
|
@@ -189,7 +189,7 @@ An existing `ref` is passed through untouched — which is safe only where the b
|
|
|
189
189
|
one. rbx forwards a ref on every component; bestax does so on the form controls, plus `Avatar`,
|
|
190
190
|
`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`,
|
|
191
191
|
`Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
|
|
192
|
-
`Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
|
|
192
|
+
`Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`,
|
|
193
193
|
`Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. "The form controls" there
|
|
194
194
|
means the inputs themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios`
|
|
195
195
|
wrappers around them forward nothing, and `Field` is a target this codemod emits.
|
|
@@ -165,7 +165,7 @@ The same TODO marks a `Heading` that sets `size` and `textSize` both: drop `size
|
|
|
165
165
|
bestax components don't take `domRef`, but many forward a plain `ref` — the form controls, plus
|
|
166
166
|
`Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`,
|
|
167
167
|
`Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`,
|
|
168
|
-
`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`,
|
|
168
|
+
`Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `RingProgress`, `ScrollArea`, `SegmentedControl`, `SegmentedControl.Segment`,
|
|
169
169
|
`Sidebar`, `Splitter`, `Splitter.Pane`, `Timeline`, `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item`. On
|
|
170
170
|
those, rename `domRef` to `ref` and it works; do not restructure the markup. "The form controls"
|
|
171
171
|
means the inputs themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios`
|
|
@@ -91,7 +91,7 @@ is **more complete** than the docs page's Option C example, which omits several)
|
|
|
91
91
|
`daterangeinput`, `file`
|
|
92
92
|
|
|
93
93
|
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `kbd`, `linkbutton`, `loader`,
|
|
94
|
-
`notification`, `progress`, `skeleton`
|
|
94
|
+
`notification`, `progress`, `ringprogress`, `skeleton`
|
|
95
95
|
|
|
96
96
|
**Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
|
|
97
97
|
|
|
@@ -616,6 +616,19 @@ the label text inside the `Radio`, since the whole label is the click target.
|
|
|
616
616
|
`--bulma-rate-spaced-gap`, `--bulma-rate-text-color`, `--bulma-rate-text-size`,
|
|
617
617
|
`--bulma-rate-transition-duration`
|
|
618
618
|
|
|
619
|
+
### RingProgress
|
|
620
|
+
|
|
621
|
+
Declared on the root, `.ring-progress`; the color and size classes set `--bulma-ring-progress-arc-color`
|
|
622
|
+
and `--bulma-ring-progress-size`. The thickness is in the ring's own units: it's 100 across with a
|
|
623
|
+
radius of 42, so up to 16 fits. In forced colors the arcs take `CanvasText` and the track `GrayText`
|
|
624
|
+
whatever these say.
|
|
625
|
+
|
|
626
|
+
`--bulma-ring-progress-arc-color`, `--bulma-ring-progress-duration`,
|
|
627
|
+
`--bulma-ring-progress-label-color`, `--bulma-ring-progress-label-size`,
|
|
628
|
+
`--bulma-ring-progress-label-weight`,
|
|
629
|
+
`--bulma-ring-progress-size`, `--bulma-ring-progress-thickness`,
|
|
630
|
+
`--bulma-ring-progress-track-color`
|
|
631
|
+
|
|
619
632
|
### Reveal
|
|
620
633
|
|
|
621
634
|
`--bulma-reveal-duration`, `--bulma-reveal-easing`, `--bulma-reveal-flip-angle`,
|
|
@@ -78,6 +78,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
|
|
|
78
78
|
| `Panel` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | — |
|
|
79
79
|
| `Progress` | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large` | — |
|
|
80
80
|
| `Radio` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
81
|
+
| `RingProgress` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` (the arc) | `small \| medium \| large` | a section takes its own `color`; arcs are SVG strokes, so retheme through `--bulma-ring-progress-*` |
|
|
81
82
|
| `Rate` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
82
83
|
| `ScrollArea` | — (no `color`: the thumb is `--bulma-scroll-area-thumb-color`) | — (`--bulma-scroll-area-scrollbar-width`: `thin`, `auto` or `none`) | the browser's own bars, so forced colors gives them the system's colors; retheme through `--bulma-scroll-area-*` |
|
|
83
84
|
| `SegmentedControl` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | fills only the checked segment (default `link`); `size` is the row's `are-<size>`; segments take no `color` or `size` |
|
package/data/skills.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
{
|
|
11
11
|
"id": "component-catalog",
|
|
12
12
|
"file": "references/component-catalog.md",
|
|
13
|
-
"bytes":
|
|
13
|
+
"bytes": 21401
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
16
|
"id": "library-contributor",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
{
|
|
94
94
|
"id": "bloomer-prop-map",
|
|
95
95
|
"file": "references/bloomer/prop-map.md",
|
|
96
|
-
"bytes":
|
|
96
|
+
"bytes": 26721
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
99
|
"id": "bloomer-unmappables",
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
{
|
|
129
129
|
"id": "rbx-prop-map",
|
|
130
130
|
"file": "references/rbx/prop-map.md",
|
|
131
|
-
"bytes":
|
|
131
|
+
"bytes": 15562
|
|
132
132
|
},
|
|
133
133
|
{
|
|
134
134
|
"id": "rbx-unmappables",
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
{
|
|
149
149
|
"id": "react-bulma-components-unmappables",
|
|
150
150
|
"file": "references/react-bulma-components/unmappables.md",
|
|
151
|
-
"bytes":
|
|
151
|
+
"bytes": 13204
|
|
152
152
|
}
|
|
153
153
|
],
|
|
154
154
|
"examples": []
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
{
|
|
163
163
|
"id": "modular-build",
|
|
164
164
|
"file": "references/modular-build.md",
|
|
165
|
-
"bytes":
|
|
165
|
+
"bytes": 12432
|
|
166
166
|
}
|
|
167
167
|
],
|
|
168
168
|
"examples": []
|
|
@@ -176,12 +176,12 @@
|
|
|
176
176
|
{
|
|
177
177
|
"id": "css-variables",
|
|
178
178
|
"file": "references/css-variables.md",
|
|
179
|
-
"bytes":
|
|
179
|
+
"bytes": 53667
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"id": "themeable-components",
|
|
183
183
|
"file": "references/themeable-components.md",
|
|
184
|
-
"bytes":
|
|
184
|
+
"bytes": 26372
|
|
185
185
|
}
|
|
186
186
|
],
|
|
187
187
|
"examples": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bestax-mcp",
|
|
3
|
-
"version": "1.18.
|
|
3
|
+
"version": "1.18.14",
|
|
4
4
|
"mcpName": "io.github.allxsmith/bestax-mcp",
|
|
5
5
|
"description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
|
|
6
6
|
"type": "module",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@modelcontextprotocol/sdk": "^1.32.1",
|
|
44
44
|
"zod": "^4.6.7",
|
|
45
|
-
"@allxsmith/bestax-bulma": "^5.
|
|
45
|
+
"@allxsmith/bestax-bulma": "^5.50.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@jest/globals": "^30.0.0",
|