@allxsmith/bestax-bulma 5.27.0 → 5.27.1

package/dist/esm/helpers/useBulmaClasses.js

@@ -0,0 +1,158 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { useMemo } from 'react';
+import { classNames } from './classNames.js';
+import { useColorClasses, useColorStyles } from './useColorClasses.js';
+import { useSpacingClasses } from './useSpacingClasses.js';
+import { useTypographyClasses } from './useTypographyClasses.js';
+import { useVisibilityClasses } from './useVisibilityClasses.js';
+import { useFlexboxClasses } from './useFlexboxClasses.js';
+import { useOtherClasses } from './useOtherClasses.js';
+export { validAlignContents, validAlignItems, validAlignSelfs, validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validGaps, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities } from './bulmaClassHelpers.js';
+
+/**
+ * A hook that generates Bulma helper classes from props and separates unhandled props.
+ *
+ * Composed from the per-concern mini hooks (useColorClasses, useSpacingClasses,
+ * 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 BulmaClassesPropsWithScheme and additional props.
+ * @returns An object containing the Bulma helper classes, optional helper
+ * styles, and unhandled props.
+ * @example
+ * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+ *   color: 'primary',
+ *   backgroundColor: 'scheme-main-bis',
+ *   className: 'custom-class'
+ * });
+ * // bulmaHelperClasses: 'has-text-primary'
+ * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
+ * // rest: { className: 'custom-class' }
+ */
+const useBulmaClasses = (props) => {
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
+    const colorClasses = useColorClasses({
+        color,
+        colorShade,
+        backgroundColor,
+        backgroundColorShade,
+    });
+    const bulmaHelperStyles = useColorStyles({ backgroundColor });
+    const spacingClasses = useSpacingClasses({
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
+    });
+    const typographyClasses = useTypographyClasses({
+        textSize,
+        textAlign,
+        textTransform,
+        textWeight,
+        fontFamily,
+        viewport,
+        textSizeMobile,
+        textSizeTablet,
+        textSizeDesktop,
+        textSizeWidescreen,
+        textSizeFullhd,
+        textAlignMobile,
+        textAlignTablet,
+        textAlignDesktop,
+        textAlignWidescreen,
+        textAlignFullhd,
+    });
+    const visibilityClasses = useVisibilityClasses({
+        visibility,
+        visibilityMobile,
+        visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
+        visibilityDesktop,
+        visibilityDesktopOnly,
+        visibilityWidescreen,
+        visibilityWidescreenOnly,
+        visibilityFullhd,
+        display,
+        displayMobile,
+        displayTablet,
+        displayTabletOnly,
+        displayTouch,
+        displayDesktop,
+        displayDesktopOnly,
+        displayWidescreen,
+        displayWidescreenOnly,
+        displayFullhd,
+        viewport,
+    });
+    const flexboxClasses = useFlexboxClasses({
+        flexDirection,
+        flexWrap,
+        justifyContent,
+        alignContent,
+        alignItems,
+        alignSelf,
+        flexGrow,
+        flexShrink,
+        display,
+        displayMobile,
+        displayTablet,
+        displayTabletOnly,
+        displayTouch,
+        displayDesktop,
+        displayDesktopOnly,
+        displayWidescreen,
+        displayWidescreenOnly,
+        displayFullhd,
+    });
+    const otherClasses = useOtherClasses({
+        float,
+        overflow,
+        overflowX,
+        overflowY,
+        overlay,
+        interaction,
+        cursor,
+        radius,
+        shadow,
+        responsive,
+        skeleton,
+        clearfix,
+        pos,
+        relative,
+        fullHeight,
+        aspectRatio,
+    });
+    const bulmaHelperClasses = useMemo(() => classNames(colorClasses, spacingClasses, typographyClasses, visibilityClasses, flexboxClasses, otherClasses), [
+        colorClasses,
+        spacingClasses,
+        typographyClasses,
+        visibilityClasses,
+        flexboxClasses,
+        otherClasses,
+    ]);
+    return { bulmaHelperClasses, bulmaHelperStyles, rest };
+};
+
+export { useBulmaClasses, useColorClasses, useColorStyles, useFlexboxClasses, useOtherClasses, useSpacingClasses, useTypographyClasses, useVisibilityClasses };
+//# sourceMappingURL=useBulmaClasses.js.map

