@allxsmith/bestax-bulma 5.27.0 → 5.27.2

package/dist/esm/helpers/useOtherClasses.js

@@ -0,0 +1,115 @@
+/* @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 { validFloats, validAxisOverflows, validInteractions, validCursors, cursorClasses, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * A hook that generates miscellaneous Bulma helper classes (float, overflow,
+ * overlay, interaction, cursor, radius, shadow, responsive, skeleton,
+ * clearfix, position, full height, and aspect ratio).
+ *
+ * @function useOtherClasses
+ * @param props - Miscellaneous Bulma helper props.
+ * @returns A space-separated string of helper classes.
+ * @example
+ * const otherClasses = useOtherClasses({ float: 'left', skeleton: true });
+ * // otherClasses: 'is-pulled-left is-skeleton'
+ */
+const useOtherClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, } = props;
+    return useMemo(() => {
+        const { classes, addPrefixedClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
+        // Other Helpers (no viewport support)
+        if (float) {
+            addClassNoViewport('is-pulled', float, validFloats);
+        }
+        // Bulma's overflow helpers are all `!important` at the same specificity
+        // and ordered by value rather than by axis, so a both-axes class beside an
+        // axis class would be settled by which value comes later in the
+        // stylesheet. Once an axis prop is set, both axes are written per axis
+        // instead: the axis prop wins its own, and `overflow` fills in the other,
+        // `clipped` being `overflow: hidden`.
+        const axisX = validAxisOverflows.find(v => v === overflowX);
+        const axisY = validAxisOverflows.find(v => v === overflowY);
+        if (axisX || axisY) {
+            const rest = overflow === 'clipped' ? 'hidden' : overflow;
+            addClassNoViewport('is-overflow-x', axisX ?? rest, validAxisOverflows);
+            addClassNoViewport('is-overflow-y', axisY ?? rest, validAxisOverflows);
+        }
+        else if (overflow === 'clipped') {
+            // The older helper, which keeps its own class.
+            addPrefixedClass('is-clipped');
+        }
+        else {
+            addClassNoViewport('is-overflow', overflow, validAxisOverflows);
+        }
+        if (overlay) {
+            addPrefixedClass('is-overlay');
+        }
+        if (interaction) {
+            addClassNoViewport('is', interaction, validInteractions);
+        }
+        if (cursor && validCursors.includes(cursor)) {
+            addPrefixedClass(cursorClasses[cursor]);
+        }
+        // `radiusless` is an `is-` helper that removes the radius; the sizes are
+        // Bulma's `has-radius-` helpers.
+        if (radius === 'radiusless') {
+            addPrefixedClass('is-radiusless');
+        }
+        else {
+            addClassNoViewport('has-radius', radius, validRadii);
+        }
+        if (shadow) {
+            addClassNoViewport('is', shadow, validShadows);
+        }
+        if (responsive) {
+            addClassNoViewport('is', responsive, validResponsives);
+        }
+        // Bulma Skeleton Helper
+        if (skeleton) {
+            addPrefixedClass('is-skeleton');
+        }
+        // Clearfix Helper
+        if (clearfix) {
+            addPrefixedClass('is-clearfix');
+        }
+        // Position Helpers. A valid `pos` decides the position on its own, so a
+        // `relative` beside it cannot add a second, conflicting one.
+        if (pos && validPositions.includes(pos)) {
+            addPrefixedClass(`is-position-${pos}`);
+        }
+        else if (relative) {
+            addPrefixedClass('is-relative');
+        }
+        // Full Height Helper
+        if (fullHeight) {
+            addPrefixedClass('is-full-height');
+        }
+        addClassNoViewport('is-aspect-ratio', aspectRatio, validAspectRatios);
+        return classNames(classes);
+    }, [
+        classPrefix,
+        float,
+        overflow,
+        overflowX,
+        overflowY,
+        overlay,
+        interaction,
+        cursor,
+        radius,
+        shadow,
+        responsive,
+        skeleton,
+        clearfix,
+        pos,
+        relative,
+        fullHeight,
+        aspectRatio,
+    ]);
+};
+
+export { useOtherClasses };
+//# sourceMappingURL=useOtherClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOtherClasses.js","sources":["../../../src/helpers/useOtherClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  cursorClasses,\n  validAspectRatios,\n  validAxisOverflows,\n  validCursors,\n  validFloats,\n  validInteractions,\n  validOverflows,\n  validPositions,\n  validRadii,\n  validResponsives,\n  validShadows,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying miscellaneous Bulma helper classes.\n */\nexport interface BulmaOtherProps {\n  /** Float direction (e.g., 'left', 'right'). */\n  float?: (typeof validFloats)[number];\n  /**\n   * Overflow behavior on both axes. `clipped` renders `is-clipped`; the CSS\n   * keywords (`auto`, `clip`, `hidden`, `scroll`, `visible`) render\n   * `is-overflow-<value>`.\n   *\n   * Beside `overflowX` or `overflowY`, the axis prop wins on its own axis and\n   * `overflow` sets only the other one, with `clipped` counting as `hidden`:\n   * `overflow=\"hidden\" overflowY=\"auto\"` clips sideways and scrolls down.\n   */\n  overflow?: (typeof validOverflows)[number];\n  /**\n   * Horizontal overflow behavior (e.g., 'auto', 'hidden'). Wins over\n   * `overflow` on this axis.\n   */\n  overflowX?: (typeof validAxisOverflows)[number];\n  /**\n   * Vertical overflow behavior (e.g., 'auto', 'scroll'). Wins over `overflow`\n   * on this axis.\n   */\n  overflowY?: (typeof validAxisOverflows)[number];\n  /**\n   * Covers the nearest positioned ancestor (`is-overlay`): `position:\n   * absolute` with `top`, `right`, `bottom` and `left` at 0.\n   *\n   * `pos` and `relative` set `position` with `!important`, so beside\n   * `overlay` either one replaces the `absolute` and keeps the zero offsets.\n   * `pos=\"fixed\"` then covers the viewport instead of the ancestor. `sticky`,\n   * `relative` and `static` put the element back in the normal flow, where it\n   * covers nothing, and a sticky one sticks at every edge of its scroll\n   * container.\n   */\n  overlay?: boolean;\n  /** Interaction behavior (e.g., 'unselectable', 'clickable'). */\n  interaction?: (typeof validInteractions)[number];\n  /** Cursor style (e.g., 'pointer', 'help'). */\n  cursor?: (typeof validCursors)[number];\n  /**\n   * Border radius. `radiusless` removes it (`is-radiusless`). `small`,\n   * `normal`, `large` and `rounded` set one from Bulma's radius scale\n   * (`has-radius-<value>`), where `rounded` is the pill shape.\n   *\n   * The class lands on the component's root element, so where an inner\n   * element draws the radius, such as the `<img>` in `Image` or the\n   * `<select>` in `Select`, that element keeps its own. The sizes are not\n   * `!important`, unlike `radiusless`, so a component rule more specific than\n   * one class still wins: an `isRounded` control stays a pill, and a joined\n   * addon keeps its square inner corners.\n   */\n  radius?: (typeof validRadii)[number];\n  /** Shadow style (e.g., 'shadowless'). */\n  shadow?: (typeof validShadows)[number];\n  /** Responsive behavior (e.g., 'mobile', 'narrow'). */\n  responsive?: (typeof validResponsives)[number];\n  /** Add Bulma skeleton class if true. */\n  skeleton?: boolean;\n  /** Applies clearfix to fix floating children if true. */\n  clearfix?: boolean;\n  /**\n   * CSS `position` (`is-position-<value>`).\n   *\n   * Named `pos` because several components already have a `position` prop\n   * of their own, for where they place a popup or a toast.\n   *\n   * It sets `position` and nothing else, so an element that is `absolute`,\n   * `fixed` or `sticky` still needs its offsets (`top`, `left`, …) from your\n   * own CSS. `sticky` in particular does nothing until one is set.\n   *\n   * When `pos` is set it decides the position, and `relative` adds nothing.\n   * Beside `overlay` it replaces the overlay's `absolute` but not its zero\n   * offsets; see `overlay`.\n   */\n  pos?: (typeof validPositions)[number];\n  /**\n   * Applies position: relative if true (`is-relative`). The shortcut for\n   * `pos=\"relative\"`, kept working as it always has; `pos` wins when both are\n   * set.\n   */\n  relative?: boolean;\n  /** Applies height: 100% if true. */\n  fullHeight?: boolean;\n  /**\n   * Fixed width-to-height ratio (`is-aspect-ratio-<value>`), e.g. `16by9`.\n   * The height follows the width, so leave the height unset. Content taller\n   * than the ratio allows grows the element unless `overflow` or `overflowY`\n   * makes it scroll or clip.\n   *\n   * On `Image`, prefer its own `size` ratios, which also fit the picture to\n   * the box; this class sizes only the wrapper.\n   */\n  aspectRatio?: (typeof validAspectRatios)[number];\n}\n\n/**\n * A hook that generates miscellaneous Bulma helper classes (float, overflow,\n * overlay, interaction, cursor, radius, shadow, responsive, skeleton,\n * clearfix, position, full height, and aspect ratio).\n *\n * @function useOtherClasses\n * @param props - Miscellaneous Bulma helper props.\n * @returns A space-separated string of helper classes.\n * @example\n * const otherClasses = useOtherClasses({ float: 'left', skeleton: true });\n * // otherClasses: 'is-pulled-left is-skeleton'\n */\nexport const useOtherClasses = (props: BulmaOtherProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\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  } = props;\n\n  return useMemo(() => {\n    const { classes, addPrefixedClass, addClassNoViewport } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Other Helpers (no viewport support)\n    if (float) {\n      addClassNoViewport('is-pulled', float, validFloats);\n    }\n    // Bulma's overflow helpers are all `!important` at the same specificity\n    // and ordered by value rather than by axis, so a both-axes class beside an\n    // axis class would be settled by which value comes later in the\n    // stylesheet. Once an axis prop is set, both axes are written per axis\n    // instead: the axis prop wins its own, and `overflow` fills in the other,\n    // `clipped` being `overflow: hidden`.\n    const axisX = validAxisOverflows.find(v => v === overflowX);\n    const axisY = validAxisOverflows.find(v => v === overflowY);\n    if (axisX || axisY) {\n      const rest = overflow === 'clipped' ? 'hidden' : overflow;\n      addClassNoViewport('is-overflow-x', axisX ?? rest, validAxisOverflows);\n      addClassNoViewport('is-overflow-y', axisY ?? rest, validAxisOverflows);\n    } else if (overflow === 'clipped') {\n      // The older helper, which keeps its own class.\n      addPrefixedClass('is-clipped');\n    } else {\n      addClassNoViewport('is-overflow', overflow, validAxisOverflows);\n    }\n    if (overlay) {\n      addPrefixedClass('is-overlay');\n    }\n    if (interaction) {\n      addClassNoViewport('is', interaction, validInteractions);\n    }\n    if (cursor && validCursors.includes(cursor)) {\n      addPrefixedClass(cursorClasses[cursor]);\n    }\n    // `radiusless` is an `is-` helper that removes the radius; the sizes are\n    // Bulma's `has-radius-` helpers.\n    if (radius === 'radiusless') {\n      addPrefixedClass('is-radiusless');\n    } else {\n      addClassNoViewport('has-radius', radius, validRadii);\n    }\n    if (shadow) {\n      addClassNoViewport('is', shadow, validShadows);\n    }\n    if (responsive) {\n      addClassNoViewport('is', responsive, validResponsives);\n    }\n\n    // Bulma Skeleton Helper\n    if (skeleton) {\n      addPrefixedClass('is-skeleton');\n    }\n\n    // Clearfix Helper\n    if (clearfix) {\n      addPrefixedClass('is-clearfix');\n    }\n\n    // Position Helpers. A valid `pos` decides the position on its own, so a\n    // `relative` beside it cannot add a second, conflicting one.\n    if (pos && validPositions.includes(pos)) {\n      addPrefixedClass(`is-position-${pos}`);\n    } else if (relative) {\n      addPrefixedClass('is-relative');\n    }\n\n    // Full Height Helper\n    if (fullHeight) {\n      addPrefixedClass('is-full-height');\n    }\n\n    addClassNoViewport('is-aspect-ratio', aspectRatio, validAspectRatios);\n\n    return classNames(classes);\n  }, [\n    classPrefix,\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"],"names":[],"mappings":"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"}

