@allxsmith/bestax-bulma 5.58.0 → 5.59.0

package/dist/index.esm.js

@@ -49,6 +49,7 @@ export { Divider } from './esm/elements/Divider.js';
 export { Emphasis } from './esm/elements/Emphasis.js';
 export { Figure } from './esm/elements/Figure.js';
 export { Icon } from './esm/elements/Icon.js';
+export { IconButton } from './esm/elements/IconButton.js';
 export { IconText } from './esm/elements/IconText.js';
 export { Image } from './esm/elements/Image.js';
 export { Kbd, KbdGroup } from './esm/elements/Kbd.js';
@@ -127,13 +128,17 @@ export { Portal } from './esm/helpers/portal.js';
 export { LocaleProvider, useLocale } from './esm/helpers/LocaleProvider.js';
 export { useNumberFormat } from './esm/helpers/localeFormat.js';
 export { useFocusTrap } from './esm/helpers/useFocusTrap.js';
+export { Center } from './esm/layout/Center.js';
 export { Container } from './esm/layout/Container.js';
+export { Flex } from './esm/layout/Flex.js';
 export { Footer } from './esm/layout/Footer.js';
+export { Group } from './esm/layout/Group.js';
 export { Hero, HeroBody, HeroFoot, HeroHead } from './esm/layout/Hero.js';
 export { Level, LevelItem, LevelLeft, LevelRight } from './esm/layout/Level.js';
 export { Media, MediaContent, MediaLeft, MediaRight } from './esm/layout/Media.js';
 export { Section } from './esm/layout/Section.js';
 export { Splitter, SplitterPane } from './esm/layout/Splitter.js';
+export { Stack } from './esm/layout/Stack.js';
 export { useColorClasses, useColorStyles } from './esm/helpers/useColorClasses.js';
 export { useDataTable } from './esm/components/useDataTable.js';
 export { useFlexboxClasses } from './esm/helpers/useFlexboxClasses.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/elements/Buttons.d.ts

@@ -37,5 +37,6 @@ export declare const Buttons: React.FC<ButtonsProps> & {
     Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button", never>;
     LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
     ToggleButton: React.ForwardRefExoticComponent<import("./ToggleButton.js").ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    IconButton: import("../index.js").PolymorphicComponent<import("./IconButton.js").IconButtonOwnProps & import("./IconButton.js").IconButtonName, "button", never>;
 };
 export {};

