bestax-mcp 0.0.0

package/data/components/Container.json

@@ -0,0 +1,149 @@
+{
+  "name": "Container",
+  "kind": "component",
+  "category": "layout",
+  "slug": "layout/container",
+  "docsUrl": "https://bestax.io/docs/api/layout/container",
+  "examples": [
+    {
+      "title": "Default Container",
+      "code": "<Container>\n  <Notification color=\"primary\">\n    By default the container is <Strong>centered</Strong> on desktop viewports\n    and up.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "Widescreen Container",
+      "code": "<Container widescreen>\n  <Notification color=\"primary\">\n    If <code>breakpoint=\"widescreen\"</code> the container is{' '}\n    <Strong>fullwidth</Strong> <em>until</em> the <code>widescreen</code>{' '}\n    breakpoint.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "FullHD Container",
+      "code": "<Container fullhd>\n  <Notification color=\"primary\">\n    If <code>breakpoint=\"fullhd\"</code> the container is{' '}\n    <Strong>fullwidth</Strong> <em>until</em> the <code>fullhd</code>{' '}\n    breakpoint.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "Max Tablet Width",
+      "code": "<Container breakpoint=\"tablet\" isMax>\n  <Notification color=\"primary\">\n    If the container has <code>breakpoint=\"tablet\"</code> and <code>isMax</code>{' '}\n    then the container will have a <code>max-width</code> of{' '}\n    <code>tablet - container offset</code>.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "Max Width Desktop",
+      "code": "<Container breakpoint=\"desktop\" isMax>\n  <Notification color=\"primary\">\n    If the container has <code>breakpoint=\"desktop\"</code> and{' '}\n    <code>isMax</code> then the container will have a <code>max-width</code> of{' '}\n    <code>desktop - container offset</code>.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "Max Width Widescreen",
+      "code": "<Container breakpoint=\"widescreen\" isMax>\n  <Notification color=\"primary\">\n    If the container has <code>breakpoint=\"widescreen\"</code> and{' '}\n    <code>isMax</code> then the container will have a <code>max-width</code> of{' '}\n    <code>widescreen - container offset</code>.\n  </Notification>\n</Container>"
+    },
+    {
+      "title": "Fluid Container",
+      "code": "<Container fluid>\n  <Notification color=\"primary\">\n    If the container has <code>fluid</code> it will expand to the full width of\n    the screen, with a small 32px gap on each side.\n  </Notification>\n</Container>"
+    }
+  ],
+  "accessibility": "- The container renders as a semantic `<div>` by default.\n- Use semantic HTML and accessible children within the container for best practices.",
+  "related": ["Notification", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/layout-container--default",
+  "summary": "The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.",
+  "import": "import { Container } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/layout/Container.tsx",
+  "rootClass": "container",
+  "parts": [
+    {
+      "path": "Container",
+      "summary": "The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "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": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Text color alias: renders `has-text-<color>`, exactly like `textColor`. Not a filled variant (no `.container.is-<color>` CSS exists). Prefer `textColor`, which takes precedence when both are set; use `bgColor` for a colored surface.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "fluid",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the container full-width with a 32px gap on each side.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "widescreen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the container full-width until the `widescreen` breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "fullhd",
+          "type": "boolean",
+          "default": "false",
+          "description": "Makes the container full-width until the `fullhd` breakpoint.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "breakpoint",
+          "type": "'tablet' | 'desktop' | 'widescreen'",
+          "default": null,
+          "description": "Responsive breakpoint for container (`is-tablet`, `is-desktop`, `is-widescreen`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isMax",
+          "type": "boolean",
+          "default": "false",
+          "description": "Uses Bulma's `is-max-*` class for the specified breakpoint, limiting max width.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Content inside the container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": []
+}

package/data/components/Content.json

@@ -0,0 +1,228 @@
+{
+  "name": "Content",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/content",
+  "docsUrl": "https://bestax.io/docs/api/elements/content",
+  "examples": [
+    {
+      "title": "Default Content",
+      "code": "<Content>\n  <p>This is a paragraph inside Content.</p>\n</Content>"
+    },
+    {
+      "title": "Primary Text Color",
+      "code": "<Content textColor=\"primary\">Content with Primary Text</Content>"
+    },
+    {
+      "title": "Light Background",
+      "code": "<Content bgColor=\"light\">Content with Light Background</Content>"
+    },
+    {
+      "title": "Medium Size",
+      "code": "<Content size=\"medium\">Content with Medium Size</Content>"
+    },
+    {
+      "title": "Spacing and Alignment",
+      "code": "<Content m=\"4\" p=\"4\" textAlign=\"centered\">\n  Content with Margin, Padding, and Centered Text\n</Content>"
+    },
+    {
+      "title": "Custom Class",
+      "code": "<Content className=\"custom-content-class\">Content with Custom Class</Content>"
+    },
+    {
+      "title": "Viewport-Specific Text Color",
+      "code": "<Content textColor=\"primary\" viewport=\"tablet\">\n  Content with Tablet-specific Primary Text\n</Content>"
+    },
+    {
+      "title": "Interactive Content",
+      "code": "<Content\n  textColor=\"success\"\n  bgColor=\"dark\"\n  size=\"large\"\n  m=\"3\"\n  p=\"3\"\n  textAlign=\"right\"\n>\n  Interactive Content\n</Content>"
+    },
+    {
+      "title": "Typographic Elements",
+      "code": "<Content textColor=\"info\" p=\"3\">\n  <h1>Heading 1</h1>\n  <p>This is a paragraph styled by Bulma’s content class.</p>\n  <ul>\n    <li>Item 1</li>\n    <li>Item 2</li>\n  </ul>\n  <blockquote>This is a blockquote styled by Bulma.</blockquote>\n</Content>"
+    },
+    {
+      "title": "Rich Content (all HTML tags, various sizes)",
+      "code": "<Content size=\"small\" textColor=\"primary\" p=\"3\">\n  <h1>Lorem Ipsum Heading</h1>\n  <p>\n    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.\n  </p>\n  <ul>\n    <li>Lorem ipsum</li>\n    <li>Consectetur</li>\n    <li>Sed do eiusmod</li>\n  </ul>\n  <ol>\n    <li>First item</li>\n    <li>Second item</li>\n  </ol>\n  <blockquote>\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.\n  </blockquote>\n  <table>\n    <thead>\n      <tr>\n        <th>Header 1</th>\n        <th>Header 2</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>Row 1, Cell 1</td>\n        <td>Row 1, Cell 2</td>\n      </tr>\n    </tbody>\n  </table>\n</Content>"
+    }
+  ],
+  "accessibility": "- **Semantic HTML:** Use semantic elements (`<h1>`, `<ul>`, `<table>`, etc.) as children of `Content`.\n- **Contrast:** Use appropriate text and background color combinations for readability.\n- **Headings:** Keep heading structure meaningful for screen readers.\n\n:::tip\nThe `Content` component does not add ARIA roles. You are responsible for semantic HTML structure within it.\n:::",
+  "related": ["Block", "Box", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-content--default",
+  "summary": "The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.",
+  "import": "import { Content } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Content.tsx",
+  "rootClass": "content",
+  "parts": [
+    {
+      "path": "Content",
+      "summary": "The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists, and tables.",
+      "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 (e.g., `'danger'` for `has-text-danger`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Text color alias: renders `has-text-<color>`, exactly like `textColor`. Not a filled variant (no `.content.is-<color>` CSS exists). Prefer `textColor`, which takes precedence when both are set; use `bgColor` for a colored surface.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "bgColor",
+          "type": "Bulma color | 'inherit' | 'current'",
+          "default": null,
+          "description": "Background color helper (e.g., `'info'` for `has-background-info`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size modifier for the content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Content to be rendered inside the block.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-content-heading-color",
+      "sass": "$content-heading-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-heading-weight",
+      "sass": "$content-heading-weight",
+      "default": "var(--bulma-weight-extrabold)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-heading-line-height",
+      "sass": "$content-heading-line-height",
+      "default": "1.125",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-block-margin-bottom",
+      "sass": "$content-block-margin-bottom",
+      "default": "1em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-blockquote-background-color",
+      "sass": "$content-blockquote-background-color",
+      "default": "var(--bulma-background)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-blockquote-border-left",
+      "sass": "$content-blockquote-border-left",
+      "default": "5px solid var(--bulma-border)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-blockquote-padding",
+      "sass": "$content-blockquote-padding",
+      "default": "1.25em 1.5em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-pre-padding",
+      "sass": "$content-pre-padding",
+      "default": "1.25em 1.5em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-cell-border",
+      "sass": "$content-table-cell-border",
+      "default": "1px solid var(--bulma-border)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-cell-border-width",
+      "sass": "$content-table-cell-border-width",
+      "default": "0 0 1px",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-cell-padding",
+      "sass": "$content-table-cell-padding",
+      "default": "0.5em 0.75em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-cell-heading-color",
+      "sass": "$content-table-cell-heading-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-head-cell-border-width",
+      "sass": "$content-table-head-cell-border-width",
+      "default": "0 0 2px",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-head-cell-color",
+      "sass": "$content-table-head-cell-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-body-last-row-cell-border-bottom-width",
+      "sass": "$content-table-body-last-row-cell-border-bottom-width",
+      "default": "0",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-foot-cell-border-width",
+      "sass": "$content-table-foot-cell-border-width",
+      "default": "2px 0 0",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-content-table-foot-cell-color",
+      "sass": "$content-table-foot-cell-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    }
+  ]
+}