bestax-mcp 0.0.0

package/data/components/IconText.json

@@ -0,0 +1,307 @@
+{
+  "name": "IconText",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/icontext",
+  "docsUrl": "https://bestax.io/docs/api/elements/icontext",
+  "examples": [
+    {
+      "title": "Single Icon + Text",
+      "code": "<IconText iconProps={{ library: 'fa', name: 'star', ariaLabel: 'Star icon' }}>\n  Star\n</IconText>"
+    },
+    {
+      "title": "With Text Color",
+      "code": "<IconText\n  iconProps={{ library: 'fa', name: 'star', ariaLabel: 'Star icon' }}\n  textColor=\"primary\"\n>\n  Star\n</IconText>"
+    },
+    {
+      "title": "With Margin",
+      "code": "<IconText\n  iconProps={{ library: 'fa', name: 'star', ariaLabel: 'Star icon' }}\n  m=\"2\"\n>\n  Star\n</IconText>"
+    },
+    {
+      "title": "In a Button",
+      "code": "<Button color=\"primary\">\n  <IconText\n    iconProps={{\n      library: 'fa',\n      name: 'check',\n      ariaLabel: 'Check icon',\n    }}\n  >\n    Click Me\n  </IconText>\n</Button>"
+    },
+    {
+      "title": "In a Notification",
+      "code": "<Notification color=\"info\">\n  <IconText\n    iconProps={{\n      library: 'fa',\n      name: 'info-circle',\n      ariaLabel: 'Info icon',\n      textColor: 'dark',\n    }}\n    m=\"1\"\n  >\n    Info Notification\n  </IconText>\n</Notification>"
+    },
+    {
+      "title": "In a Tag",
+      "code": "<Tag color=\"success\" size=\"medium\">\n  <IconText\n    iconProps={{\n      library: 'fa',\n      name: 'check',\n      ariaLabel: 'Check icon',\n    }}\n  >\n    Success\n  </IconText>\n</Tag>"
+    },
+    {
+      "title": "Multiple Icons and Text",
+      "code": "<IconText\n  items={[\n    {\n      iconProps: { library: 'fa', name: 'train', ariaLabel: 'Train icon' },\n      text: 'Paris',\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'arrow-right',\n        ariaLabel: 'Arrow right icon',\n      },\n      text: 'Budapest',\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'arrow-right',\n        ariaLabel: 'Arrow right icon',\n      },\n      text: 'Bucharest',\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'arrow-right',\n        ariaLabel: 'Arrow right icon',\n      },\n      text: 'Istanbul',\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'flag-checkered',\n        ariaLabel: 'Finish icon',\n      },\n    },\n  ]}\n  mx=\"1\"\n/>"
+    },
+    {
+      "title": "Star Rating Example",
+      "code": "<Rate defaultValue={3.5} color=\"warning\" precision={0.5} showScore />"
+    },
+    {
+      "title": "Star Rating Example",
+      "code": "<IconText\n  items={[\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'star',\n        ariaLabel: 'Star icon',\n      },\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'star',\n        ariaLabel: 'Star icon',\n      },\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'star',\n        ariaLabel: 'Star icon',\n      },\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'star-half-alt',\n        ariaLabel: 'Half star icon',\n      },\n    },\n    {\n      iconProps: {\n        library: 'fa',\n        name: 'star',\n        variant: 'regular',\n        ariaLabel: 'Empty star icon',\n      },\n      text: '3.5/5',\n    },\n  ]}\n  textColor=\"warning\"\n  mx=\"1\"\n/>"
+    },
+    {
+      "title": "With Flex",
+      "code": "<IconText\n  iconProps={{\n    library: 'fa',\n    name: 'info-circle',\n    ariaLabel: 'Info icon',\n    textColor: 'info',\n  }}\n  display=\"flex\"\n>\n  Information\n</IconText>"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<IconText>\n  <IconText.Icon name=\"star\" ariaLabel=\"star icon\" />\n  <span>Starred</span>\n</IconText>"
+    }
+  ],
+  "accessibility": "- **ARIA labels:** Always set an `ariaLabel` for icons for screen readers.\n- **Order:** The icon is visually before the text by default.\n- **Keyboard:** If used in a button or link, keyboard accessibility is handled by the parent.\n\n:::info\nFor star ratings or icon lists, use `items` with `iconProps` and optional `text`.\n:::",
+  "related": ["Button", "Icon", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-icontext--default",
+  "summary": "The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.",
+  "import": "import { IconText } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/IconText.tsx",
+  "rootClass": "icon-text",
+  "parts": [
+    {
+      "path": "IconText",
+      "summary": "The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.",
+      "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": "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 `.icon-text.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": "iconProps",
+          "type": "IconProps",
+          "default": null,
+          "description": "Props for a single Icon component (for single icon mode).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Text for a single icon (for single icon mode).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "items",
+          "type": "{ iconProps: IconProps; text?: string }[]",
+          "default": null,
+          "description": "Array of icon/text pairs (for multiple icons mode).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <span> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "IconText.Icon",
+      "summary": "The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).",
+      "component": "Icon",
+      "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": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Bulma color modifier for the icon.",
+          "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": "name",
+          "type": "string",
+          "default": null,
+          "description": "The icon name, with or without its library prefix (e.g. `'star'` or `'fa-star'`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "default": null,
+          "description": "DEPRECATED: Legacy prop, use `name` instead.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "library",
+          "type": "'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'",
+          "default": "'fa'",
+          "description": "The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "variant",
+          "type": "string",
+          "default": null,
+          "description": "Icon style variant (e.g. `'solid'`, `'outlined'`, `'rounded'`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "features",
+          "type": "string | string[]",
+          "default": null,
+          "description": "Additional modifiers (e.g. `'fa-lg'`, `'fa-spin'`, `'is-size-1'`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "libraryFeatures",
+          "type": "string | string[]",
+          "default": null,
+          "description": "**DEPRECATED:** Use `variant` and `features` instead.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size modifier for the icon container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "'icon'",
+          "description": "ARIA label for accessibility (default: 'icon').",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "default": null,
+          "description": "Inline style object.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "containerClassName",
+          "type": "string",
+          "default": null,
+          "description": "Override the default `'icon'` container class (e.g., `'panel-icon'`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <span> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-icon-dimensions",
+      "sass": "$icon-dimensions",
+      "default": "1.5rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-icon-dimensions-small",
+      "sass": "$icon-dimensions-small",
+      "default": "1rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-icon-dimensions-medium",
+      "sass": "$icon-dimensions-medium",
+      "default": "2rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-icon-dimensions-large",
+      "sass": "$icon-dimensions-large",
+      "default": "3rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-icon-text-spacing",
+      "sass": "$icon-text-spacing",
+      "default": "0.25em",
+      "scope": "component"
+    }
+  ]
+}

package/data/components/Image.json

@@ -0,0 +1,166 @@
+{
+  "name": "Image",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/image",
+  "docsUrl": "https://bestax.io/docs/api/elements/image",
+  "examples": [
+    {
+      "title": "Default Image",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"Sample image\"\n  size=\"128x128\"\n/>"
+    },
+    {
+      "title": "Rounded Image",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"Rounded image\"\n  size=\"128x128\"\n  isRounded\n/>"
+    },
+    {
+      "title": "Retina Image",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"Retina image\"\n  size=\"128x128\"\n  isRetina\n/>"
+    },
+    {
+      "title": "Aspect Ratio 16:9",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"16:9 aspect ratio image\"\n  size=\"16by9\"\n/>"
+    },
+    {
+      "title": "Aspect Ratio 4:3",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"4:3 aspect ratio image\"\n  size=\"4by3\"\n/>"
+    },
+    {
+      "title": "With Margin",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"Image with margin\"\n  size=\"128x128\"\n  m=\"4\"\n/>"
+    },
+    {
+      "title": "With Iframe",
+      "code": "<Image size=\"16by9\">\n  <iframe\n    className=\"has-ratio\"\n    width=\"640\"\n    height=\"360\"\n    src=\"https://www.youtube.com/embed/YE7VzlLtp-4\"\n    frameBorder=\"0\"\n    allowFullScreen\n    title=\"Sample YouTube Video\"\n  />\n</Image>"
+    },
+    {
+      "title": "With Custom Child",
+      "code": "<Image size=\"4by3\">\n  <Block\n    display=\"flex\"\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    bgColor=\"grey-light\"\n    textColor=\"dark\"\n    textAlign=\"centered\"\n    className=\"has-ratio\"\n    style={{ height: '100%' }}\n  >\n    <Paragraph>Custom Content</Paragraph>\n  </Block>\n</Image>"
+    },
+    {
+      "title": "With Text Color and Background",
+      "code": "<Image\n  src=\"/img/bestax-solar-system-3d.png\"\n  alt=\"Image with text and background color\"\n  size=\"128x128\"\n  textColor=\"primary\"\n  bgColor=\"light\"\n/>"
+    }
+  ],
+  "accessibility": "- **Alt Text:** Always provide a descriptive `alt` attribute for images.\n- **Aspect Ratios:** Maintains the correct aspect ratio for images, iframes, or any child.\n- **Custom Content:** When embedding iframes or custom children, ensure accessibility via proper ARIA labeling or content.\n\n:::warning\nDo not use `Image` for decorative images without `alt=\"\"`, unless purely presentational.\n:::",
+  "related": ["Box", "Card", "Content", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-image--default",
+  "summary": "The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.",
+  "import": "import { Image } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Image.tsx",
+  "rootClass": "image",
+  "parts": [
+    {
+      "path": "Image",
+      "summary": "The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.",
+      "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 for the container.",
+          "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 `.image.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 for the container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false,
+          "valuesRef": "helpers/valid-values"
+        },
+        {
+          "name": "size",
+          "type": "'16x16' | '24x24' | '32x32' | '48x48' | '64x64' | '96x96' | '128x128' | 'square' | '1by1' | '5by4' | '4by3' | '3by2' | '5by3' | '16by9' | '2by1' | '3by1' | '4by5' | '3by4' | '2by3' | '3by5' | '9by16' | '1by2' | '1by3'",
+          "default": null,
+          "description": "Fixed size or aspect ratio modifier for the image container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Renders the image with rounded corners.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isRetina",
+          "type": "boolean",
+          "default": "false",
+          "description": "Uses retina (2x) image source.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "default": null,
+          "description": "Image source URL.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "default": null,
+          "description": "Alternate text for the image.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Arbitrary content (e.g., iframe, custom HTML) inside the image container.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "as",
+          "type": "'figure' | 'div' | 'p'",
+          "default": null,
+          "description": "Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": []
+}