package/dist/types/elements/IconButton.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+import { type ButtonOwnProps } from './Button.js';
+import type { PolymorphicComponent } from '../helpers/polymorphic.js';
+/**
+ * The IconButton component's own props: everything `Button` takes, plus the
+ * icon.
+ */
+export interface IconButtonOwnProps extends ButtonOwnProps {
+    /**
+     * The glyph. A string is an `Icon` name, drawn from the icon library
+     * `ConfigProvider` sets. An `<Icon>` renders as given, so it can carry its
+     * own `variant` or `library`. Any other node, such as an SVG or a component
+     * from an icon package, goes inside an `Icon`, which gives it the `.icon`
+     * wrapper Bulma keeps square. It's decorative: the button's name says what
+     * it does. Give the glyph here or as `children`, not both: with both, it
+     * draws `icon` and warns in development. With neither, such as an empty
+     * string from `cond ? 'trash' : ''`, the button is an empty square, and that
+     * warns in development too.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The glyph as children, the way Mantine, MUI and Chakra take it: an
+     * `<Icon>` renders as given, and any other node, such as an SVG, goes
+     * inside an `Icon`, as with `icon`. Left out when `icon` is given, which
+     * warns in development. Text warns too, since `aria-label` replaces it as
+     * the name: a button with text is a `Button`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Makes the button a circle the size of its square. The circle comes from
+     * bestax's CSS, in `bestax.css` and its variants, or in `extras.css` next
+     * to your own Bulma. Without it, Bulma's `is-rounded` draws a pill a little
+     * wider than it is tall.
+     */
+    isRounded?: boolean;
+}
+/** Names an IconButton by the text of another element. */
+export interface IconButtonLabelledBy {
+    /** The id of the element whose text names the button, in place of `aria-label`. */
+    'aria-labelledby': string;
+    /**
+     * @internal Not with `aria-labelledby`, which already names the button.
+     * Declared so the two can't be passed together.
+     */
+    'aria-label'?: undefined;
+}
+/** Names an IconButton with `aria-label`, the usual way. */
+export interface IconButtonLabel {
+    /**
+     * The button's name: what a screen reader announces and what a voice
+     * control user says to press it. Required, or `aria-labelledby` in its
+     * place, since an icon has no text to name it by. Name the action
+     * ("Delete"), not the picture ("Trash"). An empty or blank one warns in
+     * development.
+     */
+    'aria-label': string;
+    /**
+     * @internal Not with `aria-label`. Declared so the two can't be passed
+     * together.
+     */
+    'aria-labelledby'?: undefined;
+}
+/**
+ * How an IconButton gets its name: `aria-label`, or `aria-labelledby` in its
+ * place. `IconButtonLabel` comes last because TypeScript names the union's
+ * last member when neither is given: under "No overload matches this call",
+ * each overload's error ends "Property ''aria-label'' is missing … but
+ * required in type 'IconButtonLabel'".
+ */
+export type IconButtonName = IconButtonLabelledBy | IconButtonLabel;
+/**
+ * Props for the IconButton component. The DOM attributes and the `ref` follow
+ * `as`, exactly as they do on `Button`.
+ *
+ * @extraProp {string} [type='button'] - On a `<button>`, `'button'`, `'submit'` or `'reset'`, and `'button'` unless you pass one of the other two, so it never submits a form by accident. With another `as`, whatever that element or component takes, passed through as given, such as an `<a>`'s MIME type.
+ * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`.
+ */
+export type IconButtonProps<T extends React.ElementType = 'button'> = IconButtonOwnProps & IconButtonName & Omit<React.ComponentPropsWithoutRef<T>, keyof IconButtonOwnProps | 'aria-label' | 'aria-labelledby' | 'as'> & {
+    /**
+     * Render as a `<button>`, an `<a>`, or a custom component such as a
+     * router `Link`, as on `Button`.
+     * @defaultValue 'button'
+     */
+    as?: T;
+};
+/**
+ * The `IconButton` component renders a button that shows only an icon, and requires a name for it.
+ *
+ * It renders through `Button`, so it takes everything `Button` takes, and
+ * adds the icon and a name the types require: `aria-label`, or
+ * `aria-labelledby` in its place. Bulma keeps a button whose only child is an
+ * `.icon` square at every size, and `isRounded` makes it a circle. It has no
+ * tooltip of its own: wrap it in `Tooltip` for a description.
+ *
+ * @function
+ * @param {IconButtonProps} props - Props for the IconButton component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
+ *
+ * @example
+ * <IconButton icon="trash" aria-label="Delete" color="danger" />
+ *
+ * @example
+ * <IconButton aria-label="Settings">
+ *   <Icon name="cog" />
+ * </IconButton>
+ */
+export declare const IconButton: PolymorphicComponent<IconButtonOwnProps & IconButtonName, "button">;
+export default IconButton;

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

@@ -0,0 +1,2 @@
+import type { ContainerBreakpoint } from '../layout/Container.js';
+export declare const CONTAINER_BREAKPOINTS: readonly ContainerBreakpoint[];

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

@@ -170,3 +170,22 @@ export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends
     (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;
     displayName?: string;
 }
