@allxsmith/bestax-bulma 5.57.5 → 5.59.0

package/dist/types-cjs/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-cjs/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-cjs/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-cjs/helpers/useTreeView.d.ts

@@ -30,7 +30,8 @@ export interface TreeViewPosition {
 }
 /**
  * What an item shows of the selection: `selected` in a `single` tree,
- * `checked` in a `checkbox` tree, and neither with `none`.
+ * `checked` in a `checkbox` or `checkbox-independent` tree, and neither with
+ * `none`.
  */
 export interface TreeViewItemState {
     selected?: boolean;
@@ -55,9 +56,12 @@ export interface TreeViewEngine {
     treeRef: React.MutableRefObject<HTMLUListElement | null>;
     /**
      * Whether a closed item still renders its children, drawing nothing, so a
-     * check knows everything under it. Only a checkbox tree needs to.
+     * check knows everything under it. Only a `checkbox` tree needs to: a check
+     * in a `checkbox-independent` tree reaches nothing under it.
      */
     rendersClosed: boolean;
+    /** Whether any number of items can be checked, in either checkbox mode. */
+    multiselectable: boolean;
     /** The item that holds `tabIndex={0}`. */
     tabStop: string | null;
     isOpen: (value: string) => boolean;
@@ -97,10 +101,12 @@ export interface TreeViewEngine {
  * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
- * a layout effect. In a checkbox tree a closed item's children still render
- * and register while drawing nothing, so the registry knows every item and a
- * check reaches all of them. The keys read the items on the page, in
- * document order, each time they need them.
+ * a layout effect. In a `checkbox` tree a closed item's children still
+ * render and register while drawing nothing, so the registry knows every item
+ * and a check reaches all of them. A `checkbox-independent` tree reads each
+ * box off the checked list alone, so a check adds or takes out its own value
+ * and nothing else. The keys read the items on the page, in document order,
+ * each time they need them.
  *
  * @function useTreeView
  * @param options - The TreeView's props.

package/dist/types-cjs/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';
@@ -55,6 +56,7 @@ export * from './elements/Link.js';
 export * from './elements/ListItem.js';
 export * from './elements/Loader.js';
 export * from './elements/Notification.js';
+export * from './elements/NumberFormatter.js';
 export * from './elements/OrderedList.js';
 export * from './elements/Paragraph.js';
 export * from './elements/Pre.js';
@@ -132,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';
@@ -144,12 +146,19 @@ export { Portal } from './helpers/portal.js';
 export type { PortalProps } from './helpers/portal.js';
 export { LocaleProvider, useLocale } from './helpers/LocaleProvider.js';
 export type { LocaleContextValue, LocaleProviderProps, TextDirection, } from './helpers/LocaleProvider.js';
+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-cjs/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-cjs/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-cjs/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-cjs/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;