@allxsmith/bestax-bulma 5.24.0 → 5.25.0

package/dist/types/columns/Columns.d.ts

@@ -10,7 +10,7 @@ export type BulmaGapSize = BulmaGapValue;
 /**
  * Props for the Columns component.
  */
-export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap' | 'rowGap'> {
     /** Additional CSS classes for the columns container. */
     className?: string;
     /** Text color. */
@@ -31,7 +31,15 @@ export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit
     isMobile?: boolean;
     /** Apply columns layout on desktop and up. */
     isDesktop?: boolean;
-    /** Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set. */
+    /**
+     * Gap size for all breakpoints, the columns gutter (`is-<value>`). Whole
+     * steps of the same scale as `Grid`'s `gap` prop; wins over `gapSize` if
+     * both are set.
+     *
+     * This is not the `gap` helper prop other components take, which renders
+     * `is-gap-<value>`: on `Columns` the gutter is padding inside each column,
+     * so the helper's CSS `gap` would add to it rather than replace it.
+     */
     gap?: BulmaGapValue;
     /** Gap size for mobile. Wins over `gapSizeMobile` if both are set. */
     gapMobile?: BulmaGapValue;

package/dist/types/grid/Grid.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaGapStep } from '../helpers/bulmaClassHelpers.js';
 /**
- * Allowed gap values for Bulma's 0-8 spacing scale, shared by `Grid` and
- * `Columns`. Accepts the value as a number or a numeric string.
+ * The whole steps of Bulma's 0-8 gap scale, as `Columns` takes them. Accepts
+ * the value as a number or a numeric string.
+ *
+ * `Grid`'s gap props and the shared `gap`, `columnGap` and `rowGap` helper
+ * props take the half steps as well, as `BulmaGapStep`.
  */
 export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 /**
@@ -23,12 +27,16 @@ export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Use a fixed grid layout (`.fixed-grid > .grid`). */
     isFixed?: boolean;
-    /** Main gap for grid (Bulma `is-gap-X`). */
-    gap?: BulmaGapValue;
-    /** Column gap for grid (`is-column-gap-X`). */
-    columnGap?: BulmaGapValue;
-    /** Row gap for grid (`is-row-gap-X`). */
-    rowGap?: BulmaGapValue;
+    /**
+     * Main gap for grid (Bulma `is-gap-X`), a whole or half step of Bulma's gap
+     * scale. The same values and class as the `gap` helper prop on every other
+     * component.
+     */
+    gap?: BulmaGapStep;
+    /** Column gap for grid (`is-column-gap-X`), on the same scale as `gap`. */
+    columnGap?: BulmaGapStep;
+    /** Row gap for grid (`is-row-gap-X`), on the same scale as `gap`. */
+    rowGap?: BulmaGapStep;
     /** Minimum column width for the grid (`is-col-min-X`). */
     minCol?: BulmaMinColValue;
     /** For fixed grids: explicit column count (`has-X-cols`), or `'auto'` for auto-count. */

package/dist/types/helpers/Theme.d.ts

@@ -53,7 +53,7 @@ type BulmaVars = Partial<Record<BulmaVarKey, string>>;
  * @property {string} [dangerS] - Danger color saturation.
  * @property {string} [dangerL] - Danger color lightness.
  */
-export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap'> {
     children: ReactNode;
     className?: string;
     /**

package/dist/types/helpers/bulmaClassHelpers.d.ts

@@ -22,6 +22,24 @@ export declare const validSchemeColors: readonly ["scheme-main", "scheme-main-bi
  * @example '0', '1', 'auto'
  */
 export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+export declare const validGaps: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8"];
+/**
+ * A gap step as `gap`, `columnGap` and `rowGap` take it: a value from
+ * `validGaps`, or the same step written as a number (`gap={2}`,
+ * `gap={1.5}`). `Grid` took its gaps as numbers before the gap helpers were
+ * shared, so every gap prop still does.
+ */
+export type BulmaGapStep = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8;
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'

package/dist/types/helpers/useBulmaClasses.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { BulmaDisplayProps, BulmaViewportProps } from './bulmaClassHelpers.js';
+import { BulmaDisplayProps, BulmaViewportProps, type BulmaGapStep } from './bulmaClassHelpers.js';
 import { BulmaColorProps, BulmaColorPropsWithScheme } from './useColorClasses.js';
 import { BulmaSpacingProps } from './useSpacingClasses.js';
 import { BulmaTypographyProps } from './useTypographyClasses.js';
@@ -50,8 +50,8 @@ export declare const useBulmaClasses: <T extends object>(props: BulmaClassesProp
     bulmaHelperStyles?: CSSProperties;
     rest: Omit<T, keyof BulmaClassesProps>;
 };