+/**
+ * `ConstrainedPolymorphicComponentWithoutRef` with a forwarded ref: the props
+ * and the ref both follow `as`, and `as` is one of `Allowed`.
+ *
+ * For a component whose `as` is a closed set of tags that don't share one
+ * prop surface. `Stack` renders a `<div>`, a `<form>`, an `<ol>` or a
+ * `<fieldset>` among others, which take different attributes (`action`,
+ * `start`, `disabled`) and give the ref a different element, so pinning them
+ * all to `HTMLAttributes<HTMLElement>` would refuse attributes that work.
+ */
+export interface ConstrainedPolymorphicComponent<Own, Allowed extends React.ElementType, Default extends Allowed, Forwarded extends keyof Own = never> {
+    <T extends Allowed = Default>(props: PolymorphicProps<T, Own, Forwarded> & {
+        ref?: PolymorphicRef<T>;
+    }): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own, Forwarded> & {
+        ref?: PolymorphicRef<Default>;
+    }): React.ReactElement | null;
+    displayName?: string;
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { type BulmaClassesProps, type validColors, type validFlexDirections } from './useBulmaClasses.js';
+/**
+ * The elements Stack, Group, Center and Flex can render as: Container's
+ * landmarks and sections, a list, a form or a fieldset.
+ */
+export type LayoutElement = 'div' | 'main' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'form' | 'fieldset';
+/**
+ * What Stack, Group, Center and Flex take in common. The helper props, the
+ * other attributes and the `ref` land on the root.
+ *
+ * @flexContainer The root is a flex container by its own stylesheet, so the
+ * flex container helper props apply with no `display` prop. The API docs
+ * extractor reads this tag off a component's props type or its bases, and
+ * the ESLint plugin's `no-inert-flex-props` takes its flex containers from it.
+ */
+export interface LayoutOwnProps extends Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'flexDirection'> {
+    /**
+     * Not accepted. `color` here would be the deprecated presentational HTML
+     * attribute. Use `textColor`.
+     * @internal
+     */
+    color?: never;
+    /**
+     * Not accepted under this name. Use `bgColor`.
+     * @internal
+     */
+    backgroundColor?: never;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * What it lays out. The top and bottom margins Bulma gives them are
+     * zeroed, so `gap` is the only space between them, and a spacing helper
+     * such as `mt="2"` still adds to it. A `Columns` child keeps its own top and side
+     * margins, and takes at the bottom the one Bulma gives the last Columns in
+     * a container, the column gap pulled back in (none when gapless), so its
+     * columns line up. A `Pagination` child keeps its negative margins too,
+     * so its links line up.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/** The props `StackLayout` reads, from whichever of the four renders it. */
+export interface StackLayoutProps extends LayoutOwnProps, Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    /** The element to render. */
+    as?: LayoutElement;
+    /** Flex's direction. The other three pass `undefined`, so they never reorder. */
+    flexDirection?: (typeof validFlexDirections)[number];
+    /** The modifier classes beside `stack`, as `usePrefixedClassNames` takes them. */
+    modifiers?: Record<string, boolean | undefined>;
+}
+/**
+ * The `.stack` element behind Stack, Group, Center and Flex.
+ *
+ * With `as="ul"` or `as="ol"` it renders `role="list"`, which Safari needs:
+ * WebKit stops exposing a list as one once its markers are hidden, and
+ * Bulma's reset hides a `<ul>`'s. Menu.List restates it for the same reason.
+ */
+export declare const StackLayout: React.ForwardRefExoticComponent<StackLayoutProps & React.RefAttributes<HTMLElement>>;

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

@@ -4,7 +4,7 @@ import { BulmaColorProps, BulmaColorPropsWithScheme } from './useColorClasses.js
 import { BulmaSpacingProps } from './useSpacingClasses.js';
 import { BulmaTypographyProps } from './useTypographyClasses.js';
 import { BulmaVisibilityProps } from './useVisibilityClasses.js';
-import { BulmaFlexboxProps } from './useFlexboxClasses.js';
+import { BulmaFlexboxProps, type UseFlexboxClassesOptions } from './useFlexboxClasses.js';
 import { BulmaOtherProps } from './useOtherClasses.js';
 /**
  * Props for applying Bulma helper classes to components.
@@ -31,8 +31,14 @@ export type BulmaClassesPropsWithScheme = Omit<BulmaClassesProps, keyof BulmaCol
  * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
  * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
  *
+ * The flex container props (`flexDirection`, `flexWrap`, `justifyContent`,
+ * `alignContent`, `alignItems`) emit a class only on a flex container: when a
+ * `display` prop is `flex` or `inline-flex`, or when `options.flexContainer`
+ * says the element's own stylesheet makes it one.
+ *
  * @function useBulmaClasses
  * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @param options - Passed to `useFlexboxClasses`: whether the element is a flex container without a display prop.
  * @returns An object containing the Bulma helper classes, optional helper
  * styles, and unhandled props.
  * @example
@@ -45,7 +51,7 @@ export type BulmaClassesPropsWithScheme = Omit<BulmaClassesProps, keyof BulmaCol
  * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
  * // rest: { className: 'custom-class' }
  */
