@allxsmith/bestax-bulma 5.10.0 → 5.11.0

package/dist/index.cjs.js

@@ -246,6 +246,22 @@ const validColorShades = [
     'bold',
     'on-scheme',
 ];
+/**
+ * Valid Bulma scheme color names for scheme-aware backgrounds.
+ *
+ * Bulma ships no `has-background-scheme-*` helper classes, so these values
+ * never emit a class — components render them as a dark-mode-safe inline
+ * `background-color: var(--bulma-<value>)` style instead.
+ * @example 'scheme-main', 'scheme-main-bis', 'scheme-invert'
+ */
+const validSchemeColors = [
+    'scheme-main',
+    'scheme-main-bis',
+    'scheme-main-ter',
+    'scheme-invert',
+    'scheme-invert-bis',
+    'scheme-invert-ter',
+];
 /**
  * Valid Bulma size classes for margins and paddings.
  * @example '0', '1', 'auto'
@@ -437,6 +453,10 @@ const createBulmaClassHelpers = (classPrefix, viewport) => {
 /**
  * A hook that generates Bulma text and background color helper classes.
  *
+ * Scheme background values (`scheme-main`, `scheme-main-bis`, …) are dropped
+ * from class emission — Bulma ships no `has-background-scheme-*` classes; use
+ * {@link useColorStyles} to render them as an inline style.
+ *
  * @function useColorClasses
  * @param props - Color-related Bulma helper props.
  * @returns A space-separated string of color helper classes.
@@ -473,6 +493,38 @@ const useColorClasses = (props) => {
         return classNames(classes);
     }, [classPrefix, color, colorShade, backgroundColor, backgroundColorShade]);
 };
+/**
+ * A hook that generates inline styles for scheme-aware color props.
+ *
+ * When `backgroundColor` is one of the scheme color names in
+ * `validSchemeColors`, returns `{ backgroundColor: 'var(--bulma-<value>)' }` —
+ * an inline style that tracks Bulma's scheme CSS variables, so it adapts to
+ * light/dark mode with no bestax-shipped CSS. For every other input it
+ * returns `undefined` (never `{}`), so components that don't use scheme
+ * values produce identical DOM to before.
+ *
+ * `backgroundColorShade` is ignored for scheme values — Bulma defines no
+ * shaded scheme variables. Only the background is set: the `scheme-invert*`
+ * values do not change text color, so pair them with a contrasting
+ * foreground.
+ *
+ * @function useColorStyles
+ * @param props - Color-related Bulma helper props (scheme-aware).
+ * @returns An inline style object for scheme backgrounds, or `undefined`.
+ * @example
+ * const colorStyles = useColorStyles({ backgroundColor: 'scheme-main-bis' });
+ * // colorStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
+ */
+const useColorStyles = (props) => {
+    const { backgroundColor } = props;
+    return React.useMemo(() => {
+        if (backgroundColor &&
+            validSchemeColors.includes(backgroundColor)) {
+            return { backgroundColor: `var(--bulma-${backgroundColor})` };
+        }
+        return undefined;
+    }, [backgroundColor]);
+};
 
 /**
  * A hook that generates Bulma margin and padding helper classes.
@@ -843,16 +895,23 @@ const useOtherClasses = (props) => {
  * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and
  * useOtherClasses), which can also be used individually.
  *
+ * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no
+ * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline
+ * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
+ * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
+ *
  * @function useBulmaClasses
- * @param props - Combination of BulmaClassesProps and additional props.
- * @returns An object containing the Bulma helper classes and unhandled props.
+ * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @returns An object containing the Bulma helper classes, optional helper
+ * styles, and unhandled props.
  * @example
- * const { bulmaHelperClasses, rest } = useBulmaClasses({
+ * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
  *   color: 'primary',
- *   textSize: '3',
+ *   backgroundColor: 'scheme-main-bis',
  *   className: 'custom-class'
  * });
- * // bulmaHelperClasses: 'has-text-primary is-size-3'
+ * // bulmaHelperClasses: 'has-text-primary'
+ * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
@@ -863,6 +922,7 @@ const useBulmaClasses = (props) => {
         backgroundColor,
         backgroundColorShade,
     });
+    const bulmaHelperStyles = useColorStyles({ backgroundColor });
     const spacingClasses = useSpacingClasses({
         m,
         mt,
@@ -950,7 +1010,7 @@ const useBulmaClasses = (props) => {
         flexboxClasses,
         otherClasses,
     ]);
-    return { bulmaHelperClasses, rest };
+    return { bulmaHelperClasses, bulmaHelperStyles, rest };
 };
 
 /**
@@ -1413,6 +1473,23 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
     return (jsxRuntime.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntime.jsx("ul", { children: children }) }));
 };
 
+/**
+ * Merges helper-emitted inline styles (e.g., `bulmaHelperStyles` from
+ * `useBulmaClasses`) with a user-supplied `style` prop.
+ *
+ * The user's `style` wins on conflicting properties, and when both inputs are
+ * absent the result is `undefined` — so components that receive neither
+ * render with no `style` attribute at all, exactly as before.
+ *
+ * @function mergeBulmaStyles
+ * @param helperStyles - Inline styles emitted by the Bulma helper hooks.
+ * @param style - The component consumer's `style` prop.
+ * @returns The merged style object, or `undefined` when both are absent.
+ * @example
+ * <section style={mergeBulmaStyles(bulmaHelperStyles, style)} />
+ */
+const mergeBulmaStyles = (helperStyles, style) => helperStyles || style ? { ...helperStyles, ...style } : undefined;
+
 /**
  * Wrap each footer item in a `.card-footer-item` span.
  * @param {CardProps['footer']} footer - Footer content (single node or array).
@@ -1451,9 +1528,9 @@ const hasCompoundComponents = (children) => {
  * @returns {JSX.Element} The rendered card element.
  * @see {@link https://bulma.io/documentation/components/card/ | Bulma Card documentation}
  */