package/dist/esm/helpers/useBulmaClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBulmaClasses.js","sources":["../../../src/helpers/useBulmaClasses.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\nimport { classNames } from '../helpers/classNames';\nimport {\n  BulmaDisplayProps,\n  BulmaViewportProps,\n  type BulmaGapStep,\n} from './bulmaClassHelpers';\nimport {\n  useColorClasses,\n  useColorStyles,\n  BulmaColorProps,\n  BulmaColorPropsWithScheme,\n} from './useColorClasses';\nimport { useSpacingClasses, BulmaSpacingProps } from './useSpacingClasses';\nimport {\n  useTypographyClasses,\n  BulmaTypographyProps,\n} from './useTypographyClasses';\nimport {\n  useVisibilityClasses,\n  BulmaVisibilityProps,\n} from './useVisibilityClasses';\nimport { useFlexboxClasses, BulmaFlexboxProps } from './useFlexboxClasses';\nimport { useOtherClasses, BulmaOtherProps } from './useOtherClasses';\n\n/**\n * Props for applying Bulma helper classes to components.\n */\nexport interface BulmaClassesProps\n  extends\n    BulmaColorProps,\n    BulmaSpacingProps,\n    BulmaTypographyProps,\n    BulmaVisibilityProps,\n    BulmaFlexboxProps,\n    BulmaOtherProps {}\n\n/**\n * {@link BulmaClassesProps} with `backgroundColor` widened to also accept the\n * scheme color names from `validSchemeColors` (see\n * {@link BulmaColorPropsWithScheme}). This is the input type of\n * `useBulmaClasses`; scheme values surface as the `bulmaHelperStyles` return\n * member instead of a class.\n */\nexport type BulmaClassesPropsWithScheme = Omit<\n  BulmaClassesProps,\n  keyof BulmaColorProps\n> &\n  BulmaColorPropsWithScheme;\n\n/**\n * A hook that generates Bulma helper classes from props and separates unhandled props.\n *\n * Composed from the per-concern mini hooks (useColorClasses, useSpacingClasses,\n * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and\n * useOtherClasses), which can also be used individually.\n *\n * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no\n * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline\n * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other\n * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.\n *\n * @function useBulmaClasses\n * @param props - Combination of BulmaClassesPropsWithScheme and additional props.\n * @returns An object containing the Bulma helper classes, optional helper\n * styles, and unhandled props.\n * @example\n * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n *   color: 'primary',\n *   backgroundColor: 'scheme-main-bis',\n *   className: 'custom-class'\n * });\n * // bulmaHelperClasses: 'has-text-primary'\n * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n * // rest: { className: 'custom-class' }\n */\nexport const useBulmaClasses = <T extends object>(\n  props: BulmaClassesPropsWithScheme & T\n): {\n  bulmaHelperClasses: string;\n  bulmaHelperStyles?: CSSProperties;\n  rest: Omit<T, keyof BulmaClassesProps>;\n} => {\n  const {\n    color,\n    backgroundColor,\n    colorShade,\n    backgroundColorShade,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    display,\n    visibility,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    viewport,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const colorClasses = useColorClasses({\n    color,\n    colorShade,\n    backgroundColor,\n    backgroundColorShade,\n  });\n\n  const bulmaHelperStyles = useColorStyles({ backgroundColor });\n\n  const spacingClasses = useSpacingClasses({\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n  });\n\n  const typographyClasses = useTypographyClasses({\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    viewport,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n  });\n\n  const visibilityClasses = useVisibilityClasses({\n    visibility,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    viewport,\n  });\n\n  const flexboxClasses = useFlexboxClasses({\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  });\n\n  const otherClasses = useOtherClasses({\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n  });\n\n  const bulmaHelperClasses = useMemo(\n    () =>\n      classNames(\n        colorClasses,\n        spacingClasses,\n        typographyClasses,\n        visibilityClasses,\n        flexboxClasses,\n        otherClasses\n      ),\n    [\n      colorClasses,\n      spacingClasses,\n      typographyClasses,\n      visibilityClasses,\n      flexboxClasses,\n      otherClasses,\n    ]\n  );\n\n  return { bulmaHelperClasses, bulmaHelperStyles, rest };\n};\n\nexport {\n  validColors,\n  validColorShades,\n  validSchemeColors,\n  validSizes,\n  validGaps,\n  validTextSizes,\n  validAlignments,\n  validTextTransforms,\n  validTextWeights,\n  validFontFamilies,\n  validDisplays,\n  validVisibilities,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  validViewports,\n  validFloats,\n  validOverflows,\n  validAxisOverflows,\n  validInteractions,\n  validCursors,\n  validRadii,\n  validShadows,\n  validResponsives,\n  validPositions,\n  validAspectRatios,\n} from './bulmaClassHelpers';\nexport type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };\nexport * from './useColorClasses';\nexport * from './useSpacingClasses';\nexport * from './useTypographyClasses';\nexport * from './useVisibilityClasses';\nexport * from './useFlexboxClasses';\nexport * from './useOtherClasses';\n"],"names":[],"mappings":"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"}

