@allxsmith/bestax-bulma 5.16.10 → 5.17.0

package/dist/index.cjs

@@ -1673,6 +1673,75 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
     return (jsxRuntime.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntime.jsx("ul", { children: children }) }));
 };
 
+/**
+ * The runtime mirror of `AnchorOnlyAttributes`, keyed so the two cannot drift.
+ *
+ * `Record<keyof …, true>` is what links them: the day React adds an anchor
+ * attribute, every component deriving its props from `as` accepts it and this
+ * object stops compiling until it is named here. A plain array beside a derived
+ * type drifts in the one direction that matters — the type accepts the new
+ * attribute and the filter lets it leak onto a `<div>`.
+ */
+const ANCHOR_ONLY_ATTRS = {
+    href: true,
+    target: true,
+    download: true,
+    hrefLang: true,
+    ping: true,
+    referrerPolicy: true,
+    media: true,
+    type: true,
+};
+/**
+ * `props` without the keys named in `strip`.
+ *
+ * The SET is per component and deliberately not shared, because the right
+ * answer differs and the differences are principled: how open the component's
+ * `as` is, and which of these attributes its own tags legitimately take. What
+ * IS shared is the derived source of truth above and this function. Each caller
+ * declares its delta next to the set it passes, which is the only place that
+ * stays true when a component's `as` changes.
+ */
+function omitAttrs(props, strip) {
+    const out = {};
+    // `Reflect.ownKeys`, not `Object.entries`: the latter drops symbol-keyed props.
+    // React enumerates props with `for...in`, which never reports a symbol, so
+    // nothing renders differently either way. It is not the same change for all
+    // three callers: Menu filtered by rest-destructure and kept them already,
+    // while Dropdown and Level filtered through `Object.entries` and did not, so
+    // this restores one and widens two. Symbols are the only shape where those
+    // two disagreed, and keeping them is the side a spread is on.
+    for (const key of Reflect.ownKeys(props)) {
+        // Enumerability, for the same reason in the other direction: `Reflect.ownKeys`
+        // also reports NON-enumerable own props, which every filter this replaced left
+        // behind. Copying one out would both add a prop the old code dropped and make
+        // it enumerable on the way, so widening the key source must not widen this.
+        if (!Object.prototype.propertyIsEnumerable.call(props, key))
+            continue;
+        const value = props[key];
+        // `hasOwnProperty`, not `key in strip`: `in` walks the prototype chain, so a
+        // prop named `toString`, `valueOf`, `constructor` or `hasOwnProperty` was
+        // stripped although no caller named it — and anything written to
+        // `Object.prototype` would start deleting props that share its keys.
+        if (typeof key === 'symbol' ||
+            !Object.prototype.hasOwnProperty.call(strip, key)) {
+            // `defineProperty`, not `out[key] = value`: assignment consults the
+            // prototype chain for a setter, and `__proto__` has one. A prop named
+            // `__proto__` would be swallowed by it — dropped from the result AND
+            // replacing the result's prototype with its value. A spread and a rest
+            // destructure both DEFINE, which is what makes them immune, so this has
+            // to define too.
+            Object.defineProperty(out, key, {
+                value,
+                writable: true,
+                enumerable: true,
+                configurable: true,
+            });
+        }
+    }
+    return out;
+}
+
 /**
  * Merges helper-emitted inline styles (e.g., `bulmaHelperStyles` from
  * `useBulmaClasses`) with a user-supplied `style` prop.
@@ -1749,6 +1818,34 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
                 hasCompoundComponents(children) &&
                 children, hasFooter && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'card-footer'), children: Array.isArray(footer) ? (footer.map((item, idx) => (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)))) : (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: footer })) }))] }));
 };
+/**
+ * The set withheld from a non-anchor `Card.FooterItem` (`span`/`button`): the
+ * derived anchor-only attributes, minus `type` (also valid on a `<button>` as
+ * `submit`/`button`/`reset`, so stripping it there would remove a working
+ * attribute — the same trade `DropdownItem`'s own `STRIP_FROM_NON_ANCHOR`
+ * accepts, in `./Dropdown.tsx`), plus `rel` (React declares it on
+ * `HTMLAttributes` for every element, so the derived set alone would not
+ * withhold it — the same addition `Level.Item` makes).
+ */
+const STRIP_FROM_NON_ANCHOR$2 = (() => {
+    const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;
+    return { ...rest, rel: true };
+})();
+/**
+ * The set withheld from a non-button `Card.FooterItem` (`span`/`a`), keyed so
+ * it stops compiling until a button attribute React adds is named here.
+ */
+const STRIP_FROM_NON_BUTTON = {
+    disabled: true,
+    form: true,
+    formAction: true,
+    formEncType: true,
+    formMethod: true,
+    formNoValidate: true,
+    formTarget: true,
+    name: true,
+    value: true,
+};
 /**
  * Card header compound component. Wraps children in a `.card-header` element.
  *
@@ -1779,13 +1876,14 @@ const CardHeader = ({ className, children, centered, color, bgColor, textColor,
  * @param {CardHeaderTitleProps} props - Props for the CardHeaderTitle component.
  * @returns {JSX.Element} The rendered card header title.
  */
