bestax-mcp 1.18.26 → 1.18.28

package/data/bulma-classes.json

@@ -13116,7 +13116,9 @@
     "dropzone": "Dropzone",
     "empty-state": "EmptyState",
     "fieldset": "Fieldset",
+    "stack": "Stack",
     "hover-card": "HoverCard",
+    "icon-button": "IconButton",
     "kbd": "Kbd",
     "link-button": "LinkButton",
     "loading": "Loading",

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.57.5"
+    "version": "5.59.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -23,6 +23,7 @@
         "Emphasis",
         "Figure",
         "Icon",
+        "IconButton",
         "IconText",
         "Image",
         "Kbd",
@@ -31,6 +32,7 @@
         "ListItem",
         "Loader",
         "Notification",
+        "NumberFormatter",
         "OrderedList",
         "Paragraph",
         "Pre",
@@ -131,13 +133,17 @@
       "id": "layout",
       "label": "Layout",
       "components": [
+        "Center",
         "Container",
+        "Flex",
         "Footer",
+        "Group",
         "Hero",
         "Level",
         "Media",
         "Section",
-        "Splitter"
+        "Splitter",
+        "Stack"
       ]
     },
     {
@@ -254,7 +260,7 @@
       "slug": "elements/buttons",
       "import": "import { Buttons } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 59,
+      "propCount": 81,
       "exampleCount": 8
     },
     {
@@ -290,6 +296,17 @@
       "propCount": 11,
       "exampleCount": 6
     },
+    {
+      "name": "Center",
+      "kind": "component",
+      "category": "layout",
+      "purpose": "The `Center` component centers its content on both axes.",
+      "slug": "layout/center",
+      "import": "import { Center } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 7,
+      "exampleCount": 4
+    },
     {
       "name": "Checkbox",
       "kind": "component",
@@ -675,6 +692,17 @@
       "propCount": 23,
       "exampleCount": 18
     },
+    {
+      "name": "Flex",
+      "kind": "component",
+      "category": "layout",
+      "purpose": "The `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.",
+      "slug": "layout/flex",
+      "import": "import { Flex } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 13,
+      "exampleCount": 4
+    },
     {
       "name": "Footer",
       "kind": "component",
@@ -697,6 +725,17 @@
       "propCount": 27,
       "exampleCount": 10
     },
+    {
+      "name": "Group",
+      "kind": "component",
+      "category": "layout",
+      "purpose": "The `Group` component lays its children out in a row that wraps, centered on each other, with half of Bulma's block spacing between them.",
+      "slug": "layout/group",
+      "import": "import { Group } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 11,
+      "exampleCount": 6
+    },
     {
       "name": "Hero",
       "kind": "component",
@@ -730,6 +769,17 @@
       "propCount": 15,
       "exampleCount": 14
     },
+    {
+      "name": "IconButton",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `IconButton` component renders a button that shows only an icon, and requires a name for it.",
+      "slug": "elements/iconbutton",
+      "import": "import { IconButton } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 22,
+      "exampleCount": 12
+    },
     {
       "name": "IconText",
       "kind": "component",
@@ -917,6 +967,17 @@
       "propCount": 7,
       "exampleCount": 7
     },
+    {
+      "name": "NumberFormatter",
+      "kind": "component",
+      "category": "elements",
+      "purpose": "The `NumberFormatter` component writes a number the way a locale writes it, such as a price, a percentage or a count, in a `<data>` element that keeps the…",
+      "slug": "elements/numberformatter",
+      "import": "import { NumberFormatter, useNumberFormat } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 6,
+      "exampleCount": 10
+    },
     {
       "name": "Numberinput",
       "kind": "component",
@@ -1192,6 +1253,17 @@
       "propCount": 21,
       "exampleCount": 9
     },