package/dist/esm/helpers/useClientLayoutEffect.js

@@ -0,0 +1,13 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { useEffect, useLayoutEffect } from 'react';
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
+ */
+const useClientLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+export { useClientLayoutEffect };
+//# sourceMappingURL=useClientLayoutEffect.js.map

package/dist/esm/helpers/useClientLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientLayoutEffect.js","sources":["../../../src/helpers/useClientLayoutEffect.ts"],"sourcesContent":["// INTERNAL: deliberately not exported from src/index.ts.\nimport { useEffect, useLayoutEffect } from 'react';\n\n/**\n * `useLayoutEffect` in the browser, `useEffect` on the server. A server\n * render runs neither, and React 18 warns about a layout effect there, so the\n * server is handed the plain one.\n */\nexport const useClientLayoutEffect =\n  typeof document === 'undefined' ? useEffect : useLayoutEffect;\n"],"names":[],"mappings":";;;AAAA;AAGA;;;;AAIG;AACI,MAAM,qBAAqB,GAChC,OAAO,QAAQ,KAAK,WAAW,GAAG,SAAS,GAAG;;"}

package/dist/esm/helpers/useColorClasses.js

@@ -0,0 +1,84 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { useMemo } from 'react';
+import { classNames } from './classNames.js';
+import { useConfig } from './Config.js';
+import { validSchemeColors, validColors, validColorShades, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * 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.
+ * @example
+ * const colorClasses = useColorClasses({
+ *   color: 'primary',
+ *   backgroundColor: 'info',
+ * });
+ * // colorClasses: 'has-text-primary has-background-info'
+ */
+const useColorClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { color, colorShade, backgroundColor, backgroundColorShade } = props;
+    return useMemo(() => {
+        const { classes, addPrefixedClass, addClass } = createBulmaClassHelpers(classPrefix);
+        // Color handling
+        const addColorClass = (prefix, value, shade) => {
+            if (!value || ![...validColors, 'inherit', 'current'].includes(value))
+                return;
+            if (shade && validColorShades.includes(shade)) {
+                // Color shades never support viewport modifiers in Bulma
+                const className = `${prefix}-${value}-${shade}`;
+                addPrefixedClass(className);
+            }
+            else {
+                // Color classes never support viewport modifiers in Bulma
+                addClass(prefix, value, [...validColors, 'inherit', 'current'], false // supportsViewport = false for all color classes
+                );
+            }
+        };
+        // Color
+        addColorClass('has-text', color, colorShade);
+        addColorClass('has-background', backgroundColor, backgroundColorShade);
+        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 useMemo(() => {
+        if (backgroundColor &&
+            validSchemeColors.includes(backgroundColor)) {
+            return { backgroundColor: `var(--bulma-${backgroundColor})` };
+        }
+        return undefined;
+    }, [backgroundColor]);
+};
+
+export { useColorClasses, useColorStyles };
+//# sourceMappingURL=useColorClasses.js.map

package/dist/esm/helpers/useColorClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorClasses.js","sources":["../../../src/helpers/useColorClasses.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validColors,\n  validColorShades,\n  validSchemeColors,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma text and background color helper classes.\n */\nexport interface BulmaColorProps {\n  /** Text color class (e.g., 'primary', 'info'). */\n  color?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Text color shade suffix (e.g., '00', 'invert'). */\n  colorShade?: (typeof validColorShades)[number];\n  /** Background color class (e.g., 'primary', 'info'). */\n  backgroundColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color shade suffix (e.g., '00', 'invert'). */\n  backgroundColorShade?: (typeof validColorShades)[number];\n}\n\n/**\n * {@link BulmaColorProps} with `backgroundColor` widened to also accept the\n * scheme color names from `validSchemeColors` (e.g., 'scheme-main-bis').\n *\n * Scheme values never emit a `has-background-*` class — pass them through\n * {@link useColorStyles} (or `useBulmaClasses`' `bulmaHelperStyles` return) to\n * get the dark-mode-safe inline `background-color: var(--bulma-scheme-*)`\n * style instead.\n */\nexport type BulmaColorPropsWithScheme = Omit<\n  BulmaColorProps,\n  'backgroundColor'\n> & {\n  /** Background color: a Bulma color class name or a scheme color name. */\n  backgroundColor?:\n    BulmaColorProps['backgroundColor'] | (typeof validSchemeColors)[number];\n};\n\n/**\n * A hook that generates Bulma text and background color helper classes.\n *\n * Scheme background values (`scheme-main`, `scheme-main-bis`, …) are dropped\n * from class emission — Bulma ships no `has-background-scheme-*` classes; use\n * {@link useColorStyles} to render them as an inline style.\n *\n * @function useColorClasses\n * @param props - Color-related Bulma helper props.\n * @returns A space-separated string of color helper classes.\n * @example\n * const colorClasses = useColorClasses({\n *   color: 'primary',\n *   backgroundColor: 'info',\n * });\n * // colorClasses: 'has-text-primary has-background-info'\n */\nexport const useColorClasses = (props: BulmaColorPropsWithScheme): string => {\n  const { classPrefix } = useConfig();\n\n  const { color, colorShade, backgroundColor, backgroundColorShade } = props;\n\n  return useMemo(() => {\n    const { classes, addPrefixedClass, addClass } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Color handling\n    const addColorClass = (\n      prefix: 'has-text' | 'has-background',\n      value: string | undefined,\n      shade: (typeof validColorShades)[number] | undefined\n    ) => {\n      if (!value || ![...validColors, 'inherit', 'current'].includes(value))\n        return;\n      if (shade && validColorShades.includes(shade)) {\n        // Color shades never support viewport modifiers in Bulma\n        const className = `${prefix}-${value}-${shade}`;\n        addPrefixedClass(className);\n      } else {\n        // Color classes never support viewport modifiers in Bulma\n        addClass(\n          prefix,\n          value,\n          [...validColors, 'inherit', 'current'],\n          false // supportsViewport = false for all color classes\n        );\n      }\n    };\n\n    // Color\n    addColorClass('has-text', color, colorShade);\n    addColorClass('has-background', backgroundColor, backgroundColorShade);\n\n    return classNames(classes);\n  }, [classPrefix, color, colorShade, backgroundColor, backgroundColorShade]);\n};\n\n/**\n * A hook that generates inline styles for scheme-aware color props.\n *\n * When `backgroundColor` is one of the scheme color names in\n * `validSchemeColors`, returns `{ backgroundColor: 'var(--bulma-<value>)' }` —\n * an inline style that tracks Bulma's scheme CSS variables, so it adapts to\n * light/dark mode with no bestax-shipped CSS. For every other input it\n * returns `undefined` (never `{}`), so components that don't use scheme\n * values produce identical DOM to before.\n *\n * `backgroundColorShade` is ignored for scheme values — Bulma defines no\n * shaded scheme variables. Only the background is set: the `scheme-invert*`\n * values do not change text color, so pair them with a contrasting\n * foreground.\n *\n * @function useColorStyles\n * @param props - Color-related Bulma helper props (scheme-aware).\n * @returns An inline style object for scheme backgrounds, or `undefined`.\n * @example\n * const colorStyles = useColorStyles({ backgroundColor: 'scheme-main-bis' });\n * // colorStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n */\nexport const useColorStyles = (\n  props: BulmaColorPropsWithScheme\n): CSSProperties | undefined => {\n  const { backgroundColor } = props;\n\n  return useMemo(() => {\n    if (\n      backgroundColor &&\n      (validSchemeColors as readonly string[]).includes(backgroundColor)\n    ) {\n      return { backgroundColor: `var(--bulma-${backgroundColor})` };\n    }\n    return undefined;\n  }, [backgroundColor]);\n};\n"],"names":[],"mappings":";;;;;;AA0CA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,eAAe,GAAG,CAAC,KAAgC,KAAY;AAC1E,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IAEnC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,EAAE,GAAG,KAAK;IAE1E,OAAO,OAAO,CAAC,MAAK;AAClB,QAAA,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAC3C,uBAAuB,CAAC,WAAW,CAAC;;QAGtC,MAAM,aAAa,GAAG,CACpB,MAAqC,EACrC,KAAyB,EACzB,KAAoD,KAClD;AACF,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;gBACnE;YACF,IAAI,KAAK,IAAI,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;gBAE7C,MAAM,SAAS,GAAG,CAAA,EAAG,MAAM,IAAI,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE;gBAC/C,gBAAgB,CAAC,SAAS,CAAC;YAC7B;iBAAO;;AAEL,gBAAA,QAAQ,CACN,MAAM,EACN,KAAK,EACL,CAAC,GAAG,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC,EACtC,KAAK;iBACN;YACH;AACF,QAAA,CAAC;;AAGD,QAAA,aAAa,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC;AAC5C,QAAA,aAAa,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,CAAC;AAEtE,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC;AAC7E;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACI,MAAM,cAAc,GAAG,CAC5B,KAAgC,KACH;AAC7B,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK;IAEjC,OAAO,OAAO,CAAC,MAAK;AAClB,QAAA,IACE,eAAe;AACd,YAAA,iBAAuC,CAAC,QAAQ,CAAC,eAAe,CAAC,EAClE;AACA,YAAA,OAAO,EAAE,eAAe,EAAE,eAAe,eAAe,CAAA,CAAA,CAAG,EAAE;QAC/D;AACA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;AACvB;;"}

package/dist/esm/helpers/useFlexboxClasses.js

@@ -0,0 +1,92 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { useMemo } from 'react';
+import { classNames } from './classNames.js';
+import { useConfig } from './Config.js';
+import { validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * A hook that generates Bulma flexbox helper classes. Flex container helpers
+ * (direction, wrap, justify/align content, align items) are only emitted when
+ * one of the display props indicates a flex display; flex item helpers
+ * (align self, grow, shrink) are always emitted.
+ *
+ * Note: this hook reads the display props purely as a gate and never emits
+ * display classes — `is-flex` and friends come from useVisibilityClasses (or
+ * the useBulmaClasses aggregate).
+ *
+ * @function useFlexboxClasses
+ * @param props - Flexbox-related Bulma helper props.
+ * @returns A space-separated string of flexbox helper classes.
+ * @example
+ * const flexboxClasses = useFlexboxClasses({
+ *   display: 'flex', // gates the container helpers, but emits no 'is-flex'
+ *   justifyContent: 'center',
+ * });
+ * // flexboxClasses: 'is-justify-content-center'
+ * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)
+ */
+const useFlexboxClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, } = props;
+    return useMemo(() => {
+        const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
+        // Flexbox
+        const hasFlexDisplay = display === 'flex' ||
+            display === 'inline-flex' ||
+            displayMobile === 'flex' ||
+            displayMobile === 'inline-flex' ||
+            displayTablet === 'flex' ||
+            displayTablet === 'inline-flex' ||
+            displayTabletOnly === 'flex' ||
+            displayTabletOnly === 'inline-flex' ||
+            displayTouch === 'flex' ||
+            displayTouch === 'inline-flex' ||
+            displayDesktop === 'flex' ||
+            displayDesktop === 'inline-flex' ||
+            displayDesktopOnly === 'flex' ||
+            displayDesktopOnly === 'inline-flex' ||
+            displayWidescreen === 'flex' ||
+            displayWidescreen === 'inline-flex' ||
+            displayWidescreenOnly === 'flex' ||
+            displayWidescreenOnly === 'inline-flex' ||
+            displayFullhd === 'flex' ||
+            displayFullhd === 'inline-flex';
+        if (hasFlexDisplay) {
+            // Flexbox container properties do not support viewport modifiers in Bulma
+            addClassNoViewport('is-flex-direction', flexDirection, validFlexDirections);
+            addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);
+            addClassNoViewport('is-justify-content', justifyContent, validJustifyContents);
+            addClassNoViewport('is-align-content', alignContent, validAlignContents);
+            addClassNoViewport('is-align-items', alignItems, validAlignItems);
+        }
+        // Flex item properties (can be applied to any element that is a flex item)
+        // These don't require the element itself to have display: flex
+        addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);
+        addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);
+        addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);
+        return classNames(classes);
+    }, [
+        classPrefix,
+        flexDirection,
+        flexWrap,
+        justifyContent,
+        alignContent,
+        alignItems,
+        alignSelf,
+        flexGrow,
+        flexShrink,
+        display,
+        displayMobile,
+        displayTablet,
+        displayTabletOnly,
+        displayTouch,
+        displayDesktop,
+        displayDesktopOnly,
+        displayWidescreen,
+        displayWidescreenOnly,
+        displayFullhd,
+    ]);
+};
+
+export { useFlexboxClasses };
+//# sourceMappingURL=useFlexboxClasses.js.map

package/dist/esm/helpers/useFlexboxClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlexboxClasses.js","sources":["../../../src/helpers/useFlexboxClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  BulmaDisplayProps,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma flexbox helper classes. The display props are read\n * only to gate the flex container helpers; this hook never emits display\n * classes itself.\n */\nexport interface BulmaFlexboxProps extends BulmaDisplayProps {\n  /** Flex direction (e.g., 'row', 'column'). */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /** Flex wrap (e.g., 'wrap', 'nowrap'). */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /** Justify content (e.g., 'center', 'space-between'). */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /** Align content (e.g., 'center', 'stretch'). */\n  alignContent?: (typeof validAlignContents)[number];\n  /** Align items (e.g., 'center', 'flex-start'). */\n  alignItems?: (typeof validAlignItems)[number];\n  /** Align self (e.g., 'auto', 'center'). */\n  alignSelf?: (typeof validAlignSelfs)[number];\n  /** Flex grow value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexGrow?: (typeof validFlexGrowShrink)[number];\n  /** Flex shrink value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexShrink?: (typeof validFlexGrowShrink)[number];\n}\n\n/**\n * A hook that generates Bulma flexbox helper classes. Flex container helpers\n * (direction, wrap, justify/align content, align items) are only emitted when\n * one of the display props indicates a flex display; flex item helpers\n * (align self, grow, shrink) are always emitted.\n *\n * Note: this hook reads the display props purely as a gate and never emits\n * display classes — `is-flex` and friends come from useVisibilityClasses (or\n * the useBulmaClasses aggregate).\n *\n * @function useFlexboxClasses\n * @param props - Flexbox-related Bulma helper props.\n * @returns A space-separated string of flexbox helper classes.\n * @example\n * const flexboxClasses = useFlexboxClasses({\n *   display: 'flex', // gates the container helpers, but emits no 'is-flex'\n *   justifyContent: 'center',\n * });\n * // flexboxClasses: 'is-justify-content-center'\n * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)\n */\nexport const useFlexboxClasses = (props: BulmaFlexboxProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  } = props;\n\n  return useMemo(() => {\n    const { classes, addClassNoViewport } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Flexbox\n    const hasFlexDisplay =\n      display === 'flex' ||\n      display === 'inline-flex' ||\n      displayMobile === 'flex' ||\n      displayMobile === 'inline-flex' ||\n      displayTablet === 'flex' ||\n      displayTablet === 'inline-flex' ||\n      displayTabletOnly === 'flex' ||\n      displayTabletOnly === 'inline-flex' ||\n      displayTouch === 'flex' ||\n      displayTouch === 'inline-flex' ||\n      displayDesktop === 'flex' ||\n      displayDesktop === 'inline-flex' ||\n      displayDesktopOnly === 'flex' ||\n      displayDesktopOnly === 'inline-flex' ||\n      displayWidescreen === 'flex' ||\n      displayWidescreen === 'inline-flex' ||\n      displayWidescreenOnly === 'flex' ||\n      displayWidescreenOnly === 'inline-flex' ||\n      displayFullhd === 'flex' ||\n      displayFullhd === 'inline-flex';\n\n    if (hasFlexDisplay) {\n      // Flexbox container properties do not support viewport modifiers in Bulma\n      addClassNoViewport(\n        'is-flex-direction',\n        flexDirection,\n        validFlexDirections\n      );\n      addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);\n      addClassNoViewport(\n        'is-justify-content',\n        justifyContent,\n        validJustifyContents\n      );\n      addClassNoViewport('is-align-content', alignContent, validAlignContents);\n      addClassNoViewport('is-align-items', alignItems, validAlignItems);\n    }\n\n    // Flex item properties (can be applied to any element that is a flex item)\n    // These don't require the element itself to have display: flex\n    addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);\n    addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);\n    addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);\n\n    return classNames(classes);\n  }, [\n    classPrefix,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  ]);\n};\n"],"names":[],"mappings":";;;;;;AAuCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAwB,KAAY;AACpE,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEnC,IAAA,MAAM,EACJ,aAAa,EACb,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,GACd,GAAG,KAAK;IAET,OAAO,OAAO,CAAC,MAAK;QAClB,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,GACnC,uBAAuB,CAAC,WAAW,CAAC;;AAGtC,QAAA,MAAM,cAAc,GAClB,OAAO,KAAK,MAAM;AAClB,YAAA,OAAO,KAAK,aAAa;AACzB,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,YAAY,KAAK,MAAM;AACvB,YAAA,YAAY,KAAK,aAAa;AAC9B,YAAA,cAAc,KAAK,MAAM;AACzB,YAAA,cAAc,KAAK,aAAa;AAChC,YAAA,kBAAkB,KAAK,MAAM;AAC7B,YAAA,kBAAkB,KAAK,aAAa;AACpC,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,qBAAqB,KAAK,MAAM;AAChC,YAAA,qBAAqB,KAAK,aAAa;AACvC,YAAA,aAAa,KAAK,MAAM;YACxB,aAAa,KAAK,aAAa;QAEjC,IAAI,cAAc,EAAE;;AAElB,YAAA,kBAAkB,CAChB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,CACpB;AACD,YAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC;AAC5D,YAAA,kBAAkB,CAChB,oBAAoB,EACpB,cAAc,EACd,oBAAoB,CACrB;AACD,YAAA,kBAAkB,CAAC,kBAAkB,EAAE,YAAY,EAAE,kBAAkB,CAAC;AACxE,YAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,eAAe,CAAC;QACnE;;;AAIA,QAAA,kBAAkB,CAAC,eAAe,EAAE,SAAS,EAAE,eAAe,CAAC;AAC/D,QAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,CAAC;AACjE,QAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,mBAAmB,CAAC;AAErE,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE;QACD,WAAW;QACX,aAAa;QACb,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,UAAU;QACV,SAAS;QACT,QAAQ;QACR,UAAU;QACV,OAAO;QACP,aAAa;QACb,aAAa;QACb,iBAAiB;QACjB,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,iBAAiB;QACjB,qBAAqB;QACrB,aAAa;AACd,KAAA,CAAC;AACJ;;"}