package/dist/esm/helpers/useSpacingClasses.js

@@ -0,0 +1,82 @@
+/* @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 { validSizes, validGaps, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * A gap step as the class reads it. Numbers are accepted for the steps, so
+ * `2` and `'2'` both become `'2'`; anything else is checked against
+ * `validGaps` by the caller.
+ */
+const gapValue = (value) => typeof value === 'number' ? String(value) : value;
+/**
+ * A hook that generates Bulma margin, padding and gap helper classes.
+ *
+ * @function useSpacingClasses
+ * @param props - Spacing-related Bulma helper props.
+ * @returns A space-separated string of spacing helper classes.
+ * @example
+ * const spacingClasses = useSpacingClasses({ m: '2', px: '4' });
+ * // spacingClasses: 'm-2 px-4'
+ */
+const useSpacingClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, } = props;
+    return useMemo(() => {
+        const { classes, addClassNoViewport, addPrefixedClass } = createBulmaClassHelpers(classPrefix);
+        // Spacing (no viewport support in Bulma)
+        addClassNoViewport('m', m, validSizes);
+        addClassNoViewport('mt', mt, validSizes);
+        addClassNoViewport('mr', mr, validSizes);
+        addClassNoViewport('mb', mb, validSizes);
+        addClassNoViewport('ml', ml, validSizes);
+        addClassNoViewport('mx', mx, validSizes);
+        addClassNoViewport('my', my, validSizes);
+        addClassNoViewport('p', p, validSizes);
+        addClassNoViewport('pt', pt, validSizes);
+        addClassNoViewport('pr', pr, validSizes);
+        addClassNoViewport('pb', pb, validSizes);
+        addClassNoViewport('pl', pl, validSizes);
+        addClassNoViewport('px', px, validSizes);
+        addClassNoViewport('py', py, validSizes);
+        // Gap (no viewport support in Bulma). `gapless` and `is-gap-*` both set
+        // the `gap` shorthand at one class of specificity, so beside each other
+        // the stylesheet's rule order would decide. A valid `gap` settles it on
+        // its own. The axis props need no such care: Bulma declares every
+        // `is-column-gap-*` and `is-row-gap-*` after the shorthands, so each wins
+        // its own axis over `gap` and `gapless` alike.
+        const gapStep = gapValue(gap);
+        const hasGap = validGaps.some(v => v === gapStep);
+        addClassNoViewport('is-gap', gapStep, validGaps);
+        if (gapless && !hasGap) {
+            addPrefixedClass('is-gapless');
+        }
+        addClassNoViewport('is-column-gap', gapValue(columnGap), validGaps);
+        addClassNoViewport('is-row-gap', gapValue(rowGap), validGaps);
+        return classNames(classes);
+    }, [
+        classPrefix,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
+    ]);
+};
+
+export { useSpacingClasses };
+//# sourceMappingURL=useSpacingClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpacingClasses.js","sources":["../../../src/helpers/useSpacingClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validGaps,\n  validSizes,\n  type BulmaGapStep,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma margin, padding and gap helper classes.\n */\nexport interface BulmaSpacingProps {\n  /** Margin (e.g., '0', '1'). */\n  m?: (typeof validSizes)[number];\n  /** Margin top. */\n  mt?: (typeof validSizes)[number];\n  /** Margin right. */\n  mr?: (typeof validSizes)[number];\n  /** Margin bottom. */\n  mb?: (typeof validSizes)[number];\n  /** Margin left. */\n  ml?: (typeof validSizes)[number];\n  /** Margin horizontal (left and right). */\n  mx?: (typeof validSizes)[number];\n  /** Margin vertical (top and bottom). */\n  my?: (typeof validSizes)[number];\n  /** Padding (e.g., '0', '1'). */\n  p?: (typeof validSizes)[number];\n  /** Padding top. */\n  pt?: (typeof validSizes)[number];\n  /** Padding right. */\n  pr?: (typeof validSizes)[number];\n  /** Padding bottom. */\n  pb?: (typeof validSizes)[number];\n  /** Padding left. */\n  pl?: (typeof validSizes)[number];\n  /** Padding horizontal (left and right). */\n  px?: (typeof validSizes)[number];\n  /** Padding vertical (top and bottom). */\n  py?: (typeof validSizes)[number];\n  /**\n   * Space between the children of a flex or grid container (`is-gap-<value>`),\n   * on Bulma's gap scale: each whole step is 0.5rem, so `gap=\"2\"` is 1rem, with\n   * half steps such as `\"1.5\"` between them. Also takes the step as a number.\n   *\n   * It sets the CSS `gap`, which does nothing unless the element lays its\n   * children out as flex or grid, so pair it with `display=\"flex\"` on most\n   * components. The scale is not the margin scale: `m=\"2\"` is 0.5rem.\n   *\n   * `Grid` and `Columns` declare their own `gap`. `Grid`'s renders the same\n   * class; `Columns`' is the columns gutter (`is-<value>`) and takes whole\n   * steps only.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * Space between columns only (`is-column-gap-<value>`), on the same scale as\n   * `gap`. Beside `gap` or `gapless`, it wins on its own axis.\n   */\n  columnGap?: BulmaGapStep;\n  /**\n   * Space between rows only (`is-row-gap-<value>`), on the same scale as\n   * `gap`. Beside `gap` or `gapless`, it wins on its own axis.\n   */\n  rowGap?: BulmaGapStep;\n  /**\n   * Removes the gap between children (`is-gapless`), the shortcut for\n   * `gap=\"0\"`; a valid `gap` wins when both are set. `Columns` is the\n   * exception: its `gap` is its gutter, and there `gapless` is Bulma's gapless\n   * columns modifier, the same as `isGapless`.\n   */\n  gapless?: boolean;\n}\n\n/**\n * A gap step as the class reads it. Numbers are accepted for the steps, so\n * `2` and `'2'` both become `'2'`; anything else is checked against\n * `validGaps` by the caller.\n */\nconst gapValue = (value: BulmaGapStep | undefined): string | undefined =>\n  typeof value === 'number' ? String(value) : value;\n\n/**\n * A hook that generates Bulma margin, padding and gap helper classes.\n *\n * @function useSpacingClasses\n * @param props - Spacing-related Bulma helper props.\n * @returns A space-separated string of spacing helper classes.\n * @example\n * const spacingClasses = useSpacingClasses({ m: '2', px: '4' });\n * // spacingClasses: 'm-2 px-4'\n */\nexport const useSpacingClasses = (props: BulmaSpacingProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\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  } = props;\n\n  return useMemo(() => {\n    const { classes, addClassNoViewport, addPrefixedClass } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Spacing (no viewport support in Bulma)\n    addClassNoViewport('m', m, validSizes);\n    addClassNoViewport('mt', mt, validSizes);\n    addClassNoViewport('mr', mr, validSizes);\n    addClassNoViewport('mb', mb, validSizes);\n    addClassNoViewport('ml', ml, validSizes);\n    addClassNoViewport('mx', mx, validSizes);\n    addClassNoViewport('my', my, validSizes);\n    addClassNoViewport('p', p, validSizes);\n    addClassNoViewport('pt', pt, validSizes);\n    addClassNoViewport('pr', pr, validSizes);\n    addClassNoViewport('pb', pb, validSizes);\n    addClassNoViewport('pl', pl, validSizes);\n    addClassNoViewport('px', px, validSizes);\n    addClassNoViewport('py', py, validSizes);\n\n    // Gap (no viewport support in Bulma). `gapless` and `is-gap-*` both set\n    // the `gap` shorthand at one class of specificity, so beside each other\n    // the stylesheet's rule order would decide. A valid `gap` settles it on\n    // its own. The axis props need no such care: Bulma declares every\n    // `is-column-gap-*` and `is-row-gap-*` after the shorthands, so each wins\n    // its own axis over `gap` and `gapless` alike.\n    const gapStep = gapValue(gap);\n    const hasGap = validGaps.some(v => v === gapStep);\n    addClassNoViewport('is-gap', gapStep, validGaps);\n    if (gapless && !hasGap) {\n      addPrefixedClass('is-gapless');\n    }\n    addClassNoViewport('is-column-gap', gapValue(columnGap), validGaps);\n    addClassNoViewport('is-row-gap', gapValue(rowGap), validGaps);\n\n    return classNames(classes);\n  }, [\n    classPrefix,\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"],"names":[],"mappings":";;;;;;AA2EA;;;;AAIG;AACH,MAAM,QAAQ,GAAG,CAAC,KAA+B,KAC/C,OAAO,KAAK,KAAK,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK;AAEnD;;;;;;;;;AASG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAwB,KAAY;AACpE,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEnC,IAAA,MAAM,EACJ,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,GAAG,EACH,SAAS,EACT,MAAM,EACN,OAAO,GACR,GAAG,KAAK;IAET,OAAO,OAAO,CAAC,MAAK;AAClB,QAAA,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GACrD,uBAAuB,CAAC,WAAW,CAAC;;AAGtC,QAAA,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;AACtC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;AACtC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;AACxC,QAAA,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;;;;;;;AAQxC,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC;AAC7B,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC;AACjD,QAAA,kBAAkB,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAChD,QAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE;YACtB,gBAAgB,CAAC,YAAY,CAAC;QAChC;QACA,kBAAkB,CAAC,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;QACnE,kBAAkB,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;AAE7D,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE;QACD,WAAW;QACX,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,CAAC;QACD,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;QACH,SAAS;QACT,MAAM;QACN,OAAO;AACR,KAAA,CAAC;AACJ;;"}