-export declare const useBulmaClasses: <T extends object>(props: BulmaClassesPropsWithScheme & T) => {
+export declare const useBulmaClasses: <T extends object>(props: BulmaClassesPropsWithScheme & T, options?: UseFlexboxClassesOptions) => {
     bulmaHelperClasses: string;
     bulmaHelperStyles?: CSSProperties;
     rest: Omit<T, keyof BulmaClassesProps>;

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

@@ -22,11 +22,25 @@ export interface BulmaFlexboxProps extends BulmaDisplayProps {
     /** Flex shrink value (e.g., '0', '1', '2', '3', '4', '5'). */
     flexShrink?: (typeof validFlexGrowShrink)[number];
 }
+/**
+ * Options for `useFlexboxClasses`, which `useBulmaClasses` passes through.
+ */
+export interface UseFlexboxClassesOptions {
+    /**
+     * Whether the element is a flex container by its own CSS, as `Stack` and
+     * `Group` are, so the container helpers apply with no `display` prop. It
+     * adds no display class: the element's own stylesheet has to make it a flex
+     * container.
+     * @defaultValue false
+     */
+    flexContainer?: boolean;
+}
 /**
  * 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.
+ * one of the display props indicates a flex display, or when `options` says
+ * the element is a flex container by its own CSS; 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
@@ -34,6 +48,7 @@ export interface BulmaFlexboxProps extends BulmaDisplayProps {
  *
  * @function useFlexboxClasses
  * @param props - Flexbox-related Bulma helper props.
+ * @param options - Whether the element is a flex container without a display prop.
  * @returns A space-separated string of flexbox helper classes.
  * @example
  * const flexboxClasses = useFlexboxClasses({
@@ -42,5 +57,13 @@ export interface BulmaFlexboxProps extends BulmaDisplayProps {
  * });
  * // flexboxClasses: 'is-justify-content-center'
  * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)
+ *
+ * @example
+ * // An element whose own stylesheet makes it a flex container
+ * const flexboxClasses = useFlexboxClasses(
+ *   { alignItems: 'center' },
+ *   { flexContainer: true }
+ * );
+ * // flexboxClasses: 'is-align-items-center'
  */
-export declare const useFlexboxClasses: (props: BulmaFlexboxProps) => string;
+export declare const useFlexboxClasses: (props: BulmaFlexboxProps, options?: UseFlexboxClassesOptions) => string;

package/dist/types/index.d.ts

@@ -48,6 +48,7 @@ export * from './elements/Divider.js';
 export * from './elements/Emphasis.js';
 export * from './elements/Figure.js';
 export * from './elements/Icon.js';
+export * from './elements/IconButton.js';
 export * from './elements/IconText.js';
 export * from './elements/Image.js';
 export * from './elements/Kbd.js';
@@ -133,7 +134,7 @@ export type { FormFieldProps } from './form/fieldProps.js';
 export * from './grid/Cell.js';
 export * from './grid/Grid.js';
 export * from './helpers/classNames.js';
-export type { ConstrainedPolymorphicComponentWithoutRef, PolymorphicComponent, PolymorphicComponentWithoutRef, PolymorphicProps, PolymorphicRef, } from './helpers/polymorphic.js';
+export type { ConstrainedPolymorphicComponent, ConstrainedPolymorphicComponentWithoutRef, PolymorphicComponent, PolymorphicComponentWithoutRef, PolymorphicProps, PolymorphicRef, } from './helpers/polymorphic.js';
 export * from './helpers/mergeBulmaStyles.js';
 export * from './helpers/useBulmaClasses.js';
 export * from './helpers/Theme.js';
@@ -149,10 +150,15 @@ export { useNumberFormat } from './helpers/localeFormat.js';
 export type { NumberFormatFunction } from './helpers/localeFormat.js';
 export { useFocusTrap } from './helpers/useFocusTrap.js';
 export type { UseFocusTrapOptions } from './helpers/useFocusTrap.js';
+export * from './layout/Center.js';
 export * from './layout/Container.js';
+export * from './layout/Flex.js';
 export * from './layout/Footer.js';
+export * from './layout/Group.js';
 export * from './layout/Hero.js';
 export * from './layout/Level.js';
 export * from './layout/Media.js';
 export * from './layout/Section.js';
 export * from './layout/Splitter.js';
+export * from './layout/Stack.js';
+export type { LayoutElement } from './helpers/stackLayout.js';

package/dist/types/layout/Center.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validDisplays } from '../helpers/useBulmaClasses.js';
+/**
+ * The Center component's own props, beside the attributes of the element
+ * `as` renders.
+ */
+export interface CenterOwnProps extends LayoutOwnProps {
+    /**
+     * Space between children, when there are several. None by default. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * `'inline-flex'` sizes it to its content, to center something inside a line
+     * of text. Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     */
+    display?: (typeof validDisplays)[number] | 'none';
+}
+/**
+ * Props for the Center component. The attributes and the `ref` follow `as`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type CenterProps<T extends LayoutElement = LayoutElement> = CenterOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof CenterOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * The `Center` component centers its content on both axes.
+ *
+ * Use it for a loader, an icon or an empty state in the middle of a box, a
+ * card or a section. Give it a height, or put it in something that has one,
+ * to center down the middle as well as across. Several children sit side by
+ * side in the middle, with no gap unless you set one.
+ *
+ * @function
+ * @param {CenterProps} props - Props for the Center component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered center.
+ *
+ * @example
+ * <Center p="6">
+ *   <Loader />
+ * </Center>
+ */
+export declare const Center: ConstrainedPolymorphicComponent<CenterOwnProps, LayoutElement, "div">;
+export default Center;

package/dist/types/layout/Flex.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignContents, validAlignItems, validFlexDirections, validFlexWraps, validJustifyContents } from '../helpers/useBulmaClasses.js';
+/**
+ * The Flex component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface FlexOwnProps extends LayoutOwnProps {
+    /**
+     * The main axis. `row-reverse` and `column-reverse` change only what's seen:
+     * reading and Tab order still follow the children's order (WCAG 1.3.2 and
+     * 2.4.3). Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     * @defaultValue 'row'
+     */
+    flexDirection?: (typeof validFlexDirections)[number];
+    /**
+     * Whether children move to a new line when they don't fit. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'nowrap'
+     */
+    flexWrap?: (typeof validFlexWraps)[number];
+    /**
+     * How each child sits across the main axis. Needs Bulma's helper classes:
+     * under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'stretch'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit along the main axis. Needs Bulma's helper classes:
+     * under `bestax-no-helpers.css` the default stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+    /**
+     * How wrapped lines share the space across the main axis. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    alignContent?: (typeof validAlignContents)[number];
+    /**
+     * Space between children, a step of Bulma's gap scale. None by default. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between wrapped lines, when it differs from `gap`. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Space between children along a row, when it differs from `gap`. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    columnGap?: BulmaGapStep;
+}
+/**
+ * Props for the Flex component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type FlexProps<T extends LayoutElement = LayoutElement> = FlexOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof FlexOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * The `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.
+ *
+ * It's a row that doesn't wrap, with its children stretched across it and no
+ * gap, until you set otherwise. Use it for a layout of your own, such as a
+ * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the
+ * children. Its children's own block margins are zeroed, so the gap is the
+ * only space. For a column of blocks or a row of controls with Bulma's
+ * spacing already in place, `Stack` and `Group` start closer.
+ *
+ * @function
+ * @param {FlexProps} props - Props for the Flex component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered flex container.
+ *
+ * @example
+ * <Flex gap="4" alignItems="flex-start">
+ *   <Box flexShrink="0">…</Box>
+ *   <Box flexGrow="1">…</Box>
+ * </Flex>
+ */
+export declare const Flex: ConstrainedPolymorphicComponent<FlexOwnProps, LayoutElement, "div">;
+export default Flex;

