bestax-mcp 0.0.0

package/data/components/Tooltip.json

@@ -0,0 +1,212 @@
+{
+  "name": "Tooltip",
+  "kind": "component",
+  "category": "components",
+  "slug": "components/tooltip",
+  "docsUrl": "https://bestax.io/docs/api/components/tooltip",
+  "examples": [
+    {
+      "title": "Basic Tooltip",
+      "code": "function example() {\n  return (\n    <Tooltip label=\"This is helpful information\">\n      <Button>Hover me</Button>\n    </Tooltip>\n  );\n}"
+    },
+    {
+      "title": "Positions",
+      "code": "function example() {\n  return (\n    <Buttons>\n      <Tooltip label=\"Top tooltip\" position=\"top\">\n        <Button>Top</Button>\n      </Tooltip>\n      <Tooltip label=\"Bottom tooltip\" position=\"bottom\">\n        <Button>Bottom</Button>\n      </Tooltip>\n      <Tooltip label=\"Left tooltip\" position=\"left\">\n        <Button>Left</Button>\n      </Tooltip>\n      <Tooltip label=\"Right tooltip\" position=\"right\">\n        <Button>Right</Button>\n      </Tooltip>\n    </Buttons>\n  );\n}"
+    },
+    {
+      "title": "Colors",
+      "code": "function example() {\n  return (\n    <Buttons>\n      <Tooltip label=\"Primary\" color=\"primary\">\n        <Button color=\"primary\">Primary</Button>\n      </Tooltip>\n      <Tooltip label=\"Link\" color=\"link\">\n        <Button color=\"link\">Link</Button>\n      </Tooltip>\n      <Tooltip label=\"Info\" color=\"info\">\n        <Button color=\"info\">Info</Button>\n      </Tooltip>\n      <Tooltip label=\"Success\" color=\"success\">\n        <Button color=\"success\">Success</Button>\n      </Tooltip>\n      <Tooltip label=\"Warning\" color=\"warning\">\n        <Button color=\"warning\">Warning</Button>\n      </Tooltip>\n      <Tooltip label=\"Danger\" color=\"danger\">\n        <Button color=\"danger\">Danger</Button>\n      </Tooltip>\n    </Buttons>\n  );\n}"
+    },
+    {
+      "title": "Multiline",
+      "code": "function example() {\n  return (\n    <Block p=\"5\">\n      <Tooltip\n        label=\"This is a longer tooltip that wraps to multiple lines. It's useful for displaying more detailed information.\"\n        multiline\n      >\n        <Button>Hover for more info</Button>\n      </Tooltip>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Always Visible",
+      "code": "function example() {\n  return (\n    <Block p=\"5\">\n      <Tooltip label=\"I'm always visible!\" active color=\"info\">\n        <Button>Always visible tooltip</Button>\n      </Tooltip>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Dashed Underline",
+      "code": "function example() {\n  return (\n    <Paragraph>\n      The term{' '}\n      <Tooltip label=\"Application Programming Interface\" dashed>\n        <Span>API</Span>\n      </Tooltip>{' '}\n      is commonly used in software development.\n    </Paragraph>\n  );\n}"
+    },
+    {
+      "title": "With Delay",
+      "code": "function example() {\n  return (\n    <Buttons>\n      <Tooltip label=\"No delay\" delay={0}>\n        <Button>No delay</Button>\n      </Tooltip>\n      <Tooltip label=\"500ms delay\" delay={500}>\n        <Button>500ms delay</Button>\n      </Tooltip>\n      <Tooltip label=\"1 second delay\" delay={1000}>\n        <Button>1s delay</Button>\n      </Tooltip>\n    </Buttons>\n  );\n}"
+    },
+    {
+      "title": "On Icons",
+      "code": "function example() {\n  return (\n    <Block display=\"flex\" gap=\"5\" p=\"6\">\n      <Tooltip label=\"Delete item\" color=\"danger\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-trash\" />\n        </Span>\n      </Tooltip>\n      <Tooltip label=\"Edit item\" color=\"info\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-edit\" />\n        </Span>\n      </Tooltip>\n      <Tooltip label=\"Download\" color=\"success\" position=\"bottom\">\n        <Span cursor=\"pointer\">\n          <Icon name=\"fas fa-download\" />\n        </Span>\n      </Tooltip>\n    </Block>\n  );\n}"
+    },
+    {
+      "title": "Form Field Help",
+      "code": "function example() {\n  return (\n    <Field>\n      <label className=\"label\">\n        Password{' '}\n        <Tooltip\n          label=\"Must be at least 8 characters with one number and one special character\"\n          multiline\n          color=\"info\"\n        >\n          <Span cursor=\"help\">\n            <Icon name=\"fas fa-question-circle\" size=\"small\" />\n          </Span>\n        </Tooltip>\n      </label>\n      <Control>\n        <Input type=\"password\" placeholder=\"Enter password\" />\n      </Control>\n    </Field>\n  );\n}"
+    },
+    {
+      "title": "Abbreviations",
+      "code": "function example() {\n  return (\n    <Paragraph style={{ lineHeight: 1.8 }}>\n      Hover over{' '}\n      <Tooltip label=\"Cascading Style Sheets\" color=\"info\" dashed>\n        <Span>CSS</Span>\n      </Tooltip>{' '}\n      or{' '}\n      <Tooltip label=\"HyperText Markup Language\" color=\"info\" dashed>\n        <Span>HTML</Span>\n      </Tooltip>{' '}\n      to see their full names.\n    </Paragraph>\n  );\n}"
+    }
+  ],
+  "accessibility": "- Tooltip content has `role=\"tooltip\"` for screen reader announcement\n- Has `aria-hidden` that toggles based on visibility\n- Tooltip shows on both hover and focus for keyboard users\n- The `dashed` style provides a visual cue that more information is available",
+  "related": [],
+  "storybook": null,
+  "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element.",
+  "import": "import { Tooltip } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/components/Tooltip.tsx",
+  "rootClass": "tooltip",
+  "parts": [
+    {
+      "path": "Tooltip",
+      "summary": "The `Tooltip` component displays helpful information when users hover over or focus on an element.",
+      "component": null,
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The tooltip text content.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Rich tooltip content (alternative to `label`).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "position",
+          "type": "'top' | 'bottom' | 'left' | 'right' | 'auto'",
+          "default": "'top'",
+          "description": "Position of the tooltip. Default: 'top'.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "color",
+          "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light'",
+          "default": null,
+          "description": "Color variant for the tooltip.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": null,
+          "description": "Size of the tooltip.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": "false",
+          "description": "Force tooltip to be always visible.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "multiline",
+          "type": "boolean",
+          "default": "false",
+          "description": "Allow tooltip to wrap to multiple lines.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Enable fade animation. Default: true.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "square",
+          "type": "boolean",
+          "default": "false",
+          "description": "Use square corners instead of rounded.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "dashed",
+          "type": "boolean",
+          "default": "false",
+          "description": "Show dashed underline on trigger.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "default": "0",
+          "description": "Delay before showing tooltip (ms).",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "default": "0",
+          "description": "Delay in ms before hiding the tooltip.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "tooltipClassName",
+          "type": "string",
+          "default": null,
+          "description": "Additional classes for the tooltip element.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "The element that triggers the tooltip.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Additional CSS classes.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <span> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": [
+    {
+      "css": "--bulma-tooltip-dashed-color",
+      "sass": "$tooltip-dashed-color",
+      "default": "hsl(0, 0%, 60%)",
+      "scope": "component"
+    }
+  ]
+}

package/data/components/UnorderedList.json

@@ -0,0 +1,149 @@
+{
+  "name": "UnorderedList",
+  "kind": "component",
+  "category": "elements",
+  "slug": "elements/unorderedlist",
+  "docsUrl": "https://bestax.io/docs/api/elements/unorderedlist",
+  "examples": [
+    {
+      "title": "Default List",
+      "code": "<Content>\n  <UnorderedList>\n    <ListItem>First item</ListItem>\n    <ListItem>Second item</ListItem>\n    <ListItem>Third item</ListItem>\n  </UnorderedList>\n</Content>"
+    },
+    {
+      "title": "Colored List",
+      "code": "<Content>\n  <UnorderedList textColor=\"primary\">\n    <ListItem>First item</ListItem>\n    <ListItem>Second item</ListItem>\n    <ListItem>Third item</ListItem>\n  </UnorderedList>\n</Content>"
+    },
+    {
+      "title": "List with Background",
+      "code": "<Content>\n  <UnorderedList bgColor=\"dark\" textColor=\"white\" p=\"6\">\n    <ListItem>First item</ListItem>\n    <ListItem>Second item</ListItem>\n    <ListItem>Third item</ListItem>\n  </UnorderedList>\n</Content>"
+    },
+    {
+      "title": "Nested Lists",
+      "code": "<Content>\n  <UnorderedList>\n    <ListItem>First item</ListItem>\n    <ListItem>\n      Second item with nested list\n      <UnorderedList>\n        <ListItem>Nested item 1</ListItem>\n        <ListItem>Nested item 2</ListItem>\n      </UnorderedList>\n    </ListItem>\n    <ListItem>Third item</ListItem>\n  </UnorderedList>\n</Content>"
+    },
+    {
+      "title": "Individually Colored Items",
+      "code": "<Content>\n  <UnorderedList>\n    <ListItem textColor=\"primary\">Primary item</ListItem>\n    <ListItem textColor=\"success\">Success item</ListItem>\n    <ListItem textColor=\"warning\">Warning item</ListItem>\n    <ListItem textColor=\"danger\">Danger item</ListItem>\n  </UnorderedList>\n</Content>"
+    },
+    {
+      "title": "Compound (dot-notation) usage",
+      "code": "<Content>\n  <UnorderedList>\n    <UnorderedList.Item>First item</UnorderedList.Item>\n    <UnorderedList.Item>Second item</UnorderedList.Item>\n  </UnorderedList>\n</Content>"
+    }
+  ],
+  "accessibility": "- **List Structure:** Screen readers announce the list and the number of items, helping users understand the content structure.\n- **Semantic Markup:** Using proper `<ul>` and `<li>` elements ensures accessibility for all users.\n- **Nesting:** Properly nested lists maintain correct semantics for assistive technologies.\n\n:::info\nUse `UnorderedList` when the order of items is not significant. For ordered content, use `OrderedList`.\n:::",
+  "related": ["Content", "ListItem", "OrderedList", "useBulmaClasses"],
+  "storybook": "https://bestax.io/storybook/?path=/story/elements-unorderedlist--default",
+  "summary": "The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.",
+  "import": "import { UnorderedList, ListItem } from '@allxsmith/bestax-bulma';",
+  "sourceFile": "bulma-ui/src/elements/UnorderedList.tsx",
+  "rootClass": null,
+  "parts": [
+    {
+      "path": "UnorderedList",
+      "summary": "The `UnorderedList` component renders a styled unordered list (`<ul>`) 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": "List items to render inside the list.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [],
+      "catchAll": "All standard <ul> attributes and Bulma helper props",
+      "types": []
+    },
+    {
+      "path": "UnorderedList.Item",
+      "summary": "The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.",
+      "component": "ListItem",
+      "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 list item.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "extraProps": [
+        {
+          "name": "value",
+          "type": "number",
+          "default": null,
+          "description": "Custom value for ordered list items.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        }
+      ],
+      "catchAll": "All standard <li> attributes and Bulma helper props",
+      "types": []
+    }
+  ],
+  "cssVars": []
+}

package/data/components/Valid value constants.json

@@ -0,0 +1,16 @@
+{
+  "name": "Valid value constants",
+  "kind": "helper",
+  "category": "helpers",
+  "slug": "helpers/valid-values",
+  "docsUrl": "https://bestax.io/docs/api/helpers/valid-values",
+  "examples": [],
+  "accessibility": null,
+  "related": [],
+  "storybook": null,
+  "summary": "The `valid*` constant arrays enumerate every accepted value for the shared Bulma helper props — public API you can import to build prop types and validation.",
+  "import": "import { Valid value constants } from '@allxsmith/bestax-bulma';",
+  "doc": "# Valid value constants\n\n## Overview\n\nThe `valid*` constant arrays enumerate every accepted value for the shared Bulma helper props — public API you can import to build prop types and validation. Each is a readonly `as const` tuple, so `(typeof validColors)[number]` gives you the exact string-literal union. `useBulmaClasses` (and the per-concern hooks) silently ignore values outside these lists, so validating against them tells you exactly what will produce a class.\n\n---\n\n## Import\n\n```tsx\nimport {\n  validColors,\n  validSizes,\n  validViewports,\n} from '@allxsmith/bestax-bulma';\n```\n\nAll 18 constants are importable the same way.\n\n---\n\n## Constants\n\n| Constant               | Values                                                                                                                                   | Used by prop family                                                                                                                                                                                                                |\n| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `validColors`          | `'primary'`, `'link'`, `'info'`, `'success'`, `'warning'`, `'danger'`, `'black'` … `'white'`, `'light'`, `'dark'` (17 values)            | `color`, `backgroundColor` helper props. Component `color` modifier unions are narrower and component-specific; some `validColors` members ship no `is-<color>` CSS (deprecated, warned in dev). See each component's Props table. |\n| `validColorShades`     | `'00'`, `'05'` … `'95'`, `'invert'`, `'light'`, `'dark'`, `'soft'`, `'bold'`, `'on-scheme'`                                              | `colorShade`, `backgroundColorShade`                                                                                                                                                                                               |\n| `validSizes`           | `'0'`–`'6'`, `'auto'`                                                                                                                    | Spacing: `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, … `px`, `py`                                                                                                                                                          |\n| `validTextSizes`       | `'1'`–`'7'`                                                                                                                              | `textSize` (+ `textSizeMobile` … `textSizeFullhd`)                                                                                                                                                                                 |\n| `validAlignments`      | `'centered'`, `'justified'`, `'left'`, `'right'`                                                                                         | `textAlign` (+ viewport variants)                                                                                                                                                                                                  |\n| `validTextTransforms`  | `'capitalized'`, `'lowercase'`, `'uppercase'`, `'italic'`                                                                                | `textTransform`                                                                                                                                                                                                                    |\n| `validTextWeights`     | `'light'`, `'normal'`, `'medium'`, `'semibold'`, `'bold'`                                                                                | `textWeight`                                                                                                                                                                                                                       |\n| `validFontFamilies`    | `'sans-serif'`, `'monospace'`, `'primary'`, `'secondary'`, `'code'`                                                                      | `fontFamily`                                                                                                                                                                                                                       |\n| `validDisplays`        | `'block'`, `'flex'`, `'inline'`, `'inline-block'`, `'inline-flex'`                                                                       | `display` (+ `displayMobile` … `displayFullhd`)                                                                                                                                                                                    |\n| `validVisibilities`    | `'hidden'`, `'sr-only'`, `'invisible'`                                                                                                   | `visibility` (+ viewport variants)                                                                                                                                                                                                 |\n| `validFlexDirections`  | `'row'`, `'row-reverse'`, `'column'`, `'column-reverse'`                                                                                 | `flexDirection`                                                                                                                                                                                                                    |\n| `validFlexWraps`       | `'nowrap'`, `'wrap'`, `'wrap-reverse'`                                                                                                   | `flexWrap`                                                                                                                                                                                                                         |\n| `validJustifyContents` | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'start'`, `'end'`, `'left'`, `'right'` | `justifyContent`                                                                                                                                                                                                                   |\n| `validAlignContents`   | `'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`, `'stretch'`                             | `alignContent`                                                                                                                                                                                                                     |\n| `validAlignItems`      | `'stretch'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'start'`, `'end'`                                                  | `alignItems`                                                                                                                                                                                                                       |\n| `validAlignSelfs`      | `'auto'`, `'flex-start'`, `'flex-end'`, `'center'`, `'baseline'`, `'stretch'`                                                            | `alignSelf`                                                                                                                                                                                                                        |\n| `validFlexGrowShrink`  | `'0'`–`'5'`                                                                                                                              | `flexGrow`, `flexShrink`                                                                                                                                                                                                           |\n| `validViewports`       | `'mobile'`, `'tablet'`, `'desktop'`, `'widescreen'`, `'fullhd'`                                                                          | `viewport` (responsive modifier)                                                                                                                                                                                                   |\n\n---\n\n## Typing with `(typeof …)[number]`\n\nBecause the arrays are `as const`, indexing them with `number` yields the union of their literal values — the same idiom the library uses internally for its prop types:\n\n```ts\nimport { validColors, validSizes } from '@allxsmith/bestax-bulma';\n\ntype Color = (typeof validColors)[number]; // 'primary' | 'link' | … | 'dark'\ntype Spacing = (typeof validSizes)[number]; // '0' | '1' | … | '6' | 'auto'\n\ninterface MyComponentProps {\n  color?: Color;\n  m?: Spacing;\n}\n```\n\nThey also work as runtime validators:\n\n```ts\nfunction isColor(value: string): value is (typeof validColors)[number] {\n  return (validColors as readonly string[]).includes(value);\n}\n```\n\n:::warning `validSizes` is for spacing, not element sizes\n\n`validSizes` (`'0'`–`'6'` | `'auto'`) enumerates the **spacing helper** scale — the values for `m`/`p` props like `m=\"4\"` (→ `m-4`). Element `size` props are a different axis: `Button`, `Icon`, and friends declare an inline union such as `'small' | 'medium' | 'large'` (Button adds `'normal'`), **not** `validSizes`. Don't use `validSizes` to type a component's `size` prop.\n\n:::\n\n---\n\n## See Also\n\n- [`useBulmaClasses`](./usebulmaclasses.md): The hook that consumes these values and generates the helper classes.\n- [Helper guides](../../guides/helpers/color.md): Task-oriented walkthroughs of the helper-prop system (color, spacing, typography, flex, visibility).",
+  "parts": [],
+  "cssVars": []
+}

package/data/components/classNames.json

@@ -0,0 +1,65 @@
+{
+  "name": "classNames",
+  "kind": "helper",
+  "category": "helpers",
+  "slug": "helpers/classnames",
+  "docsUrl": "https://bestax.io/docs/api/helpers/classnames",
+  "examples": [
+    {
+      "title": "Basic Usage with Strings",
+      "code": "function example() {\n  return classNames('column', 'is-half', 'has-text-primary');\n  // => 'column is-half has-text-primary'\n}"
+    },
+    {
+      "title": "Combining Strings, Numbers, Falsy Values",
+      "code": "function example() {\n  return classNames('notification', 0, null, undefined, '', 'is-primary');\n  // => 'notification 0 is-primary'\n}"
+    },
+    {
+      "title": "Using Arrays",
+      "code": "function example() {\n  return classNames('button', ['is-primary', 'is-large']);\n  // => 'button is-primary is-large'\n}"
+    },
+    {
+      "title": "Using Objects",
+      "code": "function example() {\n  const hasError = true;\n  return classNames('input', { 'is-danger': hasError, 'is-rounded': true });\n  // If hasError = false: 'input is-rounded'\n  // If hasError = true:  'input is-danger is-rounded'\n}"
+    },
+    {
+      "title": "Nested Arrays and Objects",
+      "code": "function example() {\n  return classNames(\n    'column',\n    ['is-narrow', ['has-background-primary', { 'is-hidden': false }]],\n    { 'is-size-4': true }\n  );\n  // => 'column is-narrow has-background-primary is-size-4'\n}"
+    },
+    {
+      "title": "Removing Duplicate Class Names",
+      "code": "function example() {\n  return classNames('button', 'is-primary', 'button', [\n    'is-primary',\n    'is-large',\n  ]);\n  // => 'button is-primary is-large'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const isGapless = true;\n  const isMultiline = true;\n\n  return classNames(\n    'columns',\n    { 'is-gapless': isGapless, 'is-multiline': isMultiline },\n    ['has-background-light', 'is-vcentered']\n  );\n  // Example output: 'columns is-gapless is-multiline has-background-light is-vcentered'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const span = 2;\n\n  return classNames('cell', { 'is-col-span-2': span === 2 }, [\n    'has-text-primary',\n    'is-row-span-3',\n  ]);\n  // Example output: 'cell is-col-span-2 has-text-primary is-row-span-3'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const active = true;\n  const up = false;\n  const right = true;\n  const hoverable = false;\n  const disabled = false;\n  const className = 'my-custom-dropdown';\n\n  return classNames(\n    'dropdown',\n    {\n      'is-active': active,\n      'is-up': up,\n      'is-right': right,\n      'is-hoverable': hoverable,\n      'is-disabled': disabled,\n    },\n    className\n  );\n  // Possible output: 'dropdown is-active is-right my-custom-dropdown'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const className = 'custom-class';\n  const hasShadow = false;\n  const bulmaHelperClasses = 'has-text-success';\n\n  return classNames('card', className, bulmaHelperClasses, {\n    'is-shadowless': !hasShadow,\n  });\n  // Example output: 'card custom-class has-text-success is-shadowless'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const className = 'sidebar-menu';\n  const bulmaHelperClasses = 'has-background-light';\n\n  return classNames('menu', className, bulmaHelperClasses);\n  // Example output: 'menu sidebar-menu has-background-light'\n}"
+    },
+    {
+      "title": "Real Examples from Components",
+      "code": "function example() {\n  const className = 'custom-breadcrumb';\n  const bulmaHelperClasses = undefined;\n  const alignment = 'centered';\n  const separator = 'dot';\n  const size = 'large';\n\n  return classNames('breadcrumb', className, bulmaHelperClasses, {\n    'is-centered': alignment === 'centered',\n    'has-dot-separator': separator === 'dot',\n    'is-large': size === 'large',\n  });\n  // Example output: 'breadcrumb custom-breadcrumb is-centered has-dot-separator is-large'\n}"
+    }
+  ],
+  "accessibility": null,
+  "related": [],
+  "storybook": null,
+  "summary": "`classNames` is a utility function for conditionally joining class names together.",
+  "import": "import { classNames } from '@allxsmith/bestax-bulma';",
+  "doc": "# classNames\n\n## Overview\n\n`classNames` is a utility function for conditionally joining class names together. It takes any number of arguments, which can be strings, numbers, arrays, or objects, and returns a space-separated string of unique class names. This is useful for dynamically constructing className values in React and other frameworks.\n\n---\n\n## Import\n\n```tsx\nimport { classNames } from '@allxsmith/bestax-bulma';\n```\n\n---\n\n## Usage\n\n### Basic Usage with Strings\n\n```tsx live\nfunction example() {\n  return classNames('column', 'is-half', 'has-text-primary');\n  // => 'column is-half has-text-primary'\n}\n```\n\n---\n\n### Combining Strings, Numbers, Falsy Values\n\n```tsx live\nfunction example() {\n  return classNames('notification', 0, null, undefined, '', 'is-primary');\n  // => 'notification 0 is-primary'\n}\n```\n\n---\n\n### Using Arrays\n\n```tsx live\nfunction example() {\n  return classNames('button', ['is-primary', 'is-large']);\n  // => 'button is-primary is-large'\n}\n```\n\n---\n\n### Using Objects\n\n```tsx live\nfunction example() {\n  const hasError = true;\n  return classNames('input', { 'is-danger': hasError, 'is-rounded': true });\n  // If hasError = false: 'input is-rounded'\n  // If hasError = true:  'input is-danger is-rounded'\n}\n```\n\n---\n\n### Nested Arrays and Objects\n\n```tsx live\nfunction example() {\n  return classNames(\n    'column',\n    ['is-narrow', ['has-background-primary', { 'is-hidden': false }]],\n    { 'is-size-4': true }\n  );\n  // => 'column is-narrow has-background-primary is-size-4'\n}\n```\n\n---\n\n### Removing Duplicate Class Names\n\n```tsx live\nfunction example() {\n  return classNames('button', 'is-primary', 'button', [\n    'is-primary',\n    'is-large',\n  ]);\n  // => 'button is-primary is-large'\n}\n```\n\n---\n\n### Real Examples from Components\n\n#### Columns and Column\n\n```tsx live\nfunction example() {\n  const isGapless = true;\n  const isMultiline = true;\n\n  return classNames(\n    'columns',\n    { 'is-gapless': isGapless, 'is-multiline': isMultiline },\n    ['has-background-light', 'is-vcentered']\n  );\n  // Example output: 'columns is-gapless is-multiline has-background-light is-vcentered'\n}\n```\n\n#### Grid and Cell\n\n```tsx live\nfunction example() {\n  const span = 2;\n\n  return classNames('cell', { 'is-col-span-2': span === 2 }, [\n    'has-text-primary',\n    'is-row-span-3',\n  ]);\n  // Example output: 'cell is-col-span-2 has-text-primary is-row-span-3'\n}\n```\n\n#### Dropdown\n\n```tsx live\nfunction example() {\n  const active = true;\n  const up = false;\n  const right = true;\n  const hoverable = false;\n  const disabled = false;\n  const className = 'my-custom-dropdown';\n\n  return classNames(\n    'dropdown',\n    {\n      'is-active': active,\n      'is-up': up,\n      'is-right': right,\n      'is-hoverable': hoverable,\n      'is-disabled': disabled,\n    },\n    className\n  );\n  // Possible output: 'dropdown is-active is-right my-custom-dropdown'\n}\n```\n\n#### Card\n\n```tsx live\nfunction example() {\n  const className = 'custom-class';\n  const hasShadow = false;\n  const bulmaHelperClasses = 'has-text-success';\n\n  return classNames('card', className, bulmaHelperClasses, {\n    'is-shadowless': !hasShadow,\n  });\n  // Example output: 'card custom-class has-text-success is-shadowless'\n}\n```\n\n#### Menu\n\n```tsx live\nfunction example() {\n  const className = 'sidebar-menu';\n  const bulmaHelperClasses = 'has-background-light';\n\n  return classNames('menu', className, bulmaHelperClasses);\n  // Example output: 'menu sidebar-menu has-background-light'\n}\n```\n\n#### Breadcrumb\n\n```tsx live\nfunction example() {\n  const className = 'custom-breadcrumb';\n  const bulmaHelperClasses = undefined;\n  const alignment = 'centered';\n  const separator = 'dot';\n  const size = 'large';\n\n  return classNames('breadcrumb', className, bulmaHelperClasses, {\n    'is-centered': alignment === 'centered',\n    'has-dot-separator': separator === 'dot',\n    'is-large': size === 'large',\n  });\n  // Example output: 'breadcrumb custom-breadcrumb is-centered has-dot-separator is-large'\n}\n```\n\n---\n\n## API\n\n```ts\nfunction classNames(\n  ...args: (\n    | string\n    | number\n    | undefined\n    | null\n    | false\n    | Record<string, unknown>\n    | unknown[]\n  )[]\n): string;\n```\n\n- Accepts any mix of:\n  - `string` or `number`\n  - Array of valid values (including nested arrays)\n  - Object (`{ className: boolean }`), where keys are included if their value is truthy\n  - Falsy values (`null`, `undefined`, `false`, `''`) are ignored\n\n---\n\n## Tips\n\n- All falsy values are ignored.\n- Array and object arguments can be nested arbitrarily deep.\n- Duplicate class names are automatically removed.\n- Useful for React's `className` prop, but can be used anywhere strings are needed.\n\n---\n\n## See Also\n\n- [`useBulmaClasses`](./usebulmaclasses.md): Advanced Bulma helper class generator.\n- [Bulma Documentation](https://bulma.io/documentation/)",
+  "parts": [],
+  "cssVars": []
+}