package/dist/esm/helpers/useTypographyClasses.js

@@ -0,0 +1,93 @@
+/* @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 { validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * Viewports Bulma generates `is-size-*` classes for. Unlike text alignment,
+ * text size ships no `-only` bands (`tablet-only`/`desktop-only`/`widescreen-only`),
+ * so the `viewport` prop's suffix is limited to these on the `is-size` path.
+ */
+const sizeSupportedViewports = [
+    'mobile',
+    'tablet',
+    'touch',
+    'desktop',
+    'widescreen',
+    'fullhd',
+];
+/**
+ * A hook that generates Bulma typography helper classes, including
+ * viewport-specific text size and alignment variants.
+ *
+ * @function useTypographyClasses
+ * @param props - Typography-related Bulma helper props.
+ * @returns A space-separated string of typography helper classes.
+ * @example
+ * const typographyClasses = useTypographyClasses({
+ *   textSize: '3',
+ *   textWeight: 'bold',
+ * });
+ * // typographyClasses: 'is-size-3 has-text-weight-bold'
+ */
+const useTypographyClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { textSize, textAlign, textTransform, textWeight, fontFamily, viewport, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, } = props;
+    return useMemo(() => {
+        const { classes, addPrefixedClass, addClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix, viewport);
+        // Typography
+        // Bulma emits `is-size-*` for the six main/`touch` breakpoints but not the
+        // three `-only` bands, so restrict the viewport suffix to the ones it ships
+        // — otherwise `viewport="tablet-only"` would render a dead `is-size-N-tablet-only`.
+        addClass('is-size', textSize, validTextSizes, true, sizeSupportedViewports); // supports viewport (no `-only` bands)
+        addClass('has-text', textAlign, validAlignments, true); // supports viewport (all bands)
+        addClassNoViewport('is', textTransform, validTextTransforms); // no viewport support
+        addClassNoViewport('has-text-weight', textWeight, validTextWeights); // no viewport support
+        addClassNoViewport('is-family', fontFamily, validFontFamilies); // no viewport support
+        // Viewport-specific text sizes
+        const addViewportSpecificTextSizeClass = (value, viewportSuffix) => {
+            if (value && validTextSizes.includes(value)) {
+                addPrefixedClass(`is-size-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextSizeClass(textSizeMobile, '-mobile');
+        addViewportSpecificTextSizeClass(textSizeTablet, '-tablet');
+        addViewportSpecificTextSizeClass(textSizeDesktop, '-desktop');
+        addViewportSpecificTextSizeClass(textSizeWidescreen, '-widescreen');
+        addViewportSpecificTextSizeClass(textSizeFullhd, '-fullhd');
+        // Viewport-specific text alignment
+        const addViewportSpecificTextAlignClass = (value, viewportSuffix) => {
+            if (value && validAlignments.includes(value)) {
+                addPrefixedClass(`has-text-${value}${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificTextAlignClass(textAlignMobile, '-mobile');
+        addViewportSpecificTextAlignClass(textAlignTablet, '-tablet');
+        addViewportSpecificTextAlignClass(textAlignDesktop, '-desktop');
+        addViewportSpecificTextAlignClass(textAlignWidescreen, '-widescreen');
+        addViewportSpecificTextAlignClass(textAlignFullhd, '-fullhd');
+        return classNames(classes);
+    }, [
+        classPrefix,
+        textSize,
+        textAlign,
+        textTransform,
+        textWeight,
+        fontFamily,
+        viewport,
+        textSizeMobile,
+        textSizeTablet,
+        textSizeDesktop,
+        textSizeWidescreen,
+        textSizeFullhd,
+        textAlignMobile,
+        textAlignTablet,
+        textAlignDesktop,
+        textAlignWidescreen,
+        textAlignFullhd,
+    ]);
+};
+
+export { useTypographyClasses };
+//# sourceMappingURL=useTypographyClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTypographyClasses.js","sources":["../../../src/helpers/useTypographyClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validTextSizes,\n  validAlignments,\n  validTextTransforms,\n  validTextWeights,\n  validFontFamilies,\n  BulmaViewportProps,\n} from './bulmaClassHelpers';\n\n/**\n * Viewports Bulma generates `is-size-*` classes for. Unlike text alignment,\n * text size ships no `-only` bands (`tablet-only`/`desktop-only`/`widescreen-only`),\n * so the `viewport` prop's suffix is limited to these on the `is-size` path.\n */\nconst sizeSupportedViewports = [\n  'mobile',\n  'tablet',\n  'touch',\n  'desktop',\n  'widescreen',\n  'fullhd',\n] as const;\n\n/**\n * Props for applying Bulma typography helper classes.\n */\nexport interface BulmaTypographyProps extends BulmaViewportProps {\n  /** Text size (e.g., '1', '2'). */\n  textSize?: (typeof validTextSizes)[number];\n  /** Text alignment (e.g., 'centered', 'left'). */\n  textAlign?: (typeof validAlignments)[number];\n  /** Text transformation (e.g., 'uppercase', 'italic'). */\n  textTransform?: (typeof validTextTransforms)[number];\n  /** Text weight (e.g., 'light', 'bold'). */\n  textWeight?: (typeof validTextWeights)[number];\n  /** Font family (e.g., 'sans-serif', 'code'). */\n  fontFamily?: (typeof validFontFamilies)[number];\n  /** Text size for mobile viewport (up to 768px). */\n  textSizeMobile?: (typeof validTextSizes)[number];\n  /** Text size for tablet viewport (769px - 1023px). */\n  textSizeTablet?: (typeof validTextSizes)[number];\n  /** Text size for desktop viewport (1024px - 1215px). */\n  textSizeDesktop?: (typeof validTextSizes)[number];\n  /** Text size for widescreen viewport (1216px - 1407px). */\n  textSizeWidescreen?: (typeof validTextSizes)[number];\n  /** Text size for fullhd viewport (1408px and above). */\n  textSizeFullhd?: (typeof validTextSizes)[number];\n  /** Text alignment for mobile viewport (up to 768px). */\n  textAlignMobile?: (typeof validAlignments)[number];\n  /** Text alignment for tablet viewport (769px - 1023px). */\n  textAlignTablet?: (typeof validAlignments)[number];\n  /** Text alignment for desktop viewport (1024px - 1215px). */\n  textAlignDesktop?: (typeof validAlignments)[number];\n  /** Text alignment for widescreen viewport (1216px - 1407px). */\n  textAlignWidescreen?: (typeof validAlignments)[number];\n  /** Text alignment for fullhd viewport (1408px and above). */\n  textAlignFullhd?: (typeof validAlignments)[number];\n}\n\n/**\n * A hook that generates Bulma typography helper classes, including\n * viewport-specific text size and alignment variants.\n *\n * @function useTypographyClasses\n * @param props - Typography-related Bulma helper props.\n * @returns A space-separated string of typography helper classes.\n * @example\n * const typographyClasses = useTypographyClasses({\n *   textSize: '3',\n *   textWeight: 'bold',\n * });\n * // typographyClasses: 'is-size-3 has-text-weight-bold'\n */\nexport const useTypographyClasses = (props: BulmaTypographyProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\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  } = props;\n\n  return useMemo(() => {\n    const { classes, addPrefixedClass, addClass, addClassNoViewport } =\n      createBulmaClassHelpers(classPrefix, viewport);\n\n    // Typography\n    // Bulma emits `is-size-*` for the six main/`touch` breakpoints but not the\n    // three `-only` bands, so restrict the viewport suffix to the ones it ships\n    // — otherwise `viewport=\"tablet-only\"` would render a dead `is-size-N-tablet-only`.\n    addClass('is-size', textSize, validTextSizes, true, sizeSupportedViewports); // supports viewport (no `-only` bands)\n    addClass('has-text', textAlign, validAlignments, true); // supports viewport (all bands)\n    addClassNoViewport('is', textTransform, validTextTransforms); // no viewport support\n    addClassNoViewport('has-text-weight', textWeight, validTextWeights); // no viewport support\n    addClassNoViewport('is-family', fontFamily, validFontFamilies); // no viewport support\n\n    // Viewport-specific text sizes\n    const addViewportSpecificTextSizeClass = (\n      value: string | undefined,\n      viewportSuffix: string\n    ) => {\n      if (value && (validTextSizes as readonly string[]).includes(value)) {\n        addPrefixedClass(`is-size-${value}${viewportSuffix}`);\n      }\n    };\n\n    addViewportSpecificTextSizeClass(textSizeMobile, '-mobile');\n    addViewportSpecificTextSizeClass(textSizeTablet, '-tablet');\n    addViewportSpecificTextSizeClass(textSizeDesktop, '-desktop');\n    addViewportSpecificTextSizeClass(textSizeWidescreen, '-widescreen');\n    addViewportSpecificTextSizeClass(textSizeFullhd, '-fullhd');\n\n    // Viewport-specific text alignment\n    const addViewportSpecificTextAlignClass = (\n      value: string | undefined,\n      viewportSuffix: string\n    ) => {\n      if (value && (validAlignments as readonly string[]).includes(value)) {\n        addPrefixedClass(`has-text-${value}${viewportSuffix}`);\n      }\n    };\n\n    addViewportSpecificTextAlignClass(textAlignMobile, '-mobile');\n    addViewportSpecificTextAlignClass(textAlignTablet, '-tablet');\n    addViewportSpecificTextAlignClass(textAlignDesktop, '-desktop');\n    addViewportSpecificTextAlignClass(textAlignWidescreen, '-widescreen');\n    addViewportSpecificTextAlignClass(textAlignFullhd, '-fullhd');\n\n    return classNames(classes);\n  }, [\n    classPrefix,\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"],"names":[],"mappings":";;;;;;AAaA;;;;AAIG;AACH,MAAM,sBAAsB,GAAG;IAC7B,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,SAAS;IACT,YAAY;IACZ,QAAQ;CACA;AAsCV;;;;;;;;;;;;;AAaG;AACI,MAAM,oBAAoB,GAAG,CAAC,KAA2B,KAAY;AAC1E,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEnC,IAAA,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,GAChB,GAAG,KAAK;IAET,OAAO,OAAO,CAAC,MAAK;AAClB,QAAA,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAC/D,uBAAuB,CAAC,WAAW,EAAE,QAAQ,CAAC;;;;;AAMhD,QAAA,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC;QAC5E,QAAQ,CAAC,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QACvD,kBAAkB,CAAC,IAAI,EAAE,aAAa,EAAE,mBAAmB,CAAC,CAAC;QAC7D,kBAAkB,CAAC,iBAAiB,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;QACpE,kBAAkB,CAAC,WAAW,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;;AAG/D,QAAA,MAAM,gCAAgC,GAAG,CACvC,KAAyB,EACzB,cAAsB,KACpB;YACF,IAAI,KAAK,IAAK,cAAoC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AAClE,gBAAA,gBAAgB,CAAC,CAAA,QAAA,EAAW,KAAK,GAAG,cAAc,CAAA,CAAE,CAAC;YACvD;AACF,QAAA,CAAC;AAED,QAAA,gCAAgC,CAAC,cAAc,EAAE,SAAS,CAAC;AAC3D,QAAA,gCAAgC,CAAC,cAAc,EAAE,SAAS,CAAC;AAC3D,QAAA,gCAAgC,CAAC,eAAe,EAAE,UAAU,CAAC;AAC7D,QAAA,gCAAgC,CAAC,kBAAkB,EAAE,aAAa,CAAC;AACnE,QAAA,gCAAgC,CAAC,cAAc,EAAE,SAAS,CAAC;;AAG3D,QAAA,MAAM,iCAAiC,GAAG,CACxC,KAAyB,EACzB,cAAsB,KACpB;YACF,IAAI,KAAK,IAAK,eAAqC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACnE,gBAAA,gBAAgB,CAAC,CAAA,SAAA,EAAY,KAAK,GAAG,cAAc,CAAA,CAAE,CAAC;YACxD;AACF,QAAA,CAAC;AAED,QAAA,iCAAiC,CAAC,eAAe,EAAE,SAAS,CAAC;AAC7D,QAAA,iCAAiC,CAAC,eAAe,EAAE,SAAS,CAAC;AAC7D,QAAA,iCAAiC,CAAC,gBAAgB,EAAE,UAAU,CAAC;AAC/D,QAAA,iCAAiC,CAAC,mBAAmB,EAAE,aAAa,CAAC;AACrE,QAAA,iCAAiC,CAAC,eAAe,EAAE,SAAS,CAAC;AAE7D,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE;QACD,WAAW;QACX,QAAQ;QACR,SAAS;QACT,aAAa;QACb,UAAU;QACV,UAAU;QACV,QAAQ;QACR,cAAc;QACd,cAAc;QACd,eAAe;QACf,kBAAkB;QAClB,cAAc;QACd,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,mBAAmB;QACnB,eAAe;AAChB,KAAA,CAAC;AACJ;;"}

package/dist/esm/helpers/useVisibilityClasses.js

@@ -0,0 +1,134 @@
+/* @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 { validViewports, validDisplays, validVisibilities, createBulmaClassHelpers } from './bulmaClassHelpers.js';
+
+/**
+ * A hook that generates Bulma visibility and display helper classes. This hook
+ * owns all display class emission, including viewport-specific display props,
+ * the legacy display/viewport combination, and `display: 'none'` mapping to
+ * `is-hidden`.
+ *
+ * @function useVisibilityClasses
+ * @param props - Visibility- and display-related Bulma helper props.
+ * @returns A space-separated string of visibility and display helper classes.
+ * @example
+ * const visibilityClasses = useVisibilityClasses({
+ *   display: 'flex',
+ *   visibilityMobile: 'hidden',
+ * });
+ * // visibilityClasses: 'is-hidden-mobile is-flex'
+ */
+const useVisibilityClasses = (props) => {
+    const { classPrefix } = useConfig();
+    const { visibility, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, viewport, } = props;
+    return useMemo(() => {
+        const { classes, addPrefixedClass, addClass } = createBulmaClassHelpers(classPrefix, viewport);
+        // Viewport-specific visibility
+        const addViewportSpecificVisibilityClass = (value, viewportSuffix) => {
+            if (value === 'hidden') {
+                addPrefixedClass(`is-hidden${viewportSuffix}`);
+            }
+            else if (value === 'sr-only') {
+                addPrefixedClass(`is-sr-only${viewportSuffix}`);
+            }
+            else if (value === 'invisible') {
+                addPrefixedClass(`is-invisible${viewportSuffix}`);
+            }
+        };
+        addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');
+        addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');
+        addViewportSpecificVisibilityClass(visibilityTabletOnly, '-tablet-only');
+        addViewportSpecificVisibilityClass(visibilityTouch, '-touch');
+        addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');
+        addViewportSpecificVisibilityClass(visibilityDesktopOnly, '-desktop-only');
+        addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');
+        addViewportSpecificVisibilityClass(visibilityWidescreenOnly, '-widescreen-only');
+        addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');
+        // Visibility and Display
+        // Handle viewport-specific display properties first (they take precedence)
+        const addDisplayClass = (displayValue, viewportSuffix) => {
+            if (displayValue) {
+                if (displayValue === 'none') {
+                    addPrefixedClass(`is-hidden${viewportSuffix}`);
+                }
+                else if (validDisplays.includes(displayValue)) {
+                    addPrefixedClass(`is-${displayValue}${viewportSuffix}`);
+                }
+            }
+        };
+        // Apply viewport-specific display classes
+        addDisplayClass(displayMobile, '-mobile');
+        addDisplayClass(displayTablet, '-tablet');
+        addDisplayClass(displayTabletOnly, '-tablet-only');
+        addDisplayClass(displayTouch, '-touch');
+        addDisplayClass(displayDesktop, '-desktop');
+        addDisplayClass(displayDesktopOnly, '-desktop-only');
+        addDisplayClass(displayWidescreen, '-widescreen');
+        addDisplayClass(displayWidescreenOnly, '-widescreen-only');
+        addDisplayClass(displayFullhd, '-fullhd');
+        // Apply legacy display/viewport combination if no viewport-specific display props are set
+        const hasViewportSpecificDisplay = !!(displayMobile ||
+            displayTablet ||
+            displayTabletOnly ||
+            displayTouch ||
+            displayDesktop ||
+            displayDesktopOnly ||
+            displayWidescreen ||
+            displayWidescreenOnly ||
+            displayFullhd);
+        if (!hasViewportSpecificDisplay) {
+            // Legacy display handling
+            if (display === 'none') {
+                if (viewport && validViewports.includes(viewport)) {
+                    addPrefixedClass(`is-hidden-${viewport}`);
+                }
+                else {
+                    addPrefixedClass('is-hidden');
+                }
+            }
+            else {
+                addClass('is', display, [...validDisplays], true); // display supports viewport
+            }
+        }
+        // Visibility (always applied regardless of display settings)
+        if (visibility) {
+            if ((visibility === 'hidden' || visibility === 'invisible') &&
+                viewport &&
+                validViewports.includes(viewport)) {
+                addPrefixedClass(`is-${visibility}-${viewport}`);
+            }
+            else if (validVisibilities.includes(visibility)) {
+                addPrefixedClass(`is-${visibility}`);
+            }
+        }
+        return classNames(classes);
+    }, [
+        classPrefix,
+        visibility,
+        visibilityMobile,
+        visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
+        visibilityDesktop,
+        visibilityDesktopOnly,
+        visibilityWidescreen,
+        visibilityWidescreenOnly,
+        visibilityFullhd,
+        display,
+        displayMobile,
+        displayTablet,
+        displayTabletOnly,
+        displayTouch,
+        displayDesktop,
+        displayDesktopOnly,
+        displayWidescreen,
+        displayWidescreenOnly,
+        displayFullhd,
+        viewport,
+    ]);
+};
+
+export { useVisibilityClasses };
+//# sourceMappingURL=useVisibilityClasses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibilityClasses.js","sources":["../../../src/helpers/useVisibilityClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validDisplays,\n  validVisibilities,\n  validViewports,\n  BulmaViewportProps,\n  BulmaDisplayProps,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma visibility and display helper classes.\n */\nexport interface BulmaVisibilityProps\n  extends BulmaViewportProps, BulmaDisplayProps {\n  /** Visibility (e.g., 'hidden', 'sr-only'). */\n  visibility?: (typeof validVisibilities)[number];\n  /** Visibility for mobile viewport (up to 768px). */\n  visibilityMobile?: (typeof validVisibilities)[number];\n  /** Visibility for tablet viewport (769px - 1023px). */\n  visibilityTablet?: (typeof validVisibilities)[number];\n  /** Visibility for tablet-only viewport (769px - 1023px, excludes desktop+). */\n  visibilityTabletOnly?: (typeof validVisibilities)[number];\n  /** Visibility for touch viewport (up to 1023px; mobile + tablet). */\n  visibilityTouch?: (typeof validVisibilities)[number];\n  /** Visibility for desktop viewport (1024px - 1215px). */\n  visibilityDesktop?: (typeof validVisibilities)[number];\n  /** Visibility for desktop-only viewport (1024px - 1215px, excludes widescreen+). */\n  visibilityDesktopOnly?: (typeof validVisibilities)[number];\n  /** Visibility for widescreen viewport (1216px - 1407px). */\n  visibilityWidescreen?: (typeof validVisibilities)[number];\n  /** Visibility for widescreen-only viewport (1216px - 1407px, excludes fullhd). */\n  visibilityWidescreenOnly?: (typeof validVisibilities)[number];\n  /** Visibility for fullhd viewport (1408px and above). */\n  visibilityFullhd?: (typeof validVisibilities)[number];\n}\n\n/**\n * A hook that generates Bulma visibility and display helper classes. This hook\n * owns all display class emission, including viewport-specific display props,\n * the legacy display/viewport combination, and `display: 'none'` mapping to\n * `is-hidden`.\n *\n * @function useVisibilityClasses\n * @param props - Visibility- and display-related Bulma helper props.\n * @returns A space-separated string of visibility and display helper classes.\n * @example\n * const visibilityClasses = useVisibilityClasses({\n *   display: 'flex',\n *   visibilityMobile: 'hidden',\n * });\n * // visibilityClasses: 'is-hidden-mobile is-flex'\n */\nexport const useVisibilityClasses = (props: BulmaVisibilityProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\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  } = props;\n\n  return useMemo(() => {\n    const { classes, addPrefixedClass, addClass } = createBulmaClassHelpers(\n      classPrefix,\n      viewport\n    );\n\n    // Viewport-specific visibility\n    const addViewportSpecificVisibilityClass = (\n      value: string | undefined,\n      viewportSuffix: string\n    ) => {\n      if (value === 'hidden') {\n        addPrefixedClass(`is-hidden${viewportSuffix}`);\n      } else if (value === 'sr-only') {\n        addPrefixedClass(`is-sr-only${viewportSuffix}`);\n      } else if (value === 'invisible') {\n        addPrefixedClass(`is-invisible${viewportSuffix}`);\n      }\n    };\n\n    addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');\n    addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');\n    addViewportSpecificVisibilityClass(visibilityTabletOnly, '-tablet-only');\n    addViewportSpecificVisibilityClass(visibilityTouch, '-touch');\n    addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');\n    addViewportSpecificVisibilityClass(visibilityDesktopOnly, '-desktop-only');\n    addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');\n    addViewportSpecificVisibilityClass(\n      visibilityWidescreenOnly,\n      '-widescreen-only'\n    );\n    addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');\n\n    // Visibility and Display\n    // Handle viewport-specific display properties first (they take precedence)\n    const addDisplayClass = (\n      displayValue: string | undefined,\n      viewportSuffix: string\n    ) => {\n      if (displayValue) {\n        if (displayValue === 'none') {\n          addPrefixedClass(`is-hidden${viewportSuffix}`);\n        } else if (\n          (validDisplays as readonly string[]).includes(displayValue)\n        ) {\n          addPrefixedClass(`is-${displayValue}${viewportSuffix}`);\n        }\n      }\n    };\n\n    // Apply viewport-specific display classes\n    addDisplayClass(displayMobile, '-mobile');\n    addDisplayClass(displayTablet, '-tablet');\n    addDisplayClass(displayTabletOnly, '-tablet-only');\n    addDisplayClass(displayTouch, '-touch');\n    addDisplayClass(displayDesktop, '-desktop');\n    addDisplayClass(displayDesktopOnly, '-desktop-only');\n    addDisplayClass(displayWidescreen, '-widescreen');\n    addDisplayClass(displayWidescreenOnly, '-widescreen-only');\n    addDisplayClass(displayFullhd, '-fullhd');\n\n    // Apply legacy display/viewport combination if no viewport-specific display props are set\n    const hasViewportSpecificDisplay = !!(\n      displayMobile ||\n      displayTablet ||\n      displayTabletOnly ||\n      displayTouch ||\n      displayDesktop ||\n      displayDesktopOnly ||\n      displayWidescreen ||\n      displayWidescreenOnly ||\n      displayFullhd\n    );\n\n    if (!hasViewportSpecificDisplay) {\n      // Legacy display handling\n      if (display === 'none') {\n        if (viewport && validViewports.includes(viewport)) {\n          addPrefixedClass(`is-hidden-${viewport}`);\n        } else {\n          addPrefixedClass('is-hidden');\n        }\n      } else {\n        addClass('is', display, [...validDisplays], true); // display supports viewport\n      }\n    }\n\n    // Visibility (always applied regardless of display settings)\n    if (visibility) {\n      if (\n        (visibility === 'hidden' || visibility === 'invisible') &&\n        viewport &&\n        validViewports.includes(viewport)\n      ) {\n        addPrefixedClass(`is-${visibility}-${viewport}`);\n      } else if (validVisibilities.includes(visibility)) {\n        addPrefixedClass(`is-${visibility}`);\n      }\n    }\n\n    return classNames(classes);\n  }, [\n    classPrefix,\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"],"names":[],"mappings":"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"}

package/dist/esm/helpers/withSubComponents.js

@@ -0,0 +1,24 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+/**
+ * Attaches compound sub-components as statics on a base component and
+ * optionally sets the parent's displayName.
+ *
+ * Internal helper — it MUST mutate and return the same function object
+ * (`Object.assign`), never wrap the base in a new function: identity checks
+ * like `child.type === ModalCard` (Modal) and Field's displayName-based
+ * child detection rely on the attached component being the same object as
+ * the separately exported one.
+ *
+ * displayName is only ever set on the parent (and only when provided) —
+ * sub-components keep whatever displayName they declare themselves.
+ */
+function withSubComponents(base, subs, displayName) {
+    const compound = Object.assign(base, subs);
+    if (displayName !== undefined) {
+        compound.displayName = displayName;
+    }
+    return compound;
+}
+
+export { withSubComponents };
+//# sourceMappingURL=withSubComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withSubComponents.js","sources":["../../../src/helpers/withSubComponents.ts"],"sourcesContent":["/**\n * Attaches compound sub-components as statics on a base component and\n * optionally sets the parent's displayName.\n *\n * Internal helper — it MUST mutate and return the same function object\n * (`Object.assign`), never wrap the base in a new function: identity checks\n * like `child.type === ModalCard` (Modal) and Field's displayName-based\n * child detection rely on the attached component being the same object as\n * the separately exported one.\n *\n * displayName is only ever set on the parent (and only when provided) —\n * sub-components keep whatever displayName they declare themselves.\n */\nexport function withSubComponents<\n  Base extends { displayName?: string },\n  Subs extends Record<string, unknown>,\n>(base: Base, subs: Subs, displayName?: string): Base & Subs {\n  const compound = Object.assign(base, subs) as Base & Subs;\n  if (displayName !== undefined) {\n    compound.displayName = displayName;\n  }\n  return compound;\n}\n"],"names":[],"mappings":";AAAA;;;;;;;;;;;;AAYG;SACa,iBAAiB,CAG/B,IAAU,EAAE,IAAU,EAAE,WAAoB,EAAA;IAC5C,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAgB;AACzD,IAAA,IAAI,WAAW,KAAK,SAAS,EAAE;AAC7B,QAAA,QAAQ,CAAC,WAAW,GAAG,WAAW;IACpC;AACA,IAAA,OAAO,QAAQ;AACjB;;"}

package/dist/esm/layout/Container.js

@@ -0,0 +1,48 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { mergeBulmaStyles } from '../helpers/mergeBulmaStyles.js';
+
+/**
+ * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
+ *
+ * @function
+ * @param {ContainerProps} props - Props for the Container component.
+ * @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, style, ...props }) => {
+    const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Only allow isMax for supported breakpoints
+    const validMaxBreakpoints = [
+        'tablet',
+        'desktop',
+        'widescreen',
+    ];
+    let breakpointClass;
+    if (breakpoint) {
+        if (isMax && validMaxBreakpoints.includes(breakpoint)) {
+            breakpointClass = `is-max-${breakpoint}`;
+        }
+        else if (!isMax) {
+            breakpointClass = `is-${breakpoint}`;
+        }
+    }
+    const mainClass = usePrefixedClassNames('container');
+    const containerModifiers = usePrefixedClassNames('', {
+        'is-fluid': fluid,
+        'is-widescreen': widescreen,
+        'is-fullhd': fullhd,
+    });
+    const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');
+    const containerClasses = classNames(mainClass, containerModifiers, prefixedBreakpointClass, className, bulmaHelperClasses);
+    return (jsx("div", { className: containerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
+};
+
+export { Container };
+//# sourceMappingURL=Container.js.map

package/dist/esm/layout/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/layout/Container.tsx"],"sourcesContent":["import React from 'react';\nimport classNames, { usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\n\n/**\n * Bulma container breakpoints.\n */\nexport type ContainerBreakpoint = 'tablet' | 'desktop' | 'widescreen';\n\n/**\n * Props for the Container component.\n */\nexport interface ContainerProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.\n   * Not a filled variant (no `.container.is-<color>` CSS exists). Prefer\n   * `textColor`, which takes precedence when both are set; use `bgColor` for\n   * a colored surface.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /**\n   * Background color helper. `scheme-*` values render as a dark-mode-safe\n   * inline `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Makes the container full-width with a 32px gap on each side. */\n  fluid?: boolean;\n  /** Makes the container full-width until the `widescreen` breakpoint. */\n  widescreen?: boolean;\n  /** Makes the container full-width until the `fullhd` breakpoint. */\n  fullhd?: boolean;\n  /** Responsive breakpoint for container (`is-tablet`, `is-desktop`, `is-widescreen`). */\n  breakpoint?: ContainerBreakpoint;\n  /** Uses Bulma's `is-max-*` class for the specified breakpoint, limiting max width. */\n  isMax?: boolean;\n  /** Content inside the container. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.\n *\n * @function\n * @param {ContainerProps} props - Props for the Container component.\n * @returns {JSX.Element} The rendered container.\n * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}\n */\nexport const Container: React.FC<ContainerProps> = ({\n  className,\n  textColor,\n  color,\n  bgColor,\n  fluid,\n  widescreen,\n  fullhd,\n  breakpoint,\n  isMax,\n  children,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Only allow isMax for supported breakpoints\n  const validMaxBreakpoints: ContainerBreakpoint[] = [\n    'tablet',\n    'desktop',\n    'widescreen',\n  ];\n  let breakpointClass: string | undefined;\n  if (breakpoint) {\n    if (isMax && validMaxBreakpoints.includes(breakpoint)) {\n      breakpointClass = `is-max-${breakpoint}`;\n    } else if (!isMax) {\n      breakpointClass = `is-${breakpoint}`;\n    }\n  }\n\n  const mainClass = usePrefixedClassNames('container');\n  const containerModifiers = usePrefixedClassNames('', {\n    'is-fluid': fluid,\n    'is-widescreen': widescreen,\n    'is-fullhd': fullhd,\n  });\n  const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');\n\n  const containerClasses = classNames(\n    mainClass,\n    containerModifiers,\n    prefixedBreakpointClass,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <div\n      className={containerClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Container;\n"],"names":["_jsx"],"mappings":";;;;;;AA0DA;;;;;;;AAOG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACtE,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,MAAM,mBAAmB,GAA0B;QACjD,QAAQ;QACR,SAAS;QACT,YAAY;KACb;AACD,IAAA,IAAI,eAAmC;IACvC,IAAI,UAAU,EAAE;QACd,IAAI,KAAK,IAAI,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AACrD,YAAA,eAAe,GAAG,CAAA,OAAA,EAAU,UAAU,CAAA,CAAE;QAC1C;aAAO,IAAI,CAAC,KAAK,EAAE;AACjB,YAAA,eAAe,GAAG,CAAA,GAAA,EAAM,UAAU,CAAA,CAAE;QACtC;IACF;AAEA,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACpD,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACnD,QAAA,UAAU,EAAE,KAAK;AACjB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA,CAAC;IACF,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,eAAe,IAAI,EAAE,CAAC;AAE5E,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,aACE,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAA,GAC7C,IAAI,YAEP,QAAQ,EAAA,CACL;AAEV;;"}