@allxsmith/bestax-bulma 5.9.0 → 5.10.0

package/AGENTS.md

@@ -11,6 +11,11 @@ Machine-readable docs (always current):
   https://bestax.io/docs/api/elements/button.md
 - LLM guide: https://bestax.io/docs/guides/llms
 
+Prefer to query rather than read? `npx bestax-mcp` is the first-party MCP
+server — props (including compound parts), examples, `--bulma-*` variables and
+the skills as prompts, offline. Setup:
+https://bestax.io/docs/guides/llms#mcp-server
+
 Agent skills (bestax-custom-component, bestax-form, bestax-icons,
 bestax-layout-scaffold, bestax-migrate, bestax-optimize, bestax-theming):
 https://bestax.io/docs/skills/intro
@@ -21,6 +26,16 @@ https://bestax.io/docs/skills/intro
 - Existing project: `npx skills add https://github.com/allxsmith/bestax --skill bestax-form`
   (repeat per skill, or omit `--skill` to pick interactively)
 
+Three components Bulma will talk you out of — everything else here gets found
+because Bulma has no equivalent, but these have a near-miss that ends the search:
+
+- Brief confirmation after an action: `Toast` (`<ToastContainer />` at the root,
+  then `toast.success('Saved')`) — not `Notification`/`Message`.
+- A confirm or alert: `Dialog` (`<DialogContainer />`, then
+  `await dialog.confirm({ title, message })`) — not `Modal`.
+- A control that reads as text or a link: `LinkButton` — not `<a href="#">`,
+  `<div onClick>` or `Button color="text"`.
+
 Conventions (the offline essentials):
 
 - Compound components: `Card.Header`, `Navbar.Brand`, `Hero.Body`, …

package/CLAUDE.md

@@ -11,6 +11,11 @@ Machine-readable docs (always current):
   https://bestax.io/docs/api/elements/button.md
 - LLM guide: https://bestax.io/docs/guides/llms
 
+Prefer to query rather than read? `npx bestax-mcp` is the first-party MCP
+server — props (including compound parts), examples, `--bulma-*` variables and
+the skills as prompts, offline. Setup:
+https://bestax.io/docs/guides/llms#mcp-server
+
 Agent skills (bestax-custom-component, bestax-form, bestax-icons,
 bestax-layout-scaffold, bestax-migrate, bestax-optimize, bestax-theming):
 https://bestax.io/docs/skills/intro
@@ -21,6 +26,16 @@ https://bestax.io/docs/skills/intro
 - Existing project: `npx skills add https://github.com/allxsmith/bestax --skill bestax-form`
   (repeat per skill, or omit `--skill` to pick interactively)
 
+Three components Bulma will talk you out of — everything else here gets found
+because Bulma has no equivalent, but these have a near-miss that ends the search:
+
+- Brief confirmation after an action: `Toast` (`<ToastContainer />` at the root,
+  then `toast.success('Saved')`) — not `Notification`/`Message`.
+- A confirm or alert: `Dialog` (`<DialogContainer />`, then
+  `await dialog.confirm({ title, message })`) — not `Modal`.
+- A control that reads as text or a link: `LinkButton` — not `<a href="#">`,
+  `<div onClick>` or `Button color="text"`.
+
 Conventions (the offline essentials):
 
 - Compound components: `Card.Header`, `Navbar.Brand`, `Hero.Body`, …

package/dist/index.cjs.js

@@ -1490,14 +1490,19 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
  * @param {CardHeaderProps} props - Props for the CardHeader component.
  * @returns {JSX.Element} The rendered card header.
  */
-const CardHeader = ({ className, children, centered, ...props }) => {
+const CardHeader = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
     const { classPrefix } = useConfig();
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
     // Check if children contains a CardHeaderTitle component
     const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         typeof child.type === 'function' &&
         child.type === CardHeaderTitle);
     const headerClasses = usePrefixedClassNames('card-header');
-    return (jsxRuntime.jsx("header", { className: classNames(headerClasses, className), ...props, children: hasHeaderTitle ? (children) : (jsxRuntime.jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
+    return (jsxRuntime.jsx("header", { className: classNames(headerClasses, bulmaHelperClasses, className), ...rest, children: hasHeaderTitle ? (children) : (jsxRuntime.jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
                 'is-centered': centered,
             }), className), children: children })) }));
 };
@@ -1508,9 +1513,16 @@ const CardHeader = ({ className, children, centered, ...props }) => {
  * @param {CardHeaderTitleProps} props - Props for the CardHeaderTitle component.
  * @returns {JSX.Element} The rendered card header title.
  */
-const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-header-title', {
-        'is-centered': centered,
-    }), className), ...props, children: children }));
+const CardHeaderTitle = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-header-title', {
+            'is-centered': centered,
+        }), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card header icon compound component. Renders a `.card-header-icon` button.
  *