package/dist/types/layout/Group.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignItems, validFlexWraps, validJustifyContents } from '../helpers/useBulmaClasses.js';
+import type { ContainerBreakpoint } from './Container.js';
+/**
+ * The Group component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface GroupOwnProps extends LayoutOwnProps {
+    /**
+     * Space between children, a step of Bulma's gap scale. Unset, it's
+     * `--bulma-stack-horizontal-gap`, half of Bulma's block spacing. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * How each child sits across the row. While `breakpoint` stacks them, it's
+     * where each sits across the column. Needs Bulma's helper classes: under
+     * `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'center'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit along the row: `'space-between'` pushes the ends
+     * apart. Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+    /**
+     * Whether children move to a new row when they don't fit. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'wrap'
+     */
+    flexWrap?: (typeof validFlexWraps)[number];
+    /**
+     * The children share the row equally, and fill the column while
+     * `breakpoint` stacks them (Bulma's `is-fullwidth`).
+     */
+    isFullwidth?: boolean;
+    /**
+     * Stacks the children below this Bulma breakpoint and sets them in a row
+     * from it up, the breakpoints Container's `breakpoint` takes. Unset, a row
+     * at every width. It's the job Columns and Level do with booleans:
+     * `'tablet'` is where they turn into a row by default, `'desktop'` is
+     * Columns' `isDesktop`, and leaving it unset is their `isMobile`.
+     */
+    breakpoint?: ContainerBreakpoint;
+}
+/**
+ * Props for the Group component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type GroupProps<T extends LayoutElement = LayoutElement> = GroupOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof GroupOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * The `Group` component lays its children out in a row that wraps, centered on each other, with half of Bulma's block spacing between them.
+ *
+ * Use it for a row of buttons, tags or avatars beside some text, or a toolbar
+ * with `justifyContent="space-between"` pushing its ends apart. The children's
+ * own block margins are zeroed, so the gap is the only space. With
+ * `breakpoint`, it's a column on narrow screens and a row from that
+ * breakpoint up. For controls joined into one, with no gap and shared
+ * borders, use `hasAddons` on Field or Buttons instead.
+ *
+ * @function
+ * @param {GroupProps} props - Props for the Group component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered group.
+ *
+ * @example
+ * <Group justifyContent="space-between">
+ *   <Title as="h2" size="4">Invoices</Title>
+ *   <Button color="primary">New invoice</Button>
+ * </Group>
+ */
+export declare const Group: ConstrainedPolymorphicComponent<GroupOwnProps, LayoutElement, "div">;
+export default Group;

