bestax-mcp 0.0.0

package/data/components/Code.json

@@ -0,0 +1,128 @@
+{
+  "name": "Code",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/code",
+  "docsUrl": "https://bestax.io/docs/api/elements/code",
+  "examples": [
+    {
+      "title": "Default Code",
+      "code": "<Code>console.log(\"Hello, World!\")</Code>"
+    },
+    {
+      "title": "Variable Name",
+      "code": "<Paragraph>\n  The <Code>userName</Code> variable stores the current user's name.\n</Paragraph>"
+    },
+    {
+      "title": "Function Call",
+      "code": "<Paragraph>\n  Use <Code>Array.map()</Code> to transform each element in the array.\n</Paragraph>"
+    },
+    {
+      "title": "Command Line",
+      "code": "<Paragraph>\n  Run <Code>pnpm install</Code> to install the dependencies.\n</Paragraph>"
+    },
+    {
+      "title": "Colored Code",
+      "code": "<Code textColor=\"primary\">import React from \"react\"</Code>"
+    },
+    {
+      "title": "Code with Background",
+      "code": "<Code bgColor=\"light\" p=\"1\">\n  const x = 42\n</Code>"
+    },
+    {
+      "title": "All Colors",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n  <Code textColor=\"primary\">primary code</Code>\n  <Code textColor=\"link\">link code</Code>\n  <Code textColor=\"info\">info code</Code>\n  <Code textColor=\"success\">success code</Code>\n  <Code textColor=\"warning\">warning code</Code>\n  <Code textColor=\"danger\">danger code</Code>\n</Block>"
+    },
+    {
+      "title": "File Path",
+      "code": "<Paragraph>\n  Edit the configuration file at <Code>src/config/settings.ts</Code> to change\n  the default values.\n</Paragraph>"
+    },
+    {
+      "title": "Keyboard Shortcuts",
+      "code": "<Paragraph>\n  Press <Code>Ctrl + C</Code> to copy and <Code>Ctrl + V</Code> to paste.\n</Paragraph>"
+    }
+  ],
+  "accessibility": "- **Code Semantics:** Screen readers may indicate code content differently, helping users understand it's technical content.\n- **Monospace Font:** The `<code>` element typically renders in a monospace font, aiding readability of technical content.\n- **Context:** Provide context around code snippets so users understand what the code represents.\n\n:::info\nUse `Code` for short inline snippets. For multi-line code blocks that need to preserve whitespace and formatting, use the `Pre` component.\n:::",
+  "related": ["Figure", "Paragraph", "Pre", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-code--default",
+  "summary": "The `Code` component renders a styled `<code>` element with Bulma helper class integration.",
+  "import": "import { Code } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Code.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "Code",
+      "summary": "The `Code` component renders a styled `<code>` element with Bulma helper class integration.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Code content to render inside the element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-code-family",
+      "sass": "$code-family",
+      "default": "var(--bulma-family-code)",
+      "scope": "global"
+    },
+    {
+      "css": "--bulma-code-padding",
+      "sass": "$code-padding",
+      "default": "0.25em 0.5em 0.25em",
+      "scope": "global"
+    },
+    {
+      "css": "--bulma-code-weight",
+      "sass": "$code-weight",
+      "default": "normal",
+      "scope": "global"
+    },
+    {
+      "css": "--bulma-code-size",
+      "sass": "$code-size",
+      "default": "0.875em",
+      "scope": "global"
+    }
+  ]
+}

package/data/components/Collapse.json

