@allxsmith/bestax-bulma 5.16.4 → 5.16.6

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

@@ -0,0 +1,55 @@
+/**
+ * Returns a space-separated string of class names based on input arguments.
+ *
+ * Accepts any mix of strings, numbers, arrays, or objects. Falsy values are ignored.
+ * Array and object values are recursively flattened, and object keys are included
+ * if their value is truthy. Duplicate class names are removed.
+ *
+ * @param {...(string | number | undefined | null | false | Record<string, unknown> | unknown[])} args - Class values to join.
+ * @returns {string} A space-separated string of unique class names.
+ *
+ * @example
+ * classNames('foo', ['bar', { baz: true }], { qux: false, quux: true });
+ * // => 'foo bar baz quux'
+ */
+export declare function classNames(...args: (string | number | undefined | null | false | Record<string, unknown> | unknown[])[]): string;
+/**
+ * Creates a prefixed version of classNames that automatically applies a prefix to all class names.
+ *
+ * @param {string} classPrefix - The prefix to apply to all class names.
+ * @returns {Function} A classNames function that applies the prefix.
+ *
+ * @example
+ * const prefixedClassNames = createPrefixedClassNames('bulma-');
+ * prefixedClassNames('button', { 'is-primary': true });
+ * // => 'bulma-button bulma-is-primary'
+ */
+export declare function createPrefixedClassNames(classPrefix: string): (...args: (string | number | undefined | null | false | Record<string, unknown> | unknown[])[]) => string;
+export default classNames;
+/**
+ * A simple wrapper around classNames that applies an optional prefix to all class names.
+ *
+ * @param {string | undefined} prefix - The prefix to apply to all class names. If undefined, no prefix is applied.
+ * @param {...(string | number | undefined | null | false | Record<string, unknown> | unknown[])} args - Class values to join.
+ * @returns {string} A space-separated string of unique class names, with prefix applied if provided.
+ *
+ * @example
+ * prefixedClassNames('bulma-', 'button', { 'is-primary': true });
+ * // => 'bulma-button bulma-is-primary'
+ *
+ * prefixedClassNames(undefined, 'button', { 'is-primary': true });
+ * // => 'button is-primary'
+ */
+export declare function prefixedClassNames(prefix: string | undefined, ...args: (string | number | undefined | null | false | Record<string, unknown> | unknown[])[]): string;
+/**
+ * Hook that automatically applies the classPrefix from Config context to class names.
+ *
+ * @param {...(string | number | undefined | null | false | Record<string, unknown> | unknown[])} args - Class values to join.
+ * @returns {string} A space-separated string of unique class names with prefix applied from context.
+ *
+ * @example
+ * // With ConfigProvider providing classPrefix="bulma-"
+ * const classes = usePrefixedClassNames('button', { 'is-primary': true });
+ * // => 'bulma-button bulma-is-primary'
+ */
+export declare function usePrefixedClassNames(...args: (string | number | undefined | null | false | Record<string, unknown> | unknown[])[]): string;

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

