bestax-mcp 0.0.0

package/data/components/Columns.json

@@ -0,0 +1,542 @@
+{
+  "name": "Columns",
+  "kind": "component",
+  "category": "columns",
+  "slug": "columns/columns",
+  "docsUrl": "https://bestax.io/docs/api/columns/columns",
+  "examples": [
+    {
+      "title": "Basic Columns",
+      "code": "<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": "Columns on Mobile and Desktop",
+      "code": "<>\n  {\n    // Columns enabled on mobile screens and up\n  }\n  <Columns isMobile>\n    <Column>\n      <Notification color=\"primary\">1</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>\n\n  {\n    // Columns enabled on desktop screens and up\n  }\n  <Columns isDesktop>\n    <Column>\n      <Notification color=\"primary\">1</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>\n</>"
+    },
+    {
+      "title": "Different Column Sizes Per Breakpoint",
+      "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": "Nested Columns",
+      "code": "<Columns>\n  <Column>\n    <Notification color=\"primary\">First column</Notification>\n    <Columns isMobile>\n      <Column>\n        <Notification color=\"primary\">First nested column</Notification>\n      </Column>\n      <Column>\n        <Notification color=\"primary\">Second nested column</Notification>\n      </Column>\n    </Columns>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">Second column</Notification>\n    <Columns isMobile>\n      <Column size=\"half\">\n        <Notification color=\"primary\">50%</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  </Column>\n</Columns>"
+    },
+    {
+      "title": "Gap Sizes & Responsive Gaps",
+      "code": "<>\n  <Columns gap={0}>\n    <Column>\n      <Notification color=\"primary\" radius=\"radiusless\">\n        gap=0\n      </Notification>\n    </Column>\n    <Column>\n      <Notification color=\"info\" radius=\"radiusless\">\n        gap=0\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns gap={3}>\n    <Column>\n      <Notification color=\"primary\">gap=3</Notification>\n    </Column>\n    <Column>\n      <Notification color=\"info\">gap=3</Notification>\n    </Column>\n  </Columns>\n  <Columns gapMobile={1} gapTablet={3} gapDesktop={6}>\n    <Column>\n      <Notification color=\"primary\">\n        gapMobile=1 gapTablet=3 gapDesktop=6\n      </Notification>\n    </Column>\n    <Column>\n      <Notification color=\"info\">\n        gapMobile=1 gapTablet=3 gapDesktop=6\n      </Notification>\n    </Column>\n  </Columns>\n</>"
+    },
+    {
+      "title": "Offsets",
+      "code": "<>\n  <Columns isMobile>\n    <Column size=\"half\" offset=\"one-quarter\">\n      <Notification color=\"primary\">\n        <code>size=\"half\" offset=\"one-quarter\"</code>\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size=\"three-fifths\" offset=\"one-fifth\">\n      <Notification color=\"primary\">\n        <code>size=\"three-fifths\" offset=\"one-fifth\"</code>\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size={4} offset={8}>\n      <Notification color=\"primary\">\n        <code>\n          size={4} offset={8}\n        </code>\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns isMobile>\n    <Column size={11} offset={1}>\n      <Notification color=\"primary\">\n        <code>size=11 offset=1</code>\n      </Notification>\n    </Column>\n  </Columns>\n</>"
+    },
+    {
+      "title": "Narrow Columns",
+      "code": "<Columns>\n  <Column isNarrow>\n    <Notification color=\"primary\" style={{ width: 200 }}>\n      <Strong>Narrow column</Strong>\n      <br />\n      <Span>This column is only 200px 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>"
+    },
+    {
+      "title": "Gapless Columns",
+      "code": "<Columns isGapless>\n  <Column>\n    <Notification color=\"primary\" radius=\"radiusless\">\n      1\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"info\" radius=\"radiusless\">\n      2\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"success\" radius=\"radiusless\">\n      3\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"warning\" radius=\"radiusless\">\n      4\n    </Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Multiline and Gapless",
+      "code": "<Columns isGapless isMultiline isMobile>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"info\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"success\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"warning\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"half\">\n    <Notification color=\"danger\" radius=\"radiusless\">\n      is-half\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"link\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"dark\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\" radius=\"radiusless\">\n      is-one-quarter\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"info\" radius=\"radiusless\">\n      Auto\n    </Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Variable Gap",
+      "code": "<>\n  <Columns gap={2}>\n    <Column size={3}>\n      <Notification color=\"primary\" textAlign=\"centered\">\n        Side\n      </Notification>\n    </Column>\n    <Column size={9}>\n      <Notification color=\"primary\" textAlign=\"centered\">\n        Main\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns gap={2}>\n    <Column size={4}>\n      <Notification color=\"primary\" textAlign=\"centered\">\n        Three columns\n      </Notification>\n    </Column>\n    <Column size={4}>\n      <Notification color=\"primary\" textAlign=\"centered\">\n        Three columns\n      </Notification>\n    </Column>\n    <Column size={4}>\n      <Notification color=\"primary\" textAlign=\"centered\">\n        Three columns\n      </Notification>\n    </Column>\n  </Columns>\n  <Columns gap={2}>\n    {Array.from({ length: 6 }).map((_, i) => (\n      <Column key={i + 1}>\n        <Notification color=\"primary\" textAlign=\"centered\">\n          {i + 1}\n        </Notification>\n      </Column>\n    ))}\n  </Columns>\n</>"
+    },
+    {
+      "title": "Breakpoint Based Column Gaps",
+      "code": "<Columns\n  gapMobile={1}\n  gapTablet={4}\n  gapDesktop={3}\n  gapWidescreen={8}\n  gapFullhd={2}\n>\n  {[...Array(3)].map((_, idx) => (\n    <Column key={idx}>\n      <Notification color=\"primary\">Column</Notification>\n    </Column>\n  ))}\n</Columns>"
+    },
+    {
+      "title": "Vertical Alignment",
+      "code": "<Columns isVCentered>\n  <Column size={8}>\n    <Notification color=\"primary\">First column</Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">\n      Can you see the vertical alignment? It should be really noticable with\n      these two columns.\n    </Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Multiline Columns",
+      "code": "<Columns isMultiline isMobile>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"half\">\n    <Notification color=\"primary\">\n      <code>is-half</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column size=\"one-quarter\">\n    <Notification color=\"primary\">\n      <code>is-one-quarter</code>\n    </Notification>\n  </Column>\n  <Column>\n    <Notification color=\"primary\">Auto</Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Centering Columns",
+      "code": "<Columns isMobile isCentered>\n  <Column size=\"half\">\n    <Notification color=\"primary\">\n      <code className=\"html\">is-half</code>\n      <br />\n    </Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Multiline Centered Columns",
+      "code": "<Columns isMobile isMultiline isCentered>\n  <Column isNarrow>\n    <Notification color=\"primary\">\n      <code className=\"html\">is-narrow</code>\n      <br />\n      First Column\n    </Notification>\n  </Column>\n  <Column isNarrow>\n    <Notification color=\"primary\">\n      <code className=\"html\">is-narrow</code>\n      <br />\n      Our Second Column\n    </Notification>\n  </Column>\n  <Column isNarrow>\n    <Notification color=\"primary\">\n      <code className=\"html\">is-narrow</code>\n      <br />\n      Third Column\n    </Notification>\n  </Column>\n  <Column isNarrow>\n    <Notification color=\"primary\">\n      <code className=\"html\">is-narrow</code>\n      <br />\n      The Fourth Column\n    </Notification>\n  </Column>\n  <Column isNarrow>\n    <Notification color=\"primary\">\n      <code className=\"html\">is-narrow</code>\n      <br />\n      Fifth Column\n    </Notification>\n  </Column>\n</Columns>"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Columns>\n  <Columns.Column>\n    <Notification color=\"primary\">First column</Notification>\n  </Columns.Column>\n  <Columns.Column>\n    <Notification color=\"info\">Second column</Notification>\n  </Columns.Column>\n</Columns>"
+    }
+  ],
+  "accessibility": null,
+  "related": [],
+  "storybook": null,
+  "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.",
+  "import": "import { Columns, Column } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/columns/Columns.tsx",
+  "rootClass": "columns",
+  "parts": [
+    {
+      "path": "Columns",
+      "summary": "The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes for the columns container.",
+          "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 all columns.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color for all columns.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "isCentered",
+          "type": "boolean",
+          "default": "false",
+          "description": "Horizontally center columns within the container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isGapless",
+          "type": "boolean",
+          "default": "false",
+          "description": "Remove gap between columns.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isMultiline",
+          "type": "boolean",
+          "default": "false",
+          "description": "Allow columns to wrap to multiple lines.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isVCentered",
+          "type": "boolean",
+          "default": "false",
+          "description": "Vertically center columns within the container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isMobile",
+          "type": "boolean",
+          "default": "false",
+          "description": "Apply columns layout on mobile and up.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isDesktop",
+          "type": "boolean",
+          "default": "false",
+          "description": "Apply columns layout on desktop and up.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gap",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapMobile",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for mobile. Wins over `gapSizeMobile` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapTablet",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for tablet. Wins over `gapSizeTablet` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapDesktop",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for desktop. Wins over `gapSizeDesktop` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapWidescreen",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for widescreen. Wins over `gapSizeWidescreen` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapFullhd",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for fullhd. Wins over `gapSizeFullhd` if both are set.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "gapSize",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for all breakpoints.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gap` instead — `gap` wins if both are set."
+        },
+        {
+          "name": "gapSizeMobile",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for mobile.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gapMobile` instead — `gapMobile` wins if both are set."
+        },
+        {
+          "name": "gapSizeTablet",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for tablet.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gapTablet` instead — `gapTablet` wins if both are set."
+        },
+        {
+          "name": "gapSizeDesktop",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for desktop.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gapDesktop` instead — `gapDesktop` wins if both are set."
+        },
+        {
+          "name": "gapSizeWidescreen",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for widescreen.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gapWidescreen` instead — `gapWidescreen` wins if both are set."
+        },
+        {
+          "name": "gapSizeFullhd",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'",
+          "default": null,
+          "description": "Gap size for fullhd.",
+          "required": false,
+          "inherited": false,
+          "deprecated": true,
+          "deprecationNote": "Use `gapFullhd` instead — `gapFullhd` wins if both are set."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Columns to render within the container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "Columns.Column",
+      "summary": "The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.",
+      "component": "Column",
+      "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": []
+}

package/data/components/ConfigProvider.json

@@ -0,0 +1,16 @@
+{
+  "name": "ConfigProvider",
+  "kind": "helper",
+  "category": "helpers",
+  "slug": "helpers/config",
+  "docsUrl": "https://bestax.io/docs/api/helpers/config",
+  "examples": [],
+  "accessibility": null,
+  "related": [],
+  "storybook": null,
+  "summary": "The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.",
+  "import": "import { ConfigProvider } from '@allxsmith/bestax-bulma';",
+  "doc": "# ConfigProvider\n\n## Overview\n\nThe `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components. Currently, it supports setting a `classPrefix` that will be automatically applied to **all Bulma CSS classes**, including both main component classes (like `button`, `box`, `title`) and helper/modifier classes (like `is-primary`, `has-text-centered`, `m-4`), allowing you to namespace Bulma classes to avoid conflicts with other CSS frameworks or customize the class naming convention.\n\n---\n\n## Import\n\n```tsx\nimport { ConfigProvider, useConfig } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Hooks\n\n### useConfig\n\nReturns the current configuration context values.\n\n```tsx\nconst { classPrefix } = useConfig();\n```\n\n### useClassPrefix\n\nConvenience hook that returns just the classPrefix string (or empty string if not set).\n\n```tsx\nconst classPrefix = useClassPrefix();\n```\n\n---\n\n## Usage Examples\n\n### Basic Usage with Class Prefix\n\nUse `ConfigProvider` to add a prefix to all Bulma CSS classes within its scope:\n\n```tsx\nimport {\n  ConfigProvider,\n  Box,\n  Title,\n  Button,\n  Notification,\n} from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <div>\n      <Title size=\"3\">Prefixed Bulma Components</Title>\n      <p>\n        This demonstrates using ConfigProvider with{' '}\n        <code>classPrefix=\"bestax-\"</code> to add the \"bestax-\" prefix to all\n        component CSS classes. This is useful when integrating Bulma with other\n        CSS frameworks or when you need to namespace Bulma classes to avoid\n        conflicts.\n      </p>\n\n      <Notification color=\"info\" mt=\"4\">\n        <strong>Tip:</strong> Open your browser's developer tools and inspect\n        the DOM elements below. You'll see that all Bulma CSS classes have the\n        \"bestax-\" prefix applied.\n      </Notification>\n\n      <ConfigProvider classPrefix=\"bestax-\">\n        <Box mt=\"4\" p=\"4\">\n          {/* \n            This Box will have classes:\n            - bestax-box (main class)\n            - bestax-mt-4 (helper class)\n            - bestax-p-4 (helper class)\n          */}\n          <Title size=\"4\">Prefixed Components</Title>\n          {/* \n            This Title will have classes:\n            - bestax-title (main class)\n            - bestax-is-4 (modifier class)\n          */}\n          <p>\n            All components inside this ConfigProvider will have their CSS\n            classes prefixed with \"bestax-\". This allows you to use Bulma\n            alongside other CSS frameworks without class name conflicts.\n          </p>\n          <Button color=\"primary\" mt=\"3\" isRounded>\n            {/* \n              This Button will have classes:\n              - bestax-button (main class)\n              - bestax-is-primary (modifier class)\n              - bestax-is-rounded (modifier class)\n              - bestax-mt-3 (helper class)\n            */}\n            Bulma-Prefixed Button\n          </Button>\n        </Box>\n      </ConfigProvider>\n\n      <Box mt=\"4\" p=\"4\">\n        <Title size=\"4\">Standard Components (No Prefix)</Title>\n        <p>\n          Components outside the ConfigProvider use standard Bulma classes\n          without any prefix.\n        </p>\n        <Button color=\"info\">Standard Button</Button>\n      </Box>\n    </div>\n  );\n}\n```\n\n### Nested ConfigProviders\n\nConfigProviders can be nested, with inner providers overriding outer settings:\n\n```tsx\nfunction NestedExample() {\n  return (\n    <ConfigProvider classPrefix=\"outer-\">\n      <Box p=\"4\">\n        <Title>Outer Prefix (outer-)</Title>\n\n        <ConfigProvider classPrefix=\"inner-\">\n          <Box p=\"4\" mt=\"3\">\n            <Title>Inner Prefix (inner-)</Title>\n            <Button color=\"primary\">Inner Button</Button>\n          </Box>\n        </ConfigProvider>\n\n        <Button color=\"info\" mt=\"3\">\n          Outer Button\n        </Button>\n      </Box>\n    </ConfigProvider>\n  );\n}\n```\n\n### Using Configuration in Custom Components\n\nAccess the configuration in your own components using the `useConfig` hook:\n\n```tsx\nimport { useConfig } from '@allxsmith/bestax-bulma';\n\nfunction CustomComponent() {\n  const { classPrefix } = useConfig();\n  const className = classPrefix\n    ? `${classPrefix}custom-component`\n    : 'custom-component';\n\n  return (\n    <div className={className}>\n      My custom component with prefix: {classPrefix || 'none'}\n    </div>\n  );\n}\n```\n\n---\n\n## Use Cases\n\n### Framework Integration\n\nWhen integrating Bulma with other CSS frameworks like Bootstrap or Tailwind CSS:\n\n```tsx\n<ConfigProvider classPrefix=\"bestax-\">\n  <App />\n</ConfigProvider>\n```\n\nThis ensures all Bulma classes are prefixed with `bestax-`, preventing conflicts with other framework classes.\n\n### Multi-tenant Applications\n\nFor applications that need to support different styling themes or brands:\n\n```tsx\n<ConfigProvider classPrefix={`${tenantName}-`}>\n  <TenantApp />\n</ConfigProvider>\n```\n\n### Component Library Wrapping\n\nWhen wrapping Bulma UI components in your own component library:\n\n```tsx\n<ConfigProvider classPrefix=\"mylib-\">\n  <MyComponentLibrary />\n</ConfigProvider>\n```\n\n---\n\n## Notes\n\n- The `classPrefix` is applied to **all Bulma classes**:\n  - Main component classes (e.g., `button` → `bestax-button`, `box` → `bestax-box`)\n  - Helper/modifier classes (e.g., `is-primary` → `bestax-is-primary`, `has-text-centered` → `bestax-has-text-centered`)\n  - Spacing classes (e.g., `m-4` → `bestax-m-4`, `p-2` → `bestax-p-2`)\n  - All other Bulma utility classes\n- Changes to the `classPrefix` will affect all child components immediately\n- If no `classPrefix` is provided, components use standard Bulma class names\n- The ConfigProvider must wrap all components that should inherit the configuration\n\n---\n\n## TypeScript Support\n\nFull TypeScript support is included:\n\n```tsx\ninterface ConfigContextProps {\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n\ninterface ConfigProviderProps {\n  children: ReactNode;\n  classPrefix?: string;\n  iconLibrary?: 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\n}\n```\n\n---\n\n## Props\n\n| Prop          | Type                                                               | Description                                                                                                     |\n| ------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |\n| `children`    | `ReactNode`                                                        | The child components that will inherit the configuration settings.                                              |\n| `classPrefix` | `string`                                                           | Optional prefix to add to all Bulma CSS classes. Useful for namespacing when integrating with other frameworks. |\n| `iconLibrary` | `'fa' \\| 'mdi' \\| 'ion' \\| 'material-icons' \\| 'material-symbols'` | Default icon library for all child components.                                                                  |",
+  "parts": [],
+  "cssVars": []
+}