+    {
+      "name": "Stack",
+      "kind": "component",
+      "category": "layout",
+      "purpose": "The `Stack` component lays its children out in a column, with Bulma's block spacing between them and the margins Bulma gives them zeroed.",
+      "slug": "layout/stack",
+      "import": "import { Stack } from '@allxsmith/bestax-bulma';",
+      "compound": false,
+      "propCount": 8,
+      "exampleCount": 8
+    },
     {
       "name": "Steps",
       "kind": "component",
@@ -1388,7 +1460,7 @@
       "import": "import { TreeView } from '@allxsmith/bestax-bulma';",
       "compound": true,
       "propCount": 27,
-      "exampleCount": 9
+      "exampleCount": 10
     },
     {
       "name": "UnorderedList",
@@ -2800,6 +2872,8 @@
     "--bulma-splitter-line-active-size": ["Splitter"],
     "--bulma-splitter-line-color": ["Splitter"],
     "--bulma-splitter-line-size": ["Splitter"],
+    "--bulma-stack-gap": ["Stack", "Group"],
+    "--bulma-stack-horizontal-gap": ["Stack", "Group"],
     "--bulma-steps-animation-duration": ["Steps"],
     "--bulma-steps-content-margin-top": ["Steps"],
     "--bulma-steps-default-color": ["Steps"],

package/data/components/Button.json

@@ -101,8 +101,14 @@
       "code": "function example() {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const [tag, setTag] = React.useState<string>();\n\n  return (\n    <>\n      <Button color=\"primary\" ref={buttonRef}>\n        Target\n      </Button>\n      <Button ml=\"2\" onClick={() => setTag(buttonRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
-  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **Icons beside text:** Leave the `Icon` unnamed, so the text alone names the button. The icons in [With an Icon](https://bestax.io/docs/api/elements/button#with-an-icon) write out `aria-hidden=\"true\"`, and `Icon` would render it for them anyway, since they have no `ariaLabel`, `aria-label` or `aria-labelledby` to name them and no `role` or `tabIndex` of their own. A named icon joins the button's name instead, so `ariaLabel=\"Download\"` on the icon of a Download button makes a screen reader announce \"Download Download\".\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n- **Toggles:** `isActive` tells a screen reader nothing. A button that turns something on or off is a [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton), which sets `aria-pressed`.\n\n:::note\nIf your button has only an icon, use `aria-label` to provide accessible text.\n:::",
-  "related": ["Buttons", "Icon", "ToggleButton", "useBulmaClasses"],
+  "accessibility": "- **Labeling:** Always provide descriptive content for buttons for screen readers.\n- **Icons beside text:** Leave the `Icon` unnamed, so the text alone names the button. The icons in [With an Icon](https://bestax.io/docs/api/elements/button#with-an-icon) write out `aria-hidden=\"true\"`, and `Icon` would render it for them anyway, since they have no `ariaLabel`, `aria-label` or `aria-labelledby` to name them and no `role` or `tabIndex` of their own. A named icon joins the button's name instead, so `ariaLabel=\"Download\"` on the icon of a Download button makes a screen reader announce \"Download Download\".\n- **States:** The `isDisabled` and `disabled` props ensure correct `aria-disabled` and `disabled` attributes.\n- **Keyboard:** When rendered as `<a>`, disabled buttons are not focusable.\n- **Focus:** Use `isFocused` and `isActive` for visual feedback, but rely on browser focus for actual accessibility.\n- **Toggles:** `isActive` tells a screen reader nothing. A button that turns something on or off is a [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton), which sets `aria-pressed`.\n\n:::note\nA button that shows only an icon is an [`IconButton`](https://bestax.io/docs/api/elements/iconbutton), whose types require an\n`aria-label` or an `aria-labelledby`, and whose `isRounded` makes a circle. On a plain `Button` holding only\nan icon, name it with `aria-label` yourself.\n:::",
+  "related": [
+    "Buttons",
+    "Icon",
+    "IconButton",
+    "ToggleButton",
+    "useBulmaClasses"
+  ],
   "storybook": "https://bestax.io/storybook/?path=/story/elements-button--default",
   "summary": "The `Button` component provides a flexible and highly customizable button for your Bulma React UI.",
   "import": "import { Button } from '@allxsmith/bestax-bulma';",

package/data/components/Buttons.json

@@ -35,7 +35,7 @@
     },
     {
       "title": "Compound (dot-notation) usage",
-      "code": "<>\n  <Buttons>\n    <Buttons.Button color=\"primary\">Save</Buttons.Button>\n    <Buttons.Button>Cancel</Buttons.Button>\n    <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n  </Buttons>\n  <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n    <Buttons.ToggleButton defaultPressed>Bold</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Italic</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Underline</Buttons.ToggleButton>\n  </Buttons>\n</>"
+      "code": "<>\n  <Buttons>\n    <Buttons.Button color=\"primary\">Save</Buttons.Button>\n    <Buttons.Button>Cancel</Buttons.Button>\n    <Buttons.LinkButton>Learn more</Buttons.LinkButton>\n    <Buttons.IconButton icon=\"ellipsis\" aria-label=\"More actions\" />\n  </Buttons>\n  <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n    <Buttons.ToggleButton defaultPressed>Bold</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Italic</Buttons.ToggleButton>\n    <Buttons.ToggleButton>Underline</Buttons.ToggleButton>\n  </Buttons>\n</>"
     }
   ],
   "accessibility": "- Grouping buttons in a `<div class=\"buttons\">` has no negative impact on accessibility.\n- Ensure each `Button` has a clear label (text or `aria-label`).\n- For a set of toggles that each turn on and off on their own, use [`ToggleButton`](https://bestax.io/docs/api/elements/togglebutton) in `Buttons hasAddons`, and give the `Buttons` `role=\"group\"` and an `aria-label`. A set where only one can be on is a radio group, so use [`SegmentedControl`](https://bestax.io/docs/api/components/segmentedcontrol) for it, which draws the same `has-addons` row, or [`Radios`](https://bestax.io/docs/api/form/radios) when the choice is sent with a form.\n\n:::tip\nYou can use all Bulma helper props (spacing, color, alignment) with `Buttons` for even more control.\n:::",
