bestax-mcp 0.0.0

package/data/components/Paragraph.json

@@ -0,0 +1,107 @@
+{
+  "name": "Paragraph",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/paragraph",
+  "docsUrl": "https://bestax.io/docs/api/elements/paragraph",
+  "examples": [
+    {
+      "title": "Default Paragraph",
+      "code": "<Paragraph>\n  This is a default paragraph. It contains some sample text to demonstrate the\n  component.\n</Paragraph>"
+    },
+    {
+      "title": "Primary Color Paragraph",
+      "code": "<Paragraph textColor=\"primary\">\n  This paragraph has primary colored text.\n</Paragraph>"
+    },
+    {
+      "title": "Centered Text",
+      "code": "<Paragraph textAlign=\"centered\">This paragraph is centered.</Paragraph>"
+    },
+    {
+      "title": "Paragraph with Background",
+      "code": "<Paragraph bgColor=\"dark\" textColor=\"white\" p=\"3\">\n  This paragraph has a dark background.\n</Paragraph>"
+    },
+    {
+      "title": "Large Text",
+      "code": "<Paragraph textSize=\"3\">This is a large paragraph.</Paragraph>"
+    },
+    {
+      "title": "Small Text",
+      "code": "<Paragraph textSize=\"7\">This is a small paragraph.</Paragraph>"
+    },
+    {
+      "title": "Justified Text",
+      "code": "<Block style={{ maxWidth: '400px' }}>\n  <Paragraph textAlign=\"justified\">\n    This paragraph has justified text alignment. Lorem ipsum dolor sit amet,\n    consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et\n    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n    ullamco laboris.\n  </Paragraph>\n</Block>"
+    },
+    {
+      "title": "All Colors",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n  <Paragraph textColor=\"primary\">Primary paragraph</Paragraph>\n  <Paragraph textColor=\"link\">Link paragraph</Paragraph>\n  <Paragraph textColor=\"info\">Info paragraph</Paragraph>\n  <Paragraph textColor=\"success\">Success paragraph</Paragraph>\n  <Paragraph textColor=\"warning\">Warning paragraph</Paragraph>\n  <Paragraph textColor=\"danger\">Danger paragraph</Paragraph>\n</Block>"
+    },
+    {
+      "title": "Stacked Paragraphs",
+      "code": "<Content style={{ maxWidth: '500px' }}>\n  <Paragraph>\n    First paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Paragraph>\n  <Paragraph>\n    Second paragraph. Sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua.\n  </Paragraph>\n  <Paragraph>\n    Third paragraph. Ut enim ad minim veniam, quis nostrud exercitation.\n  </Paragraph>\n</Content>"
+    },
+    {
+      "title": "Highlighted Paragraph",
+      "code": "<Paragraph bgColor=\"dark\" textColor=\"white\" p=\"4\">\n  This is a highlighted paragraph with dark background.\n</Paragraph>"
+    }
+  ],
+  "accessibility": "- **Semantic Structure:** Use paragraphs to wrap distinct blocks of text for proper document structure.\n- **Color Contrast:** Ensure sufficient contrast between text and background colors for readability.\n- **Heading Order:** Paragraphs should follow proper heading hierarchy in your document.\n\n:::info\nFor semantic emphasis within paragraphs, use `<strong>` (Strong) or `<em>` (Emphasis) components.\n:::",
+  "related": ["Content", "Emphasis", "Span", "Strong", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-paragraph--default",
+  "summary": "The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.",
+  "import": "import { Paragraph } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Paragraph.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "Paragraph",
+      "summary": "The `Paragraph` component renders a styled `<p>` 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": "Content to render inside the paragraph.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <p> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": []
+}

package/data/components/Pre.json

@@ -0,0 +1,114 @@
+{
+  "name": "Pre",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/pre",
+  "docsUrl": "https://bestax.io/docs/api/elements/pre",
+  "examples": [
+    {
+      "title": "Default Pre",
+      "code": "<Pre>{`function hello() {\n  console.log(\"Hello, World!\");\n}`}</Pre>"
+    },
+    {
+      "title": "With Code Element",
+      "code": "<Pre>\n  <Code>{`const greeting = \"Hello\";\nconst name = \"World\";\nconsole.log(\\`\\${greeting}, \\${name}!\\`);`}</Code>\n</Pre>"
+    },
+    {
+      "title": "Dark Background",
+      "code": "<Pre bgColor=\"dark\" textColor=\"white\" p=\"4\">{`pnpm add @allxsmith/bestax-bulma\npnpm build`}</Pre>"
+    },
+    {
+      "title": "Light Background",
+      "code": "<Pre bgColor=\"light\" p=\"4\">{`{\n  \"name\": \"my-app\",\n  \"version\": \"1.0.0\"\n}`}</Pre>"
+    },
+    {
+      "title": "Terminal Output",
+      "code": "<Pre bgColor=\"dark\" textColor=\"success\" p=\"4\">{`$ pnpm build\n> @allxsmith/bestax-bulma@2.0.0 build\n> tsc && vite build\n\nvite v6.0.0 building for production...\n✓ 123 modules transformed.\ndist/index.js  45.23 kB\n✓ built in 2.34s`}</Pre>"
+    },
+    {
+      "title": "Multiple Code Blocks",
+      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <Pre bgColor=\"light\" p=\"3\">\n    <Code>{`// JavaScript\nconst add = (a, b) => a + b;`}</Code>\n  </Pre>\n  <Pre bgColor=\"light\" p=\"3\">\n    <Code>{`// TypeScript\nconst add = (a: number, b: number): number => a + b;`}</Code>\n  </Pre>\n</Block>"
+    },
+    {
+      "title": "Primary Accent",
+      "code": "<Pre textColor=\"primary\" p=\"3\">{`// Important configuration\nconst config = {\n  debug: true,\n  verbose: true\n};`}</Pre>"
+    }
+  ],
+  "accessibility": "- **Whitespace Preservation:** The `<pre>` element preserves all whitespace, which is important for code formatting.\n- **Scrolling:** Consider horizontal scrolling for long lines to prevent layout issues.\n- **Screen Readers:** Preformatted text is typically announced as such by screen readers.\n\n:::info\nFor code blocks, wrap content in both `<Pre>` and `<Code>` for proper semantics: `<Pre><Code>...</Code></Pre>`.\n:::",
+  "related": ["Code", "Figure", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-pre--default",
+  "summary": "The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.",
+  "import": "import { Pre, Code } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Pre.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "Pre",
+      "summary": "The `Pre` component renders a styled `<pre>` 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": "Preformatted content to render.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <pre> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-pre-font-size",
+      "sass": "$pre-font-size",
+      "default": "0.875em",
+      "scope": "global"
+    },
+    {
+      "css": "--bulma-pre-padding",
+      "sass": "$pre-padding",
+      "default": "1.25rem 1.5rem",
+      "scope": "global"
+    },
+    {
+      "css": "--bulma-pre-code-font-size",
+      "sass": "$pre-code-font-size",
+      "default": "1em",
+      "scope": "global"
+    }
+  ]
+}