@@ -0,0 +1,218 @@
+{
+  "name": "Collapse",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/collapse",
+  "docsUrl": "https://bestax.io/docs/api/components/collapse",
+  "examples": [
+    {
+      "title": "Basic Collapse",
+      "code": "function example() {\n  return (\n    <Collapse\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>Click to expand</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>\n          This is the collapsible content. It can contain any React elements.\n        </Paragraph>\n        <Paragraph>Click the header again to collapse.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+    },
+    {
+      "title": "Default Open",
+      "code": "function example() {\n  return (\n    <Collapse\n      defaultOpen\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>This starts open</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This content is visible by default.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+    },
+    {
+      "title": "Without Animation",
+      "code": "function example() {\n  return (\n    <Collapse\n      animation={false}\n      trigger={\n        <Block\n          p=\"3\"\n          bgColor=\"white-ter\"\n          cursor=\"pointer\"\n          style={{ borderRadius: '4px' }}\n        >\n          <Strong>No animation</Strong>\n        </Block>\n      }\n    >\n      <Block p=\"3\">\n        <Paragraph>This collapse has animation disabled.</Paragraph>\n      </Block>\n    </Collapse>\n  );\n}"
+    },
+    {
+      "title": "Controlled Mode",
+      "code": "function example() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Block>\n      <Block mb=\"4\">\n        <Button color=\"primary\" onClick={() => setIsOpen(!isOpen)}>\n          {isOpen ? 'Close' : 'Open'} Collapse\n        </Button>\n        <Span ml=\"4\">State: {isOpen ? 'Open' : 'Closed'}</Span>\n      </Block>\n      <Collapse\n        open={isOpen}\n        trigger={\n          <Block p=\"3\" bgColor=\"white-ter\" style={{ borderRadius: '4px' }}>\n            Controlled collapse (use button above)\n          </Block>\n        }\n      >\n        <Block p=\"3\">\n          <Paragraph>This collapse is controlled by external state.</Paragraph>\n        </Block>\n      </Collapse>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Accordion",
+      "code": "function example() {\n  const [openIndex, setOpenIndex] = useState(0);\n\n  const items = [\n    { title: 'Section 1', content: 'Content for section 1.' },\n    { title: 'Section 2', content: 'Content for section 2.' },\n    { title: 'Section 3', content: 'Content for section 3.' },\n  ];\n\n  return (\n    <Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n      {items.map((item, index) => (\n        <Collapse\n          key={index}\n          className=\"collapse is-bordered\"\n          open={openIndex === index}\n          trigger={\n            <Block\n              p=\"4\"\n              onClick={() => setOpenIndex(openIndex === index ? -1 : index)}\n              display=\"flex\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <Strong>{item.title}</Strong>\n              <Span>{openIndex === index ? '−' : '+'}</Span>\n            </Block>\n          }\n        >\n          <Paragraph p=\"4\">{item.content}</Paragraph>\n        </Collapse>\n      ))}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Card Style",
+      "code": "function example() {\n  return (\n    <Collapse\n      className=\"collapse is-card\"\n      defaultOpen\n      trigger={\n        <Block className=\"collapse-trigger-header\">\n          <Span>Card Collapse</Span>\n          <Icon name=\"fas fa-chevron-down\" />\n        </Block>\n      }\n    >\n      <Paragraph>\n        This collapse is styled like a card with shadow and padding.\n      </Paragraph>\n      <Paragraph>Perfect for FAQ sections or settings panels.</Paragraph>\n    </Collapse>\n  );\n}"
+    },
+    {
+      "title": "FAQ Example",
+      "code": "function example() {\n  const faqs = [\n    {\n      q: 'What is Bestax?',\n      a: 'Bestax is a React component library built on Bulma.',\n    },\n    { q: 'How do I install it?', a: 'pnpm add @allxsmith/bestax-bulma' },\n    { q: 'Is it free?', a: 'Yes, Bestax is open source and free to use.' },\n  ];\n\n  const [openStates, setOpenStates] = useState(faqs.map(() => false));\n\n  const toggle = index => {\n    setOpenStates(prev =>\n      prev.map((state, i) => (i === index ? !state : state))\n    );\n  };\n\n  return (\n    <Block>\n      <Title size=\"5\" mb=\"4\">\n        FAQ\n      </Title>\n      <Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n        {faqs.map((faq, index) => (\n          <Collapse\n            key={index}\n            className=\"collapse is-bordered\"\n            trigger={\n              <Block\n                p=\"4\"\n                onClick={() => toggle(index)}\n                display=\"flex\"\n                justifyContent=\"space-between\"\n              >\n                <Strong>{faq.q}</Strong>\n                <Span>{openStates[index] ? '▲' : '▼'}</Span>\n              </Block>\n            }\n            open={openStates[index]}\n          >\n            <Paragraph p=\"4\" textColor=\"grey-dark\">\n              {faq.a}\n            </Paragraph>\n          </Collapse>\n        ))}\n      </Block>\n    </Block>\n  );\n}"
+    }
+  ],
+  "accessibility": "- Trigger has `role=\"button\"` and `tabIndex=\"0\"` for keyboard access\n- Trigger has `aria-expanded` to indicate open/closed state\n- Trigger has `aria-controls` pointing to the content element\n- Content has `aria-hidden` matching the collapsed state\n- Supports keyboard navigation (Enter and Space to toggle)",
+  "related": [],
+  "storybook": null,
+  "summary": "The `Collapse` component provides an expandable/collapsible content panel.",
+  "import": "import { Collapse } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/Collapse.tsx",
+  "rootClass": "collapse",
+  "parts": [
+    {
+      "path": "Collapse",
+      "summary": "The `Collapse` component provides an expandable/collapsible content panel.",
+      "component": null,
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": null,
+          "description": "Controlled open state. If provided, component is controlled.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Initial open state for uncontrolled usage.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onOpen",
+          "type": "() => void",
+          "default": null,
+          "description": "Callback when collapse opens.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "default": null,
+          "description": "Callback when collapse closes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "trigger",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The clickable trigger element (header/button).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "animation",
+          "type": "'fade' | 'slide' | false",
+          "default": "'fade'",
+          "description": "Animation style, or `false` to disable.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "position",
+          "type": "'top' | 'bottom'",
+          "default": "'top'",
+          "description": "Position of the trigger relative to content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ariaId",
+          "type": "string",
+          "default": "auto",
+          "description": "Custom aria id for accessibility.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "bordered",
+          "type": "boolean",
+          "default": "false",
+          "description": "Adds a border around the collapse.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "triggerClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the trigger wrapper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the content wrapper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The collapsible content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-collapse-margin-bottom",
+      "sass": "$collapse-margin-bottom",
+      "default": "0.5rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-border-color",
+      "sass": "$collapse-border-color",
+      "default": "var(--bulma-border)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-radius",
+      "sass": "$collapse-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-trigger-icon-size",
+      "sass": "$collapse-trigger-icon-size",
+      "default": "1.5em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-trigger-icon-margin",
+      "sass": "$collapse-trigger-icon-margin",
+      "default": "0.5em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-header-weight",
+      "sass": "$collapse-header-weight",
+      "default": "var(--bulma-weight-semibold)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-collapse-group-gap",
+      "sass": "$collapse-group-gap",
+      "default": "0.5rem",
+      "scope": "component"
+    }
+  ]
+}

package/data/components/Column.json

@@ -0,0 +1,284 @@
+{
+  "name": "Column",
+  "kind": "component",
+  "category": "columns",
+  "slug": "columns/column",
+  "docsUrl": "https://bestax.io/docs/api/columns/column",
+  "examples": [
+    {
+      "title": "Basic Columns Example",
+      "code": "import { Columns, Column } from '@allxsmith/bestax-bulma';\nimport { Notification } from '@allxsmith/bestax-bulma/elements/Notification';\n\n<Columns>\n  <Column>\n    <Notification color=\"primary\">First column</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"info\">Second column</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"link\">Third column</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"warning\">Fourth column</Notification>\n  </Column>\n</Columns>;"
+    },
+    {
+      "title": "Column Sizes",
+      "code": "<>\n  <Columns>\n    <Column size=\"four-fifths\">\n      <Notification color=\"primary\">is-four-fifths</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"three-quarters\">\n      <Notification color=\"primary\">is-three-quarters</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"two-thirds\">\n      <Notification color=\"primary\">is-two-thirds</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"three-fifths\">\n      <Notification color=\"primary\">is-three-fifths</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"half\">\n      <Notification color=\"primary\">is-half</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"two-fifths\">\n      <Notification color=\"primary\">is-two-fifths</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"one-third\">\n      <Notification color=\"primary\">is-one-third</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"one-quarter\">\n      <Notification color=\"primary\">is-one-quarter</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n\n  <Columns>\n    <Column size=\"one-fifth\">\n      <Notification color=\"primary\">is-one-fifth</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"primary\">Auto</Notification>\n    </Column>\n  </Columns>\n</>"
+    },
+    {
+      "title": "12 Column System",
+      "code": "<>\n  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(num => (\n    <Columns key={num}>\n      <Column size={num}>\n        <Notification color=\"primary\">\n          {num === 1 ? 1 : `is-${num}`}\n        </Notification>\n      </Column>\n      {num === 11 && (\n        <Column>\n          <Notification color=\"primary\">1</Notification>\n        </Column>\n      )}\n      {num < 11 && (\n        <Column>\n          <Notification color=\"primary\">Auto</Notification>\n        </Column>\n      )}\n      {num < 10 && (\n        <Column>\n          <Notification color=\"primary\">Auto</Notification>\n        </Column>\n      )}\n    </Columns>\n  ))}\n</>"
+    },
+    {
+      "title": "Responsive Column Sizes",
+      "code": "<Columns isMobile>\n  <Column\n    sizeMobile=\"three-quarters\"\n    sizeTablet=\"two-thirds\"\n    sizeDesktop=\"half\"\n    sizeWidescreen=\"one-third\"\n    sizeFullhd=\"one-quarter\"\n  >\n    <Notification color=\"primary\">\n      <code>sizeMobile=\"three-quarters\"</code>\n      <br />\n      <code>sizeTablet=\"two-thirds\"</code>\n      <br />\n      <code>sizeDesktop=\"half\"</code>\n      <br />\n      <code>sizeWidescreen=\"one-third\"</code>\n      <br />\n      <code>sizeFullhd=\"one-quarter\"</code>\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">2</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">3</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">4</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">5</Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Offsets",
+      "code": "<>\n  <Columns isMobile>\n    <Column size=\"half\" offset=\"one-quarter\">\n      <Notification color=\"primary\">is-half is-offset-one-quarter</Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size=\"three-fifths\" offset=\"one-fifth\">\n      <Notification color=\"primary\">\n        is-three-fifths is-offset-one-fifth\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size={4} offset={8}>\n      <Notification color=\"primary\">is-4 is-offset-8</Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size={11} offset={1}>\n      <Notification color=\"primary\">is-11 is-offset-1</Notification>\n    </Column>\n  </Columns>\n</>"
+    },
+    {
+      "title": "Narrow Columns",
+      "code": "<Columns>\n  <Column isNarrow>\n    <Notification color=\"primary\" style={{ width: 180 }}>\n      <Strong>Narrow column</Strong>\n      <br />\n      <Span>This column is only as wide as it needs to be, 180px wide.</Span>\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">\n      <Strong>Flexible column</Strong>\n      <br />\n      <Span>This column will take up the remaining space available.</Span>\n    </Notification>\n  </Column>\n</Columns>"
+    }
+  ],
+  "accessibility": null,
+  "related": [],
+  "storybook": null,
+  "summary": "The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.",
+  "import": "import { Column } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/columns/Column.tsx",
+  "rootClass": "column",
+  "parts": [
+    {
+      "path": "Column",
+      "summary": "The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the column.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "textColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Text color.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Bulma color modifier for the column.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "size",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Column size (see Bulma docs).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sizeMobile",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Size for mobile breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sizeTablet",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Size for tablet breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sizeDesktop",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Size for desktop breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sizeWidescreen",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Size for widescreen breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "sizeFullhd",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Size for fullhd breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offset",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for column.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offsetMobile",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for mobile.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offsetTablet",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for tablet.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offsetDesktop",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for desktop.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offsetWidescreen",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for widescreen.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "offsetFullhd",
+          "type": "BulmaColumnSize",
+          "default": null,
+          "description": "Offset for fullhd.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrow",
+          "type": "boolean",
+          "default": "false",
+          "description": "Column is only as wide as its content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowMobile",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on mobile.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowTablet",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on tablet.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowTouch",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on touch devices.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowDesktop",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on desktop.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowWidescreen",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on widescreen.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isNarrowFullhd",
+          "type": "boolean",
+          "default": "false",
+          "description": "The column is narrow on fullhd.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Children to render inside the column.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": [
+        {
+          "name": "BulmaColumnSize",
+          "expansion": "number | 'full' | 'half' | 'one-third' | 'two-thirds' | 'one-quarter' | 'three-quarters' | 'one-fifth' | 'two-fifths' | 'three-fifths' | 'four-fifths'",
+          "summary": "Possible values for Bulma column size."
+        }
+      ]
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-column-gap",
+      "sass": "$column-gap",
+      "default": "0.75rem",
+      "scope": "global"
+    }
+  ]
+}