@@ -655,6 +655,236 @@
       ],
       "catchAll": "All standard <button> attributes and Bulma helper props",
       "types": []
+    },
+    {
+      "path": "Buttons.IconButton",
+      "summary": "The `IconButton` component renders a button that shows only an icon, and requires a name for it. It renders through `Button`, so it takes everything `Button` takes, and adds the icon and a name the types require: `aria-label`, or `aria-labelledby` in its place. Bulma keeps a button whose only child is an `.icon` square at every size, and `isRounded` makes it a circle. It has no tooltip of its own: wrap it in `Tooltip` for a description.",
+      "component": "IconButton",
+      "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": "'button'",
+          "description": "Render as a `<button>`, an `<a>`, or a custom component such as a router `Link`, as on `Button`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The glyph. A string is an `Icon` name, drawn from the icon library `ConfigProvider` sets. An `<Icon>` renders as given, so it can carry its own `variant` or `library`. Any other node, such as an SVG or a component from an icon package, goes inside an `Icon`, which gives it the `.icon` wrapper Bulma keeps square. It's decorative: the button's name says what it does. Give the glyph here or as `children`, not both: with both, it draws `icon` and warns in development. With neither, such as an empty string from `cond ? 'trash' : ''`, the button is an empty square, and that warns in development too.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The glyph as children, the way Mantine, MUI and Chakra take it: an `<Icon>` renders as given, and any other node, such as an SVG, goes inside an `Icon`, as with `icon`. Left out when `icon` is given, which warns in development. Text warns too, since `aria-label` replaces it as the name: a button with text is a `Button`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button a circle the size of its square. The circle comes from bestax's CSS, in `bestax.css` and its variants, or in `extras.css` next to your own Bulma. Without it, Bulma's `is-rounded` draws a pill a little wider than it is tall.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": null,
+          "description": "The id of the element whose text names the button, in place of `aria-label`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": null,
+          "description": "The button's name: what a screen reader announces and what a voice control user says to press it. Required, or `aria-labelledby` in its place, since an icon has no text to name it by. Name the action (\"Delete\"), not the picture (\"Trash\"). An empty or blank one warns in development.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'",
+          "default": null,
+          "description": "Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the button.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isLight",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies a lighter color variant.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "default": "false",
+          "description": "Displays a loading spinner, with everything inside the button hidden behind it, in forced colors (Windows' contrast themes) too. Under `prefers-reduced-motion: reduce` the spinner stops and stays drawn. Bulma alone hides only the label, so the rest needs bestax's CSS loaded.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isStatic",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button non-interactive.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isFullwidth",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button full-width.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isFullWidth",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the button full-width.",
+          "required": false,
+          "inherited": true,
+          "deprecated": true,
+          "deprecationNote": "Use `isFullwidth` instead — `isFullwidth` wins if both are set."
+        },
+        {
+          "name": "isOutlined",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies outlined styling (requires color).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isInverted",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies inverted styling (requires color).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isFocused",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies focused styling (visual only).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isHovered",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies hovered styling (visual only).",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies disabled styling.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Custom class name.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "type",
+          "type": "string",
+          "default": "'button'",
+          "description": "On a `<button>`, `'button'`, `'submit'` or `'reset'`, and `'button'` unless you pass one of the other two, so it never submits a form by accident. With another `as`, whatever that element or component takes, passed through as given, such as an `<a>`'s MIME type.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "PolymorphicRef<React.ElementType>",
+          "default": null,
+          "description": "Ref forwarded to the element `as` renders, typed from `as`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
+      "types": []
     }
   ],
   "cssVars": []

package/data/components/Center.json