package/data/components/Progress.json

@@ -0,0 +1,137 @@
+{
+  "name": "Progress",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/progress",
+  "docsUrl": "https://bestax.io/docs/api/elements/progress",
+  "examples": [
+    {
+      "title": "Default Progress",
+      "code": "<Progress value={50} max={100} />"
+    },
+    {
+      "title": "Colored Progress",
+      "code": "<>\n  <Progress color=\"primary\" value={75} max={100} />\n  <Progress color=\"success\" value={90} max={100} />\n  <Progress color=\"warning\" value={30} max={100} />\n  <Progress color=\"danger\" value={10} max={100} />\n  <Progress color=\"info\" value={60} max={100} />\n  <Progress color=\"link\" value={80} max={100} />\n</>"
+    },
+    {
+      "title": "Sizing",
+      "code": "<>\n  <Progress size=\"small\" value={50} max={100} />\n  <Progress size=\"medium\" value={50} max={100} />\n  <Progress size=\"large\" value={50} max={100} />\n</>"
+    },
+    {
+      "title": "With Margin",
+      "code": "<Progress value={50} max={100} m=\"4\" />"
+    },
+    {
+      "title": "Indeterminate Progress",
+      "code": "<Progress color=\"primary\" max={100} />"
+    },
+    {
+      "title": "Custom Content",
+      "code": "<Progress value={50} max={100}>\n  50% Complete\n</Progress>"
+    },
+    {
+      "title": "Multiple Indeterminate",
+      "code": "<>\n  <Progress size=\"small\" color=\"primary\" max={100} />\n  <Progress color=\"danger\" max={100} />\n  <Progress size=\"medium\" color=\"dark\" max={100} />\n  <Progress size=\"large\" color=\"info\" max={100} />\n</>"
+    }
+  ],
+  "accessibility": "- **Role:** The `<progress>` element is natively accessible.\n- **Labeling:** Always provide context for screen readers (e.g., with `aria-label` or visible text).\n- **Indeterminate:** Omit the `value` prop for indeterminate progress bars.\n\n:::warning\nEnsure your progress bars have sufficient color contrast for users with visual impairments.\n:::",
+  "related": ["useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-progress--default",
+  "summary": "The `Progress` component displays a Bulma-styled progress bar.",
+  "import": "import { Progress } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Progress.tsx",
+  "rootClass": "progress",
+  "parts": [
+    {
+      "path": "Progress",
+      "summary": "The `Progress` component displays a Bulma-styled progress bar.",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "Bulma color",
+          "default": null,
+          "description": "Bulma color modifier for the progress bar (renders `is-<color>`). Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `white`, `light`, and `dark` have shipped CSS for `.progress`. The other accepted values (`black-bis`, `black-ter`, `grey-darker`, `grey-dark`, `grey`, `grey-light`, `grey-lighter`) emit a class no CSS rule matches, so the bar renders unstyled; they log a console warning in development and will be removed from this union in the next major version.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size modifier for the progress bar.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "default": null,
+          "description": "Current value of the progress bar.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": null,
+          "description": "Maximum value of the progress bar.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Optional custom content inside the progress bar.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <progress> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-progress-border-radius",
+      "sass": "$progress-border-radius",
+      "default": "var(--bulma-radius-rounded)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-progress-bar-background-color",
+      "sass": "$progress-bar-background-color",
+      "default": "var(--bulma-border-weak)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-progress-value-background-color",
+      "sass": "$progress-value-background-color",
+      "default": "var(--bulma-text)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-progress-indeterminate-duration",
+      "sass": "$progress-indeterminate-duration",
+      "default": "1.5s",
+      "scope": "component"
+    }
+  ]
+}

package/data/components/Radio.json

@@ -0,0 +1,164 @@
+{
+  "name": "Radio",
+  "kind": "component",
+  "category": "form",
+  "slug": "form/radio",
+  "docsUrl": "https://bestax.io/docs/api/form/radio",
+  "examples": [
+    {
+      "title": "Mutually Exclusive Radios (Only One Can Be Selected)",
+      "code": "<Control>\n  <Radio name=\"mutuallyExclusive\"> Yes </Radio>\n  <Radio name=\"mutuallyExclusive\"> No </Radio>\n  <Radio name=\"mutuallyExclusive\"> Maybe </Radio>\n</Control>"
+    },
+    {
+      "title": "Default Selected Radio",
+      "code": "<Control>\n  <Radio name=\"pet\"> Cat </Radio>\n  <Radio name=\"pet\" defaultChecked>\n    {' '}\n    Dog{' '}\n  </Radio>\n</Control>"
+    },
+    {
+      "title": "Disabled Radios",
+      "code": "<Control>\n  <Radio name=\"response\" disabled>\n    {' '}\n    Attend{' '}\n  </Radio>\n  <Radio name=\"response\" disabled>\n    {' '}\n    Decline{' '}\n  </Radio>\n  <Radio name=\"response\" disabled>\n    {' '}\n    Tentative{' '}\n  </Radio>\n</Control>"
+    },
+    {
+      "title": "List of Radios (Grouped with the `Radios` Wrapper)",
+      "code": "<Radios>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Attend{' '}\n  </Radio>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Decline{' '}\n  </Radio>\n  <Radio name=\"event\" disabled>\n    {' '}\n    Tentative{' '}\n  </Radio>\n</Radios>"
+    }
+  ],
+  "accessibility": "- Each `Radio` is rendered as a `<label>` wrapping an `<input type=\"radio\">` and the label text, for optimal accessibility.\n- Use the same `name` prop for a group of radios to ensure only one can be selected.",
+  "related": ["Field", "Radios", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/form-radio--mutuallyexclusive",
+  "summary": "The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.",
+  "import": "import { Radio, Radios, Control } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/form/Radio.tsx",
+  "rootClass": "styled-radio",
+  "parts": [
+    {
+      "path": "Radio",
+      "summary": "The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.",
+      "component": null,
+      "props": [
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Color of the radio button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'normal' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the radio button.",
+          "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": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "description": "Whether the radio is disabled.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The label/content for the radio.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLInputElement>",
+          "default": null,
+          "description": "Forwarded to the underlying element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <input> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-radio-size",
+      "sass": "$radio-size",
+      "default": "1.25em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-border-width",
+      "sass": "$radio-border-width",
+      "default": "2px",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-border-color",
+      "sass": "$radio-border-color",
+      "default": "var(--bulma-border)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-background",
+      "sass": "$radio-background",
+      "default": "transparent",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-dot-color",
+      "sass": "$radio-dot-color",
+      "default": "var(--bulma-scheme-main)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-active-color",
+      "sass": "$radio-active-color",
+      "default": "var(--bulma-primary)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-label-gap",
+      "sass": "$radio-label-gap",
+      "default": "0.5em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-focus-shadow-size",
+      "sass": "$radio-focus-shadow-size",
+      "default": "0 0 0 0.125em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-radio-transition-duration",
+      "sass": "$radio-transition-duration",
+      "default": "var(--bulma-duration)",
+      "scope": "component"
+    }
+  ]
+}