bestax-mcp 0.0.0

package/data/components/Title.json

@@ -0,0 +1,240 @@
+{
+  "name": "Title",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/title",
+  "docsUrl": "https://bestax.io/docs/api/elements/title",
+  "examples": [
+    { "title": "Default Title", "code": "<Title>Default Title</Title>" },
+    {
+      "title": "Has Skeleton",
+      "code": "<Title hasSkeleton>Title with Skeleton Effect</Title>"
+    },
+    {
+      "title": "Is Skeleton",
+      "code": "<Title skeleton>Title Skeleton Effect</Title>"
+    },
+    {
+      "title": "Different Sizes",
+      "code": "<>\n  <Title size=\"1\">Title Size 1</Title>\n  <Title size=\"3\">Title Size 3</Title>\n</>"
+    },
+    { "title": "Spaced Title", "code": "<Title isSpaced>Spaced Title</Title>" },
+    {
+      "title": "With Margin",
+      "code": "<Title m=\"4\">Title with Margin</Title>"
+    },
+    {
+      "title": "As Paragraph",
+      "code": "<Title as=\"p\" size=\"3\">\n  Title as Paragraph\n</Title>"
+    },
+    {
+      "title": "All Sizes",
+      "code": "<>\n  {['1', '2', '3', '4', '5', '6'].map(size => (\n    <Title key={size} size={size}>\n      Title Size {size}\n    </Title>\n  ))}\n</>"
+    },
+    {
+      "title": "Title and Subtitle",
+      "code": "<Block>\n  <Title as=\"p\" size=\"1\">\n    Title 1\n  </Title>\n  <SubTitle as=\"p\" size=\"3\">\n    Subtitle 3\n  </SubTitle>\n</Block>"
+    }
+  ],
+  "accessibility": "- **Semantic HTML:** Use appropriate heading levels for document structure.\n- **Spacing:** Use `isSpaced` for extra margin when needed.\n- **Screen readers:** Headings are key landmarks, so set the correct `as` and `size` prop for hierarchy.\n\n:::tip\nWhen using `as=\"p\"`, the element is visually styled as a heading but semantically a paragraph.\n:::",
+  "related": ["Block", "SubTitle", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-title--default",
+  "summary": "The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).",
+  "import": "import { Title } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/Title.tsx",
+  "rootClass": "title",
+  "parts": [
+    {
+      "path": "Title",
+      "summary": "The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).",
+      "component": null,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes to apply.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+          "default": null,
+          "description": "Size of the title (Bulma sizes).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "isSpaced",
+          "type": "boolean",
+          "default": "false",
+          "description": "Adds margin below the title.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "as",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'",
+          "default": "'h1'",
+          "description": "HTML element to render as (h1-h6 or p).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "hasSkeleton",
+          "type": "boolean",
+          "default": "false",
+          "description": "Applies the `has-skeleton` class to part of the content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Title content.",
+          "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"
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "skeleton",
+          "type": "boolean",
+          "default": null,
+          "description": "Applies the `is-skeleton` class to the entire component.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <h1>–<h6> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-title-color",
+      "sass": "$title-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-family",
+      "sass": "$title-family",
+      "default": "false",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-size",
+      "sass": "$title-size",
+      "default": "var(--bulma-size-3)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-weight",
+      "sass": "$title-weight",
+      "default": "var(--bulma-weight-extrabold)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-line-height",
+      "sass": "$title-line-height",
+      "default": "1.125",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-strong-color",
+      "sass": "$title-strong-color",
+      "default": "inherit",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-strong-weight",
+      "sass": "$title-strong-weight",
+      "default": "inherit",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-sub-size",
+      "sass": "$title-sub-size",
+      "default": "0.75em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-title-sup-size",
+      "sass": "$title-sup-size",
+      "default": "0.75em",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-color",
+      "sass": "$subtitle-color",
+      "default": "var(--bulma-text)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-family",
+      "sass": "$subtitle-family",
+      "default": "false",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-size",
+      "sass": "$subtitle-size",
+      "default": "var(--bulma-size-5)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-weight",
+      "sass": "$subtitle-weight",
+      "default": "var(--bulma-weight-normal)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-line-height",
+      "sass": "$subtitle-line-height",
+      "default": "1.25",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-strong-color",
+      "sass": "$subtitle-strong-color",
+      "default": "var(--bulma-text-strong)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-subtitle-strong-weight",
+      "sass": "$subtitle-strong-weight",
+      "default": "var(--bulma-weight-semibold)",
+      "scope": "component"
+    }
+  ]
+}

package/data/components/Toast.json

@@ -0,0 +1,308 @@
+{
+  "name": "Toast",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/toast",
+  "docsUrl": "https://bestax.io/docs/api/components/toast",
+  "examples": [
+    {
+      "title": "Basic Toast",
+      "code": "function example() {\n  const [showToast, setShowToast] = useState(false);\n  return (\n    <Block>\n      <Button color=\"primary\" onClick={() => setShowToast(true)}>\n        Show Toast\n      </Button>\n      {showToast && (\n        <Toast\n          inline\n          message=\"This is a notification message!\"\n          duration={0}\n          onClose={() => setShowToast(false)}\n        />\n      )}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Toast Types",
+      "code": "function example() {\n  const [toastType, setToastType] = useState(null);\n  return (\n    <Block>\n      <Buttons>\n        <Button color=\"success\" onClick={() => setToastType('success')}>\n          Success\n        </Button>\n        <Button color=\"danger\" onClick={() => setToastType('danger')}>\n          Danger\n        </Button>\n        <Button color=\"warning\" onClick={() => setToastType('warning')}>\n          Warning\n        </Button>\n        <Button color=\"info\" onClick={() => setToastType('info')}>\n          Info\n        </Button>\n      </Buttons>\n      {toastType && (\n        <Toast\n          inline\n          message={`This is a ${toastType} message!`}\n          type={toastType}\n          duration={0}\n          onClose={() => setToastType(null)}\n        />\n      )}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Toast Positions",
+      "code": "function example() {\n  const [position, setPosition] = useState(null);\n  const [box, setBox] = useState(null);\n  return (\n    <div\n      ref={setBox}\n      style={{\n        position: 'relative',\n        height: '300px',\n        transform: 'translateZ(0)',\n        border: '1px dashed var(--ifm-color-emphasis-300)',\n        padding: '1rem',\n      }}\n    >\n      <Buttons>\n        <Button onClick={() => setPosition('top-left')}>Top Left</Button>\n        <Button onClick={() => setPosition('top-center')}>Top Center</Button>\n        <Button onClick={() => setPosition('top-right')}>Top Right</Button>\n      </Buttons>\n      <Buttons>\n        <Button onClick={() => setPosition('bottom-left')}>Bottom Left</Button>\n        <Button onClick={() => setPosition('bottom-center')}>\n          Bottom Center\n        </Button>\n        <Button onClick={() => setPosition('bottom-right')}>\n          Bottom Right\n        </Button>\n      </Buttons>\n      {position && box && (\n        <Toast\n          container={box}\n          message={`Position: ${position}`}\n          position={position}\n          type=\"info\"\n          duration={0}\n          onClose={() => setPosition(null)}\n        />\n      )}\n    </div>\n  );\n}"
+    },
+    {
+      "title": "Action Button",
+      "code": "function example() {\n  const [showToast, setShowToast] = useState(false);\n  return (\n    <Block>\n      <Button color=\"primary\" onClick={() => setShowToast(true)}>\n        Show Toast with Action\n      </Button>\n      {showToast && (\n        <Toast\n          inline\n          message=\"Item deleted\"\n          actionText=\"Undo\"\n          actionType=\"info\"\n          onAction={() => alert('Undone!')}\n          duration={0}\n          onClose={() => setShowToast(false)}\n        />\n      )}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Cancel + Action Buttons",
+      "code": "function example() {\n  const [showToast, setShowToast] = useState(false);\n  return (\n    <Block>\n      <Button color=\"primary\" onClick={() => setShowToast(true)}>\n        Show Confirm Toast\n      </Button>\n      {showToast && (\n        <Toast\n          inline\n          message=\"Are you sure you want to proceed?\"\n          cancelText=\"Cancel\"\n          actionText=\"Confirm\"\n          actionType=\"danger\"\n          duration={0}\n          onAction={() => alert('Confirmed!')}\n          onClose={() => setShowToast(false)}\n        />\n      )}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Closable",
+      "code": "function example() {\n  const [showToast, setShowToast] = useState(false);\n  return (\n    <Block>\n      <Button color=\"primary\" onClick={() => setShowToast(true)}>\n        Show Closable Toast\n      </Button>\n      {showToast && (\n        <Toast\n          inline\n          message=\"This toast has a close button\"\n          closable\n          duration={0}\n          onClose={() => setShowToast(false)}\n        />\n      )}\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Indefinite",
+      "code": "function example() {\n  const [showToast, setShowToast] = useState(false);\n  return (\n    <Block>\n      <Button onClick={() => setShowToast(true)}>Show Indefinite Toast</Button>\n      {showToast && (\n        <Toast\n          inline\n          message=\"This won't auto-dismiss\"\n          indefinite\n          onClose={() => setShowToast(false)}\n        />\n      )}\n    </Block>\n  );\n}"
+    }
+  ],
+  "accessibility": "- Uses `role=\"alert\"` for screen reader announcement.\n- Has `aria-live=\"polite\"` for non-intrusive notifications.\n- The closable button has `aria-label=\"Close\"`.\n- `pauseOnHover` lets users keep the toast visible while reading.\n- `cancelable` (default `true`) supports Escape-key dismiss.",
+  "related": ["Dialog"],
+  "storybook": "https://bestax.io/storybook/?path=/story/components-toast",
+  "summary": "The `Toast` component provides brief notification messages with optional action and cancel buttons.",
+  "import": "import { Toast, ToastContainer, toast } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/Toast.tsx",
+  "rootClass": "toast",
+  "parts": [
+    {
+      "path": "Toast",
+      "summary": "The `Toast` component provides brief notification messages with optional action and cancel buttons.",
+      "component": null,
+      "props": [
+        {
+          "name": "message",
+          "type": "string",
+          "default": null,
+          "description": "The message to display (required).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "type",
+          "type": "'default' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": "'default'",
+          "description": "Color variant — colors the toast **background**.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "actionType",
+          "type": "'default' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
+          "default": null,
+          "description": "Color variant — colors the **action button** text.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "position",
+          "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
+          "default": "'top-right'",
+          "description": "Position on the screen. Default: 'top-right'.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "default": "2000",
+          "description": "Duration in ms before auto-close. `0` disables auto-close.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "indefinite",
+          "type": "boolean",
+          "default": "false",
+          "description": "Keeps the toast visible until dismissed.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "default": "true",
+          "description": "Whether clicking the toast (or outside it) dismisses it.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "default": "false",
+          "description": "Show an explicit close (X) button. Default: false.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "rounded",
+          "type": "boolean",
+          "default": "false",
+          "description": "Pill-shaped (rounded corners).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "pauseOnHover",
+          "type": "boolean",
+          "default": "false",
+          "description": "Pause auto-close timer on hover. Default: false.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "cancelable",
+          "type": "boolean",
+          "default": "true",
+          "description": "Whether the toast can be dismissed with Escape. Default: true.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "actionText",
+          "type": "string",
+          "default": null,
+          "description": "Text for an action button (e.g. \"Undo\").",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "cancelText",
+          "type": "string",
+          "default": null,
+          "description": "Text for a cancel button.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onAction",
+          "type": "() => void",
+          "default": null,
+          "description": "Callback when the action button is clicked.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "default": null,
+          "description": "Callback when toast closes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "container",
+          "type": "string | HTMLElement",
+          "default": null,
+          "description": "CSS selector or DOM node to mount the toast into.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "inline",
+          "type": "boolean",
+          "default": "false",
+          "description": "Renders inline instead of using a portal.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "ref",
+          "type": "React.Ref<HTMLDivElement>",
+          "default": null,
+          "description": "Ref forwarded to the toast element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <div> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-toast-background",
+      "sass": "$toast-background",
+      "default": "hsl(0, 0%, 21%)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-color",
+      "sass": "$toast-color",
+      "default": "hsl(0, 0%, 96%)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-radius",
+      "sass": "$toast-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-shadow",
+      "sass": "$toast-shadow",
+      "default": "0 4px 12px hsla(0, 0%, 0%, 0.2)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-padding",
+      "sass": "$toast-padding",
+      "default": "0.875rem 1.25rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-min-width",
+      "sass": "$toast-min-width",
+      "default": "288px",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-max-width",
+      "sass": "$toast-max-width",
+      "default": "568px",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-gap",
+      "sass": "$toast-gap",
+      "default": "1rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-message-size",
+      "sass": "$toast-message-size",
+      "default": "0.95rem",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-animation-duration",
+      "sass": "$toast-animation-duration",
+      "default": "0.3s",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-action-weight",
+      "sass": "$toast-action-weight",
+      "default": "var(--bulma-weight-semibold)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-action-radius",
+      "sass": "$toast-action-radius",
+      "default": "var(--bulma-radius)",
+      "scope": "component"
+    },
+    {
+      "css": "--bulma-toast-action-hover-opacity",
+      "sass": "$toast-action-hover-opacity",
+      "default": "0.1",
+      "scope": "component"
+    }
+  ]
+}