@@ -0,0 +1,131 @@
+{
+  "name": "Center",
+  "kind": "component",
+  "category": "layout",
+  "slug": "layout/center",
+  "docsUrl": "https://bestax.io/docs/api/layout/center",
+  "examples": [
+    {
+      "title": "Basic Usage",
+      "code": "<Center aspectRatio=\"16by9\" bgColor=\"light\">\n  <Loader textSize=\"3\" ariaLabel=\"Loading the report\" />\n</Center>"
+    },
+    {
+      "title": "In a Card",
+      "code": "<Card>\n  <Card.Content>\n    <Center p=\"6\">\n      <Loader textSize=\"3\" ariaLabel=\"Loading invoices\" />\n    </Center>\n  </Card.Content>\n</Card>"
+    },
+    {
+      "title": "Several Children",
+      "code": "<Center gap=\"2\" p=\"5\" bgColor=\"light\">\n  <Span>Nothing here yet.</Span>\n  <Button color=\"primary\">Add one</Button>\n</Center>"
+    },
+    {
+      "title": "Inline",
+      "code": "<Block>\n  Sync is{' '}\n  <Center\n    display=\"inline-flex\"\n    bgColor=\"success\"\n    textColor=\"white\"\n    radius=\"rounded\"\n    p=\"1\"\n  >\n    <Icon name=\"check\" ariaLabel=\"on\" />\n  </Center>{' '}\n  for every device.\n</Block>"
+    }
+  ],
+  "accessibility": "- **No role of its own:** a Center adds nothing to the accessibility tree, apart from `role=\"list\"`\n  on a `ul` or `ol`, which Safari otherwise drops once Bulma's reset hides the markers.\n- **Order:** several children stay in their own order, so what's seen, the reading order and the\n  Tab order agree.\n- **What it centers names itself:** a loader or an icon in a Center needs its own accessible name,\n  as `Loader`'s `ariaLabel` and `Icon`'s `ariaLabel` give it.",
+  "related": ["EmptyState", "Flex", "Loader", "Stack", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/layout-center--default",
+  "summary": "The `Center` component centers its content on both axes. Use it for a loader, an icon or an empty state in the middle of a box, a card or a section. Give it a height, or put it in something that has one, to center down the middle as well as across. Several children sit side by side in the middle, with no gap unless you set one.",
+  "import": "import { Center } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/layout/Center.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "Center",
+      "summary": "The `Center` component centers its content on both axes. Use it for a loader, an icon or an empty state in the middle of a box, a card or a section. Give it a height, or put it in something that has one, to center down the middle as well as across. Several children sit side by side in the middle, with no gap unless you set one.",
+      "component": null,
+      "props": [
+        {
+          "name": "as",
+          "type": "LayoutElement",
+          "default": "'div'",
+          "description": "The element to render. With `ul` or `ol`, give it `li` children: it restates `role=\"list\"`, which Bulma's list reset takes away in Safari.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gap",
+          "type": "BulmaGapStep",
+          "default": null,
+          "description": "Space between children, when there are several. None by default. Needs Bulma's helper classes: under `bestax-no-helpers.css` the default stays.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "display",
+          "type": "(typeof validDisplays)[number] | 'none'",
+          "default": null,
+          "description": "`'inline-flex'` sizes it to its content, to center something inside a line of text. Needs Bulma's helper classes: under `bestax-no-helpers.css` the default stays.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "What it lays out. The top and bottom margins Bulma gives them are zeroed, so `gap` is the only space between them, and a spacing helper such as `mt=\"2\"` still adds to it. A `Columns` child keeps its own top and side margins, and takes at the bottom the one Bulma gives the last Columns in a container, the column gap pulled back in (none when gapless), so its columns line up. A `Pagination` child keeps its negative margins too, so its links line up.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": true,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "PolymorphicRef<LayoutElement>",
+          "default": null,
+          "description": "Ref forwarded to the element `as` renders.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "Remaining props of the element selected by as and Bulma helper props",
+      "types": [
+        {
+          "name": "BulmaGapStep",
+          "expansion": "'0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8",
+          "summary": "A gap step as `gap`, `columnGap` and `rowGap` take it: a value from `validGaps`, or the same step written as a number (`gap={2}`, `gap={1.5}`). `Grid` took its gaps as numbers before the gap helpers were shared, so every gap prop still does."
+        },
+        {
+          "name": "LayoutElement",
+          "expansion": "'div' | 'main' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'form' | 'fieldset'",
+          "summary": "The elements Stack, Group, Center and Flex can render as: Container's landmarks and sections, a list, a form or a fieldset."
+        }
+      ]
+    }
+  ],
+  "cssVars": []
+}