-const CardComponent = ({ className, children, textColor, color, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, ...props }) => {
+const CardComponent = ({ className, children, textColor, color, bgColor, hasShadow = true, header, headerCentered, headerIcon, footer, image, imageAlt, style, ...props }) => {
     const { classPrefix } = useConfig();
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -1472,7 +1549,7 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
                         'is-centered': headerCentered,
                     }), children: header })), headerIcon] }));
     };
-    return (jsxRuntime.jsxs("div", { className: cardClasses, ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsxRuntime.jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsxRuntime.jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
+    return (jsxRuntime.jsxs("div", { className: cardClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsxRuntime.jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsxRuntime.jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
                 !hasCompoundComponents(children) && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-content'), children: children })), typeof children !== 'undefined' &&
@@ -4570,11 +4647,11 @@ const Block = ({ className, textColor, color, bgColor, children, ...props }) =>
  * @returns {JSX.Element} The rendered box element.
  * @see {@link https://bulma.io/documentation/elements/box/ | Bulma Box documentation}
  */
-const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, ...props }) => {
+const Box = ({ className, textColor, color, bgColor, hasShadow = true, children, style, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -4583,7 +4660,7 @@ const Box = ({ className, textColor, color, bgColor, hasShadow = true, children,
         'is-shadowless': !hasShadow,
     });
     const boxClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: boxClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: boxClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -11175,6 +11252,12 @@ const bulmaCssVars = [
     // scheme
     '--bulma-scheme-h',
     '--bulma-scheme-s',
+    '--bulma-scheme-main',
+    '--bulma-scheme-main-bis',
+    '--bulma-scheme-main-ter',
+    '--bulma-scheme-invert',
+    '--bulma-scheme-invert-bis',
+    '--bulma-scheme-invert-ter',
     '--bulma-light-l',
     '--bulma-light-invert-l',
     '--bulma-dark-l',
@@ -11858,8 +11941,8 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
  * @returns {JSX.Element} The rendered container.
  * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}
  */
-const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fullhd, breakpoint, isMax, children, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -11887,7 +11970,7 @@ const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fu
     });
     const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');
     const containerClasses = classNames(mainClass, containerModifiers, prefixedBreakpointClass, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("div", { className: containerClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: containerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -11903,8 +11986,8 @@ const Container = ({ className, textColor, color, bgColor, fluid, widescreen, fu
  *   <div className="content has-text-centered">...</div>
  * </Footer>
  */
-const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Footer = ({ as = 'footer', className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -11912,7 +11995,7 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     const Tag = as;
     const mainClass = usePrefixedClassNames('footer');
     const footerClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx(Tag, { className: footerClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx(Tag, { className: footerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 /**
@@ -11923,9 +12006,9 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
  * @returns {JSX.Element} The rendered hero.
  * @see {@link https://bulma.io/documentation/layout/hero/ | Bulma Hero documentation}
  */
-const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, ...props }) => {
+const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar, children, style, ...props }) => {
     warnUnstyledColor('Hero', color, ['inherit', 'current']);
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         backgroundColor: bgColor,
         ...props,
     });
@@ -11935,7 +12018,7 @@ const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar,
         'is-fullheight-with-navbar': fullheightWithNavbar || size === 'fullheight-with-navbar',
     });
     const heroClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("section", { className: heroClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("section", { className: heroClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Top bar for navigation or branding.
@@ -11944,15 +12027,15 @@ const HeroComponent = ({ className, color, size, bgColor, fullheightWithNavbar,
  * @param {HeroHeadProps} props - Props for the HeroHead component.
  * @returns {JSX.Element} The rendered hero head.
  */
-const HeroHead = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroHead = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-head');
     const heroHeadClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: heroHeadClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: heroHeadClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Main content area, vertically centered by default.
@@ -11961,15 +12044,15 @@ const HeroHead = ({ className, children, color, bgColor, textColor, ...props })
  * @param {HeroBodyProps} props - Props for the HeroBody component.
  * @returns {JSX.Element} The rendered hero body.
  */
-const HeroBody = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroBody = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-body');
     const heroBodyClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: heroBodyClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: heroBodyClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 /**
  * Bottom bar for tabs or actions.
@@ -11978,15 +12061,15 @@ const HeroBody = ({ className, children, color, bgColor, textColor, ...props })
  * @param {HeroFootProps} props - Props for the HeroFoot component.
  * @returns {JSX.Element} The rendered hero foot.
  */
-const HeroFoot = ({ className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const HeroFoot = ({ className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
     const mainClass = usePrefixedClassNames('hero-foot');
     const heroFootClasses = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("div", { className: heroFootClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: heroFootClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 // Attach subcomponents
 const Hero = withSubComponents(HeroComponent, {
@@ -12165,8 +12248,8 @@ const Media = withSubComponents(MediaComponent, {
  * @returns {JSX.Element} The rendered section.
  * @see {@link https://bulma.io/documentation/layout/section/ | Bulma Section documentation}
  */
-const Section = ({ size, className, children, color, bgColor, textColor, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
+const Section = ({ size, className, children, color, bgColor, textColor, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
         color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
@@ -12176,7 +12259,7 @@ const Section = ({ size, className, children, color, bgColor, textColor, ...prop
         [`is-${size}`]: size,
     });
     const sectionClasses = classNames(mainClass, sectionModifiers, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("section", { className: sectionClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
 exports.Autocomplete = Autocomplete;
@@ -12331,6 +12414,7 @@ exports.classNames = classNames;
 exports.createPrefixedClassNames = createPrefixedClassNames;
 exports.dialog = dialog;
 exports.isBrowser = isBrowser$1;
+exports.mergeBulmaStyles = mergeBulmaStyles;
 exports.notification = notification;
 exports.prefixedClassNames = prefixedClassNames;
 exports.radioColors = radioColors;
@@ -12341,6 +12425,7 @@ exports.toast = toast;
 exports.useBulmaClasses = useBulmaClasses;
 exports.useClassPrefix = useClassPrefix;
 exports.useColorClasses = useColorClasses;
+exports.useColorStyles = useColorStyles;
 exports.useConfig = useConfig;
 exports.useFlexboxClasses = useFlexboxClasses;
 exports.useIconLibrary = useIconLibrary;
@@ -12364,6 +12449,7 @@ exports.validFlexGrowShrink = validFlexGrowShrink;
 exports.validFlexWraps = validFlexWraps;
 exports.validFontFamilies = validFontFamilies;
 exports.validJustifyContents = validJustifyContents;
+exports.validSchemeColors = validSchemeColors;
 exports.validSizes = validSizes$1;
 exports.validTableColors = validTableColors;
 exports.validTextSizes = validTextSizes;