-export { validColors, validColorShades, validSchemeColors, validSizes, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
-export type { BulmaViewportProps, BulmaDisplayProps };
+export { validColors, validColorShades, validSchemeColors, validSizes, validGaps, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
+export type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };
 export * from './useColorClasses.js';
 export * from './useSpacingClasses.js';
 export * from './useTypographyClasses.js';

package/dist/types/helpers/useSpacingClasses.d.ts

@@ -1,6 +1,6 @@
-import { validSizes } from './bulmaClassHelpers.js';
+import { validSizes, type BulmaGapStep } from './bulmaClassHelpers.js';
 /**
- * Props for applying Bulma margin and padding helper classes.
+ * Props for applying Bulma margin, padding and gap helper classes.
  */
 export interface BulmaSpacingProps {
     /** Margin (e.g., '0', '1'). */
@@ -31,9 +31,40 @@ export interface BulmaSpacingProps {
     px?: (typeof validSizes)[number];
     /** Padding vertical (top and bottom). */
     py?: (typeof validSizes)[number];
+    /**
+     * Space between the children of a flex or grid container (`is-gap-<value>`),
+     * on Bulma's gap scale: each whole step is 0.5rem, so `gap="2"` is 1rem, with
+     * half steps such as `"1.5"` between them. Also takes the step as a number.
+     *
+     * It sets the CSS `gap`, which does nothing unless the element lays its
+     * children out as flex or grid, so pair it with `display="flex"` on most
+     * components. The scale is not the margin scale: `m="2"` is 0.5rem.
+     *
+     * `Grid` and `Columns` declare their own `gap`. `Grid`'s renders the same
+     * class; `Columns`' is the columns gutter (`is-<value>`) and takes whole
+     * steps only.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between columns only (`is-column-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    columnGap?: BulmaGapStep;
+    /**
+     * Space between rows only (`is-row-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Removes the gap between children (`is-gapless`), the shortcut for
+     * `gap="0"`; a valid `gap` wins when both are set. `Columns` is the
+     * exception: its `gap` is its gutter, and there `gapless` is Bulma's gapless
+     * columns modifier, the same as `isGapless`.
+     */
+    gapless?: boolean;
 }
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.

package/dist/types-cjs/columns/Columns.d.ts

@@ -10,7 +10,7 @@ export type BulmaGapSize = BulmaGapValue;
 /**
  * Props for the Columns component.
  */
-export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap' | 'rowGap'> {
     /** Additional CSS classes for the columns container. */
     className?: string;
     /** Text color. */
@@ -31,7 +31,15 @@ export interface ColumnsProps extends React.HTMLAttributes<HTMLDivElement>, Omit
     isMobile?: boolean;
     /** Apply columns layout on desktop and up. */
     isDesktop?: boolean;
-    /** Gap size for all breakpoints. Same scale as `Grid`'s `gap` prop; wins over `gapSize` if both are set. */
+    /**
+     * Gap size for all breakpoints, the columns gutter (`is-<value>`). Whole
+     * steps of the same scale as `Grid`'s `gap` prop; wins over `gapSize` if
+     * both are set.
+     *
+     * This is not the `gap` helper prop other components take, which renders
+     * `is-gap-<value>`: on `Columns` the gutter is padding inside each column,
+     * so the helper's CSS `gap` would add to it rather than replace it.
+     */
     gap?: BulmaGapValue;
     /** Gap size for mobile. Wins over `gapSizeMobile` if both are set. */
     gapMobile?: BulmaGapValue;

package/dist/types-cjs/grid/Grid.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import type { BulmaGapStep } from '../helpers/bulmaClassHelpers.js';
 /**
- * Allowed gap values for Bulma's 0-8 spacing scale, shared by `Grid` and
- * `Columns`. Accepts the value as a number or a numeric string.
+ * The whole steps of Bulma's 0-8 gap scale, as `Columns` takes them. Accepts
+ * the value as a number or a numeric string.
+ *
+ * `Grid`'s gap props and the shared `gap`, `columnGap` and `rowGap` helper
+ * props take the half steps as well, as `BulmaGapStep`.
  */
 export type BulmaGapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 /**
@@ -23,12 +27,16 @@ export type BulmaFixedGridColsProp = BulmaFixedGridCols | 'auto';
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
     /** Use a fixed grid layout (`.fixed-grid > .grid`). */
     isFixed?: boolean;
-    /** Main gap for grid (Bulma `is-gap-X`). */
-    gap?: BulmaGapValue;
-    /** Column gap for grid (`is-column-gap-X`). */
-    columnGap?: BulmaGapValue;
-    /** Row gap for grid (`is-row-gap-X`). */
-    rowGap?: BulmaGapValue;
+    /**
+     * Main gap for grid (Bulma `is-gap-X`), a whole or half step of Bulma's gap
+     * scale. The same values and class as the `gap` helper prop on every other
+     * component.
+     */
+    gap?: BulmaGapStep;
+    /** Column gap for grid (`is-column-gap-X`), on the same scale as `gap`. */
+    columnGap?: BulmaGapStep;
+    /** Row gap for grid (`is-row-gap-X`), on the same scale as `gap`. */
+    rowGap?: BulmaGapStep;
     /** Minimum column width for the grid (`is-col-min-X`). */
     minCol?: BulmaMinColValue;
     /** For fixed grids: explicit column count (`has-X-cols`), or `'auto'` for auto-count. */

package/dist/types-cjs/helpers/Theme.d.ts

@@ -53,7 +53,7 @@ type BulmaVars = Partial<Record<BulmaVarKey, string>>;
  * @property {string} [dangerS] - Danger color saturation.
  * @property {string} [dangerL] - Danger color lightness.
  */
-export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'columnGap'> {
     children: ReactNode;
     className?: string;
     /**

package/dist/types-cjs/helpers/bulmaClassHelpers.d.ts

@@ -22,6 +22,24 @@ export declare const validSchemeColors: readonly ["scheme-main", "scheme-main-bi
  * @example '0', '1', 'auto'
  */
 export declare const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+export declare const validGaps: readonly ["0", "0.5", "1", "1.5", "2", "2.5", "3", "3.5", "4", "4.5", "5", "5.5", "6", "6.5", "7", "7.5", "8"];
+/**
+ * A gap step as `gap`, `columnGap` and `rowGap` take it: a value from
+ * `validGaps`, or the same step written as a number (`gap={2}`,
+ * `gap={1.5}`). `Grid` took its gaps as numbers before the gap helpers were
+ * shared, so every gap prop still does.
+ */
+export type BulmaGapStep = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '4.5' | '5' | '5.5' | '6' | '6.5' | '7' | '7.5' | '8' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8;
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'

package/dist/types-cjs/helpers/useBulmaClasses.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { BulmaDisplayProps, BulmaViewportProps } from './bulmaClassHelpers.js';
+import { BulmaDisplayProps, BulmaViewportProps, type BulmaGapStep } from './bulmaClassHelpers.js';
 import { BulmaColorProps, BulmaColorPropsWithScheme } from './useColorClasses.js';
 import { BulmaSpacingProps } from './useSpacingClasses.js';
 import { BulmaTypographyProps } from './useTypographyClasses.js';
@@ -50,8 +50,8 @@ export declare const useBulmaClasses: <T extends object>(props: BulmaClassesProp
     bulmaHelperStyles?: CSSProperties;
     rest: Omit<T, keyof BulmaClassesProps>;
 };
-export { validColors, validColorShades, validSchemeColors, validSizes, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
-export type { BulmaViewportProps, BulmaDisplayProps };
+export { validColors, validColorShades, validSchemeColors, validSizes, validGaps, validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, validDisplays, validVisibilities, validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, validViewports, validFloats, validOverflows, validAxisOverflows, validInteractions, validCursors, validRadii, validShadows, validResponsives, validPositions, validAspectRatios, } from './bulmaClassHelpers.js';
+export type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };
 export * from './useColorClasses.js';
 export * from './useSpacingClasses.js';
 export * from './useTypographyClasses.js';

package/dist/types-cjs/helpers/useSpacingClasses.d.ts

@@ -1,6 +1,6 @@
-import { validSizes } from './bulmaClassHelpers.js';
+import { validSizes, type BulmaGapStep } from './bulmaClassHelpers.js';
 /**
- * Props for applying Bulma margin and padding helper classes.
+ * Props for applying Bulma margin, padding and gap helper classes.
  */
 export interface BulmaSpacingProps {
     /** Margin (e.g., '0', '1'). */
@@ -31,9 +31,40 @@ export interface BulmaSpacingProps {
     px?: (typeof validSizes)[number];
     /** Padding vertical (top and bottom). */
     py?: (typeof validSizes)[number];
+    /**
+     * Space between the children of a flex or grid container (`is-gap-<value>`),
+     * on Bulma's gap scale: each whole step is 0.5rem, so `gap="2"` is 1rem, with
+     * half steps such as `"1.5"` between them. Also takes the step as a number.
+     *
+     * It sets the CSS `gap`, which does nothing unless the element lays its
+     * children out as flex or grid, so pair it with `display="flex"` on most
+     * components. The scale is not the margin scale: `m="2"` is 0.5rem.
+     *
+     * `Grid` and `Columns` declare their own `gap`. `Grid`'s renders the same
+     * class; `Columns`' is the columns gutter (`is-<value>`) and takes whole
+     * steps only.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between columns only (`is-column-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    columnGap?: BulmaGapStep;
+    /**
+     * Space between rows only (`is-row-gap-<value>`), on the same scale as
+     * `gap`. Beside `gap` or `gapless`, it wins on its own axis.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Removes the gap between children (`is-gapless`), the shortcut for
+     * `gap="0"`; a valid `gap` wins when both are set. `Columns` is the
+     * exception: its `gap` is its gutter, and there `gapless` is Bulma's gapless
+     * columns modifier, the same as `isGapless`.
+     */
+    gapless?: boolean;
 }
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.24.0",
+  "version": "5.25.0",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",