bestax-mcp 1.2.3 → 1.2.5

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.14.0"
+    "version": "5.15.4"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -139,8 +139,8 @@
       "slug": "components/avatar",
       "import": "import { Avatar } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 14,
-      "exampleCount": 7
+      "propCount": 15,
+      "exampleCount": 8
     },
     {
       "name": "Avatars",
@@ -150,7 +150,7 @@
       "slug": "components/avatars",
       "import": "import { Avatars, Avatar } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 22,
+      "propCount": 23,
       "exampleCount": 8
     },
     {
@@ -205,7 +205,7 @@
       "slug": "elements/button",
       "import": "import { Button } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 23,
+      "propCount": 19,
       "exampleCount": 25
     },
     {
@@ -216,7 +216,7 @@
       "slug": "elements/buttons",
       "import": "import { Buttons } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 53,
+      "propCount": 45,
       "exampleCount": 8
     },
     {
@@ -557,7 +557,7 @@
       "slug": "layout/level",
       "import": "import { Level } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 26,
+      "propCount": 23,
       "exampleCount": 5
     },
     {
@@ -569,7 +569,7 @@
       "import": "import { Link } from '@allxsmith/bestax-bulma';",
       "compound": false,
       "propCount": 6,
-      "exampleCount": 11
+      "exampleCount": 12
     },
     {
       "name": "LinkButton",
@@ -579,7 +579,7 @@
       "slug": "elements/linkbutton",
       "import": "import { LinkButton } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 21,
+      "propCount": 17,
       "exampleCount": 10
     },
     {
@@ -623,8 +623,8 @@
       "slug": "components/menu",
       "import": "import { Menu } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 11,
-      "exampleCount": 5
+      "propCount": 16,
+      "exampleCount": 6
     },
     {
       "name": "Message",
@@ -788,7 +788,7 @@
       "slug": "components/reveal",
       "import": "import { Reveal } from '@allxsmith/bestax-bulma';",
       "compound": false,
-      "propCount": 9,
+      "propCount": 11,
       "exampleCount": 5
     },
     {

package/data/components/Autocomplete.json

@@ -19,7 +19,7 @@
     },
     {
       "title": "Color and Size Variants",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Primary small\"\n    color=\"primary\"\n    size=\"small\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Info normal\"\n    color=\"info\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Success medium\"\n    color=\"success\"\n    size=\"medium\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Danger large\"\n    color=\"danger\"\n    size=\"large\"\n  />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Primary small\"\n    color=\"primary\"\n    size=\"small\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Info normal\"\n    color=\"info\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Success medium\"\n    color=\"success\"\n    size=\"medium\"\n  />\n  <Autocomplete\n    data={['Apple', 'Banana', 'Cherry']}\n    placeholder=\"Danger large\"\n    color=\"danger\"\n    size=\"large\"\n  />\n</Block>"
     },
     {
       "title": "With Object Data",

package/data/components/Avatar.json

@@ -32,6 +32,10 @@
     {
       "title": "Forwarding Props to the Image",
       "code": "<Avatar\n  src=\"https://github.com/allxsmith.png\"\n  name=\"Al Smith\"\n  size=\"64x64\"\n  imageProps={{ loading: 'lazy' }}\n/>"
+    },
+    {
+      "title": "Forwarded ref",
+      "code": "function example() {\n  const avatarRef = React.useRef(null);\n  const [tag, setTag] = React.useState(null);\n\n  return (\n    <>\n      <Avatar ref={avatarRef} name=\"Ada Lovelace\" size=\"64x64\" />\n      <Button mt=\"3\" onClick={() => setTag(avatarRef.current?.tagName)}>\n        Read the tag from its ref\n      </Button>\n      <p>Rendered element: {tag ?? '—'}</p>\n    </>\n  );\n}"
     }
   ],
   "accessibility": "- Image avatars use `alt` (falling back to `name`) for their accessible name.\n- Initials/icon avatars expose `role=\"img\"` and `aria-label` (from `alt`/`name`) — unless\n  rendered as a link or button, where the native link/button role and `aria-label` are used\n  instead.\n- **Decorative avatars:** pass an explicit `alt=\"\"` when the avatar repeats information\n  already visible next to it (e.g. beside the author's name in a comment row). The image\n  stays decorative and an initials/icon avatar is skipped entirely (`aria-hidden`), avoiding\n  double-speak. The opt-out never applies to a link/button avatar — an interactive element\n  always keeps an accessible name (from `name`, or a generic `\"Avatar\"` fallback).\n- A link/button avatar with no `alt`/`name` (e.g. an API that returns only a photo URL) still\n  gets an `aria-label` fallback rather than rendering a nameless control.\n- `as=\"button\"` defaults to `type=\"button\"`, so a clickable avatar inside a form doesn't\n  submit it.\n- The default fallback icon is `aria-hidden`.",