@@ -1518,7 +1530,14 @@ const CardHeaderTitle = ({ className, children, centered, ...props }) => (jsxRun
  * @param {CardHeaderIconProps} props - Props for the CardHeaderIcon component.
  * @returns {JSX.Element} The rendered card header icon button.
  */
-const CardHeaderIcon = ({ className, children, ...props }) => (jsxRuntime.jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), className), "aria-label": props['aria-label'] || 'more options', ...props, children: children }));
+const CardHeaderIcon = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'more options', ...rest, children: children }));
+};
 /**
  * Card image compound component. Wraps children in a `.card-image` element.
  *
@@ -1526,7 +1545,14 @@ const CardHeaderIcon = ({ className, children, ...props }) => (jsxRuntime.jsx("b
  * @param {CardImageProps} props - Props for the CardImage component.
  * @returns {JSX.Element} The rendered card image container.
  */
-const CardImage = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-image'), className), ...props, children: children }));
+const CardImage = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-image'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card content compound component. Wraps children in a `.card-content` element.
  *
@@ -1534,7 +1560,14 @@ const CardImage = ({ className, children, ...props }) => (jsxRuntime.jsx("div",
  * @param {CardContentProps} props - Props for the CardContent component.
  * @returns {JSX.Element} The rendered card content container.
  */
-const CardContent = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-content'), className), ...props, children: children }));
+const CardContent = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('card-content'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card footer compound component. Wraps children in a `.card-footer` element.
  *
@@ -1542,7 +1575,14 @@ const CardContent = ({ className, children, ...props }) => (jsxRuntime.jsx("div"
  * @param {CardFooterProps} props - Props for the CardFooter component.
  * @returns {JSX.Element} The rendered card footer.
  */
-const CardFooter = ({ className, children, ...props }) => (jsxRuntime.jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), className), ...props, children: children }));
+const CardFooter = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("footer", { className: classNames(usePrefixedClassNames('card-footer'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 /**
  * Card footer item compound component. Wraps children in a `.card-footer-item` span.
  *
@@ -1550,7 +1590,14 @@ const CardFooter = ({ className, children, ...props }) => (jsxRuntime.jsx("foote
  * @param {CardFooterItemProps} props - Props for the CardFooterItem component.
  * @returns {JSX.Element} The rendered card footer item.
  */
-const CardFooterItem = ({ className, children, ...props }) => (jsxRuntime.jsx("span", { className: classNames(usePrefixedClassNames('card-footer-item'), className), ...props, children: children }));
+const CardFooterItem = ({ className, children, color, bgColor, textColor, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("span", { className: classNames(usePrefixedClassNames('card-footer-item'), bulmaHelperClasses, className), ...rest, children: children }));
+};
 // Attach nested Title and Icon components to CardHeader
 const CardHeaderCompound = withSubComponents(CardHeader, {
     Title: CardHeaderTitle,
@@ -2643,7 +2690,7 @@ function useTabsContext() {
  *   </Tabs.Content>
  * </Tabs>
  */
-const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
+const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed, toggle, rounded, color, value, onChange, defaultValue = 0, vertical, side, expanded, className, children, ...props }) => {
     warnDeprecatedColorProp('Tabs', color, 'Remove the prop; no replacement exists.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     // Controlled vs uncontrolled state
@@ -2662,7 +2709,7 @@ const TabsComponent = ({ align, size, fullwidth, boxed, toggle, rounded, color,
         [`is-${align}`]: align,
         [`is-${size}`]: size,
         [`is-${color}`]: color,
-        'is-fullwidth': fullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth ?? fullwidth,
         'is-boxed': boxed,
         'is-toggle': toggle,
         'is-toggle-rounded': rounded,
@@ -3352,9 +3399,10 @@ const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
  *   <div>Panel content</div>
  * </Sidebar>
  */
-const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', fullWidth = false, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
+const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const sidebarRef = React.useRef(null);
+    const resolvedFullwidth = isFullwidth ?? fullWidth ?? false;
     // Close handler
     const handleClose = React.useCallback(() => {
         if (canCancel && onClose) {
@@ -3421,7 +3469,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     const sidebarClasses = usePrefixedClassNames('sidebar', {
         'is-active': isOpen,
         [`is-${position}`]: position,
-        'is-fullwidth': fullWidth,
+        'is-fullwidth': resolvedFullwidth,
     });
     const backgroundClass = usePrefixedClassNames('sidebar-background', {
         'is-active': isOpen,
@@ -3431,7 +3479,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     // Custom style for width
     const sidebarStyle = {
         ...style,
-        '--bulma-sidebar-width': fullWidth ? '100%' : width,
+        '--bulma-sidebar-width': resolvedFullwidth ? '100%' : width,
     };
     const sidebarContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overlay && (jsxRuntime.jsx("div", { className: backgroundClass, onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsx("aside", { ref: combinedRef, className: combinedClasses, style: sidebarStyle, role: "dialog", "aria-modal": overlay ? 'true' : undefined, "aria-hidden": !isOpen, tabIndex: -1, ...rest, children: jsxRuntime.jsx("div", { className: contentClass, children: children }) })] }));
     if (inline) {
@@ -3999,7 +4047,7 @@ const validButtonColors = [...validColors, 'text', 'ghost'];
  * @returns {JSX.Element} The rendered button or anchor element.
  * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...props }) => {
+const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -4020,7 +4068,7 @@ const Button = ({ color, size, isLight, isRounded, isLoading, isStatic, isFullWi
         'is-focused': isFocused,
         'is-active': isActive,
         'is-inverted': isInverted,
-        'is-fullwidth': isFullWidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
     const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -5236,8 +5284,11 @@ const SubTitle = ({ className, size, as = 'h1', hasSkeleton, textColor, bgColor,
     });
     // Validate 'as' prop at runtime
     const element = validSubTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime
-    const validSize = size && validSubTitleSizes.includes(size) ? size : undefined;
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validSubTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
     const bulmaClasses = usePrefixedClassNames('subtitle', {
         [`is-${validSize}`]: validSize,
         'has-skeleton': hasSkeleton,
@@ -5397,7 +5448,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
  * @returns {JSX.Element} The rendered table element.
  * @see {@link https://bulma.io/documentation/elements/table/ | Bulma Table documentation}
  */
-const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isResponsive, children, ...props }) => {
+const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverable, isFullwidth, isFullWidth, isResponsive, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5407,7 +5458,7 @@ const TableComponent = ({ className, isBordered, isStriped, isNarrow, isHoverabl
         'is-striped': isStriped,
         'is-narrow': isNarrow,
         'is-hoverable': isHoverable,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     const containerClass = usePrefixedClassNames('table-container');
     const tableClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -5447,7 +5498,7 @@ const validTagSizes = ['normal', 'medium', 'large'];
  * @returns {JSX.Element} The rendered tag element.
  * @see {@link https://bulma.io/documentation/elements/tag/ | Bulma Tag documentation}
  */
-const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
+const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable, onDelete, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -5455,6 +5506,7 @@ const Tag = ({ className, color, size, isRounded, isDelete, isHoverable, onDelet
     const bulmaClasses = usePrefixedClassNames('tag', {
         [`is-${color}`]: color && validTagColors.includes(color),
         [`is-${size}`]: size && size !== 'normal' && validTagSizes.includes(size),
+        'is-light': isLight,
         'is-rounded': isRounded,
         'is-delete': isDelete,
         'is-hoverable': isHoverable,
@@ -5509,8 +5561,11 @@ const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, b
     });
     // Validate 'as' prop at runtime
     const element = validTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime
-    const validSize = size && validTitleSizes.includes(size) ? size : undefined;
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
     const bulmaClasses = usePrefixedClassNames('title', {
         [`is-${validSize}`]: validSize,
         'is-spaced': isSpaced,
@@ -5993,7 +6048,7 @@ const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkbo
  */
 const File = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, color, size, isBoxed, isFullwidth, isFullWidth, isRight, isCentered, hasName, buttonLabel, iconLeft, iconRight, className, inputClassName, fileName, ...props }, ref) => {
     const insideField = useInsideField();
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
@@ -6022,7 +6077,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
         'is-boxed': isBoxed,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
         'has-name': hasName,
     });
     const fileClass = classNames(mainClass, bulmaHelperClasses, alignmentClass, className);
@@ -6863,6 +6918,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [numberinputElement, messageEl] }));
 });
 Numberinput.displayName = 'Numberinput';
+/** @deprecated Use `Numberinput` — same component. */
+const NumberInput = Numberinput;
 
 /**
  * Default star icon component.
@@ -7690,6 +7747,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [taginputElement, messageEl] }));
 });
 Taginput.displayName = 'Taginput';
+/** @deprecated Use `Taginput` — same component. */
+const TagInput = Taginput;
 
 /**
  * Bulma Input component with full Bulma helper class support.
@@ -7730,7 +7789,7 @@ InputBase.displayName = 'InputBase';
  * @returns {JSX.Element} The rendered select element.
  * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
  */
-const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -7743,7 +7802,7 @@ const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActi
         'is-loading': isLoading,
         'is-active': isActive,
         'is-multiple': !!multiple,
-        'is-fullwidth': isFullwidth,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
     });
     const selectClass = classNames(mainClass, bulmaHelperClasses, className);
     // is-hovered / is-focused belong on the inner <select> element, not the wrapper.
@@ -12202,6 +12261,7 @@ exports.NavbarMenu = NavbarMenu;
 exports.NavbarStart = NavbarStart;
 exports.Notification = Notification;
 exports.NotificationContainer = NotificationContainer;
+exports.NumberInput = NumberInput;
 exports.Numberinput = Numberinput;
 exports.OrderedList = OrderedList;
 exports.Pagination = Pagination;
@@ -12245,6 +12305,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.Tag = Tag;
+exports.TagInput = TagInput;
 exports.Taginput = Taginput;
 exports.Tags = Tags;
 exports.Tbody = Tbody;