@allxsmith/bestax-bulma 5.57.5 → 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';
@@ -56,6 +57,7 @@ export { Link } from './esm/elements/Link.js';
 export { ListItem } from './esm/elements/ListItem.js';
 export { Loader } from './esm/elements/Loader.js';
 export { Notification, NotificationContainer, notification } from './esm/elements/Notification.js';
+export { NumberFormatter } from './esm/elements/NumberFormatter.js';
 export { OrderedList } from './esm/elements/OrderedList.js';
 export { Paragraph } from './esm/elements/Paragraph.js';
 export { Pre } from './esm/elements/Pre.js';
@@ -124,14 +126,19 @@ export { ClientOnly } from './esm/helpers/ClientOnly.js';
 export { useIsHydrated } from './esm/helpers/useIsHydrated.js';
 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/components/TreeView.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
 /**
  * How items are picked: `none`, nothing is; `single`, one item at a time;
- * `checkbox`, any number, with a box on every item and mixed parents.
+ * `checkbox`, any number, with a box on every item and mixed parents;
+ * `checkbox-independent`, any number, with a box on every item that checks
+ * that item alone.
  */
-export type TreeViewSelectionMode = 'none' | 'single' | 'checkbox';
+export type TreeViewSelectionMode = 'none' | 'single' | 'checkbox' | 'checkbox-independent';
 /**
  * Props for the TreeView component. The helper props, the other attributes
  * and the `ref` land on the `<ul role="tree">`.
@@ -25,6 +27,9 @@ export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElemen
      * `single`: one item, picked with Enter, Space or a click.
      * `checkbox`: any number, checked with Space or a click. A check reaches
      * every enabled item under it, and a parent with some of them checked is mixed.
+     * `checkbox-independent`: any number, checked with Space or a click, each
+     * box for its own item. A check reaches nothing under it, and no parent is
+     * mixed (Mantine's and Ant Design's `checkStrictly`).
      */
     selectionMode?: TreeViewSelectionMode;
     /**
@@ -42,18 +47,22 @@ export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElemen
     onSelectedChange?: (value: string) => void;
     /**
      * The checked items' values when you hold the state. Read with `checkbox`
-     * only. A value checks its item, and an enabled item also counts as checked
-     * when any item above it is in the list, so a parent's value stands for its
-     * whole branch, loaded or not. A disabled item is checked only by its own value.
+     * and `checkbox-independent` only. A value checks its item. In `checkbox`,
+     * an enabled item also counts as checked when any item above it is in the
+     * list, so a parent's value stands for its whole branch, loaded or not, and
+     * a disabled item is checked only by its own value. In
+     * `checkbox-independent`, a value checks its own item and nothing else.
      */
     checked?: string[];
-    /** The values checked to begin with, when the tree holds its own state. Read with `checkbox` only. */
+    /** The values checked to begin with, when the tree holds its own state. Read with `checkbox` and `checkbox-independent` only. */
     defaultChecked?: string[];
     /**
-     * Called after a check or an uncheck with every item that now shows
-     * checked, parents included, plus any earlier value that matches no item
-     * the tree knows, left as it was. The order means nothing. Passed back as
-     * `checked`, the list shows the same boxes.
+     * Called after a check or an uncheck. In `checkbox`, with every item that
+     * now shows checked, parents included, plus any earlier value that matches
+     * no item the tree knows, left as it was, and the order means nothing. In
+     * `checkbox-independent`, with the list as it was, the item's value added
+     * at the end or every copy of it taken out, and everything else in the
+     * same order. Passed back as `checked`, the list shows the same boxes.
      */
     onCheckedChange?: (checked: string[]) => void;
     /**
@@ -103,7 +112,7 @@ export interface TreeViewItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEle
     icon?: React.ReactNode;
     /**
      * `TreeView.Item`s under this one. Render them whenever you have them,
-     * open or not: the tree hides them while it's closed, and a checkbox tree
+     * open or not: the tree hides them while it's closed, and a `checkbox` tree
      * needs them to know what a check reaches.
      */
     children?: React.ReactNode;

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/elements/NumberFormatter.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the NumberFormatter component. The helper props, the other
+ * attributes and the `ref` land on the `<data>`.
+ *
+ * @extraProp {React.Ref<HTMLDataElement>} [ref] - Ref forwarded to the `<data>`.
+ */
+export interface NumberFormatterProps extends Omit<React.DataHTMLAttributes<HTMLDataElement>, 'value' | 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The number. The text is what `Intl.NumberFormat` writes for it, `NaN`
+     * and `Infinity` included. The `<data>` element's `value` attribute holds
+     * it as `String()` writes it, except that `-0` keeps its sign, so
+     * `Number()` reads it back: `1234.5`, `1e+21` for a very large one and
+     * `1e-7` for a very small one, `NaN`, `Infinity` and `-0`.
+     */
+    value: number;
+    /**
+     * `Intl.NumberFormat` options: a currency, a percentage, a unit, compact
+     * notation, the fraction digits, the sign. Options `Intl` refuses, such as
+     * `style: 'currency'` with no `currency`, throw its error.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * BCP 47 locale tag. Unset, it's the `locale` of a `LocaleProvider` around
+     * it, and with neither, the runtime's own. On a server render that's the
+     * server's, so give it a locale, here or through a `LocaleProvider`, where
+     * the server's and the browser's can differ. A tag `Intl` refuses, such as
+     * `"en_US"`, is ignored, with a warning in development, as
+     * `LocaleProvider` ignores one.
+     */
+    locale?: string;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * The `NumberFormatter` component writes a number the way a locale writes it, such as a price, a percentage or a count, in a `<data>` element that keeps the number itself in its `value`.
+ *
+ * It formats with `Intl.NumberFormat`, in its own `locale`, else the
+ * `LocaleProvider`'s around it, else the runtime's, with `format` as the
+ * options. The `<data>` has no role and no class of its own, so a screen
+ * reader reads the formatted text and it takes the look of the text around
+ * it. For text outside JSX, such as an `aria-label`, `useNumberFormat`
+ * gives the same formatting as a function.
+ *
+ * @function
+ * @param {NumberFormatterProps} props - Props for the NumberFormatter component.
+ * @param {React.Ref<HTMLDataElement>} ref - Forwarded ref to the `<data>`.
+ * @returns {JSX.Element} The rendered number.
+ *
+ * @example
+ * <NumberFormatter
+ *   value={8456.4}
+ *   format={{ style: 'currency', currency: 'USD' }}
+ * />
+ */
+export declare const NumberFormatter: React.ForwardRefExoticComponent<NumberFormatterProps & React.RefAttributes<HTMLDataElement>>;
+export default NumberFormatter;

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