@@ -0,0 +1,17 @@
+/**
+ * Color values that emit an `is-<color>` modifier no shipped Bulma 1.0.4 rule
+ * matches on `.progress`/`.notification`/`.hero`. The `has-text-*` and
+ * `has-background-*` helpers DO cover these values — only the
+ * component-modifier form is dead.
+ */
+export declare const UNSTYLED_MODIFIER_COLORS: readonly ["black-bis", "black-ter", "white-bis", "white-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter"];
+/** Test-only: re-arm the warn-once registry. */
+export declare const resetColorDeprecationWarnings: () => void;
+/**
+ * Dev warning for a `color` value whose `is-<color>` modifier has no shipped
+ * CSS. `extraUnstyled` covers per-component dead values beyond the shared
+ * list (e.g. Hero's `inherit`/`current`).
+ */
+export declare const warnUnstyledColor: (component: string, value: string | undefined, extraUnstyled?: readonly string[]) => void;
+/** Dev warning for a `color` prop that has no shipped CSS for any value. */
+export declare const warnDeprecatedColorProp: (component: string, value: string | undefined, hint: string) => void;

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

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+/**
+ * Merges helper-emitted inline styles (e.g., `bulmaHelperStyles` from
+ * `useBulmaClasses`) with a user-supplied `style` prop.
+ *
+ * The user's `style` wins on conflicting properties, and when both inputs are
+ * absent the result is `undefined` — so components that receive neither
+ * render with no `style` attribute at all, exactly as before.
+ *
+ * @function mergeBulmaStyles
+ * @param helperStyles - Inline styles emitted by the Bulma helper hooks.
+ * @param style - The component consumer's `style` prop.
+ * @returns The merged style object, or `undefined` when both are absent.
+ * @example
+ * <section style={mergeBulmaStyles(bulmaHelperStyles, style)} />
+ */
+export declare const mergeBulmaStyles: (helperStyles?: CSSProperties, style?: CSSProperties) => CSSProperties | undefined;

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