@@ -47,6 +51,15 @@
       "summary": "The `Avatar` component represents a person or entity as a compact image.",
       "component": null,
       "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": null,
+          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "className",
           "type": "string",
@@ -128,15 +141,6 @@
           "inherited": false,
           "deprecated": false
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "default": null,
-          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
         {
           "name": "href",
           "type": "string",
@@ -172,10 +176,29 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "default": null,
+          "description": "Inline styles, merged after the size style.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "PolymorphicRef<React.ElementType>",
+          "default": null,
+          "description": "Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
-      "extraProps": [],
-      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "catchAll": "Remaining props of the element or component selected by as (default <figure>) and Bulma helper props",
       "types": [
         {
           "name": "AvatarColor",

package/data/components/Avatars.json

@@ -133,6 +133,15 @@
       "summary": "The `Avatar` component represents a person or entity as a compact image.",
       "component": "Avatar",
       "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": null,
+          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "className",
           "type": "string",
@@ -214,15 +223,6 @@
           "inherited": false,
           "deprecated": false
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "default": null,
-          "description": "Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
         {
           "name": "href",
           "type": "string",
@@ -258,10 +258,29 @@
           "required": false,
           "inherited": false,
           "deprecated": false
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "default": null,
+          "description": "Inline styles, merged after the size style.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
         }
       ],
-      "extraProps": [],
-      "catchAll": "All standard HTML attributes and Bulma helper props",
+      "extraProps": [
+        {
+          "name": "ref",
+          "type": "PolymorphicRef<React.ElementType>",
+          "default": null,
+          "description": "Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "Remaining props of the element or component selected by as (default <figure>) and Bulma helper props",
       "types": [
         {
           "name": "AvatarColor",

package/data/components/Block.json

@@ -32,7 +32,7 @@
     },
     {
       "title": "Stacked Blocks (Demonstrating Vertical Spacing)",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"0\">\n  <Block>\n    <Notification color=\"primary\" mb={0}>\n      First Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"info\" mb={0}>\n      Second Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"success\" mb={0}>\n      Third Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"warning\" mb={0}>\n      Fourth Block\n    </Notification>\n  </Block>\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <Block>\n    <Notification color=\"primary\" mb={0}>\n      First Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"info\" mb={0}>\n      Second Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"success\" mb={0}>\n      Third Block\n    </Notification>\n  </Block>\n  <Block>\n    <Notification color=\"warning\" mb={0}>\n      Fourth Block\n    </Notification>\n  </Block>\n</Block>"
     }
   ],
   "accessibility": "- **Content:** Use semantic HTML inside `Block` for best accessibility.\n- **Spacing:** The `.block` class is for layout only and does not affect accessibility.\n- **Contrast:** Choose text and background colors for good readability.\n\n:::info\nUse `Block` for logical, visually separated sections of content.\n:::",

package/data/components/Button.json

@@ -110,6 +110,15 @@
       "summary": "The `Button` component provides a flexible and highly customizable button for your Bulma React UI.",
       "component": null,
       "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": "'button'",
+          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'",
@@ -266,51 +275,6 @@
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "default": "'button'",
-          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "default": null,
-          "description": "Href value (if rendering as `<a>`).",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "onClick",
-          "type": "React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>",
-          "default": null,
-          "description": "Click event handler.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "target",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag target.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "rel",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag rel.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
         {
           "name": "children",
           "type": "React.ReactNode",
@@ -324,15 +288,15 @@
       "extraProps": [
         {
           "name": "ref",
-          "type": "React.Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "type": "PolymorphicRef<React.ElementType>",
           "default": null,
-          "description": "Ref forwarded to the rendered button or anchor element.",
+          "description": "Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.",
           "required": false,
           "inherited": false,
           "deprecated": false
         }
       ],
-      "catchAll": "All standard <button> attributes and Bulma helper props",
+      "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
       "types": []
     }
   ],

package/data/components/Buttons.json

@@ -144,6 +144,15 @@
       "summary": "The `Button` component provides a flexible and highly customizable button for your Bulma React UI.",
       "component": "Button",
       "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": "'button'",
+          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'light' | 'dark' | 'black' | 'text' | 'ghost'",
@@ -300,51 +309,6 @@
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "default": "'button'",
-          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "default": null,
-          "description": "Href value (if rendering as `<a>`).",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "onClick",
-          "type": "React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>",
-          "default": null,
-          "description": "Click event handler.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "target",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag target.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
-        {
-          "name": "rel",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag rel.",
-          "required": false,
-          "inherited": false,
-          "deprecated": false
-        },
         {
           "name": "children",
           "type": "React.ReactNode",
@@ -358,15 +322,15 @@
       "extraProps": [
         {
           "name": "ref",
-          "type": "React.Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "type": "PolymorphicRef<React.ElementType>",
           "default": null,
-          "description": "Ref forwarded to the rendered button or anchor element.",
+          "description": "Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.",
           "required": false,
           "inherited": false,
           "deprecated": false
         }
       ],
-      "catchAll": "All standard <button> attributes and Bulma helper props",
+      "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
       "types": []
     },
     {
@@ -374,6 +338,15 @@
       "summary": "The `LinkButton` component renders a `<button>` that visually looks like text or a link.",
       "component": "LinkButton",
       "props": [
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "default": "'button'",
+          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "variant",
           "type": "'text' | 'ghost' | 'underline'",
@@ -512,51 +485,6 @@
           "deprecated": false,
           "valuesRef": "helpers/valid-values"
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "default": "'button'",
-          "description": "Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else (including `'a'`) uses anchor-style prop handling.",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "default": null,
-          "description": "Href value (if rendering as `<a>`).",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
-        {
-          "name": "onClick",
-          "type": "React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>",
-          "default": null,
-          "description": "Click event handler.",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
-        {
-          "name": "target",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag target.",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
-        {
-          "name": "rel",
-          "type": "string",
-          "default": null,
-          "description": "Anchor tag rel.",
-          "required": false,
-          "inherited": true,
-          "deprecated": false
-        },
         {
           "name": "children",
           "type": "React.ReactNode",
@@ -570,15 +498,15 @@
       "extraProps": [
         {
           "name": "ref",
-          "type": "React.Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "type": "PolymorphicRef<React.ElementType>",
           "default": null,
-          "description": "Ref forwarded to the rendered button or anchor element.",
+          "description": "Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.",
           "required": false,
           "inherited": false,
           "deprecated": false
         }
       ],
-      "catchAll": "All standard <button> attributes and Bulma helper props",
+      "catchAll": "Remaining props of the element or component selected by as (default <button>) and Bulma helper props",
       "types": []
     }
   ],

package/data/components/Code.json

@@ -31,7 +31,7 @@
     },
     {
       "title": "All Colors",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n  <Code textColor=\"primary\">primary code</Code>\n  <Code textColor=\"link\">link code</Code>\n  <Code textColor=\"info\">info code</Code>\n  <Code textColor=\"success\">success code</Code>\n  <Code textColor=\"warning\">warning code</Code>\n  <Code textColor=\"danger\">danger code</Code>\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <Code textColor=\"primary\">primary code</Code>\n  <Code textColor=\"link\">link code</Code>\n  <Code textColor=\"info\">info code</Code>\n  <Code textColor=\"success\">success code</Code>\n  <Code textColor=\"warning\">warning code</Code>\n  <Code textColor=\"danger\">danger code</Code>\n</Block>"
     },
     {
       "title": "File Path",

package/data/components/Collapse.json

@@ -23,7 +23,7 @@
     },
     {
       "title": "Accordion",
-      "code": "function example() {\n  const [openIndex, setOpenIndex] = useState(0);\n\n  const items = [\n    { title: 'Section 1', content: 'Content for section 1.' },\n    { title: 'Section 2', content: 'Content for section 2.' },\n    { title: 'Section 3', content: 'Content for section 3.' },\n  ];\n\n  return (\n    <Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n      {items.map((item, index) => (\n        <Collapse\n          key={index}\n          className=\"collapse is-bordered\"\n          open={openIndex === index}\n          trigger={\n            <Block\n              p=\"4\"\n              onClick={() => setOpenIndex(openIndex === index ? -1 : index)}\n              display=\"flex\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <Strong>{item.title}</Strong>\n              <Span>{openIndex === index ? '−' : '+'}</Span>\n            </Block>\n          }\n        >\n          <Paragraph p=\"4\">{item.content}</Paragraph>\n        </Collapse>\n      ))}\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const [openIndex, setOpenIndex] = useState(0);\n\n  const items = [\n    { title: 'Section 1', content: 'Content for section 1.' },\n    { title: 'Section 2', content: 'Content for section 2.' },\n    { title: 'Section 3', content: 'Content for section 3.' },\n  ];\n\n  return (\n    <Block display=\"flex\" flexDirection=\"column\">\n      {items.map((item, index) => (\n        <Collapse\n          key={index}\n          className=\"collapse is-bordered\"\n          open={openIndex === index}\n          trigger={\n            <Block\n              p=\"4\"\n              onClick={() => setOpenIndex(openIndex === index ? -1 : index)}\n              display=\"flex\"\n              justifyContent=\"space-between\"\n              alignItems=\"center\"\n            >\n              <Strong>{item.title}</Strong>\n              <Span>{openIndex === index ? '−' : '+'}</Span>\n            </Block>\n          }\n        >\n          <Paragraph p=\"4\">{item.content}</Paragraph>\n        </Collapse>\n      ))}\n    </Block>\n  );\n}"
     },
     {
       "title": "Card Style",
@@ -31,7 +31,7 @@
     },
     {
       "title": "FAQ Example",
-      "code": "function example() {\n  const faqs = [\n    {\n      q: 'What is Bestax?',\n      a: 'Bestax is a React component library built on Bulma.',\n    },\n    { q: 'How do I install it?', a: 'pnpm add @allxsmith/bestax-bulma' },\n    { q: 'Is it free?', a: 'Yes, Bestax is open source and free to use.' },\n  ];\n\n  const [openStates, setOpenStates] = useState(faqs.map(() => false));\n\n  const toggle = index => {\n    setOpenStates(prev =>\n      prev.map((state, i) => (i === index ? !state : state))\n    );\n  };\n\n  return (\n    <Block>\n      <Title size=\"5\" mb=\"4\">\n        FAQ\n      </Title>\n      <Block display=\"flex\" flexDirection=\"column\" gap=\"2\">\n        {faqs.map((faq, index) => (\n          <Collapse\n            key={index}\n            className=\"collapse is-bordered\"\n            trigger={\n              <Block\n                p=\"4\"\n                onClick={() => toggle(index)}\n                display=\"flex\"\n                justifyContent=\"space-between\"\n              >\n                <Strong>{faq.q}</Strong>\n                <Span>{openStates[index] ? '▲' : '▼'}</Span>\n              </Block>\n            }\n            open={openStates[index]}\n          >\n            <Paragraph p=\"4\" textColor=\"grey-dark\">\n              {faq.a}\n            </Paragraph>\n          </Collapse>\n        ))}\n      </Block>\n    </Block>\n  );\n}"
+      "code": "function example() {\n  const faqs = [\n    {\n      q: 'What is Bestax?',\n      a: 'Bestax is a React component library built on Bulma.',\n    },\n    { q: 'How do I install it?', a: 'pnpm add @allxsmith/bestax-bulma' },\n    { q: 'Is it free?', a: 'Yes, Bestax is open source and free to use.' },\n  ];\n\n  const [openStates, setOpenStates] = useState(faqs.map(() => false));\n\n  const toggle = index => {\n    setOpenStates(prev =>\n      prev.map((state, i) => (i === index ? !state : state))\n    );\n  };\n\n  return (\n    <Block>\n      <Title size=\"5\" mb=\"4\">\n        FAQ\n      </Title>\n      <Block display=\"flex\" flexDirection=\"column\">\n        {faqs.map((faq, index) => (\n          <Collapse\n            key={index}\n            className=\"collapse is-bordered\"\n            trigger={\n              <Block\n                p=\"4\"\n                onClick={() => toggle(index)}\n                display=\"flex\"\n                justifyContent=\"space-between\"\n              >\n                <Strong>{faq.q}</Strong>\n                <Span>{openStates[index] ? '▲' : '▼'}</Span>\n              </Block>\n            }\n            open={openStates[index]}\n          >\n            <Paragraph p=\"4\" textColor=\"grey-dark\">\n              {faq.a}\n            </Paragraph>\n          </Collapse>\n        ))}\n      </Block>\n    </Block>\n  );\n}"
     }
   ],
   "accessibility": "- Trigger has `role=\"button\"` and `tabIndex=\"0\"` for keyboard access\n- Trigger has `aria-expanded` to indicate open/closed state\n- Trigger has `aria-controls` pointing to the content element\n- Content has `aria-hidden` matching the collapsed state\n- Supports keyboard navigation (Enter and Space to toggle)",

package/data/components/DateInput.json

@@ -51,7 +51,7 @@
     },
     {
       "title": "Formats",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput\n    label=\"YYYY-MM-DD (default)\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"DD/MM/YYYY\"\n    format=\"DD/MM/YYYY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"MM-DD-YYYY\"\n    format=\"MM-DD-YYYY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"DD.MM.YY\"\n    format=\"DD.MM.YY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput\n    label=\"YYYY-MM-DD (default)\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"DD/MM/YYYY\"\n    format=\"DD/MM/YYYY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"MM-DD-YYYY\"\n    format=\"MM-DD-YYYY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"DD.MM.YY\"\n    format=\"DD.MM.YY\"\n    defaultValue={new Date(2026, 4, 30)}\n    openOnFocus={false}\n    mobileNative={false}\n  />\n</Block>"
     },
     {
       "title": "Formats",
@@ -63,11 +63,11 @@
     },
     {
       "title": "Launcher Icon",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Default (left icon + right launcher)\" />\n  <DateInput label=\"Custom launcher glyph\" triggerIconName=\"calendar-day\" />\n  <DateInput label=\"No launcher\" triggerIcon={false} />\n  <DateInput label=\"Left icon hidden\" iconLeftName=\"\" />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Default (left icon + right launcher)\" />\n  <DateInput label=\"Custom launcher glyph\" triggerIconName=\"calendar-day\" />\n  <DateInput label=\"No launcher\" triggerIcon={false} />\n  <DateInput label=\"Left icon hidden\" iconLeftName=\"\" />\n</Block>"
     },
     {
       "title": "Launcher Icon",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Default (left icon + right launcher)\" openOnFocus={false} />\n  <DateInput\n    label=\"Custom launcher glyph\"\n    triggerIconName=\"calendar-day\"\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"No launcher — popover via ↓ only\"\n    triggerIcon={false}\n    openOnFocus={false}\n  />\n  <DateInput label=\"Left icon hidden\" iconLeftName=\"\" openOnFocus={false} />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Default (left icon + right launcher)\" openOnFocus={false} />\n  <DateInput\n    label=\"Custom launcher glyph\"\n    triggerIconName=\"calendar-day\"\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"No launcher — popover via ↓ only\"\n    triggerIcon={false}\n    openOnFocus={false}\n  />\n  <DateInput label=\"Left icon hidden\" iconLeftName=\"\" openOnFocus={false} />\n</Block>"
     },
     {
       "title": "Manual Keyboard Entry",
@@ -95,11 +95,11 @@
     },
     {
       "title": "Locale",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"de-DE\"\n    locale=\"de-DE\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n  <DateInput\n    label=\"de-DE\"\n    locale=\"de-DE\"\n    defaultValue={new Date()}\n    mobileNative={false}\n  />\n</Block>"
     },
     {
       "title": "Locale",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"de-DE\"\n    locale=\"de-DE\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput\n    label=\"ja-JP\"\n    locale=\"ja-JP\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"fr-FR\"\n    locale=\"fr-FR\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"de-DE\"\n    locale=\"de-DE\"\n    defaultValue={new Date()}\n    mobileNative={false}\n    openOnFocus={false}\n  />\n</Block>"
     },
     {
       "title": "First Day of Week",
@@ -115,23 +115,23 @@
     },
     {
       "title": "Sizes",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Small\" controlSize=\"small\" size=\"small\" />\n  <DateInput label=\"Default\" />\n  <DateInput label=\"Medium\" controlSize=\"medium\" size=\"medium\" />\n  <DateInput label=\"Large\" controlSize=\"large\" size=\"large\" />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Small\" controlSize=\"small\" size=\"small\" />\n  <DateInput label=\"Default\" />\n  <DateInput label=\"Medium\" controlSize=\"medium\" size=\"medium\" />\n  <DateInput label=\"Large\" controlSize=\"large\" size=\"large\" />\n</Block>"
     },
     {
       "title": "Sizes",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput\n    label=\"Small\"\n    controlSize=\"small\"\n    size=\"small\"\n    openOnFocus={false}\n  />\n  <DateInput label=\"Default\" openOnFocus={false} />\n  <DateInput\n    label=\"Medium\"\n    controlSize=\"medium\"\n    size=\"medium\"\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"Large\"\n    controlSize=\"large\"\n    size=\"large\"\n    openOnFocus={false}\n  />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput\n    label=\"Small\"\n    controlSize=\"small\"\n    size=\"small\"\n    openOnFocus={false}\n  />\n  <DateInput label=\"Default\" openOnFocus={false} />\n  <DateInput\n    label=\"Medium\"\n    controlSize=\"medium\"\n    size=\"medium\"\n    openOnFocus={false}\n  />\n  <DateInput\n    label=\"Large\"\n    controlSize=\"large\"\n    size=\"large\"\n    openOnFocus={false}\n  />\n</Block>"
     },
     {
       "title": "Colors",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Primary\" color=\"primary\" />\n  <DateInput label=\"Info\" color=\"info\" />\n  <DateInput label=\"Success\" color=\"success\" />\n  <DateInput label=\"Warning\" color=\"warning\" />\n  <DateInput label=\"Danger\" color=\"danger\" />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Primary\" color=\"primary\" />\n  <DateInput label=\"Info\" color=\"info\" />\n  <DateInput label=\"Success\" color=\"success\" />\n  <DateInput label=\"Warning\" color=\"warning\" />\n  <DateInput label=\"Danger\" color=\"danger\" />\n</Block>"
     },
     {
       "title": "Colors",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Primary\" color=\"primary\" openOnFocus={false} />\n  <DateInput label=\"Info\" color=\"info\" openOnFocus={false} />\n  <DateInput label=\"Success\" color=\"success\" openOnFocus={false} />\n  <DateInput label=\"Warning\" color=\"warning\" openOnFocus={false} />\n  <DateInput label=\"Danger\" color=\"danger\" openOnFocus={false} />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Primary\" color=\"primary\" openOnFocus={false} />\n  <DateInput label=\"Info\" color=\"info\" openOnFocus={false} />\n  <DateInput label=\"Success\" color=\"success\" openOnFocus={false} />\n  <DateInput label=\"Warning\" color=\"warning\" openOnFocus={false} />\n  <DateInput label=\"Danger\" color=\"danger\" openOnFocus={false} />\n</Block>"
     },
     {
       "title": "States",
-      "code": "<Block display=\"flex\" flexDirection=\"column\" gap=\"4\">\n  <DateInput label=\"Disabled\" disabled />\n  <DateInput label=\"Read only\" readOnly defaultValue={new Date()} />\n  <DateInput label=\"Loading\" isLoading />\n</Block>"
+      "code": "<Block display=\"flex\" flexDirection=\"column\">\n  <DateInput label=\"Disabled\" disabled />\n  <DateInput label=\"Read only\" readOnly defaultValue={new Date()} />\n  <DateInput label=\"Loading\" isLoading />\n</Block>"
     },
     {
       "title": "Horizontal Field",