@@ -36,6 +36,13 @@ export interface LocaleProviderProps extends Omit<React.HTMLAttributes<HTMLDivEl
     /** The part of the app it covers. */
     children?: React.ReactNode;
 }
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. A tag in
+ * canonical form, or `undefined` for an empty or missing one and for one
+ * `Intl` refuses, which `refused` reports: by default the provider's own
+ * development warning, once per tag.
+ */
+export declare function validLocale(tag: string | undefined, refused?: (tag: string) => void): string | undefined;
 /**
  * Sets the language and writing direction for the part of the app inside it, on a wrapper `<div>` and on what the library portals out of it.
  *

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/localeFormat.d.ts

@@ -1,17 +1,39 @@
 /** Formats a number for display, with `Intl.NumberFormat` options. */
-export type NumberFormatter = (value: number, options?: Intl.NumberFormatOptions) => string;
+export type NumberFormatFunction = (value: number, options?: Intl.NumberFormatOptions) => string;
 /** Whether `text` contains `query`, as the locale compares letters. */
 export type TextMatcher = (text: string, query: string) => boolean;
 /**
- * A formatter for numbers shown on screen, in the locale of the
- * `LocaleProvider` around the component, or `null` outside one that gives a
- * locale. Formatters are kept per set of options, since building one is the
- * expensive part.
+ * A function that writes numbers for display in a locale: `locale` when given, else the `LocaleProvider`'s around the component, else the runtime's.
+ *
+ * Formatters are kept per locale and set of options, since building one is
+ * the expensive part, and shared, so many numbers written the same way build
+ * one. The function is the same from one render to the next for the same
+ * locale, so it's safe in a dependency array. Use it for text outside JSX,
+ * such as an `aria-label`, a `placeholder` or a chart's axis; in JSX,
+ * `NumberFormatter` also marks the number up. On a server render the
+ * runtime's locale is the server's, so give it a locale, here or through a
+ * `LocaleProvider`, where the server's and the browser's can differ. A tag
+ * `Intl` refuses is ignored, with a warning in development, as
+ * `LocaleProvider` ignores one. Options `Intl` refuses throw its error when
+ * the function is called.
+ *
+ * @function
+ * @param locale - A BCP 47 locale tag, which wins over the provider's.
+ * @returns {NumberFormatFunction} Writes `value` with `Intl.NumberFormat` options.
  *
- * @param own - The component's own locale, such as a picker's `locale`,
- * which wins inside a provider.
+ * @example
+ * const format = useNumberFormat();
+ * const placeholder = format(1500, { style: 'currency', currency: 'EUR' });
+ */
+export declare function useNumberFormat(locale?: string): NumberFormatFunction;
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Number formatting
+ * for a component that shows a number in passing, as `useNumberFormat`
+ * writes it in the `LocaleProvider`'s locale, or `null` outside a provider
+ * and inside one that gives no locale, as a provider with only a `dir`
+ * doesn't, where the component keeps the formatting it has always had.
  */
-export declare function useNumberFormat(own?: string): NumberFormatter | null;
+export declare function useScopedNumberFormat(): NumberFormatFunction | null;
 /**
  * A matcher for filtering a list by what was typed, in the locale of the
  * `LocaleProvider` around the component, or `null` outside one that gives a

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/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/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';