package/dist/types/layout/Stack.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignItems, validJustifyContents } from '../helpers/useBulmaClasses.js';
+/**
+ * The Stack component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface StackOwnProps extends LayoutOwnProps {
+    /**
+     * Space between children, a step of Bulma's gap scale (`'2'` is 1rem). Unset,
+     * it's `--bulma-stack-gap`, Bulma's block spacing. Needs Bulma's helper
+     * classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * How each child sits across the column. `'stretch'` makes each as wide as
+     * the Stack. Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     * @defaultValue 'stretch'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit down the column, when it's taller than they are.
+     * Needs Bulma's helper classes: under `bestax-no-helpers.css` the default
+     * stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+}
+/**
+ * Props for the Stack component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type StackProps<T extends LayoutElement = LayoutElement> = StackOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof StackOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * The `Stack` component lays its children out in a column, with Bulma's block spacing between them and the margins Bulma gives them zeroed.
+ *
+ * A Stack of Boxes, Cards or Notifications looks like Bulma's own stacked
+ * blocks, spaced by the gap alone, so there are no margins to undo. A `gap`
+ * step replaces the default spacing. It's always a column, top to bottom.
+ *
+ * @function
+ * @param {StackProps} props - Props for the Stack component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered stack.
+ *
+ * @example
+ * <Stack>
+ *   <Notification color="info">Your changes are saved.</Notification>
+ *   <Box>…</Box>
+ * </Stack>
+ */
+export declare const Stack: ConstrainedPolymorphicComponent<StackOwnProps, LayoutElement, "div">;
+export default Stack;