@@ -0,0 +1,138 @@
+import type React from 'react';
+/**
+ * Whether an `as` target is a custom element rather than a built-in tag.
+ *
+ * HTML requires a custom element's name to contain a hyphen, and no built-in
+ * element name has one, so this is exact rather than a heuristic. It matters
+ * because a custom element is an intrinsic STRING — `typeof as === 'string'` is
+ * true — while its props are whatever a consumer declared through
+ * `React.JSX.IntrinsicElements`, the way this package declares `<ion-icon>`.
+ * A runtime backstop that filters built-in attributes must leave those alone,
+ * or it strips props the derived type just promised to forward.
+ */
+export declare function isCustomElement(as: unknown): as is string;
+/**
+ * The ref type of whatever element `as` renders.
+ *
+ * Derived from `ComponentPropsWithRef` rather than `React.ComponentRef` so it
+ * resolves on every `@types/react` a consumer may be on: this package supports
+ * React 18 and 19, and the CI matrix pins only `react`/`react-dom`, never the
+ * types, so a types-only regression here would not be caught.
+ *
+ * `never` when the target takes no ref. A plain function component has no `ref`
+ * key at all, and React's own types reject `<PlainFC ref={…} />`; without the
+ * guard the indexed access degraded to `unknown` and we accepted a ref that
+ * silently does nothing — `ref.current` stays null and a later `.focus()`
+ * throws. Matching React's strictness is the point.
+ */
+export type PolymorphicRef<T extends React.ElementType> = 'ref' extends keyof React.ComponentPropsWithRef<T> ? React.ComponentPropsWithRef<T>['ref'] : never;
+/**
+ * A component's own props, plus the attributes of the element `as` names.
+ *
+ * `Own` wins every collision — a component that declares `color` as a Bulma
+ * variant keeps it, rather than inheriting the DOM attribute of the same name.
+ * That subtraction is the ONLY one. `color` used to be dropped here as well, to
+ * stop the deprecated presentational HTML attribute reaching the three
+ * components whose own props do not declare one — but doing it in the shared
+ * type also stripped `color` from a CUSTOM target that legitimately has one.
+ * Those three declare `color?: never` themselves instead, which lands in
+ * `keyof Own` and reaches the same result without a special case here.
+ *
+ * Distributive over `T` on purpose. `Omit<A | B, K>` keys off `keyof (A | B)`,
+ * which is only what A and B share — so a union-typed `as` (a ternary, or a
+ * variable typed `'a' | 'button'`) silently lost every prop that belongs to
+ * just one member, `href` among them. Distributing produces a union of prop
+ * shapes instead, and each member keeps its own.
+ *
+ * Each component writes this intersection out in its own `*Props` alias rather
+ * than referring to this type: the API-docs extractor
+ * (`scripts/lib/props-extract.mjs`) walks heritage syntactically, and a generic
+ * alias leaves it resolving a type parameter it cannot see through.
+ * This type is here for the component's cast target and for consumers writing
+ * wrappers.
+ */
+export type PolymorphicProps<T extends React.ElementType, Own> = T extends unknown ? Own & Omit<React.ComponentPropsWithoutRef<T>, keyof Own | 'as'> & {
+    /** The element or component to render. */
+    as?: T;
+} : never;
+/**
+ * A component whose props and forwarded ref both follow `as`.
+ *
+ * `forwardRef` cannot express a generic component, so the implementation is
+ * cast to this. `displayName` is part of the type because the library sets it
+ * on every `forwardRef` component, and `withSubComponents` constrains its base
+ * to `{ displayName?: string }`.
+ *
+ * The second, non-generic signature exists for type DERIVATION rather than for
+ * calls. `React.ComponentProps<typeof Button>` infers from the last overload;
+ * with only the generic one it instantiated at the constraint and collapsed to
+ * `any`, so a consumer building their own prop type on ours lost every check.
+ * Calls still resolve against the generic signature first, so ordering here is
+ * load-bearing — swapping the two puts the collapse back.
+ *
+ * **A wrapping HOC erases the genericity.** `React.memo(Button)`,
+ * `React.lazy`, a `styled()` wrapper — anything that infers its props through
+ * `ComponentProps<T>` — instantiates the type parameter once and hands back a
+ * component with a single prop type. It takes the LAST call signature, which is
+ * the derivation overload, so the wrapper is pinned to the DEFAULT element:
+ * `React.memo(Button)` rejects `as="div"` outright, and `React.memo(Dropdown.Item)`
+ * renders neither a `<div>` nor a `<button>`, though both components accept those
+ * directly. Stricter, not looser — the checks do not stop, they collapse onto one
+ * element, and a `Dropdown.Item` memoized for a long menu list is the case that
+ * meets it. This is inherent to polymorphic components in TypeScript, not
+ * something this library can fix. Re-assert the type to get the rest back:
+ *
+ * ```tsx
+ * const MemoButton = React.memo(Button) as typeof Button;
+ * ```
+ */
+export interface PolymorphicComponent<Own, Default extends React.ElementType> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own> & {
+        ref?: PolymorphicRef<T>;
+    }): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own> & {
+        ref?: PolymorphicRef<Default>;
+    }): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * A component whose props follow `as` but which forwards no ref.
+ *
+ * For components that own the node they observe — `Reveal` keeps its own ref on
+ * the element it watches for scroll intersection, which is not always the
+ * element `as` names.
+ */
+export interface PolymorphicComponentWithoutRef<Own, Default extends React.ElementType> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * A component whose props follow `as`, where `as` is a closed set of tags.
+ *
+ * `PolymorphicComponentWithoutRef` lets `as` name anything; this narrows it to
+ * `Allowed`. Bulma pins some elements by its own markup contract — a dropdown
+ * item is an `<a>`, a `<div>` or a `<button>` and nothing else — and the
+ * constraint keeps that promise while still deriving props from whichever of
+ * the three a caller picks.
+ *
+ * Genericity is what makes the derivation exact for a LITERAL `as`, and it is
+ * worth the extra type parameter. Typing such a component as `React.FC<Union>`
+ * instead — a union of the three prop shapes — reads as equivalent but is not:
+ * against a union target, an object literal's excess-property check passes if
+ * the property exists in ANY member, so `<Item as="div" href="/x" />` slips
+ * through. Inferring `T` from the literal checks against that one member.
+ *
+ * A UNION-typed `as` — a ternary, or a variable typed as the whole set — infers
+ * `T` as the union and lands back in that same permissive check, so
+ * `<Item as={tag} href="/x" />` compiles whatever `tag` turns out to be. That is
+ * the open `as` behaviour too, and deliberate there: `PolymorphicProps`
+ * distributes precisely so a union-typed `as` KEEPS each member's props rather
+ * than losing every prop the members do not share. Narrowing it is not a
+ * constrained-component question; it would have to change for `Button` first.
+ */
+export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends React.ElementType, Default extends Allowed> {
+    <T extends Allowed = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+    displayName?: string;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
+ * `string` is treated as a `document.querySelector` selector (falling back to
+ * `document.body` when it matches nothing), and any falsy value — `undefined`
+ * or the empty string — resolves to `document.body`.
+ *
+ * The empty string is deliberately treated as "no target" rather than passed
+ * through: `document.querySelector('')` throws a `SyntaxError`, and callers
+ * building a selector from state can easily hand us `''`.
+ *
+ * @function resolvePortalContainer
+ * @param container - The requested portal target, if any.
+ * @returns The resolved DOM node to portal into.
+ */
+export declare function resolvePortalContainer(container?: string | HTMLElement): HTMLElement;

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

@@ -0,0 +1,9 @@
+/**
+ * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
+ * is true. Safe to call from multiple components at once — the body scroll
+ * is only restored once every active caller has released its lock.
+ *
+ * @function useScrollLock
+ * @param active - Whether this caller wants the body scroll locked.
+ */
+export declare function useScrollLock(active: boolean): void;

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

@@ -0,0 +1,60 @@
+import { type CSSProperties } from 'react';
+import { BulmaDisplayProps, BulmaViewportProps } from './bulmaClassHelpers.js';
+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 { BulmaOtherProps } from './useOtherClasses.js';
+/**
+ * Props for applying Bulma helper classes to components.
+ */
+export interface BulmaClassesProps extends BulmaColorProps, BulmaSpacingProps, BulmaTypographyProps, BulmaVisibilityProps, BulmaFlexboxProps, BulmaOtherProps {
+}
+/**
+ * {@link BulmaClassesProps} with `backgroundColor` widened to also accept the
+ * scheme color names from `validSchemeColors` (see
+ * {@link BulmaColorPropsWithScheme}). This is the input type of
+ * `useBulmaClasses`; scheme values surface as the `bulmaHelperStyles` return
+ * member instead of a class.
+ */
+export type BulmaClassesPropsWithScheme = Omit<BulmaClassesProps, keyof BulmaColorProps> & BulmaColorPropsWithScheme;
+/**
+ * A hook that generates Bulma helper classes from props and separates unhandled props.
+ *
+ * Composed from the per-concern mini hooks (useColorClasses, useSpacingClasses,
+ * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and
+ * useOtherClasses), which can also be used individually.
+ *
+ * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no
+ * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline
+ * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
+ * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
+ *
+ * @function useBulmaClasses
+ * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @returns An object containing the Bulma helper classes, optional helper
+ * styles, and unhandled props.
+ * @example
+ * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({
+ *   color: 'primary',
+ *   backgroundColor: 'scheme-main-bis',
+ *   className: 'custom-class'
+ * });
+ * // bulmaHelperClasses: 'has-text-primary'
+ * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
+ * // rest: { className: 'custom-class' }
+ */
+export declare const useBulmaClasses: <T extends object>(props: BulmaClassesPropsWithScheme & T) => {
+    bulmaHelperClasses: string;
+    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, validInteractions, validCursors, validRadii, validShadows, validResponsives, } from './bulmaClassHelpers.js';
+export type { BulmaViewportProps, BulmaDisplayProps };
+export * from './useColorClasses.js';
+export * from './useSpacingClasses.js';
+export * from './useTypographyClasses.js';
+export * from './useVisibilityClasses.js';
+export * from './useFlexboxClasses.js';
+export * from './useOtherClasses.js';

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

@@ -0,0 +1,69 @@
+import { type CSSProperties } from 'react';
+import { validColors, validColorShades, validSchemeColors } from './bulmaClassHelpers.js';
+/**
+ * Props for applying Bulma text and background color helper classes.
+ */
+export interface BulmaColorProps {
+    /** Text color class (e.g., 'primary', 'info'). */
+    color?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Text color shade suffix (e.g., '00', 'invert'). */
+    colorShade?: (typeof validColorShades)[number];
+    /** Background color class (e.g., 'primary', 'info'). */
+    backgroundColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color shade suffix (e.g., '00', 'invert'). */
+    backgroundColorShade?: (typeof validColorShades)[number];
+}
+/**
+ * {@link BulmaColorProps} with `backgroundColor` widened to also accept the
+ * scheme color names from `validSchemeColors` (e.g., 'scheme-main-bis').
+ *
+ * Scheme values never emit a `has-background-*` class — pass them through
+ * {@link useColorStyles} (or `useBulmaClasses`' `bulmaHelperStyles` return) to
+ * get the dark-mode-safe inline `background-color: var(--bulma-scheme-*)`
+ * style instead.
+ */
+export type BulmaColorPropsWithScheme = Omit<BulmaColorProps, 'backgroundColor'> & {
+    /** Background color: a Bulma color class name or a scheme color name. */
+    backgroundColor?: BulmaColorProps['backgroundColor'] | (typeof validSchemeColors)[number];
+};
+/**
+ * A hook that generates Bulma text and background color helper classes.
+ *
+ * Scheme background values (`scheme-main`, `scheme-main-bis`, …) are dropped
+ * from class emission — Bulma ships no `has-background-scheme-*` classes; use
+ * {@link useColorStyles} to render them as an inline style.
+ *
+ * @function useColorClasses
+ * @param props - Color-related Bulma helper props.
+ * @returns A space-separated string of color helper classes.
+ * @example
+ * const colorClasses = useColorClasses({
+ *   color: 'primary',
+ *   backgroundColor: 'info',
+ * });
+ * // colorClasses: 'has-text-primary has-background-info'
+ */
+export declare const useColorClasses: (props: BulmaColorPropsWithScheme) => string;
+/**
+ * A hook that generates inline styles for scheme-aware color props.
+ *
+ * When `backgroundColor` is one of the scheme color names in
+ * `validSchemeColors`, returns `{ backgroundColor: 'var(--bulma-<value>)' }` —
+ * an inline style that tracks Bulma's scheme CSS variables, so it adapts to
+ * light/dark mode with no bestax-shipped CSS. For every other input it
+ * returns `undefined` (never `{}`), so components that don't use scheme
+ * values produce identical DOM to before.
+ *
+ * `backgroundColorShade` is ignored for scheme values — Bulma defines no
+ * shaded scheme variables. Only the background is set: the `scheme-invert*`
+ * values do not change text color, so pair them with a contrasting
+ * foreground.
+ *
+ * @function useColorStyles
+ * @param props - Color-related Bulma helper props (scheme-aware).
+ * @returns An inline style object for scheme backgrounds, or `undefined`.
+ * @example
+ * const colorStyles = useColorStyles({ backgroundColor: 'scheme-main-bis' });
+ * // colorStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
+ */
+export declare const useColorStyles: (props: BulmaColorPropsWithScheme) => CSSProperties | undefined;

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

@@ -0,0 +1,46 @@
+import { validFlexDirections, validFlexWraps, validJustifyContents, validAlignContents, validAlignItems, validAlignSelfs, validFlexGrowShrink, BulmaDisplayProps } from './bulmaClassHelpers.js';
+/**
+ * Props for applying Bulma flexbox helper classes. The display props are read
+ * only to gate the flex container helpers; this hook never emits display
+ * classes itself.
+ */
+export interface BulmaFlexboxProps extends BulmaDisplayProps {
+    /** Flex direction (e.g., 'row', 'column'). */
+    flexDirection?: (typeof validFlexDirections)[number];
+    /** Flex wrap (e.g., 'wrap', 'nowrap'). */
+    flexWrap?: (typeof validFlexWraps)[number];
+    /** Justify content (e.g., 'center', 'space-between'). */
+    justifyContent?: (typeof validJustifyContents)[number];
+    /** Align content (e.g., 'center', 'stretch'). */
+    alignContent?: (typeof validAlignContents)[number];
+    /** Align items (e.g., 'center', 'flex-start'). */
+    alignItems?: (typeof validAlignItems)[number];
+    /** Align self (e.g., 'auto', 'center'). */
+    alignSelf?: (typeof validAlignSelfs)[number];
+    /** Flex grow value (e.g., '0', '1', '2', '3', '4', '5'). */
+    flexGrow?: (typeof validFlexGrowShrink)[number];
+    /** Flex shrink value (e.g., '0', '1', '2', '3', '4', '5'). */
+    flexShrink?: (typeof validFlexGrowShrink)[number];
+}
+/**
+ * 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.
+ *
+ * Note: this hook reads the display props purely as a gate and never emits
+ * display classes — `is-flex` and friends come from useVisibilityClasses (or
+ * the useBulmaClasses aggregate).
+ *
+ * @function useFlexboxClasses
+ * @param props - Flexbox-related Bulma helper props.
+ * @returns A space-separated string of flexbox helper classes.
+ * @example
+ * const flexboxClasses = useFlexboxClasses({
+ *   display: 'flex', // gates the container helpers, but emits no 'is-flex'
+ *   justifyContent: 'center',
+ * });
+ * // flexboxClasses: 'is-justify-content-center'
+ * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)
+ */
+export declare const useFlexboxClasses: (props: BulmaFlexboxProps) => string;

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

@@ -0,0 +1,12 @@
+/**
+ * Reports whether the component has passed hydration.
+ *
+ * Returns `false` during server rendering and during the hydrating client
+ * render, then `true` from the commit that follows. Use it to defer
+ * DOM-only behaviour (such as portalling) past hydration so the first client
+ * render matches the server markup instead of tripping hydration recovery.
+ *
+ * @function useIsHydrated
+ * @returns `true` once the hydrating render has completed, otherwise `false`.
+ */
+export declare function useIsHydrated(): boolean;

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

@@ -0,0 +1,43 @@
+import { validCursors, validFloats, validInteractions, validOverflows, validRadii, validResponsives, validShadows } from './bulmaClassHelpers.js';
+/**
+ * Props for applying miscellaneous Bulma helper classes.
+ */
+export interface BulmaOtherProps {
+    /** Float direction (e.g., 'left', 'right'). */
+    float?: (typeof validFloats)[number];
+    /** Overflow behavior (e.g., 'clipped'). */
+    overflow?: (typeof validOverflows)[number];
+    /** Applies overlay styling if true. */
+    overlay?: boolean;
+    /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
+    interaction?: (typeof validInteractions)[number];
+    /** Cursor style (e.g., 'pointer', 'help'). */
+    cursor?: (typeof validCursors)[number];
+    /** Border radius style (e.g., 'radiusless'). */
+    radius?: (typeof validRadii)[number];
+    /** Shadow style (e.g., 'shadowless'). */
+    shadow?: (typeof validShadows)[number];
+    /** Responsive behavior (e.g., 'mobile', 'narrow'). */
+    responsive?: (typeof validResponsives)[number];
+    /** Add Bulma skeleton class if true. */
+    skeleton?: boolean;
+    /** Applies clearfix to fix floating children if true. */
+    clearfix?: boolean;
+    /** Applies position: relative if true. */
+    relative?: boolean;
+    /** Applies height: 100% if true. */
+    fullHeight?: boolean;
+}
+/**
+ * A hook that generates miscellaneous Bulma helper classes (float, overflow,
+ * overlay, interaction, cursor, radius, shadow, responsive, skeleton,
+ * clearfix, relative, and full height).
+ *
+ * @function useOtherClasses
+ * @param props - Miscellaneous Bulma helper props.
+ * @returns A space-separated string of helper classes.
+ * @example
+ * const otherClasses = useOtherClasses({ float: 'left', skeleton: true });
+ * // otherClasses: 'is-pulled-left is-skeleton'
+ */
+export declare const useOtherClasses: (props: BulmaOtherProps) => string;

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

@@ -0,0 +1,45 @@
+import { validSizes } from './bulmaClassHelpers.js';
+/**
+ * Props for applying Bulma margin and padding helper classes.
+ */
+export interface BulmaSpacingProps {
+    /** Margin (e.g., '0', '1'). */
+    m?: (typeof validSizes)[number];
+    /** Margin top. */
+    mt?: (typeof validSizes)[number];
+    /** Margin right. */
+    mr?: (typeof validSizes)[number];
+    /** Margin bottom. */
+    mb?: (typeof validSizes)[number];
+    /** Margin left. */
+    ml?: (typeof validSizes)[number];
+    /** Margin horizontal (left and right). */
+    mx?: (typeof validSizes)[number];
+    /** Margin vertical (top and bottom). */
+    my?: (typeof validSizes)[number];
+    /** Padding (e.g., '0', '1'). */
+    p?: (typeof validSizes)[number];
+    /** Padding top. */
+    pt?: (typeof validSizes)[number];
+    /** Padding right. */
+    pr?: (typeof validSizes)[number];
+    /** Padding bottom. */
+    pb?: (typeof validSizes)[number];
+    /** Padding left. */
+    pl?: (typeof validSizes)[number];
+    /** Padding horizontal (left and right). */
+    px?: (typeof validSizes)[number];
+    /** Padding vertical (top and bottom). */
+    py?: (typeof validSizes)[number];
+}
+/**
+ * A hook that generates Bulma margin and padding helper classes.
+ *
+ * @function useSpacingClasses
+ * @param props - Spacing-related Bulma helper props.
+ * @returns A space-separated string of spacing helper classes.
+ * @example
+ * const spacingClasses = useSpacingClasses({ m: '2', px: '4' });
+ * // spacingClasses: 'm-2 px-4'
+ */
+export declare const useSpacingClasses: (props: BulmaSpacingProps) => string;

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

@@ -0,0 +1,51 @@
+import { validTextSizes, validAlignments, validTextTransforms, validTextWeights, validFontFamilies, BulmaViewportProps } from './bulmaClassHelpers.js';
+/**
+ * Props for applying Bulma typography helper classes.
+ */
+export interface BulmaTypographyProps extends BulmaViewportProps {
+    /** Text size (e.g., '1', '2'). */
+    textSize?: (typeof validTextSizes)[number];
+    /** Text alignment (e.g., 'centered', 'left'). */
+    textAlign?: (typeof validAlignments)[number];
+    /** Text transformation (e.g., 'uppercase', 'italic'). */
+    textTransform?: (typeof validTextTransforms)[number];
+    /** Text weight (e.g., 'light', 'bold'). */
+    textWeight?: (typeof validTextWeights)[number];
+    /** Font family (e.g., 'sans-serif', 'code'). */
+    fontFamily?: (typeof validFontFamilies)[number];
+    /** Text size for mobile viewport (up to 768px). */
+    textSizeMobile?: (typeof validTextSizes)[number];
+    /** Text size for tablet viewport (769px - 1023px). */
+    textSizeTablet?: (typeof validTextSizes)[number];
+    /** Text size for desktop viewport (1024px - 1215px). */
+    textSizeDesktop?: (typeof validTextSizes)[number];
+    /** Text size for widescreen viewport (1216px - 1407px). */
+    textSizeWidescreen?: (typeof validTextSizes)[number];
+    /** Text size for fullhd viewport (1408px and above). */
+    textSizeFullhd?: (typeof validTextSizes)[number];
+    /** Text alignment for mobile viewport (up to 768px). */
+    textAlignMobile?: (typeof validAlignments)[number];
+    /** Text alignment for tablet viewport (769px - 1023px). */
+    textAlignTablet?: (typeof validAlignments)[number];
+    /** Text alignment for desktop viewport (1024px - 1215px). */
+    textAlignDesktop?: (typeof validAlignments)[number];
+    /** Text alignment for widescreen viewport (1216px - 1407px). */
+    textAlignWidescreen?: (typeof validAlignments)[number];
+    /** Text alignment for fullhd viewport (1408px and above). */
+    textAlignFullhd?: (typeof validAlignments)[number];
+}
+/**
+ * A hook that generates Bulma typography helper classes, including
+ * viewport-specific text size and alignment variants.
+ *
+ * @function useTypographyClasses
+ * @param props - Typography-related Bulma helper props.
+ * @returns A space-separated string of typography helper classes.
+ * @example
+ * const typographyClasses = useTypographyClasses({
+ *   textSize: '3',
+ *   textWeight: 'bold',
+ * });
+ * // typographyClasses: 'is-size-3 has-text-weight-bold'
+ */
+export declare const useTypographyClasses: (props: BulmaTypographyProps) => string;

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

@@ -0,0 +1,43 @@
+import { validVisibilities, BulmaViewportProps, BulmaDisplayProps } from './bulmaClassHelpers.js';
+/**
+ * Props for applying Bulma visibility and display helper classes.
+ */
+export interface BulmaVisibilityProps extends BulmaViewportProps, BulmaDisplayProps {
+    /** Visibility (e.g., 'hidden', 'sr-only'). */
+    visibility?: (typeof validVisibilities)[number];
+    /** Visibility for mobile viewport (up to 768px). */
+    visibilityMobile?: (typeof validVisibilities)[number];
+    /** Visibility for tablet viewport (769px - 1023px). */
+    visibilityTablet?: (typeof validVisibilities)[number];
+    /** Visibility for tablet-only viewport (769px - 1023px, excludes desktop+). */
+    visibilityTabletOnly?: (typeof validVisibilities)[number];
+    /** Visibility for touch viewport (up to 1023px; mobile + tablet). */
+    visibilityTouch?: (typeof validVisibilities)[number];
+    /** Visibility for desktop viewport (1024px - 1215px). */
+    visibilityDesktop?: (typeof validVisibilities)[number];
+    /** Visibility for desktop-only viewport (1024px - 1215px, excludes widescreen+). */
+    visibilityDesktopOnly?: (typeof validVisibilities)[number];
+    /** Visibility for widescreen viewport (1216px - 1407px). */
+    visibilityWidescreen?: (typeof validVisibilities)[number];
+    /** Visibility for widescreen-only viewport (1216px - 1407px, excludes fullhd). */
+    visibilityWidescreenOnly?: (typeof validVisibilities)[number];
+    /** Visibility for fullhd viewport (1408px and above). */
+    visibilityFullhd?: (typeof validVisibilities)[number];
+}
+/**
+ * A hook that generates Bulma visibility and display helper classes. This hook
+ * owns all display class emission, including viewport-specific display props,
+ * the legacy display/viewport combination, and `display: 'none'` mapping to
+ * `is-hidden`.
+ *
+ * @function useVisibilityClasses
+ * @param props - Visibility- and display-related Bulma helper props.
+ * @returns A space-separated string of visibility and display helper classes.
+ * @example
+ * const visibilityClasses = useVisibilityClasses({
+ *   display: 'flex',
+ *   visibilityMobile: 'hidden',
+ * });
+ * // visibilityClasses: 'is-hidden-mobile is-flex'
+ */
+export declare const useVisibilityClasses: (props: BulmaVisibilityProps) => string;

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

@@ -0,0 +1,16 @@
+/**
+ * Attaches compound sub-components as statics on a base component and
+ * optionally sets the parent's displayName.
+ *
+ * Internal helper — it MUST mutate and return the same function object
+ * (`Object.assign`), never wrap the base in a new function: identity checks
+ * like `child.type === ModalCard` (Modal) and Field's displayName-based
+ * child detection rely on the attached component being the same object as
+ * the separately exported one.
+ *
+ * displayName is only ever set on the parent (and only when provided) —
+ * sub-components keep whatever displayName they declare themselves.
+ */
+export declare function withSubComponents<Base extends {
+    displayName?: string;
+}, Subs extends Record<string, unknown>>(base: Base, subs: Subs, displayName?: string): Base & Subs;