-const CardHeaderTitle = ({ className, children, centered, color, bgColor, textColor, ...props }) => {
+const CardHeaderTitle = ({ as = 'div', 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', {
+    const Tag = as;
+    return (jsxRuntime.jsx(Tag, { className: classNames(usePrefixedClassNames('card-header-title', {
             'is-centered': centered,
         }), bulmaHelperClasses, className), ...rest, children: children }));
 };
@@ -1856,13 +1954,40 @@ const CardFooter = ({ className, children, color, bgColor, textColor, ...props }
  * @param {CardFooterItemProps} props - Props for the CardFooterItem component.
  * @returns {JSX.Element} The rendered card footer item.
  */
-const CardFooterItem = ({ className, children, color, bgColor, textColor, ...props }) => {
+const CardFooterItem = ({ as = 'span', 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 }));
+    const itemClasses = classNames(usePrefixedClassNames('card-footer-item'), bulmaHelperClasses, className);
+    // The anchor's own attributes reach an `<a>` and nothing else, and the button's a
+    // `<button>` — `STRIP_FROM_NON_ANCHOR` above names the anchor set and why `type`
+    // stays while `rel` is added, and `STRIP_FROM_NON_BUTTON` the button set.
+    if (as === 'a') {
+        return (jsxRuntime.jsx("a", { className: itemClasses, ...omitAttrs(rest, STRIP_FROM_NON_BUTTON), children: children }));
+    }
+    const forwarded = omitAttrs(rest, STRIP_FROM_NON_ANCHOR$2);
+    if (as === 'button') {
+        const forwardedType = forwarded.type;
+        return (jsxRuntime.jsx("button", { className: itemClasses, ...forwarded, 
+            // A footer item button must not submit an enclosing form by default —
+            // `<button>` defaults to `type="submit"`, and a Save/Cancel action row
+            // sitting in a form is the common case this `as` exists for.
+            //
+            // A MISSING `type` is not the only way that default arrives: `type` is
+            // typed here as the `<a>` MIME string (`STRIP_FROM_NON_ANCHOR` above
+            // says why it is not withheld), so `as="button" type="text/html"`
+            // compiles, and HTML's INVALID-value default for a button's `type` is
+            // submit too. So anything that is not one of the three native button
+            // types falls back to `button` rather than being forwarded.
+            type: forwardedType === 'submit' ||
+                forwardedType === 'reset' ||
+                forwardedType === 'button'
+                ? forwardedType
+                : 'button', children: children }));
+    }
+    return (jsxRuntime.jsx("span", { className: itemClasses, ...omitAttrs(forwarded, STRIP_FROM_NON_BUTTON), children: children }));
 };
 // Attach nested Title and Icon components to CardHeader
 const CardHeaderCompound = withSubComponents(CardHeader, {
@@ -1878,75 +2003,6 @@ const Card = withSubComponents(CardComponent, {
     FooterItem: CardFooterItem,
 }, 'Card');
 
-/**
- * The runtime mirror of `AnchorOnlyAttributes`, keyed so the two cannot drift.
- *
- * `Record<keyof …, true>` is what links them: the day React adds an anchor
- * attribute, every component deriving its props from `as` accepts it and this
- * object stops compiling until it is named here. A plain array beside a derived
- * type drifts in the one direction that matters — the type accepts the new
- * attribute and the filter lets it leak onto a `<div>`.
- */
-const ANCHOR_ONLY_ATTRS = {
-    href: true,
-    target: true,
-    download: true,
-    hrefLang: true,
-    ping: true,
-    referrerPolicy: true,
-    media: true,
-    type: true,
-};
-/**
- * `props` without the keys named in `strip`.
- *
- * The SET is per component and deliberately not shared, because the right
- * answer differs and the differences are principled: how open the component's
- * `as` is, and which of these attributes its own tags legitimately take. What
- * IS shared is the derived source of truth above and this function. Each caller
- * declares its delta next to the set it passes, which is the only place that
- * stays true when a component's `as` changes.
- */
-function omitAttrs(props, strip) {
-    const out = {};
-    // `Reflect.ownKeys`, not `Object.entries`: the latter drops symbol-keyed props.
-    // React enumerates props with `for...in`, which never reports a symbol, so
-    // nothing renders differently either way. It is not the same change for all
-    // three callers: Menu filtered by rest-destructure and kept them already,
-    // while Dropdown and Level filtered through `Object.entries` and did not, so
-    // this restores one and widens two. Symbols are the only shape where those
-    // two disagreed, and keeping them is the side a spread is on.
-    for (const key of Reflect.ownKeys(props)) {
-        // Enumerability, for the same reason in the other direction: `Reflect.ownKeys`
-        // also reports NON-enumerable own props, which every filter this replaced left
-        // behind. Copying one out would both add a prop the old code dropped and make
-        // it enumerable on the way, so widening the key source must not widen this.
-        if (!Object.prototype.propertyIsEnumerable.call(props, key))
-            continue;
-        const value = props[key];
-        // `hasOwnProperty`, not `key in strip`: `in` walks the prototype chain, so a
-        // prop named `toString`, `valueOf`, `constructor` or `hasOwnProperty` was
-        // stripped although no caller named it — and anything written to
-        // `Object.prototype` would start deleting props that share its keys.
-        if (typeof key === 'symbol' ||
-            !Object.prototype.hasOwnProperty.call(strip, key)) {
-            // `defineProperty`, not `out[key] = value`: assignment consults the
-            // prototype chain for a setter, and `__proto__` has one. A prop named
-            // `__proto__` would be swallowed by it — dropped from the result AND
-            // replacing the result's prototype with its value. A spread and a rest
-            // destructure both DEFINE, which is what makes them immune, so this has
-            // to define too.
-            Object.defineProperty(out, key, {
-                value,
-                writable: true,
-                enumerable: true,
-                configurable: true,
-            });
-        }
-    }
-    return out;
-}
-
 /**
  * Checks if code is running in a browser environment.
  * @deprecated Dropdown's internal SSR guard, exported by accident; it will
@@ -2289,7 +2345,7 @@ const MenuList = ({ className, children, ...props }) => {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
     // Increment level for nested MenuLists
-    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass, ...rest, children: children }) }));
+    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
 };
 /**
  * `href` alone — annotated so a typo is a compile error rather than a silent
@@ -2341,7 +2397,7 @@ const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
             labelChildren.push(child);
         }
     });
-    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass, ...linkProps, children: labelChildren }), nestedMenuLists] }));
+    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, children: labelChildren }), nestedMenuLists] }));
 });
 MenuItem.displayName = 'MenuItem';
 // Attach static subcomponents
@@ -2843,9 +2899,9 @@ const NavbarComponent = React.forwardRef(function NavbarComponent({ className, t
  * @param {NavbarBrandProps} props - Props for the NavbarBrand component.
  * @returns {JSX.Element} The rendered brand area.
  */
-const NavbarBrand = ({ className, children, textColor, ...props }) => {
+const NavbarBrand = ({ className, children, textColor, color, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-brand'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -2878,8 +2934,9 @@ NavbarItem.displayName = 'NavbarItem';
  * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the burger button element.
  * @returns {JSX.Element} The rendered burger.
  */
-const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active, children, ...props }, ref) {
+const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active, textColor, color, children, ...props }, ref) {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsxs("button", { ref: ref, type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
@@ -2894,8 +2951,9 @@ NavbarBurger.displayName = 'NavbarBurger';
  * @param {NavbarMenuProps} props - Props for the NavbarMenu component.
  * @returns {JSX.Element} The rendered menu.
  */
-const NavbarMenu = ({ className, active, children, ...props }) => {
+const NavbarMenu = ({ className, active, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-menu', {
@@ -2909,8 +2967,9 @@ const NavbarMenu = ({ className, active, children, ...props }) => {
  * @param {NavbarStartEndProps} props - Props for the NavbarStart component.
  * @returns {JSX.Element} The rendered start area.
  */
-const NavbarStart = ({ className, children, ...props }) => {
+const NavbarStart = ({ className, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-start'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -2922,8 +2981,9 @@ const NavbarStart = ({ className, children, ...props }) => {
  * @param {NavbarStartEndProps} props - Props for the NavbarEnd component.
  * @returns {JSX.Element} The rendered end area.
  */
-const NavbarEnd = ({ className, children, ...props }) => {
+const NavbarEnd = ({ className, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-end'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -3069,7 +3129,7 @@ const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (js
  * @param {React.HTMLAttributes<HTMLHRElement>} props - Standard hr props.
  * @returns {JSX.Element} The rendered divider.
  */
-const NavbarDivider = props => (jsxRuntime.jsx("hr", { className: usePrefixedClassNames('navbar-divider'), ...props }));
+const NavbarDivider = ({ className, ...props }) => (jsxRuntime.jsx("hr", { className: classNames(usePrefixedClassNames('navbar-divider'), className), ...props }));
 // Attach subcomponents
 const Navbar = withSubComponents(NavbarComponent, {
     Brand: NavbarBrand,
@@ -3687,7 +3747,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
  * @param {TabListProps} props - Props for the TabList component.
  * @returns {JSX.Element} The rendered tab list.
  */
-const TabList = ({ className, children, ...props }) => (jsxRuntime.jsx("ul", { role: "tablist", className: classNames(className), ...props, children: children }));
+const TabList = ({ className, children, ...props }) => (jsxRuntime.jsx("ul", { role: "tablist", className: classNames(className) || undefined, ...props, children: children }));
 /**
  * Individual tab button. Consumes Tabs context for active state management.
  * Renders `<a>` internally — consumers provide only the label text/children.
@@ -3706,7 +3766,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
             ctx.setActiveTab(index);
         }
     }, [disabled, ctx, index]);
-    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
+    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
 };
 /**
  * Each tab; accepts `active`, `onClick`, etc.
@@ -3716,7 +3776,8 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
  * @returns {JSX.Element} The rendered tab item.
  * @deprecated Use `Tabs.Tab` with an `index` prop instead.
  */
-const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className), onClick: onClick, ...props, children: children }));
+const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className) ||
+        undefined, onClick: onClick, ...props, children: children }));
 /**
  * Container for tab content panels. No custom props beyond `children` and standard `<div>` HTML attributes. Applies the `.tabs-content` class.
  *
@@ -5966,7 +6027,7 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
         Tag = 'div';
     }
     const roundedClass = usePrefixedClassNames('is-rounded');
-    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
     return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
@@ -6435,7 +6496,7 @@ const Thead = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const theadClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("thead", { className: theadClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("thead", { className: theadClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6454,7 +6515,7 @@ const Tbody = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tbody", { className: tbodyClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6473,7 +6534,7 @@ const Tfoot = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tfoot", { className: tfootClasses || undefined, ...rest, children: children }));
 };
 
 /** Valid Bulma color values for table cells. */
@@ -6508,7 +6569,7 @@ const Td = ({ className, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("td", { className: tdClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("td", { className: tdClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6531,7 +6592,7 @@ const Tr = ({ className, isSelected, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tr", { className: trClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tr", { className: trClasses || undefined, ...rest, children: children }));
 };
 
 const validAlignments = ['left', 'right', 'centered'];
@@ -6555,7 +6616,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("th", { className: thClasses, style: width
+    return (jsxRuntime.jsx("th", { className: thClasses || undefined, style: width
             ? { width: typeof width === 'number' ? `${width}px` : width }
             : undefined, ...rest, children: children }));
 };